itsm-pc-handle/assets/js/controllers/report/handlegroup.js

'use strict';
app.controller('reporthandlegroupCtrl', ["$scope", "$rootScope", "$state", "$timeout", "$interval", "$http", "$cookieStore", "moment", "SweetAlert", "Restangular", "api_hkreport", function($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, moment, SweetAlert, Restangular, api_hkreport) {
    var ROWS = "ROWS";
    var COLUMNS = "COLUMNS";
    $scope.treeshow = true;
    $scope.searchstate = "";
    $scope.headers = "请选择事件树形列表！";
    var workspace = {};
    $scope.parameters = {};
    $scope.starttimes = {};
    $scope.endtimes = {};
    $scope.category = {};
    $scope.reportName = "报表";
    $scope.allheight = 100;
    $scope.isMaskground = false;
    //表格
    $scope.rRows = [];
    $scope.quikly = [{ name: '自定义', value: 0 }, { name: '近7天', value: 1 }, { name: '近30天', value: 2 }, { name: '近90天', value: 3 }, { name: '近半年', value: 4 }, { name: '近一年', value: 5 }];
    // var starttime, endtime
    // $scope.starttimes = moment().startOf('month').format('YYYYMMDD');
    // $scope.endtimes = moment().format('YYYYMMDD');
    function startdata() {
        $scope.searchkeys = { 'group': {}, 'quikly': { name: '近7天', value: 1 } };
        $scope.starttimes = moment(new Date().getTime() - 86400000 * 7).format('YYYYMMDD');
        $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYYMMDD');
        $scope.parameters.paramDateFrom = moment($scope.starttimes, "YYYYMMDD").format("YYYY-MM-DD");
        $scope.parameters.paramDateTo = moment($scope.endtimes, "YYYYMMDD").format("YYYY-MM-DD");
    }
    startdata();
    $scope.changeForm = function(paramDateFrom) {
        $scope.searchkeys.quikly = { name: '自定义', value: 0 };
        $scope.starttimes = moment(paramDateFrom).format('YYYYMMDD');
    }
    $scope.changeTo = function(paramDateTo) {
        $scope.searchkeys.quikly = { name: '自定义', value: 0 };
        $scope.endtimes = moment(paramDateTo).format('YYYYMMDD');
    }


    $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;
    };

    function ConvertDateParameter(parameters) {
        var result = undefined;
        if (angular.isArray(parameters)) {
            // 
        } else {
            result = {};
            for (var k in parameters) {
                if (k.indexOf("Date") > 0) {
                    if (angular.isDate(parameters[k])) {
                        result[k] = moment(parameters[k]).format("YYYY-MM-DD");
                    } else if (angular.isString(parameters[k])) {
                        result[k] = parameters[k];
                    }
                }
            }
        }
        return result;
    }
    $scope.restData = function() {
        startdata();
        $scope.mdxquery();
    }
    $scope.mdxquery = function(key) {
        var changedate = ConvertDateParameter($scope.parameters)
        getdata({ "start": moment(changedate.paramDateFrom).format("YYYY-MM-DD"), "end": moment(changedate.paramDateTo).format("YYYY-MM-DD") })
            // getlistdata({ "start": moment(changedate.paramDateFrom).format("YYYY-MM-DD"), "end": moment(changedate.paramDateTo).format("YYYY-MM-DD") })
            // getpiedata({ "start": moment(changedate.paramDateFrom).format("YYYY-MM-DD"), "end": moment(changedate.paramDateTo).format("YYYY-MM-DD") })
            // getpiedata({ "end": $scope.parameters.paramDateFrom, "start": $scope.parameters.paramDateTo })
    }
    $scope.onChangetime = function(key) {
        if (key.value == 1) {
            $scope.starttimes = moment(new Date().getTime() - 86400000 * 7).format('YYYY-MM-DD');
            $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYY-MM-DD');
            $scope.parameters.paramDateFrom = moment($scope.starttimes, "YYYY-MM-DD").format("YYYY-MM-DD");
            $scope.parameters.paramDateTo = moment($scope.endtimes, "YYYY-MM-DD").format("YYYY-MM-DD");
        } else if (key.value == 2) {
            $scope.starttimes = moment(new Date().getTime() - 86400000 * 30).format('YYYY-MM-DD');
            $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYY-MM-DD');
            $scope.parameters.paramDateFrom = $scope.starttimes;
            $scope.parameters.paramDateTo = $scope.endtimes;
        } else if (key.value == 3) {
            $scope.starttimes = moment(new Date().getTime() - 86400000 * 90).format('YYYY-MM-DD');
            $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYY-MM-DD');
            $scope.parameters.paramDateFrom = $scope.starttimes;
            $scope.parameters.paramDateTo = $scope.endtimes;
        } else if (key.value == 4) {
            $scope.searchstate = "month";
            $scope.starttimes = moment((new Date()).setMonth((new Date()).getMonth() - 6)).format('YYYY-MM-DD');
            $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYY-MM-DD');
            $scope.parameters.paramDateFrom = $scope.starttimes;
            $scope.parameters.paramDateTo = $scope.endtimes;
        } else if (key.value == 5) {
            $scope.searchstate = "month";
            $scope.starttimes = moment((new Date()).setMonth((new Date()).getMonth() - 12)).format('YYYY-MM-DD');
            $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYY-MM-DD');
            $scope.parameters.paramDateFrom = $scope.starttimes;
            $scope.parameters.paramDateTo = $scope.endtimes;
        }
        // $scope.starttimes = moment(new Date().getTime() - 86400000 * 7).format('YYYYMMDD');
        // $scope.endtimes = moment(new Date().getTime() - 86400000).format('YYYYMMDD');
        // $scope.parameters.paramDateFrom = moment($scope.starttimes, "YYYYMMDD").format("YYYY-MM-DD");
        // $scope.parameters.paramDateTo = moment($scope.endtimes, "YYYYMMDD").format("YYYY-MM-DD");
        // $scope.mdxquery();
    }

    // $scope.execute = function() {
    //     api_report.list($scope.token).then(function(response) {
    //         $scope.select_treedata = $scope.my_data = response;
    //     });
    // }

    $scope.searchOptions = function() {
        if (angular.isDefined(workspace.query)) {
            var queryParameters = workspace.query.parameters;
            for (var parm in queryParameters) {
                if (parm == 'Week') {

                } else {

                }
            }
        }
    }

    //pie 工单解决率
    // $scope.pielenddata = ["处理人", "处理人1", "处理人2"];
    // $scope.piebodydata = [{ "value": 1, "name": "处理人", "proportion": "25%" }, { "value": 1, "name": "处理人1", "proportion": "25%" }, { "value": 2, "name": "处理人2", "proportion": "50%" }];
    $scope.pielenddata = [];
    $scope.piebodydata = [];
    var domgroup = document.getElementById("reportgroup");
    var myChartgroup = echarts.init(domgroup);
    var app = {};
    var option = null;
    myChartgroup.showLoading({　　
        text: '数据加载中...',
        color: '#c23531',
        textColor: '#fff',
        maskColor: 'rgba(255,255,255,0)',
        zlevel: 0
    });
    myChartgroup.hideLoading();
    option = {
        title: {
            subtext: 0,
            text: "事件总数",
            itemGap: 3,
            "x": '24%',
            "y": '40%',
            textAlign: "center",
            "textStyle": {
                "fontWeight": 'normal',
                "fontSize": 12,
                "color": '#333',

            },
            "subtextStyle": {
                "fontWeight": 'normal',
                "fontSize": 18,
                "color": '#005395',
                "lineHeight": 14
            },

        },
        tooltip: {
            "backgroundColor": "rgba(0,0,0,9)",
            "textStyle": {
                "fontSize": 12,
                "color": '#f9f9f9',
            },
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            icon: "circle",
            x: '50%',
            y: 'center',
            itemGap: 10,
            itemWidth: 8,
            itemHeight: 8,
            borderRadius: 4,
            textStyle: {
                color: ['#49a9ee', '#ffcd61', '#87c966', '#61829d', '#8496A5', '#e6eef4', '#15598F', '#61829d', '#5F9FD1', '#7EAFD6'],
            },
            data: $scope.pielenddata,
            formatter: function(param) {
                for (var i = 0; i < $scope.pielenddata.length; i++) {
                    if ($scope.piebodydata[i].name == param) {
                        return '    ' + $scope.piebodydata[i].name + '  |  ' + $scope.piebodydata[i].value + '    ' + $scope.piebodydata[i].proportion + '%';
                    }
                }
            },
            textStyle: {
                rich: {
                    white: {
                        color: "#fff",
                        fontSize: 12,
                        padding: [6, 0, 0, 0]
                    }
                }
            }
        },
        series: [{
            // name: $scope.startlist.title,
            type: 'pie',
            radius: ['70%', '85%'],
            center: ['25%', '50%'],
            color: ['#49a9ee', '#ffcd61', '#87c966', '#61829d', '#8496A5', '#e6eef4', '#15598F', '#61829d', '#5F9FD1', '#7EAFD6'],
            hoverAnimation: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                formatter: [
                    '{a|这段文本采用样式a}',
                    '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
                ].join('\n'),

                rich: {
                    a: {
                        color: 'red',
                        lineHeight: 10
                    },
                    b: {
                        backgroundColor: {
                            image: 'xxx/xxx.jpg'
                        },
                        height: 40
                    },
                    x: {
                        fontSize: 18,
                        fontFamily: 'Microsoft YaHei',
                        borderColor: '#449933',
                        borderRadius: 4
                    },
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: $scope.piebodydata
        }]
    };

    // if (option && typeof option === "object") {
    //     myChart.setOption(option);
    //     myChart.hideLoading();
    // }

    // function getpiedata(time) {
    //     api_hkreport.incidentreport(time, 'incident_source_pie').then(function(data) {
    //         var sum = 0
    //         angular.forEach(data.data[1], function(item, index) {
    //             data.data[1][index].value = data.data[1][index].count;
    //             sum += Number(data.data[1][index].value);
    //         })
    //         $scope.pielenddata = data.data[0];
    //         $scope.piebodydata = data.data[1];
    //         option.series[0].data = $scope.piebodydata;
    //         option.legend.data = $scope.pielenddata;
    //         option.title.subtext = sum;
    //         myChart.setOption(option);
    //         myChart.hideLoading();
    //     })
    // }
    // getpiedata({ "end": $scope.parameters.paramDateFrom, "start": $scope.parameters.paramDateTo })

    //bar 存储容量
    //start事件月统计图
    var domfaultgroup = document.getElementById("faultgroup");
    var myChartfaultgroup = echarts.init(domfaultgroup);
    var app = {};
    var optionfaultgroup = null;
    app.title = '当月事件工单处理TOP5';
    var XData = [];
    var yData = [];
    // XData.map(function() {
    //         yData.push((Math.random() * 1000 + 100).toFixed(0))
    //     })
    // var dataMin=parseInt(Math.min.apply(null, yData)/2);
    myChartfaultgroup.showLoading({　　
        text: '数据加载中...',
        color: '#c23531',
        textColor: '#fff',
        maskColor: 'rgba(255,255,255,0)',
        zlevel: 0
    });
    myChartfaultgroup.hideLoading();
    optionfaultgroup = {
        title: {
            // text: '（件）故障数量',
            x: '10',
            y: '0',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 12,
                color: "#56c9ff",
            }
        },
        xAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#eee'
                }
            },
            splitArea: {
                show: false
            },
            // data: XData,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#999999',
                    fontSize: 12,
                }
            },
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            splitArea: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#999999',
                    fontSize: 12,
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#cecece'
                }
            }
        },
        grid: {
            left: 10,
            top: 25,
            bottom: 0,
            right: 20,
            containLabel: true
        },
        "tooltip": {
            "trigger": "item",
            "textStyle": {
                "fontSize": 12
            },
            "formatter": "{b0}:{c0}"
        },
        series: {
            type: "bar",
            itemStyle: {
                normal: {
                    color: "#005395",
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        // color: '# 56 c9ff '
                    }
                }
            },
            barWidth: 18,
            // barWidth: '30%',
            // data: yData
            data: [0, 0, 0, 0, 0]
        }
    };
    // if (optionfault && typeof optionfault === "object") {
    //     myChartfault.setOption(optionfault, true);
    // }


    function getdata(time) {
        api_hkreport.incidentreport(time, 'incident_handler_group').then(function(data) {
            // var sum = 0
            // angular.forEach(data.data[1], function(item, index) {
            //     data.data[1][index].value = data.data[1][index].count;
            //     sum += Number(data.data[1][index].value);
            // })
            $scope.rRows = data.list; //表格
            //饼图
            // $scope.pielenddata = data.pieChart;
            $scope.piebodydata = data.pieChart;
            $scope.pielenddata = [];
            angular.forEach($scope.piebodydata, function(item, index) {
                $scope.pielenddata.push(item.name);
            })
            option.series[0].data = $scope.piebodydata;
            option.legend.data = $scope.pielenddata;
            // option.title.subtext = sum;
            myChartgroup.setOption(option, true);
            myChartgroup.hideLoading();
            //柱状图
            var barGraph = [];
            var baryx = [];
            angular.forEach(data.barGraph, function(item) {
                barGraph.push(item.num);
                baryx.push(item.name);
            })
            optionfaultgroup.yAxis.data = baryx.reverse();
            optionfaultgroup.series.data = barGraph.reverse();
            myChartfaultgroup.setOption(optionfaultgroup, true);
            myChartfaultgroup.hideLoading();
        })
    }
    getdata({ "end": $scope.parameters.paramDateTo, "start": $scope.parameters.paramDateFrom })

    //表格
    $scope.rRows = [];

    // function getlistdata(time) {
    //     api_hkreport.incidentreport(time, 'incident_source').then(function(data) {
    //         $scope.rRows = data.data;
    //     })
    // }
    // getlistdata({ "end": $scope.parameters.paramDateTo, "start": $scope.parameters.paramDateFrom })
}]);