优化代码

src/App.vue

@@ -469,10 +469,6 @@ const closeModal = () => {
     falog.value = false;
 };
 
-onMounted(() => {
-    updateTime();
-});
-
 const coalgasData = ref<any>([]);
 
 const vehicleData = ref<any>([]);
@@ -516,138 +512,115 @@ const updateTime = () => {
 const progressbar = (item: any, index: number, ThawingtemperatureDatalength: number) => {
     const chartId = 'chartsjied' + index;
     const chartElement = document.getElementById(chartId);
-    console.log(item, index, 'item, index, ThawingtemperatureDatalength');
-    if (chartElement) {
-        const myChart = echarts.init(chartElement);
-        const option = {
-            grid: {
-                top: 0,
-                bottom: 0,
-                left: '28%',
-                right: '17%'
-            },
-            xAxis: {
-                show: false,
-                type: 'value',
-                boundaryGap: [0, 0]
-            },
-            yAxis: [
-                {
-                    type: 'category',
-                    data: [item.trackName ? item.trackName : '暂无数据'],
-                    axisLabel: {
-                        padding: [0, 10, 0, 0],
-                        textStyle: {
-                            color: '#ffffff',
-                            fontSize: '15'
-                        }
+    if (!chartElement) return;
+
+    let myChart = echarts.getInstanceByDom(chartElement);
+    if (myChart) {
+        myChart.dispose();
+    }
+    myChart = echarts.init(chartElement);
+    const option = {
+        grid: {
+            top: 0,
+            bottom: 0,
+            left: '28%',
+            right: '17%'
+        },
+        xAxis: {
+            show: false,
+            type: 'value',
+            boundaryGap: [0, 0]
+        },
+        yAxis: [
+            {
+                type: 'category',
+                data: [item.trackName ? item.trackName : '暂无数据'],
+                axisLabel: {
+                    padding: [0, 10, 0, 0],
+                    color: '#ffffff', // 直接在 axisLabel 下配置 textStyle
+                    fontSize: 15
+                },
+                axisLine: { show: false },
+                axisTick: [
+                    {
+                        show: false
+                    }
+                ]
+            }
+        ],
+        series: [
+            {
+                name: '金额',
+                type: 'bar',
+                zlevel: 1,
+                itemStyle: {
+                    borderRadius: 30,
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: '#4be3d5' },
+                            { offset: 1, color: '#2aa47d' }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                barWidth: 20,
+                data: [item.runTime === null || item.thawTime === '' ? 0 : Number(item.runTime).toFixed(2)],
+                label: {
+                    show: true,
+                    position: 'insideTop',
+                    formatter(params: { value: any }) {
+                        return `${params.value}h`;
                     },
-                    axisLine: { show: false },
-                    axisTick: [
-                        {
-                            show: false
-                        }
-                    ]
+                    fontSize: 15,
+                    color: '#fff'
                 }
-            ],
-            series: [
-                {
-                    name: '金额',
-                    type: 'bar',
-                    zlevel: 1,
-                    itemStyle: {
-                        normal: {
-                            barBorderRadius: 30,
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    { offset: 0, color: '#4be3d5' },
-                                    { offset: 1, color: '#2aa47d' }
-                                ],
-                                global: false // 缺省为 false
-                            }
-                        }
+            },
+            {
+                name: '背景',
+                type: 'bar',
+                barWidth: 20,
+                barGap: '-100%',
+                data: [item.thawTime === null || item.thawTime === '' ? 10 : Number(item.thawTime).toFixed(2)],
+                itemStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: '#061f40' },
+                            { offset: 0.2, color: '#0a4b89' },
+                            { offset: 0.8, color: '#0b4b89' },
+                            { offset: 1, color: '#0e569e' }
+                        ],
+                        global: false // 缺省为 false
                     },
-                    barWidth: 20,
-                    data: [item.runTime === null || item.thawTime === '' ? 0 : Number(item.runTime).toFixed(2)],
-                    label: {
-                        show: true,
-                        position: 'insideTop',
-                        formatter(params: { value: any }) {
-                            return `${params.value}h`;
-                        },
-                        fontSize: 15,
-                        color: '#fff'
-                    }
+                    borderRadius: 30
                 },
-                {
-                    name: '背景',
-                    type: 'bar',
-                    barWidth: 20,
-                    barGap: '-100%',
-                    data: [item.thawTime === null || item.thawTime === '' ? 10 : Number(item.thawTime).toFixed(2)],
-                    itemStyle: {
-                        normal: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    { offset: 0, color: '#061f40' },
-                                    { offset: 0.2, color: '#0a4b89' },
-                                    { offset: 0.8, color: '#0b4b89' },
-                                    { offset: 1, color: '#0e569e' }
-                                ],
-                                global: false // 缺省为 false
-                            },
-                            barBorderRadius: 30
-                        }
+                label: {
+                    show: true,
+                    position: 'right',
+                    formatter() {
+                        const total =
+                            item.thawTime === null || item.thawTime === '' ? 0 : Number(item.thawTime).toFixed(2);
+                        return `${total}h`;
                     },
-                    label: {
-                        show: true,
-                        position: 'right',
-                        formatter() {
-                            const total =
-                                item.thawTime === null || item.thawTime === '' ? 0 : Number(item.thawTime).toFixed(2); // 假设总条数为20
-                            return `${total}h`;
-                        },
-                        fontSize: 15,
-                        color: '#fff'
-                    }
+                    fontSize: 15,
+                    color: '#fff'
                 }
-            ]
-        };
-        myChart.setOption(option);
-
-        const resizeHandler = () => {
-            myChart.setOption(option);
-            console.log('试图变化了');
-            myChart.resize();
-        };
-
-        window.addEventListener('resize', resizeHandler);
-
-        // 在组件卸载时移除事件监听器
-        onUnmounted(() => {
-            window.removeEventListener('resize', resizeHandler);
-            myChart.dispose();
-        });
-    }
+            }
+        ]
+    };
+    myChart.setOption(option);
 };
 
 const progressbars = (datas: any) => {
-    // if (!datas || !datas.warnEchars) {
-    //     console.error('Invalid datas object or warnEchars is missing:', datas);
-    //     return;
-    // }
-    // 打印原始时间戳数组
-    // console.log(datas.warnEchars.echarsTime, '原始时间戳数组');
     const time = [];
     // 将时间戳数组转换为格式化的日期时间字符串数组
     datas.echarsTime.forEach((item: any) => {
@@ -655,76 +628,68 @@ const progressbars = (datas: any) => {
         time.push(moment(formattedTimeArray).format('YYYY-MM-DD HH:mm:ss'));
     });
 
-    // 打印转换后的时间字符串数组
-    // console.log(time, '格式化后的时间字符串数组');
-
     const chartElement = document.getElementById('chartstow');
 
     if (chartElement) {
-        const myChart = echarts.init(chartElement);
-        const option = {
-            toolbox: {
-                left: 'center',
-                itemSize: 25,
-                top: 55,
-                feature: {
-                    dataZoom: {
-                        yAxisIndex: 'none'
-                        // icon: '此处需要svg坐标路径path'
-                    },
-                    restore: {}
-                }
-            },
-            grid: {
-                top: '4%',
-                bottom: '7%',
-                left: '5%',
-                right: '4%'
-            },
-            color: ['#FF0000'],
-            tooltip: {
-                trigger: 'axis'
-            },
-            xAxis: {
-                type: 'category',
-                boundaryGap: false,
-                axisLabel: {
-                    color: '#fff' // X轴字体颜色
+        // 在组件卸载时移除事件监听器
+        window.removeEventListener('resize', () => {
+            myChart.resize();
+        });
+        echarts.init(chartElement).dispose();
+    }
+    const myChart = echarts.init(chartElement);
+    const option = {
+        toolbox: {
+            left: 'center',
+            itemSize: 25,
+            top: 55,
+            feature: {
+                dataZoom: {
+                    yAxisIndex: 'none'
+                    // icon: '此处需要svg坐标路径path'
                 },
-                data: time
-            },
-            yAxis: {
-                x: 'center',
-                type: 'value',
-                axisLabel: {
-                    color: '#fff' // Y轴字体颜色
-                }
+                restore: {}
+            }
+        },
+        grid: {
+            top: '4%',
+            bottom: '7%',
+            left: '5%',
+            right: '4%'
+        },
+        color: ['#FF0000'],
+        tooltip: {
+            trigger: 'axis'
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisLabel: {
+                color: '#fff' // X轴字体颜色
             },
-            series: [
-                {
-                    name: '',
-                    type: 'line',
-                    data: datas.echarsValue
-                }
-            ]
-        };
-
-        myChart.setOption(option);
-
-        const resizeHandler = () => {
-            myChart.setOption(option);
-            console.log('试图变化了');
-            myChart.resize();
-        };
+            data: time
+        },
+        yAxis: {
+            x: 'center',
+            type: 'value',
+            axisLabel: {
+                color: '#fff' // Y轴字体颜色
+            }
+        },
+        series: [
+            {
+                name: '',
+                type: 'line',
+                data: datas.echarsValue
+            }
+        ]
+    };
 
-        window.addEventListener('resize', resizeHandler);
+    myChart.setOption(option);
 
-        // 在组件卸载时移除事件监听器
-        onUnmounted(() => {
-            window.removeEventListener('resize', resizeHandler);
-            myChart.dispose();
-        });
-    }
+    window.addEventListener('resize', () => {
+        myChart.resize();
+    });
 };
 
 const initChart = (item: string, index: number, ThawingtemperatureDatalength: number) => {
@@ -767,9 +732,7 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
                 },
                 axisLabel: {
                     show: false,
-                    textStyle: {
-                        color: '#e54035'
-                    }
+                    color: '#e54035'
                 }
             },
             yAxis: {
@@ -810,10 +773,8 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
                     symbolOffset: [0, -20],
                     z: 12,
                     itemStyle: {
-                        normal: {
-                            color: '#053c70',
-                            opacity: 0
-                        }
+                        color: '#053c70',
+                        opacity: 0
                     },
                     data: [
                         {
@@ -829,21 +790,19 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
                     symbolOffset: [0, -10],
                     z: 12,
                     itemStyle: {
-                        normal: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 1,
-                                y2: 0,
-                                colorStops: [
-                                    { offset: 0, color: '#179fd3' }, // 左边是蓝色
-                                    { offset: 0.4, color: '#1675c1' }, // 中间是粉色
-                                    { offset: 0.6, color: '#1675c1' }, // 中间是粉色
-                                    { offset: 1, color: '#19a4cc' } // 右边是绿色
-                                ],
-                                global: false // 缺省为 false
-                            }
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                { offset: 0, color: '#179fd3' },
+                                { offset: 0.4, color: '#1675c1' },
+                                { offset: 0.6, color: '#1675c1' },
+                                { offset: 1, color: '#19a4cc' }
+                            ],
+                            global: false
                         }
                     },
                     data: [
@@ -860,68 +819,48 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
                     symbolOffset: [0, 10],
                     z: 12,
                     itemStyle: {
-                        normal: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 1,
-                                y2: 0,
-                                colorStops: [
-                                    { offset: 0, color: '#179fd3' }, // 左边是蓝色
-                                    { offset: 0.4, color: '#1675c1' }, // 中间是粉色
-                                    { offset: 0.6, color: '#1675c1' }, // 中间是粉色
-                                    { offset: 1, color: '#19a4cc' } // 右边是绿色
-                                ],
-                                global: false // 缺省为 false
-                            }
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                { offset: 0, color: '#179fd3' },
+                                { offset: 0.4, color: '#1675c1' },
+                                { offset: 0.6, color: '#1675c1' },
+                                { offset: 1, color: '#19a4cc' }
+                            ],
+                            global: false
                         }
                     },
                     data: [100 - data]
                 },
                 {
-                    // 底部立体柱
                     stack: '1',
                     type: 'bar',
                     itemStyle: {
-                        normal: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 1,
-                                y2: 0,
-                                colorStops: [
-                                    { offset: 0, color: '#179fd3' }, // 左边是蓝色
-                                    { offset: 0.4, color: '#1675c1' }, // 中间是粉色
-                                    { offset: 0.6, color: '#1675c1' }, // 中间是粉色
-                                    { offset: 1, color: '#19a4cc' } // 右边是绿色
-                                ],
-                                global: false // 缺省为 false
-                            },
-                            opacity: 1
-                        }
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 1,
+                            y2: 0,
+                            colorStops: [
+                                { offset: 0, color: '#179fd3' },
+                                { offset: 0.4, color: '#1675c1' },
+                                { offset: 0.6, color: '#1675c1' },
+                                { offset: 1, color: '#19a4cc' }
+                            ],
+                            global: false
+                        },
+                        opacity: 1
                     },
                     silent: true,
                     barWidth: 78,
-                    barGap: '-100%', // Make series be overlap
+                    barGap: '-100%',
                     data: [data]
                 }
-                // {
-                //   // 上部立体柱
-                //   stack: '1',
-                //   type: 'bar',
-                //   itemStyle: {
-                //     normal: {
-                //       color: '#36405E',
-                //       opacity: 0.8
-                //     }
-                //   },
-                //   silent: true,
-                //   barWidth: 78,
-                //   barGap: '-100%', // Make series be overlap
-                //   data: [100 - data]
-                // }
             ]
         };
         // console.log('bgImageURL', bgImageURL);
@@ -929,20 +868,6 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
 
         const resizeHandler = () => myChart.resize();
         window.addEventListener('resize', resizeHandler);
-        onUnmounted(() => {
-            window.removeEventListener('resize', resizeHandler);
-            myChart.dispose();
-        });
-
-        // const resizeHandler = () => {
-        //     myChart.setOption(option);
-        //     console.log('试图变化了');
-        //     myChart.resize();
-        // };
-
-        // window.addEventListener('resize', resizeHandler);
-
-        // // 在组件卸载时移除事件监听器
         // onUnmounted(() => {
         //     window.removeEventListener('resize', resizeHandler);
         //     myChart.dispose();
@@ -1012,7 +937,7 @@ const carThawTimeInfo = () => {
     carThawTimeInfolist()
         .then((res: any) => {
             if (res && res.code === 200) {
-                addd2(res.data);
+                addd(res.data);
             } else {
                 console.log('获取数据失败');
             }
@@ -1025,9 +950,9 @@ const carThawTimeInfo = () => {
 const addd = (data: any) => {
     let matched = false; // 用来标记是否找到匹配项
     const list = [];
-    console.log(data, 'res.data');
+    // console.log(data, 'res.data');
     runStatuslist.value = data[activeTab.value].runStatus;
-    console.log(runStatuslist.value, 'res.data');
+    // console.log(runStatuslist.value, 'res.data');
     data.forEach((item: any) => {
         if (item.warehouseId === Number(morenlist.value)) {
             list.push(item);
@@ -1093,7 +1018,7 @@ const handleMqttMessage = (topic: string, message: any) => {
     } else if (topic === 'jd_info') {
         try {
             const data = JSON.parse(message.toString());
-            console.log(data, 'datadatadata1111111111');
+            // console.log(data, 'datadatadata1111111111');
             addd(data);
         } catch (error) {
             console.error('解析消息失败:', error);
@@ -1101,7 +1026,7 @@ const handleMqttMessage = (topic: string, message: any) => {
     } else {
         try {
             const data = JSON.parse(message.toString());
-            console.log(data, 'datadatadatadatadata');
+            // console.log(data, 'datadatadatadatadata');
             coalgasData.value = data.top;
             ThawingtemperatureData.value = data.right;
             if (ThawingtemperatureData.value.length > 0) {
@@ -1153,11 +1078,11 @@ onMounted(() => {
     handleScreenAuto();
     window.onresize = () => handleScreenAuto();
     window.addEventListener('resize', handleResize);
-
-    // 清除定时器以避免内存泄漏
+    // 避免内存泄漏
     // onUnmounted(() => {
     //     clearInterval(interval);
     // });
+    // 清除定时器以
 });
 onUnmounted(() => {
     clearInterval(interval.value as number);