Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

lzhe

2024-04-23 c709cfdf23c65038ce811ea7c1b1fe1850d02969

 src/views/mdc/processParam/TimeLine.vue

对比新文件
@@ -0,0 +1,167 @@
<!--
 * @Date: 2024-04-23 20:03:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-23 22:32:52
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/TimeLine.vue
-->
<template>
    <el-main>
        <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
            }">
                {{ 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>
        </div>
    </el-main>
</template>

<script>
import moment from 'moment'
export default {
    data() {
        return {
            step: 1,
            params: {},
            dateList: [],
            lines: []
        }
    },
    watch: {
        step() {
            this.setLines()
        }
    },
    methods: {
        init(params) {
            this.params = params
            this.queryTime(params)
            this.setLines()
        },
        getColor(v) {
            if (v.shiftIndex === 1) return { color: 'rgb(211, 174, 248)' }
            return { color: 'rgb(233, 241, 208)' }
        },
        setLines() {
            this.lines = []
            let min = moment(`${this.params.dates[0]} 00:00:00`, 'YYYY-MM-DD HH:mm:ss')
            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++) {
                this.lines.push({
                    title: `${i * this.step}:00`
                })
            }
        },
        queryTime(data) {
            if (!data.workstationId) return
            this.$HTTP.post('/api/blade-mdc/process-parameter/all-shift-time', {
                ...data
            }).then(res => {
                if (res.code == 200) {
                    let min = moment(`${this.params.dates[0]} 00:00:00`, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
                    let max = moment(`${this.params.dates[1]} 24:00:00`, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
                    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 => {
                        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,
                                ...this.getColor(v),
                                width: (current / full * 100).toFixed(2)
                            }
                        } else if (moment(v.startTime).isBetween(min, max)) {
                            let current = moment(v.startTime, 'YYYY-MM-DD HH:mm:ss').diff(moment(max, 'YYYY-MM-DD HH:mm:ss'))
                            return {
                                ...v,
                                ...this.getColor(v),
                                endTime: max,
                                width: (current / full * 100).toFixed(2)
                            }
                        } else {
                            let current = moment(min, 'YYYY-MM-DD HH:mm:ss').diff(moment(v.endTime, 'YYYY-MM-DD HH:mm:ss'))
                            return {
                                ...v,
                                ...this.getColor(v),
                                startTime: min,
                                width: (current / full * 100).toFixed(2)
                            }
                        }

                    })
                    console.log(this.dateList, '>>>>>>')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.timeline-box {
    height: 20px;
    display: flex;
    position: relative;

    &-item {
        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;

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

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

    &-item.last::after {
        content: "";
        position: absolute;
        right: 0;
        width: 1px;
        height: 10px;
        background: #ccc;
    }
}
</style>