From bf82357207d3705aa9721635676f136e6facbeaf Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 11:13:14 +0800 Subject: [PATCH 1/7] =?UTF-8?q?NEZ-3322=20fix=EF=BC=9A=E4=BC=98=E5=8C=96?= =?UTF-8?q?=20map=E5=8D=A0=E7=94=A8=E7=9A=84=E5=86=85=E5=AD=98=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/build/webpack.prod.conf.js | 2 +- .../src/components/chart/chart/chartMap.vue | 66 +++++++++++++------ 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/nezha-fronted/build/webpack.prod.conf.js b/nezha-fronted/build/webpack.prod.conf.js index 58fcb43f8..2d44c0cca 100644 --- a/nezha-fronted/build/webpack.prod.conf.js +++ b/nezha-fronted/build/webpack.prod.conf.js @@ -82,7 +82,7 @@ if (arg === 'html') { compress: { warnings: false, drop_console: true, - pure_funcs: ['console.log'] + pure_funcs: ['console.log', 'console.error'] } }, exclude: /manifest.+js/, diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue index 6e1627e6f..c694b37d7 100644 --- a/nezha-fronted/src/components/chart/chart/chartMap.vue +++ b/nezha-fronted/src/components/chart/chart/chartMap.vue @@ -62,6 +62,7 @@ import axios from 'axios' import 'leaflet/dist/leaflet.css' import maplibregl from 'maplibre-gl' import mapAllStyle from './mapStyle' +import { getChart, setChart, chartCache } from '@/components/common/js/common' const regNum = /^[0-9]+.?[0-9]*/ export default { name: 'chartMap', @@ -69,7 +70,7 @@ export default { data () { const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light' return { - map: null, + mapId: null, tooltip: { x: 0, y: 0, @@ -116,12 +117,13 @@ export default { const mapConfig = JSON.parse(response.data.paramKey.map_center_config) mapStyle.center = [Number(mapConfig.longitude), Number(mapConfig.latitude)] mapStyle.zoom = Number(mapConfig.zoom) - if (this.map) { - this.map.remove() - this.map = null + const mapId = this.mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id) + let map = getChart(mapId) || null + if (map) { + map.remove() + map = null } - const mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id) - this.map = new maplibregl.Map({ + map = new maplibregl.Map({ container: mapId, style: mapStyle, maxZoom: mapConfig.maxZoom || 7, @@ -161,7 +163,8 @@ export default { } } }) - this.map.on('load', this.mapLoad) + map.on('load', this.mapLoad) + setChart(mapId, map) maplibregl.addProtocol('nzMap', (params, callback) => { // 切片显示接口 防止跨域的问题 fetch(`${params.url.split('://')[1]}`) .then(t => { @@ -184,13 +187,21 @@ export default { }) }, mapLoad () { + const map = getChart(this.mapId) + if (!map) { + return + } this.loadDataCenterMapData() - this.map.addControl(new maplibregl.NavigationControl(), 'bottom-right') + 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 + const map = getChart(this.mapId) + if (!map) { + return + } return new Promise(resolve => { const requests = [axios.get('dc?pageSize=-1'), axios.get('/stat/overview/map')] axios.all(requests).then(result => { @@ -223,8 +234,8 @@ export default { } }) this.renderPoint(dcStats) - self.map.on('mouseenter', 'pointLayer', self.pointEnter) - self.map.on('mouseleave', 'pointLayer', self.pointLeave) + map.on('mouseenter', 'pointLayer', self.pointEnter) + map.on('mouseleave', 'pointLayer', self.pointLeave) self.pointAnimation(0) }) }) @@ -255,6 +266,10 @@ export default { }, renderPoint (dcStats) { const arr = [] + const map = getChart(this.mapId) + if (!map) { + return + } dcStats.forEach(dcStat => { arr.push({ type: 'Feature', @@ -267,14 +282,14 @@ export default { } }) }) - this.map.addSource('pointData', { + map.addSource('pointData', { type: 'geojson', data: { type: 'FeatureCollection', features: arr } }) - this.map.addLayer({ + map.addLayer({ id: 'pointLayer', type: 'circle', source: 'pointData', @@ -302,9 +317,10 @@ export default { }) }, pointAnimation (timeStep) { + const map = getChart(this.mapId) const opacity = 0.5 + (timeStep % 1000) / 1000 / 2 - if (this.map) { - this.map.setPaintProperty('pointLayer', 'circle-opacity', [ + if (map) { + map.setPaintProperty('pointLayer', 'circle-opacity', [ 'step', ['get', 'color'], 0.5, @@ -318,8 +334,12 @@ export default { }, resize () { setTimeout(() => { - this.map && this.map.remove() - this.map = null + let map = getChart(this.mapId) + if (!map) { + return + } + map && map.remove() + map = null this.initChart() }, 100) } @@ -329,11 +349,15 @@ 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 + let map = getChart(this.mapId) + if (!map) { + return + } + map.off('load', this.mapLoad) + map.off('mouseenter', 'pointLayer', this.pointEnter) + map.off('mouseleave', 'pointLayer', this.pointLeave) + map.remove() + map = null } } From 40bca8c2eefbd5195cc64c87fb354124c71536a3 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 11:14:16 +0800 Subject: [PATCH 2/7] =?UTF-8?q?NEZ-3332=20fix=EF=BC=9Adashboard=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=8E=A7=E5=88=B6=E5=8F=B0=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart/chartBar.vue | 3 +++ nezha-fronted/src/components/chart/chart/chartGauge.vue | 3 +++ nezha-fronted/src/components/chart/chart/chartPie.vue | 6 +++++- nezha-fronted/src/components/chart/chart/chartStat.vue | 3 +++ nezha-fronted/src/components/chart/chart/chartTable.vue | 3 +++ .../src/components/chart/chart/chartTimeSeries.vue | 6 +++++- nezha-fronted/src/components/chart/chart/chartTreemap.vue | 6 +++++- .../src/components/chart/chart/uplot/chartTimeSeries.vue | 3 +++ nezha-fronted/src/components/page/dashboard/dashboard.vue | 8 ++++---- 9 files changed, 34 insertions(+), 7 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index 9a9cfb543..213c1dc6c 100644 --- a/nezha-fronted/src/components/chart/chart/chartBar.vue +++ b/nezha-fronted/src/components/chart/chart/chartBar.vue @@ -553,6 +553,9 @@ export default { // 计算字体大小 calculateFontSize (text, width, height, lineHeight = 1.2, maxSize) { const el = this.$refs['temp-dom'] + if (!el) { + return 12 + } el.innerText = text const elWidth = el.offsetWidth const fontSizeBasedOnWidth = (width / elWidth) * 14 diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue index 727db325e..efcd68b10 100644 --- a/nezha-fronted/src/components/chart/chart/chartGauge.vue +++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue @@ -201,6 +201,9 @@ export default { // 计算字体大小 calculateFontSize (text, width, height, lineHeight = 1.2, maxSize) { const el = this.$refs['temp-dom'] + if (!el) { + return 12 + } el.innerText = text const elWidth = el.offsetWidth const fontSizeBasedOnWidth = (width / elWidth) * 14 diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue index e9561ce66..59098deb2 100644 --- a/nezha-fronted/src/components/chart/chart/chartPie.vue +++ b/nezha-fronted/src/components/chart/chart/chartPie.vue @@ -95,7 +95,11 @@ export default { } /* 使用setTimeout延迟渲染图表，避免样式错乱 */ setTimeout(() => { - const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) + const dom = document.getElementById(`chart-canvas-${this.chartId}`) + if (!dom) { + return; + } + const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId) if (!myChart) { return } diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue index 4dc3b8bf7..ba7d85f15 100644 --- a/nezha-fronted/src/components/chart/chart/chartStat.vue +++ b/nezha-fronted/src/components/chart/chart/chartStat.vue @@ -393,6 +393,9 @@ export default { // 计算字体大小 calculateFontSize (text, width, height, lineHeight = 1.2, maxSize) { const el = this.$refs['temp-dom'] + if (!el) { + return 12 + } el.innerText = text const elWidth = el.offsetWidth const fontSizeBasedOnWidth = (width / elWidth) * 14 diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue index 3954dd08f..3bccde8a2 100644 --- a/nezha-fronted/src/components/chart/chart/chartTable.vue +++ b/nezha-fronted/src/components/chart/chart/chartTable.vue @@ -160,6 +160,9 @@ export default { // 有分页时根据表格高度计算显示条数 if (this.showPagination) { const trHeight = 48 + if (!this.$refs.dataTable) { + return + } const tableHeight = this.$refs.dataTable.bodyWrapper.clientHeight const pageSize = Math.floor(tableHeight / trHeight) || 1 this.pageObj.pageSize = pageSize diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index 1feb8df55..bf7b7efd8 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -246,7 +246,11 @@ export default { } /* 使用setTimeout延迟渲染图表，避免样式错乱 */ setTimeout(() => { - const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) + const dom = document.getElementById(`chart-canvas-${this.chartId}`) + if (!dom) { + return; + } + const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId) if (!myChart) { return } diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue index 39030449e..b68ba4374 100644 --- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue +++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue @@ -119,7 +119,11 @@ export default { } /* 使用setTimeout延迟渲染图表，避免样式错乱 */ setTimeout(() => { - const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId) + const dom = document.getElementById(`chart-canvas-${this.chartId}`) + if (!dom) { + return; + } + const myChart = this.isInit ? echarts.init(dom) : getChart(this.chartId) if (!myChart) { return } diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue index 20efc68e7..2ef709310 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue @@ -389,6 +389,9 @@ export default { } setTimeout(() => { // 延迟加载 保证legend的高度正常 const dom = document.getElementById(`chart-canvas-${this.chartId}`) + if (!dom) { + return + } const width = dom.offsetWidth const height = dom.offsetHeight opts.width = width diff --git a/nezha-fronted/src/components/page/dashboard/dashboard.vue b/nezha-fronted/src/components/page/dashboard/dashboard.vue index 0661e445a..9ac2eea88 100644 --- a/nezha-fronted/src/components/page/dashboard/dashboard.vue +++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue @@ -156,7 +156,6 @@ From 3e8b846d6569226894f99497d13c92f8410707e4 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 11:42:23 +0800 Subject: [PATCH 5/7] =?UTF-8?q?fix=EF=BC=9A=E5=A4=84=E7=90=86=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chart/chartMap.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue index c694b37d7..42e53595b 100644 --- a/nezha-fronted/src/components/chart/chart/chartMap.vue +++ b/nezha-fronted/src/components/chart/chart/chartMap.vue @@ -122,6 +122,7 @@ export default { if (map) { map.remove() map = null + setChart(this.mapId, map) } map = new maplibregl.Map({ container: mapId, @@ -340,6 +341,7 @@ export default { } map && map.remove() map = null + setChart(this.mapId, null) this.initChart() }, 100) } @@ -358,6 +360,7 @@ export default { map.off('mouseleave', 'pointLayer', this.pointLeave) map.remove() map = null + setChart(this.mapId, null) } } From 6964c70edd778b0e842e1b0a18149bd59d812cc6 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 15:07:45 +0800 Subject: [PATCH 6/7] =?UTF-8?q?fix=EF=BC=9A=20=E5=A4=84=E7=90=86=20?= =?UTF-8?q?=E5=A0=86=E5=8F=A0=20=E5=AF=BC=E8=87=B4=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4=E9=80=89=E6=8B=A9=E5=87=BA?= =?UTF-8?q?=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/chart/uplot/stack.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/nezha-fronted/src/components/chart/chart/uplot/stack.js b/nezha-fronted/src/components/chart/chart/uplot/stack.js index 7f97d1da9..fb952bb01 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/stack.js +++ b/nezha-fronted/src/components/chart/chart/uplot/stack.js @@ -31,7 +31,7 @@ function stack (data, omit) { bands = bands.reverse() return { data: [data[0]].concat(data2), - bands + // bands } } @@ -40,7 +40,7 @@ export default function getStackedOpts (title, opt, data, interp) { const interped = interp ? interp(data) : data const stacked = stack(interped, i => false) - opts.bands = stacked.bands + // opts.bands = stacked.bands opts.cursor = opts.cursor || {} @@ -48,16 +48,6 @@ export default function getStackedOpts (title, opt, data, interp) { s.value = (u, v, si, i) => data[si][i] }) // restack on toggle - opts.hooks = { - setSeries: [ - (u, i) => { - const stacked = stack(data, i => !u.series[i].show) - u.delBand(null) - stacked.bands.forEach(b => u.addBand(b)) - u.setData(stacked.data) - } - ] - } return { opts, data: stacked.data } } From 5744a90e0a3d47f41daa562b0d4bb7755567de06 Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 16 Nov 2023 16:07:24 +0800 Subject: [PATCH 7/7] =?UTF-8?q?fix=EF=BC=9Auplot=20=E9=94=80=E6=AF=81?= =?UTF-8?q?=E6=97=B6=E5=88=A0=E9=99=A4=E7=BB=91=E5=AE=9A=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/chart/chart/uplot/chartTimeSeries.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue index 2ef709310..a89214689 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue @@ -605,7 +605,7 @@ export default { const chart = getChart(this.chartId) if (chart) { const over = chart.over - over.removeEventListener() + over.removeEventListener('mouseenter', this.uplotMouseenter) chart.destroy() } }