diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index a96607fa0..41a6b47e4 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -18,7 +18,7 @@
{ if (response.status === 'success') { if (response.data.result) { + // console.log(response.data.result) // 循环处理每个elements下获取的数据列 response.data.result.forEach((queryItem) => { const seriesItem = { @@ -278,7 +278,9 @@ export default { }); if(host.endsWith(',')){host = host.substr(0,host.length-1);} host +="}"; - legend.push(host); + //处理legend别名 + let alias=this.dealLegendAlias(host,chartItem.elements[innerPos].legend); + legend.push({name:host,alias:alias}); // 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c seriesItem.theData.name = host; seriesItem.metric_name = seriesItem.theData.name; @@ -388,7 +390,21 @@ export default { chartBox[index].style.width = `${(size / 12) * 100}%`; }); }, + dealLegendAlias:function(legend,expression){ + if(/\{\{.+\}\}/.test(expression)){ + let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){ + let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2) + let reg=new RegExp(label+'=".+?"') + let find=legend.match(reg)[0]; + let value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1); + return value; + }) + return labelValue + }else{ + return expression; + } + }, getNewTime(time, num) { const date = new Date(time); const newDate = new Date(parseInt(date.getTime(), 10) + num); diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue index 467c42781..530569634 100644 --- a/nezha-fronted/src/components/charts/line-chart-block.vue +++ b/nezha-fronted/src/components/charts/line-chart-block.vue @@ -37,8 +37,8 @@
-
- {{item.name}} +
+ {{item.alias?item.alias:item.name}}
@@ -70,8 +70,8 @@
-
- {{item.name}} +
+ {{item.alias?item.alias:item.name}}
@@ -670,8 +670,9 @@ this.legendList = []; legend.forEach((item, i) => { const legend = { - name:item, - showText:this.formatLegend(chartWidth,item) + name:item.name, + alias:item.alias, + showText:this.formatLegend(chartWidth,item.name) }; this.legendList.push(legend); this.isGrey.push(false); @@ -750,8 +751,9 @@ this.screenLegendList = []; legend.forEach((item, i) => { const legend = { - name:item, - showText:this.formatLegend(chartWidth,item) + name:item.name, + alias:item.alias, + showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name) }; this.screenLegendList.push(legend); this.isGreyScreen.push(false); diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue index 7de7e0a33..a031157b4 100644 --- a/nezha-fronted/src/components/common/rightBox/assetBox.vue +++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue @@ -860,9 +860,9 @@ // form.append("idcId", this.assetData.idcId); // form.append("cabinetId", this.assetData.cabinetId); // form.append("modelId", modelId); - // if (!this.accountSwitch) { - // this.assetData.accounts = []; - // } + if (!this.accountSwitch) { + this.assetData.accounts = []; + } // for(let i in this.assetData.accounts){ // let account=this.assetData.accounts[i]; // if(account.user){ @@ -902,17 +902,17 @@ console.log("accountValideResult-->"+this.accountValideResult) } let modelId = '' - let authType = '' + // let authType = '' // if (this.assetData.modelId !== '') { // modelId = this.assetData.modelId.join(',').split(',')[1] // } else { // this.assetData.modelId = '' // } - if (this.assetData.accounts[0].user === '') { - authType = '' - } else { - authType = this.assetData.accounts[0].authType - } + // if (this.assetData.accounts[0].user === '') { + // authType = '' + // } else { + // authType = this.assetData.accounts[0].authType + // } // let form = new FormData(); // form.append("sn", this.assetData.sn); // form.append("host", this.assetData.host); diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index a695d7834..6c8504f5f 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -215,7 +215,8 @@ elements:{ id: '', expression: '', - type: '' + type: '', + legend:'', }, panel: '' }, @@ -317,6 +318,7 @@ this.rightBox.title = title; }, save() { + console.log(this.chart); this.$refs['chartForm'].validate((valid) => { if (valid) { if (this.chart.id) {//修改 @@ -503,6 +505,7 @@ //metric: elem.metric,//指标名称 expression: metricStr,//指标对应Label及Value组成的表达式字符串 type:elem.type,//指标类型 + legend:elem.legend,//配置的legend }); }else if(elem.type==='expert'){ elements.push({ @@ -510,6 +513,7 @@ //metric: elem.metric,//指标名称 expression: elem.expression,//指标对应Label及Value组成的表达式字符串 type:elem.type,//指标类型 + legend:elem.legend,//配置的legend }); } }); diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue index 16546faeb..e66670c95 100644 --- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue +++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue @@ -103,7 +103,7 @@ .nz-tab-chart-style-left{ margin-left:40px; } - +