zuel-itsm-3.0.2/assets/views/report/efficiency.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;
    }
    
    .timecolor {
        color: #f30922;
    }
</style>
<div ng-style="bodyheight">
    <div class="backcopycolor col-xs-12 padding-15">
        <div ng-controller="reportefficiencyCtrl" 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>
                                    <!-- <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> -->
                                    <multi-select-tree ng-model="searchkeys.category" style="width:158px" data-input-model="select_treedata" data-output-model="my_data" 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="liuliangeff" 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 col-xs-12 padding-top-15 padding-bottom-15" style="overflow:scroll">
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                            <thread>
                                <tr>
                                    <th>
                                        响应事件总数（件）
                                    </th>
                                    <th>
                                        响应平均值（时长：分钟）
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in responsehead">
                                    <td>
                                        {{rowData.sum}}
                                    </td>
                                    <td>
                                        {{rowData.responsetime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                            <thread>
                                <tr>
                                    <th>
                                        序号
                                    </th>
                                    <th>
                                        处理人
                                    </th>
                                    <th>
                                        响应事件总数（件）
                                    </th>
                                    <th>
                                        响应平均值（时长：分钟）
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in responselist" ng-class="{'timecolor':rowData.responsetime>responsehead[0].responsetime}">
                                    <td>
                                        {{$index+1}}
                                    </td>
                                    <td>
                                        {{rowData.name}}
                                    </td>
                                    <td>
                                        {{rowData.sum}}
                                    </td>
                                    <td>
                                        {{rowData.responsetime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </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="liuliangtwo" 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 col-xs-12 padding-top-15 padding-bottom-15" style="overflow:scroll">
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                            <thread>
                                <tr>
                                    <th>
                                        解决事件总数（件）
                                    </th>
                                    <th>
                                        解决平均值（时长：分钟）
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in responsetwohead">
                                    <td>
                                        {{rowData.sum}}
                                    </td>
                                    <td>
                                        {{rowData.responsetime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                            <thread>
                                <tr>
                                    <th>
                                        序号
                                    </th>
                                    <th>
                                        处理人
                                    </th>
                                    <th>
                                        解决事件总数（件）
                                    </th>
                                    <th>
                                        解决平均值（时长：分钟）
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in responsetwolist" ng-class="{'timecolor':rowData.responsetime>responsetwohead[0].responsetime}">
                                    <td>
                                        {{$index+1}}
                                    </td>
                                    <td>
                                        {{rowData.name}}
                                    </td>
                                    <td>
                                        {{rowData.sum}}
                                    </td>
                                    <td>
                                        {{rowData.responsetime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </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="liuliangthree" 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 col-xs-12 padding-top-15 padding-bottom-15" style="overflow:scroll">
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                            <thread>
                                <tr>
                                    <th>
                                        逾期解决事件总数（件）
                                    </th>
                                    <th>
                                        逾期平均值（时长：分钟）
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in responsethreehead">
                                    <td>
                                        {{rowData.sum}}
                                    </td>
                                    <td>
                                        {{rowData.responsetime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="table table-bordered " cellspacing="0" cellpadding="20" style="font-weight:normal !important;margin-bottom: 15px;">
                            <thread>
                                <tr>
                                    <th>
                                        序号
                                    </th>
                                    <th>
                                        处理人
                                    </th>
                                    <th>
                                        响应事件总数（件）
                                    </th>
                                    <th>
                                        响应平均值（时长：分钟）
                                    </th>
                                </tr>
                            </thread>
                            <tbody class="tbody-hover">
                                <tr ng-repeat="rowData in responsethreelist" ng-class="{'timecolor':rowData.responsetime>responsethreehead[0].responsetime}">
                                    <td ng-class="{'timecolor':rowData.responsetime>responsethreehead[0].responsetime}">
                                        {{$index+1}}
                                    </td>
                                    <td>
                                        {{rowData.name}}
                                    </td>
                                    <td>
                                        {{rowData.sum}}
                                    </td>
                                    <td>
                                        {{rowData.responsetime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: BOOTSRAP NAV TREE-->