gaoshp
2024-11-19 f29900986f01cf5d39b5755cec674825cef27961
src/views/mdc/processParam/index.vue
@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-11-03 20:10:01
 * @LastEditTime: 2024-11-13 20:20:54
 * @FilePath: /cps-web/src/views/mdc/processParam/index.vue
 实时看板
-->
@@ -43,8 +43,14 @@
                                    v-if="(item.paramChartType == 'distribute' && item?.dayCharts?.series?.length > 1) || (item.paramChartType !== 'distribute' && item?.dayCharts?.series?.length > 0) && activeList.indexOf(index) > -1">
                                    <div>
                                        <el-button size="small" @click="viewData(item)">查看数据</el-button>
                                        <el-switch style="margin-left: 8px;" v-model="item.showPie"
                                            v-show="item.paramChartType == 'distribute'" active-text="饼图"
                                            inactive-text="" />
                                    </div>
                                    <scEcharts style="width:100%" :height="item.height" :option="item?.dayCharts">
                                    <scEcharts v-if="!item.showPie" style="width:100%" :height="item.height"
                                        :option="item?.dayCharts">
                                    </scEcharts>
                                    <scEcharts v-else style="width:100%" height="300px" :option="item?.pieCharts">
                                    </scEcharts>
                                </div>
                                <el-empty v-else description="暂无数据" />
@@ -172,7 +178,7 @@
            this.visible = true
        },
        init() {
            this.$HTTP.get('/api/mdc/process-parameter').then(res => {
            this.$HTTP.get('/api/smis/global_wcs/wcs-achievements').then(res => {
                if (res.code === 200) {
                    this.legend = res.data
                }
@@ -211,7 +217,6 @@
        },
        query() {
            if (!this.treeChecked.toString()) return
            console.log(this.treeChecked.toString(), '>>>>>>>>>/')
            this.$refs?.timeLine?.init({
                dates: this.time,
                workstationId: this.treeChecked.toString()
@@ -219,13 +224,12 @@
            this.list = []
            this.$HTTP.get('/api/mdc/process-parameter/params', { workstationId: this.treeChecked.toString() }).then(res => {
                if (res.code === 200) {
                    console.log('jkjkjkjkj', this.list)
                    this.list = res.data.map(v => {
                        let name = v.isProcessParam ? 'ProcessProgram' : v.dpName
                        return {
                            ...v,
                            name: name,
                            height: ['ProcessProgram', 'DeviceStatus'].includes(v.name) ? '100px' : '200px'
                            height: v.paramChartType == 'distribute' ? '300px' : '200px'
                        }
                    })
                    this.queryChart()
@@ -271,7 +275,6 @@
                } else {
                    this.setLineOptions(res.data.data, item.dpName)
                }
                console.log(this.list, '>>>>>>>>>>//////1')
            })
        },
        setLineOptions(data, myname) {
@@ -311,34 +314,41 @@
                let index = this.list.findIndex(item => item.dpName === myname)
                this.list[index] = Object.assign({
                    ...this.list[index],
                    dayCharts: {}
                    dayCharts: {},
                    showPie: false
                })
            } else {
                let index = this.list.findIndex(item => item.dpName === myname)
                this.list[index] = Object.assign({
                    ...this.list[index],
                    dayCharts
                    dayCharts,
                    showPie: false
                })
            }
        },
        setDeviceStatusOptions(data, myname) {
            debugger
            let total = Math.abs(moment(this.timeRange.startTime).diff(moment(this.timeRange.endTime)))
            let start = this.timeRange.startTime
            let len = data?.data?.length
            if (len > 0 && moment(data.data[len - 1].time).unix() < moment(this.timeRange.endTime).unix()) {
                let addItem = {
                    time: this.timeRange.endTime,
                    value: data.data[len - 1].value
                    value: myname === 'DeviceStatus' ? data.data[len - 1].name : data.data[len - 1].value,
                }
                data.data.push(addItem)
            }
            let series = data.data.map((item, i) => {
                let current = Math.abs(moment(start).diff(moment(item.time)))
                start = item.time
                let name = i === 0 ? '' : data.data[i - 1].name
                let name = i === 0 ? '' : myname === 'DeviceStatus' ? data.data[i - 1].name : data.data[i - 1].value
                // if (myname === 'ProcessProgram') {
                name = item.value
                try {
                    name = myname === 'DeviceStatus' ? item.name.slice(-50) : item.value.slice(-50)
                } catch (err) {
                    name = myname === 'DeviceStatus' ? item.name : item.value
                }
                // }
                // let color = !name ? 'transparent' : data.data[i - 1].color
                return {
@@ -356,11 +366,9 @@
                    //         return `${name}:开始时间${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}`
                    //     }
                    // },
                    // itemStyle: {
                    //     // color, // 这一行固定的颜色值需要删除或注释
                    //     borderColor: '#FFF',
                    //     borderWidth: 1
                    // },
                    itemStyle: {
                        color: item.color, // 这一行固定的颜色值需要删除或注释
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
@@ -374,7 +382,7 @@
                            // return current.format('HH:mm')
                            // return value
                            if (i == 0 || current === 0) return ''
                            return `${name}:时段${moment(data.data[i - 1].time).format('HH:mm')}-${moment(item.time).format('HH:mm')}`
                            return `${name}:时段${moment(data.data[i - 1].time).format('HH:mm:ss')}-${moment(item.time).format('HH:mm:ss')}`
                        }
                    },
                }
@@ -413,12 +421,72 @@
                    },
                },
            }
            console.log(dayCharts, '>>>>>>>???')
            let index = this.list.findIndex(item => item.dpName === myname)
            this.list[index] = Object.assign({
                ...this.list[index],
                dayCharts
                dayCharts,
                pieCharts: this.getPieCharts(data.data, myname),
                showPie: false
            })
            // console.log(this.list, '>>>>>>>>>>>>>>>>>>>>>>111')
        },
        getPieCharts(data, myname) {
            let start = this.timeRange.startTime
            const obj = {
            }
            let key = myname === 'DeviceStatus' ? 'name' : 'value'
            data.forEach(v => {
                if (obj[v[key]]) {
                    obj[v[key]] += moment(v.time).valueOf() - moment(start).valueOf()
                } else {
                    obj[v[key]] = moment(v.time).valueOf() - moment(start).valueOf()
                }
                start = v.time
            })
            let result = Object.keys(obj).map(key => {
                return {
                    value: obj[key] / 1000,
                    name: key,
                    // itemStyle: {
                    //     color: item.color, // 这一行固定的颜色值需要删除或注释
                    // },
                }
            }).map(v => {
                if (myname === 'DeviceStatus') {
                    return {
                        ...v,
                        itemStyle: {
                            color: this.legend.find(item => item.name === v.name).color
                        }
                    }
                }
                return v
            })
            let charts = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        let d = moment.duration(params.value, 'seconds')
                        return `${params.name}: ${d.hours()}小时${d.minutes()}分${d.seconds()}秒`
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: result,
                    }
                ],
            }
            return charts
        },
        change(e) {
            this.timeStart = e[0] || moment().format('YYYY-MM-DD')