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="部门待办" 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="部门上架" 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>
        <!-- 中 -->
        <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 DeptChartView from '../workBench/components/dept-chart-view.vue'
import deptTodoView from '../workBench/components/dept-todo-view.vue'
import * as Apis from './api.js'

export default {
    components: {
        deptTodoView,
        BottomView,
        CenterView,
        DeptChartView,
    },
    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: 0,
                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: 0,
                list: [],
                nameStr: 'processDefinitionName'
            },
            // 上架
            resourceData: [],
            // 上架
            applyData: [],
            // 上架
            requireData: [],
            loadingToDo: false,
            loadingHasToDo: false,
            loadingResource: false,
            loadingApply: false,
            loadingRequire: false,
        }
    },
    mounted() {
        // 部门待办
        this.getToDo()
        // 部门已办
        this.getHasToDo()
        // 上架
        this.getShelvesTotal()
        // 申请
        this.getApplyTotal()
        // 需求
        this.getRequireTotal()
    },
    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)
                }
                console.log('res----待办-------->', res.data);
                this.toToData.list = res.data.data.records || []
                this.toToData.num = res.data.data.total || 0
            }, err => {
                this.$message.error(err);
                this.loadingToDo = false;
            })
        },
        // 已办
        getHasToDo() {
            let data = {
                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)
                }
                console.log('res----已办-------->', res.data);
                this.hasToDodoData.list = res.data.data.records || []
                this.hasToDodoData.num = res.data.data.total || 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)
                }
                console.log('res----部门上架-------->', res.data);
                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)
                }
                console.log('res----部门申请-------->', res.data);
                this.applyData = this.formatList(res.data.data.total || [])
            }, err => {
                this.$message.error(err)
                this.loadingApply = false;
            })
        },
        formatList(list = [], nameStr = 'type') {
            let arr = []
            list.map(v => {
                let obj = {}
                obj.name = v[nameStr];
                obj.value = v.count;
                arr.push(obj)
            })
            return arr;
        },
        // 部门需求
        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;
            })
        },

    },
}
</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;

    }

    .dept-left {
        width: 836px;
        background: #fff;
        margin-right: 16px;
    }

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