zuel-itsm-3.0.2/assets/views/report/catergry.html

<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle">事件分类报表<i tooltip='请查看事件分类报表相关数据。' tooltip-placement="right" class="fa  ti-help-alt margin-left-10 fontcolor-five pointfont"></i></h1>
        </div>
    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BOOTSRAP NAV TREE -->
<style>
    .bodybackground {
        background: #eee;
    }
    
    .know-text-group {
        display: inline-block;
        box-sizing: border-box;
        border-radius: 2px;
        /* border: 1px solid #fff; */
        /* padding-top: 5px; */
        width: 100%;
        /* padding-bottom: 5px; */
    }
    
    .know-text-group-div {
        display: inline-block;
        width: 12%;
        padding-top: 5px;
        padding-bottom: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .know-text-group-div:hover {
        background-color: #005395 !important;
        color: #fff;
    }
    
    .know-text-group-div.active,
    .know-text-group-div:focus,
    .know-text-group-div:hover {
        background-color: #005395 !important;
        color: #fff;
    }
    
    .know-text-color {
        padding-left: 14px;
        font-size: 14px;
        color: #93989e;
    }
    
    .know-span {
        display: inline-block;
        text-align: center;
    }
    
    .know-num {
        width: 28px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        border-radius: 10px;
        margin-right: 10px;
        color: white;
    }
    
    .bg-yellow {
        background: #005395;
    }
    
    .bg-green {
        background: #2edbb8;
    }
    
    .bg-blue {
        background: #6f9ad4;
    }
    
    .leftBorder {
        border-left: 1px solid #eeeeee;
    }
    
    .leftBorder.active,
    .leftBorder:focus,
    .leftBorder:hover {
        border-left: 0px solid #005395;
    }
    
    .divRight {
        float: right;
    }
    
    input[type="text"] {}
    
    .searchInput {
        border: none !important;
    }
    /*     
    input:focus {
        box-shadow: none !important;
        border: none !important;
        background-color: white !important;
    } */
    
    .know-left-div {
        width: 706px;
        /* margin-top: 15px; */
        /* display: inline-block; */
        float: left;
        margin-right: 20px;
    }
    
    .know-right-div {
        /* margin-top: 15px; */
        /* display: inline-block; */
        overflow: hidden;
    }
    
    .know-left-up-div {
        margin-bottom: 20px;
    }
    
    .know-left-div-head {
        height: 34px;
        line-height: 34px;
        background: #e9eff8;
        font-size: 14px;
        color: #606367;
        border-radius: 8px 8px 0 0;
        padding-left: 10px;
    }
    /* .listheight {}
     */
    
    .gobutton {
        color: 005395;
        font-family: "microsoft yahei";
    }
    
    .gobutton:hover {
        color: #1b3651;
    }
    
    .gobutton:focus,
    .gobutton:hover {
        color: #1b3651;
    }
    
    .dash_head {
        font-size: 14px;
    }
    
    .dash_headborder {
        height: 260px;
        border: 1px solid #dedede;
        border-radius: 2px;
    }
    
    .dashheadcolor {
        border-bottom: 1px solid #dedede;
        border-radius: 2px;
    }
    
    .dash_mapborder {
        height: 320px;
        border: 1px solid #dedede;
        border-radius: 2px;
    }
    
    .disablecolor {
        color: #f3f3f3 !important;
    }
    
    .onlyaline {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .newcolor {
        color: #79a3c4;
    }
    
    .form-controldash {
        color: #93989e;
        height: 20px;
        border-radius: 2px;
        border: 1px solid #d1d1d1;
    }
    
    .iconcolorjingji {
        color: #BE2636 !important;
    }
    
    .iconcoloryanzhong {
        color: #f5a623 !important;
    }
    
    .iconcoloryiban {
        color: #005396 !important;
    }
    
    .iconfontkill {
        font-family: iconfont!important;
        font-size: 18px;
        color: #000;
        z-index: 1;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: .2px;
    }
    
    .monthchoice {
        height: 200px;
        overflow-x: hidden;
        overflow-y: scroll;
        line-height: 30px;
        text-align: center;
    }
    
    .dropdown-menu.monthchoice {
        min-width: 30px !important;
    }
    
    .backcopycolor {
        background: #f9f9f9;
    }
    
    .backcolor {
        background: #fff;
        border: 1px solid #ddd;
    }
    
    .table>tbody>tr>th {
        vertical-align: middle;
        text-align: center;
        background: #fafafa;
    }
    
    .table>tbody>tr>td {
        vertical-align: middle;
        text-align: center;
    }
    
    .bottomcat {
        border-bottom: 1px solid #eaeaea;
    }
    
    .table.table-bordered tr {
        white-space: inherit;
    }
    
    .tree-control .tree-input {
        border-radius: 4px;
        padding-top: 5px;
        width: 158px !important;
    }
</style>
<div ng-style="bodyheight">
    <div class="backcopycolor col-xs-12 padding-15">
        <div ng-controller="reportcatergryCtrl" class="backcolor padding-left-15 padding-right-15">
            <div class="listbote dashheadcolor">
                <div class="list-controls clearfix">
                    <div class="know-text-group">
                        <form class="col-xs-12 col-sm-12 form-inline schesearchsize">
                            <div class="row">
                                <div class="">选择日期：</div>
                                <div class="form-group">
                                    <input type="text" class="form-control" datepicker-popuptime="yyyy-MM-dd" ng-change="changeForm(parameters.paramDateFrom)" ng-model="parameters.paramDateFrom" max-date="parameters.paramDateTo" is-open="startOpened" hour-time=true ng-init="startOpened = false"
                                        close-text="关闭" ng-click="startOpen($event)" />
                                </div>
                                <span>-</span>
                                <div class="form-group">
                                    <input type="text" class="form-control" datepicker-popuptime="yyyy-MM-dd" ng-change="changeTo(parameters.paramDateTo)" ng-model="parameters.paramDateTo" hour-time=true min-date="parameters.paramDateFrom" is-open="endOpened" ng-init="endOpened = false"
                                        close-text="关闭" ng-click="endOpen($event)" />
                                </div>
                                <div class="form-group">
                                    <ui-select class="pull-left" style="width:158px" ng-model="searchkeys.quikly" theme="bootstrap" ng-change="onChangetime(searchkeys.quikly)">
                                        <ui-select-match placeholder="">
                                            {{$select.selected.name}}
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in quikly" refresh="onChangehandling($select.search)">
                                            <div ng-bind-html="item.name | highlight: $select.search"></div>
                                        </ui-select-choices>
                                    </ui-select>
                                </div>
                                <div class="form-group" style="margin-top: -20px;">
                                    <div class="">事件分类：</div>
                                    <multi-select-tree ng-model="searchkeys.category" style="width:158px" data-input-model="select_treedataca" data-output-model="my_dataca" theme="bootstrap" multi-select="false" data-default-label="全部" data-callback="onFilterCallback(item)" data-select-only-leafs="false"
                                        data-select-only-high="true" data-trans-label="label" data-switch-view="false"></multi-select-tree>
                                </div>
                                <div class="form-group pull-right">
                                    <a class="btn btn-default defaultheight" ng-click="restData()" ng-disabled="disabledParentGroup" type="button">重置</a>
                                </div>
                                <div class="form-group pull-right margin-right-10">
                                    <button class="btn btn-searchbutton" ng-click="mdxquery(searchkeys)" type="button">搜索</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row margin-top-15 margin-bottom-15" style="margin-left:-7px;margin-right:-7px">
                <div class="col-xs-6" style="padding-left:8px;padding-right:8px">
                    <div class="listheight dash_mapborder">
                        <div class="fenlei col-xs-12 fontsizes-14">
                            <div class="col-xs-12 bottomcat">
                                <div class="row fontcolor-two padding-top-15 padding-bottom-15">
                                    <div class="fenleifont pull-left">事件分类总数占比</div>
                                    <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
                                </div>
                            </div>
                            <div id="reportcatergry" style="width: 100%;height: 266px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6" style="padding-left:8px;padding-right:8px">
                    <div class="listheight dash_mapborder">
                        <div class="fenlei col-xs-12 fontsizes-14">
                            <div class="col-xs-12 bottomcat">
                                <div class="row fontcolor-two padding-top-15 padding-bottom-15">
                                    <div class="fenleifont pull-left">事件分类趋势分析</div>
                                    <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
                                </div>
                            </div>
                            <div id="liuliangcatergry" style="width: 100%;height: 260px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row margin-top-15 margin-bottom-15" style="margin-left:-7px;margin-right:-7px">
                <div class="col-xs-6" style="padding-left:8px;padding-right:8px">
                    <div class="listheight dash_mapborder">
                        <div class="fenlei col-xs-12" style="height:100%">
                            <div class="fenleitop fontsizes-14">
                                <div class="col-xs-12 bottomcat">
                                    <div class="row fontcolor-two padding-top-15 padding-bottom-15">
                                        <div class="fenleifont pull-left">事件区域地点TOP5排行</div>
                                        <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
                                    </div>
                                </div>

                            </div>
                            <div id="faultcatergry" class="pull-left" style="width: 100%;
            height: 260px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6" style="padding-left:8px;padding-right:8px">
                    <div class="listheight dash_mapborder">
                        <div class="fenlei col-xs-12" style="height:100%">
                            <div class="fenleitop fontsizes-14">
                                <div class="col-xs-12 bottomcat">
                                    <div class="row fontcolor-two padding-top-15 padding-bottom-15">
                                        <div class="fenleifont pull-left">故障原因TOP5排行</div>
                                        <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
                                    </div>
                                </div>

                            </div>
                            <div id="faultgu" class="pull-left" style="width: 100%;
            height: 260px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row margin-top-15 margin-bottom-15" style="margin-left:-7px;margin-right:-7px">
                <div class="col-xs-12" style="padding-left:8px;padding-right:8px">
                    <div class="listheight dash_mapborder">
                        <div class="fenlei col-xs-12 fontsizes-14">
                            <div class="col-xs-12 bottomcat">
                                <div class="row fontcolor-two padding-top-15 padding-bottom-15">
                                    <div class="fenleifont pull-left">区域地点及事件类型趋势分析</div>
                                    <div class="fenleifont pull-right fontcolor-ten fontsizes-14"></div>
                                </div>
                            </div>
                            <div id="analysisca" style="width: 100%;height: 260px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                <thread>
                    <tr>
                        <th rowspan="2">
                            序号
                        </th>
                        <th rowspan="2">
                            事件分类名称
                        </th>
                        <th rowspan="2">
                            事件总数（件）
                        </th>
                        <th rowspan="2">
                            事件占比（%）
                        </th>
                        <th rowspan="1" colspan='5'>
                            事件频发区域地点
                        </th>
                        <!-- <th rowspan="1" colspan='2'>
                            时间段占比
                        </th> -->
                        <th rowspan="1" colspan='4'>
                            优先级
                        </th>
                        <th rowspan="1" colspan='5'>
                            处理结果
                        </th>
                    </tr>
                    <tr>
                        <th rowspan="1">
                            TOP1
                        </th>
                        <th rowspan="1">
                            TOP2
                        </th>
                        <th rowspan="1">
                            TOP3
                        </th>
                        <th rowspan="1">
                            TOP4
                        </th>
                        <th rowspan="1">
                            TOP5
                        </th>
                        <!-- <th rowspan="1">
                            工作时间
                        </th>
                        <th rowspan="1">
                            值班时间
                        </th> -->
                        <th rowspan="1">
                            极高
                        </th>
                        <th rowspan="1">
                            高
                        </th>
                        <th rowspan="1">
                            中
                        </th>
                        <th rowspan="1">
                            低
                        </th>
                        <th rowspan="1">
                            处理结果1
                        </th>
                        <th rowspan="1">
                            处理结果2
                        </th>
                        <th rowspan="1">
                            处理结果3
                        </th>
                        <th rowspan="1">
                            处理结果4
                        </th>
                        <th rowspan="1">
                            处理结果5
                        </th>
                    </tr>
                </thread>
                <tbody class="tbody-hover">
                    <tr ng-repeat="rowData in rRowscatergry">
                        <td>
                            {{$index+1}}
                        </td>
                        <td>
                            {{rowData.category}}
                        </td>
                        <td>
                            {{rowData.sum}}
                        </td>
                        <td>
                            {{rowData.proportion}}%
                        </td>
                        <td>
                            {{rowData.tap0}}
                        </td>
                        <td>
                            {{rowData.tap1}}
                        </td>
                        <td>
                            {{rowData.tap2}}
                        </td>
                        <td>
                            {{rowData.tap3}}
                        </td>
                        <td>
                            {{rowData.tap4}}
                        </td>
                        <!-- <td>
                            {{rowData.overtimesolve}}
                        </td>
                        <td>
                            {{rowData.solvetime}}
                        </td>
                        <td>
                            {{rowData.overtimesolveProportion}}%
                        </td>
                        <td>
                            {{rowData.fcmy}}%
                        </td> -->
                        <td>
                            {{rowData.jg}}
                        </td>
                        <td>
                            {{rowData.g}}
                        </td>
                        <td>
                            {{rowData.z}}
                        </td>
                        <td>
                            {{rowData.d}}
                        </td>
                        <td>
                            {{rowData.gbdm1}}
                        </td>
                        <td>
                            {{rowData.gbdm2}}
                        </td>
                        <td>
                            {{rowData.gbdm3}}
                        </td>
                        <td>
                            {{rowData.gbdm4}}
                        </td>
                        <td>
                            {{rowData.gbdm5}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- end: BOOTSRAP NAV TREE