工作台：联调 待办 已办api

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

@@ -0,0 +1,46 @@
+// /resource/getByDept
+import http from '@/utils/request';
+
+function Request({
+    methods, url, data, success, fali
+}) {
+    let _key = methods == 'get' ? 'params' : 'data';
+    return new Promise((resolve, reject) => {
+        http[methods](url, {
+            [_key]: data
+        }).then(res => {
+            resolve(res)
+        }, err => {
+            reject(err)
+        })
+    })
+
+}
+
+// /resource/getByDept:获取当前登录用户所在部门发布的资源
+
+// 部门待办列表
+export const getToDoTask = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/act/task/deptToDoTaskPage',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}
+
+// 部门已办列表
+export const getHasToDoTask = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/act/his/getDeptHandledInstancePage',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
+}

back/src/views/modules/workBench/components/dept-chart-view.vue

@@ -1,11 +1,6 @@
 <template>
     <div class="dept-box">
-        <div class="left-title-box">
+       
-            <div class="content">
-                <!-- <img class="img" :src=""></img> -->
-                <div></div>
-            </div>
-        </div>
     </div>
 </template>
 <script>

back/src/views/modules/workBench/components/dept-todo-view.vue

@@ -1,18 +1,140 @@
 <template>
-    <div class="dept-box">
+    <div class="dept-box" :class="dataInfo.noMarginleft ? 'no-margin-left' : ''">
-
+        <div class="left-box"
+            :style="{ 'background': dataInfo.bgColor, 'border-right': `1px solid ${dataInfo.borderColor}` }">
+            <div class="content">
+                <img class="img" :src="dataInfo.imgSrc" />
+                <div class="title">{{ title }}</div>
+                <div class="flex-row-bottom">
+                    <span class="num" :style="{ 'color': dataInfo.textColor }">{{ formatNum(dataInfo.num) }}</span>
+                    <span class="unit" :style="{ 'color': dataInfo.textColor }">{{ dataInfo.unit || '个' }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="list-box" v-if="dataInfo.list.length > 0">
+            <div class="list-item" v-for="(item, i) in dataInfo.list" :key="i">
+                {{ item[dataInfo.nameStr] || '--' }}
+            </div>
+            <div class="more">
+                查看更多 >
+            </div>
+        </div>
+        <div class="list-box flex-row-center no-data" v-else>
+            暂无数据
+        </div>
     </div>
 </template>
 <script>
 export default {
+    data() {
+        return {
 
         }
+    },
+    props: {
+        dataInfo: {
+            type: Object,
+            default: () => { }
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+    },
+    methods: {
+        formatNum(num) {
+            return num || num === 0 ? num : '--'
+        }
+    }
+}
 </script>
 <style lang="scss" scoped>
+.no-margin-left {
+    margin-left: 0;
+}
+
+.flex-row-bottom {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+}
+
+.flex-row-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .dept-box {
+    display: flex;
+    align-items: center;
     width: 394px;
     height: 252px;
     margin: 16px;
-    background: pink;
+    background: rgba($color: #f1f3f6, $alpha: 0.8);
+}
+
+.left-box {
+    display: flex;
+    justify-content: center;
+    width: 80px;
+    border-radius: 2px;
+    height: 100%;
+}
+
+.img {
+    height: 50px;
+    width: 50px;
+    margin: 0 auto;
+}
+
+.content {
+    // margin-top: 57px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.title {
+    font-size: 18px;
+    color: #000;
+    margin-top: 25px;
+    margin-bottom: 18px;
+}
+
+.num {
+    font-size: 30px;
+}
+
+.unit {
+    font-size: 16px;
+    margin-left: 2px;
+}
+
+.list-box {
+    width: 314px;
+    height: 252px;
+}
+
+.list-item {
+    height: 44px;
+    line-height: 44px;
+    box-sizing: border-box;
+    border-bottom: 1px dashed #c6c6c6;
+    font-size: 16px;
+    color: #212121;
+}
+
+.more {
+    color: #212121;
+    font-size: 14px;
+    height: 32px;
+    line-height: 32px;
+    text-align: right;
+}
+
+.no-data {
+    font-size: 16px;
+    color: #212121;
 }
 </style>

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

@@ -22,6 +22,7 @@
 import BottomView from '../workBench/components/bottom-view.vue'
 import CenterView from '../workBench/components/center-view.vue'
 import deptTodoView from '../workBench/components/dept-todo-view.vue'
+import * as Apis from './api'
 
 export default {
     components: {
@@ -34,16 +35,65 @@ export default {
             // 部门待办
             toToData: {
                 color: '#f86f01',
-                // imgSrc: require(''),
+                imgSrc: require('@/assets/img/workBench/todo.png'),
+                bgColor: 'rgba(228,138,1,0.12)',
+                borderColor: 'rgba(250,123,12,0.54)',
+                textColor: '#f86f01',
+                num: 34,
+                list: [],
+                nameStr: 'taskName'
             },
             // 部门已办
             hasToDodoData: {
+                noMarginleft: true,
                 color: '#21b107',
+                imgSrc: require('@/assets/img/workBench/hasToDo.png'),
+                bgColor: 'rgba(37,165,13,0.12)',
+                borderColor: 'rgba(49,194,20,0.54)',
+                textColor: '#21b107',
+                num: 34,
+                list: [],
+                nameStr: 'processDefinitionName'
             }
         }
     },
+    mounted() {
+        this.getToDo()
+        this.getHasToDo()
+    },
     methods: {
-
+        // 待办
+        getToDo() {
+            let data = {
+                limit: 5,
+                page: 1,
+            }
+            Apis.getToDoTask(data, res => {
+                if (res.data.code !== 0) {
+                    return;
+                }
+                console.log('res----待办-------->', res.data);
+                this.toToData.list = res.data.data.records || []
+            }, err => {
+                console.log('err-----待办------->', err);
+            })
+        },
+        // 已办
+        getHasToDo() {
+            let data = {
+                limit: 5,
+                page: 1,
+            }
+            Apis.getHasToDoTask(data, res => {
+                if (res.data.code !== 0) {
+                    return;
+                }
+                console.log('res----已办-------->', res.data);
+                this.hasToDodoData.list = res.data.data.records || []
+            }, err => {
+                console.log('err-----已办------->', err);
+            })
+        },
     },
 }
 </script>
@@ -64,7 +114,7 @@ export default {
     .top {
         height: 284px;
         margin-bottom: 16px;
-        background: green;
+        background: #fff;
     }
 
     .dept-left {