itsm-pc-handle/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','api_deck_report', function ($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, SweetAlert, Restangular, api_report, api_statistic, moment, api_user_data,api_deck_report) {
    $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;
    $scope.searchkeys = {
        dateSelected: {id:-1,name:""}//选中
    };
    // 重置
    $scope.reset = function(){
        $scope.parameters.paramDateFrom = moment(new Date().getTime() - 86400000 * (weeks + 6)).format('YYYY-MM-DD');
        $scope.parameters.paramDateTo = moment(new Date().getTime() - 86400000 * (weeks)).format('YYYY-MM-DD');
        $scope.searchkeys.dateSelected = {id:-1,name:""}
        $scope.getData();
    }
    // 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') {
            $scope.getData();
        } 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.total = 0;//来电总数
    $scope.trans = 0;//建单总数
    $scope.trans_percent = 0;//来电转换率
    $scope.dataList = [];//柱状图-按月统计来电量
    $scope.dataList_name = [];//横轴名称
    $scope.dataList_totalNum = [];//来电总数
    $scope.dataList_buildNum = [];//建单总数

    $scope.hourList = [];//24小时来电趋势图-按小时统计来电量
    $scope.hourList_name = [];
    $scope.hourList_countNum = [];

    $scope.timeList = [];//未接听数-按月统计
    $scope.timeList_name = [];
    $scope.timeList_sumNum = [];
    $scope.timeList_avgNum = [];

    $scope.missList = [];//接听通话时长和平均时长-按月统计
    $scope.missList_name = [];
    $scope.missList_countNum = [];
    $scope.getData = function(){
        api_deck_report.fetchLdzsNumList({
            "startTime": $scope.parameters.paramDateFrom,
            "endTime": $scope.parameters.paramDateTo,
        }).then(function (res) {
            if(res){
                // 来电总数顶部数字
                if(res.title){
                    $scope.total = res.title.total || 0;
                    $scope.trans = res.title.trans || 0;
                    $scope.trans_percent = res.title.trans_percent || 0;
                }
                // 柱状图-按月统计来电量
                if(res.dataList){
                    var arr = Object.values(res.dataList);
                    $scope.dataList = arr.map(ress=>{
                        return {
                            time:ress.time,
                            total:ress.total || 0,
                            trans:ress.trans || 0
                        }
                    })
                    $scope.dataList_name = $scope.dataList.map(v=>v.time);//横轴名称
                    $scope.dataList_totalNum = $scope.dataList.map(v=>v.total);//来电总数
                    $scope.dataList_buildNum = $scope.dataList.map(v=>v.trans);//建单总数
                }
                // 24小时来电趋势图-按小时统计来电量
                if(res.hourList){
                    $scope.hourList = res.hourList || [];
                    $scope.hourList_name = $scope.hourList.map(v=>v.time);//横轴名称
                    $scope.hourList_countNum = $scope.hourList.map(v=>v.count);//数量
                }
                // 接听通话时长和平均时长-按月统计
                if(res.timeList){
                    $scope.timeList = res.timeList || [];
                    $scope.timeList_name = $scope.timeList.map(v=>v.time);//横轴名称
                    $scope.timeList_sumNum = $scope.timeList.map(v=>v.sum);//通话时长
                    $scope.timeList_avgNum = $scope.timeList.map(v=>v.avg);//平均时长
                }
                // 未接听数-按月统计
                if(res.missList){
                    $scope.missList = res.missList || [];
                    $scope.missList_name = $scope.missList.map(v=>v.time);//横轴名称
                    $scope.missList_countNum = $scope.missList.map(v=>v.count);//未接听数
                }
                //渲染图表
                barechart();
                barechart1({id:"sjfx1",name:'来电数量',unit:'个',data:{x:$scope.hourList_name,y:$scope.hourList_countNum}});
                barechart1({id:"sjfx2",name:'       接听通话时长',unit:'秒',data:{x:$scope.timeList_name,y:$scope.timeList_sumNum}});
                barechart1({id:"sjfx3",name:'              接听电话平均时长',unit:'秒',data:{x:$scope.timeList_name,y:$scope.timeList_avgNum}});
                barechart1({id:"sjfx4",name:'未接电话',unit:'个',data:{x:$scope.missList_name,y:$scope.missList_countNum}});
            }
        })
    }
    $scope.getData();
    // 选择日期
    $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: $scope.dataList_name
            }],
            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: $scope.dataList_totalNum
                }, {
                    name: '建单总数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#1CA58F'
                        }
                    },
                    data: $scope.dataList_buildNum
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
            myChart.hideLoading();
        }
    }
    //图表 事件趋势
    function barechart1(options) {
        console.log(echarts)
        var dom = document.getElementById(options.id);
        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: [options.name],
                align: 'left',
                // itemWidth:10,
                // itemHeight:10,
                bottom: 0
            },
            grid: {
                left: '1%',
                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: options.data.x
            }],
            yAxis: [{
                type: 'value',
                scale: true,
                name: options.name + '(' + options.unit +')',
                min: 0,
                boundaryGap: [0.2, 0.2],
                axisLabel: {
                    textStyle: {
                        color: '#7B7B7B',
                        // fontSize: '14',
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#7B7B7B',
                        // type: 'dotted'
                    },
                },
            }, ],
            series: [{
                name: options.name,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#005395',
                    }
                },
                lineStyle: {
                    normal: {
                        color: '#005395'
                    }
                },
                data: options.data.y
            }]
        };
        if (option1 && typeof option1 === "object") {
            myChart1.setOption(option1, true);
            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, true);
            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, true);
            myChart.hideLoading();
        }
    }
}])