diff --git a/back/src/views/modules/workBench/components/content-title.vue b/back/src/views/modules/workBench/components/content-title.vue
index 063ee4aa..b5afc6ca 100644
--- a/back/src/views/modules/workBench/components/content-title.vue
+++ b/back/src/views/modules/workBench/components/content-title.vue
@@ -12,26 +12,16 @@ export default {
   props: {
     title: String,
   },
-  data() {
-
-  },
-  computed: {
-
-  },
-  methods: {
-   
-  }
 };
 </script>
 
 <style lang="scss" scoped>
-
 .content-title {
-  height:48px;
-  line-height:48px;
+  height: 48px;
+  line-height: 48px;
   font-size: 18px;
+  font-weight: bold;
   // color: #fff;
 
 }
-
 </style>
\ No newline at end of file
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..58c24019 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() {
@@ -60,11 +60,8 @@ export default {
                 this.myChart.dispose()
             }
             this.myChart = chartDom && echarts.init(chartDom);
-            console.log('this.myChart------------>', this.myChart);
-
 
             let lengendArr = this.dataListCopy.filter(v => v.name);
-
             let colorArray = [
                 '#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
             ]
@@ -113,8 +110,8 @@ export default {
                     },
                     "icon": "circle",
                     "right": "0",
-                    "bottom": "0",
-                    "padding": [10, 60],
+                    "bottom": "30",
+                    // "padding": [10, 60],
                     "itemGap": 10,
                     "data": lengendArr
                 },
@@ -188,6 +185,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/dept-todo-view.vue b/back/src/views/modules/workBench/components/dept-todo-view.vue
index 74394017..21406fa1 100644
--- a/back/src/views/modules/workBench/components/dept-todo-view.vue
+++ b/back/src/views/modules/workBench/components/dept-todo-view.vue
@@ -132,6 +132,7 @@ export default {
     height: 32px;
     line-height: 32px;
     text-align: right;
+    cursor: pointer;
 }
 
 .no-data {
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 54541671..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,26 +1,63 @@
 <template>
     <div class="frequency">
-        555
-        <div>标题</div>
-        <div class="no-box">
-            <div class="no2"></div>
-            <div class="no1"></div>
-            <div class="no3"></div>
+        <contentTitle title="部门能力使用频率TOP5"></contentTitle>
+        <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>
+                    <div class="count">{{ no2Obj.count }}</div>
+                </div>
+                <div class="no no1">
+                    <div class="name" :style="{ color: colorObj[1] }">{{ no1Obj.name }}</div>
+                    <div class="count">{{ no1Obj.count }}</div>
+                </div>
+                <div class="no no3">
+                    <div class="name" :style="{ color: colorObj[3] }">{{ no3Obj.name }}</div>
+                    <div class="count">{{ no3Obj.count }}</div>
+                </div>
+            </div>
+            <div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i">
+                <div class="left">
+                    <div class="row-index">{{ i + 3 }}</div>
+                    <div class="name-text">{{ data.name }}</div>
+                </div>
+                <div class="count-text">{{ data.count }}</div>
+            </div>
         </div>
-        <div></div>
+        <div class="no-data" v-else>暂无数据</div>
+
     </div>
 </template>
 <script>
 import * as Apis from '../api.js'
+import contentTitle from './content-title.vue'
 export default {
     data() {
         return {
-            frequenceList: [],
-            noInfo: {}
-        }
+            listInfo: [],
+            colorObj: {
+                1: '#4658710',
+                2: '#734204',
+                3: '#805932',
+            },
+            no1Obj: {
+                name: '',
+                count: '',
+            },
+            no2Obj: {
+                name: '',
+                count: '',
+            },
+            no3Obj: {
+                name: '',
+                count: '',
+            },
+            noData: false,
+            loading: true,
+        };
     },
     mounted() {
-        this.getData()
+        this.getData();
     },
     methods: {
         // 频率
@@ -28,33 +65,67 @@ export default {
             let data = {
                 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)
+                    return this.$message.error(res.data.msg);
                 }
-                console.log('res----频率-------->', res.data);
-                this.frequenceList = res.data.data.records || [];
-            }, err => {
-                this.$message.error(err)
-            })
+                console.log("res----频率-------->", res.data);
+                let _arr = res.data.data.records || [];
+                if (_arr.length == 0) {
+                    this.noData = true
+                    return;
+                }
+                for (let i = 0; i < 3; i++) {
+                    let k = i + 1;
+                    this[`no${k}Obj`].name = _arr[i].name
+                    this[`no${k}Obj`].count = _arr[i].count
+                }
+                this.listInfo = []
+                this.listInfo.push(_arr[3])
+                this.listInfo.push(_arr[4])
 
+            }, err => {
+                this.loading = false;
+                this.$message.error(err);
+            });
         },
-    }
+    },
+    components: { contentTitle }
 }
 </script>
 <style lang="scss" scoped>
+.flex-row-between {
+    display: flex;
+    width: 100%;
+    margin-bottom: 8px;
+    height: 52px;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: 10px;
+    padding-right: 16px;
+    box-sizing: border-box;
+}
+
+.left {
+    display: flex;
+}
+
 .frequency {
     width: 540px;
     height: 335px;
-    background: pink;
-    margin-right: 4px;
+    background: #fff;
+    padding: 0 16px;
+    box-sizing: border-box;
 }
 
 .no-box {
     display: flex;
     align-items: center;
     justify-content: flex-start;
+    margin-bottom: 24px;
 }
 
 .no1 {
@@ -64,6 +135,13 @@ export default {
     background-image: url("~@/assets/img/workBench/NO1.png");
 }
 
+.no {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
 .no2 {
     width: 170px;
     height: 120px;
@@ -78,4 +156,46 @@ export default {
     margin-top: 10px;
     background-image: url("~@/assets/img/workBench/NO3.png");
 }
+
+.name {
+    font-size: 16px;
+    margin-bottom: 10px;
+    margin-top: 70px;
+}
+
+.count {
+    font-size: 18px;
+    color: #2b2b2b;
+}
+
+.row-name {
+    background: #f4f5f8;
+    border-radius: 1px;
+}
+
+.row-index {
+    font-size: 16px;
+    color: #414d60;
+}
+
+.name-text {
+    font-size: 16px;
+    color: #464545;
+}
+
+
+.num-text {
+    font-size: 14px;
+    color: #2b2b2b;
+}
+
+.no-data {
+    width: 540px;
+    height: 300px;
+    background: #fff;
+    line-height: 232px;
+    font-size: 16px;
+    color: #212121;
+    text-align: center;
+}
 </style>
\ No newline at end of file
diff --git a/back/src/views/modules/workBench/components/risk-view.vue b/back/src/views/modules/workBench/components/risk-view.vue
index 879d05e9..8df8f573 100644
--- a/back/src/views/modules/workBench/components/risk-view.vue
+++ b/back/src/views/modules/workBench/components/risk-view.vue
@@ -1,17 +1,32 @@
 <template>
     <div class="risk">
-        555
+        <contentTitle title="部门能力风险TOP5"></contentTitle>
+        <div class="no-data">暂无数据</div>
+
     </div>
 </template>
 <script>
+import contentTitle from './content-title.vue'
 export default {
-
+    components: { contentTitle }
 }
 </script>
 <style lang="scss" scoped>
 .risk {
     width: 540px;
     height: 335px;
-    background: pink;
+    background: #fff;
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.no-data {
+    width: 540px;
+    height: 300px;
+    background: #fff;
+    line-height: 232px;
+    font-size: 16px;
+    color: #212121;
+    text-align: center;
 }
 </style>
\ No newline at end of file
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;
             })
         },