zuel-itsm-3.0.2/assets/views/report/analysis.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;
    }
    
    .upreport {
        color: #bf2939;
    }
    
    .downreport {
        color: #81d425;
    }
    
    .normalreport {
        color: #81abcb;
    }
    
    .iconfontsmall {
        font-family: iconfont!important;
        font-size: 14px;
        /* color: #005395; */
        z-index: 1;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: .2px;
    }
</style>
<div ng-style="bodyheight">
    <div class="backcopycolor col-xs-12 padding-15">
        <div ng-controller="reportanalysisCtrl" 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" ng-change="changeForm(parameters.paramDateFrom)" ng-model="parameters.paramDateFrom" min-mode='year' min-modeon='year' max-date="parameters.paramDateTo" datepicker-mode=yeardata 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" ng-change="changeTo(parameters.paramDateTo)" ng-model="parameters.paramDateTo" hour-time=true min-date="parameters.paramDateFrom" min-mode='year' min-modeon='year' datepicker-mode=yeardata
                                        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-right" style="width:158px" ng-model="searchkeys.area" theme="bootstrap" ng-change="onChangearea(searchkeys)">
                                        <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 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-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="analysis" 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 ng-repeat="x in headerslist  track by $index">
                            {{x}}
                        </th>
                    </tr>
                </thread>
                <tbody class="tbody-hover">
                    <tr ng-repeat="rowData in listsum">
                        <td>{{rowData.date}}
                        </td>
                        <td>
                            {{rowData.sum}}
                        </td>
                        <td>
                            <span ng-if="rowData.allzzl!='-'&&rowData.allzzl>0" class="icon iconfontsmall icon-up  upreport" style="font-size: 12px"></span><span ng-if="rowData.allzzl!='-'&&rowData.allzzl==0" class="icon iconfontsmall icon-chiping  normalreport"></span>
                            <span ng-if="rowData.allzzl!='-'&&rowData.allzzl<0" class="icon iconfontsmall icon-xiajiang  downreport"></span> {{rowData.allzzl}}%
                        </td>
                        <td ng-repeat="rowDatas in rowData.all track by $index">
                            <div class="padding-right-10">{{rowDatas.category}}
                            </div>
                            <div><span ng-if="rowDatas.zzl!='-'&&rowDatas.zzl>0" class="icon iconfontsmall icon-up  upreport" style="font-size: 12px"></span><span ng-if="rowDatas.zzl!='-'&&rowDatas.zzl==0" class="icon iconfontsmall icon-chiping  normalreport"></span>
                                <span ng-if="rowDatas.zzl!='-'&&rowDatas.zzl<0" class="icon iconfontsmall icon-xiajiang  downreport"></span>{{rowDatas.zzl}}%
                            </div>
                        </td>
                        <!-- <td ng-repeat="rowData in rRows track by $index">
                          
                            <div ng-if="$index%2==0">{{rowData['zzl'+$index]}}
                            </div>
                        </td> -->
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
<!-- end: BOOTSRAP NAV TREE