zuel-itsm-3.0.2/assets/views/report/incident_report.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>
<div class="col-md-12 col-sm-12">
    <div class="row incident_body" ng-controller="incident_reportCtrl">
        <div class="incident_head">
            <div class="incident_head_L" ng-class="{ac:tap=='QSFX'}" ng-click="active('QSFX')">
                <span>事件趋势分析</span>
            </div>
            <div class="incident_head_R" ng-class="{ac:tap=='YWBB'}" ng-click="active('YWBB')">
                <span>事件运维报表</span>
            </div>
            <div class="incident_head_L" ng-class="{ac:tap=='FLBB'}" ng-click="active('FLBB')">
                <span>事件分类报表</span>
            </div>
            <div class="incident_head_R" ng-class="{ac:tap=='LYBB'}" ng-click="active('LYBB')">
                <span>事件来源报表</span>
            </div>
        </div>
        <div class="incident_cont">
            <div class="incident_cont_head">
                <form class="col-xs-12 col-sm-12 form-inline P-0">
                    <div class="col-xs-3 col-sm-3 P-0">
                        <p class="">选择日期 :</p>
                        <div class="form-group">
                            <input type="text" class="form-control smallline" datepicker-popuptime="yyyy-MM-dd"
                                ng-change="changeForm(searchkeys.startTime)" ng-model="searchkeys.startTime"
                                max-date="searchkeys.endTime" 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 smallline" datepicker-popuptime="yyyy-MM-dd"
                                ng-change="changeTo(searchkeys.endTime)" ng-model="searchkeys.endTime" hour-time=true
                                min-date="searchkeys.startTime" is-open="endOpened" ng-init="endOpened = false"
                                close-text="关闭" ng-click="endOpen($event)" />
                        </div>
                    </div>
                    <div class="col-xs-1 col-sm-1 P-0 mr8">
                        <p class="">选择日期 :</p>
                        <div class="form-group">
                            <div class="">
                                <ui-select style="width:100px;" class="pull-right wt_width1 wt_width3"
                                    ng-model="dateChoose.dateSelected" theme="bootstrap"
                                    ng-change="onChangeDate(dateChoose.dateSelected.id)">
                                    <ui-select-match placeholder="日期选择">
                                        {{$select.selected.name}}
                                    </ui-select-match>
                                    <ui-select-choices repeat="item in dateSelected">
                                        <div ng-bind-html="item.name | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xs-2 col-sm-2 P-0 mr8" ng-if="tap=='YWBB'">
                        <p>工作组:</p>
                        <div class="iptSize" style="display:inline">
                            <div>
                                <multi-select-tree ng-model="group.id" data-input-model="select_treedata"
                                    data-output-model="cifilter_classics" theme="bootstrap" multi-select="false"
                                    data-default-label="工作组选择..." data-callback="onFilterGroup(item)"
                                    data-select-only-leafs="true" reset-search-input="false"
                                    data-trans-label="groupName" data-switch-view="false"></multi-select-tree>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 P-0 mr8" ng-if="tap=='QSFX'||tap=='FLBB'">
                        <p class="">区域选择 :</p>
                        <div class="form-group">
                            <div class="">
                                <ui-select class="selectzise wt_width1 wt_width3" ng-model="area_place.areaId" theme="bootstrap"
                                ng-change="onChangearea(area_place)">
                                <ui-select-match placeholder="请选择区域">
                                    {{$select.selected.area}}
                                </ui-select-match>
                                <ui-select-choices repeat="item in outarea | filter: $select.search">
                                    <div ng-bind-html="item.area | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 P-0 mr8" ng-if="tap=='QSFX'||tap=='FLBB'">
                        <p class="">地点选择 :</p>
                        <div class="form-group">
                            <div class="">
                                <ui-select class="selectzise wt_width1 wt_width3" ng-model="area_place.placeId" theme="bootstrap"
                                ng-change="onChangeplace(area_place)">
                                <ui-select-match placeholder="请选择地点">
                                    {{$select.selected.place}}
                                </ui-select-match>
                                <ui-select-choices repeat="item in outplace | filter: $select.search">
                                    <div ng-bind-html="item.place | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs- col-sm-2 P-0 mr8" ng-if="tap=='YWBB'||tap=='FLBB'">
                        <p class="">事件类型:</p>
                        <div class="iptSize" style="display:inline">
                            <div>
                                <multi-select-tree ng-model="model.inspectionProcessActual.inspectionType"
                                    data-input-model="my_data"
                                    data-output-model="model.inspectionProcessActual.inspectionType" theme="bootstrap"
                                    multi-select="false" data-default-label="事件类型选择"
                                    data-callback="onFilterCategary(item)" data-select-only-leafs="true"
                                    reset-search-input="false" data-trans-label="label" data-switch-view="false">
                                </multi-select-tree>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-1 col-sm-1 pull-right P-T-15 P-0 searchBtnBox">
                        <!-- <div class="form-group pull-right">
                            <a class="btn btn-zancun zancunlistheight" id="exportToPdf"
                                ng-disabled="disabledParentGroup" type="button" ng-click="report_Reset()" Reset>重置</a>
                        </div>
                        <div class="form-group pull-right " style="margin-right: 15px;">
                            <button class="btn btn-searchbutton steelbutton" ng-click="report_datas()"
                                type="button">搜索</button>
                        </div> -->
                        <div class="btn btn_search" ng-click="report_datas()">搜索</div>
                        <div class="btn btn_clean" ng-click="report_Reset()">重置</div>

                    </div>
                </form>
            </div>
            <!-- 事件趋势分析 -->
            <div class="incident_cont_body" ng-if="tap=='QSFX'">
                <div class="incident_cont_body_TB1">
                    事件数量趋势分析
                    <div class="TB">
                        <div class="TB_cont">
                            <div id="ldzh">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="incident_cont_body_TB2">
                    <div class="incident_cont_body_H">
                        <div class="incident_cont_body_HL">
                            <span>事件分类趋势分析</span>
                        </div>
                        <div class="incident_cont_body_HR">
                            <!-- <div class="incident_cont_body_btn" ng-class="{ac1:tap1=='flxq'}"
                                ng-click="active1('flxq')">
                                分类详情
                            </div> -->
                            <div class="incident_cont_body_btn" ng-class="{ac1:tap1=='flqs'}"
                                ng-click="active1('flqs')">
                                分类趋势图
                            </div>
                            <div class="incident_cont_body_btn" ng-class="{ac1:tap1=='flxq'}" ng-click="active1('flxq')">
                                分类详情
                            </div>

                        </div>
                    </div>
                    <div class="TB">
                        <div class="TB_cont" ng-if="tap1=='flqs'">
                            <div id="sjfx">

                            </div>
                        </div>
                        <div class="TB_cont1" ng-if="tap1=='flxq'">
                            <!-- <div class="TB_cont_BT" ng-repeat="item in BTdata.dates">
                                <p>{{item}}</p>
                                <div id=item{{$index}} style="height: 170px;">

                                </div>
                            </div> -->
                            <div class="TB_cont_BT" ng-repeat="item in BTdata.dates" >
                                <p>{{item}}</p>
                                <div id=item{{$index}} style="height: 268px;" >

                                </div>
                                <!-- <div id=item{{$index}} style="height: 170px;" >
                                    暂无数据
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 事件运维报表 -->
            <div class="incident_cont_body" ng-if="tap=='YWBB'">
                <div class="incident_cont_body_TB1">
                    事件运维效率
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L MR_15 BB">
                                <div class="TB_LDZH">
                                    <p>响应事件总数 (件)</p>
                                    <span>{{YWXL_Datas.responseCount[0].num}}</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>响应平均时长</p>
                                        <span>{{YWXL_Datas.responseCount[0].responsetime||0}}'</span>
                                    </div>
                                </div>
                            </div>
                            <div class="TB_head_R TB_head_R1 BR">
                                <div class="TB_LDZH">
                                    <p>解决事件总数 (件)</p>
                                    <span>{{YWXL_Datas.solveCount[0].num}}</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>解决平均时长</p>
                                        <span>{{YWXL_Datas.solveCount[0].solvetime||0}}'</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="sjqs">

                            </div>
                        </div>
                    </div>

                </div>
                <div class="incident_cont_body_TB2">
                    事件运维详情
                    <div class="TBYW">
                        <div class="TB_cont_YW">
                            <div style="height: 300px;">
                                <div class="TB_cont_BT_YW" style="margin-right: 1%;">
                                    <div id='XYSJ' style="height: 300px;">

                                    </div>
                                </div>
                                <div class="TB_cont_BT_YW">
                                    <div id='JJSJ' style="height: 300px;">

                                    </div>
                                </div>
                            </div>
                            <div class="TB_cont_BT_YW1">
                                <div id='JJSJZZ' style="height: 100%;">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="incident_cont_body_TB2">
                    事件运维转派, 协同, 升级
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L MR_15 ZP">
                                <div class="TB_LDZH">
                                    <p>发起转换事件总数 (件)</p>
                                    <span>300</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>接受转换事件总数 (件)</p>
                                        <span>300</span>
                                    </div>
                                </div>
                            </div>
                            <div class="TB_head_R TB_head_R1 MR_15 SJ">
                                <div class="TB_LDZH">
                                    <p>发起升级事件总数 (件)</p>
                                    <span>300</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>接受升级事件总数 (件)</p>
                                        <span>300</span>
                                    </div>
                                </div>
                            </div>
                            <div class="TB_head_R TB_head_R1 XT">
                                <div class="TB_LDZH">
                                    <p>发起协同事件总数 (件)</p>
                                    <span>300</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>接受协同事件总数 (件)</p>
                                        <span>300</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="sjpd">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="incident_cont_body_TB2">
                    事件运维满意度
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L MR_15 ZP">
                                <div class="TB_LDZH">
                                    <p>解决事件总数 (件)</p>
                                    <span>{{YWMYD_Datas[0].proportion}}%</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>满意度 (%)</p>
                                        <span>{{YWMYD_Datas[0].sum}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="jjmyd" style="height: 100%;">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="incident_cont_body_TB2">
                    事件运维解决TOP排名
                    <div class="TB">
                        <div class="TB_cont table">
                            <div class="TB_LB">
                                <div class="TB_LB_head">
                                    <div class="TB_LB_item" style="width: 6%;">序号</div>
                                    <div class="TB_LB_item" style="width: 10%;">处理组/人</div>
                                    <div class="TB_LB_item" style="width: 15%;cursor: pointer;"
                                        ng-click='YWTop_Data("sum")'>事件总数 (件)
                                        <span>↑</span> <span>↓</span>
                                    </div>
                                    <div class="TB_LB_item" style="width: 12%;cursor: pointer;">响应事件总数 (件)</div>
                                    <div class="TB_LB_item" style="width: 15%;" ng-click='YWTop_Data("responsetime")'>
                                        响应平均时长 (分)
                                        <span>↑</span> <span>↓</span>
                                    </div>
                                    <div class="TB_LB_item" style="width: 15%;cursor: pointer;"
                                        ng-click='YWTop_Data("solveSum")'>解决事件总数 (件)
                                        <span>↑</span> <span>↓</span>
                                    </div>
                                    <div class="TB_LB_item" style="width: 15%;cursor: pointer;"
                                        ng-click='YWTop_Data("solvetime")'>解决平均时长 (分)
                                        <span>↑</span> <span>↓</span>
                                    </div>
                                    <div class="TB_LB_item" style="width: 12%;">满意度 (%)</div>
                                </div>
                                <div class="body">
                                    <div class="TB_LB_body" ng-repeat='(idx,val) in YWBB_table_data'>
                                        <div class="TB_LB_item" style="width: 6%;">
                                            <span ng-class="{'num1':idx==0,'num2':idx==1,'num3':idx==2}">
                                                <span class="txt">{{idx+1}}</span>
                                            </span>
                                        </div>
                                        <div class="TB_LB_item" style="width: 10%;">{{val.name}}</div>
                                        <div class="TB_LB_item" style="width: 15%;">{{val.sum}}</div>
                                        <div class="TB_LB_item" style="width: 12%;">{{val.responseSum}}</div>
                                        <div class="TB_LB_item" style="width: 15%;">{{val.responsetime}}</div>
                                        <div class="TB_LB_item" style="width: 15%;">{{val.solveSum}}</div>
                                        <div class="TB_LB_item" style="width: 15%;">{{val.solvetime}}</div>
                                        <div class="TB_LB_item" style="width: 12%;">{{val.myd}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 事件分类报表 -->
            <div class="incident_cont_body" ng-if="tap=='FLBB'">
                <div class="incident_cont_body_TB1">
                    事件分类统计
                    <div class="TB">
                        <div id='sjflqs' style="height: 349px;">
                        </div>
                    </div>

                </div>
                <div class="incident_cont_body_TB2">
                    事件分类趋势图
                    <div class="TB">
                        <div class="TB_cont">
                            <div id="sjfltj" style="height: 349px;">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="incident_cont_body_TB2">
                    事件区域与事件分类分析图
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L MR_15 ZP">
                                <div class="TB_LDZH">
                                    <p>事件总数 (件)</p>
                                    <span>300</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>工作时间 (%)</p>
                                        <span>300%</span>
                                    </div>
                                    <div class="TB_ITEM">
                                        <p>值班时间 (%)</p>
                                        <span>300%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="qysjfx" style="height: 100%;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 事件来源报表 -->
            <div class="incident_cont_body" ng-if="tap=='LYBB'">
                <div class="incident_cont_body_TB1">
                    事件来源统计
                    <div class="TB" style="padding-top: 0px;padding-bottom: 0px;">
                        <div id='sjlyqs' style="height: 349px;">
                        </div>
                    </div>

                </div>
                <div class="incident_cont_body_TB2">
                    事件来源趋势图
                    <div class="TB">
                        <div class="TB_cont">
                            <div id="sjlytj" style="height: 349px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<style>
    .searchBtnBox>.btn{
        margin: 0 8px 10px 0;
    }
    .incident_body {
        height: 100%;
        background: #f9f9f9;
        padding: 15px;
    }

    .incident_head {
        height: 50px;
        width: 100%
    }

    .incident_head .incident_head_L {
        float: left;
        width: 25%;
        height: 100%;
        text-align: center;
        border-top: 5px solid #EAEAEA;
        color: #717171;
        font-size: 14px;
        line-height: 45px;
        cursor: pointer;
    }

    .incident_head .incident_head_R {
        float: left;
        width: 25%;
        height: 100%;
        text-align: center;
        border-top: 5px solid #EAEAEA;
        color: #717171;
        font-size: 14px;
        line-height: 45px;
        cursor: pointer;
    }

    .ac {
        background: #E6EEF4;
        color: #353535 !important;
        border-top: 5px solid #79A3C4 !important;
    }

    .ac1 {
        background: #005395;
        color: #fff !important;
    }

    .incident_cont {
        width: 100%;
        height: 100%;
        padding: 15px;
        background: #fff;
        border-width: 0px 1px 1px 1px;
        border-width: 0px 1px 1px 1px;
        border-color: #EAEAEA;
        border-style: solid;
    }

    .incident_cont_head {
        border-bottom: 1px solid #EAEAEA;
        background: #f9f9f9;
        /* overflow: hidden; */
        padding: 15px 10px 15px 10px;
        zoom: 1;
    }
    .incident_cont_head::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

    .P-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .P-T-15 {
        padding-top: 15px;
    }

    .form-control.smallline {
        height: 30px;
    }

    .incident_cont_body_TB1 {
        padding-top: 15px;
    }

    .incident_cont_body_TB2 {
        padding-top: 15px;
    }

    .TB {
        margin-top: 10px;
        border: 1px solid #EAEAEA;
        padding: 20px;
    }

    .TBYW {
        margin-top: 10px;
        /* border: 1px solid #EAEAEA; */
        /* padding: 20px; */
    }

    .TB_head {
        width: 100%;
        height: 90px
    }

    .TB_head_L {
        float: left;
        height: 100%;
        border-left: 5px solid #005395;
        padding: 0px 15px;
    }

    .TB_head_R {
        float: left;
        height: 100%;
        border-left: 5px solid #49A9EE;
        padding: 0px 15px;
    }

    .TB_ITEM {
        float: left;
        margin-right: 15px;
    }

    .tree-control .tree-input {
        border-radius: 2px;
    }

    .MR_15 {
        margin-right: 15px;
    }

    .MR_12 {
        margin-right: 12px;
    }

    .TB_ITEM p {
        font-size: 12px;
        color: #7B7B7B
    }

    .TB_ITEM span {
        font-size: 18px;
        font-weight: 600;
    }

    .TB_LDZH p {
        font-size: 12px;
        color: #7B7B7B
    }

    .TB_LDZH span {
        font-weight: 600;
        font-size: 22px;
    }

    .TB_ZHL {
        height: 100%;
        padding-top: 22px;
    }

    .TB_ZHL p {
        font-size: 12px;
        color: #7B7B7B
    }

    .TB_ZHL span {
        font-weight: 600;
        font-size: 22px;
    }

    .TB_cont {
        height: 350px;
        width: 100%;
    }

    .TB_cont.table {
        height: unset;
        min-height: 200px;
    }

    .TB_cont_YW {
        /* height: 700px; */
        width: 100%;
    }

    .TB_cont1 {
        width: 100%;
    }

    .TB_cont_BT {
        width: 49%;
        height: 300px;
        display: inline-block;
        border: 1px solid #EAEAEA;
        margin-bottom: 10px;
        padding: 0px 15px;
    }

    .TB_cont_BT_YW {
        width: 49.5%;
        height: 300px;
        float: left;
        /* display: inline-block; */
        border: 1px solid #EAEAEA;
        margin-bottom: 10px;

    }

    .TB_cont_BT_YW1 {
        width: 100%;
        height: 350px;
        /* display: inline-block; */
        border: 1px solid #EAEAEA;
        /* margin-bottom: 10px; */
        /* padding: 0px 15px; */
        padding: 15px;
        margin-top: 1%;
    }

    .TB_cont_BT p {
        height: 30px;
        line-height: 29px;
        border-bottom: 1px solid #EAEAEA;
    }

    .TB_cont_BT:nth-child(odd) {
        margin-right: .5%
    }

    .TB_cont #ldzh {
        height: 100%;
    }

    .TB_cont #sjfx {
        height: 100%;
    }

    .TB_cont #sjqs {
        height: 100%;
    }

    .TB_cont #sjpd {
        height: 100%;
    }

    .TB_head_R1 {
        border-color: #005395;
    }

    .TB_LB {
        height: 100%;
        width: 100%;
        border: 1px solid #EAEAEA;
    }

    .TB_LB_head {
        height: 50px;
        background: #FAFAFA;
        border-bottom: 1px solid #EAEAEA;
        color: #333;
        font-size: 14px;
    }

    .TB_LB_body {
        height: 40px;
        border-bottom: 1px solid #EAEAEA;
        color: #7B7B7B;
    }

    .TB_LB_item {
        height: 100%;
        float: left;
        text-align: center;
        line-height: 40px;
        border-right: 1px solid #EAEAEA;
        position: relative;
    }

    .TB_LB_head .TB_LB_item {
        line-height: 50px;
        font-weight: 600;
    }

    .num1 .txt,
    .num2 .txt,
    .num3 .txt {
        z-index: 99999;
        position: absolute;
        color: white;
        font-size: 19px;
    }

    .num1::after {
        content: "";
        height: 30px;
        color: #fff;
        font-size: 19px;
        display: inline-block;
        border: 12px solid #BE2636;
        border-bottom: 6px solid #fff;
        background: #BE2636;
        position: absolute;
        top: 5px;
        right: 50%;
        margin-right: -16px;
    }

    .num2::after {
        content: "";
        height: 30px;
        color: #fff;
        font-size: 19px;
        display: inline-block;
        border: 12px solid #F5A623;
        border-bottom: 6px solid #fff;
        background: #F5A623;
        position: absolute;
        top: 5px;
        right: 50%;
        margin-right: -16px;
    }

    .num3::after {
        content: "";
        height: 30px;
        color: #fff;
        font-size: 19px;
        display: inline-block;
        border: 12px solid #FFCE3D;
        border-bottom: 6px solid #fff;
        background: #FFCE3D;
        position: absolute;
        top: 5px;
        right: 50%;
        margin-right: -16px;
    }

    .btn-default {
        height: 30px;
    }

    .incident_cont_body_H {
        height: 30px;
    }

    .incident_cont_body_HL {
        float: left;
    }

    .incident_cont_body_HR {
        float: right;
    }

    .incident_cont_body_btn {
        width: 100px;
        height: 28px;
        float: left;
        border: 1px solid #094A7F;
        text-align: center;
        line-height: 26px;
        color: #005395;
        cursor: pointer;
        border-radius: 2px;
    }

    .BB {
        border-color: #49A9EE
    }

    .BR {
        border-color: #87C966
    }

    .ZP {
        border-color: #005395
    }

    .SJ {
        border-color: #87C966
    }

    .XT {
        border-color: #79A3C4
    }
    .mr8{
        margin-right: 8px;
    }
    .mr8 .selectzise,
    .mr8 .form-group{
        width:100%;
    }
</style>