manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/summary.vue

<template>
    <div :style="'padding:10px;background:#f7f7f7;min-height:' + tableHeight + 'px;'">
        <div style="margin: 0 auto;width:1120px;">
            <!-- <label>项目统计</label> -->
            <el-row :gutter="10">
                <!-- 任务数量总计 -->
                <el-col :span="12">
                    <div class="box">
                        <div>
                            <div class="lableTxt">{{ $t('projectoverviewtable') }}</div>
                            <el-divider></el-divider>
                            <el-row :gutter="10">
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('all') }}</p>
                                    <p style="font-size:28px;font-weight:bold;color:black;">{{ taskSum.total }}</p>
                                </el-col>
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('state.completed') }}</p>
                                    <p style="font-size:28px;font-weight:bold;color:green;">{{ taskSum.finishCount }}</p>
                                </el-col>
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('wei-wan-cheng') }}</p>
                                    <p style="font-size:28px;color:blue;font-weight:bold;">{{ taskSum.unfinishCount }}</p>
                                </el-col>
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('yi-yu-qi') }}</p>
                                    <p style="font-size:28px;color:red;font-weight:bold;">{{ taskSum.timeupCount }}</p>
                                </el-col>
                            </el-row>
                            <el-row :gutter="10">
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('dai-ren-ling') }}</p>
                                    <p style="font-size:28px;color:#orange;font-weight:bold;">{{ taskSum.unassignCount }}</p>
                                </el-col>
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('duetoday') }}</p>
                                    <p style="font-size:28px;font-weight:bold;color:pink;">{{ taskSum.todayTimeupCount }}</p>
                                </el-col>
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('limittocomplete') }}</p>
                                    <p style="font-size:28px;font-weight:bold;color:gray;">{{ taskSum.timeupFinishCount }}</p>
                                </el-col>
                                <el-col :span="6" style="text-align:center;">
                                    <p style="color:#666;font-size:12px;">{{ $t('shi-jian-dai-ding') }}</p>
                                    <p style="font-size:28px;font-weight:bold;color:black;">{{ taskSum.timeunsetCount }}</p>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="box">
                        <div class="lableTxt" style="display:flex;justify-content:space-between;align-items:center;">{{
                            $t('distributionexecutors') }}
                            <el-radio-group v-model="sumListRadio" size="mini" @change="sumRadioChange">
                                <el-radio-button :label="$t('taskNum')"></el-radio-button>
                                <el-radio-button :label="$t('plantime')"></el-radio-button>
                            </el-radio-group>
                        </div>
                        <el-divider></el-divider>
                        <div id="executorPanel" style="height:300px;width:500px;"></div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <div class="box">
                        <div class="lableTxt">{{ $t('consumingtask') }}</div>
                        <el-divider></el-divider>
                        <div id="costPanel" style="height:300px;width:500px;"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="box">
                        <div class="lableTxt">{{ $t('statisticsbytasklist') }}</div>
                        <el-divider></el-divider>
                        <div id="stagesPanel" style="height:300px;width:500px;"></div>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="10">
                <el-col :span="24">
                    <div class="boxEcharts" v-loading="departmentOptionLoading">
                        <div class="lableTxt">
                            {{ $t('actualworkinghours') }}
                            <div class="lableTxtElm">
                                <el-cascader v-if="user.userNameNeedTranslate != 1" v-model="departmentOptionValue"
                                    :placeholder="$t('defaultText.pleaseChoose')" style="width: 200px" :options="departmentOption"
                                    :props="{ checkStrictly: true, expandTrigger: 'hover' }" :show-all-levels="false"
                                    clearable @change="getTaskTimeCompare()" size="mini"></el-cascader>
                                
                                <vueCascader :size="'mini'" :widthStr="'200'" :clearable="true" :subject="departmentOption" :radios="false" :distinction="'1'" @vueCasader="vueCasader" v-if="user.userNameNeedTranslate == 1"></vueCascader>
                                

                                <el-link @click="exportTaskCompare" style="float:right;"><i
                                        class="iconfont firerock-iconexport"></i>{{ $t('export.export') }}</el-link>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div id="taskTimeComparePanel" :style="`height: ${echartsHeight}px;width:1100px`"></div>
                        <div class="dataPaging">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="dataPagingPage"
                                :page-sizes="[5, 10, 15, 20, 30, 40]"
                                :page-size="dataPagingSize"
                                layout="total, sizes, prev, pager, next"
                                :total="dataPagingTotal">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<style scoped>
#executorPanel {
    display: inline-block;
    width: 100%;
}

.el-divider--horizontal {
    margin: 10px 0;
    height: 0.5px;
}

.box {
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 10px;
    height: 303.7px;
    margin-top: 10px;
}

.boxEcharts {
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

.info span {
    color: #303133;
}

.gray_label {
    color: #999 !important;
}

.el-row {
    margin-top: 10px;
}

.lableTxt {
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lableTxtElm{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 400px;
}
.dataPaging {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>
<script>
import vueCascader from "@/components/cascader.vue"
import cascaderOption from "@/components/cascaderOption.vue"
import util from "../../common/js/util";
export default {
    components: {
        vueCascader,
        cascaderOption
    },
    data() {
        return {
            compareChart: null,
            costChart: null,
            stagesChart: null,
            executorChart: null,
            pVisible: false,
            taskSum: {},
            users: [],
            importanceList: [{ id: 1, label: this.$t('yi-ban') }, { id: 2, label: this.$t('jin-ji') }, { id: 3, label: this.$t('zhong-yao') }, { id: 4, label: this.$t('zhong-yao-qie-jin-ji') }],
            //1-一般,2-紧急,3-重要,4-重要且紧急
            levelTxt: [this.$t('all'), this.$t('yi-ban'), this.$t('jin-ji'), this.$t('zhong-yao'), this.$t('zhong-yao-qie-jin-ji')],
            //1-进行中,2-已完成,3-已撤销
            statusTxt: [this.$t('all'), this.$t('ongoing'), this.$t('state.completed'), this.$t('state.undone')],
            addFolderDialog: false,
            upLoading: false,
            user: JSON.parse(sessionStorage.getItem("user")),
            addLoading: false,
            curProjectId: null,
            title: "",
            sumListRadio: this.$t('taskNum'),
            departmentOption: [], // 部门
            departmentOptionValue: '',
            echartsHeight: 500,
            departmentOptionLoading: false,
            dataPagingPage: 1,
            dataPagingSize: 10,
            dataPagingTotal: 0,
            dataPagingData: [],
        };
    },
    methods: {
        handleSizeChange(val) {
            this.dataPagingPage = 1
            this.dataPagingSize = val
            this.setTaskTimeCompare()
        },
        handleCurrentChange(val) {
            this.dataPagingPage = val
            this.setTaskTimeCompare()
        },
        setTaskTimeCompare() {
            this.departmentOptionLoading = true
            let newList = this.dataPagingData
            let list = newList.slice((this.dataPagingPage - 1) * this.dataPagingSize, this.dataPagingPage * this.dataPagingSize)
            this.taskTimeComparePublic(list)
        },
        taskTimeComparePublic(list) {
            var _this = this;
            var xList1 = [], xList2 = []
            if(list.length > 10) {
                this.echartsHeight = list.length * 60
            } else {
                this.echartsHeight = 500
            }

            var xList1 = [], xList2 = []
            if(list.length > 10) {
                this.echartsHeight = list.length * 60
            } else {
                this.echartsHeight = 500
            }
            
            setTimeout(() => {
                var taskNames = [];
                for (var i in list) {
                    xList1.push({
                        "value": list[i].workHours,
                        "id": list[i].id,
                        "fullName": list[i].name,
                    });
                    xList2.push({
                        "value": list[i].planHours,
                        "id": list[i].id,
                        "fullName": list[i].name,
                    });
                    console.log(list[i], list[i].name)
                    taskNames.push(list[i].name.length > 12 ? list[i].name.substring(0, 12) + '..' : list[i].name);
                }
                var myChart = echarts.init(document.getElementById("taskTimeComparePanel"));
                _this.compareChart = myChart;
                var option = {
                    // 全局调色盘。
                    color: ["#409EFF", "#71C671"],
                    title: {
                        show: list.length == 0,
                        textStyle: {
                            color: "#666666",
                            fontSize: 18,
                            fontWeight: 'normal',
                        },
                        text: list.length == 0 ? this.$t('nodata') : this.$t('gong-shi-dui-bi'),
                        left: "center",
                        top: "center"
                    },
                    toolbox: {
                        right: 25,
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: true
                            },
                            restore: {
                                show: true
                            },
                            magicType: {
                                type: ['line', 'bar']
                            },
                        }
                    },
                    legend: {
                        data: [this.$t('shi-ji-gong-shi'), this.$t('plantime')]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 1],
                        axisLabel: {
                            formatter: '{value} ' + this.$t('time.hour')
                        }
                    },
                    yAxis: [{
                        type: 'category',
                        data: taskNames
                    }],
                    series: [{
                        name: this.$t('shi-ji-gong-shi'),
                        type: 'bar',
                        data: xList1
                    },
                    {
                        name: this.$t('plantime'),
                        type: 'bar',
                        data: xList2
                    }]
                };
                
                myChart.setOption(option, { notMerge: true });
                this.$nextTick(() => {
                    myChart.resize(); // 在DOM更新后，调用resize方法更新图表大小
                });
                this.departmentOptionLoading = false
            }, 1000);
        },
        vueCasader(obj) {
            if(obj.distinction == '1') {
                if(obj.id != '') {
                    let arr = []
                    arr.push(obj.id)
                    this.departmentOptionValue = arr
                    this.getTaskTimeCompare()
                } else {
                    this.departmentOptionValue = []
                    this.getTaskTimeCompare()
                }
            }
        },
        getDepartment() {
            this.http.post( this.port.manage.depList, {},
            res => {
                if (res.code == "ok") {
                    var list1 = JSON.parse(JSON.stringify(res.data));
                    
                    this.departmentOption = this.changeArr(list1);
                    console.log(this.departmentOption, '部门')
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            },
            error => {
                this.$message({
                    message: error,
                    type: "error"
                });
            });
        },
        // 修改数组
        changeArr(arr) {
            for (var i = 0; i < arr.length; i++) {
                if(arr[i].id != -1 && arr[i].id != 0) {
                    if (arr[i].children != null && arr[i].children.length>0) {
                        arr[i].children = this.changeArr(arr[i].children);
                    }
                    arr[i].id && (arr[i].value = arr[i].id);
                    delete arr[i].id;
                }
            }
            for(var i in arr) {
                if(arr[i].id == -1 || arr[i].id == 0) {
                    arr.splice(i,1)
                }    
            }
            return arr;
        },
        sumRadioChange() {
            this.getExecutorPanel()
        },

        exportTaskCompare() {
            let _this = this;
            this.http.post('/task/exportTaskTimeCompare', { projectId: this.curProjectId },
                res => {
                    if (res.code == "ok") {
                        location.href = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                }
            );
        },
        getTaskTimeCompare() {
            let _this = this;
            let obj = { projectId: this.curProjectId }
            if (this.departmentOptionValue) {
                obj.deptId = this.departmentOptionValue[this.departmentOptionValue.length - 1]
            }
            this.departmentOptionLoading = true
            this.http.post('/task/getTaskTimeCompare', { ...obj },
                res => {
                    if (res.code == "ok") {
                        let newList = res.data.reverse()
                        this.dataPagingData = newList
                        this.dataPagingTotal = newList.length

                        let list = newList.slice((this.dataPagingPage - 1) * this.dataPagingSize, this.dataPagingPage * this.dataPagingSize)
                        
                        this.taskTimeComparePublic(list)
                    } else {
                        this.departmentOptionLoading = false
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.departmentOptionLoading = false
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        getTopCostTask() {
            let _this = this;
            this.http.post('/task/getTopCostTask', { projectId: this.curProjectId },
                res => {
                    if (res.code == "ok") {
                        var xList = [], yList = [], list = res.data;
                        for (var i in list) {
                            xList.push(list[i].name.length > 6 ? list[i].name.substring(0, 6) + '..' : list[i].name);
                            yList.push({
                                "value": list[i].value,
                                "id": list[i].id,
                                "fullName": list[i].name,
                            });
                        }
                        var myChart = echarts.init(document.getElementById("costPanel"));
                        _this.costChart = myChart;
                        var option = {
                            title: {
                                show: list.length == 0,
                                textStyle: {
                                    color: "#666666",
                                    fontSize: 18,
                                    fontWeight: 'normal',
                                },
                                text: list.length == 0 ? _this.$t('nodata') : _this.$t('themosttime'),
                                left: "center",
                                top: "center"
                            },
                            toolbox: {
                                right: 25,
                                show: true,
                                feature: {
                                    saveAsImage: {
                                        show: true
                                    },
                                    restore: {
                                        show: true
                                    },
                                    magicType: {
                                        type: ['line', 'bar']
                                    },
                                }
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params, ticket, callback) {
                                    var res = params[0].data.fullName + "" + " : " + params[0].data.value
                                        + _this.$t('time.hour');
                                    _this.params = params;
                                    return res;
                                }
                            },
                            xAxis: {
                                data: xList,
                                axisLabel: {
                                    interval: 0, rotate: 20
                                }
                            },
                            yAxis: [{
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}' + _this.$t('time.hour')
                                }
                            }],
                            series: [{
                                name: _this.$t('hao-shi-xiao-shi'),
                                type: 'bar',
                                barMaxWidth: 30,
                                data: yList,
                            }]
                        };
                        myChart.setOption(option, { notMerge: true });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        getStagesPanel() {
            let _this = this;
            this.http.post('/task/getStagesPanel', { projectId: this.curProjectId },
                res => {
                    if (res.code == "ok") {
                        var list = res.data;
                        var myChart = echarts.init(document.getElementById("stagesPanel"));
                        _this.stagesChart = myChart;
                        myChart.setOption({
                            title: {
                                show: list.length == 0,
                                textStyle: {
                                    color: "#666666",
                                    fontSize: 18,
                                    fontWeight: 'normal',
                                },
                                text: list.length == 0 ? _this.$t('nodata') : _this.$t('taskListStatistics'),
                                left: "center",
                                top: "center"
                            },
                            toolbox: {
                                right: 25,
                                show: true,
                                feature: {
                                    saveAsImage: {
                                        show: true
                                    },
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{b}<br/>" + _this.$t('ren-wu-shu') + ":{c} ({d}%)",
                            },
                            series: [
                                {
                                    name: _this.$t('tasklist'),
                                    type: 'pie',
                                    radius: '55%',
                                    data: list
                                }
                            ]
                        }, { notMerge: true })
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        getExecutorPanel() {
            let _this = this;
            let url
            if (this.sumListRadio == this.$t('plantime')) {
                url = '/task/getExecutorPlanHour'
            } else {
                url = '/task/getExecutorPanel'
            }
            this.http.post(url, { projectId: this.curProjectId },
                res => {
                    if (res.code == "ok") {
                        if (this.user.userNameNeedTranslate != 1) {
                            this.pulledOut(res.data)
                        } else {
                            let arrList = []
                            let textList = [] // 是否有待认领的文字
                            for (var i in res.data) {
                                let obj = {}
                                obj.type = res.data[i].type
                                obj.id = res.data[i].executorName
                                arrList.push(obj)
                            }
                            this.dealWithTranslation(arrList, res.data)
                        }
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },

        dealWithTranslation(items, dataArr) {
            console.log('过来的值')
            console.log(items, dataArr)
            if (WWOpenData.initCanvas) {
                WWOpenData.initCanvas()
            }
            const myFunOne = async () => {
                const result = await new Promise((resolve, reject) => {
                    if (WWOpenData.prefetch) {
                        WWOpenData.prefetch({ items }, (err, data) => {
                            if (err) { return reject(err) }
                            resolve(data)
                        })
                    }

                })
                console.log(result, '出来的值')
                for (let i in dataArr) {
                    dataArr[i].executorName = result.items[i].data
                }
                console.log('将要传过去的值', dataArr)
                this.pulledOut(dataArr)
            }

            myFunOne()
        },
        // 单独抽离出来
        pulledOut(dataList) {
            console.log(dataList, '过来的值')
            // var xList = [], yList = [], list = res.data;
            var _this = this;
            var xList = [], yList = [], list = dataList;
            for (var i in list) {
                xList.push(list[i].executorName);
                yList.push({
                    "value": _this.sumListRadio == _this.$t('plantime') ? list[i].taskHours : list[i].taskCount,
                    "id": list[i].executorId
                });
            }
            var myChart = echarts.init(document.getElementById("executorPanel"));
            _this.executorChart = myChart;
            var option = {
                color: ["#409EFF", "#71C671"],
                title: {
                    show: list.length == 0,
                    textStyle: {
                        color: "#666666",
                        fontSize: 18,
                        fontWeight: 'normal',
                    },
                    text: list.length == 0 ? _this.$t('nodata') : _this.$t('zhi-hang-ren-fen-pei-tu'),
                    left: "center",
                    top: "center"
                },
                toolbox: {
                    right: 25,
                    show: true,
                    feature: {
                        saveAsImage: {
                            // show: false
                            show: this.user.userNameNeedTranslate == 1 ? false : true
                        },
                        restore: {
                            show: true
                        },
                        magicType: {
                            type: ['line', 'bar']
                        },
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params, ticket, callback) {
                        let res = ''
                        if(_this.user.userNameNeedTranslate == 1) {
                            res = params[0].data.value
                                + (_this.sumListRadio == _this.$t('plantime') ? _this.$t('time.hour') : _this.$t('ge'));
                            _this.params = params;
                        } else {
                            res = params[0].name + "" + " : " + params[0].data.value
                                + (_this.sumListRadio == _this.$t('plantime') ? _this.$t('time.hour') : _this.$t('ge'));
                            _this.params = params;
                        }
                        return res
                        // var res = params[0].name + "" + " : " + params[0].data.value
                        //     + (_this.sumListRadio == _this.$t('plantime') ? _this.$t('time.hour') : _this.$t('ge'));
                        // _this.params = params;
                        // return res;
                    }
                },
                xAxis: {
                    data: xList,
                    axisLabel: {
                        interval: 0, rotate: 20
                    }
                },
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                }],
                series: [{
                    name: _this.sumListRadio == _this.$t('plantime') ? _this.$t('xiaoshijihua') : _this.$t('rwushuliang'),
                    type: 'bar',
                    barMaxWidth: 30,
                    data: yList,
                }]
            };
            myChart.setOption(option, { notMerge: true });
        },
        getProjectTaskSum() {
            this.http.post('/project/taskSum', {
                id: this.curProjectId
            },
                res => {
                    if (res.code == "ok") {
                        this.taskSum = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        refreshPage() {
            this.curProjectId = parseInt(this.$route.params.id);
            this.getProjectTaskSum();
            this.getExecutorPanel();
            this.getTopCostTask();
            this.getStagesPanel();
            this.getTaskTimeCompare();
        }
    },
    created() {
        let height = window.innerHeight;
        this.tableHeight = height - 160;
        const that = this;
        window.onresize = function temp() {
            that.tableHeight = window.innerHeight - 160;
        };
    },
    mounted() {
        this.curProjectId = parseInt(this.$route.params.id);
        var _this = this;
        window.addEventListener("resize", function () {
            if (_this.executorChart != null) {
                _this.executorChart.resize();
            }
            if (_this.stagesChart != null) {
                _this.stagesChart.resize();
            }
            if (_this.costChart != null) {
                _this.costChart.resize();
            }
            if (_this.compareChart != null) {
                _this.compareChart.resize();
            }
        });
        this.getProjectTaskSum();
        this.getExecutorPanel();
        this.getStagesPanel();
        this.getTopCostTask();
        this.getTaskTimeCompare();
        this.getDepartment()
    }
};
</script>