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/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue index cfefbe2ff..edd68dd50 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/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue index 6e1627e6f..42e53595b 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,14 @@ 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 + setChart(this.mapId, map) } - 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 +164,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 +188,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 +235,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 +267,10 @@ export default { }, renderPoint (dcStats) { const arr = [] + const map = getChart(this.mapId) + if (!map) { + return + } dcStats.forEach(dcStat => { arr.push({ type: 'Feature', @@ -267,14 +283,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 +318,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 +335,13 @@ 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 + setChart(this.mapId, null) this.initChart() }, 100) } @@ -329,11 +351,16 @@ 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 + setChart(this.mapId, null) } } 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 0c25d6e09..6d72ba4e3 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..a89214689 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 @@ -602,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() } } diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js index 9b8a7f935..de56859f2 100644 --- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js +++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeriesMixin.js @@ -180,11 +180,11 @@ export default { y = '-100%' } tooltip.style.transform = `translate(${x},${y})` - if (!self.$lodash.get(self.chartInfo, 'param.enable.tooltip', false)) { + if (!self.$lodash.get(self.chartInfo, 'param.enable.tooltip', true)) { return } let params = [] - const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'single') + const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'all') if (self.chartInfo.param && !(tooltipModel == 'single')) { params = u.series.map((s, i) => { if (i == 0) return '' @@ -263,7 +263,7 @@ export default { // tooltip排序 let sortBy - if (self.$lodash.get(self.chartInfo, 'param.enable.tooltip') && self.$lodash.get(self.chartInfo, 'param.tooltip.mode') !== 'single' && self.$lodash.get(self.chartInfo, 'param.tooltip.sort') !== 'none') { + if (self.$lodash.get(self.chartInfo, 'param.enable.tooltip', true) && self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'all') !== 'single' && self.$lodash.get(self.chartInfo, 'param.tooltip.sort', 'none') !== 'none') { sortBy = self.$lodash.get(self.chartInfo, 'param.tooltip.sort') } const previousIndex = arr.findIndex(item => item.seriesName.indexOf('Previous') !== -1) 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 } } diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue index 133c814c8..5713b33c9 100644 --- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue +++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue @@ -398,7 +398,8 @@ export default { thresholds: false, legend: true, valueMapping: false, - visibility: false + visibility: false, + tooltip: true }, thresholds: [{ id: s8(), value: undefined, color: '#eeeeeeff' }], showHeader: this.editChart.param.showHeader, @@ -705,6 +706,9 @@ export default { max: undefined } } + if (obj.param.enable.tooltip === undefined) { + obj.param.enable.tooltip = true + } if (!obj.param.tooltip || !obj.param.tooltip.mode) { obj.param.tooltip = { mode: 'all', 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 @@