fix：销毁时解绑地图、时间轴图绑定事件

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

@@ -161,12 +161,7 @@ export default {
                 }
               }
             })
-            this.map.on('load', function () {
+            this.map.on('load', this.mapLoad)
-              self.loadDataCenterMapData()
-              self.map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
-              const mapboxglInner = document.getElementsByClassName('mapboxgl-ctrl-attrib-inner')
-              mapboxglInner[0].innerHTML = '<span>&copy; MapTiler</span> <span>&copy; OpenStreetMap contributors</span>'
-            })
             maplibregl.addProtocol('nzMap', (params, callback) => { // 切片显示接口 防止跨域的问题
               fetch(`${params.url.split('://')[1]}`)
                 .then(t => {
@@ -188,6 +183,12 @@ export default {
         })
       })
     },
+    mapLoad () {
+      this.loadDataCenterMapData()
+      this.map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
+      const mapboxglInner = document.getElementsByClassName('mapboxgl-ctrl-attrib-inner')
+      mapboxglInner[0].innerHTML = '<span>&copy; MapTiler</span> <span>&copy; OpenStreetMap contributors</span>'
+    },
     loadDataCenterMapData () {
       const self = this
       return new Promise(resolve => {
@@ -222,34 +223,35 @@ export default {
             }
           })
           this.renderPoint(dcStats)
-          self.map.on('mouseenter', 'pointLayer', function (param) {
+          self.map.on('mouseenter', 'pointLayer', self.pointEnter)
+          self.map.on('mouseleave', 'pointLayer', self.pointLeave)
+          self.pointAnimation(0)
+        })
+      })
+    },
+    pointEnter (param) {
       const point = param.point
       const event = param.originalEvent
       const boxWidth = window.innerWidth / 2
       const boxHeight = window.innerHeight / 2
-            self.tooltip.x = event.clientX + point.x - event.layerX + 15
+      this.tooltip.x = event.clientX + point.x - event.layerX + 15
-            self.tooltip.y = event.clientY + point.y - event.layerY + 15
+      this.tooltip.y = event.clientY + point.y - event.layerY + 15
-            if (self.tooltip.x > boxWidth) {
+      if (this.tooltip.x > boxWidth) {
-              self.tooltip.x = self.tooltip.x - 200 - 15
+        this.tooltip.x = this.tooltip.x - 200 - 15
       }
-            if (self.tooltip.y > boxHeight) {
+      if (this.tooltip.y > boxHeight) {
-              self.tooltip.y = self.tooltip.y - 160 - 15
+        this.tooltip.y = this.tooltip.y - 160 - 15
       }
-            self.dcStat = {
+      this.dcStat = {
         ...param.features[0].properties,
         asset: JSON.parse(param.features[0].properties.asset),
         agent: JSON.parse(param.features[0].properties.agent)
       }
-            self.tooltip.show = true
+      this.tooltip.show = true
-          })
+    },
-
+    pointLeave () {
-          self.map.on('mouseleave', 'pointLayer', function () {
+      this.tooltip.show = false
-            self.tooltip.show = false
+      this.dcStat = ''
-            self.dcStat = ''
-          })
-          self.pointAnimation(0)
-        })
-      })
     },
     renderPoint (dcStats) {
       const arr = []
@@ -327,6 +329,9 @@ export default {
       clearTimeout(this.timer)
       this.timer = null
     }
+    this.map.off('load', this.mapLoad)
+    this.map.off('mouseenter', 'pointLayer', this.pointEnter)
+    this.map.off('mouseleave', 'pointLayer', this.pointLeave)
     this.map && this.map.remove()
     this.map = null
   }

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

@@ -78,6 +78,10 @@ export default {
       } catch (e) {
         return ''
       }
+    },
+    // timeSeries类型图表联动
+    isConnect () {
+      return this.$store.state.panel.isConnect
     }
   },
   watch: {
@@ -189,16 +193,15 @@ export default {
         if (this.isInit && !this.isFullscreen) {
           // timeSeries类型图表设置group 用于多表联动
           myChart.group = 'timeSeriesGroup'
+          if (this.isConnect === 'crosshair') {
             myChart.getZr().on('mousemove', params => {
-            if (this.$store.state.panel.isConnect !== 'crosshair') {
-              return false
-            }
               // crosshair 模式才会执行
               if (this.$store.state.panel.currentMousemove !== this.chartId) {
                 this.$store.commit('setCurrentMousemove', this.chartId)
               }
             })
           }
+        }
         this.chartLoading = false
         this.isInit = false
       }, 200)

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

@@ -454,8 +454,9 @@ export default {
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {
-    // getChart(this.chartId) && getChart(this.chartId).dispose()
+    try {
-    // setChart(this.chartId, null)
+      getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove')
+    } catch (error) {}
     getChart(this.chartId) && setChart(this.chartId, null)
   }
 }