fix: 修复model静态数据失效的问题

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

@@ -83,7 +83,7 @@
                  animation:150,
                  handle:'.chartTitle',
                }"  >
-      <div class="chartBox" v-for="(item, index) in dataList"    :key="'chartBox'+item.id" :id="item.title+'_'+item.id"
+      <div class="chartBox" v-for="(item, index) in dataList"    :key="index" :id="item.title+'_'+item.id"
           >
         <line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
         :ref="'editChart'+item.id"
@@ -831,6 +831,9 @@ export default {
         this.getAssetInfoChartData(chartItem);
         return;
       }
+      if (this.isModel) {
+        this.modelStaticData(chartInfo, filterType);
+      } else {
         // 没有数据的设置提示信息暂无数据-针对每一个图
         const len = chartItem.elements.length;
         if (len === 0) {
@@ -888,9 +891,6 @@ export default {
                     if (response.data.result) {
                       // 循环处理每个elements下获取的数据列
                       if (chartItem.type === 'singleStat') {
-                      if (this.isModel) {
-                        singleStatRlt = 999;
-                      } else {
                         if (response.data.result.length === 1) {
                           let statistics = chartItem.param.statistics;
                           if (response.data.result[0].values) {
@@ -899,7 +899,6 @@ export default {
                         } else if (response.data.result.length > 1) {
                           singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
                         }
-                      }
                       } else {
                         response.data.result.forEach((queryItem, resIndex) => {
                           const seriesItem = {
@@ -931,19 +930,11 @@ export default {
                           // 设置时间-数据格式对
                           let tempArr = [];
                           let dpsArr = [];
-                        if (this.isModel) {
-                          let timeStamp = Math.floor(new Date().getTime()/1000);
-                          for (let i = 0; i < 20; i++) {
-                            tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]);
-                            dpsArr.push([i+"", tempArr[i]]);
-                          }
-                        } else {
                           tempArr = queryItem.values;
                           dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
                           dpsArr = dpsArr.map(item => {
                             return [item[0], [item[1][0], Number(item[1][1])]]
                           })
-                        }
                           // 判断是否有数据, && tagsArr.length > 0
                           if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
                             tagsArr.forEach((tag, i) => {
@@ -951,7 +942,9 @@ export default {
                                 host += `${tag}="${queryItem.metric[tag]}",`;
                               }
                             });
-                          if(host.endsWith(',')){host = host.substr(0,host.length-1);}
+                            if (host.endsWith(',')) {
+                              host = host.substr(0, host.length - 1);
+                            }
                             if (queryItem.metric.__name__) {
                               host += "}";
                             }
@@ -1101,6 +1094,144 @@ export default {
             });
           });
         }
+      }
+    },
+    modelStaticData(chartInfo, filterType) {
+      let series = [];
+      let seriesItem = {
+        theData: {
+          name: '',
+          symbol:'emptyCircle',  //去掉点
+          symbolSize:[2,2],
+          smooth:0.2,  //曲线变平滑
+          showSymbol:false,
+          data: [],
+          type:chartInfo.type,
+        },
+        //visible: true,
+        //threshold: null,
+        metric_name: '',
+      };
+      let legend = [];
+      let tableData = [];
+      if(chartInfo.type === 'stackArea'){
+        seriesItem.theData.type='line';
+        seriesItem.theData.stack=chartInfo.title;
+        seriesItem.theData.areaStyle={"opacity": 0.3};
+      }
+      // 图表中每条线的名字,后半部分
+      let host = 'host';//up,
+      let queryItem = {metric: {item1: "item1", item2: "item2", item3: "item3"}, values: []};
+      const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+      // 设置时间-数据格式对
+      let tempArr = [];
+      let dpsArr = [];
+      let timeStamp = Math.floor(new Date().getTime()/1000);
+      for (let i = 0; i < 20; i++) {
+        tempArr.push([timeStamp - (20-i)*15, Math.floor(Math.random()*10) + ""]);
+        queryItem.values.push(tempArr[i])
+        dpsArr.push([i+"", tempArr[i]]);
+      }
+      // 判断是否有数据, && tagsArr.length > 0
+      if (dpsArr.length > 0 && this.$refs['editChart'+chartInfo.id]  && this.$refs['editChart'+chartInfo.id].length>0) {
+        tagsArr.forEach((tag, i) => {
+          if (tag !== '__name__') {
+            host += `${tag}="${queryItem.metric[tag]}",`;
+          }
+        });
+        if(queryItem.metric.__name__){
+          host +="}";
+        }
+        //处理legend别名
+        let alias=this.$refs['editChart'+chartInfo.id][0].dealLegendAlias(host,chartInfo.elements[0].legend);
+        if(!alias || alias===''){
+          alias = host;
+        }
+        legend.push({name:host, alias:alias});
+        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+        seriesItem.theData.name = host;
+        //alert(seriesItem.theData.name);
+        seriesItem.metric_name = seriesItem.theData.name;
+        // 将秒改为毫秒
+        //alert('table=='+JSON.stringify(queryItem))
+        seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+          /*曲线汇总暂不需要
+          if (sumData.data[dpsIndex]) {
+            const sumNum = sumData.data[dpsIndex][1] || 0;
+            sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+          } else {
+            sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+          }
+          */
+          let t_date = new Date(dpsItem[0] * 1000);
+          let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+          tableData.push({//表格数据
+            // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+            // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+            element:{element:host,alias:alias},
+            time: timeTmp,//采集时间
+            value: dpsItem[1],//数值
+          });
+          return [dpsItem[0] * 1000, dpsItem[1]];
+        });
+        series.push(seriesItem.theData);
+
+      } else if (chartInfo.elements && chartInfo.elements[0]) {
+        // 无数据提示
+        /*
+        const currentInfo = chartItem.elements[innerPos];
+        const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+        this.$message.warning({
+          duration: 15,
+          content: errorMsg,
+          closable: true,
+        });
+        */
+      }
+      let singleStatRlt = 999;
+      if (this.$refs['editChart' + chartInfo.id] && this.$refs['editChart' + chartInfo.id].length > 0) {
+        let errorMsg = '';
+        let chartData = {
+          chartItem: chartInfo,
+          series: series,
+          singleStatRlt: singleStatRlt,
+          legend: legend,
+          tableData: tableData,
+          panelId: this.filter.panelId,
+          filter: this.filter,
+          filterType: filterType,
+          errorMsg: errorMsg
+        }
+        this.chartDataCacheGroup.set(chartInfo.id, chartData);
+        if (chartInfo.type === 'table') {//表格
+          if (filterType === 'showFullScreen') {//全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, filterType, '');
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartInfo, tableData,
+              this.filter.panelId, this.filter, '', '');
+          }
+        } else if (chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 4) {
+          if (series.length && chartInfo.type === 4) {//曲线汇总
+            //series.push(sumData);//后续需要
+          }
+          if (filterType === 'showFullScreen') {//全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, filterType, errorMsg);
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, series,
+              this.filter.panelId, this.filter, legend, '', errorMsg);
+          }
+        } else if (chartInfo.type === 'singleStat') {
+          if (filterType === 'showFullScreen') {//全屏查询
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, filterType, errorMsg);
+          } else {
+            this.$refs['editChart' + chartInfo.id][0].setData(chartInfo, singleStatRlt,
+              this.filter.panelId, this.filter, '', errorMsg);
+          }
+        }
+      }
     },
     getAssetInfoChartData(chartInfo){
       if(!this.isModel){
@@ -1135,11 +1266,30 @@ export default {
             let data=response.data;
             this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
           }else{
-            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter,reponse.msg);
+            this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
           }
         })
       }else {
-        this.$refs['editChart'+chartInfo.id][0].endLoading();
+        let data = {Basic: {
+          alert:0,
+          assetType: "xxx",
+          cabinet: "xxx",
+          dataCenter: "xxx",
+          endpoint: 1,
+          host: "xxx.xxx.xxx.xxx",
+          id: -1,
+          model: "xxx",
+          pingLastReply: new Date(),
+          pingRtt: 0,
+          pingStatus: 1,
+          principal: "admin",
+          purchaseDate: null,
+          sn: "xxx",
+          state: 1,
+          tel: "xxxxxxxxxxx",
+          vendor: "xxx"
+        }};
+        this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
       }
     },
     // 设置图表的宽度