feat:dashboard legend 别名功能 & asset-account 配置bug修改

nezha-fronted/src/components/charts/chart-list.vue

@@ -18,7 +18,7 @@
     <div class="chartBox" v-for="(item, index) in dataList"    :key="item.id" :id="item.title+'_'+item.id">
 
       <line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
-      ref="editChart" 
+      ref="editChart"
       @on-refresh-data="refreshChart"
       @on-remove-chart-block="removeChart"
       @on-edit-chart-block="editData"
@@ -29,7 +29,7 @@
       <chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
       @on-refresh-data="refreshChart"
       @on-search-data="searchData"
-      @on-remove-chart-block="removeChart" 
+      @on-remove-chart-block="removeChart"
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId"
       :chart-index="index"
@@ -243,10 +243,10 @@ export default {
                 visible: true,
                 threshold: null,
               };
-
               res.forEach((response, innerPos) => {
                 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);

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -37,8 +37,8 @@
 
     <div class="legend-container"   id="legendArea" ref="legendArea" v-show="firstShow">
       <el-scrollbar style="height: 100%;">
-      <div v-for="(item, index) in legendList" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
+      <div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-        <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
+        <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
         <br/><!--bgColorList[index]-->
       </div>
       </el-scrollbar>
@@ -70,8 +70,8 @@
       </div>
       <div class="line-area " ref="screenShowArea"  id="screenShowArea"  style="margin-top:10px;"></div>
       <div class="legend-container"  id="screenLegendArea" ref="screenLegendArea"  v-show="showLegend">
-        <div v-for="(item, index) in screenLegendList" :title="item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
+        <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-          <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
+          <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
           <br/><!--bgColorList[index]-->
         </div>
       </div>
@@ -670,8 +670,9 @@
             this.legendList = [];
             legend.forEach((item, i) => {
               const legend = {
-                name:item,
+                name:item.name,
-                showText:this.formatLegend(chartWidth,item)
+                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,
+                name:item.name,
-                showText:this.formatLegend(chartWidth,item)
+                alias:item.alias,
+                showText:this.formatLegend(chartWidth,item.alias?item.alias:item.name)
               };
               this.screenLegendList.push(legend);
               this.isGreyScreen.push(false);

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) {
+          if (!this.accountSwitch) {
-          //   this.assetData.accounts = [];
+            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 === '') {
+                // if (this.assetData.accounts[0].user === '') {
-                  authType = ''
+                //   authType = ''
-                } else {
+                // } else {
-                  authType = this.assetData.accounts[0].authType
+                //   authType = this.assetData.accounts[0].authType
-                }
+                // }
                 // let form = new FormData();
                 // form.append("sn", this.assetData.sn);
                 // form.append("host", this.assetData.host);

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
                 });
               }
             });

nezha-fronted/src/components/page/dashboard/chartMetric.vue

@@ -103,7 +103,7 @@
   .nz-tab-chart-style-left{
     margin-left:40px;
   }
-  
+
 </style>
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
@@ -193,6 +193,9 @@
       </el-col>
 
     </el-row>
+    <el-form-item label="legend" prop="legend" >
+      <el-input v-model="elementInfo.legend" type="text" size="small"></el-input>
+    </el-form-item>
   </el-form>
 </template>
 <script>
@@ -230,7 +233,8 @@ export default {
         // name: '',
         tagList: [], // 标签列表
         selectedTagList:[],//已选中的标签列表
-        expression:''
+        expression:'',
+        legend:''
       },
       metricLoading: false,
       keydataList: [], // tag标签键列表
@@ -380,6 +384,7 @@ export default {
         this.tableShow = 2;
         this.elementInfo.type = this.target.type;
         this.elementInfo.expression = this.target.expression;
+        this.elementInfo.legend=this.target.legend;
       }else {
         this.tableShow = 1;
         this.elementInfo.type = this.target.type;
@@ -391,6 +396,7 @@ export default {
         }else {
           this.elementInfo.metric = expression;
         }
+        this.elementInfo.legend=this.target.legend;
         //this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
         this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
           this.elementInfo.selectedTagList = [];