系统总览图表加载销毁优化

web/src/components/Home/Pv.vue

@@ -31,21 +31,21 @@ export default {
       curList: [
         {
           name: '日发电量',
-          key: 'solarElectGen',
+          key: 'solar_elect_gen',
           lineColor: '#22E4FF',
           value: 0,
           d: 'kW·h'
         },
         {
           name: '日入网电量',
-          key: 'solarElectGrid',
+          key: 'solar_elect_grid',
           lineColor: '#0E68E4',
           value: 0,
           d: 'kW·h'
         }
       ],
-      faultChart: null,
-      lineChartData: {
+      pvChart: null,
+      pvChartData: {
         ydata: [],
         xdata: []
       },
@@ -58,41 +58,46 @@ export default {
   },
   watch: {
     total: {
-      handler(n) {
-        if (n) {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
           let that = this
           that.curList.forEach((item) => {
             item.value = that.total[item.key]
           })
         }
-      },
-      deep: true, // 深度监听
-      immediate: true
+      }
     },
     deviceInfo: {
-      handler(n) {
-        this.$nextTick(() => {
-          this.drawLineChart()
-        })
-      }
-      // immediate: true
+      handler(newVal, oldVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+          this.$nextTick(() => {
+            this.drawLineChart()
+          })
+        }
+      },
+      deep: true // 确保深度比较
     }
   },
   mounted() {},
-  onBeforeUnmount() {
-    this.faultChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if (this.pvChart) {
+      this.pvChart.dispose()
+      this.pvChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.faultChart.resize()
+      if (this.pvChart) {
+        this.pvChart.resize()
+      }
     },
     processData(data, keys) {
       data.sort((a, b) => {
-        return new Date(a.date) - new Date(b.date)
+        return new Date(a.dt) - new Date(b.dt)
       })
-      const dates = data.map((item) => item.date)
+      const dates = data.map((item) => item.dt)
       const values = []
       keys.forEach((item, index) => {
         values[index] = data.map((dataValue) => dataValue[keys[index]])
@@ -108,9 +113,9 @@ export default {
       const keyList = this.curList.map((item) => item.key)
       const result = this.processData(this.deviceInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.pvChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.pvChartData.ydata[index] = {
           name: item.name,
           smooth: true,
           type: 'bar',
@@ -131,9 +136,13 @@ export default {
 
     drawLineChart(activeKey) {
       this.getChargeData(activeKey)
+      if (this.pvChart) {
+        this.pvChart.dispose()
+      }
       const chartDom = document.getElementById('pv-chart')
-      let faultChart = this.$echarts.init(chartDom)
-      this.faultChart = faultChart
+      if (!chartDom) return
+      let pvChart = this.$echarts.init(chartDom)
+      this.pvChart = pvChart
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -155,7 +164,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.pvChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -169,12 +178,17 @@ export default {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
           axisLabel: {
+            interval: 4,
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.pvChartData.ydata
       }
-      option && faultChart.setOption(option)
+      option && pvChart.setOption(option)
+      this.setupResizeListener()
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
       window.addEventListener('resize', this.handleResize)
     }
   }