diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue index ae8713258..a802fe184 100644 --- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue +++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue @@ -640,27 +640,6 @@ export default { }, 100) }) }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, clickLegend (legendName, index) { /* 点击legend * 1.当前如果是全高亮状态,则全部置灰,只留被点击的legend高亮 diff --git a/nezha-fronted/src/components/charts/chart-list-group.vue b/nezha-fronted/src/components/charts/chart-list-group.vue index dd00a241b..fd2400e6c 100644 --- a/nezha-fronted/src/components/charts/chart-list-group.vue +++ b/nezha-fronted/src/components/charts/chart-list-group.vue @@ -243,6 +243,7 @@ import chartBarStatis from './chart-bar-statistics' import logs from './logs' import { fromRoute } from '@/components/common/js/constants' import chartTempData from '@/components/charts/chartTempData' +import { dealLegendAlias } from '@/components/common/js/tools' // import visNetwork from './visNetwork' export default { name: 'chartList', @@ -900,7 +901,7 @@ export default { host = chartItem.elements[innerPos].expression } // 处理legend别名 - let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend) + let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend) if (!alias || alias === '') { alias = host } @@ -1136,7 +1137,7 @@ export default { host += '}' } // 处理legend别名 - let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend) + let alias = dealLegendAlias(host, chartInfo.elements[0].legend) if (!alias || alias === '') { alias = host } diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 08b229d0a..5698c2398 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -293,7 +293,7 @@ import chartGroup from './chart-group' import logs from './logs' import { fromRoute } from '@/components/common/js/constants' import chartTempData from '@/components/charts/chartTempData' -import { chartResizeTool } from '@/components/common/js/tools' +import { chartResizeTool, dealLegendAlias } from '@/components/common/js/tools' export default { name: 'chartList', props: { @@ -1164,7 +1164,7 @@ export default { host = chartItem.elements[innerPos].expression } // 处理legend别名 - let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend) + let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend) if (!alias || alias === '') { alias = host } @@ -1404,7 +1404,7 @@ export default { host += '}' } // 处理legend别名 - let alias = this.$refs['editChart' + chartInfo.id][0].dealLegendAlias(host, chartInfo.elements[0].legend) + let alias = dealLegendAlias(host, chartInfo.elements[0].legend) if (!alias || alias === '') { alias = host } diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue index 4eab8e2ab..33538f735 100644 --- a/nezha-fronted/src/components/charts/chart-pie.vue +++ b/nezha-fronted/src/components/charts/chart-pie.vue @@ -538,27 +538,6 @@ export default { }, 100) }) }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, clickLegend (legendName, index) { /* 点击legend * 1.当前如果是全高亮状态,则全部置灰,只留被点击的legend高亮 diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index ec477bea7..432379c7f 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -614,27 +614,6 @@ export default { this.orderByScreen = { order: item.order, prop: item.prop } this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen') }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, // 获取格式 getNumStr (num) { if (num) { diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue index 4430dc283..68261d0ee 100644 --- a/nezha-fronted/src/components/charts/chartPreview.vue +++ b/nezha-fronted/src/components/charts/chartPreview.vue @@ -200,7 +200,7 @@ import chartAlertList from './chart-alert-list' import chartConfig from '../page/dashboard/overview/chartConfig' import diagram from '@/components/common/ChartDiagram/diagram' import moment from 'moment-timezone' -import { formatScientificNotation } from '@/components/common/js/tools' +import { formatScientificNotation, dealLegendAlias } from '@/components/common/js/tools' export default { name: 'chartPreview', components: { @@ -572,7 +572,7 @@ export default { host = chartItem.elements[innerPos].expression } // 处理legend别名 - let alias = this.dealLegendAlias(host, chartItem.elements[innerPos].legend) + let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend) if (!alias || alias === '') { alias = host } @@ -1740,7 +1740,7 @@ export default { if (!host || host === '') { host = this.chart.elements[pos].expression } - let alias = this.dealLegendAlias(host, this.chart.elements[pos].legend) + let alias = dealLegendAlias(host, this.chart.elements[pos].legend) if (!alias || alias === '') { alias = host } @@ -1780,27 +1780,6 @@ export default { }) }) }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, screenPageNo (val) { this.screenPageObj.pageNo = val this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj) diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index a20ab69b2..8424d1151 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -211,7 +211,7 @@ import chartDataFormat from './chartDataFormat' import { randomcolor } from '../common/js/radomcolor/randomcolor.js' import chartConfig from '../page/dashboard/overview/chartConfig' import { getChart, setChart, lineChartMove, getMousePoint } from '../common/js/common' -import { getMetricTypeValue, chartResizeTool, formatScientificNotation } from '../common/js/tools' +import { getMetricTypeValue, chartResizeTool, formatScientificNotation, dealLegendAlias} from '../common/js/tools' import moment from 'moment-timezone' import chartDataList from '@/components/common/mixin/chartDataList' @@ -404,7 +404,6 @@ export default { const hasGrey = highlightNum < this.isGrey.length // 是否有置灰的 const curIsGrey = this.isGrey[index] // 当前legend的状态 const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的 - const echart = getChart(this.chartIndex) if (echart) { if (!hasGrey) { // 1.除当前legend外全置灰 @@ -493,7 +492,6 @@ export default { const hasGrey = highlightNum < this.isGreyScreen.length // 是否有置灰的 const curIsGrey = this.isGreyScreen[index] // 当前legend的状态 const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的 - const echart = this.echartModalStore if (echart) { if (!hasGrey) { // 1.除当前legend外全置灰 @@ -1725,7 +1723,7 @@ export default { if (!host || host === '') { host = elements.expression } - let alias = this.dealLegendAlias(host, elements.legend) + let alias = dealLegendAlias(host, elements.legend) if (!alias || alias === '') { alias = host } @@ -1823,27 +1821,6 @@ export default { this.$refs['localLoading' + this.chartIndex].startLoading() this.divFirstShow = true }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, // 获取格式 getNumStr (num) { if (num >= 1000) { diff --git a/nezha-fronted/src/components/charts/logs.vue b/nezha-fronted/src/components/charts/logs.vue index 2a1e99d65..9c4765907 100644 --- a/nezha-fronted/src/components/charts/logs.vue +++ b/nezha-fronted/src/components/charts/logs.vue @@ -146,6 +146,7 @@ import logTab from '@/components/page/dashboard/explore/logTab' import bus from '@/libs/bus' import logsTempData from '@/components/charts/logsTempData' import { fromRoute } from '@/components/common/js/constants' +import { dealLegendAlias } from '@/components/common/js/tools' export default { name: 'logs', components: { @@ -543,7 +544,7 @@ export default { host += '}' } // 处理legend别名 - alias = this.dealLegendAlias(host, this.chartData.elements[index].legend) + alias = dealLegendAlias(host, this.chartData.elements[index].legend) if (!alias || alias === '') { alias = host } @@ -622,7 +623,7 @@ export default { host += '}' } // 处理legend别名 - alias = this.dealLegendAlias(host, this.chartData.elements[index].legend) + alias = dealLegendAlias(host, this.chartData.elements[index].legend) if (!alias || alias === '') { alias = host } @@ -692,27 +693,6 @@ export default { reader.readAsText(error.response.data) }) }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, dateChange (time) { this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss') this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss') diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue index 3d730aac7..94e3bcccb 100644 --- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue +++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue @@ -336,7 +336,7 @@ import alertTable from '../project/popData/alertTable' import assetTable from '../project/popData/assetTable' import endpointTable from '../project/popData/endpointTable' import topoTooltip from '../project/L5/topoTooltip' -import { getMetricTypeValue } from '../js/tools' +import { getMetricTypeValue, dealLegendAlias} from '../js/tools' import bus from '../../../libs/bus' import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu' // 注册到画布 @@ -992,7 +992,7 @@ export default { host = pen.data.expressArr[innerPos] } // 处理legend别名 - let alias = this.dealLegendAlias(host, pen.data.legends[innerPos]) + let alias = dealLegendAlias(host, pen.data.legends[innerPos]) if (!alias || alias === '') { alias = host } @@ -1006,27 +1006,6 @@ export default { } return res }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, // Severity Label returnSeverityLabel (key) { return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label) diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index 4bc8a57cf..4fe669962 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -864,3 +864,21 @@ export function formatScientificNotation (value, dot = 2) { return getTdDom(dom.parentElement); } } */ +/* 处理legend的别名 */ +export function dealLegendAlias (legend, expression) { + if (/\{\{.+\}\}/.test(expression)) { + const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { + const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) + const reg = new RegExp('\\b' + label + '=".+?"') + let value = null + if (reg.test(legend)) { + const find = legend.match(reg)[0] + value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) + } + return value || label + }) + return labelValue + } else { + return expression + } +} diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue index d805c9dad..c3ff30469 100644 --- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue +++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue @@ -40,6 +40,7 @@ import { fromRoute } from '@/components/common/js/constants' import chartTempData from '@/components/charts/chartTempData' import axios from 'axios' import chartDataFormat from '@/components/charts/chartDataFormat' +import { dealLegendAlias } from '@/components/common/js/tools' export default { name: 'topoTooltip', components: { @@ -299,7 +300,7 @@ export default { host = chartItem.elements[innerPos].expression } // 处理legend别名 - let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend) + let alias = dealLegendAlias(host, chartItem.elements[innerPos].legend) if (!alias || alias === '') { alias = host } diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue index 9f1128ef1..706cb18b7 100644 --- a/nezha-fronted/src/components/common/project/topologyL5.vue +++ b/nezha-fronted/src/components/common/project/topologyL5.vue @@ -362,7 +362,7 @@ import alertTable from './popData/alertTable' import assetTable from './popData/assetTable' import endpointTable from './popData/endpointTable' import topoTooltip from './L5/topoTooltip' -import { getMetricTypeValue } from '../js/tools' +import { getMetricTypeValue, dealLegendAlias } from '../js/tools' import bus from '../../../libs/bus' // 注册到画布 registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect) @@ -1005,7 +1005,7 @@ export default { host = pen.data.expressArr[innerPos] } // 处理legend别名 - let alias = this.dealLegendAlias(host, pen.data.legends[innerPos]) + let alias = dealLegendAlias(host, pen.data.legends[innerPos]) if (!alias || alias === '') { alias = host } @@ -1019,27 +1019,6 @@ export default { } return res }, - dealLegendAlias: function (legend, expression) { - if (/\{\{.+\}\}/.test(expression)) { - const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) { - const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2) - const reg = new RegExp(',' + label + '=".+?"') - const reg1 = new RegExp('{' + label + '=".+?"') - let value = null - if (reg.test(legend)) { - const find = legend.match(reg)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } else if (reg1.test(legend)) { - const find = legend.match(reg1)[0] - value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1) - } - return value || label - }) - return labelValue - } else { - return expression - } - }, // 获取project Info getProjectData (n) { // 获取projectInfo diff --git a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue index 2ed36898f..333ffbea7 100644 --- a/nezha-fronted/src/components/page/dashboard/explore/logTab.vue +++ b/nezha-fronted/src/components/page/dashboard/explore/logTab.vue @@ -107,6 +107,7 @@