zuel-itsm-3.0.2/assets/js/controllers/report/deck_reportCtrl.js

'use strict';
app.controller('deck_reportCtrl', ["$scope", "$rootScope", "$state", "$timeout", "$interval", "$http", "$cookieStore", "SweetAlert", "Restangular", "api_report", "api_statistic", "moment", 'api_user_data', function ($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, SweetAlert, Restangular, api_report, api_statistic, moment, api_user_data) {
    $scope.tap = 'LDZS';
    // 选择日期：
    $scope.dateSelected = [{
        name: '近90天',
        id: 0
    }, {
        name: '近1年',
        id: 1
    }, {
        name: '近3年',
        id: 2
    }, {
        name: '近5年',
        id: 3
    }]
    $scope.parameters = {};
    $scope.nowdata = moment(new Date()).format('YYYY/MM/DD HH:ss:mm');
    var weeks = new Date().getDay();
    $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD');
    $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD');
    $scope.changeForm = function (paramDateFrom) {
        $scope.starttimes = moment(paramDateFrom).format('YYYY-MM-DD');
    }
    $scope.changeTo = function (paramDateTo) {
        $scope.endtimes = moment(paramDateTo).format('YYYY-MM-DD');
    }
    $scope.parameters.paramDateFrom = $scope.starttimes;
    $scope.parameters.paramDateTo = $scope.endtimes;
    // n天前
    $scope.GetDateStr = function (AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期  
        var y = dd.getFullYear();
        var m = (dd.getMonth() + 1) < 10 ? "0" + (dd.getMonth() + 1) : (dd.getMonth() + 1); //获取当前月份的日期，不足10补0  
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0  
        return y + "-" + m + "-" + d;
    }
    //上周
    $scope.week = function () {
        $scope.searchstate = "week";
        var weeks = new Date().getDay();
        $scope.starttimes = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD');
        $scope.endtimes = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD');
        $scope.parameters.paramDateFrom = $scope.starttimes;
        $scope.parameters.paramDateTo = $scope.endtimes;
        // $scope.parameters = parseDateParameter($scope.parameters);
        // $scope.mdxquery();
    }
    //上月
    $scope.month = function () {
        $scope.searchstate = "month";
        $scope.starttimes = moment((new Date(moment().startOf('month'))).setMonth((new Date()).getMonth() - 1)).format('YYYY-MM-DD');
        $scope.endtimes = moment((new Date(moment().startOf('month'))).setMonth((new Date()).getMonth()) - 86400000).format('YYYY-MM-DD');
        $scope.parameters.paramDateFrom = $scope.starttimes;
        $scope.parameters.paramDateTo = $scope.endtimes;
        // $scope.parameters = parseDateParameter($scope.parameters);
        // $scope.mdxquery();
    }
    //上年
    //今年（1月1日-至今）
    $scope.year = function () {
        $scope.searchstate = "year";
        $scope.starttimes = moment().startOf('year').format('YYYY-MM-DD');
        $scope.endtimes = moment().format('YYYY-MM-DD');
        $scope.parameters.paramDateFrom = $scope.starttimes;
        $scope.parameters.paramDateTo = $scope.endtimes;
    }
    // 近n年
    $scope.nearYear = function (n) {
        $scope.parameters.paramDateFrom = moment().subtract(n, "years").format("YYYY-MM-DD");
        $scope.parameters.paramDateTo = $scope.endtimes;
        console.log($scope.parameters.paramDateFrom, $scope.parameters.paramDateTo)
    }
    /**
     *日历
     */
    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = !$scope.opened;
    };
    $scope.endOpen = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.startOpened = false;
        $scope.endOpened = !$scope.endOpened;
    };
    $scope.startOpen = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.endOpened = false;
        $scope.startOpened = !$scope.startOpened;
    };
    //选择类型
    $scope.active = function (name) {
        $scope.tap = name
        if ($scope.tap == 'LDZS') {
            setTimeout(function () {
                barechart();
                barechart1();
            }, 500);
        } else {
            setTimeout(function () {
                barechart2();
                barechart3();
            }, 500);
        }
    }
    // 请求人
    api_user_data.fetchDataList('requester', {
        "idx": 0,
        "sum": 10
    }).then(function (response) {
        if (response) {
            if (response.status = 200) {
                $scope.requester = response.list;
            }
        }
    })
    // 选择日期
    $scope.onChangeDate = function (s) {
        console.log(s)
        switch (s) {
            case 0:
                // 最近90天
                console.log('最近90天');
                $scope.parameters.paramDateFrom = $scope.GetDateStr(-90);
                break;
            case 1:
                // 最近一年
                console.log('最近一年');
                $scope.nearYear(1)
                break;
            case 2:
                // 最近三年
                console.log('最近三年');
                $scope.nearYear(3)
                break;
            case 3:
                // 最近五年
                console.log('最近五年');
                $scope.nearYear(5)
                break;
        }
    }
    //图表 来电转换
    function barechart() {
        console.log(echarts)
        var dom = document.getElementById("ldzh");
        console.log(dom)
        var myChart = echarts.init(dom);
        var option = null;
        console.log(myChart)
        myChart.showLoading({　　
            text: '数据加载中...',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255,255,255,0)',
            zlevel: 0
        });
        myChart.hideLoading();
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['正班时间', '值班时间', '非工作时间', '来电转换率'],
                align: 'left',
                // itemWidth:10,
                // itemHeight:10,
                bottom: 0
            },
            grid: {
                left: '.5%',
                right: '0%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                // axisTick: {
                //     alignWithLabel: true
                // },
                axisLabel: {
                    textStyle: {
                        color: '#7B7B7B',
                        // fontSize: '14',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7B7B7B',
                        // type: 'dotted'
                    },
                },
                data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12']
            }],
            yAxis: [{
                    type: 'value',
                    scale: true,
                    name: '来电数量  (个)',
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                    axisLabel: {
                        textStyle: {
                            color: '#7B7B7B',
                            // fontSize: '14',
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7B7B7B',
                            // type: 'dotted'
                        },
                    },
                },
                {
                    type: 'value',
                    scale: true,
                    name: '来电转换率',
                    min: 0,
                    max: 100,
                    boundaryGap: [0.2, 0.2],
                    axisLabel: {
                        formatter: '{value} %',
                        textStyle: {
                            color: '#7B7B7B',
                            // fontSize: '14',
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7B7B7B',
                            // type: 'dotted'
                        },
                    },
                }
            ],
            series: [{
                    name: '正班时间',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#005395'
                        }
                    },
                    data: [20, 12, 31, 23, 56, 78, 92, 12, 23]
                }, {
                    name: '值班时间',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#1CA58F'
                        }
                    },
                    data: [10, 20, 5, 5, 2, 32, 34, 56, 23]
                }, {
                    name: '非工作时间',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#FFCE3D'
                        }
                    },
                    data: [1, 1, 2, 4, 8, 9, 6, 54, 43]
                },
                {
                    name: '来电转换率',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#49A9EE'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#49A9EE'
                        }
                    },
                    data: [10, 20, 5, 43, 12, 34, 12, 56, 67]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option);
            myChart.hideLoading();
        }
    }
    //图表 事件趋势
    function barechart1() {
        console.log(echarts)
        var dom = document.getElementById("sjfx");
        console.log(dom)
        var myChart1 = echarts.init(dom);
        var option1 = null;
        console.log(myChart1)
        myChart1.showLoading({　　
            text: '数据加载中...',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255,255,255,0)',
            zlevel: 0
        });
        myChart1.hideLoading();
        option1 = {
            tooltip: {
                trigger: 'axis',

                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    // type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    lineStyle: {
                        color: '#49A9EE',
                        type: 'dotted'
                    },
                }
            },
            legend: {
                data: ['通话时长'],
                align: 'left',
                // itemWidth:10,
                // itemHeight:10,
                bottom: 0
            },
            grid: {
                left: '.5%',
                right: '0%',
                bottom: '15%',
                top: '10%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                // axisTick: {
                //     alignWithLabel: true
                // },
                axisLabel: {
                    textStyle: {
                        color: '#7B7B7B',
                        // fontSize: '14',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7B7B7B',
                        // type: 'dotted'
                    },
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }],
            yAxis: [{
                type: 'value',
                scale: true,
                name: '通话时长  (s)',
                min: 0,
                boundaryGap: [0.2, 0.2],
                axisLabel: {
                    textStyle: {
                        color: '#7B7B7B',
                        // fontSize: '14',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7B7B7B',
                        // type: 'dotted'
                    },
                },
            }, ],
            series: [{
                name: '通话时长',
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#005395',
                    }
                },
                lineStyle: {
                    normal: {
                        color: '#005395'
                    }
                },
                data: [10, 20, 5, 23, 12, 3, 63, 12, 23, 34, 76, 45]
            }]
        };
        if (option1 && typeof option1 === "object") {
            myChart1.setOption(option1);
            myChart1.hideLoading();
        }
    }

    //图表 来电转换
    function barechart2() {
        console.log(echarts)
        var dom = document.getElementById("sjqs");
        console.log(dom)
        var myChart = echarts.init(dom);
        var option = null;
        console.log(myChart)
        myChart.showLoading({　　
            text: '数据加载中...',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255,255,255,0)',
            zlevel: 0
        });
        myChart.hideLoading();
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['直接处理', '事件派单', '来电转换率'],
                align: 'left',
                // itemWidth:10,
                // itemHeight:10,
                bottom: 0
            },
            grid: {
                left: '.5%',
                right: '0%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                // axisTick: {
                //     alignWithLabel: true
                // },
                axisLabel: {
                    textStyle: {
                        color: '#7B7B7B',
                        // fontSize: '14',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7B7B7B',
                        // type: 'dotted'
                    },
                },
                data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12']
            }],
            yAxis: [{
                    type: 'value',
                    scale: true,
                    name: '事件数量  (件)',
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                    // axisLabel: {
                    //     formatter: '{value}'
                    // }
                    axisLabel: {
                        textStyle: {
                            color: '#7B7B7B',
                            // fontSize: '14',
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7B7B7B',
                            // type: 'dotted'
                        },
                    },
                },
                {
                    type: 'value',
                    scale: true,
                    name: '来电转换率',
                    min: 0,
                    max: 100,
                    boundaryGap: [0.2, 0.2],
                    axisLabel: {
                        textStyle: {
                            color: '#7B7B7B',
                            // fontSize: '14',
                        },
                        formatter: '{value} %'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7B7B7B',
                            // type: 'dotted'
                        },
                    },
                },
            ],
            series: [{
                    name: '直接处理',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#005395'
                        }
                    },
                    data: [20, 12, 31, 23, 56, 78, 92, 12, 23]
                }, {
                    name: '事件派单',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#1CA58F'
                        }
                    },
                    data: [10, 20, 5, 5, 2, 32, 34, 56, 23]
                },
                {
                    name: '来电转换率',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#49A9EE'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#49A9EE'
                        }
                    },
                    data: [10, 20, 5, 43, 12, 34, 12, 56, 67]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option);
            myChart.hideLoading();
        }
    }
    //图表 来电转换
    function barechart3() {
        console.log(echarts)
        var dom = document.getElementById("sjpd");
        console.log(dom)
        var myChart = echarts.init(dom);
        var option = null;
        console.log(myChart)
        myChart.showLoading({　　
            text: '数据加载中...',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255,255,255,0)',
            zlevel: 0
        });
        myChart.hideLoading();
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['事件派单', '请求重新指派', '派单准确率'],
                align: 'left',
                // itemWidth:10,
                // itemHeight:10,
                bottom: 0
            },
            grid: {
                left: '.5%',
                right: '0%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                // axisTick: {
                //     alignWithLabel: true
                // },
                axisLabel: {
                    textStyle: {
                        color: '#7B7B7B',
                        // fontSize: '14',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7B7B7B',
                        // type: 'dotted'
                    },
                },
                data: ['10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12', '10-12']
            }],
            yAxis: [{
                    type: 'value',
                    scale: true,
                    name: '事件数量  (件)',
                    min: 0,
                    boundaryGap: [0.2, 0.2],
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#7B7B7B',
                            // fontSize: '14',
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7B7B7B',
                            // type: 'dotted'
                        },
                    },
                },
                {
                    type: 'value',
                    scale: true,
                    name: '派单准确率',
                    min: 0,
                    max: 100,
                    boundaryGap: [0.2, 0.2],
                    axisLabel: {
                        textStyle: {
                            color: '#7B7B7B',
                            // fontSize: '14',
                        },
                        formatter: '{value} %'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#7B7B7B',
                            // type: 'dotted'
                        },
                    },
                }
            ],
            series: [{
                    name: '事件派单',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#005395'
                        }
                    },
                    data: [20, 12, 31, 23, 56, 78, 92, 12, 23]
                }, {
                    name: '请求重新指派',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#1CA58F'
                        }
                    },
                    data: [10, 20, 5, 5, 2, 32, 34, 56, 23]
                },
                {
                    name: '派单准确率',
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: '#49A9EE'
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#49A9EE'
                        }
                    },
                    data: [10, 20, 5, 43, 12, 34, 12, 56, 67]
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option);
            myChart.hideLoading();
        }
    }





    setTimeout(function () {
        barechart();
        barechart1();
    }, 1000);


}])