feat:dashboard 新增unit 为Time时的格式化方法等

1.dashboard 新增unit 为Time时的格式化方法
2.dashboard table value值添加格式化
3.endpoint-query及view graph添加loading动画
4.chart 配置样式调整

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

@@ -263,7 +263,7 @@ export default {
                       };
                       if(chartInfo.type === 'stackArea'){
                         seriesItem.theData.type='line';
-                        seriesItem.theData.stack='stack'
+                        seriesItem.theData.stack=chartInfo.title
                         seriesItem.theData.areaStyle={};
                       }
                       // 图表中每条线的名字,后半部分

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

@@ -1,6 +1,11 @@
 <style lang="scss" scoped>
 @import './chart-table.scss';
 </style>
+<style>
+  .max-width-90{
+    max-width: 90px;
+  }
+</style>
 <template>
     <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
         <loading  :ref="'localLoading'+chartIndex"></loading>
@@ -34,11 +39,15 @@
                     {{ 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')" ></el-table-column>
+                <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" class-name="max-width-90">
+                  <template slot-scope="scope">
+                    {{ unit.compute(scope.row.value,null,2)}}
+                  </template>
+                </el-table-column>
             </el-table>
         </div>
         <!--全屏-->
-          <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false;" >
+          <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
               <div class="float-right panel-calendar dialog-tool">
@@ -56,7 +65,11 @@
                       {{ 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')" ></el-table-column>
+                    <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>
                 <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -75,6 +88,7 @@
 <script>
 import bus from '../../libs/bus';
 import {Loading} from 'element-ui';
+import chartDataFormat from './chartDataFormat'
 import loading from "../common/loading";
 
 export default {
@@ -100,6 +114,7 @@ export default {
     data() {
         return {
             data: {}, // 该图表信息,chartItem
+            unit:{},
             seriesItem: [], // 保存信息
             seriesItemScreen:[],//全屏数据
             images: '',
@@ -346,6 +361,9 @@ export default {
         setData(chartItem, seriesItem, panelId, filter,area) {
             if(area==='showFullScreen'){//全屏按时间查询
               this.data = chartItem;
+              this.unit = chartDataFormat.getUnit(this.data.unit);
+              console.log("unit-->")
+              console.log(this.unit);
               this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
               this.searchTime[1] = filter.end_time;
               this.seriesItemScreen = seriesItem;
@@ -368,6 +386,7 @@ export default {
 
               this.panelIdInner = panelId;
               this.data = chartItem;
+              this.unit = chartDataFormat.getUnit(this.data.unit);
               this.seriesItem = seriesItem;
               this.seriesItemScreen = seriesItem;
               if (filter) { // 保存数据,用于同步时间

nezha-fronted/src/components/charts/chartDataFormat.js

@@ -1,8 +1,18 @@
+/*
+* value:yAxis 默认第一个参数  传递的数值
+* index:yAxis 默认第二个参数 y轴的位置
+* type:自定义参数，用于区分是y轴调用还是tooltip调用,以设置不同精度  type =1 y轴调用 type=2 tooltip调用
+* */
 function none(value,index){
   return value;
 }
-function short(value,index){
+function short(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['','K','Mil','Bil'],0)
+  }else{
+    return asciiCompute(value,1000,['','K','Mil','Bil'],2)
+  }
+
 }
 function percent01(value,index){
   return `${value} %`;
@@ -20,70 +30,220 @@ function localFormat(value,index){
   if (num) { result = num + result; }
   return result;
 }
-function bits(value,index){
+function bits(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['b','B','KB','MB','GB','TB','PB','EB','ZB','YB'],2)
   }
-function bytes(value,index){
+}
+function bytes(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['B','KB','MB','GB','TB','PB','EB','ZB','YB'],2)
   }
-function kilobytes(value,index){
+
+}
+function kilobytes(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['KB','MB','GB','TB','PB','EB','ZB','YB'],2)
   }
-function megabytes(value,index){
+
+}
+function megabytes(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['MB','GB','TB','PB','EB','ZB','YB'],2)
   }
-function gigabytes(value,index){
+
+}
+function gigabytes(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['GB','TB','PB','EB','ZB','YB'],2)
   }
-function terabytes(value,index){
+}
+function terabytes(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['TB','PB','EB','ZB','YB'],2)
   }
-function petabytes(value,index){
+}
+function petabytes(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1024,['PB','EB','ZB','YB'],0)
+  }else{
+    return asciiCompute(value,1024,['PB','EB','ZB','YB'],2)
   }
-function packetsSec(value,index){
+}
+function packetsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],1)
+  }else{
+    return asciiCompute(value,1000,['pps','Kpps','Mpps','Gpps','Tpps','Ppps','Epps','Zpps','Ypps'],2)
   }
-function bitsSec(value,index){
+}
+function bitsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],1)
+  }else{
+    return asciiCompute(value,1000,['bps','Kbps','Mbps','Gbps','Tbps','Pbps','Epps','Zpps','Ypps'],2)
   }
-function bytesSec(value,index){
+}
+function bytesSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else{
+    return asciiCompute(value,1000,['Bs','KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],2)
   }
-function kilobytesSec(value,index){
+}
+function kilobytesSec(value,index,type=1){
+  if(type == 1){
+    return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else{
     return asciiCompute(value,1000,['KBs','MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
   }
-function kilobitsSec(value,index){
+}
+function kilobitsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else{
+    return asciiCompute(value,1000,['Kbps','Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
-function megabytesSec(value,index){
+
+}
+function megabytesSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else{
+    return asciiCompute(value,1000,['MBs','GBs','TBs','PBs','EBs','ZBs','YBs'],2)
   }
-function megabitsSec(value,index){
+
+}
+function megabitsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else{
+    return asciiCompute(value,1000,['Mbps','Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
-function gigabytesSec(value,index){
+
+}
+function gigabytesSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],1)
+  }else{
+    return asciiCompute(value,1000,['GBs','TBs','PBs','EBs','ZBs','YBs'],2)
   }
-function gigabitsSec(value,index){
+
+}
+function gigabitsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else{
+    return asciiCompute(value,1000,['Gbps','Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
-function terabytesSec(value,index){
+
+}
+function terabytesSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],1)
+  }else{
+    return asciiCompute(value,1000,['TBs','PBs','EBs','ZBs','YBs'],2)
   }
-function terabitsSec(value,index){
+
+}
+function terabitsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],1)
+  }else{
+    return asciiCompute(value,1000,['Tbps','Pbps','Ebps','Zbps','Ybps'],2)
   }
-function petabytesSec(value,index){
+
+}
+function petabytesSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],1)
+  }else{
+    return asciiCompute(value,1000,['PBs','EBs','ZBs','YBs'],2)
   }
-function petabitsSec(value,index){
+
+}
+function petabitsSec(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],1)
+  }else{
+    return asciiCompute(value,1000,['Pbps','Ebps','Zbps','Ybps'],2)
   }
-function Hertz(value,index){
+
+}
+function Hertz(value,index,type=1){
+  if(type == 1){
     return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],1);
+  }else{
+    return asciiCompute(value,1000,['Hz','KHz','MHz','GHz','THz','PHz','EHz','ZHz','YHz'],2);
+  }
+
+}
+function nanoseconds(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'ns');
+  }else{
+    return timeCompute(value,'ns',2);
+  }
+
+}
+function microseconds(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'us')
+  }else{
+    return timeCompute(value,'us',2)
+  }
+
+}
+function milliseconds(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'ms')
+  }else{
+    return timeCompute(value,'ms',2)
+  }
+
+}
+function seconds(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'s');
+  }else{
+    return timeCompute(value,'s',2);
+  }
+
+}
+function minutes(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'m');
+  }else{
+    return timeCompute(value,'m',2);
+  }
+
+}
+function hours(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'h');
+  }else{
+    return timeCompute(value,'h',2);
+  }
+
+}
+function days(value,index,type=1){
+  if(type == 1){
+    return timeCompute(value,'day');
+  }else{
+    return timeCompute(value,'day',3);
   }
-function nanoseconds(value,index){
 
 }
 /*
@@ -130,7 +290,43 @@ function asciiCompute(num,ascii,units,dot=2,unitIndex=0){
 }
 /*
 * 时间格式化方法
+* value:需要格式化的数值
+* unit:设置的单位
 * */
+function timeCompute(value,unit,dot=0){
+  if(unit == 'year'){
+    return `${value.toFixed(dot)} ${unit}`;
+  }
+  let units=[
+    {unit:'ns',ascii:1},
+    {unit:'us',ascii:1000},
+    {unit:'ms',ascii:1000},
+    {unit:'s',ascii:60},
+    {unit:'m',ascii:60},
+    {unit:'h',ascii:24},
+    {unit:'day',ascii:7},
+    {unit:'week',ascii:52},
+    {unit:'year',ascii:''}
+  ]
+  for(let i in units){
+    let u = units[i];
+    if(u.unit == unit){ //找到最小单位
+      let result = (time,minUnit)=>{
+        if(minUnit.unit == 'year'){
+          return `${time.toFixed(dot)} ${minUnit.unit}`
+        }
+        let quotient = time / minUnit.ascii;
+        if(quotient < 1){
+          return `${time.toFixed(dot)} ${minUnit.unit}`;
+        }else{
+          minUnit = units[++i];
+          return result(quotient,minUnit);
+        }
+      }
+      return result(value,u);
+    }
+  }
+}
 
 //unit转化配置信息
 /*
@@ -298,32 +494,32 @@ let unitOptions=[
       },
       {
         value:28,
-        compute:null,
+        compute:microseconds,
         label:'microseconds (us)'
       },
       {
         value:29,
-        compute:null,
+        compute:milliseconds,
         label:'milliseconds (ms)'
       },
       {
         value:30,
-        compute:null,
+        compute:seconds,
         label:'seconds (s)'
       },
       {
         value:31,
-        compute:null,
+        compute:minutes,
         label:'minutes (m)'
       },
       {
         value:32,
-        compute:null,
+        compute:hours,
         label:'hours (h)'
       },
       {
         value:33,
-        compute:null,
+        compute:days,
         label:'days (d)'
       },
     ]
@@ -345,6 +541,5 @@ export default {
   },
   getUnit:function(index){
     return units[index-1];
-  },
+  }
-  short,
 }

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

@@ -561,7 +561,7 @@
                 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 +=val;
+                str +=chartDataFormat.getUnit(chartInfo.unit).compute(val,null,2);
                 str +=`</div>`;
               });
               str +=`</div>`;
@@ -775,6 +775,8 @@
             this.echartStore.clear();
             //option.title = title;
             this.echartStore.setOption(option);//创建图表
+            console.log('图表参数')
+            console.log(option)
             this.$refs['localLoading'+this.chartIndex].endLoading();
             this.firstShow = true; // 展示操作按键
           });
@@ -943,7 +945,14 @@
         }
 
       },
-
+      clearChart(){
+        if(this.echartStore){
+          this.echartStore.clear();
+        }
+        if(this.echartModalStore){
+          this.echartModalStore.clear();
+        }
+      },
       // 删除该图表
       removeChart() {
         this.$emit('on-remove-chart-block', this.data.id);
@@ -954,6 +963,7 @@
       },
       // 重新请求数据 刷新操作
       refreshChart() {
+        this.clearChart();
         this.$refs['localLoading'+this.chartIndex].startLoading();
         this.firstShow = false;
         this.$emit('on-refresh-data', this.data.id);
@@ -1069,6 +1079,11 @@
                         },
                         metric_name: '',
                       };
+                      if(chartInfo.type === 'stackArea'){
+                        seriesItem.theData.type='line';
+                        seriesItem.theData.stack=chartInfo.title
+                        seriesItem.theData.areaStyle={};
+                      }
                       // 图表中每条线的名字,后半部分
                       // let host = `${queryItem.metric.__name__}{`;//up,
                       let host = '';//up,
@@ -1391,9 +1406,7 @@
 */
     },
     beforeDestroy() {
-      if(this.echartStore){
+      this.clearChart();
-        this.echartStore.clear();
-      }
     },
   };
 

nezha-fronted/src/components/common/language/en.js

@@ -110,6 +110,7 @@ const en = {
         width:'Width', //"宽"
         high:'High', //"高"
         metric:'Metric', //"指标"
+        option:'Option',
         addMetric:'Add metric', //"添加指标"
       },
       chartTableColumn:{

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

@@ -33,7 +33,7 @@
             <div :class="{'right-box-form-content-txt':!rightBox.isEdit}" >{{cabinet.uSize}}</div>
             <el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>
           </el-form-item>
-          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
+          <el-form-item :label="this.$t('config.dc.remark')">
             <el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="rightBox.isEdit"/>
             <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.remark}}</div>
           </el-form-item>

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

@@ -99,11 +99,15 @@
               <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
             </el-form-item>
 
-            <el-row :gutter="10">
+            <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
+            <div class="line-100"></div>
+
+            <!-- type unit start-->
+            <el-row :gutter="10" style="padding-top:20px">
               <el-col :span="2" >
                 <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
               </el-col>
-              <el-col :span="6" style="margin-left:-7px;">
+              <el-col :span="10" style="margin-left:-7px;">
                 <div class="grid-content ">
                   <el-form-item prop="type">
                     <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
@@ -114,10 +118,27 @@
                   </el-form-item>
                 </div>
               </el-col>
-              <el-col :span="2" style="margin-left: 7px;">
+              <el-col :span="2" style="margin-left: 7px">
+                <div class="label-center" >{{$t('dashboard.panel.chartForm.unit')}}</div>
+              </el-col>
+              <el-col :span="10">
+                <el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"
+                             :options="unitOptions"
+                             :props="{ expandTrigger: 'hover' }"
+                             :show-all-levels="false"
+                             v-model="chart.unit"
+                             @change="unitSelected"
+                >
+                </el-cascader>
+              </el-col>
+            </el-row>
+            <!--type unit end-->
+
+            <el-row :gutter="10">
+              <el-col :span="2" >
                 <div class="label-center"  >{{$t('dashboard.panel.chartForm.width')}}</div>
               </el-col>
-              <el-col :span="6" style="margin-left:0px;">
+              <el-col :span="10" style="margin-left:0px;">
                 <div class="grid-content ">
                   <el-form-item prop="span">
                     <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
@@ -128,10 +149,10 @@
                   </el-form-item>
                 </div>
               </el-col>
-              <el-col :span="2" style="padding-left: 10px;">
+              <el-col :span="2" >
                 <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
               </el-col>
-              <el-col :span="6" style="margin-left: 0px;">
+              <el-col :span="10" style="margin-left: 0px;">
                 <div class="grid-content" >
                   <el-form-item prop="height">
                     <!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
@@ -152,22 +173,6 @@
               </el-col>
             </el-row>
 
-            <el-row :gutter="10">
-              <el-col :span="2">
-                <div class="label-center" >{{$t('dashboard.panel.chartForm.unit')}}</div>
-              </el-col>
-              <el-col :span="22">
-                <el-cascader filterable placeholder="" popper-class="chart-box-dropdown" size="small" style="width: 100%"
-                             :options="unitOptions"
-                             :props="{ expandTrigger: 'hover' }"
-                             :show-all-levels="false"
-                             v-model="chart.unit"
-                             @change="unitSelected"
-                >
-                </el-cascader>
-              </el-col>
-            </el-row>
-
             <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
             <div class="line-100"></div>
 

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

@@ -225,9 +225,9 @@
 <!--          </button>-->
         </div>
       </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>
+      <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>
       <el-table
-        v-loading="queryEdpLoading"
+        v-show="showTableData && showTableData.length>0"
         :data="showTableData"
         border
         v-scrollBar:el-table
@@ -271,8 +271,9 @@
         </el-table-column>
       </el-table>
       <button class="to-top" v-show="showTopBtn2" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
-    </div>
 
+    </div>
+    <loading  ref="loading"></loading>
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="endpointTableTitle"
@@ -318,6 +319,7 @@
       <div class="chart-bottom">
         <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
       </div>
+      <loading  ref="graphLoading"></loading>
     </el-dialog>
 
     <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
@@ -334,11 +336,13 @@
   import bus from "../../../libs/bus";
   import axios from 'axios';
   import exportXLSX from "../../common/exportXLSX";
+  import loading from "../../common/loading";
   export default {
     name: "project2",
     components: {
       'chart-box': chartBox,
-      'export-excel':exportXLSX
+      'export-excel':exportXLSX,
+      'loading': loading,
     },
     data() {
       let temp=this;
@@ -1140,8 +1144,10 @@
         this.$refs.assetEditUnit.tabView=true;
       },
       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='';
@@ -1211,8 +1217,8 @@
                 this.showTableData.push(edpQueryData);
               }
               this.showTableDataCopy=JSON.stringify(this.showTableData);
-              this.tableShow=3;
+              // this.queryEdpLoading=false;
-              this.queryEdpLoading=false;
+              this.$refs.loading.endLoading();
               this.gutterHandler(".endpoint-query-table"); //控制table右边距
               this.showTopBtn2 = false;
               this.$nextTick(() => {
@@ -1313,8 +1319,8 @@
 
         this.chartDatas=[];
         this.legend=[];
-        this.queryChartDate();
         this.graphShow=true;
+        setTimeout(()=>{this.queryChartDate();},10)
 
       },
       dialogClose:function(){
@@ -1404,6 +1410,7 @@
                 this.$refs.chartScrollbar.update();
               }
             });
+          this.$refs.graphLoading.endLoading();
         })
       },
       dateChange:function(){
@@ -1414,6 +1421,7 @@
 
       },
       initDialog:function(){
+        this.$refs.graphLoading.startLoading();
         this.graphChart = echarts.init(document.getElementById('viewGraphChart'));
         // this.queryChartDate();
         // this.chartOptions.legend.data=this.legend;