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

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="text" @click="backToList" icon="el-icon-back" class="back">返回</el-button>
                </el-form-item>
                <el-form-item class="divLine"></el-form-item>
                <el-form-item>
                    <span class="workName">{{detailName}}</span>
                    <el-cascader v-model="departmentId" placeholder="请选择部门" style="width: 70%;margin-left:10px;" @change="getList"
                    :options="option" :props="{ checkStrictly: true }" :show-all-levels="false"></el-cascader>
                </el-form-item>
                <el-form-item style="float:right;">
                    <span style="font-size:18px;">部门成本：<span style="color:#20a0ff;">{{cost}}元</span></span>
                </el-form-item>
            </el-form>
        </el-col>

        <div id="container" :style="'height:' + tableHeight + 'px'"></div> 
    </section>
</template>

<script>
    import util from "../../common/js/util";

    export default {
        data() {
            return {
                detailId: this.$route.params.id,
                detailName: this.$route.params.name,

                user: JSON.parse(sessionStorage.getItem("user")),

                cost: 0,

                tableHeight: 0,
                
                echart: null,

                option: [],
                departmentId: [].concat(parseInt(this.$route.params.id)),
            };
        },
        methods: {
            //返回
            backToList() {
                this.$router.go(-1);
            },

            // 获取部门列表
            getDepartment() {
                this.http.post( this.port.manage.depList, {},
                res => {
                    if (res.code == "ok") {
                        var list = res.data , array = [];
                        for(var i in list) {
                            if(list[i].id == this.detailId) {
                                array.push(list[i])
                            }
                        }
                        this.option = this.changeArr(array);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },

            // 修改数组
            changeArr(arr) {
                for (var i = 0; i < arr.length; i++) {
                    if(arr[i].id != -1 && arr[i].id != 0) {
                        if (arr[i].children != null && arr[i].children.length>0) {
                            arr[i].children = this.changeArr(arr[i].children);
                        }
                        arr[i].id && (arr[i].value = arr[i].id);
                        delete arr[i].id;
                    }
                }
                for(var i in arr) {
                    if(arr[i].id == -1 || arr[i].id == 0) {
                        arr.splice(i,1)
                    }    
                }
                return arr;
            },

            //获取项目列表
            getList() {
                this.listLoading = true;
                this.http.post(this.port.project.userCost, {
                    departmentId: this.departmentId[this.departmentId.length-1],
                },
                res => {
                    this.listLoading = false;
                    var _this = this;
                    if (res.code == "ok") {
                        var xList = [] , yList = [] , list = res.data , array = [] , series = [];
                        this.cost = res.data.totalMoneyCost;
                        var num = 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].time,
                                                "cost": project[k].money,
                                            })
                                        } 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 = {
                            // 工具箱
                            legend: {
                                x: 80,
                                y: 10,
                                data: yList
                            },
                            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 res = params[0].name + "<br/>";
                                    for(var i in params) {
                                        res += "项目名称：" + params[i].seriesName 
                                        + "<br/>工作时长（h）" + params[i].data.value
                                        + "h <br/>工作成本（元）"+" : " + params[i].data.cost + "元</br></br>";
                                    }
                                    return res;
                                }
                            },
                            xAxis: {
                                data: xList,
                                axisLabel: {
                                    interval:0,rotate:20
                                }
                            },
                            yAxis: [{
                                type : 'value',
                                axisLabel: {
                                    formatter:'{value} (h)'
                                }
                            }],
                            series: series,
                        };
                        myChart.setOption(option);
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
        },
        created() {
            let height = window.innerHeight;
            this.tableHeight = height - 145;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 145;
            };
        },
        mounted() {
            this.getDepartment();
            this.getList();
            var _this = this;
            window.addEventListener("resize", function() {
                _this.myChart.resize();
            });
        }
    };
</script>

<style lang="scss" scoped>
    .toolbar {
        .el-form-item {
            font-size: 14px;
            vertical-align: middle;
        }
        .back {
            font-size: 16px;
            cursor: pointer;
        }
        .divLine {
            width: 2px;
            background: #c3c3c3;
            height: 100%;
        }
        .workName {
            color: #333;
            font-size: 18px;
        }
        .workHours {
            color: #20a0ff;
            font-size: 18px;
        }
    }

    #container {
        float: left;
        width: 100%;
    }
</style>

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