添加颜色

gaoshp

2024-11-13 60b88623397cbcc8fe81923179a1ed047392db05

添加颜色

 src/views/mdc/processParam/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-09 22:11:21
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-11-10 19:41:20
 * @LastEditTime: 2024-11-13 20:20:54
 * @FilePath: /cps-web/src/views/mdc/processParam/index.vue
 实时看板
-->
@@ -178,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
                }
@@ -328,25 +328,26 @@

        },
        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].value
                let name = i === 0 ? '' : myname === 'DeviceStatus' ? data.data[i - 1].name : data.data[i - 1].value
                // if (myname === 'ProcessProgram') {
                try {
                    name = item.value.slice(-50)
                    name = myname === 'DeviceStatus' ? item.name.slice(-50) : item.value.slice(-50)
                } catch (err) {
                    name = item.value
                    name = myname === 'DeviceStatus' ? item.name : item.value
                }
                // }
                // let color = !name ? 'transparent' : data.data[i - 1].color
@@ -365,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',
@@ -427,20 +426,21 @@
            this.list[index] = Object.assign({
                ...this.list[index],
                dayCharts,
                pieCharts: this.getPieCharts(data.data),
                pieCharts: this.getPieCharts(data.data, myname),
                showPie: false
            })
            // console.log(this.list, '>>>>>>>>>>>>>>>>>>>>>>111')
        },
        getPieCharts(data) {
        getPieCharts(data, myname) {
            let start = this.timeRange.startTime
            const obj = {
            }
            let key = myname === 'DeviceStatus' ? 'name' : 'value'
            data.forEach(v => {
                if (obj[v.value]) {
                    obj[v.value] += moment(v.time).valueOf() - moment(start).valueOf()
                if (obj[v[key]]) {
                    obj[v[key]] += moment(v.time).valueOf() - moment(start).valueOf()
                } else {
                    obj[v.value] = moment(v.time).valueOf() - moment(start).valueOf()
                    obj[v[key]] = moment(v.time).valueOf() - moment(start).valueOf()
                }
                start = v.time

@@ -449,13 +449,26 @@
                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) {
                        console.log(params, '>>>>>.')
                        let d = moment.duration(params.value, 'seconds')
                        return `${params.name}: ${d.hours()}小时${d.minutes()}分${d.seconds()}秒`
                    }
@@ -469,11 +482,10 @@
                        name: '',
                        type: 'pie',
                        radius: '50%',
                        data: result
                        data: result,
                    }
                ],
            }
            console.log(obj, 'pie')
            return charts
        },
        change(e) {