fix：修改问题

1 chart编辑界面metric选择优化功能已完成，包括新增修改图表及explore中的metric（metric为3级级联选择，label及value为2级级联选择，metric及lable及value为同一接口获取）

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

@@ -191,6 +191,7 @@
                             :pointer="index"
                             :metric-list="metricList"
                             :metricCascaderList="metricCascaderList"
+                            :metricAllData="metricAllData"
                             :count-total="elements.length"
                             @on-delete-target="deleteTarget"
                             @sub-save-ok="subOk"
@@ -292,6 +293,7 @@
         selectFirstPanel: false,
         metricList: [], // metric列表
         metricCascaderList:[],//metric级联列表
+        metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
         deleteIndex: '', // 要删除的指标模块
         subCount: 0, // subSave保存data到bus计数器
         panel: {
@@ -450,12 +452,13 @@
         if (this.subCount === this.elements.length) {
           this.subCount = 0;
           // 保存完成,进行删除操作
-          //alert('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
+          console.log('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
-          //alert('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+          console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
           this.elements.splice(this.deleteIndex, 1);
           this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
           bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
-          //alert('box第二步，删除完毕，elements='+JSON.stringify(this.elements)+'  elementTarget='+JSON.stringify(this.elementTarget)+'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+          console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),'  elementTarget='+JSON.stringify(this.elementTarget),'  bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+
           this.$nextTick(() => {
             this.$refs.chartTag.forEach((item, index) => {
               item.setSubdata(index); // 将数据从bus重新赋值
@@ -552,6 +555,7 @@
       },
       // 更新图表
       updateCharts(params) {
+        console.log('))))))))))))=',params)
         this.$put('panel/' + this.panelId + '/charts', params).then(response2 => {
           if (response2.code === 200) {
             this.esc();
@@ -632,7 +636,9 @@
       getSuggestMetric() {
         //this.$get('/prom/api/v1/label/__name__/values').then(response => {
         this.$get('/module?pageSize=-1').then(response => {
+          console.log('---response---',response);
           if (response.code === 200) {
+            console.log('---response200---',response);
             this.metricList = response.data.list;
             const cascaderMap = new Map();
             this.metricList.forEach((item,index) => {
@@ -650,6 +656,20 @@
                 childArr.push(childOption);
                 cascaderMap.set(projectName,childArr);
               }
+
+              //缓存全局数据
+              const moduleItem = {
+                name:moduleName,
+                metricMap:new Map()
+              };
+              if(this.metricAllData.has(projectName)){
+                let moduleGroup = this.metricAllData.get(projectName);
+                this.metricAllData.get(projectName).push(moduleItem);
+              }else {
+                let moduleList = [];
+                moduleList.push(moduleItem);
+                this.metricAllData.set(projectName,moduleList);
+              }
             });
             let metricCascaderArr = [];
             cascaderMap.forEach(function(value,index){
@@ -660,7 +680,9 @@
               };
               metricCascaderArr.push(option);
             });
+
             this.metricCascaderList = metricCascaderArr;
+            console.log('---response200metricCascaderList---',this.metricCascaderList);
           }else {
             this.metricList = [];
             this.metricCascaderList = [];
@@ -692,6 +714,7 @@
 
           } else {
             this.$nextTick(() => {
+              console.log('1_+_+_+_+_+_+',JSON.stringify(elementInfo.elements[0]));
               this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
             });
           }
@@ -719,7 +742,7 @@
         this.chart.height = data.height+'';
         this.chart.type = data.type;
         this.chart.unit=data.unit;
-        this.getSuggestMetric();//获得指标列表
+        //this.getSuggestMetric();//获得指标列表
         // 指标
         this.elements = [];
         bus.chartAddInfo.metricTarget = [];
@@ -754,7 +777,7 @@
           this.productId = parseInt(this.$route.params.productId, 10);
         }
         */
-        this.getSuggestMetric();//this.getSuggestMetric(this.productId);
+        //this.getSuggestMetric();
       },
 
       /*metric部分相关方法--end*/
@@ -807,7 +830,7 @@
 
     },
     created() {
-
+      this.getSuggestMetric();
     },
     watch: {
       panelData: {
@@ -826,7 +849,14 @@
           }
         }
       }
+    },
+    beforeDestroy() {
+      if(this.$refs.chartTag){
+        this.$refs.chartTag.forEach((item, index) => {//循环指标列表
+          item.clearSelectedTagList();
+        });
       }
+    },
   }
 </script>
 <style>

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

@@ -51,7 +51,7 @@
     height: 248px;
    /* border: 1px solid #dcdfe6;*/
     border-radius: 4px;
-    padding: 0px 0 10px 15px;
+    padding: 0px 0 10px 0px;
     margin-bottom:0px !important;
     width:100%;
   }
@@ -67,8 +67,12 @@
     margin-bottom:8px;
   }
 
+  .mb22{
+     margin-bottom:22px;
+   }
+
   .metric-title-position{
-    margin-bottom: 8px;
+    margin-bottom: 0px;
   }
   .metric-title-row-position{
     margin-top:-10px;
@@ -86,6 +90,12 @@
     width: 619px;
     z-index: 2950 !important;
   }
+
+  .metric-box-dropdown{
+    width: 619px;
+    z-index: 2950 !important;
+  }
+
 </style>
 <style>
   .li-list-part-label-val-list .metric-title-position .el-form-item__label {
@@ -110,6 +120,37 @@
   .dashboard-metric-dropdown .el-scrollbar__wrap{
     margin-bottom: 0px !important;
   }
+
+  .dashboard-metric-dropdown .el-cascader-menu:nth-child(1){
+    min-width:80px !important;
+  }
+  .dashboard-metric-dropdown .el-cascader-menu:nth-child(2){
+    min-width:80px !important;
+  }
+  .dashboard-metric-dropdown .el-cascader-menu:nth-child(3){
+    min-width:360px !important;
+  }
+
+  .label-cascader .el-cascader__tags{
+
+    max-height:50px;
+    overflow-y:auto;
+    right:5px !important;
+
+  }
+
+  .label-cascader .el-input--suffix {/*
+    max-height:50px;
+    overflow-y:auto; */
+  }
+
+  .label-cascader .el-input__suffix{
+    display:none !important;
+  }
+
+  .label-cascader .el-cascader__tags span:nth-child(-n+2)>i{
+    display:none !important;
+  }
 </style>
 <template>
   <el-form :model="elementInfo" ref="elementInfo"   >
@@ -132,7 +173,7 @@
 
     <template  v-if="tableShow == 2">
       <el-form-item class="right-box-form-content" prop="expression" :rules="{ required: true,  message:$t('validate.required'), trigger: 'blur' }"><!--expression和metric的验证只能有一个，不能同时存在？？:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
-        <el-input size="mini"  :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" ref="metricExpression" type="textarea" rows="7" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
+        <el-input size="mini"  @input="changeExpression" :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" ref="metricExpression" type="textarea" rows="7" maxlength="1024" show-word-limit v-model="elementInfo.expression" :placeholder="this.$t('dashboard.metric.expertTip')" ></el-input>
         <div @click="deleteTarget" class="right-box-row-btn" v-if="countTotal > 1" style="vertical-align: top">
           <i class="el-icon-minus"></i>
         </div>
@@ -140,14 +181,14 @@
     </template>
     <template v-if="tableShow == 1">
       <el-form-item class="right-box-form-content" label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+        <!--@expand-change="handleItemChange"-->
         <el-cascader ref="metricSelect"  :class="{'right-box-row-with-btn': countTotal > 1, 'full-width': countTotal <= 1}" filterable placeholder="" popper-class="chart-box-dropdown dashboard-metric-dropdown" size="small"
                      :id="'cascader'+this.pointer"
                      v-model="elementInfo.metric"
                      :options="metricCascaderList"
-                     :props="{ expandTrigger: 'click' }"
+                     :props="cascaderProps"
                      :show-all-levels="false"
                      @change="selectMetric"
-                     @expand-change="handleItemChange"
         >
         </el-cascader>
         <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
@@ -157,24 +198,36 @@
       </el-form-item>
     </template>
 
-<!-- create chart组件显示框 -->
+    <el-row v-if="elementInfo.metric && tableShow == 1" class="mb22" >
-    <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+      <el-form-item class="metric-title-position right-box-form-content"  :key="this.pointer"  :ref="'tagItem' + this.pointer" :prop="'tagList.' + this.pointer + '.value'" >
+        <el-cascader :key="'labelValueCascaderKey'+this.pointer" ref="labelValSelect"
+                     class="label-cascader full-width"
+                     size="small"
+                     placeholder=""
+                     popper-class="metric-dropdown "
+                     v-model="labelValueCascaderVal"
+                     :options="labelValueCascaderOptions"
+                     :props="labelValueProps"
+                     v-scrollBar:metric-label-cascader
+                     @change="changeTag"
+                     clearable>
+        </el-cascader>
+      </el-form-item>
+    </el-row>
     <!--
-      <el-col :span="8">
+    <el-row v-if="elementInfo.metric && tableShow == 1">
-        <div class="li-list-part">
+      <el-col :span="24">
-          <el-scrollbar style="height: 100%">
+        <div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
-              <div class="li-cursor" v-if="!item.isSelect"
+
-                  v-for="(item,index) in elementInfo.tagList"
+            <el-form-item style="width:99%;" class="metric-title-position right-box-form-content"  :key="this.pointer"  :ref="'tagItem' + this.pointer" :prop="'tagList.' + this.pointer + '.value'" >
-                  @click="getLidata(index,item)"
+
-                  :key="index">
+            </el-form-item>
-                {{item.name}}
-              </div>
-          </el-scrollbar>
         </div>
       </el-col>
-
+    </el-row>
-      <el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
     -->
+    <!--
+    <el-row v-if="elementInfo.metric && tableShow == 1">
       <el-col :span="24">
         <div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
           <el-scrollbar ref="scrollbar" style="height: 100%">
@@ -193,17 +246,14 @@
                     <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
                   </el-select>
                 </el-col>
-                <!--
-                <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                -->
               </el-row>
             </el-form-item>
           </el-scrollbar>
         </div>
       </el-col>
-
     </el-row>
-    <el-form-item prop="legend" >
+    -->
+    <el-form-item prop="legend" v-show="hasLegend">
       <el-row :gutter="4">
         <el-col :span="4">
           {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
@@ -213,7 +263,6 @@
         </el-col>
         <el-col :span="20"><el-input v-model="elementInfo.legend" type="text" size="small"></el-input></el-col>
       </el-row>
-<!--      <el-input v-model="elementInfo.legend" type="text" size="small"></el-input>-->
     </el-form-item>
   </el-form>
 </template>
@@ -233,11 +282,18 @@ export default {
       type: Array,
       default: () => [],
     },
+    metricAllData:Map,
     metricCascaderList:Array,
+    //metricCascaderListTmp:Array,//3级级联列表：project/module/metric，metric是在本页面动态获得，并设置本页面的metric对应的label级value（metricLabelValInfo列表，所以不可重复使用？？）
+    //metricLabelValInfo:Map,//用于存放所有的metric，label，val
     countTotal: {
       type: Number,
       default: 1,
     },
+    hasLegend:{
+      type:Boolean,
+      default:true
+    }
   },
   components: {
     //multipleSelect
@@ -255,7 +311,10 @@ export default {
         expression:'',
         legend:''
       },
-      metricLabelValInfo:new Map,//用于存放所有的metric，label，val
+      labelValueCascaderOptions:[],//label及value改为级联后，显示用的待选label及value
+      labelValueCascaderVal:[],//label及value改为级联后，选择的label及value
+      //metricCascaderList:[],
+      metricLabelValInfo:new Map(),//用于存放所有的metric，label，val
       metricLoading: false,
       keydataList: [], // tag标签键列表
       target: null, // 获取到的数据
@@ -263,6 +322,138 @@ export default {
       setDataFlag: false, // true时为获取数据,编辑状态
       vendorCount: '',
       labelSort:['project','module','endpoint','datacenter','asset'],
+      cascaderProps:{
+        expandTrigger: 'click',
+        lazy: true,
+        that:this,
+        lazyLoad (node, resolve) {
+          /*
+          1 第一次加载界面：node:{"root":true,"level":0,"loading":true}
+          2 点击的一级节点，则直接从list中获得，如果点击的为二级节点，先看对应list里是否有，没有再从接口获得
+          */
+          let nodeLevel = node.level;
+          let _this = this.that;
+          if(nodeLevel===1){
+            setTimeout(() => {
+              resolve([]);
+            }, 100);
+          }else if(nodeLevel===2){
+            setTimeout(() => {
+              let project = node.parent.data.label;
+              let module = node.data.label;
+              let metricArr = [];
+              let metricArrTmp = [];
+              console.log('success=3',project,module,_this.metricCascaderList);
+
+              let metricLabelValMap = new Map();
+              let projectItem = _this.metricAllData.get(project);
+              if(projectItem){
+                let moduleItem = projectItem.find(item => item.name === module);
+                if(moduleItem){
+                  metricLabelValMap = moduleItem.metricMap;
+                }
+              }
+              if(metricLabelValMap.size>0){
+                _this.metricLabelValInfo = metricLabelValMap;
+                metricLabelValMap.forEach((item,index)=>{
+                  const childOption = {
+                    value: index,
+                    label: index,
+                    leaf:true,
+                  };
+                  metricArr.push(childOption);
+                });
+                console.log('success=111',metricArr);
+                resolve(metricArr);
+              }else {
+                console.log('success=222');
+                _this.metricCascaderList.map((item, index) => {
+                  if(item.label===project){//选择的project
+                    item.children.map((innerItem, innerIndex) => {
+                      if (innerItem.value === module){
+                        if (innerItem.children.length === 0) {//不重复加载
+                          // 当二级分类的的child为空时才请求一次数据
+                          let match = '{project="'+project+'",module="'+module+'"}';
+                          _this.$get('/prom/api/v1/series?match[]='+match).then(res => {
+                            console.log('success=5',res)
+                            if (res.status === 'success') {
+                              res.data.forEach((tag, i) => {
+                                let metricName = tag.__name__;
+                                if(metricArrTmp.indexOf(metricName)===-1){
+                                  const childOption = {
+                                    value: metricName,//+"_par",
+                                    label: metricName,
+                                    leaf:nodeLevel>=2,
+                                  };
+                                  metricArrTmp.push(metricName);
+                                  metricArr.push(childOption);
+                                }
+                                const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
+                                let labelValList = [];
+
+                                tagsArr.forEach((tagName) => {
+                                  if (tagName !== '__name__') {
+                                    const tagObj = {
+                                      name: tagName,
+                                      list:[],
+                                      value:[]//最终选择的值
+                                    };
+                                    let tagValue = tag[tagName];
+                                    const tagItem = labelValList.find(item => item.name === tagName);
+                                    if(tagItem){//metric对应的label已添加
+                                      if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加
+                                        tagItem.list .push(tagValue);
+                                      }
+                                    }else {//metric对于的label未添加
+                                      tagObj.list.push(tagValue);
+                                      labelValList.push(tagObj);
+                                    }
+                                  }
+                                });
+                                if(_this.metricLabelValInfo.has(metricName)){
+                                  let existMetricLabelList =  _this.metricLabelValInfo.get(metricName);
+                                  labelValList.forEach((labelItem,index)=>{
+                                    const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name);
+                                    if(existTagItem){//label已添加
+                                      labelItem.list.forEach((valueItem,valIndex)=>{
+                                        if(existTagItem.list.indexOf(valueItem)===-1){//value未添加
+                                          existTagItem.list.push(valueItem);
+                                        }
+                                      })
+                                    }else {//label未添加
+                                      existMetricLabelList.push(labelItem);
+                                    }
+                                  })
+                                }else {
+                                  _this.metricLabelValInfo.set(metricName,labelValList);
+                                }
+                                //全局缓存数据设置
+                                _this.cacheData(project,module,metricName,labelValList);
+                              });
+                              resolve(metricArr);
+                            }else {
+                              console.log('success=999')
+                              resolve([]);
+                            }
+                          })
+                        }else {//已经加载过了
+                          console.log('success=78')
+                          resolve([]);
+                        }
+                      }
+                    })
+                  }
+                });
+              }
+
+            }, 1000);
+          }
+          setTimeout(() => {
+            _this.cascaderStyle();
+          }, 100);
+        }
+      },
+      labelValueProps:{ multiple: true },
     };
   },
   watch: {},
@@ -275,6 +466,7 @@ export default {
     },
     // 第二步,on-delete-target回调，保存数据
     subSave() {
+      this.convertLabelValueCascadeVal();
       //alert('metric第二步，bus.chartAddInfo.metricTarget,指针'+JSON.stringify(bus.chartAddInfo.metricTarget)+'==pointer'+this.pointer);
       bus.chartAddInfo.metricTarget[this.pointer] = this.elementInfo;
       //alert('metric第二步，保存信息到bus'+JSON.stringify(this.elementInfo))
@@ -282,11 +474,11 @@ export default {
     },
     // 第三步,将数据重新赋值,sub-save-ok回调
     setSubdata(index) {
-      //alert('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
+      console.log('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
-      //alert('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
+      console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
       this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
-      //alert('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
+      console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
-      //alert('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
+      console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
       if(this.elementInfo.type==='expert'){
         //alert('metric第三步，expert');
         // 当该项expression为空时，重置一下
@@ -300,25 +492,94 @@ export default {
         if (!this.elementInfo.metric && this.$refs.metricSelect) {
           this.$refs.metricSelect.reset();
         }
+        this.setLabelValueCascader();
         this.clickTabelShow(1,'normal');
       }
     },
-
+    clearSelectedTagList(){
-
+      console.log('--------clear selected')
+      this.elementInfo.selectedTagList.forEach((selectItem)=>{
+        selectItem.value = [];//清空值，再进行赋值
+      });
+    },
+    convertLabelValueCascadeVal(){
+      //把级联选择label及value，转换为selectedTagList里的value？？？？？？
+      this.clearSelectedTagList();
+      console.log('*** this.labelValueCascaderVal***',JSON.stringify(this.labelValueCascaderVal))
+      this.labelValueCascaderVal.forEach((item)=>{//[label,value]
+        let casLabel = item[0];
+        let casValue = item[1];
+        console.log('*** this.elementInfo.selectedTagList***',JSON.stringify(this.elementInfo.selectedTagList))
+        this.elementInfo.selectedTagList.forEach((selectItem)=>{
+          let selectLabel = selectItem.name;
+          let selectValue = selectItem.value;
+          console.log('111',selectLabel,casLabel)
+          if(selectLabel===casLabel){
+            console.log('222',selectValue.indexOf(casValue),selectValue,casValue)
+            if(selectValue.indexOf(casValue)===-1){
+              selectValue.push(casValue);
+            }
+          }
+        });
+        console.log('*** this.elementInfo.selectedTagList***end',JSON.stringify(this.elementInfo.selectedTagList))
+      });
+    },
     // (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
     saveTarget(pointer,optType) {
+      console.log(this.pointer,pointer,'this.labelValueCascaderVal=====',JSON.stringify(this.labelValueCascaderVal));
       if (this.pointer === pointer) {
         this.$refs.elementInfo.validate((valid) => {
           if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
             if(this.elementInfo.expression){
               this.elementInfo.expression = this.elementInfo.expression.replace(/\s+|&nbsp;/ig,'');
             }
+            if(this.elementInfo.type==='normal' && this.elementInfo.metric instanceof Array){
+              this.elementInfo.metric = this.elementInfo.metric[2];
+            }
+            console.log('+++++++',JSON.stringify(this.labelValueCascaderVal));
+            this.convertLabelValueCascadeVal();//将label，value级联选择的值，转换为selectTagList里
             this.$emit('on-add-target-success', this.elementInfo, pointer,optType);
           }
         });
       }
     },
+    setLableValueFromCache(project,module){
+      let projectItem = this.metricAllData.get(project);
+      if(projectItem){
+        let moduleItem = projectItem.find(item => item.name === module);
+        if(moduleItem){
+          this.metricLabelValInfo = moduleItem.metricMap;
+        }
+      }
+    },
+    cacheData(project,module,metricName,labelValList){
+      let projectItem = this.metricAllData.get(project);
+      if(projectItem){
+        let moduleItem = projectItem.find(item => item.name === module);
+        if(moduleItem){
+          let metricAllMap = moduleItem.metricMap;
+          if(metricAllMap.has(metricName)){
+            let existMetricLabelList =  metricAllMap.get(metricName);
+            labelValList.forEach((labelItem,index)=>{
+              const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name);
+              if(existTagItem){//label已添加
+                labelItem.list.forEach((valueItem,valIndex)=>{
+                  if(existTagItem.list.indexOf(valueItem)===-1){//value未添加
+                    existTagItem.list.push(valueItem);
+                  }
+                })
+              }else {//label未添加
+                existMetricLabelList.push(labelItem);
+              }
+            })
+          }else {
+            moduleItem.metricMap.set(metricName,labelValList);
+          }
+        }
+      }
+    },
     setLabelDivHeight(count){
+      /*
         if (count === 0) {
           const chartBox = document.getElementById('scrollDiv' + this.pointer);
           chartBox.style.height = `${10}px`;
@@ -329,9 +590,84 @@ export default {
           const chartBox = document.getElementById('scrollDiv' + this.pointer);
           chartBox.style.height = `${248}px`;
         }
-
+*/
     },
+    /*
+    getMetricNodes(project,module) {
+      let metricArr = [];
+      let metricArrTmp = [];
+      this.metricCascaderList.map((item, index) => {
+        if(item.label===project){//选择的project
+          item.children.map((innerItem, innerIndex) => {
+            if (innerItem.value === module && innerItem.children.length === 0) {//不重复加载
+              // 当二级分类的的child为空时才请求一次数据
+              let match = '{project="'+project+'",module="'+module+'"}';
+              this.$get('/prom/api/v1/series?match[]='+match).then(res => {
+                if (res.status === 'success') {
+
+                  res.data.forEach((tag, i) => {
+                    let metricName = tag.__name__;
+                    if(metricArrTmp.indexOf(metricName)===-1){
+                      const childOption = {
+                        value: metricName,//+"_par",
+                        label: metricName
+                      };
+                      metricArrTmp.push(metricName);
+                      metricArr.push(childOption);
+                    }
+                    //this.$set(item.children[innerIndex], 'children', metricArr);
+
+                    const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
+                    let labelValList = [];
+
+                    tagsArr.forEach((tagName) => {
+                      if (tagName !== '__name__') {
+                        const tagObj = {
+                          name: tagName,
+                          list:[],
+                          value:[]//最终选择的值
+                        };
+                        let tagValue = tag[tagName];
+                        const tagItem = labelValList.find(item => item.name === tagName);
+                        if(tagItem){//metric对应的label已添加
+                          if(tagItem.list.indexOf(tagValue)===-1){//label对于value是否添加，没有添加，则添加
+                            tagItem.list .push(tagValue);
+                          }
+                        }else {//metric对于的label未添加
+                          tagObj.list.push(tagValue);
+                          labelValList.push(tagObj);
+                        }
+                      }
+                    });
+                    if(this.metricLabelValInfo.has(metricName)){
+                      let existMetricLabelList =  this.metricLabelValInfo.get(metricName);
+                      labelValList.forEach((labelItem,index)=>{
+                        const existTagItem = existMetricLabelList.find(item => item.name === labelItem.name);
+                        if(existTagItem){//label已添加
+                          labelItem.list.forEach((valueItem,valIndex)=>{
+                            if(existTagItem.list.indexOf(valueItem)===-1){//value未添加
+                              existTagItem.list.push(valueItem);
+                            }
+                          })
+                        }else {//label未添加
+                          existMetricLabelList.push(labelItem);
+                        }
+                      })
+                    }else {
+                      this.metricLabelValInfo.set(metricName,labelValList);
+                    }
+                  });
+                }
+              })
+            }
+          })
+        }
+      });
+      return metricArr;
+    },
+    */
     //动态加载第三级选项metric及label
+    /*
     handleItemChange(val) {
       if(val && val.length===2) {//点击二级菜单，才进行查询
         let proTmp = val[0];
@@ -410,12 +746,71 @@ export default {
         });
       }
     },
+    */
+    cascaderStyle(){
+      let cascaderElem = document.querySelectorAll('.dashboard-metric-dropdown>.el-cascader-panel>.el-cascader-menu');
+      if(cascaderElem[0]){
+        cascaderElem[0].style.minWidth = '80px';
+      }
+      if(cascaderElem[1]){
+        cascaderElem[1].style.minWidth = '80px';
+      }
+      if(cascaderElem[2]){
+        cascaderElem[2].style.minWidth = '360px';
+      }
+    },
+    setLabelValueCascader(){
+      this.labelValueCascaderOptions = [];
+      this.labelValueCascaderVal = [];
+      this.elementInfo.selectedTagList.forEach((item)=>{
+        let valList = item.list;
+        const labelOption = {
+          value:item.name,
+          label:item.name,
+          children:[]
+        }
+        if(valList && valList.length>0){
+          valList.forEach((valuItem)=>{
+            let disabled = false;
+            if(item.name==='project' || item.name==='module'){
+              disabled = true;
+            }
+            const valOption = {
+              value:valuItem,
+              label:valuItem,
+              disabled: disabled,
+            }
+            labelOption.children.push(valOption);
+          });
+        }
+        this.labelValueCascaderOptions.push(labelOption);
+
+        console.log('++++item.val.length',item.value);
+        if(item.value.length>0){
+          item.value.forEach((valueItem)=>{
+            let labelVal = [];
+            labelVal.push(item.name);
+            labelVal.push(valueItem);
+            this.labelValueCascaderVal.push(labelVal);
+          });
+        }
+      });
+      console.log('++++val',this.labelValueCascaderVal);
+      console.log('++++22',this.labelValueCascaderOptions);
+    },
+    changeTag(){
+      this.$emit('on-change-condition');
+    },
+    changeExpression(v){
+      this.$emit('on-change-condition');
+    },
     // 选择metric
     selectMetric() {
+      console.log('---setMetricToLabelValue---start')
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
         this.getSuggestTags(this.elementInfo.metric);
+        this.setLabelValueCascader();
         this.elementInfo.metric = this.elementInfo.metric[2];
-
       } else {
         this.elementInfo.tagList = [];
         this.setLabelDivHeight(0);
@@ -425,25 +820,19 @@ export default {
           this.$refs.scrollbar.update();
         }, 100);
       });
-
+      this.changeTag();
     },
-    // 获取tags列表
+    setLabelValue(tagListTmp,project,module){
-    getSuggestTags(metricArr) {
-      let metric = metricArr[2];
-      let proTmp = metricArr[0];
-      let project = proTmp.substring(0, proTmp.length - 4);
-      let module = metricArr[1];
-      this.elementInfo.selectedTagList = [];
-      if(this.metricLabelValInfo.has(metric)){
-        let tagListTmp = [];
-        tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
-        //console.log(metric+'!!!!!!!!!!!!!!!!!!!'+JSON.stringify(tagListTmp));
       tagListTmp.forEach((item) => {
         if(item.name==='project'){
+          if(item.value.indexOf(project)===-1){
             item.value.push(project);
+          }
         }else if(item.name==='module'){
+          if(item.value.indexOf(module)===-1) {
             item.value.push(module);
           }
+        }
       });
 
       this.labelSort.forEach((sortItem) => {
@@ -466,52 +855,41 @@ export default {
       this.$nextTick(() => {
         this.setLabelDivHeight(tagNum);
       });
-      }else{
+    },
-        this.elementInfo.selectedTagList = [];
+    // 获取tags列表
-        this.setLabelDivHeight(0);
+    getSuggestTags(metricArr) {
-      }
+      console.log('---getSuggestTags---start',this.metricLabelValInfo)
-      /*
+      let metric = metricArr[2];
-      this.$get('/metric/series?match[]='+metric).then(response => {
+      let proTmp = metricArr[0];
+      let project = proTmp.substring(0, proTmp.length - 4);
+      let module = metricArr[1];
       this.elementInfo.selectedTagList = [];
+      if(this.metricLabelValInfo.has(metric)){
+        console.log('---metricLabelValInfo--has---start')
         let tagListTmp = [];
-        if (response.code === 200) {
+        tagListTmp = [...this.metricLabelValInfo.get(metric)];
-          const objList = Object.entries(response.data);
+        tagListTmp.forEach((selectItem)=>{
-          objList.forEach((item) => {
+          selectItem.value = [];//清空值，再进行赋值
-            const tagObj = {
-              name: item[0],
-              list:item[1],
-              value:[]//最终选择的值
-            };
-            if(item[0]==='project'){
-              tagObj.value.push(project);
-            }else if(item[0]==='module'){
-              tagObj.value.push(module);
-            }
-            tagListTmp.push(tagObj);
         });
-          this.labelSort.forEach((sortItem) => {
+        this.setLabelValue(tagListTmp,project,module);
-            let itemIndex = -1;
-            tagListTmp.forEach((item,i) => {
-              if(sortItem===item.name){//labelSort:['project','module','endpoint','datacenter','asset'],
-                this.elementInfo.selectedTagList.push(item);
-                itemIndex = i;
-              }
-            });
-            if(itemIndex!==-1){
-              tagListTmp.splice(itemIndex,1);
-            }
-          });
-          tagListTmp.forEach((item,i) => {
-            this.elementInfo.selectedTagList.push(item);
-          });
-
-          let tagNum = this.elementInfo.selectedTagList.length;
-          this.setLabelDivHeight(tagNum);
       }else {
-          this.elementInfo.selectedTagList = [];
+        let projectItem = this.metricAllData.get(project);
-          this.setLabelDivHeight(0);
+        if(projectItem) {
+          let moduleItem = projectItem.find(item => item.name === module);
+          if (moduleItem) {
+            let metricAllMap = moduleItem.metricMap;
+            if (metricAllMap.has(metric)) {
+              let tagListTmp = metricAllMap.get(metric);
+              this.setLabelValue(tagListTmp,project,module);
+            }
+          }
+        }
+
+        //this.elementInfo.selectedTagList = [];
+        //this.$nextTick(() => {
+          //this.setLabelDivHeight(0);
+        //});
       }
-      });*/
     },
     getStyles(width) {
       return `width: ${width}px;`;
@@ -519,13 +897,104 @@ export default {
     filterMethod(value, option) {
       return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
     },
+    getItemValue(labArr,itemName){
+      let itemVal = '';
+      labArr.forEach((item, index) => {
+        let labNameTmp = item.substring(0,item.indexOf('='));//project   module   dc
+        if(labNameTmp===itemName){
+          let labVal = item.substring(item.indexOf('=')+1,item.length);
+          if(labVal.indexOf('~')!=-1){
+            labVal = labVal.substring(2,labVal.length-1);
+            let valArr = labVal.split('|');
+            itemVal = valArr[0];
+          }else {
+            labVal = labVal.substring(1,labVal.length-1);
+            itemVal = labVal;
+          }
+        }
+      });
+      return itemVal;
+    },
+
     getMetricLabelValue(metric,othersParams){
-      let match = '{__name__="'+metric+'"}';
+      let labArr = othersParams.split(',');
+      let projectVal = this.getItemValue(labArr,'project');
+      let projectCascaderVal = projectVal+'_par';
+      let moduleVal = this.getItemValue(labArr,'module');
+      this.elementInfo.metric = [projectCascaderVal,moduleVal,metric];
+      //先判断缓存中是否已经存在数据，无则再从后台获取
+      let metricLabelValMap = new Map();
+      let projectItem = this.metricAllData.get(projectVal);
+      if(projectItem){
+        let moduleItem = projectItem.find(item => item.name === moduleVal);
+        if(moduleItem){
+          metricLabelValMap = moduleItem.metricMap;
+        }
+      }
+      if(metricLabelValMap.size>0){
+        //设置labelValue列表
+        this.metricLabelValInfo = metricLabelValMap;
+        //设置3级级联metric选择的metric
+        let metricArr = [];
+        metricLabelValMap.forEach((item,index)=>{
+          const childOption = {
+            value: index,
+            label: index,
+            leaf:true,
+          };
+          metricArr.push(childOption);
+        });
+        this.metricCascaderList.map((item, index) => {
+          if (item.value === projectCascaderVal) {//选择的project
+            item.children.map((innerItem, innerIndex) => {
+              if (innerItem.value === moduleVal && innerItem.children.length === 0) {//不重复加载
+                this.$set(innerItem, 'children', metricArr);
+              }
+            })
+          }
+        });
+
+        this.elementInfo.selectedTagList = [];
+        if(this.metricLabelValInfo.has(metric)){
+          let tagListTmp = [];
+          tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
+          tagListTmp.forEach((selectItem)=>{
+            selectItem.value = [];//清空值，再进行赋值
+          });
+          //设置选择的值
+          let labArr = othersParams.split(',');
+          tagListTmp.forEach((tagItem) => {
+            let labelName = tagItem.name;
+            labArr.forEach((item, index) => {//b=~'1|2|3'
+              let labNameTmp = item.substring(0,item.indexOf('='));//project   module   dc
+              if(labNameTmp===labelName){
+                let labVal = item.substring(item.indexOf('=')+1,item.length);
+                if(labVal.indexOf('~')!=-1){
+                  labVal = labVal.substring(2,labVal.length-1);
+                  let valArr = labVal.split('|');
+                  valArr.forEach((labItem, labIndex) => {
+                    if(tagItem.value.indexOf(labItem)===-1){
+                      tagItem.value.push(labItem);
+                    }
+                  });
+                }else {
+                  labVal = labVal.substring(1,labVal.length-1);
+                  if(tagItem.value.indexOf(labVal)===-1){
+                    tagItem.value.push(labVal);
+                  }
+                }
+              }
+            });
+          });
+          //排序label顺序
+          this.sortLabel(tagListTmp,this.elementInfo.selectedTagList);
+          console.log('11111111111111');
+          this.setLabelValueCascader();
+        }
+      }else {
+        let match = '{project="'+projectVal+'",module="'+moduleVal+'"}';
         this.$get('/prom/api/v1/series?match[]='+match).then(res => {
-        console.log("==="+JSON.stringify(res));
-        //this.$get('http://192.168.40.247:9090/api/v1/series?match[]='+match).then(res => {
           if (res.status === 'success') {
-          let queryItem = res.data;//[]设置  metric和label
             let metricArr = [];
             let metricArrTmp = [];
             res.data.forEach((tag, i) => {
@@ -533,11 +1002,22 @@ export default {
               if(metricArrTmp.indexOf(metricName)===-1){
                 const childOption = {
                   value: metricName,//+"_par",
-                label: metricName
+                  label: metricName,
+                  leaf:true,
                 };
                 metricArrTmp.push(metricName);
                 metricArr.push(childOption);
               }
+              this.metricCascaderList.map((item, index) => {
+                if (item.value === projectCascaderVal) {//选择的project
+                  item.children.map((innerItem, innerIndex) => {
+                    if (innerItem.value === moduleVal && innerItem.children.length === 0) {//不重复加载
+                      this.$set(innerItem, 'children', metricArr);
+                    }
+                  })
+                }
+              })
+
               const tagsArr = Object.keys(tag);//["__name__","asset","idc","instance","job","module","project"]
               let labelValList = [];
 
@@ -577,12 +1057,18 @@ export default {
               }else {
                 this.metricLabelValInfo.set(metricName,labelValList);
               }
+              //缓存数据
+              this.cacheData(projectVal,moduleVal,metricName,labelValList);
             });
 
             this.elementInfo.selectedTagList = [];
+            console.log('---response---start',this.metricLabelValInfo)
             if(this.metricLabelValInfo.has(metric)){
               let tagListTmp = [];
               tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
+              tagListTmp.forEach((selectItem)=>{
+                selectItem.value = [];//清空值，再进行赋值
+              });
               //设置选择的值
               let labArr = othersParams.split(',');
               tagListTmp.forEach((tagItem) => {
@@ -595,31 +1081,35 @@ export default {
                       labVal = labVal.substring(2,labVal.length-1);
                       let valArr = labVal.split('|');
                       valArr.forEach((labItem, labIndex) => {
+                        if(tagItem.value.indexOf(labItem)===-1){
                           tagItem.value.push(labItem);
+                        }
                       });
                     }else {
                       labVal = labVal.substring(1,labVal.length-1);
+                      if(tagItem.value.indexOf(labVal)===-1){
                         tagItem.value.push(labVal);
                       }
                     }
+                  }
                 });
               });
               //排序label顺序
               this.sortLabel(tagListTmp,this.elementInfo.selectedTagList);
-
+              this.setLabelValueCascader();
-            let tagNum = this.elementInfo.selectedTagList.length;
+              //let tagNum = this.elementInfo.selectedTagList.length;
-            this.$nextTick(() => {
+              //this.$nextTick(() => {
-              this.setLabelDivHeight(tagNum);
+                //this.setLabelDivHeight(tagNum);
-            });
+              //});
             }else{
               this.$nextTick(() => {
                 this.elementInfo.selectedTagList = [];
-              this.setLabelDivHeight(0);
+                //this.setLabelDivHeight(0);
               });
             }
-
           }
-      })
+        });
+      }
     },
     sortLabel(tagListTmp,rltList){
       this.labelSort.forEach((sortItem) => {
@@ -643,6 +1133,7 @@ export default {
 
     // 编辑已有图表状态时，先填充数据
     setMdata(data) {
+      console.log('-------data******',JSON.stringify(data))
       this.setDataFlag = true;
       this.target = Object.assign({}, data);
       //this.pointer =
@@ -662,7 +1153,8 @@ export default {
         }else {
           this.elementInfo.metric = expression;
         }
-        // 当该项metric为空时，重置一下
+        //设置metric显示的值
+        /*
         if (this.$refs.metricSelect) {
           let cascaderDiv = document.querySelector('#cascader'+this.pointer);
           if(cascaderDiv){
@@ -671,51 +1163,11 @@ export default {
               cascaderInput.firstElementChild.value = this.elementInfo.metric;
             }
           }
-        }
+        }*/
 
         this.elementInfo.legend=this.target.legend;
         let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
-        this.getMetricLabelValue(this.elementInfo.metric,labelValList);//获得metric及对应label级value
+        this.getMetricLabelValue(this.elementInfo.metric,labelValList);//获得metric及对应label及value
-        /*
-        this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
-          this.elementInfo.selectedTagList = [];
-          if (response.code === 200) {
-              const objList = Object.entries(response.data);
-              objList.forEach((item) => {
-                const tagObj = {
-                  name: item[0],
-                  list:item[1],
-                  value:[]//最终选择的值
-                };
-                let labelName = item[0];
-                let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
-                let labArr = labelValList.split(',');
-                labArr.forEach((item, index) => {//b=~'1|2|3'
-                    let labNameTmp = item.substring(0,item.indexOf('='));
-                    if(labNameTmp===labelName){
-                      let labVal = item.substring(item.indexOf('=')+1,item.length);
-                      if(labVal.indexOf('~')!=-1){
-                        labVal = labVal.substring(2,labVal.length-1);
-                        let valArr = labVal.split('|');
-                        valArr.forEach((labItem, labIndex) => {
-                          tagObj.value.push(labItem);
-                        });
-                      }else {
-                        labVal = labVal.substring(1,labVal.length-1);
-                        tagObj.value.push(labVal);
-                      }
-                    }
-                });
-
-                this.elementInfo.selectedTagList.push(tagObj);
-              });
-              let tagNum = this.elementInfo.selectedTagList.length;
-              this.setLabelDivHeight(tagNum);
-          }else {
-            this.elementInfo.selectedTagList = [];
-            this.setLabelDivHeight(0);
-          }
-        });*/
       }
       setTimeout(() => {
         this.$refs.scrollbar.update();
@@ -892,7 +1344,12 @@ export default {
     bus.$on('clear_history', () => {
       this.clearHistory();
     });
+    console.log('@#$%%',this.metricCascaderList);
+    //this.metricCascaderList = [...this.metricCascaderListTmp];
   },
+  beforeDestroy() {
+  },
+
 };
 
 </script>

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

@@ -1,8 +1,5 @@
 <style lang="scss">
   @import 'metricSet';
-  // .el-checkbox__input.is-checked+.el-checkbox__label{
-  //   color:$global-text-color-active;
-  // }
   .el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner,.el-checkbox-button.is-checked .el-checkbox-button__inner{
     border: 1px solid $header-text-color-active;
     color:#666;
@@ -22,25 +19,15 @@
     <div class="metric-form">
       <el-row class="element-item" >
           <chart-metric ref="chartTag"
+            :hasLegend="false"
+            :count-total="elements.length"
             :metric-list="metricList"
             :metricCascaderList="metricCascaderList"
+            :metricAllData="metricAllData"
             @on-add-target-success="getTarget"
             @on-change-condition="getCondition"
           ></chart-metric>
       </el-row>
-       <!-- <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
-            <chart-metric ref="chartTag"
-                           :pointer="index"
-                           :metric-list="metricList"
-                           :metricCascaderList="metricCascaderList"
-                           :count-total="elements.length"
-                           @on-delete-target="deleteTarget"
-                           @sub-save-ok="subOk"
-                           @on-add-target-success="getTarget"
-                           @on-change-condition="getCondition"
-                ></chart-metric>
-
-          </el-row> -->
 
       <el-row class="operate-area">
 
@@ -49,73 +36,16 @@
                 class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
                 :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}"
         >{{$t('dashboard.metric.saveChart')}}</button>
-        <!--<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10"
-                :class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}"
-        >{{chartSwitchWord}}</button>-->
-
-        <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
       </el-row>
-
-      <!--<el-row class="nz-btn-metric-bottom">
-
-        <button :disabled="saveDisabled" type="button" @click="saveChart"
-                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light nz-btn-metricbtn  btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal nz-btn-min-width-120' : !saveDisabled}"
-        >{{$t('dashboard.metric.saveChart')}}</button>
-
-      </el-row>-->
-<!-- options -->
-      <!--<el-row class="mt-10 margin-b-10">
-        <div>Options</div>
-      </el-row>
-      <el-form :model="chartInfo" ref="chartInfo">
-        <el-row>
-          <div class="common-float-left">
-            <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.width')" prop="span"
-            :rules="{ required: true, type: 'number', trigger: 'change' }">
-              <el-select class="w-select" size="mini" v-model="chartInfo.span" transfer>
-                <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-                  span-{{item}}
-                </el-option>
-              </el-select>
-            </el-form-item>
     </div>
-        </el-row>
-
-        <el-row>
-          <div class="common-float-left common-middle">
-            <el-form-item label-width="80px" :label="$t('dashboard.panel.chartForm.high')" prop="height"
-            :rules="{ required: true, type: 'number', trigger: 'change' }">
-              <el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input>
-              <span class='nz-input-append'>px</span>
-            </el-form-item>
-          </div>
-        </el-row>
-
-        <el-row>
-          <div class="common-float-left">
-            <el-form-item  label-width="80px" :label="$t('dashboard.panel.chartForm.type')" prop="type"
-              :rules="{ required: true,   trigger: 'change' }">
-              <el-select transfer class="w-select" v-model="chartInfo.type" size="mini">
-                <el-option v-for="item in typeList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id">
-                  {{item.name}}
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </div>
-        </el-row>
-      </el-form>-->
-    </div>
-    <!--<metric-pre-panel-box :chartInfo="chartInfo"  :elementTarget="elementTarget" :seriesData="seriesData" :series="series" :chartCount="chartCount" @reload="reload"  ref="panelBox"></metric-pre-panel-box>-->
     <chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="reloadPanelData" @reload="reloadPanelData"></chart-box>
   </div>
 </template>
 <script>
 //import axios from 'axios';
 import bus from '../../../libs/bus';
-import chartMetric from "./chartMetricForPreview";
+//import chartMetric from "./chartMetricForPreview";
+import chartMetric from "./chartMetric";
 import chartBox from "./chartBox";
 //import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
 
@@ -134,7 +64,7 @@ export default {
       total: 0,
       loading: false, // 加载中
       chartModal: false, // 展示弹出框
-      elements: [1], // 指标部分 tarNum
+      //elements: [1], // 指标部分 tarNum
       // 新建信息
       /*chartInfo: {
         title: '', // 名称
@@ -161,6 +91,7 @@ export default {
       panelId: 0,
       metricList: [], // metric列表
       metricCascaderList:[],//metric级联列表
+      metricAllData:new Map(),//存放所有的project-module-metric-labelValue，避免重复加载
       isSave: false, // 是否要保存
       saveDisabled: true, // 不可保存
       createModal: false, // 创建看板panel
@@ -245,6 +176,7 @@ export default {
     saveChart() { //新增chart
       this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
       this.$refs.addChartModal.show(true);
+      //console.log('1_+_+_+_+_+_+',JSON.stringify(this.metricInfo));
       this.$refs.addChartModal.createData(-1, this.metricInfo);
     },
      // 删除指标,第一步, 新方法
@@ -323,16 +255,13 @@ export default {
       }
       this.elementTarget = {}; // 初始化清空参数
       // 触发每个tag组件内部进行校验
-      this.$refs.chartTag.saveTarget(); // => getTartget
+      this.$refs.chartTag.saveTarget(0);
-      // 保存图表时进行参数认证
-      /*if (this.isSave) {
-        this.$refs.chartInfo.validate();
-      }*/
     },
     // 获取每个tag组件内部校验后数据,点击生成图表时触发
     getTarget(target) {
       // 由于条件限制，每次其实只有一个target
       this.elementTarget = JSON.parse(JSON.stringify(target));
+      console.log('2_+_+_+_+_+_+',JSON.stringify(this.elementTarget));
       /*this.$refs.chartInfo.validate((valid) => {
         if (valid) {*/
           this.loading = true;
@@ -550,44 +479,55 @@ export default {
     },
     */
     // 获取metric列表
-    getSuggestMetric(id) {
+    getSuggestMetric() {
-      //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
+      //this.$get('/prom/api/v1/label/__name__/values').then(response => {
-      this.$get('/prom/api/v1/label/__name__/values', {pageNo: 1, pageSize: -1}).then(response => {
+      this.$get('/module?pageSize=-1').then(response => {
-        //if (response.code === 200) {
+        console.log('---response---',response);
-        if (response.status === 'success') {
+        if (response.code === 200) {
-          this.metricList = response.data;
+          console.log('---response200---',response);
+          this.metricList = response.data.list;
           const cascaderMap = new Map();
           this.metricList.forEach((item,index) => {
-            let arr = [];
+            let projectName = item.project.name;
-            let par = '';//父value
+            let moduleName = item.name;
-            //let metricTmp = item.metric;//子value
-            let metricTmp = item;//子value
-            if(metricTmp){
-              arr  = metricTmp.split('_');
-              par = arr[0];
-            }
             const childOption = {
-              value: metricTmp,
+              value: moduleName,
-              label: metricTmp,
+              label: moduleName,
+              children:[],
             };
-            if(cascaderMap.has(par)){
+            if(cascaderMap.has(projectName)){
-              cascaderMap.get(par).push(childOption);
+              cascaderMap.get(projectName).push(childOption);
             }else {
               let childArr = [];
               childArr.push(childOption);
-              cascaderMap.set(par,childArr);
+              cascaderMap.set(projectName,childArr);
+            }
+            //缓存全局数据
+            const moduleItem = {
+              name:moduleName,
+              metricMap:new Map()
+            };
+            if(this.metricAllData.has(projectName)){
+              let moduleGroup = this.metricAllData.get(projectName);
+              this.metricAllData.get(projectName).push(moduleItem);
+            }else {
+              let moduleList = [];
+              moduleList.push(moduleItem);
+              this.metricAllData.set(projectName,moduleList);
             }
           });
           let metricCascaderArr = [];
           cascaderMap.forEach(function(value,index){
             const option = {
-              value: index+"_par",//父节点和子节点的value相同，会出现点击与父节点label同名的子节点时，不显示选择的内容
+              value: index+"_par",
               label: index,
               children:value,
             };
             metricCascaderArr.push(option);
           });
+
           this.metricCascaderList = metricCascaderArr;
+          console.log('---response200metricCascaderList---',this.metricCascaderList);
         }else {
           this.metricList = [];
           this.metricCascaderList = [];
@@ -634,8 +574,11 @@ export default {
     },
     */
   },
+  created() {
+    this.getSuggestMetric();
+  },
   mounted() {
-    this.initOpen();
+    //this.initOpen();
     /*
     bus.$on('on-shrink-change', () => {
       this.preview();

nezha-fronted/src/tools.js

@@ -118,6 +118,11 @@ export const scrollBar = {
           el = el.querySelector(".xterm-viewport");
           !el && console.warn("未发现className为xterm-viewport的dom");
         }
+        if(arg==="metric-label-cascader"){
+          el = el.querySelector(".el-cascader__tags");
+          !el && console.warn("未发现className为el-cascader__tags的dom");
+        }
+
         el.classList.add("ps");
         el.addEventListener("ps-scroll-y", () =>
           el.classList.add("ps")
@@ -150,6 +155,9 @@ export const scrollBar = {
     }else if (arg === "xterm") {
       el = el.querySelector(".xterm-viewport");
       !el && console.warn("未发现className为xterm-viewport的dom");
+    }else if(arg==="metric-label-cascader"){
+      el = el.querySelector(".el-cascader__tags");
+      !el && console.warn("未发现className为el-cascader__tags的dom");
     }
     setTimeout(() => {
       el.classList.add("ps");