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

web/src/components/Home/Energy.vue

@@ -17,9 +17,9 @@
 export default {
   name: '',
   props: {
-    total:{
-      type:Object,
-      default:()=>{}
+    total: {
+      type: Object,
+      default: () => {}
     },
     deviceInfo: {
       type: Array,
@@ -28,68 +28,75 @@ export default {
   },
   data() {
     return {
+      uid:'1',
       curList: [
         {
           name: '日充电电量',
-          key: 'storageElectIn',
+          key: 'storage_elect_in',
           lineColor: '#22E4FF',
           value: 0,
           d: 'kW·h'
         },
         {
           name: '日放电电量',
-          key: 'storageElectOut',
+          key: 'storage_elect_out',
           lineColor: '#0E68E4',
           value: 0,
           d: 'kW·h'
         }
       ],
-      faultChart: null,
-      lineChartData: {
+      energyChart: null,
+      energyChartData: {
         ydata: [],
         xdata: []
       }
     }
   },
   watch: {
-    total:{
-      handler(n){
-        if(n){
-          let that=this
-          that.curList.forEach((item)=>{
-            item.value=that.total[item.key]
+    total: {
+      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.energyChart){
+      this.energyChart.dispose()
+      this.energyChart = null
+    }
+
   },
 
   methods: {
     handleResize() {
-      this.faultChart.resize()
+      if(this.energyChart){
+        this.energyChart.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]])
@@ -105,9 +112,9 @@ export default {
       const keyList = this.curList.map((item) => item.key)
       const result = this.processData(this.deviceInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.energyChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.energyChartData.ydata[index] = {
           name: item.name,
           smooth: true,
           type: 'bar',
@@ -128,9 +135,13 @@ export default {
 
     drawLineChart(activeKey) {
       this.getChargeData(activeKey)
+      if(this.energyChart){
+        this.energyChart.dispose()
+      }
       const chartDom = document.getElementById('energy-chart')
-      let faultChart = this.$echarts.init(chartDom)
-      this.faultChart = faultChart
+      if (!chartDom) return;
+      let energyChart = this.$echarts.init(chartDom)
+      this.energyChart = energyChart
       const option = {
         tooltip: {
           trigger: 'axis',
@@ -147,12 +158,12 @@ export default {
         grid: {
           left: '3%',
           right: '4%',
-          bottom: '5%',
+          bottom: '3%',
           containLabel: true
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.energyChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -166,12 +177,17 @@ export default {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
           axisLabel: {
+            interval: 4,
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.energyChartData.ydata
       }
-      option && faultChart.setOption(option)
+      option && energyChart.setOption(option)
+      this.setupResizeListener()
+    },
+    setupResizeListener(){
+      window.removeEventListener('resize', this.handleResize);
       window.addEventListener('resize', this.handleResize)
     }
   }