From 126a0782057535ca59430fa0e250efcd10a055b9 Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 16 Oct 2023 14:46:05 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix=EF=BC=9Aselect=20series=E6=82=AC?= =?UTF-8?q?=E6=B5=AE=E6=A1=86=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/components/chart/chart.scss | 4 +- .../chart/chart/chartTimeSeries.vue | 63 ++++++------------- .../chart/chart/options/chartTimeSeries.js | 3 +- .../page/dashboard/overview/chart.vue | 60 ++++++------------ .../page/dashboard/overview/chartConfig.vue | 5 +- 5 files changed, 46 insertions(+), 89 deletions(-) diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss index ca53c8ce5..768f97f94 100644 --- a/nezha-fronted/src/assets/css/components/chart/chart.scss +++ b/nezha-fronted/src/assets/css/components/chart/chart.scss @@ -683,10 +683,10 @@ } } -.chart-dataLink-tooltip{ +.chart-toolbox{ position: absolute !important; padding-bottom: 2px !important; - z-index: 999999999; + z-index: 9999; pointer-events: auto; .chart-dataLink-list{ width: calc(100% + 20px); diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue index d5988eb11..3c582e027 100644 --- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue +++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue @@ -22,9 +22,9 @@ :series="series" :is-fullscreen="isFullscreen" > -
-
-
+
+
+
@@ -72,14 +72,13 @@ export default { isStack: false, hasRightYAxis: false, chartLoading: false, - tooltip: { + toolbox: { x: 0, y: 0, title: 0, value: 0, mapping: {}, show: false, - dataLinkShow: '', metric: {}, activeIndex: undefined, clickIndex: undefined @@ -248,12 +247,6 @@ export default { } if (this.isInit) { myChart.on('click', this.chartClick) - myChart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow) { - const e = params.event.event - e.stopPropagation() - } - }) // 鼠标滑过当前symbol 改变样式 myChart.on('mousemove', (params) => { @@ -283,7 +276,7 @@ export default { } ) } - this.tooltip.activeIndex = params.seriesIndex + this.toolbox.activeIndex = params.seriesIndex }) myChart.on('mouseout', (params) => { const option = myChart.getOption() @@ -298,7 +291,7 @@ export default { }) myChart.setOption({ series }) } - this.tooltip.activeIndex = undefined + this.toolbox.activeIndex = undefined }) // 修复echarts bug(dataZoom设置为inside 未按住shift 页面无法滚动) @@ -564,7 +557,7 @@ export default { // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示 str += ` -
+
${seriesName} @@ -666,25 +659,25 @@ export default { this.hasRightYAxis = true } }, - datalinkPosition (e) { + toolboxPosition (e) { const windowWidth = window.innerWidth// 窗口宽度 const windowHeight = window.innerHeight// 窗口高度 this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top if (box) { const boxWidth = box.offsetWidth const boxHeight = box.offsetHeight if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 15 + this.toolbox.x = left + 15 } else { - this.tooltip.x = left - boxWidth - 15 + this.toolbox.x = left - boxWidth - 15 } if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框 - this.tooltip.y = top + 15 + this.toolbox.y = top + 15 } else { - this.tooltip.y = top - boxHeight - 10 + this.toolbox.y = top - boxHeight - 10 } } }) @@ -694,17 +687,9 @@ export default { if (this.isConnect !== 'none') { echarts.disconnect('timeSeriesGroup') } - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:hidden;transition:none;', - hideDelay: 0 - } - } - getChart(this.chartId).setOption(option) getChart(this.chartId).dispatchAction({ type: 'hideTip' }) - // 生成dataLink tooltip const nameArr = params.seriesName.split('-') if (nameArr.length > 1) { nameArr.splice(nameArr.length - 1, 1) @@ -737,7 +722,7 @@ export default { className = 'yAxis-icon nz-icon nz-icon-youzongzhou' } const color = this.colorList[params.seriesIndex] - this.tooltip.tooltipHtml = ` + this.toolbox.tooltipHtml = `
${bus.timeFormate(tData)}
@@ -751,24 +736,16 @@ export default {
` - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.clickIndex = params.seriesIndex + this.toolbox.show = true + this.toolbox.clickIndex = params.seriesIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) if (this.isConnect !== 'none') { echarts.connect('timeSeriesGroup') } }, clickout () { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:99999999;visibility:visible;' - } - } - getChart(this.chartId).setOption(option) + this.toolbox.show = false }, showSelectedSeries () { if (this.isConnect !== 'none') { @@ -776,7 +753,7 @@ export default { } this.legends.forEach((item, index) => { - if (index == this.tooltip.clickIndex) { + if (index == this.toolbox.clickIndex) { getChart(this.chartId).dispatchAction({ type: 'legendSelect', name: item.name @@ -789,7 +766,7 @@ export default { } }) - this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex) + this.isGrey = this.isGrey.map((g, i) => i !== this.toolbox.clickIndex) this.$refs.legend.isGrey = this.isGrey if (this.isConnect !== 'none') { echarts.disconnect('timeSeriesGroup') diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js index 6435982da..25c7940aa 100644 --- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js +++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js @@ -46,7 +46,8 @@ export const chartTimeSeriesLineOption = { label: { show: false } - } + }, + hideDelay: 0 }, dataZoom: [ { diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue index a58ab7e9c..897c422c1 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue @@ -23,9 +23,9 @@
-
-
-
+
+
+
@@ -82,14 +82,13 @@ export default { dataSize: 20, chartDot: 2, theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light', - tooltip: { + toolbox: { x: 0, y: 0, title: 0, value: 0, mapping: {}, show: false, - dataLinkShow: '', metric: {}, activeIndex: undefined, clickIndex: undefined @@ -248,12 +247,6 @@ export default { if (this.isInit) { this.chart.on('click', this.chartClick) - this.chart.on('mousedown', (params) => { - if (this.tooltip.dataLinkShow) { - const e = params.event.event - e.stopPropagation() - } - }) // 鼠标滑过当前symbol 改变样式 this.chart.on('mousemove', (params) => { @@ -274,7 +267,7 @@ export default { dataIndex: params.dataIndex } ) - this.tooltip.activeIndex = params.seriesIndex + this.toolbox.activeIndex = params.seriesIndex }) this.chart.on('mouseout', (params) => { const option = this.chart.getOption() @@ -287,7 +280,7 @@ export default { }) }) this.chart.setOption({ series }) - this.tooltip.activeIndex = undefined + this.toolbox.activeIndex = undefined }) } @@ -533,7 +526,7 @@ export default { showFlag = showFlag || item.value[1] if (!isNaN(item.value[1] + '')) { const val = Number(item.value[1]) - str += `
` + str += `
` str += `
${alias || item.seriesName} @@ -707,9 +700,9 @@ export default { oldDot } }, - datalinkPosition (e) { + toolboxPosition (e) { this.$nextTick(() => { - const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`) + const box = document.getElementById(`chart-toolbox-${this.chartId}`) const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top if (box) { @@ -718,22 +711,15 @@ export default { const parent = chartDom.parentElement const parClientWidth = parent.clientWidth// 可视宽度 if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框 - this.tooltip.x = left + 10 + this.toolbox.x = left + 10 } else { - this.tooltip.x = left - boxWidth + this.toolbox.x = left - boxWidth } - this.tooltip.y = top + 10 + this.toolbox.y = top + 10 } }) }, chartClick (params) { - const option = { - tooltip: { - extraCssText: 'z-index:1000;visibility:hidden;transition:none;', - hideDelay: 0 - } - } - this.chart.setOption(option) this.chart.dispatchAction({ type: 'hideTip' }) @@ -754,7 +740,7 @@ export default { } const val = formatScientificNotation(params.value[1], paramsDot) const color = this.colors[params.seriesIndex] - this.tooltip.tooltipHtml = ` + this.toolbox.tooltipHtml = `
${bus.timeFormate(tData)}
@@ -768,25 +754,17 @@ export default {
` - this.tooltip.show = true - this.tooltip.dataLinkShow = true - this.tooltip.clickIndex = params.seriesIndex + this.toolbox.show = true + this.toolbox.clickIndex = params.seriesIndex const e = params.event.event - this.datalinkPosition(e) + this.toolboxPosition(e) }, clickout () { - this.tooltip.show = false - this.tooltip.dataLinkShow = false - const option = { - tooltip: { - extraCssText: 'z-index:1000;visibility:visible;' - } - } - this.chart.setOption(option) + this.toolbox.show = false }, showSelectedSeries () { this.legend.forEach((item, index) => { - if (index == this.tooltip.clickIndex) { + if (index == this.toolbox.clickIndex) { this.chart.dispatchAction({ type: 'legendSelect', name: item.name @@ -802,7 +780,7 @@ export default { this.legend = this.legend.map((item, index) => { return { ...item, - isGray: index !== this.tooltip.clickIndex + isGray: index !== this.toolbox.clickIndex } }) this.clickout() diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue index c43d04b60..de2d120ad 100644 --- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue +++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue @@ -76,14 +76,15 @@ const commonOption = { tooltip: { trigger: 'axis', confine: false, - extraCssText: 'z-index:1000;', + extraCssText: 'z-index:99999999;', backgroundColor: 'rgba(221,228,237,1)', borderColor: 'rgba(221,228,237,1)', textStyle: { color: '#000' }, axisPointer: { snap: false, animation: false - } + }, + hideDelay: 0 // formatter:null, // position:null, }, From 275815bc4ffa901f7a7eae8b25fd4b3a9e8e3bd9 Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 16 Oct 2023 17:39:01 +0800 Subject: [PATCH 2/3] =?UTF-8?q?NEZ-3237=20feat=EF=BC=9Aabout=20=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2release=20note=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/page/config/about.vue | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/nezha-fronted/src/components/page/config/about.vue b/nezha-fronted/src/components/page/config/about.vue index ba3afc542..d2b301400 100644 --- a/nezha-fronted/src/components/page/config/about.vue +++ b/nezha-fronted/src/components/page/config/about.vue @@ -54,6 +54,27 @@ export default { }, activities: [ { + timestamp: 'Release 23.10 - Oct 2023', + content: [{ + chinese: '[FEATURE] 笔记本功能允许您将多种图表组合起来，以构建可共享的、数据丰富的文档。使用笔记本，您可以对事件进行故障排除，创建事后分析，并构建运行手册', + english: '[FEATURE] The notebook feature allows you to combine multiple charts to build shareable, data-rich documents. Using notebooks, you can troubleshoot incidents, create postmortems, and build runbooks' + }, { + chinese: '[FEATURE] 系统备份功能允许您将系统的配置保存到磁盘，以便在需要的时候恢复数据', + english: '[FEATURE] The backup feature allows you to save the system configuration to disk so you can recover the configuration when needed' + }, { + chinese: '[FEATURE] 通过软件资产管理功能可以集中管理软件资产，统计软件的使用情况', + english: '[FEATURE] The software asset management feature can centrally manage software assets and count software usage' + }, { + chinese: '[ENHANCEMENT] 告警消息详情页面增加显示相关资产仪表板并支持快照导出', + english: '[ENHANCEMENT] The alarm message details page now displays the related asset dashboard and supports snapshot export' + }, { + chinese: '[ENHANCEMENT] 时序图表优化用户体验', + english: '[ENHANCEMENT] Time series charts optimize user experience' + }, { + chinese: '[ENHANCEMENT] 探索日志数据支持查看上下文', + english: '[ENHANCEMENT] Exploring log data supports viewing context' + }] + }, { timestamp: 'Release 23.07 - Jul 2023', content: [{ chinese: '[FEATURE] 新增资产发现功能', From 52ddc7079efbbf8abf688d589e10a8bbdbf1b592 Mon Sep 17 00:00:00 2001 From: zyh Date: Mon, 16 Oct 2023 18:00:44 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=20NEZ-3235=20fix=EF=BC=9Anotebook=20?= =?UTF-8?q?=E4=BF=9D=E5=AD=98=E6=97=B6=E5=88=A0=E9=99=A4=20=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=E5=A4=84=E7=90=86=E4=BA=A7=E7=94=9F=E7=9A=84=E4=B8=B4?= =?UTF-8?q?=E6=97=B6=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nezha-fronted/src/components/chart/chartMixin.js | 1 - .../common/bottomBox/tabs/notebookTab.vue | 4 ++++ .../src/components/page/notebook/notebookList.vue | 13 +------------ 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 329f3c3d2..7386b6a5a 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -226,7 +226,6 @@ export default { if (chartInfo.elements) { if (chartInfo.elements[expressionIndex]) { alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend, tagKeysArr) - console.log(alias, this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend, tagKeysArr), legend, chartInfo.elements[expressionIndex].legend, tagKeysArr) } if (!alias) { alias = chartInfo.elements[expressionIndex].expression || '' diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue index e6c701e71..34c48a6d9 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue @@ -176,6 +176,10 @@ export default { let charts = this.$lodash.cloneDeep(this.$refs.notebookList.copyDataList) charts = charts.filter(item => item.name !== 'groupTemp') charts.forEach(item => { + delete item.x + delete item.y + delete item.modifiedName + delete item.oldElements if (item.type === 'text') { delete item.param.isEdit delete item.param.oldText diff --git a/nezha-fronted/src/components/page/notebook/notebookList.vue b/nezha-fronted/src/components/page/notebook/notebookList.vue index 548171b5d..2de237713 100644 --- a/nezha-fronted/src/components/page/notebook/notebookList.vue +++ b/nezha-fronted/src/components/page/notebook/notebookList.vue @@ -101,16 +101,6 @@ export default { this.$refs['chart' + item.id] && this.$refs['chart' + item.id][0] && this.$refs['chart' + item.id][0].getChartData(refreshData) }) }, - resizedEvent (i, newH, newW, newHPx, newWPx) { - // TODO 重新渲染图表，向后端发送put请求 - setTimeout(() => { - this.$refs['chart' + i][0].resize() - this.onScroll(this.scrollTop) - }, 100) - }, - movedEvent (i, newX, newY) { - this.onScroll(this.scrollTop) - }, onScroll (scrollTop = 0) { const self = this if (this.scrollTopTimer) { @@ -165,8 +155,7 @@ export default { const cloneDataList = this.$lodash.cloneDeep(n) const tempList = cloneDataList.map((item, index) => { return { - ...item, - i: item.id + ...item } }) this.$nextTick(() => {