工作台优化

back/src/views/modules/workBench/api.js

@@ -116,7 +116,8 @@ export const getFrequence = (data, success, fail) => {
 export const getResourceByDept = (data, success, fail) => {
     Request({
         methods: 'get',
-        url: '/resource/getByDept',
+        // url: '/resource/getByDept',
+        url: '/workdynamics/getDeptWork',
         data
     }).then(res => {
         success && success(res)

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

@@ -1,36 +1,84 @@
 <template>
   <div class="bottom-view">
+    <!-- 部门发布动态 -->
     <div class="left container">
       <content-title :title="title.dynamic"></content-title>
-      <dynamicView v-for="(item, index) in list" :key="index" :number="index + 1" :item="item"></dynamicView>
+      <div class="dynamic-box" v-loading="loadingDynamic">
+        <div class="dynamicView" v-for="(item, index) in list" :key="index" :number="index + 1" :item="item">
+          <div class="wrapper">
+            <div class="content">
+              <div class="left">{{ item.createDate }}</div>
+              <el-tooltip effect="dark" :content="item.title" placement="top">
+                <div class="right ellipsis">{{ item.title || '--' }}</div>
+              </el-tooltip>
             </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <!-- 部门推荐能力 -->
     <div class="right container">
       <content-title :title="title.recommend"></content-title>
-      <recommendView></recommendView>
+      <div class="recommendView">
+        <a-table :dataSource="tableData" :columns="columns" bordered :pagination="false" :scroll="maxSize"
+          :loading="loadingTable" size="small" />
+      </div>
     </div>
   </div>
 </template>
 <script>
-import dynamicView from "./dynamic-view";
-import recommendView from "./recommend-view";
 import contentTitle from "./content-title";
 import * as Apis from '../api';
 export default {
   components: {
-    dynamicView,
-    recommendView,
     contentTitle
   },
   data() {
     return {
       title: { dynamic: "部门发布动态", recommend: "部门推荐能力" },
-      list: [
+      list: [],
-       
+      columns: [
-      ]
+        {
+          title: "名称",
+          key: "name",
+          dataIndex: "name",
+          width: 250
+        },
+        {
+          title: "类型",
+          key: "type",
+          dataIndex: "type",
+          width: 76
+        },
+        {
+          title: "单位",
+          key: "deptContacts",
+          dataIndex: "deptContacts",
+          width: 144
+        },
+        {
+          title: "时间",
+          key: "createDate",
+          dataIndex: "createDate",
+          width: 153
+        },
+        {
+          title: "当前申请数",
+          key: "applyCount",
+          dataIndex: "applyCount",
+          width: 145
+        },
+      ],
+      tableData: [],
+      maxSize: { y: 195 },
+      loadingDynamic: false,
+      loadingTable: false,
     };
   },
   mounted() {
     this.getResourceByDept();
+    this.getApplyByDept()
   },
   methods: {
     // 发布动态 
@@ -39,15 +87,46 @@ export default {
         limit: 5,
         page: 1
       };
+      this.loadingDynamic = true;
       Apis.getResourceByDept(
         data,
         res => {
+          this.loadingDynamic = false;
           if (res.data.code !== 0) {
-            return;
+            return this.$message.error(res.data.msg)
           }
-          this.list = res.data.data.records || []
+          console.log('res.data----发布动态-------->', res.data);
+          this.list = res.data.data.list || []
+          this.list.push(this.list[0])
+          this.list.push(this.list[0])
         },
         err => {
+          this.loadingDynamic = false;
+          this.$message.error(err)
+          console.log('err-----发布动态------->', err);
+        }
+      );
+    },
+    // 部门推荐能力
+    getApplyByDept() {
+      let data = {
+        limit: 5,
+        page: 1
+      };
+      this.loadingTable = true;
+      Apis.getApplyByDept(
+        data,
+        res => {
+          this.loadingTable = false;
+          if (res.data.code !== 0) {
+            return this.$message.error(res.data.msg)
+          }
+          console.log('res.data------部门推荐能力------>', res.data);
+          this.tableData = res.data.data.list || [];
+        },
+        err => {
+          this.loadingTable = false;
+          this.$message.error(err)
           console.log("err", err);
         }
       );
@@ -56,14 +135,22 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.ellipsis {
+  //超出一行省略号
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
 .bottom-view {
   width: 100%;
   height: 335px;
-  // background: green;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
-  //   color: #fff;
+  margin-bottom: 20px;
+
   .container {
     background: #fff;
     width: 800px;
@@ -71,4 +158,67 @@ export default {
     padding: 0px 0 20px 10px;
   }
 }
+
+.dynamic-box {
+  width: 770px;
+  height: 335px;
+}
+
+.dynamicView {
+  cursor: pointer;
+  width: 770px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 7px;
+
+  .wrapper {
+    height: 50px;
+    width: 770px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-image: url("../images/bgIndex.png");
+    background-repeat: no-repeat;
+    background-color: #f4f5f8;
+    border-radius: 1px;
+
+    .content {
+      width: 760px;
+      padding-right: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      margin-left: 12px;
+      font-size: 16px;
+
+      .left {
+        width: 159px;
+        color: #2b2b2b;
+        font-size: 14px;
+      }
+
+      .right {
+        font-size: 18px;
+        color: #464645;
+        width: 600px;
+      }
+    }
+  }
+}
+
+.recommendView {
+  cursor: pointer;
+  width: 770px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 7px;
+}
+
+::v-deep .ant-table-thead {
+  background-color: #f4f5f8;
+}
 </style>

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

@@ -1,69 +0,0 @@
-<template>
-  <div class="dynamicView">
-    <div class="wrapper">
-      <div class="content">
-        <div class="left">{{ item.createDate }}</div>
-        <div class="right">{{ item.name }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "dynamicView",
-  props: {
-    item: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-  methods: {}
-};
-</script>
-
-<style lang="scss" scoped>
-.dynamicView {
-  cursor: pointer;
-  width: 770px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 7px;
-  
-  .wrapper {
-    height: 50px;
-    width: 770px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    background-image: url("../images/bgIndex.png");
-    background-repeat: no-repeat;
-    background-color:#f4f5f8;
-    border-radius:1px;
-
-    .content {
-      width: 760px;
-      padding-right: 20px;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: center;
-      margin-left: 12px;
-      font-size: 16px;
-      .left{
-        width:159px;
-        color:#2b2b2b;
-        font-size:14px;
-      }
-      .right {
-        font-size: 18px;
-        color:#464645
-      }
-    }
-  }
-}
-</style>

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

@@ -4,15 +4,22 @@
         <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>
+                    <el-tooltip effect="dark" :content="no2Obj.name" placement="top">
+                        <div class="name ellipsis" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
+                    </el-tooltip>
                     <div class="count">{{ formatCount(no2Obj.count) }}</div>
                 </div>
                 <div class="no no1">
-                    <div class="name" :style="{ color: colorObj[1] }">{{ no1Obj.name || '--' }}</div>
+                    <el-tooltip effect="dark" :content="no1Obj.name" placement="top">
+                        <div class="name ellipsis" :style="{ color: colorObj[1] }">{{ no1Obj.name || '--' }}</div>
+                    </el-tooltip>
                     <div class="count">{{ formatCount(no1Obj.count) }}</div>
                 </div>
                 <div class="no no3">
-                    <div class="name" :style="{ color: colorObj[3] }">{{ no3Obj.name || '--' }}</div>
+                    <el-tooltip effect="dark" :content="no3Obj.name" placement="top">
+                        <div class="name ellipsis" :style="{ color: colorObj[3] }">{{ no3Obj.name || '--' }}</div>
+                    </el-tooltip>
+
                     <div class="count">{{ formatCount(no3Obj.count) }}</div>
                 </div>
             </div>
@@ -174,6 +181,7 @@ export default {
     margin-bottom: 10px;
     margin-top: 70px;
     width: 150px;
+    text-align: center;
 }
 
 .count {

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

@@ -1,98 +0,0 @@
-<template>
-  <div class="recommendView">
-    <a-table :dataSource="data" :columns="columns" bordered :pagination="false" :scroll="maxSize" size="small" />
-  </div>
-</template>
-
-<script>
-import * as Apis from "../api";
-export default {
-  name: "recommendView",
-  props: {
-    item: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      columns: [
-        {
-          title: "名称",
-          key: "name",
-          dataIndex: "name",
-          width: 250
-        },
-        {
-          title: "类型",
-          key: "type",
-          dataIndex: "type",
-          width: 76
-        },
-        {
-          title: "单位",
-          key: "deptContacts",
-          dataIndex: "deptContacts",
-          width: 144
-        },
-        {
-          title: "时间",
-          key: "createDate",
-          dataIndex: "createDate",
-          width: 153
-        },
-        {
-          title: "当前申请数",
-          key: "applyCount",
-          dataIndex: "applyCount",
-          width: 145
-        },
-      ],
-      data: [
-       
-      ],
-      maxSize: { y: 195 }
-    };
-  },
-  mounted() {
-    this.getApplyByDept();
-  },
-  methods: {
-    //发布动态
-    getApplyByDept() {
-      let data = {
-        limit: 5,
-        page: 1
-      };
-      Apis.getApplyByDept(
-        data,
-        res => {
-          if (res.data.code !== 0) {
-            return;
-          }
-          this.data = res.data.data.list || [];
-        },
-        err => {
-          console.log("err", err);
-        }
-      );
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.recommendView {
-  cursor: pointer;
-  width: 770px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 7px;
-}
-::v-deep .ant-table-thead{
- background-color:#f4f5f8;
-}
-</style>

back/src/views/modules/workBench/workBench.vue

@@ -212,6 +212,8 @@ export default {
 }
 
 .work-brnch-box {
+    padding-bottom: 20px;
+
     .top {
         height: 284px;
         margin-bottom: 16px;