fix: 修复panel的table和echart类型内存溢出问题

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -271,6 +271,7 @@ export default {
         chartUnit:5,
         deleteBox: {show: false, ids: "", remark: '', state: 2},
         isPreview:false,
+        ps: null
       };
   },
   computed: {
@@ -678,7 +679,8 @@ export default {
         container.style.height = `calc(100% - ${deHeight}px)`;
         this.tableHeight = `calc(100% - 34px)`;
         this.$nextTick(() => {
-          container.querySelector(".el-table__body-wrapper")._ps_.update();
+          this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
+          this.ps.update();
         });
       },
       showLoad(chartItem) {
@@ -797,6 +799,9 @@ export default {
     },
     beforeDestroy() {
       this.clearChart();
+      if (this.ps) {
+        this.ps.destroy();
+      }
     },
 };
 </script>

nezha-fronted/src/components/charts/chart-table.vue

@@ -209,6 +209,7 @@
           }],
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
         oldSearchTime: [],
+        ps: null
       };
     },
     created() {
@@ -282,7 +283,10 @@
         container.style.height = `calc(100% - ${deHeight * 2}px)`;
         this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
         this.$nextTick(() => {
-          container.querySelector(".el-table__body-wrapper")._ps_.update();
+          this.$nextTick(() => {
+            this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
+            this.ps.update();
+          });
         });
       },
       showLoad(chartItem) {
@@ -490,6 +494,9 @@
     },
     beforeDestroy() {
       this.clearChart();
+      if (this.ps) {
+        this.ps.destroy();
+      }
     },
   };
 </script>

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -58,7 +58,7 @@
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
         <div class="chart-no-data" v-show="noData">No Data</div>
         <template v-if="!hasLegendOptions">
-          <div class='legend-container'  ref="legendArea" v-show="firstShow" v-scrollBar:legend>
+          <div class='legend-container'  ref="legendArea" v-show="firstShow">
             <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
               <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
             </div>
@@ -812,9 +812,7 @@
               self.firstShow = true; // 展示操作按键
             }, 100);
 
-            window.addEventListener('resize', function () {
-              getChart(self.chartIndex).resize();
-            });
+            window.addEventListener('resize', this.chartResize);
             getChart(this.chartIndex).on('magictypechanged', function (params) {
                 self.isStackArea = !self.isStackArea;
                 if(self.isStackArea){
@@ -1711,6 +1709,9 @@
           oldDot
         }
       },
+      chartResize() {
+        getChart(this.chartIndex).resize();
+      }
     },
     mounted() {
       this.firstLoad = false;
@@ -1726,6 +1727,8 @@
       if(!document.onmousemove){// 移除鼠标移动事件监听
         document.onmousemove=null;
       }
+      setChart(this.chartIndex, null);
+      window.removeEventListener('resize', this.chartResize);
     },
   };