NEZ-1820 fix：修复dashboard内存泄漏

nezha-fronted/src/components/chart/chart/chartAutotopology.vue

@@ -46,7 +46,7 @@ export default {
       this.$get('monitor/project', { pageSize: -1 }).then(res => {
         this.topologyLoading = true
         const axiosAll = []
-        const temp = []
+        let temp = []
         if (res.data.list.length === 0) {
           this.topologyLoading = false
         }
@@ -64,7 +64,8 @@ export default {
           res2.forEach(item => {
             temp.push(item)
           })
-          this.allProject = temp
+          this.allProject = JSON.parse(JSON.stringify(temp))
+          temp = []
           this.topologyLoading = false
         })
       })

nezha-fronted/src/components/chart/chart/chartMap.vue

@@ -16,12 +16,7 @@ import axios from 'axios'
 import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import 'leaflet/dist/leaflet.css'
-import * as echarts from 'echarts'
-import chartConfig from '@/components/page/dashboard/overview/chartConfig'
-// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
 
-let tooltipEndpointChart
-let tooltipPrometheusChart
 const regNum = /^[0-9]+.?[0-9]*/
 export default {
   name: 'chartMap',
@@ -61,7 +56,6 @@ export default {
       }, 500)
     },
     loadMapConfig () {
-      const vm = this
       return new Promise(resolve => {
         const DefaultIcon = L.icon({
           iconUrl: icon,
@@ -85,13 +79,13 @@ export default {
               maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
             }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
             map.createPane('myPane', document.querySelector('.my-pane-' + this.chartId))
-            map.on('tooltipopen', function (param) {
-              // setTimeout(() => {
-              //   vm.initTooltipChart(param)
-              // }, 100)
-            })
-            map.on('tooltipclose', function (param) {
-            })
+            // map.on('tooltipopen', function (param) {
+            //   // setTimeout(() => {
+            //   //   vm.initTooltipChart(param)
+            //   // }, 100)
+            // })
+            // map.on('tooltipclose', function (param) {
+            // })
             this.map = map
 
             L.tileLayer(

nezha-fronted/src/components/chart/chartMixin.js

@@ -144,7 +144,7 @@ export default {
       }
     },
     handleLegendAlias (legend, aliasExpression) {
-      console.log(legend, aliasExpression)
+      // console.log(legend, aliasExpression)
       if (/\{\{.+\}\}/.test(aliasExpression)) {
         const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
           const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
@@ -293,11 +293,11 @@ export default {
     }
   },
   mounted () {
-
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {
-    getChart(this.chartId) && getChart(this.chartId).dispose()
-    setChart(this.chartId, null)
+    // getChart(this.chartId) && getChart(this.chartId).dispose()
+    // setChart(this.chartId, null)
+    getChart(this.chartId) && setChart(this.chartId, null)
   }
 }

nezha-fronted/src/components/common/js/constants.js

@@ -290,6 +290,7 @@ export const chart = {
 
 export const intervalList = [
   { value: -1, label: i18n.t('dashboard.panel.refreshInterval.never') },
+  { value: 3, label: '3s' },
   { value: 30, label: '30s' },
   { value: 60, label: '1m' },
   { value: 300, label: '5m' },

nezha-fronted/src/components/common/pickTime.vue

@@ -168,6 +168,12 @@ export default {
         this.$emit('unitChange', n)
       }
     }
+  },
+  beforeDestroy () {
+    if (this.intervalTimer) {
+      clearInterval(this.intervalTimer)
+      this.intervalTimer = null
+    }
   }
 }
 </script>

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -660,12 +660,11 @@ export default {
       this.chartGetData = []
       const axiosArr = []
       const promiseArr = []
-      const self = this
       const pensPromise = (pen, arr, index) => {
-        return new Promise(function (resolve, reject) {
+        return new Promise((resolve, reject) => {
           Promise.all(arr).then((res) => {
-            self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
-            self.setAnimation(pen, self.chartGetData[index].res)
+            this.chartGetData[index].res = this.computeData(res, pen.data.aggregation, pen)
+            this.setAnimation(pen, this.chartGetData[index].res)
             resolve()
           })
         })
@@ -774,9 +773,10 @@ export default {
           return
         }
         if (!getTopology(this.topologyIndex)) {
-          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           canvas.open(data)
           setTopology(this.topologyIndex, canvas)
+          canvas = null
         } else {
           getTopology(this.topologyIndex).open(data)
         }
@@ -801,7 +801,7 @@ export default {
           if (!res.data) {
             return
           }
-          let data = res.data.topo
+          let data = JSON.parse(JSON.stringify(res.data.topo))
           if (!res.data.topo || !res.data.topo.pens.length) {
             this.showNoData = true
           } else {
@@ -846,12 +846,11 @@ export default {
               const arr = data.pens.filter(item => !item.type)
               this.addNodeInit(arr)
             }
-            const timer = setInterval(() => {
+            let timer = setInterval(() => {
               if (!this.imgInit) {
                 return
               }
               const promiseArr = []
-              const self = this
               for (let i = 0; i < data.pens.length; i++) {
                 const line = data.pens[i]
                 if (line.type === 1) {
@@ -914,13 +913,15 @@ export default {
                     }
                   }
                 })
-                self.saveData = { ...data }
+                this.saveData = { ...data }
                 resolve(data)
                 clearInterval(timer)
+                timer = null
               }).catch(res => {
-                self.saveData = { ...data }
+                this.saveData = { ...data }
                 resolve(data)
                 clearInterval(timer)
+                timer = null
               })
             }, 100)
           }
@@ -1062,7 +1063,6 @@ export default {
     },
 
     getNodesArr () {
-      const arr = []
       if (!getTopology(this.topologyIndex)) return
       this.offsetX = getTopology(this.topologyIndex).data.x
       this.offsetY = getTopology(this.topologyIndex).data.y
@@ -1556,7 +1556,7 @@ export default {
         fileList = fileList.splice(fileList.length - 1, 1)
         return false
       }
-      const isSize = new Promise(function (resolve, reject) {
+      new Promise(function (resolve, reject) {
         const width = 0
         const height = 0
         const _URL = window.URL || window.webkitURL
@@ -1839,8 +1839,7 @@ export default {
               //   resolve(img)
               // })
             })
-            .catch(err => {
-            })
+            .catch()
         })
       }
     },
@@ -2250,8 +2249,13 @@ export default {
       }
     }
   },
-  destroyed () {
+  beforeDestroy () {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
     if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).off('contextmenu', this.onContextMenu)
       getTopology(this.topologyIndex).destroy()
       setTopology(this.topologyIndex, null)
     }
@@ -2259,7 +2263,7 @@ export default {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
     }
     window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('resize', this.contextmenuNone)
+    window.removeEventListener('click', this.contextmenuNone)
   }
 }
 </script>