zuel-itsm-3.0.2/assets/views/report/suorce.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;
    }
    
    .cs-skin-slide>span {
        height: 34px;
    }
</style>
<div ng-style="bodyheight">
    <div class="backcopycolor col-xs-12 padding-15">
        <div ng-controller="reportsuorceCtrl" 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">
                                    <select class="form-control" ng-model="phone" ng-change="phoneChange(phone)">  
                                        <option ng-repeat="x in runNumber" value="{{x.name}}">{{x.name}}</option>  
                                    </select>
                                </div> -->
                                <!-- <div class="form-group" style="min-width:158px;">
                                    <select ng-model="searchTypes" class="cs-select cs-skin-slide">
                                              <option value="">近7天</option>				
                                            <option value="todo" ng-attr-class="{searchTypes=='todo'?'cs-selected':''}">最近30天</option>
                                            <option value="create" ng-attr-class="{searchTypes=='create'?'cs-selected':''}">最近30天</option>
                                            <option value="done" ng-attr-class="{searchTypes=='done'?'cs-selected':''}">最近半年</option>
                                        </select>
                                </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 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('all')" 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="reportsuorce" style="width: 100%;height: 200px"></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="liuliangsuorce" 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>
                            序号
                        </th>
                        <th>
                            事件来源
                        </th>
                        <th>
                            事件总数（件）
                        </th>
                        <th>
                            事件占比（%）
                        </th>
                    </tr>
                </thread>
                <tbody class="tbody-hover">
                    <tr ng-repeat="rowData in rRowssuorce">
                        <td>
                            <div>{{$index+1}}</div>
                        </td>
                        <td>
                            <div>{{rowData._name}}</div>
                        </td>
                        <td>
                            <div>{{rowData._count}}</div>
                        </td>
                        <td>
                            <div>{{rowData.percentage}}%</div>
                        </td>
                        <!-- <td ng-repeat="fieldData in rowData">
                            <div>{{fieldData.value.value}}</div>
                        </td> -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- end: BOOTSRAP NAV TREE