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

web/src/components/Home/Modal/DisCharge.vue

@@ -20,70 +20,75 @@ export default {
           name: '日充电电量',
           key: 'key1',
           lineColor: '#9BD801',
-          value:0,
-          d:'kW·h'
+          value: 0,
+          d: 'kW·h'
         },
         {
           name: '日放电电量',
           key: 'key2',
           lineColor: '#3DFEFA',
-          value:0,
-          d:'kW·h'
-        },
+          value: 0,
+          d: 'kW·h'
+        }
       ],
-      
+
       disChargeChart: null,
-      lineChartData: {
+      disChargeChartData: {
         ydata: [],
         xdata: []
-      },
-     
+      }
     }
   },
   watch: {
     propsInfo: {
-      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.disChargeChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if (this.disChargeChart) {
+      this.disChargeChart.dispose()
+      this.disChargeChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.disChargeChart.resize()
+      if (this.disChargeChart) {
+        this.disChargeChart.resize()
+      }
     },
     processData(data, keys) {
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
-      const dates = data.map((item) => item.date)
-      const values=[]
-      keys.forEach((item,index)=>{
-        
-        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      const dates = data.map((item) => item.dt)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
       })
-    
+
       return {
         dates,
-        values,
+        values
       }
     },
     getDisChargeData() {
-      const arr=this.curList
-      const keyList=this.curList.map((item)=>item.key)
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
       const result = this.processData(this.propsInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.disChargeChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.disChargeChartData.ydata[index] = {
           name: item.name,
           smooth: false,
           type: 'line',
@@ -95,18 +100,21 @@ export default {
           emphasis: {
             focus: 'series'
           },
-         
+
           global: false,
           showSymbol: false,
-          data:result.values[index]
-
+          data: result.values[index]
         }
       })
     },
 
     drawLineChart(activeKey) {
       this.getDisChargeData(activeKey)
+      if (this.disChargeChart) {
+        this.disChargeChart.dispose()
+      }
       const chartDom = document.getElementById('disCharge-chart')
+      if (!chartDom) return
       let disChargeChart = this.$echarts.init(chartDom)
       this.disChargeChart = disChargeChart
       const option = {
@@ -130,7 +138,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.disChargeChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -147,9 +155,13 @@ export default {
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.disChargeChartData.ydata
       }
       option && disChargeChart.setOption(option)
+      this.setupResizeListener()
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
       window.addEventListener('resize', this.handleResize)
     }
   }
@@ -158,8 +170,7 @@ export default {
 
 <style lang="scss" scoped>
 .disCharge {
-    height:calc(100% - 45px);
-
+  height: calc(100% - 45px);
 
   #disCharge-chart {
     height: 100%;
@@ -177,12 +188,12 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-& > div:last-child{
+  & > div:last-child {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: end;
-   }
+  }
   .mark {
     font-size: 16px;
     margin-right: 2px;
@@ -194,7 +205,7 @@ export default {
     rgba(61, 254, 250, 0.15) 49.2%,
     rgba(61, 254, 250, 0) 100%
   );
-  .d{
+  .d {
     margin-left: 1px;
     font-size: 12px;
   }

web/src/components/Home/Modal/EnvInfo.vue

@@ -80,15 +80,13 @@ export default {
   },
   watch: {
     propsTotal: {
-      handler(n) {
-        if (n) {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
           this.list.forEach((item) => {
             item.value = this.propsTotal[item.key]
           })
         }
-      },
-      deep: true,
-      immediate: true
+      }
     }
   },
   mounted() {},

web/src/components/Home/Modal/OperationalInfo.vue

@@ -90,15 +90,14 @@ export default {
   },
   watch: {
     propsTotal: {
-      handler(n) {
-        if (n) {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
           this.list.forEach((item) => {
             item.value = this.propsTotal[item.key]
           })
         }
       },
-      deep: true,
-      immediate: true
+   
     }
   },
   mounted() {},

web/src/components/Home/Modal/PrefabCabin.vue

@@ -3,13 +3,13 @@
     <div class="content-left">
       <div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
         <div>
-          <span>{{ item.value ? item.value :0}}</span
+          <span>{{ item.value ? item.value : 0 }}</span
           ><span class="d">{{ item.d }}</span>
         </div>
         <span>{{ item.label }}</span>
       </div>
     </div>
-    <div style="text-align: center;font-weight: 500;">
+    <div style="text-align: center; font-weight: 500">
       <div class="online-icon"></div>
       <span>{{ curStatus }}</span>
     </div>
@@ -17,7 +17,7 @@
     <div class="content-right">
       <div v-for="item in rightList" :key="item.key" :class="`item ${item.class}`">
         <div>
-          <span>{{ item.value ? item.value :0 }}</span
+          <span>{{ item.value ? item.value : 0 }}</span
           ><span class="d">{{ item.d }}</span>
         </div>
         <span>{{ item.label }}</span>
@@ -27,7 +27,6 @@
 </template>
 
 <script>
-
 export default {
   name: '',
   props: {
@@ -42,7 +41,7 @@ export default {
   },
   data() {
     return {
-      curStatus:'充电',
+      curStatus: '充电',
       list: [
         {
           key: 'tianshu',
@@ -99,15 +98,13 @@ export default {
   },
   watch: {
     propsTotal: {
-      handler(n) {
-        if (n) {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
           this.list.forEach((item) => {
             item.value = this.propsTotal[item.key]
           })
         }
-      },
-      deep: true,
-      immediate: true
+      }
     }
   },
   mounted() {},

web/src/components/Home/Modal/Revenue.vue

@@ -29,7 +29,7 @@ export default {
        
       ],
       revenueChart: null,
-      lineChartData: {
+      RevenueChartData: {
         ydata: [],
         xdata: []
       },
@@ -38,29 +38,37 @@ export default {
   },
   watch: {
     propsInfo: {
-      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.revenueChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if (this.revenueChart) {
+      this.revenueChart.dispose()
+      this.revenueChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.revenueChart.resize()
+      if (this.revenueChart) {
+     
+        this.revenueChart.resize()
+      }
     },
     processData(data, keys) {
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
-      const dates = data.map((item) => item.date)
+      const dates = data.map((item) => item.dt)
       const values=[]
       keys.forEach((item,index)=>{
         
@@ -77,9 +85,9 @@ export default {
       const keyList=this.curList.map((item)=>item.key)
       const result = this.processData(this.propsInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.RevenueChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.RevenueChartData.ydata[index] = {
           name: item.name,
           smooth: true,
           type: 'line',
@@ -115,7 +123,11 @@ export default {
 
     drawLineChart(activeKey) {
       this.getRevenueData(activeKey)
+      if (this.revenueChart) {
+        this.revenueChart.dispose()
+      }
       const chartDom = document.getElementById('revenue-chart')
+      if (!chartDom) return
       let revenueChart = this.$echarts.init(chartDom)
       this.revenueChart = revenueChart
       const option = {
@@ -139,7 +151,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.RevenueChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -156,9 +168,14 @@ export default {
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.RevenueChartData.ydata
       }
       option && revenueChart.setOption(option)
+      this.setupResizeListener()
+
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
       window.addEventListener('resize', this.handleResize)
     }
   }

web/src/components/Home/Modal/StatisticalInfo.vue

@@ -81,15 +81,13 @@ export default {
   },
   watch: {
     propsTotal: {
-      handler(n) {
-        if (n) {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
           this.list.forEach((item) => {
             item.value = this.propsTotal[item.key]
           })
         }
-      },
-      deep: true,
-      immediate: true
+      }
     }
   },
   mounted() {},

web/src/components/Home/Modal/Utilization.vue

@@ -20,64 +20,69 @@ export default {
           name: '日设备利用率',
           key: 'key1',
           lineColor: '#F69B52',
-         
-          value:0,
-          d:'kW·h'
-        },
+
+          value: 0,
+          d: 'kW·h'
+        }
       ],
-      
+
       utilizationChart: null,
-      lineChartData: {
+      utilizationChartData: {
         ydata: [],
         xdata: []
-      },
-     
+      }
     }
   },
   watch: {
     propsInfo: {
-      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.utilizationChart = null
+  beforeUnmount() {
     window.removeEventListener('resize', this.handleResize)
+    if (this.utilizationChart) {
+      this.utilizationChart.dispose()
+      this.utilizationChart = null
+    }
   },
 
   methods: {
     handleResize() {
-      this.utilizationChart.resize()
+      if (this.utilizationChart) {
+        this.utilizationChart.resize()
+      }
     },
     processData(data, keys) {
       data.sort((a, b) => {
         return new Date(a.date) - new Date(b.date)
       })
-      const dates = data.map((item) => item.date)
-      const values=[]
-      keys.forEach((item,index)=>{
-        
-        values[index]= data.map((dataValue)=>dataValue[keys[index]])
+      const dates = data.map((item) => item.dt)
+      const values = []
+      keys.forEach((item, index) => {
+        values[index] = data.map((dataValue) => dataValue[keys[index]])
       })
-    
+
       return {
         dates,
-        values,
+        values
       }
     },
     getUtilizationData() {
-      const arr=this.curList
-      const keyList=this.curList.map((item)=>item.key)
+      const arr = this.curList
+      const keyList = this.curList.map((item) => item.key)
       const result = this.processData(this.propsInfo, keyList)
 
-      this.lineChartData.xdata = result.dates
+      this.utilizationChartData.xdata = result.dates
       arr.forEach((item, index) => {
-        this.lineChartData.ydata[index] = {
+        this.utilizationChartData.ydata[index] = {
           name: item.name,
           smooth: false,
           type: 'line',
@@ -89,18 +94,21 @@ export default {
           emphasis: {
             focus: 'series'
           },
-         
+
           global: false,
           showSymbol: false,
-          data:result.values[index]
-
+          data: result.values[index]
         }
       })
     },
 
     drawLineChart(activeKey) {
       this.getUtilizationData(activeKey)
+      if (this.utilizationChart) {
+        this.utilizationChart.dispose()
+      }
       const chartDom = document.getElementById('utilization-chart')
+      if (!chartDom) return
       let utilizationChart = this.$echarts.init(chartDom)
       this.utilizationChart = utilizationChart
       const option = {
@@ -124,7 +132,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: this.lineChartData.xdata,
+          data: this.utilizationChartData.xdata,
           axisLine: {
             lineStyle: { type: 'dashed', color: '#435463' }
           },
@@ -141,9 +149,13 @@ export default {
             color: '#fff'
           }
         },
-        series: this.lineChartData.ydata
+        series: this.utilizationChartData.ydata
       }
       option && utilizationChart.setOption(option)
+      this.setupResizeListener()
+    },
+    setupResizeListener() {
+      window.removeEventListener('resize', this.handleResize)
       window.addEventListener('resize', this.handleResize)
     }
   }
@@ -152,10 +164,10 @@ export default {
 
 <style lang="scss" scoped>
 .utilization {
-  height:calc(100% - 45px);
+  height: calc(100% - 45px);
 
   #utilization-chart {
-    height:100%;
+    height: 100%;
   }
 }
 
@@ -170,12 +182,12 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-& > div:last-child{
+  & > div:last-child {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: end;
-   }
+  }
   .mark {
     font-size: 16px;
     margin-right: 2px;
@@ -187,7 +199,7 @@ export default {
     rgba(61, 254, 250, 0.15) 49.2%,
     rgba(61, 254, 250, 0) 100%
   );
-  .d{
+  .d {
     margin-left: 1px;
     font-size: 12px;
   }