fix:endpoint query loading调整 & dashboard bug修复

1.endpoint query loading样式调整
2.dashboard preview 无法显示图表bug修复

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

@@ -261,11 +261,11 @@ export default {
                         },
                         metric_name: '',
                       };
-                      if(chartInfo.type === 'stackArea'){
+                      // if(chartInfo.type === 'stackArea'){
-                        seriesItem.theData.type='line';
+                      //   seriesItem.theData.type='line';
-                        seriesItem.theData.stack=chartInfo.title
+                      //   // seriesItem.theData.stack=chartInfo.title
-                        seriesItem.theData.areaStyle={};
+                      //   seriesItem.theData.areaStyle={};
-                      }
+                      // }
                       // 图表中每条线的名字,后半部分
                       let host = '';//up,
                       if(queryItem.metric.__name__){
@@ -284,7 +284,7 @@ export default {
                         if(host.endsWith(',')){host = host.substr(0,host.length-1);}
                         host +="}";
                         //处理legend别名
-                        let alias=this.dealLegendAlias(host,chartItem.elements[innerPos].legend);
+                        let alias=this.$refs.editChart[index].dealLegendAlias(host,chartItem.elements[innerPos].legend);
                         legend.push({name:host,alias:alias});
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
@@ -397,24 +397,6 @@ 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 value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          })
-          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/chart-table.vue

@@ -39,12 +39,13 @@
                     {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
                   </template>
                 </el-table-column>
-                <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" class-name="max-width-90">
+                <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
                   <template slot-scope="scope">
                     {{ unit.compute(scope.row.value,null,2)}}
                   </template>
                 </el-table-column>
             </el-table>
+          <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
         <!--全屏-->
           <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
@@ -70,7 +71,7 @@
                         {{ unit.compute(scope.row.value,null,2)}}
                       </template>
                     </el-table-column>
-
+                  <Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination"></Pagination>
                 </el-table>
                 <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
             <!--
@@ -115,6 +116,16 @@ export default {
         return {
             data: {}, // 该图表信息,chartItem
             unit:{},
+            pageObj: {
+              pageNo: 1,
+              pageSize: 20,
+              total: 0
+            },
+            screenPageObj:{
+              pageNo: 1,
+              pageSize: 20,
+              total: 0
+            },
             seriesItem: [], // 保存信息
             seriesItemScreen:[],//全屏数据
             images: '',
@@ -257,6 +268,28 @@ export default {
     computed: {},
     watch: {},
     methods: {
+        pageNo(val) {
+          this.pageObj.pageNo = val;
+          // this.getAlertList();
+        },
+        pageSize(val) {
+          this.pageObj.pageSize = val;
+          // this.getAlertList();
+          this.$nextTick(() => {
+            this.gutterHandler(".nz-table");
+          });
+        },
+        screenPageNo(val) {
+          this.screenPageObj.pageNo = val;
+          // this.getAlertList();
+        },
+        screenPageSize(val) {
+          this.screenPageObj.pageSize = val;
+          // this.getAlertList();
+          this.$nextTick(() => {
+            this.gutterHandler(".nz-table");
+          });
+        },
         startLoading(area){
           if(area==='screen'){
             //this.showLoadingScreen = true;
@@ -400,6 +433,24 @@ export default {
               //this.showTable = true;
               //this.tableLoading = false;
             }
+        },
+      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 value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          })
+          return labelValue
+        }else{
+          return expression;
+        }
+
       },
         // 获取格式
         getNumStr(num) {

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

@@ -499,21 +499,8 @@
               }
             },
             formatter:function(params){
-              // let maxWidth=0;
-              let avgWidth=0;
-              let sumWidth=0;
-              params.forEach((item, i) => {
-                let tip=legend.find((element)=>{
-                  return element.name == item.seriesName;
-                })
-
-                let curLength=(tip.alias?tip.alias:tip.name).length;
-                // maxWidth=maxWidth>curLength?maxWidth:curLength;
-                sumWidth+=curLength;
-              })
-              avgWidth=sumWidth/params.length;
               //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
-              let str = `<div  style='width:${avgWidth*11}px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+              let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               params.forEach((item, i) => {
                 let tip=legend.find((element)=>{
                   return element.name == item.seriesName;
@@ -556,12 +543,12 @@
                 str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span> `;
                 str +=seriesNameTmp+":"+val;
                  */
-                str += `<div style='max-width:510px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+                str += `<div style='max-width:500px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip.alias?tip.alias:tip.name}:  `;
+                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}:  `;
                 str +=`</div>`;
                 // str +=`<div style="display: inline-block;max-width: 10px; min-width: 5px;line-height: 18px;"></div>`;
                 str += `<div style='max-width:90px;min-width:20px;float:right;text-align:right;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
-                str +=chartDataFormat.getUnit(chartInfo.unit).compute(val,null,2);
+                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
                 str +=`</div>`;
               });
               str +=`</div>`;
@@ -686,6 +673,7 @@
             axisLabel: {
               formatter: function(value,index){
                 let chartUnit=chartInfo.unit;
+                chartUnit=chartUnit?chartUnit:2;
                 let unit=chartDataFormat.getUnit(chartUnit);
                 return unit.compute(value,index);
               },
@@ -1062,7 +1050,7 @@
               if(!this.data.type){
                 this.data.type='line';
               }
-              res.forEach((response) => {
+              res.forEach((response,pos) => {
                 if (response.status === 'success') {
                   if (response.data.result) {
                     // 循环处理每个elements下获取的数据列
@@ -1079,11 +1067,11 @@
                         },
                         metric_name: '',
                       };
-                      if(chartInfo.type === 'stackArea'){
+                      // if(chartInfo.type === 'stackArea'){
-                        seriesItem.theData.type='line';
+                      //   seriesItem.theData.type='line';
-                        seriesItem.theData.stack=chartInfo.title
+                      //   // seriesItem.theData.stack=chartInfo.title
-                        seriesItem.theData.areaStyle={};
+                      //   seriesItem.theData.areaStyle={};
-                      }
+                      // }
                       // 图表中每条线的名字,后半部分
                       // let host = `${queryItem.metric.__name__}{`;//up,
                       let host = '';//up,
@@ -1102,7 +1090,8 @@
                         });
                         if(host.endsWith(',')){host = host.substr(0,host.length-1);}
                         host +="}";
-                        legend.push(host);
+                        let alias=this.dealLegendAlias(host,this.data.elements[pos].legend);
+                        legend.push({name:host,alias:alias});
                         // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                         seriesItem.theData.name = host;
                         seriesItem.metric_name = seriesItem.theData.name;
@@ -1175,6 +1164,24 @@
         }
         */
       },
+      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 value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          })
+          return labelValue
+        }else{
+          return expression;
+        }
+
+      },
       // 获取格式
       getNumStr(num) {
         if (num >= 1000) {

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

@@ -233,7 +233,7 @@
           type:'line',
           span:12,
           height:'400',
-          unit:1,
+          unit:2,
           elements:{
             id: '',
             expression: '',
@@ -260,10 +260,10 @@
             id:"table",
             name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
           },
-          {
+          // {
-            id:'stackArea',
+          //   id:'stackArea',
-            name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
+          //   name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
-          }
+          // }
         ],
         elements: [1], // 指标部分 tarNum
         elementTarget: [], // 本地保存数据
@@ -679,7 +679,7 @@
         this.chart.type = 'line';
         this.chart.span = 12;
         this.chart.height = 400+'';
-        this.chart.unit=1;
+        this.chart.unit=2;
         this.elements = [1];
         this.elementTarget = [];
         bus.chartAddInfo.metricTarget = [];

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

@@ -339,7 +339,7 @@ export default {
             });
           if(host.endsWith(',')){host = host.substr(0,host.length-1);}
           host +="}";
-          legend.push(host);
+          legend.push({name:host,alias:null});
 
           // 图表中每条线的名字,去掉最后的逗号与空格
           seriesItem.theData.name = host;

nezha-fronted/src/components/page/project/project.vue

@@ -225,10 +225,11 @@
 <!--          </button>-->
         </div>
       </div>
-      <div v-show="showTableData && showTableData.length>0" class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
+      <div  class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
       <el-table
-        v-show="showTableData && showTableData.length>0"
         :data="showTableData"
+        v-loading="queryEdpLoading"
+        element-loading-background="rgba(0, 0, 0, 0)"
         border
         v-scrollBar:el-table
         class="nz-table endpoint-query-table"
@@ -273,7 +274,6 @@
       <button class="to-top" v-show="showTopBtn2" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
 
     </div>
-    <loading  ref="loading"></loading>
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="endpointTableTitle"
@@ -605,7 +605,7 @@
               })
               avgWidth=sumWidth/params.length;
               //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
-              let str = `<div   style='width:${avgWidth*10}px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+              let str = `<div   style='width:${avgWidth*10}px;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               params.forEach((item, i) => {
                 let tip=temp.legend.find((element)=>{
                   return element.name == item.seriesName;
@@ -1145,9 +1145,7 @@
       },
       showEndpoint:function(endpoint){
         this.tableShow=3;
-        // this.queryEdpLoading=true;
+        this.queryEdpLoading=true;
-        console.log(this.$refs)
-        this.$refs.loading.startLoading();
         if(endpoint){
           this.curEndpoint=endpoint;
           this.formatTime='';
@@ -1217,8 +1215,7 @@
                 this.showTableData.push(edpQueryData);
               }
               this.showTableDataCopy=JSON.stringify(this.showTableData);
-              // this.queryEdpLoading=false;
+              this.queryEdpLoading=false;
-              this.$refs.loading.endLoading();
               this.gutterHandler(".endpoint-query-table"); //控制table右边距
               this.showTopBtn2 = false;
               this.$nextTick(() => {
@@ -1320,7 +1317,7 @@
         this.chartDatas=[];
         this.legend=[];
         this.graphShow=true;
-        setTimeout(()=>{this.queryChartDate();},10)
+        setTimeout(()=>{this.$refs.graphLoading.startLoading();this.queryChartDate();},10)
 
       },
       dialogClose:function(){
@@ -1408,9 +1405,10 @@
                 this.chartOptions.series=this.chartDatas;
                 this.graphChart.setOption(this.chartOptions);//创建图表
                 this.$refs.chartScrollbar.update();
+                this.$refs.graphLoading.endLoading();
               }
             });
-          this.$refs.graphLoading.endLoading();
+
         })
       },
       dateChange:function(){
@@ -1421,7 +1419,6 @@
 
       },
       initDialog:function(){
-        this.$refs.graphLoading.startLoading();
         this.graphChart = echarts.init(document.getElementById('viewGraphChart'));
         // this.queryChartDate();
         // this.chartOptions.legend.data=this.legend;
@@ -1972,4 +1969,19 @@
     top:0px !important;
     left:2px;
   }
+  .endpoint-query-table .el-loading-spinner .circular{
+    width: 42px;
+    height: 42px;
+    animation: loading-rotate 2s linear infinite;
+    display: none;
+  }
+  .endpoint-query-table .el-loading-spinner{
+    background: url(../../../assets/img/loading.gif) no-repeat;
+    background-size: 48px 48px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: 50%;
+    left: 48.5%;
+  }
 </style>