update

gaoshp

2024-11-19 f29900986f01cf5d39b5755cec674825cef27961

 src/views/mdc/processParam/TimeLine.vue

@@ -1,30 +1,34 @@
<!--
 * @Date: 2024-04-23 20:03:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-23 22:32:52
 * @LastEditTime: 2024-06-18 23:16:52
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
-->
<template>
    <el-main>
    <el-main style="padding: 0 30px;">
        <el-row>
            <el-col :span="1">
                <el-slider v-model="step" :min="1" :max="4" :step="1" show-stops />
            </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
                background: item.color,
                left: item.left + '%'
            }">
                {{ item.shiftName }}
            </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">
                <div class="title">{{ item.title }}</div>
                <div class="date">
                    <p>{{ item.date }}</p>
                </div>
            </div>
        </div>
    </el-main>
@@ -35,10 +39,11 @@
export default {
    data() {
        return {
            step: 1,
            step: 2,
            params: {},
            dateList: [],
            lines: []
            lines: [],
            active: 0,
        }
    },
    watch: {
@@ -48,13 +53,24 @@
    },
    methods: {
        init(params) {
            this.active = 0
            this.params = params
            this.queryTime(params)
            this.setLines()
        },
        changeActive(index) {
            this.active = index
            this.$emit('update:modelValue', this.lines[index])
        },
        getColor(v) {
            if (v.shiftIndex === 1) return { color: 'rgb(211, 174, 248)' }
            return { color: 'rgb(233, 241, 208)' }
        },
        setDate(v) {
            if (moment(v.startTime).format('HH:mm:ss') === '00:00:00') return {
                dateTitle: moment(v.startTime).format('MM-DD')
            }
            return {}
        },
        setLines() {
            this.lines = []
@@ -62,16 +78,20 @@
            let max = moment(`${this.params.dates[1]} 24:00:00`, 'YYYY-MM-DD HH:mm:ss')
            let total = max.diff(min)
            let lineNum = total / (this.step * 60 * 60 * 1000)
            console.log(total, lineNum)
            for (let i = 0; i < lineNum; i++) {
                let currentDate = min.format('MM-DD')
                this.lines.push({
                    title: `${i * this.step}:00`
                    date: min.format('HH:mm').endsWith('00:00') ? min.format('MM-DD') : '',
                    title: min.format('HH:mm'),
                    startTime: min.format('YYYY-MM-DD HH:mm:ss'),
                    endTime: min.add(this.step, 'h').format('YYYY-MM-DD HH:mm:ss')
                })
                this.changeActive(0)
            }
        },
        queryTime(data) {
            if (!data.workstationId) return
            this.$HTTP.post('/api/blade-mdc/process-parameter/all-shift-time', {
            this.$HTTP.post('/api/mdc/process-parameter/all-shift-time', {
                ...data
            }).then(res => {
                if (res.code == 200) {
@@ -80,12 +100,14 @@
                    let full = moment(`${this.params.dates[0]} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').diff(moment(`${this.params.dates[1]} 24:00:00`, 'YYYY-MM-DD HH:mm:ss'))
                    this.dateList = res.data.filter(v => {
                        return moment(v.startTime).isBetween(min, max) || moment(v.endTime).isBetween(min, max)
                    }).map(v => {
                    }).map((v, i) => {
                        if (moment(v.startTime).isBetween(min, max) && moment(v.endTime).isBetween(min, max)) {
                            let current = moment(v.startTime, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.endTime, 'YYYY-MM-DD HH:mm:ss'))
                            return {
                                ...v,
                                left: moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.startTime, 'YYYY-MM-DD HH:mm:ss')) / full * 100,
                                ...this.getColor(v),
                                ...this.setDate(v),
                                width: (current / full * 100).toFixed(2)
                            }
                        } else if (moment(v.startTime).isBetween(min, max)) {
@@ -94,6 +116,8 @@
                                ...v,
                                ...this.getColor(v),
                                endTime: max,
                                ...this.setDate(v),
                                left: moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.startTime, 'YYYY-MM-DD HH:mm:ss')) / full * 100,
                                width: (current / full * 100).toFixed(2)
                            }
                        } else {
@@ -102,12 +126,13 @@
                                ...v,
                                ...this.getColor(v),
                                startTime: min,
                                ...this.setDate(v),
                                left: moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(min, 'YYYY-MM-DD HH:mm:ss')) / full * 100,
                                width: (current / full * 100).toFixed(2)
                            }
                        }

                    })
                    console.log(this.dateList, '>>>>>>')
                }
            })
        }
@@ -118,38 +143,70 @@
<style lang="scss" scoped>
.timeline-box {
    height: 20px;
    display: flex;
    // display: flex;
    position: relative;
    background: #d8e8e8;

    &-item {
        position: absolute;
        height: 22px;
        line-height: 22px;
        text-align: center;
        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;
    height: 50px;
    position: relative;
    top: -20px;
    width: 100%;

    &-item {
        flex: 1 1 auto;
        padding: 0 3px;
        height: 20px;
        padding: 20px 3px 0;
        position: relative;
        box-sizing: border-box;

        border: 1px solid transparent;

        &>div.title {
            position: absolute;
            z-index: 9;
            top: 15px;
            left: 0;
            transform: rotate(-45deg) translateX(-50%);
        }

        &>div.date {
            position: absolute;
            z-index: 9;
            top: 50px;
            left: 0;
            transform: translateX(-50%);

            p {
                white-space: pre;
            }
        }

        &:hover,
        &.active {
            height: 18px;
            box-sizing: border-box;
            border: 1px solid red;
        }
    }



    &-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 20px;
        width: 1px;
        height: 10px;
        background: #ccc;