From b4d28c2418030ce96929db525ed236658897e157 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Thu, 30 Jun 2022 13:15:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E5=8F=B0=EF=BC=9A=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workBench/components/dept-chart-view.vue  | 12 ++++--
 .../components/frequency-top5-view.vue        |  9 ++++-
 .../src/views/modules/workBench/workBench.vue | 37 ++++++++++++++++---
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/back/src/views/modules/workBench/components/dept-chart-view.vue b/back/src/views/modules/workBench/components/dept-chart-view.vue
index e2614a22..71dc9cf5 100644
--- a/back/src/views/modules/workBench/components/dept-chart-view.vue
+++ b/back/src/views/modules/workBench/components/dept-chart-view.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="chart-box">
         <div class="title">{{ title }}</div>
         <div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id">
         </div>
@@ -40,7 +40,7 @@ export default {
                         // 解决数据初始渲染不出来的问题
                         setTimeout(() => {
                             this.initChart()
-                        }, 1000)
+                        }, 2000)
                     }
                 }
             },
@@ -51,7 +51,7 @@ export default {
     mounted() {
         setTimeout(() => {
             this.initChart()
-        }, 1000)
+        }, 2000)
     },
     methods: {
         initChart() {
@@ -188,6 +188,12 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.chart-box {
+    width: 260px;
+    height: 232px;
+    margin: 1px;
+}
+
 .dept-chart-view {
     width: 260px;
     height: 232px;
diff --git a/back/src/views/modules/workBench/components/frequency-top5-view.vue b/back/src/views/modules/workBench/components/frequency-top5-view.vue
index 30dfc57c..f0671cba 100644
--- a/back/src/views/modules/workBench/components/frequency-top5-view.vue
+++ b/back/src/views/modules/workBench/components/frequency-top5-view.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="frequency">
         <contentTitle title="部门能力使用频率TOP5"></contentTitle>
-        <div v-if="!noData">
+        <div v-if="!noData" v-loading="loading">
             <div class="no-box">
                 <div class="no no2">
                     <div class="name" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
@@ -52,7 +52,8 @@ export default {
                 name: '',
                 count: '',
             },
-            noData: false
+            noData: false,
+            loading: true,
         };
     },
     mounted() {
@@ -65,7 +66,9 @@ export default {
                 limit: 5,
                 page: 1,
             };
+            this.loading = true
             Apis.getFrequence(data, res => {
+                this.loading = false;
                 if (res.data.code !== 0) {
                     return this.$message.error(res.data.msg);
                 }
@@ -83,7 +86,9 @@ export default {
                 this.listInfo = []
                 this.listInfo.push(_arr[3])
                 this.listInfo.push(_arr[4])
+
             }, err => {
+                this.loading = false;
                 this.$message.error(err);
             });
         },
diff --git a/back/src/views/modules/workBench/workBench.vue b/back/src/views/modules/workBench/workBench.vue
index 7f80c24f..da4f3d82 100644
--- a/back/src/views/modules/workBench/workBench.vue
+++ b/back/src/views/modules/workBench/workBench.vue
@@ -3,13 +3,17 @@
         <!-- 上 -->
         <div class="flex-row-start top">
             <div class="flex-row-start dept-left">
-                <dept-todo-view title="部门待办" :dataInfo="toToData"></dept-todo-view>
-                <dept-todo-view title="部门已办" :dataInfo="hasToDodoData" style="margin-left: 0"></dept-todo-view>
+                <dept-todo-view title="部门待办" v-loading="loadingToDo" :dataInfo="toToData"></dept-todo-view>
+                <dept-todo-view title="部门已办" v-loading="loadingHasToDo" :dataInfo="hasToDodoData"
+                    style="margin-left: 0"></dept-todo-view>
             </div>
             <div class="flex-row-start dept-chart-box">
-                <dept-chart-view id="shelves" title="部门上架" :dataList="resourceData"></dept-chart-view>
-                <dept-chart-view id="apply" title="部门申请" :dataList="applyData"></dept-chart-view>
-                <dept-chart-view id="demand" title="部门需求" :dataList="requireData"></dept-chart-view>
+                <dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData">
+                </dept-chart-view>
+                <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData">
+                </dept-chart-view>
+                <dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData">
+                </dept-chart-view>
             </div>
         </div>
         <!-- 中 -->
@@ -67,6 +71,11 @@ export default {
             applyData: [],
             // 上架
             requireData: [],
+            loadingToDo: false,
+            loadingHasToDo: false,
+            loadingResource: false,
+            loadingApply: false,
+            loadingRequire: false,
         }
     },
     mounted() {
@@ -84,11 +93,13 @@ export default {
     methods: {
         // 待办
         getToDo() {
+            this.loadingToDo = true;
             let data = {
                 limit: 5,
                 page: 1,
             }
             Apis.getToDoTask(data, res => {
+                this.loadingToDo = false;
                 if (res.data.code !== 0) {
                     return this.$message.error(res.data.msg)
                 }
@@ -96,7 +107,8 @@ export default {
                 this.toToData.list = res.data.data.records || []
                 this.toToData.num = res.data.data.records.length || 0
             }, err => {
-                this.$message.error(err)
+                this.$message.error(err);
+                this.loadingToDo = false;
             })
         },
         // 已办
@@ -105,7 +117,9 @@ export default {
                 limit: 5,
                 page: 1,
             }
+            this.loadingHasToDo = true;
             Apis.getHasToDoTask(data, res => {
+                this.loadingHasToDo = false;
                 if (res.data.code !== 0) {
                     return this.$message.error(res.data.msg)
                 }
@@ -114,12 +128,15 @@ export default {
                 this.hasToDodoData.num = res.data.data.records.length || 0
             }, err => {
                 this.$message.error(err)
+                this.loadingHasToDo = false;
                 console.log('err-----已办------->', err);
             })
         },
         // 部门上架
         getShelvesTotal() {
+            this.loadingResource = true;
             Apis.getTotalByDept({}, res => {
+                this.loadingResource = false;
                 if (res.data.code !== 0) {
                     return this.$message.error(res.data.msg)
                 }
@@ -127,11 +144,14 @@ export default {
                 this.resourceData = this.formatList(res.data.data.total || [])
             }, err => {
                 this.$message.error(err)
+                this.loadingResource = false;
             })
         },
         // 部门申请
         getApplyTotal() {
+            this.loadingApply = true;
             Apis.getApply({}, res => {
+                this.loadingApply = false;
                 if (res.data.code !== 0) {
                     return this.$message.error(res.data.msg)
                 }
@@ -139,6 +159,7 @@ export default {
                 this.applyData = this.formatList(res.data.data.total || [])
             }, err => {
                 this.$message.error(err)
+                this.loadingApply = false;
             })
         },
         formatList(list = [], nameStr = 'type') {
@@ -153,14 +174,18 @@ export default {
         },
         // 部门需求
         getRequireTotal() {
+            this.loadingRequire = true;
             Apis.getRequire({}, res => {
+                this.loadingRequire = false;
                 if (res.data.code !== 0) {
                     return this.$message.error(res.data.msg)
                 }
                 console.log('res----部门需求-------->', res.data);
                 this.requireData = this.formatList(res.data.data.total || [], 'flag')
+
             }, err => {
                 this.$message.error(err)
+                this.loadingRequire = false;
             })
         },