33

src/views/home.vue

@@ -65,7 +65,7 @@
               <div class="right">
                 <el-button class="btn-brush" icon="el-icon-plus" @click="getAllMonitorJob">刷新列表</el-button>
               </div>
-              <el-table :data="top5JobList" style="width: 100%" border :header-cell-style="{ color: '#606266' }">
+              <el-table v-loading="jobLoading" :data="top5JobList" style="width: 100%" border :header-cell-style="{ color: '#606266' }">
                 <el-table-column
                   prop="id"
                   label="记录编号"
@@ -73,7 +73,7 @@
                   align="center"
                 ></el-table-column>
                 <el-table-column
-                  prop="name"
+                  prop="jobName"
                   label="转换名称"
                   width="180"
                   align="center"
@@ -105,7 +105,7 @@
               <div class="right">
                 <el-button class="btn-brush" icon="el-icon-plus"  @click="getAllMonitorTrans">刷新列表</el-button>
               </div>
-              <el-table :data="top5TransList" style="width: 100%" border :header-cell-style="{ color: '#606266' }">
+              <el-table v-loading="transLoading" :data="top5TransList" style="width: 100%" border :header-cell-style="{ color: '#606266' }">
                 <el-table-column
                   prop="id"
                   label="记录编号"
@@ -113,7 +113,7 @@
                   align="center"
                 ></el-table-column>
                 <el-table-column
-                  prop="name"
+                  prop="transName"
                   label="转换名称"
                   width="180"
                   align="center"
@@ -212,6 +212,8 @@ export default {
       top5JobList:[],//获取作业监控的Top5
       top5TransList:[],//获取转换监控的Top5
       kettleLineData:{},//获取7天内作业和转换的折线图
+      jobLoading:true,
+      transLoading:true,
    
     };
   },
@@ -220,6 +222,9 @@ export default {
     this.getAllMonitorJob();//获取所有的监控作业数
     this.getAllMonitorTrans();//获取所有的监控转换数
     this.getKettleLine();//获取7天内作业和转换的折线图
+    this.getTop5JobList();
+    this.getTop5TransList();
+    
   },
 
   methods: {
@@ -281,23 +286,32 @@ export default {
     },
     // 获取作业监控的Top5
     getTop5JobList() {
+      this.jobLoading=true;
       var params={};
       getTop5JobList(JSON.stringify(params)).then((res) => {
         console.log('获取作业监控的Top5',res);
         if(res.success){
           this.top5JobList = res.data;
+           setTimeout(() => {
+            this.jobLoading = false
+          }, 200)
         }
   
+        
       });
     },
   
      // 获取转换监控的Top5
     getTop5TransList() {
+      this.transLoading=true;
       var params={};
       getTop5TransList(JSON.stringify(params)).then((res) => {
         console.log('获取转换监控的Top5:',res);
         if(res.success){
           this.top5TransList = res.data;
+          setTimeout(() => {
+            this.transLoading = false
+          }, 200)
         }
         
       });