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="选择项目">
                    <el-select v-model="exportParam.projectId" placeholder="全部项目"  clearable style="width:350px;">
                        <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="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 {
                projectList:[],
                exportParam:{projectId:null,datRange:[]},
                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;
            },
            //获取我的项目列表
            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.dateRange[0], endDate: this.dateRange[1]};
                }
                if (this.exportParam.projectId != null) {
                    param.projectId = this.exportParam.projectId;
                }

                this.http.post("/project/exportTimeCost", param,
                    res => {
                        this.listLoading = false;
                        if (res.code == "ok") {
                            var aTag = document.createElement('a');
                            aTag.download = "项目工时成本统计.xls";
                            aTag.href = res.data;
                            aTag.click();
                        } 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;
                console.log(this.dateRange);
                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=='人员') {
                    url = '/project/getAllMembCost';
                }
                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);
                        // myChart.on('click', function(params) {
                        //     if(_this.radio=='项目') {
                        //         _this.$router.push("/cost/" + params.data.id + "/" + params.name);
                        //     } else {
                        //         _this.$router.push("/costDep/" + params.data.id + "/" + params.name);
                        //     }
                        // });
                        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>