工作台：top5

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>

back/src/views/modules/workBench/components/frequency-top5-view.vue

@@ -1,26 +1,62 @@
 <template>
     <div class="frequency">
-        555
-        <div>标题</div>
+        <contentTitle title="部门能力使用频率TOP5"></contentTitle>
+        <div v-if="!noData">
             <div class="no-box">
-            <div class="no2"></div>
-            <div class="no1"></div>
-            <div class="no3"></div>
+                <div class="no no2">
+                    <div class="name" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
+                    <div class="count">{{ no2Obj.count }}</div>
                 </div>
-        <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 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
+        };
     },
     mounted() {
-        this.getData()
+        this.getData();
     },
     methods: {
         // 频率
@@ -28,33 +64,63 @@ export default {
             let data = {
                 limit: 5,
                 page: 1,
-            }
+            };
             Apis.getFrequence(data, res => {
                 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 || [];
+                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.$message.error(err)
-            })
-
+                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 +130,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 +151,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>

back/src/views/modules/workBench/components/recommend-view.vue

@@ -79,6 +79,8 @@ export default {
             return;
           }
           this.data = res.data.data.records || [];
+          console.log('this.data------------>', this.data);
+          
         },
         err => {
           console.log("err", err);

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>