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"
                type="monthrange"
                align="right"
                unlink-panels
                :clearable="false" 
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                :picker-options="pickerOptions"
                value-format="yyyy-MM"
                @change="getEchart">
            </el-date-picker> -->
            <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">
                <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="exportProjectData()">导出数据</el-button></div>
    </section>
</template>

<script>
    import util from "../../common/js/util";
    export default {
        data() {
            return {
                dateRange:[],
                user: JSON.parse(sessionStorage.getItem("user")),
                radio: sessionStorage.radio!=null?sessionStorage.radio:'项目',
                containerHeight: 0,    
                myChart: null,
                params: null,
            };
        },
        methods: {
            exportProjectData() {
                 var param = {};
                if (this.dateRange != null) {
                    param = {startDate:this.dateRange[0], endDate: this.dateRange[1]};
                }
                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]};
                }
                this.http.post(this.radio=='项目'?this.port.project.listCost:this.port.project.depCost, param,
                res => {
                    if (res.code == "ok") {
                        var xList = [], yList = [], list = res.data.costList, 
                        totalMoneyCost = (this.radio=='项目'?res.data.totalMoneyCost:res.data.totalCostMoney);
                        for(var i in list) {
                            if(this.radio=='项目') {
                                xList.push(list[i].project);
                                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.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.getEchart();
            var _this = this;
            window.addEventListener("resize", function() {
                _this.myChart.resize();
            });
        }
    };
</script>

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

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