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;">
            <el-date-picker
            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-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-group>
        </el-col>
        <div id="container" :style="'height:'+containerHeight+'px;'"></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="日期范围">
                    <el-date-picker
                        v-model="exportParam.dateRange" :editable="false" 
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                        :clearable="true" 
                        range-separator="至"
                        type="daterange" 
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    ></el-date-picker>
                </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:[]},
                exportDialog:false,
                dateRange:[],
                user: JSON.parse(sessionStorage.getItem("user")),
                radio: sessionStorage.radio!=null?sessionStorage.radio:'项目',
                containerHeight: 0,    
                myChart: null,
                params: null,
            };
        },
        methods: {
            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;
                }

                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.dateRange[0], endDate: this.dateRange[1]
                },
                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"
                    });
                });
            },
            getEchart(){
                sessionStorage.radio = this.radio;
                var _this = this;
                var param = {};
                if (this.dateRange != null) {
                    param = {startDate:this.dateRange[0], endDate: this.dateRange[1]};
                }
                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;
                }
                this.http.post(url, param,
                res => {
                    if (res.code == "ok") {
                        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,
                                    "id": list[i].id,
                                    "cost": list[i].cost
                                });
                            } else {
                                xList.push(list[i].departmentName);
                                yList.push({
                                    "value": list[i].costMoney,
                                    "id": list[i].departmentId,
                                    "cost": list[i].costTime
                                });
                            }
                        }
                        
                        var myChart = echarts.init(document.getElementById("container"));
                        _this.myChart = myChart;
                        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) {
                                        _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);
                                    }
                                } 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.$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;
            
            this.getEchart();
            var _this = this;
            window.addEventListener("resize", function() {
                _this.myChart.resize();
            });

            this.getMyProjectList();
        }
    };
</script>

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

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