Merge pull request #3651 from dataease/pr@dev_memory_component

fix: 内存泄露修复

frontend/src/views/chart/components/ChartComponent.vue

@@ -207,8 +207,10 @@ export default {
   mounted() {
     this.preDraw()
   },
-  destroyed() {
+  beforeDestroy() {
+    window.removeEventListener('resize', this.myChart.resize)
     this.myChart.dispose()
+    this.myChart = null
   },
   created() {
     this.loadThemeStyle()
@@ -403,9 +405,7 @@ export default {
       const chart = this.myChart
       this.setBackGroundBorder()
       setTimeout(chart.setOption(option, true), 500)
-      window.onresize = function() {
-        chart.resize()
-      }
+      window.removeEventListener('resize', chart.resize)
     },
     setBackGroundBorder() {
       if (this.chart.customStyle) {

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -155,6 +155,11 @@ export default {
       this.drawEcharts()
     }
   },
+  beforeDestroy() {
+    this.myChart.destroy()
+    window.removeEventListener('resize', this.calcHeightDelay)
+    this.myChart = null
+  },
   mounted() {
     this.preDraw()
   },
@@ -202,10 +207,7 @@ export default {
       new Promise((resolve) => { resolve() }).then(() => {
         this.drawView()
       })
-      const that = this
-      window.onresize = function() {
-        that.calcHeightDelay()
-      }
+      window.addEventListener('resize', this.calcHeightDelay)
     },
     drawView() {
       const chart = this.chart

frontend/src/views/chart/components/ChartComponentS2.vue

@@ -195,6 +195,9 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.scrollTimer)
+    window.removeEventListener('resize', this.onResize)
+    this.myChart.destroy()
+    this.myChart = null
   },
   methods: {
     initData() {
@@ -221,21 +224,16 @@ export default {
       this.tableData = data
     },
     preDraw() {
+      this.onResize()
+      window.addEventListener('resize', this.onResize)
+    },
+    onResize() {
       this.initData()
       this.initTitle()
       this.calcHeightDelay()
       new Promise((resolve) => { resolve() }).then(() => {
         this.drawView()
       })
-      const that = this
-      window.onresize = function() {
-        that.initData()
-        that.initTitle()
-        that.calcHeightDelay()
-        new Promise((resolve) => { resolve() }).then(() => {
-          that.drawView()
-        })
-      }
     },
     drawView() {
       const chart = this.chart

frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -133,15 +133,13 @@ export default {
   },
   beforeDestroy() {
     eventBus.$off('resizing', this.chartResize)
+    window.removeEventListener('resize', this.calcHeight)
   },
   methods: {
     init() {
-      const that = this
       this.initStyle()
       this.resultFormat()
-      window.onresize = function() {
-        that.calcHeight()
-      }
+      window.addEventListener('resize', this.calcHeight)
       this.setBackGroundBorder()
       this.initRemark()
     },

frontend/src/views/chart/components/normal/LabelNormalText.vue

@@ -161,14 +161,12 @@ export default {
   },
   beforeDestroy() {
     eventBus.$off('resizing', this.chartResize)
+    window.removeEventListener('resize', this.calcHeight)
   },
   methods: {
     init() {
-      const that = this
       this.initStyle()
-      window.onresize = function() {
-        that.calcHeight()
-      }
+      window.addEventListener('resize', this.calcHeight)
       this.setBackGroundBorder()
       this.initRemark()
     },

frontend/src/views/chart/components/table/TableNormal.vue

@@ -168,6 +168,7 @@ export default {
   beforeDestroy() {
     eventBus.$off('resizing', this.chartResize)
     clearInterval(this.scrollTimer)
+    window.removeEventListener('resize', this.calcHeightDelay)
   },
   methods: {
     init() {
@@ -187,7 +188,6 @@ export default {
       }
     },
     initData() {
-      const that = this
       let data = []
       this.showPage = false
       if (this.chart.data) {
@@ -229,9 +229,7 @@ export default {
       this.$nextTick(() => {
         this.initStyle()
       })
-      window.onresize = function() {
-        that.calcHeightDelay()
-      }
+      window.addEventListener('resize', this.calcHeightDelay)
     },
     calcHeightRightNow() {
       this.$nextTick(() => {

frontend/src/views/chart/view/ChartFieldEdit.vue

@@ -568,10 +568,11 @@ export default {
       this.filterField(val)
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcHeight)
+  },
   mounted() {
-    window.onresize = () => {
-      this.calcHeight()
-    }
+    window.addEventListener('resize', this.calcHeight)
     this.calcHeight()
     this.initField()
   },

frontend/src/views/dataset/add/AddApi.vue

@@ -312,11 +312,12 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
+  },
   mounted() {
     this.initDataSource()
-    window.onresize = () => {
-      this.calHeight()
-    }
+    window.addEventListener('resize', this.calHeight)
     this.calHeight()
   },
   activated() {

frontend/src/views/dataset/add/AddCustom.vue

@@ -140,10 +140,11 @@ export default {
       this.getUnionData()
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
+  },
   mounted() {
-    window.onresize = () => {
-      this.calHeight()
-    }
+    window.addEventListener('resize', this.calHeight)
     this.calHeight()
 
     if (this.param && this.param.id && this.param.tableId) {

frontend/src/views/dataset/add/AddDB.vue

@@ -328,11 +328,12 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
+  },
   mounted() {
     this.initDataSource()
-    window.onresize = () => {
-      this.calHeight()
-    }
+    window.addEventListener('resize', this.calHeight)
     this.calHeight()
   },
   activated() {

frontend/src/views/dataset/add/AddExcel.vue

@@ -304,10 +304,11 @@ export default {
       return this.nameList.filter((ele) => ele !== this.originName)
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
+  },
   mounted() {
-    window.onresize = () => {
-      this.calHeight()
-    }
+    window.addEventListener('resize', this.calHeight)
     this.calHeight()
   },
   created() {

frontend/src/views/dataset/add/AddSQL.vue

@@ -675,10 +675,11 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
+  },
   async mounted() {
-    window.onresize = () => {
-      this.calHeight()
-    }
+    window.addEventListener('resize', this.calHeight)
     this.calHeight()
     await this.initDataSource()
     this.$refs.myCm.codemirror.on('keypress', () => {

frontend/src/views/dataset/add/union/UnionPreview.vue

@@ -57,12 +57,13 @@ export default {
       }
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calHeight)
+  },
   mounted() {
     this.initPreview()
     this.calHeight()
-    window.onresize = () => {
-      this.calHeight()
-    }
+    window.addEventListener('resize', this.calHeight)
   },
   methods: {
     calHeight: _.debounce(function() {

frontend/src/views/dataset/common/DatasetTableData.vue

@@ -80,12 +80,6 @@ export default {
     }
   },
   mounted() {
-    // window.onresize = () => {
-    //   return (() => {
-    //     this.height = window.innerHeight / 3
-    //   })()
-    // }
-    // this.height = window.innerHeight / 3
     this.$nextTick(() => {
       this.height =
         document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5

frontend/src/views/dataset/data/FieldEdit.vue

@@ -794,10 +794,11 @@ export default {
       this.filterField(val)
     }
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.calcHeight)
+  },
   mounted() {
-    window.onresize = () => {
-      this.calcHeight()
-    }
+    window.addEventListener('resize', this.calcHeight)
     this.calcHeight()
     this.initField()
   },