diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js index 37ed414ff..b50b15c3f 100644 --- a/nezha-fronted/src/components/chart/chartMixin.js +++ b/nezha-fronted/src/components/chart/chartMixin.js @@ -119,9 +119,20 @@ export default { } // Thresholds 只对左Y轴有效 if (s.yAxisIndex != 1) { + chartInfo.param.thresholds = chartInfo.param.thresholds.reverse() s.markLine.data = chartInfo.param.thresholds.map(threshold => { return { yAxis: threshold.value || 0, + label: { + show: true, + formatter () { + if (threshold.label) { + return threshold.label + } else { + return threshold.value || 0 + } + } + }, lineStyle: { color: threshold.color, width: 2, diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue index c9804d06b..44e8fd792 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue @@ -670,26 +670,36 @@ export default { queryDate () { this.chartLoading = true let chartInfo = {} + const severityData = JSON.parse(localStorage.getItem('nz-severityDataWeight')) + const conditionArr = JSON.parse(this.currentMsg.alertRule.condition) if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) { chartInfo = lodash.cloneDeep(lineData) chartInfo.elements = [{}] - if (!isNaN(this.currentMsg.alertRule.threshold)) { + if (conditionArr.length) { chartInfo.param.enable.thresholds = true - chartInfo.param.thresholds = [{ - value: this.currentMsg.alertRule.threshold, - color: '#d64f40' - }] + chartInfo.param.thresholds = conditionArr.map(item => { + const findItem = severityData.find(severity => severity.id === item.id) + if (findItem) { + item.color = findItem.color + item.label = findItem.name + } + return item + }).filter(item => item.value) } chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) } else if (this.currentMsg.alertRule.type === 2) { chartInfo = lodash.cloneDeep(logData) chartInfo.elements = [{}] - if (!isNaN(this.currentMsg.alertRule.threshold)) { + if (conditionArr.length) { chartInfo.param.enable.thresholds = true - chartInfo.param.thresholds = [{ - value: this.currentMsg.alertRule.threshold, - color: '#d64f40' - }] + chartInfo.param.thresholds = conditionArr.map(item => { + const findItem = severityData.find(severity => severity.id === item.id) + if (findItem) { + item.color = findItem.color + item.label = findItem.name + } + return item + }).filter(item => item.value) } chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\r|\n+/g, '')) } diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 0ae72a0d4..bc03b3e4f 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -718,26 +718,37 @@ export default { queryDate () { this.chartLoading = true let chartInfo = {} + const severityData = JSON.parse(localStorage.getItem('nz-severityDataWeight')) + const conditionArr = JSON.parse(this.currentMsg.alertRule.condition) + console.log(this.currentMsg.alertRule.condition, this.severityData) if (this.currentMsg.alertRule.type === 1 || this.currentMsg.alertRule.type === 3) { chartInfo = lodash.cloneDeep(lineData) chartInfo.elements = [{}] - if (!isNaN(this.currentMsg.alertRule.threshold)) { + if (conditionArr.length) { chartInfo.param.enable.thresholds = true - chartInfo.param.thresholds = [{ - value: this.currentMsg.alertRule.threshold, - color: '#d64f40' - }] + chartInfo.param.thresholds = conditionArr.map(item => { + const findItem = severityData.find(severity => severity.id === item.id) + if (findItem) { + item.color = findItem.color + item.label = findItem.name + } + return item + }).filter(item => item.value) } chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, '')) } else if (this.currentMsg.alertRule.type === 2) { chartInfo = lodash.cloneDeep(logData) chartInfo.elements = [{}] - if (!isNaN(this.currentMsg.alertRule.threshold)) { + if (conditionArr.length) { chartInfo.param.enable.thresholds = true - chartInfo.param.thresholds = [{ - value: this.currentMsg.alertRule.threshold, - color: '#d64f40' - }] + chartInfo.param.thresholds = conditionArr.map(item => { + const findItem = severityData.find(severity => severity.id === item.id) + if (findItem) { + item.color = findItem.color + item.label = findItem.name + } + return item + }).filter(item => item.value) } chartInfo.elements && (chartInfo.elements[0].expression = this.currentMsg.alertRule.expr.replace(/\r|\n+/g, '')) }