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,35 +223,36 @@ export default {
             }
           })
           this.renderPoint(dcStats)
-          self.map.on('mouseenter', 'pointLayer', function (param) {
+          self.map.on('mouseenter', 'pointLayer', self.pointEnter)
-            const point = param.point
+          self.map.on('mouseleave', 'pointLayer', self.pointLeave)
-            const event = param.originalEvent
-            const boxWidth = window.innerWidth / 2
-            const boxHeight = window.innerHeight / 2
-            self.tooltip.x = event.clientX + point.x - event.layerX + 15
-            self.tooltip.y = event.clientY + point.y - event.layerY + 15
-            if (self.tooltip.x > boxWidth) {
-              self.tooltip.x = self.tooltip.x - 200 - 15
-            }
-            if (self.tooltip.y > boxHeight) {
-              self.tooltip.y = self.tooltip.y - 160 - 15
-            }
-            self.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
-          })
-
-          self.map.on('mouseleave', 'pointLayer', function () {
-            self.tooltip.show = false
-            self.dcStat = ''
-          })
           self.pointAnimation(0)
         })
       })
     },
+    pointEnter (param) {
+      const point = param.point
+      const event = param.originalEvent
+      const boxWidth = window.innerWidth / 2
+      const boxHeight = window.innerHeight / 2
+      this.tooltip.x = event.clientX + point.x - event.layerX + 15
+      this.tooltip.y = event.clientY + point.y - event.layerY + 15
+      if (this.tooltip.x > boxWidth) {
+        this.tooltip.x = this.tooltip.x - 200 - 15
+      }
+      if (this.tooltip.y > boxHeight) {
+        this.tooltip.y = this.tooltip.y - 160 - 15
+      }
+      this.dcStat = {
+        ...param.features[0].properties,
+        asset: JSON.parse(param.features[0].properties.asset),
+        agent: JSON.parse(param.features[0].properties.agent)
+      }
+      this.tooltip.show = true
+    },
+    pointLeave () {
+      this.tooltip.show = false
+      this.dcStat = ''
+    },
     renderPoint (dcStats) {
       const arr = []
       dcStats.forEach(dcStat => {
@@ -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,15 +193,14 @@ export default {
         if (this.isInit && !this.isFullscreen) {
           // timeSeries类型图表设置group 用于多表联动
           myChart.group = 'timeSeriesGroup'
-          myChart.getZr().on('mousemove', params => {
+          if (this.isConnect === 'crosshair') {
-            if (this.$store.state.panel.isConnect !== 'crosshair') {
+            myChart.getZr().on('mousemove', params => {
-              return false
+              // crosshair 模式才会执行
-            }
+              if (this.$store.state.panel.currentMousemove !== this.chartId) {
-            // crosshair 模式才会执行
+                this.$store.commit('setCurrentMousemove', this.chartId)
-            if (this.$store.state.panel.currentMousemove !== this.chartId) {
+              }
-              this.$store.commit('setCurrentMousemove', this.chartId)
+            })
-            }
+          }
-          })
         }
         this.chartLoading = false
         this.isInit = false

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)
   }
 }