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