运控评估报告页添加loading

src/assets/styles/ykbg.scss

@@ -59,3 +59,4 @@
     font-size:20px;
   }
 }
+/deep/ .el-loading-spinner{margin-top:-40px;}

src/views/rzcx/ykpgbg.vue

@@ -36,12 +36,12 @@
                 <div class="flex">
                     <div class="fwyxzcl wrap wrap271" ref="fwyxzclWrap">
                         <p class="wrap_title" ref="fwyxzclTitle">服务运行正确率</p>
-                        <div id="fwyxzcl" style="width:100%;height:calc(100% - 75px)"></div>
+                        <div id="fwyxzcl" style="width:100%;height:calc(100% - 75px)" v-loading="fwyxzqltableLoading" element-loading-text="拼命加载中"></div>
                         <p class="unit">运行总次数：<span v-show="yxzcsTotal!=null" style="color:#333333">{{yxzcsTotal}}</span><span class="el-icon-loading" v-show="yxzcsTotal===null"></span></p>
                     </div>
                     <div class="gxtdqqk wrap wrap271">
                         <p class="wrap_title">各系统调取情况</p>
-                        <div id="gxtdqqk" style="width:100%;height:calc(100% - 42px)">
+                        <div id="gxtdqqk" style="width:100%;height:calc(100% - 42px)"  v-loading="gxtdqqktableLoading" element-loading-text="拼命加载中">
                             <ul>
                                 <li v-for="(item,index) in gxtdqqk" :key="index" class="list_item" :style="{width:`${listWidth}`}">
                                     <p class="xtTitle">{{item.name}}</p>
@@ -54,13 +54,13 @@
                 </div>
                 <div class="gsdduqk wrap">
                     <p class="wrap_title">各时段调取情况</p>
-                    <div id="gsdduqk" style="width:100%;height:calc(100% - 42px)"></div>
+                    <div id="gsdduqk" style="width:100%;height:calc(100% - 42px)"  v-loading="gsddqqktableLoading" element-loading-text="拼命加载中"></div>
                 </div>
             </div>
             <!--右-->
             <div class="right_con  wrap wrapBig">
                     <p class="wrap_title">服务运行时间统计</p>
-                    <div id="fwyxsjtj" style="width:100%;height:calc(100% - 135px)"></div>
+                    <div id="fwyxsjtj" style="width:100%;height:calc(100% - 135px)" v-loading="fwyxsjtjtableLoading" element-loading-text="拼命加载中"></div>
                     <div class="unit" style="text-indent: 36px;line-height: 26px;margin-top: 36px;">运行总时常：<p v-show="fwyxsjtjTotal!=null" style="color:#333333">{{fwyxsjtjTotal}}</p><p class="el-icon-loading" v-show="fwyxsjtjTotal===null"></p></div>
 
             </div>
@@ -92,6 +92,10 @@
                 formData:ykpgbgFormData,
                 yxzcsTotal:null,//运行总次数
                 fwyxsjtjTotal:null,//服务运行时间统计
+                fwyxzqltableLoading:true,
+                gxtdqqktableLoading:true,
+                gsddqqktableLoading:true,
+                fwyxsjtjtableLoading:true,
                 gxtdqqk:[
                     {name:'指纹系统',value:'1000'},
                     {name:'大数据中心',value:''},
@@ -307,6 +311,7 @@
                         }
                     ]
                 });
+                this.fwyxzqltableLoading=false;
             },
             fwyxsjtj(x,y){
                 //服务运行时间统计
@@ -343,6 +348,7 @@
                         }
                     ]
                 });
+                this.gsddqqktableLoading=false;
             },
             gsdduqk(x,y){
                 //各时段调取情况
@@ -377,10 +383,12 @@
                     }],
                     color:'#FFAC3B'
                 });
+                this.fwyxsjtjtableLoading=false;
             },
 
             doquery1(){
                 let self=this;
+                self.fwyxzqltableLoading=true;
                 self.doQueryRequest(JSON.stringify(self.formData),self.FwyxzqlUrl).then(response => {
                     if (response.success === true) {
                         let xData=['正常次数'+':'+response.data['success_count'], '异常次数'+':'+response.data['error_count']];
@@ -399,11 +407,13 @@
                             type: "error",
                             message: response.message
                         });
+                        self.fwyxzqltableLoading=false;
                     }
                 });
             },
             doquery2(){
                 let self=this;
+                self.gxtdqqktableLoading=true;
                 self.doQueryRequest(JSON.stringify(self.formData),self.GxtdqqkUrl).then(response => {
                     if (response.success === true) {
                         if(response.data.list.length!=0){
@@ -421,16 +431,19 @@
                                 item.value=0;
                             })
                         }
+                        self.gxtdqqktableLoading=false;
                     } else {
                         self.$message({
                             type: "error",
                             message: response.message
                         });
+                        self.gxtdqqktableLoading=false;
                     }
                 });
             },
             doquery3(){
                 let self=this;
+                self.fwyxsjtjtableLoading=true;
                 self.doQueryRequest(JSON.stringify(self.formData),self.GsddqqkUrl).then(response => {
                     if (response.success === true) {
                         self.gsdduqk(response.data.x,response.data.y);
@@ -439,11 +452,13 @@
                             type: "error",
                             message: response.message
                         });
+                        self.fwyxsjtjtableLoading=false;
                     }
                 });
             },
             doquery4(){
                 let self=this;
+                self.gsddqqktableLoading=true;
                 self.doQueryRequest(JSON.stringify(self.formData),self.FwyxsjtjUrl).then(response => {
                     if (response.success === true) {
                         let xData=['正常'+":"+response.data['succesTime'], '异常'+":"+response.data['errorTime']];
@@ -462,6 +477,7 @@
                             type: "error",
                             message: response.message
                         });
+                        self.gsddqqktableLoading=false;
                     }
                 });
             }