编辑时间轴组件

gaoshp

2024-04-23 88dc89d715828ae485cd00772c0c690b58a7b650

编辑时间轴组件

 src/views/mdc/components/Shift.vue

@@ -1,15 +1,15 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-20 21:04:39
 * @LastEditTime: 2024-04-23 19:45:06
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Shift.vue
-->
<template>
    <el-row>
        <el-col>
            <el-button-group>
                <el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''"
                    v-for="item in btnList" :key="item.id">{{
                <el-button size="small" @click="btnListActive = item.id"
                    :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
                        item.title }}</el-button>
            </el-button-group>
        </el-col>
@@ -171,7 +171,7 @@
                }
                option2.dataset.source = [['product', '鐝1', '鐝2']]
                res.data.items.records.forEach(v => {
                    option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1], v.data[2] === '-' ? 0 : v.data[1]])
                    option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1], v.data[2] === '-' ? 0 : v.data[2]])
                });
                this.option2 = option2
                console.log(option2)

 src/views/mdc/components/ShiftAlarm.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-21 18:49:27
 * @LastEditTime: 2024-04-23 19:45:00
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/ShiftAlarm.vue
-->
<template>
@@ -9,8 +9,8 @@
        <el-row>
            <el-col>
                <el-button-group>
                    <el-button @click="btnListActive = item.id" :type="btnListActive == item.id ? 'primary' : ''"
                        v-for="item in btnList" :key="item.id">{{
                    <el-button size="small" @click="btnListActive = item.id"
                        :type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
                            item.title }}</el-button>
                </el-button-group>
            </el-col>

 src/views/mdc/components/Time.vue

@@ -1,14 +1,14 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-20 20:57:47
 * @LastEditTime: 2024-04-23 19:44:57
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Time.vue
-->
<template>
    <el-row>
        <el-col>
            <el-button-group>
                <el-button @click="statisticalMethod = item.value"
                <el-button size="small" @click="statisticalMethod = item.value"
                    :type="statisticalMethod == item.value ? 'primary' : ''" v-for="item in btnList"
                    :key="item.value">{{
                        item.label }}</el-button>

 src/views/mdc/processParam/TimeLine.vue

对比新文件
@@ -0,0 +1,155 @@
<!--
 * @Date: 2024-04-23 20:03:41
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-23 22:20:35
 * @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-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;

    &-item {
        text-align: center;
        flex: 0 0 auto;
    }
}

.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>

 src/views/mdc/processParam/index.vue

@@ -1,24 +1,83 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-13 22:16:48
 * @LastEditTime: 2024-04-23 21:40:53
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/processParam/index.vue
 瀹炴椂鐪嬫澘
-->
<template>
    <el-main>
        <el-card shadow="never">
            鏁堢巼鍒嗘瀽
            <el-container style="height: 100%;">
                <el-aside width="300px" style="height: 100%;">
                    <el-container>
                        <el-main class="nopadding">
                            <el-row style="margin-top: 14px;">
                                宸ヤ綅
                            </el-row>
                            <MYTree v-model="treeChecked" @loaded="query"></MYTree>
                        </el-main>
                    </el-container>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-row>
                            <el-col style='text-align: right;'>
                                <el-date-picker :max-range="3" :clearable="false" value-format="YYYY-MM-DD"
                                    style="width: 250px" v-model="time" type="daterange" range-separator="-"
                                    start-placeholder="" end-placeholder="" :disabled-date="disabledDate"
                                    @calendar-change="change" />
                            </el-col>
                        </el-row>
                        <TimeLine ref="timeLine"></TimeLine>
                    </el-main>
                </el-container>
            </el-container>
        </el-card>
    </el-main>
</template>

<script>
    export default {
        
    }
import moment from 'moment'
import TimeLine from './TimeLine.vue'
import MYTree from '../MYTree.vue'
export default {
    components: {
        TimeLine,
        MYTree
    },
    watch: {
        treeChecked() {
            this.query()
        },
        time() {
            this.query()
        }
    },
    data() {
        return {
            treeChecked: [],
            timeStart: moment().format('YYYY-MM-DD'),
            time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
            disabledDate: Date => {
                let max = moment(this.timeStart, 'YYYY-MM-DD').add(3, 'd').format('YYYY-MM-DD')
                let min = moment(this.timeStart, 'YYYY-MM-DD').subtract(3, 'd').format('YYYY-MM-DD')
                return !moment(Date).isBetween(min, max);
            }
        }
    },
    methods: {
        query() {
            this.$refs.timeLine.init({
                dates: this.time,
                workstationId: this.treeChecked.toString()
            })
        },
        change(e) {
            this.timeStart = e[0] || moment().format('YYYY-MM-DD')
        }
    },
}
</script>

<style lang="scss" scoped>

</style>
<style lang="scss" scoped></style>