fix:修改BUG

1.metric选择下拉列表改为级联选择
2.图表tooltip日期格式化
3.无metric的内容，图表中legend及tooltip显示undefined
4.tooltip内容取2位小数

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

@@ -183,7 +183,10 @@ export default {
                         metric_name: '',
                       };
                       // 图表中每条线的名字,后半部分
-                      let host = `${queryItem.metric.__name__}{`;//up,
+                      let host = '';//up,
+                      if(queryItem.metric.__name__){
+                        host = `${queryItem.metric.__name__}{`;//up,
+                      }
                       const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                       // 设置时间-数据格式对
                       const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
@@ -215,7 +218,7 @@ export default {
                           let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm');
                           tableData.push({//表格数据
                             label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                            metric: queryItem.metric.__name__,//metric列
+                            metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
                             time: timeTmp,//采集时间
                             value: dpsItem[1],//数值
                           });

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

@@ -250,10 +250,15 @@ export default {
           formatter:function(params){
             let str = `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'>`;
             params.forEach((item, i) => {
-                if(i!==0){
+              if(i===0){
-                  str +=`<br/>`;
+                let t_date = new Date(item.data[0]);
-                }
+                str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> ${item.seriesName}:${item.data[1]}`;
+                  + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+              }
+              str +=`<br/>`;
+              let val = parseFloat(Number(item.data[1]).toFixed(2));
+              str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> ${item.seriesName}:`;
+              str +=val;
             });
             str +=`</div>`;
             return str;
@@ -690,7 +695,11 @@ export default {
                       metric_name: '',
                     };
                     // 图表中每条线的名字,后半部分
-                    let host = `${queryItem.metric.__name__}{`;//up,
+                   // let host = `${queryItem.metric.__name__}{`;//up,
+                    let host = '';//up,
+                    if(queryItem.metric.__name__){
+                      host = `${queryItem.metric.__name__}{`;//up,
+                    }
                     const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
                     // 设置时间-数据格式对
                     const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]

nezha-fronted/src/components/common/rightBox/metricPrePanelBox.vue

@@ -123,8 +123,14 @@
               const soleParam = Object.assign({}, params);
               const elements = [];
               // 图表中每条线的名字,后半部分
-              let host = `${queryItem.metric.__name__}`;//up,
+              //let host = `${queryItem.metric.__name__}`;//up,
-              let charTitle=`${queryItem.metric.__name__}`;//up,
+              //let charTitle=`${queryItem.metric.__name__}`;//up,
+              let host = '';//up,
+              let charTitle='';
+              if(queryItem.metric.__name__){
+                host = `${queryItem.metric.__name__}`;//up,
+                charTitle=`${queryItem.metric.__name__}`;//up,
+              }
               const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
               // 判断是否有数据
               if (queryItem.values.length > 0 && tagsArr.length > 0) {

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

@@ -127,6 +127,7 @@
             <chart-metric ref="chartTag"
                            :pointer="index"
                            :metric-list="metricList"
+                          :metricCascaderList="metricCascaderList"
                            :count-total="elements.length"
                            @on-delete-target="deleteTarget"
                            @sub-save-ok="subOk"
@@ -245,6 +246,7 @@
         //productId: 0,//不需要这个参数，可以删除
         panelId: 0,
         metricList: [], // metric列表
+        metricCascaderList:[],//metric级联列表
         deleteIndex: '', // 要删除的指标模块
         subCount: 0, // subSave保存data到bus计数器
       }
@@ -474,8 +476,40 @@
         this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
           if (response.code === 200) {
             this.metricList = response.data.list;
+            const cascaderMap = new Map();
+            this.metricList.forEach((item,index) => {
+              let arr = [];
+              let par = '';//父value
+              let metricTmp = item.metric;//子value
+              if(metricTmp){
+                arr  = metricTmp.split('_');
+                par = arr[0];
+              }
+              const childOption = {
+                value: metricTmp,
+                label: metricTmp,
+              };
+              if(cascaderMap.has(par)){
+                cascaderMap.get(par).push(childOption);
+              }else {
+                let childArr = [];
+                childArr.push(childOption);
+                cascaderMap.set(par,childArr);
+              }
+            });
+            let metricCascaderArr = [];
+            cascaderMap.forEach(function(value,index){
+              const option = {
+                value: index,
+                label: index,
+                children:value,
+              };
+              metricCascaderArr.push(option);
+            });
+            this.metricCascaderList = metricCascaderArr;
           }else {
             this.metricList = [];
+            this.metricCascaderList = [];
           }
         })
       },

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

@@ -102,10 +102,17 @@
     <el-row  v-if="tableShow == 1">
       <el-col span="22" >
         <el-form-item :label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+              <!--
               <el-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
                 <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
                 :value="item.metric">{{item.metric}}</el-option>
               </el-select>
+              -->
+              <el-cascader ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small"
+                       v-model="elementInfo.metric"
+                       :options="metricCascaderList"
+                       :props="{ expandTrigger: 'hover' }"
+                       @change="selectMetric"></el-cascader>
               <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
         </el-form-item>
       </el-col>
@@ -170,6 +177,7 @@ export default {
       type: Array,
       default: () => [],
     },
+    metricCascaderList:[],
     countTotal: {
       type: Number,
       default: 1,
@@ -252,6 +260,7 @@ export default {
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
+        this.elementInfo.metric = this.elementInfo.metric[1];
         this.getSuggestTags(this.elementInfo.metric);
       } else {
         this.elementInfo.tagList = [];

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

@@ -102,10 +102,17 @@
     <el-row  v-if="tableShow == 1">
       <el-col span="22" >
         <el-form-item :label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+              <!--
               <el-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
                 <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
                 :value="item.metric">{{item.metric}}</el-option>
               </el-select>
+              -->
+              <el-cascader ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small"
+                v-model="elementInfo.metric"
+                :options="metricCascaderList"
+                :props="{ expandTrigger: 'hover' }"
+                @change="selectMetric"></el-cascader>
               <span v-if="metricShowList.text" class="error-info-text">{{metricShowList.text}}</span>
         </el-form-item>
       </el-col>
@@ -172,6 +179,7 @@ export default {
       type: Array,
       default: () => [],
     },
+    metricCascaderList:[],
     countTotal: {
       type: Number,
       default: 1,
@@ -254,6 +262,7 @@ export default {
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
+        this.elementInfo.metric = this.elementInfo.metric[1];
         this.getSuggestTags(this.elementInfo.metric);
       } else {
         this.elementInfo.tagList = [];

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

@@ -283,8 +283,14 @@ export default {
           metric_name: '',
         };
         // 图表中每条线的名字,后半部分
-        let host = `${queryItem.metric.__name__}`;//up,
+        //let host = `${queryItem.metric.__name__}`;//up,
-        let charName = `${queryItem.metric.__name__}`;
+        let host = '';//up,
+        let charName='';
+        if(queryItem.metric.__name__){
+          host = `${queryItem.metric.__name__}{`;//up,
+          charName = `${queryItem.metric.__name__}`;
+        }
+        //let charName = `${queryItem.metric.__name__}`;
         const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
         // 设置时间-数据格式对
         const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]

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

@@ -7,6 +7,7 @@
       <el-row class="element-item" >
           <chart-metric ref="chartTag"
           :metric-list="metricList"
+          :metricCascaderList="metricCascaderList"
           @on-add-target-success="getTarget"
           @on-change-condition="getCondition"
           ></chart-metric>
@@ -116,6 +117,7 @@ export default {
       //productId: 0,
       panelId: 0,
       metricList: [], // metric列表
+      metricCascaderList:[],//metric级联列表
       isSave: false, // 是否要保存
       saveDisabled: true, // 不可保存
       createModal: false, // 创建看板panel
@@ -451,8 +453,40 @@ export default {
       this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
         if (response.code === 200) {
           this.metricList = response.data.list;
+          const cascaderMap = new Map();
+          this.metricList.forEach((item,index) => {
+            let arr = [];
+            let par = '';//父value
+            let metricTmp = item.metric;//子value
+            if(metricTmp){
+              arr  = metricTmp.split('_');
+              par = arr[0];
+            }
+            const childOption = {
+              value: metricTmp,
+              label: metricTmp,
+            };
+            if(cascaderMap.has(par)){
+              cascaderMap.get(par).push(childOption);
+            }else {
+              let childArr = [];
+              childArr.push(childOption);
+              cascaderMap.set(par,childArr);
+            }
+          });
+          let metricCascaderArr = [];
+          cascaderMap.forEach(function(value,index){
+            const option = {
+              value: index,
+              label: index,
+              children:value,
+            };
+            metricCascaderArr.push(option);
+          });
+          this.metricCascaderList = metricCascaderArr;
         }else {
           this.metricList = [];
+          this.metricCascaderList = [];
         }
       })
     },
@@ -471,15 +505,17 @@ export default {
       document.body.removeChild(sensor);
       return width;
     },
+    /*
     // 创建打开
     createData(panelId) {
       this.panelId = panelId;
       this.elementTarget = {}; // 初始化清空参数
       this.initInfo(); // 初始化图表信息
       this.chartModal = true;
-      this.initOpen(); // 获取metric, productId数据
+      this.initOpen(); // 获取metric
       this.elements = [1];
     },
+    */
     /*
     tagsToString(arr) {
       let str = '';