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

<template>
    <section>
        <el-col :span="24" style="padding-bottom: 0px;text-align:center;margin-top:10px;position: fixed;top: 60px;left: 160px;z-index: 999;">
            <el-date-picker v-show="user.timeType.fixMonthcost==0"
            v-model="dateRange" :editable="false" 
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
            @change="getEchart" 
            :clearable="true" 
            range-separator="至"
            type="daterange" 
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            ></el-date-picker>

            <el-date-picker v-show="user.timeType.fixMonthcost==1"
            v-model="dateRange" :editable="false" 
            format="yyyy-MM" value-format="yyyy-MM" 
            @change="getEchart" 
            :clearable="false" 
            type="month" 
            ></el-date-picker>

            <el-radio-group v-model="radio" @change="getEchart" style="margin-left:10px;">
                <el-radio-button label="项目"></el-radio-button>
                <el-radio-button label="部门"></el-radio-button>
                <el-radio-button label="人员"></el-radio-button>
                <el-radio-button :label="namess" v-if="jichu.customDegreeActive == 1"></el-radio-button>
            </el-radio-group>
        </el-col>
        <!-- <div :style="'width:'+widthHtval+'rem;position: relative;'"> -->
        <div :style="'width:'+widthHtval+'px;position: relative; height:'+containerHeight+'px;'">
             <div id="container" :style="'height:'+containerHeight+'px;width:100%'"></div>
        </div>
        <div style="position:fixed;top:120px;right:150px;"><el-button @click="showExportDialog">报表导出</el-button></div>

        <!--导出报表条件选择 -->
        <el-dialog title="工时报表导出" v-if="exportDialog" :visible.sync="exportDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <el-form ref="form3" :model="exportParam" >
                <el-form-item prop="projectId" label="选择项目" v-if="radio != '人员'">
                    <el-select v-model="exportParam.projectId" placeholder="全部项目"  clearable style="width:350px;" filterable="true">
                        <el-option v-for="item in projectList"  :key="item.id" :label="item.projectName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="userIds" label="选择人员" v-if="radio == '人员'">
                    <el-select v-model="exportParam.userIds" placeholder="全部人员" multiple="true"  clearable style="width:350px;" filterable="true">
                        <el-option v-for="item in hasReportUserList"  :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="projectId" :label="user.timeType.fixMonthcost==0?'日期范围':'选择月份'">
                    <el-date-picker v-show="user.timeType.fixMonthcost==0"
                        v-model="exportParam.dateRange" :editable="false" 
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                        :clearable="false" 
                        range-separator="至"
                        type="daterange" 
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>

                    
                    <el-date-picker v-show="user.timeType.fixMonthcost==1"
                    v-model="dateRange" :editable="false" 
                    format="yyyy-MM" value-format="yyyy-MM" 
                    @change="getEchart" 
                    :clearable="true" 
                    type="month" 
                    ></el-date-picker>
                </el-form-item>
                
                <el-form-item label="选择人员">
                    <el-select v-model="exportParam.userId"  placeholder="请选择人员" style="width: 350px" filterable="true">
                        <span v-for="(item, index) in users" :key="index">
                        <el-option :label="item.name" :value="item.id"></el-option>
                        </span> 
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportProjectData" style="width:100%;" >导出</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                hasReportUserList:[],
                projectList:[],
                exportParam:{projectId:null,dateRange:[],userId: ''},
                exportDialog:false,
                dateRange:[],
                user: JSON.parse(sessionStorage.getItem("user")),
                radio: sessionStorage.radio!=null?sessionStorage.radio:'项目',
                containerHeight: 0,    
                myChart: null,
                params: null,
                widthHtval: 1800,
                users: [],
                jichu: [],
                namess: ''
            };
        },
        methods: {
            jutishez() {
                this.http.post('/time-type/getCompanyTimeSetting', {
                    companyId: this.user.companyId,
                },
                res => {
                    if (res.code == "ok") {
                        this.jichu = res.data
                        if(res.data.customDegreeActive == 1) {
                            this.namess = res.data.customDegreeName
                        }
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            getUsers() {
                console.log(this.port.manage.list)
                this.http.post(this.port.manage.list, {
                        departmentId: -1,
                        pageIndex: 1,
                        pageSize: 99999
                    },
                    res => {
                        if (res.code == "ok") {
                            this.users = res.data.records;
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                },
            
            showExportDialog() {
                this.exportDialog = true;
                this.exportParam.dateRange = this.dateRange;
                if (this.radio == '人员') {
                    // this.exportParam.userIds = [];
                }
            },
            //获取我的项目列表
            getMyProjectList() {
                this.http.post('/project/getProjectList', {
                },
                res => {
                    if (res.code == "ok") {
                        this.projectList = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            exportProjectData() {
                 var param = {};
                 if (this.exportParam.dateRange != null) {
                    param = {startDate:this.exportParam.dateRange[0], endDate: this.exportParam.dateRange[1]};
                 }
                 var url = "/project/exportTimeCost";
                 var fileName = '项目工时成本统计.xls';
                 if (this.radio == '人员' ) {
                     console.log(this.exportParam.userIds);
                     fileName = '人员工时成本统计.xls';
                     url = '/department/exportUserStatistic';
                     if (this.exportParam.userIds != null && this.exportParam.userIds.length > 0) {
                         var ids = '';
                        this.exportParam.userIds.forEach(u=>{
                            ids += u+',';
                        })
                        param.userIds = ids;
                     }
                 } 
                
                if (this.exportParam.projectId != null) {
                    param.projectId = this.exportParam.projectId;
                }
                if (this.exportParam.userId != null) {
                    param.userId = this.exportParam.userId;
                }
                this.http.post(url, param,
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            this.exportDialog = false;
                            var aTag = document.createElement('a');
                            aTag.download = fileName;
                            aTag.href = res.data;
                            aTag.click();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            });
                        }
                    },
                    error => {
                        this.listLoading = false;
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
            },
            //获取人员成本统计列表
            getUserCostList() {
                this.listLoading = true;
                this.http.post(this.port.project.userCost, {
                    startDate:this.user.timeType.fixMonthcost==0?this.dateRange[0]:this.dateRange, 
                    endDate: this.user.timeType.fixMonthcost==0?this.dateRange[1]:this.dateRange
                },
                res => {
                    this.listLoading = false;
                    var _this = this;
                    this.hasReportUserList = [];
                    if (res.code == "ok") {
                        //工时总成本
                        this.hasReportUserList = res.data.userList;
                        var xList = [] , yList = [] , list = res.data.list, array = [] , series = [];
                        var totalMoneyCost = res.data.totalCostMoney;
                        if (list.length > 0) {
                            var num = list.length==0?0:list[0].project.length;
                            for(var i in list) {
                                xList.push(list[i].name);
                                var pro = list[i].project;
                                for(var j in pro) {
                                    if(array.indexOf(pro[j].project) == -1) {
                                        array.push(pro[j].project)
                                    }
                                }
                            }

                            for(var i in array) {
                                yList.push(array[i]);
                                var dataList = [];
                                for(var j in list) {
                                    var project = list[j].project , num = 0;
                                    if(project.length != 0) {
                                        for(var k in project) {
                                            if(project[k].project == array[i]) {
                                                dataList.push({
                                                    "value": project[k].money,
                                                    "cost": project[k].time,
                                                })
                                            } else {
                                                num++;
                                            }
                                            if(k == project.length-1 && num != project.length-1) {
                                                dataList.push({
                                                    "value": 0,
                                                    "cost": 0,
                                                })
                                            }
                                        }
                                    } else {
                                        dataList.push({
                                            "value": 0,
                                            "cost": 0,
                                        })
                                    }
                                }
                                series.push({
                                    name: array[i],
                                    type: 'bar',
                                    stack:'1',
                                    barMaxWidth: 30,
                                    data: dataList,
                                })
                            }
                        } 
                            
                            
                            var myChart = echarts.init(document.getElementById("container"));
                            _this.myChart = myChart;
                            var option = {
                                //总成本
                                title: {
                                    text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元',
                                    left:'left',
                                },
                                
                                // 工具箱
                                legend: {
                                    x: 80,
                                    y: 10,
                                    data: yList,
                                    show: true,
                        　　　　　　 top:"5%",//与上方的距离 可百分比% 可像素px
                                },
                                grid : {
                                    top : 80,    //距离容器上边界40像素
                                    bottom: 35   //距离容器下边界30像素
                                },
                                toolbox: {
                                    show: true,
                                    feature:{
                                        saveAsImage:{
                                            show:true
                                        },
                                        restore:{
                                            show:true
                                        },
                                        // dataView:{
                                        //     show:true
                                        // },
                                        // dataZoom:{
                                        //     show:true
                                        // },
                                        magicType:{
                                            type:['line','bar']
                                        }
                                    }
                                },
                                tooltip:{
                                    trigger:'axis',
                                    formatter: function (params,ticket,callback) {
                                        var totalTime = 0;
                                        var totalCost = 0;
                                        var res = "";
                                        for(var i in params) {
                                            if (params[i].data.value > 0) {
                                                res += "<div style='margin-top:3px;font-size:12px;'><font color='#ddd'>项目名称：" + params[i].seriesName 
                                                    + "</font><br/>工作成本 : " + params[i].data.value
                                                    + "元 <br/>工作时长"+" : " + params[i].data.cost + "小时</br></div>";
                                                totalTime += Number(params[i].data.cost);
                                                totalCost += Number(params[i].data.value);
                                            }
                                        }
                                        res = res +'<br/>'+ params[0].name+ '<br/>总计: ' + totalTime.toFixed(1)+'小时 '+totalCost.toFixed(2) + "元<br/>";
                                        return res;
                                    }
                                },
                                xAxis: {
                                    data: xList,
                                    axisLabel: {
                                        interval:0,rotate:20
                                    }
                                },
                                yAxis: [{
                                    type : 'value',
                                    axisLabel: {
                                        formatter:'{value} (元)'
                                    }
                                }],
                                series: series,
                            };
                            myChart.setOption(option,{notMerge:true});
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            yanjiu() {
                console.log('触发')
            },
            getEchart(){
                console.log(this.radio, this.namess)
                sessionStorage.radio = this.radio;
                var _this = this;
                var param = {};
                if (this.dateRange != null) {
                    param = {startDate:this.user.timeType.fixMonthcost==0?this.dateRange[0]:this.dateRange, 
                    endDate: this.user.timeType.fixMonthcost==0?this.dateRange[1]:this.dateRange};
                    console.log(param);
                }
                var url = '';
                if (this.radio=='项目') {
                    url = this.port.project.listCost;
                } else if (this.radio=='部门') {
                    url = this.port.project.depCost;
                } else if (this.radio=='人员') {
                    this.getUserCostList();
                    return;
                } else if (this.radio == this.namess) {
                    url = '/project/getDegreeCost'
                }
                this.http.post(url, param,
                res => {
                    if (res.code == "ok") {
                        // 测试写的
                            // var shujuy = res.data.costList
                            // var arrsa = []
                            // for(var i=0; i<30; i++) {
                            //     arrsa.push(shujuy[0])
                            // }
                            // console.log(arrsa)
                            // res.data.costList = arrsa
                            for(var i in res.data.costList) {
                                if(i>20) {
                                    // this.widthHtval = +this.widthHtval + 2
                                    this.widthHtval = +this.widthHtval + 40
                                } else {
                                    this.widthHtval = 1800
                                }
                            }
                            
                        // 测试写的
                        var xList = []
                        var yList = []
                        var list
                        if(this.radio == '项目' || this.radio == '人员' || this.radio=='部门') {
                            list = res.data.costList
                            var totalMoneyCost = ((this.radio=='项目' || this.radio=='人员')?res.data.totalMoneyCost:res.data.totalCostMoney);
                            for(var i in list) {
                                if(this.radio=='项目' || this.radio == '人员') {
                                    xList.push(this.radio=='项目'?list[i].project:list[i].name);
                                    yList.push({
                                        "value": list[i].costMoney.toFixed(2),
                                        "id": list[i].id || i,
                                        "cost": list[i].cost
                                    });
                                } else {
                                    xList.push(list[i].departmentName);
                                    yList.push({
                                        "value": list[i].costMoney.toFixed(2),
                                        "id": list[i].departmentId,
                                        "cost": list[i].costTime
                                    });
                                }
                            }
                        } else {
                            list = res.data
                            var totalMoneyCost = 1
                            for(var i in list) {
                                console.log(list[i].name, list[i].costMoney, list[i].cost)
                                xList.push(list[i].name);
                                yList.push({
                                    "value": list[i].costMoney.toFixed(2),
                                    "id": list[i].id || i,
                                    "cost": list[i].cost
                                });
                            }
                        }
                        // var xList = [], yList = [], list = res.data.costList, 
                        // totalMoneyCost = ((this.radio=='项目' || this.radio=='人员')?res.data.totalMoneyCost:res.data.totalCostMoney);
                        // for(var i in list) {
                        //     if(this.radio=='项目' || this.radio == '人员') {
                        //         xList.push(this.radio=='项目'?list[i].project:list[i].name);
                        //         yList.push({
                        //             "value": list[i].costMoney.toFixed(2),
                        //             "id": list[i].id || i,
                        //             "cost": list[i].cost
                        //         });
                        //     } 
                        //     // else if(this.radio=='研究'){
                        //     //     xList.push(list[i].name)
                        //     //     yList.push({
                        //     //         "value": list[i].costMoney.toFixed(2),
                        //     //         // "id": list[i].id,
                        //     //         "id": i,
                        //     //         "cost": list[i].cost
                        //     //     })
                        //     // } 
                        //     else {
                        //         xList.push(list[i].departmentName);
                        //         yList.push({
                        //             "value": list[i].costMoney.toFixed(2),
                        //             "id": list[i].departmentId,
                        //             "cost": list[i].costTime
                        //         });
                        //     }
                        // }
                        
                        var myChart = echarts.init(document.getElementById("container"));
                        myChart.resize({
                            width: this.widthHtval
                        })
                        _this.myChart = myChart;
                        if(this.radio == '项目' || this.radio == '人员' || this.radio=='部门') {
                            var option = {
                                title: {
                                    text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元',
                                    left:'left',
                                },
                                // 工具箱
                                toolbox: {
                                    show: true,
                                    feature:{
                                    
                                        saveAsImage:{
                                            show:true
                                        },
                                        restore:{
                                            show:true
                                        },
                                        // dataView:{
                                        //     show:true
                                        // },
                                        // dataZoom:{
                                        //     show:true
                                        // },
                                        magicType:{
                                            type:['line','bar']
                                        },
                                        
                                    }
                                },
                                tooltip:{
                                    trigger:'axis',
                                    formatter: function (params,ticket,callback) {
                                        var res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value 
                                        + "元 <br/>工作时长"+" : " + params[0].data.cost + "小时";
                                        _this.params = params;
                                        return res;
                                    }
                                },
                                xAxis: {
                                    data: xList,
                                    axisLabel: {
                                        interval:0,rotate:20
                                    }
                                },
                                yAxis: [{
                                    type : 'value',
                                    axisLabel: {
                                        formatter:'{value} (元)'
                                    }
                                }],
                                series: [{
                                    name: '工作成本（元）',
                                    type: 'bar',
                                    barMaxWidth: 30,
                                    data: yList,
                                }]
                            };
                        } else {
                            var option = {
                                title: {
                                    text: '',
                                    left:'left',
                                },
                                // 工具箱
                                toolbox: {
                                    show: true,
                                    feature:{
                                    
                                        saveAsImage:{
                                            show:true
                                        },
                                        restore:{
                                            show:true
                                        },
                                        // dataView:{
                                        //     show:true
                                        // },
                                        // dataZoom:{
                                        //     show:true
                                        // },
                                        magicType:{
                                            type:['line','bar']
                                        },
                                        
                                    }
                                },
                                tooltip:{
                                    trigger:'axis',
                                    formatter: function (params,ticket,callback) {
                                        var res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value 
                                        + "元 <br/>工作时长"+" : " + params[0].data.cost + "小时";
                                        _this.params = params;
                                        return res;
                                    }
                                },
                                xAxis: {
                                    data: xList,
                                    axisLabel: {
                                        interval:0,rotate:20
                                    }
                                },
                                yAxis: [{
                                    type : 'value',
                                    axisLabel: {
                                        formatter:'{value} (元)'
                                    }
                                }],
                                series: [{
                                    name: '工作成本（元）',
                                    type: 'bar',
                                    barMaxWidth: 30,
                                    data: yList,
                                }]
                            };
                        }
                        // var option = {
                        //     title: {
                        //         text: '工时成本总计' + totalMoneyCost.toFixed(2) + '元',
                        //         left:'left',
                        //     },
                        //     // 工具箱
                        //     toolbox: {
                        //         show: true,
                        //         feature:{
                                   
                        //             saveAsImage:{
                        //                 show:true
                        //             },
                        //             restore:{
                        //                 show:true
                        //             },
                        //             // dataView:{
                        //             //     show:true
                        //             // },
                        //             // dataZoom:{
                        //             //     show:true
                        //             // },
                        //             magicType:{
                        //                 type:['line','bar']
                        //             },
                                     
                        //         }
                        //     },
                        //     tooltip:{
                        //         trigger:'axis',
                        //         formatter: function (params,ticket,callback) {
                        //             var res = params[0].name + "<br/>工作成本"+" : " + params[0].data.value 
                        //             + "元 <br/>工作时长"+" : " + params[0].data.cost + "小时";
                        //             _this.params = params;
                        //             return res;
                        //         }
                        //     },
                        //     xAxis: {
                        //         data: xList,
                        //         axisLabel: {
                        //             interval:0,rotate:20
                        //         }
                        //     },
                        //     yAxis: [{
                        //         type : 'value',
                        //         axisLabel: {
                        //             formatter:'{value} (元)'
                        //         }
                        //     }],
                        //     series: [{
                        //         name: '工作成本（元）',
                        //         type: 'bar',
                        //         barMaxWidth: 30,
                        //         data: yList,
                        //     }]
                        // };
                        myChart.setOption(option,{notMerge: true});
                        myChart.getZr().on('click', params => {
                            const pointInPixel = [params.offsetX, params.offsetY];
                            if (myChart.containPixel('grid', pointInPixel)) {
                                console.log(_this.params)
                                if(_this.radio=='项目') {
                                    if (_this.dateRange != null) {
                                        if (this.user.timeType.fixMonthcost == 0) {
                                            _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name
                                            +"?startDate="+_this.dateRange[0]+"&endDate="+_this.dateRange[1]);
                                        } else {
                                            _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name
                                            +"?startDate="+_this.dateRange+"&endDate="+_this.dateRange);
                                        }
                                    } else {
                                        _this.$router.push("/cost/" + _this.params[0].data.id + "/" + _this.params[0].name);
                                    }
                                } else if (_this.radio=='部门') {
                                    if (_this.dateRange != null) {
                                        _this.$router.push("/costDep/" + _this.params[0].data.id + "/" + _this.params[0].name
                                            +"?startDate="+_this.dateRange[0]+"&endDate="+_this.dateRange[1]);
                                    } else {
                                        _this.$router.push("/costDep/" + _this.params[0].data.id + "/" + _this.params[0].name);
                                    }
                                    
                                }
                            }
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
        },
        created() {
        },
        mounted() {
            this.containerHeight = window.innerHeight - 140
            const that = this;
            window.onresize = function temp() {
                this.containerHeight = window.innerHeight - 100
            };
            if (this.user.timeType.fixMonthcost == 0) {
                if (this.$route.query.startDate != null) {
                    this.dateRange = [this.$route.query.startDate, this.$route.query.endDate];
                } else {
                    //默认查看本月
                    var now = new Date();
                    var t = util.formatDate.format(now, 'yyyy-MM-dd');
                    var startStr = util.formatDate.format(new Date(), 'yyyy-MM') + "-01";
                    this.dateRange = [startStr,t];
                }
                this.exportParam.dateRange = this.dateRange;
            } else if (this.user.timeType.fixMonthcost == 1) {
                if (this.$route.query.startDate != null) {
                    this.dateRange = this.$route.query.startDate;
                } else {
                    //默认查看本月
                    var startStr = util.formatDate.format(new Date(), 'yyyy-MM');
                    this.dateRange = startStr;
                }
                this.exportParam.dateRange = this.dateRange;
            }
            this.radio = '项目'
            this.getEchart();
            var _this = this;
            window.addEventListener("resize", function() {
                _this.myChart.resize();
            });

            this.getMyProjectList();
            this.getUsers()
            this.jutishez()
        },
    };
</script>

<style lang="scss" scoped>
    #container {
        // display: inline-block;
        display: block;
        position: absolute;
        // width: 100% !important; 
        margin-top: 60px;
    } 
</style>

<style lang="scss">
</style>