zuel-itsm-3.0.2/assets/views/report/deck_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 deck_body" ng-controller="deck_reportCtrl">
        <div class="deck_head">
            <div class="deck_head_L" ng-class="{ac:tap=='LDZS'}" ng-click="active('LDZS')">
                <span>来电总数</span>
            </div>
            <div class="deck_head_R" ng-class="{ac:tap=='LDZH'}" ng-click="active('LDZH')">
                <span>来电转换</span>
            </div>
        </div>
        <div class="deck_cont">
            <div class="deck_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(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 smallline" 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>
                    <div class="col-xs-2 col-sm-2 P-0">
                        <p class="">选择日期 :</p>
                        <div class="form-group">
                            <div class="">
                                <ui-select class="pull-right selectzise wt_width1 wt_width3"
                                    ng-model="searchkeys.dateSelected" theme="bootstrap"
                                    ng-change="onChangeDate(searchkeys.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-3 col-sm-3 P-0">
                        <p class="">选择人员 :</p>
                        <div class="form-group">
                            <div class="">
                                <ui-select class="pull-right selectzise wt_width1 wt_width3"
                                    ng-model="searchkeys.requester" theme="bootstrap">
                                    <ui-select-match placeholder="">
                                        {{$select.selected.name}}
                                    </ui-select-match>
                                    <ui-select-choices repeat="item in requester"
                                        refresh="onChangehandling($select.search)">
                                        <div ng-bind-html="item.name | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>

                                <!-- <ui-select class="pull-left" style="width:101px" ng-model="searchkeys.handlingPersonnelUser" theme="bootstrap">
                                        <ui-select-match placeholder="">
                                            {{$select.selected.name}}
                                        </ui-select-match>
                                        <ui-select-choices repeat="item in handlingPersonnelUser" refresh="onChangehandling($select.search)">
                                            <div ng-bind-html="item.name | highlight: $select.search"></div>
                                        </ui-select-choices>
                                    </ui-select> -->
                            </div>
                        </div>

                    </div>
                    <div class="col-xs-3 col-sm-3 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">重置</a>
                        </div>
                        <div class="form-group pull-right " style="margin-right: 15px;">
                            <button class="btn btn-searchbutton steelbutton" ng-click="mdxquery('all')" type="button">搜索</button>
                        </div> -->
                        <div class="btn btn_search" ng-click="mdxquery('all')">搜索</div>
                        <div class="btn btn_clean" ng-click="reload()" id="exportToPdf"
                            ng-disabled="disabledParentGroup">重置</div>
                    </div>
                </form>
            </div>
            <div class="deck_cont_body" ng-if="tap=='LDZS'">
                <div class="deck_cont_body_TB1">
                    来电转换总数
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L">
                                <div class="TB_LDZH">
                                    <p>来电转换 (个)</p>
                                    <span>300</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>正班时间</p>
                                        <span>300 &nbsp;15%</span>
                                    </div>
                                    <div class="TB_ITEM">
                                        <p>值班时间</p>
                                        <span>300 &nbsp;25%</span>
                                    </div>
                                    <div class="TB_ITEM">
                                        <p>非工作时间</p>
                                        <span>300 &nbsp;50%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="TB_head_R">
                                <div class="TB_ZHL">
                                    <p>来电转换率</p>
                                    <span>100%</span>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="ldzh">

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

                </div>
                <div class="deck_cont_body_TB2">
                    事件数量趋势分析
                    <div class="TB">
                        <div class="TB_cont">
                            <div id="sjfx">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="deck_cont_body" ng-if="tap=='LDZH'">
                <div class="deck_cont_body_TB1">
                    来电转换总数
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L">
                                <div class="TB_LDZH">
                                    <p>来电转换 (个)</p>
                                    <span>300</span>
                                </div>
                                <div class="TB_ITEMS">
                                    <div class="TB_ITEM">
                                        <p>直接处理 (件)</p>
                                        <span>300 &nbsp;15%</span>
                                    </div>
                                    <div class="TB_ITEM">
                                        <p>事件派单 (件)</p>
                                        <span>300 &nbsp;25%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="TB_head_R TB_head_R1">
                                <div class="TB_ZHL">
                                    <p>来电转换率</p>
                                    <span>100%</span>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="sjqs">

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

                </div>
                <div class="deck_cont_body_TB2">
                    来电转换事件派单
                    <div class="TB">
                        <div class="TB_head">
                            <div class="TB_head_L MR_15">
                                <div class="TB_ZHL">
                                    <p>来电转换事件派单 (个)</p>
                                    <span>100</span>
                                </div>
                            </div>
                            <div class="TB_head_R TB_head_R1 MR_15">
                                <div class="TB_ZHL">
                                    <p>请求重新指派 (个)</p>
                                    <span>100</span>
                                </div>
                            </div>
                            <div class="TB_head_R TB_head_R1 MR_15">
                                <div class="TB_ZHL">
                                    <p>派单准确率</p>
                                    <span>100%</span>
                                </div>
                            </div>
                        </div>
                        <div class="TB_cont">
                            <div id="sjpd">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="deck_cont_body_TB2">
                    来电接听TOP排名
                    <div class="TB">
                        <div class="TB_cont">
                            <div class="TB_LB">
                                <div class="TB_LB_head">
                                    <div class="TB_LB_item" style="width: 10%;">序号</div>
                                    <div class="TB_LB_item" style="width: 10%;">姓名</div>
                                    <div class="TB_LB_item" style="width: 14%;">接听总数 (个)</div>
                                    <div class="TB_LB_item" style="width: 14%;">来电接听率</div>
                                    <div class="TB_LB_item" style="width: 10%;">直接处理</div>
                                    <div class="TB_LB_item" style="width: 14%;">事件转派</div>
                                    <div class="TB_LB_item" style="width: 14%;">来电转换率</div>
                                    <div class="TB_LB_item" style="width: 14%;">派单准确率</div>
                                </div>
                                <div class="TB_LB_body">
                                    <div class="TB_LB_item" style="width: 10%;">1</div>
                                    <div class="TB_LB_item" style="width: 10%;">2</div>
                                    <div class="TB_LB_item" style="width: 14%;">3</div>
                                    <div class="TB_LB_item" style="width: 14%;">4</div>
                                    <div class="TB_LB_item" style="width: 10%;">5</div>
                                    <div class="TB_LB_item" style="width: 14%;">6</div>
                                    <div class="TB_LB_item" style="width: 14%;">7</div>
                                    <div class="TB_LB_item" style="width: 14%;">8</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<style>

.searchBtnBox>.btn{
        margin: 0 8px 10px 0;
    }
    .deck_body {
        height: 100%;
        background: #f9f9f9;
        padding: 15px;
    }

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

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

    .deck_head .deck_head_R {
        float: left;
        width: 50%;
        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;
    }

    .deck_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;
    }

    .deck_cont_head {
        border-bottom: 1px solid #EAEAEA;
        background: #f9f9f9;
        /* overflow: hidden; */
        padding: 15px 10px 15px 10px;
        zoom: 1;
    }
    .deck_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;
    }

    .deck_cont_body_TB1 {
        padding-top: 15px;
    }

    .deck_cont_body_TB2 {
        padding-top: 15px;
    }

    .TB {
        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;
    }

    .MR_15 {
        margin-right: 15px;
    }

    .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 #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;
    }

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

    .btn-default {
        height: 30px;
    }
</style>