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

// 'use strict';
// var appchild = angular.module("myAppchild", []);
app.controller('childpapeCtrl', ["$scope", "api_report_nx", "$rootScope", "$stateParams", function($scope, api_report_nx, $rootScope, $stateParams) {
    $scope.hearderlist = [];
    $scope.mapheaderdata = [];
    $scope.mapbodydata = [];
    $scope.parameters = {};
    $scope.starttimes = $scope.parameters.paramDateFrom = $stateParams.starttime;
    $scope.endtimes = $scope.parameters.paramDateTo = $stateParams.endtime;
    $scope.startlist = JSON.parse($stateParams.model)
    $scope.nowdata = moment(new Date()).format('YYYY/MM/DD HH:ss:mm');
    /***
     * 故障现象总数
     */
    function incidentClassify() {
        $scope.pielenddata = [];
        $scope.piebodydata = [];
        $scope.hearderlist = [{ name: "事件类别（三级）", value: "type3" }, { name: "事件数量", value: "num" }, { name: "所属类型（二级）", value: "type2" }, { name: "所属类型（一级）", value: "type1" }, { name: "占比", value: "proportion" }];
        api_report_nx.fetchDataList("incidentClassify", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.sum = response.sum;
                $scope.rRows = response.incidentClassifyList;
                angular.forEach(response.incidentClassify, function(item) {
                    $scope.pielenddata.push(item.type);
                    $scope.piebodydata.push({ "value": item.num, "name": item.type, "proportion": item.proportion });
                })
                pieechart()
            } else {

            }
        });
    }
    incidentClassify()
        /**
         * 处理事件占比
         */
    function incidentHandler() {
        $scope.barlenddata = [];
        $scope.barbodydata = [];
        $scope.hearderlist = [{ name: "处理人", value: "name" }, { name: "完成事件数", value: "num" }, { name: "占比", value: "proportion" }];
        api_report_nx.fetchDataList("incidentHandler", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.rRows = response.incidentHandler;
                angular.forEach(response.incidentHandler, function(item) {
                    $scope.barlenddata.push(item.name);
                    $scope.barbodydata.push({ "value": item.num, "name": item.name, "proportion": item.proportion });
                })
                barechart()
            } else {

            }
        });
    }
    // incidentHandler()
    /**
     * 问题总数
     */
    function problemClassify() {
        $scope.pielenddata = [];
        $scope.piebodydata = [];
        $scope.hearderlist = [{ name: "问题类别（三级）", value: "type3" }, { name: "问题数量", value: "num" }, { name: "所属类型（二级）", value: "type2" }, { name: "所属类型（一级）", value: "type1" }, { name: "占比", value: "proportion" }];
        api_report_nx.fetchDataList("problemClassify", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.sum = response.sum;
                $scope.rRows = response.problemClassifyList;
                angular.forEach(response.problemClassify, function(item) {
                    $scope.pielenddata.push(item.type);
                    $scope.piebodydata.push({ "value": item.num, "name": item.type, "proportion": item.proportion });
                })
                pieechart()
            } else {

            }
        });
    }
    /**
     * 处理问题占比
     */
    function problemHandler() {
        $scope.barlenddata = [];
        $scope.barbodydata = [];
        $scope.hearderlist = [{ name: "主责人", value: "name" }, { name: "完成问题数", value: "num" }, { name: "占比", value: "proportion" }];
        api_report_nx.fetchDataList("problemHandler", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.rRows = response.problemHandler;
                angular.forEach(response.problemHandler, function(item) {
                    $scope.barlenddata.push(item.name);
                    $scope.barbodydata.push({ "value": item.num, "name": item.name, "proportion": item.proportion });
                })
                barechart()
            } else {

            }
        });
    }
    /**
     * 变更总数
     */
    function changeClassify() {
        $scope.pielenddata = [];
        $scope.piebodydata = [];
        $scope.hearderlist = [{ name: "变更类别（三级）", value: "type3" }, { name: "变更数量", value: "num" }, { name: "所属类型（二级）", value: "type2" }, { name: "所属类型（一级）", value: "type1" }, { name: "占比", value: "proportion" }];
        api_report_nx.fetchDataList("changeClassify", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.sum = response.sum;
                $scope.rRows = response.changeClassifyList;
                angular.forEach(response.changeClassify, function(item) {
                    $scope.pielenddata.push(item.type);
                    $scope.piebodydata.push({ "value": item.num, "name": item.type, "proportion": item.proportion });
                })
                pieechart()
            } else {

            }
        });
    }
    /**
     * 完成变更占比
     */
    function changeHandler() {
        $scope.barlenddata = [];
        $scope.barbodydata = [];
        $scope.hearderlist = [{ name: "主责人", value: "name" }, { name: "完成变更数", value: "num" }, { name: "占比", value: "proportion" }];
        api_report_nx.fetchDataList("changeHandler", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.rRows = response.changeHandler;
                angular.forEach(response.changeHandler, function(item) {
                    $scope.barlenddata.push(item.name);
                    $scope.barbodydata.push({ "value": item.num, "name": item.name, "proportion": item.proportion });
                })
                barechart()
            } else {

            }
        });
    }
    /**
     * 发布总数
     */
    function releaseClassify() {
        $scope.pielenddata = [];
        $scope.piebodydata = [];
        api_report_nx.fetchDataList("releaseClassify", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.sum = response.sum;
                $scope.rRows = response.releaseClassifyList;
                angular.forEach(response.releaseClassify, function(item) {
                    $scope.pielenddata.push(item.name);
                    $scope.piebodydata.push({ "value": item.num, "name": item.name, "proportion": item.proportion });
                })
                pieechart()
            } else {

            }
        });
    }
    /**
     * 完成发布占比
     */
    function releaseHandler() {
        $scope.barlenddata = [];
        $scope.barbodydata = [];
        api_report_nx.fetchDataList("releaseHandler", { "startTime": $scope.parameters.paramDateFrom, "endTime": $scope.parameters.paramDateTo }).then(function(response) {
            if (response.code == 200) {
                $scope.rRows = response.releaseHandler;
                angular.forEach(response.releaseHandler, function(item) {
                    $scope.barlenddata.push(item.name);
                    $scope.barbodydata.push({ "value": item.num, "name": item.name, "proportion": item.proportion });
                })
                barechart()
            } else {

            }
        });
    }
    /**
     * 环形图
     */

    function pieechart() {
        var dom = document.getElementById("report");
        var myChart = echarts.init(dom);
        var app = {};
        var option = null;
        myChart.showLoading({　　
            text: '数据加载中...',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255,255,255,0)',
            zlevel: 0
        });
        myChart.hideLoading();
        option = {
            // graphic: {
            //     elements: [{
            //         type: 'text',
            //         // position: ['20%', '35%'],
            //         style: {
            //             text: $scope.sum,
            //             font: {
            //                 color: '#005395',
            //                 fontSize: '42px',
            //             },
            //         },
            //         left: '20%',
            //         top: '50%'
            //     }]
            // },
            // title: {
            //     text: $scope.startlist.title,
            //     left: '15%',
            //     top: '35%',
            //     // position: ['20%', '35%'],
            //     textStyle: {
            //         color: '#333',
            //         fontSize: 16,
            //         align: 'center'
            //     }
            // },
            title: [{
                text: $scope.sum,
                x: '16%',
                y: '50%',
                textStyle: {
                    fontSize: 42,
                    fontWeight: 'normal',
                    fontStyle: 'normal',
                    color: '#005395'
                }
            }, {
                text: $scope.startlist.title,
                x: '15%',
                y: '40%',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    fontStyle: 'normal',
                    align: 'center',
                    color: '#333'
                }
            }],
            tooltip: {
                "backgroundColor": "rgba(0,0,0,9)",
                "textStyle": {
                    "fontSize": 12,
                    "color": '#f9f9f9',
                },
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: '40%',
                y: 'center',
                itemGap: 40,
                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;
                        }
                    }
                }
            },
            series: [{
                name: $scope.startlist.title,
                type: 'pie',
                radius: ['70%', '85%'],
                center: ['20%', '50%'],
                color: ['#315b7e', '#3370a1', '#1a3a53', '#61829d', '#8496A5', '#e6eef4', '#15598F', '#61829d', '#5F9FD1', '#7EAFD6'],
                hoverAnimation: true,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    // emphasis: {
                    //     show: true,
                    //     textStyle: {
                    //         fontSize: '30',
                    //         fontWeight: 'bold'
                    //     }
                    // }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: $scope.piebodydata
            }]
        };

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

    // }, 1000)

    /***
     * 柱状图
     */
    function hardDisks(data) {
        if ($scope.sum == 0) {
            return 0;
        } else {

        }
        return data / $scope.sum;
    }

    function barechart() {
        var dom = document.getElementById("barreport");
        var mybarChart = echarts.init(dom);
        var app = {};
        var optionbar = null;
        mybarChart.showLoading({　　
            text: '数据加载中...',
            color: '#c23531',
            textColor: '#fff',
            maskColor: 'rgba(255,255,255,0)',
            zlevel: 0
        });
        mybarChart.hideLoading();
        optionbar = {
            title: {
                // text: '（件）故障数量',
                x: '10',
                y: '0',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 12,
                    color: "#56c9ff",
                }
            },
            xAxis: {
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                // data: XData,
                data: $scope.barlenddata,
                axisLine: {
                    lineStyle: {
                        color: '#eaeaea'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#999',
                        fontSize: 14,
                    }
                },
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                minInterval: 1,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999',
                        fontSize: 14,
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#eaeaea'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "#eaeaea"
                    }
                }
            },
            grid: {
                left: 10,
                top: 25,
                bottom: 0,
                right: 10,
                containLabel: true
            },

            "tooltip": {
                "trigger": "item",
                "backgroundColor": "rgba(0,0,0,9)",
                "textStyle": {
                    "fontSize": 12,
                    "color": '#f9f9f9',
                },
                formatter: function(data) {
                    return $scope.startlist.tip1 + '：' + data.value + '<br />' + $scope.startlist.tip2 + '：' + data.data.proportion + '%';
                },
            },
            series: {
                type: "bar",
                itemStyle: {
                    normal: {
                        color: function(params) {
                            // type = 'linear';
                            // var colorList = [
                            //     '#005395'
                            // ];
                            return '#005395'
                        },
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            // color: '#56c9ff'
                        }
                    }
                },
                barWidth: 18,
                // barWidth: '30%',
                // data: yData
                data: $scope.barbodydata
            }
        };
        if (optionbar && typeof optionbar === "object") {
            mybarChart.setOption(optionbar, true);
            mybarChart.hideLoading();
        }
    }
}])