hi-ucs/back/src/views/modules/workBench/workBench.vue

<template>
    <div class="work-brnch-box">
        <!-- 上 -->
        <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"></dept-todo-view>
            </div>
            <div class="dept-chart-box"></div>
        </div>
        <!-- 中 -->
        <div class="center">
            <center-view></center-view>
        </div>
        <!-- 下 -->
        <div class="bottom">
            <bottom-view></bottom-view>
        </div>
    </div>
</template>
<script>
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: {
        deptTodoView,
        BottomView,
        CenterView,
    },
    data() {
        return {
            // 部门待办
            toToData: {
                color: '#f86f01',
                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>


<style lang="scss" scoped>
.margin-h-16 {
    margin: 0 16px;
}

.flex-row-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.work-brnch-box {
    .top {
        height: 284px;
        margin-bottom: 16px;
        background: #fff;
    }

    .dept-left {
        width: 836px;
    }

    .dept-chart-box {
        width: 780px;
        height: 100%;
        background: orange;
    }
}
</style>