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"
                    ref="resourceChart" :colorArray="resourceColor">
                </dept-chart-view>
                <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData" ref="applyChart"
                    :colorArray="applyColor">
                </dept-chart-view>
                <dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData"
                    ref="requireChart" :colorArray="requireColor">
                </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: [],
                type: 'todo',
                url: 'activiti-my-todo-task'
            },
            // 部门已办
            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: [],
                url: 'activiti-my-join-task'
            },
            // 部门申请
            resourceData: [],
            resourceColor: ['#7b2cff', '#fd5151', , '#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#f071ff', '#85f67a'],
            // 部门申请
            applyData: [],
            applyColor: ["#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"],
            // 部门需求
            requireData: [],
            requireColor: ['#FD866A', '#9E87FF', '#58D5FF', '#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A',],
            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 || [])
                this.$nextTick(() => {
                    this.$refs.resourceChart.initChart(this.resourceData)
                })
            }, 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 || [])
                this.$nextTick(() => {
                    console.log('this.applyData------------>', this.applyData);
                    this.$refs.applyChart.initChart(this.applyData)
                })
            }, 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')
                this.$nextTick(() => {
                    this.$refs.requireChart.initChart(this.requireData)
                })

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