manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet-import/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="box" style="height:550px;">   
                        <div class="lableTxt">{{ $t('actualworkinghours') }} <el-link @click="exportTaskCompare" style="float:right;"><i class="iconfont firerock-iconexport"></i>{{ $t('export.export') }}</el-link></div>
                        <el-divider></el-divider>
                        <div id="taskTimeComparePanel" style="height:500px;width:1100px;"></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;
}
.info span {
    color:#303133;
}
.gray_label {
    color:#999 !important;
}

.el-row {
    margin-top:10px;
}
.lableTxt {
    color:#666;
}

</style>
<script>
    import util from "../../common/js/util";
    export default {
        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')
            };
        },
        methods: {
            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;
                this.http.post('/task/getTaskTimeCompare', {projectId: this.curProjectId},
                res => {
                    if (res.code == "ok") {
                        var xList1 = [], xList2 = [], list = res.data.reverse();
                        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,
                            });
                            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});
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    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) {
                            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();
        }
    };
</script>