diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue
index 5ad6066da..6e1627e6f 100644
--- a/nezha-fronted/src/components/chart/chart/chartMap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartMap.vue
@@ -161,12 +161,7 @@ export default {
}
}
})
- this.map.on('load', function () {
- self.loadDataCenterMapData()
- self.map.addControl(new maplibregl.NavigationControl(), 'bottom-right')
- const mapboxglInner = document.getElementsByClassName('mapboxgl-ctrl-attrib-inner')
- mapboxglInner[0].innerHTML = '© MapTiler © OpenStreetMap contributors'
- })
+ this.map.on('load', this.mapLoad)
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 = '© MapTiler © OpenStreetMap contributors'
+ },
loadDataCenterMapData () {
const self = this
return new Promise(resolve => {
@@ -222,35 +223,36 @@ export default {
}
})
this.renderPoint(dcStats)
- self.map.on('mouseenter', 'pointLayer', function (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
- 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.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
+ 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
}
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index fc3cf4a76..d19ebe1ba 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/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.$store.state.panel.isConnect !== 'crosshair') {
- return false
- }
- // crosshair 模式才会执行
- if (this.$store.state.panel.currentMousemove !== this.chartId) {
- this.$store.commit('setCurrentMousemove', this.chartId)
- }
- })
+ if (this.isConnect === 'crosshair') {
+ myChart.getZr().on('mousemove', params => {
+ // crosshair 模式才会执行
+ if (this.$store.state.panel.currentMousemove !== this.chartId) {
+ this.$store.commit('setCurrentMousemove', this.chartId)
+ }
+ })
+ }
}
this.chartLoading = false
this.isInit = false
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 200627448..37ed414ff 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/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()
- // setChart(this.chartId, null)
+ try {
+ getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove')
+ } catch (error) {}
getChart(this.chartId) && setChart(this.chartId, null)
}
}