update

gaoshp

2024-04-23 7243d05010bde40a8c82b7cbbf904eeb35168cdd

 src/views/mdc/processParam/TimeLine.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-23 20:03:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-23 22:32:52
 * @LastEditTime: 2024-04-23 23:03:45
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
-->
<template>
@@ -12,8 +12,6 @@
            </el-col>
        </el-row>
        <div class="timeline-box">
            <div class="timeline-box-current" :style="{ width: 100 / lines.length + '%' }"></div>
            <div class="timeline-box-hover"></div>
            <div class="timeline-box-item" v-for="item in dateList" :key="item.startTime" :style="{
                width: item.width + '%',
                background: item.color
@@ -22,9 +20,11 @@
            </div>
        </div>
        <div class="timeline-line">
            <div class="timeline-line-item" :class="lines.length - 1 === index ? 'last' : ''"
                v-for="(item, index) in lines" :key="index">
                {{ item.title }}
            <div class="timeline-line-item" @click="changeActive(index)" :class="{
                last: lines.length - 1 === index,
                active: index === active
            }" v-for="(item, index) in lines" :key="index">
                <!-- {{ item.title }} -->
            </div>
        </div>
    </el-main>
@@ -38,7 +38,8 @@
            step: 1,
            params: {},
            dateList: [],
            lines: []
            lines: [],
            active: 0,
        }
    },
    watch: {
@@ -48,9 +49,13 @@
    },
    methods: {
        init(params) {
            this.active = 0
            this.params = params
            this.queryTime(params)
            this.setLines()
        },
        changeActive(index) {
            this.active = index
        },
        getColor(v) {
            if (v.shiftIndex === 1) return { color: 'rgb(211, 174, 248)' }
@@ -63,11 +68,16 @@
            let total = max.diff(min)
            let lineNum = total / (this.step * 60 * 60 * 1000)
            console.log(total, lineNum)
            let date = ''
            for (let i = 0; i < lineNum; i++) {
                let currentDate = min.add(this.step, 'h').format('YYYY-MM-DD')
                this.lines.push({
                    title: `${i * this.step}:00`
                    date: currentDate === date ? '' : currentDate,
                    title: min.format('HH:mm')
                })
                date = currentDate
            }
            console.log(this.lines, '>>>>>>.1')
        },
        queryTime(data) {
            if (!data.workstationId) return
@@ -126,26 +136,25 @@
        flex: 0 0 auto;
    }

    .timeline-box-current,
    .timeline-box-hover {
        height: 20px;
        position: absolute;
        left: 0;
        z-index: 1;
        border: 1px solid red;
    }
}

.timeline-line {
    display: flex;
    height: 20px;
    position: relative;
    top: -20px;

    &-item {
        flex: 1 1 auto;
        padding: 0 3px;
        padding: 20px 3px 0;
        position: relative;
    }

    .timeline-line-item:hover,
    .timeline-line-item.active {
        border: 1px solid red;
    }

    &-item::before {
        content: "";
        position: absolute;