zuel-itsm-3.0.2/assets/views/working/statistics.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="workingStatisticsCtrl">
        <div class="service_head">
            <div class="deck_head_L ac">
                <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 clearfix">
                    <!-- 选择日期 -->
                    <div class="selectDate P-0 fl">
                        <div class="selectDate-hd clearfix">
                            <p class="fl">选择日期：</p>
                            <div class="lastDate fr"><span ng-class="{active:searchstate=='week'}"
                                    ng-click="chooseDate('week')">上一周</span>|<span
                                    ng-class="{active:searchstate=='month'}"
                                    ng-click="chooseDate('month')">上一月</span>
                                    <!-- |<span
                                    ng-class="{active:searchstate=='year'}"
                                    ng-click="chooseDate('year')">上一年</span>|<span
                                    ng-class="{active:searchstate=='today'}" ng-click="chooseDate('today')">今天</span> -->
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="form-group fl">
                                <input placeholder="开始日期" type="text" ng-readonly="true" class="form-control smallline"
                                    datepicker-popuptime="yyyy-MM-dd" ng-model="starttimesModel" max-date="endtimesModel"
                                    is-open="startOpened" ng-init="startOpened = false" ng-click="startOpen($event)" />
                                <i class="iconfont icon-yuqixinxiu form-dataIcon"></i>
                            </div>
                            <span class="form-line fl">一</span>
                            <div class="form-group fl">
                                <input placeholder="结束日期" type="text" ng-readonly="true" class="form-control smallline"
                                    datepicker-popuptime="yyyy-MM-dd" ng-model="endtimesModel" min-date="starttimesModel"
                                    max-date="nowtimes" is-open="endOpened" ng-init="endOpened = false"
                                    ng-click="endOpen($event)" />
                                <i class="iconfont icon-yuqixinxiu form-dataIcon"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 搜索重置 -->
                    <div class="col-xs-3 col-sm-3 pull-right P-0 searchBtnBox">
                        <div class="btn btn_search fl" ng-click="mdxquery(name, type)">搜索</div>
                        <div class="btn btn_reset fl" ng-click="reload(true)">重置</div>
                    </div>
                </form>
            </div>
            <!-- 上下班统计 -->
            <div class="deck_cont_body">
                <div class="deck_cont_body_TB1" ng-if="isArrays(zhtj_list)&&zhtj_list.length>0">
                    <div class="TB">
                        <div class="TB_cont">
                            <table class="jry_table jry_table_head" cellspacing="0" cellpadding="16"
                                style="font-weight:normal !important;table-layout:fixed">
                                <thead>
                                    <tr>
                                        <th style="width:5%">
                                            序号
                                        </th>
                                        <th style="width:19%" tooltip='姓名' tooltip-placement="top">
                                            姓名
                                        </th>
                                        <th style="width:19%" tooltip='上班打了卡，或者下班打了卡' tooltip-placement="top">
                                            打卡天数
                                        </th>
                                        <th style="width:19%" tooltip='必须打卡过，并且迟到了' tooltip-placement="top">
                                            迟到次数
                                        </th>
                                        <th style="width:19%" tooltip='必须打卡过，并且早退了' tooltip-placement="top">
                                            早退次数
                                        </th>
                                        <th style="width:19%" tooltip='必须上午打卡过了，并且下班未打卡' tooltip-placement="top">
                                            未打卡下班次数
                                        </th>
                                    </tr>
                                </thead>
                            </table>
                            <div class="jry_table_wrap" ng-nicescroll>
                                <table class="jry_table jry_table_body" cellspacing="0" cellpadding="16"
                                    style="font-weight:normal !important;margin-bottom: 16px;table-layout:fixed">
                                    <tbody class="tbody-hover service_form-hover">
                                        <tr ng-repeat="rowData in zhtj_list">
                                            <td style="width:5%">
                                                {{$index+1}}
                                            </td>
                                            <td style="width:19%">
                                                {{rowData[1]}}
                                            </td>
                                            <td class="cursor" style="width:19%" ng-click="goToDetail(rowData, '打卡天数', 'punch')">
                                                {{rowData[2]}}
                                            </td>
                                            <td class="cursor" style="width:19%" ng-click="goToDetail(rowData, '迟到次数', 'late')">
                                                {{rowData[3]}}
                                            </td>
                                            <td class="cursor" style="width:19%" ng-click="goToDetail(rowData, '早退次数', 'early')">
                                                {{rowData[4]}}
                                            </td>
                                            <td class="cursor" style="width:19%" ng-click="goToDetail(rowData, '未打卡下班次数', 'workEarly')">
                                                {{rowData[5]}}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="noData" ng-if="isArrays(zhtj_list)&&zhtj_list.length==0">查询无记录</div>
                <div class="noData" ng-if="!isArrays(zhtj_list)"><img src="/assets/images/loading.gif" alt=""></div>
            </div>
        </div>
    </div>
</div>
</div>
<style>
    p {
        margin-bottom: 0;
    }

    em,
    i,
    strong {
        font-style: normal;
    }

    .searchBtnBox {
        padding-top: 30px;
    }

    .deck_body {
        height: 100%;
        background: #f9f9f9;
        padding: 16px;
    }

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

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

    .service_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: 16px;
        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;
        padding: 16px 10px 16px 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: 16px;
    }

    .form-control.smallline {
        width: 120px;
        height: 34px;
        padding-left: 8px;
        padding-right: 8px;
        color: #999;
        font-size: 12px;
    }

    .deck_cont_body_TB1 {
        padding-top: 16px;
    }

    .deck_cont_body_TB2 {
        padding-top: 16px;
    }

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

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

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

    .TB_ITEM {
        float: left;
        margin-right: 16px;
        text-align: center;
    }

    .MR_15 {
        margin-right: 16px;
    }

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

    .TB_ITEM span {
        font-size: 24px;
        color: #333;
        line-height: 1.2;
    }

    .TB_LDZH{
        text-align: center;
    }

    .TB_LDZH p {
        font-size: 14px;
        color: #666
    }

    .TB_LDZH span {
        font-size: 32px;
        color: #333;
        line-height: 1.2;
    }

    .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%;
        /* overflow-x: hidden; */
        /* overflow-y: auto; */
    }

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

    .form-line {
        height: 34px;
        line-height: 34px;
        padding-left: 8px;
        padding-right: 8px;
        color: #979797;
    }

    .form-dataIcon {
        color: #ddd;
        font-size: 16px;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }

    .selectDate {
        width: 270px;
    }

    .selectDate .selectDate-hd {
        margin-bottom: 8px;
    }

    .selectDate .lastDate {
        color: #ddd;
    }

    .selectDate .lastDate span {
        margin-left: 4px;
        margin-right: 4px;
        color: #005395;
        font-size: 12px;
        cursor: pointer;
    }

    .selectDate .lastDate span.active {
        border-bottom: 1px solid #005395;
    }

    .selectDate .lastDate span:last-child {
        margin-right: 0;
    }

    .searchBtnBox .btn {
        width: 60px;
        height: 34px;
        line-height: 26px;
        margin: 0 0 0 8px;
    }

    .btn_search {
        background-color: #005395;
    }

    .btn_reset {
        background-color: #fff;
        border: 1px solid #ddd;
    }

    .btn_reset:hover {
        border: 1px solid #999;
        color: #666;
    }

    .btn_export {
        padding: 3px 16px;
        background-color: #e6eef4;
        border: 1px #005395 solid;
        color: #005395;
    }

    .btn_export:hover {
        color: #79a3c4;
        border-color: #79a3c4;
    }

    .TB_ITEMS {
        margin-left: 24px;
        margin-top: 10px;
    }

    /* table */
    .jry_table_wrap {
        margin-top: -1px;
        height: 310px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .jry_table {
        border: 1px solid #ddd;
        text-align: center;
        width: 100%;
        position: relative;
    }

    .jry_table_head {
        margin-top: 16px;
        background-color: #f9f9f9;
    }

    .jry_table_head th {
        cursor: pointer;
    }

    .jry_table_body .tbody-hover {
        width: 100%;
    }

    .jry_table_body .tbody-hover.service_form-hover td.cursor {
        cursor: pointer;
    }

    .jry_table_body .tbody-hover.service_form-hover td.cursor:hover {
        text-decoration: underline;
    }

    .jry_table th,
    .jry_table td {
        word-wrap: break-word;
        padding: 6px 8px;
        border: 1px solid #ddd;
    }

    .jry_table th {
        text-align: center;
        font-size: 13px;
    }

    .jry_table th strong {
        position: relative;
    }

    .sort-wrap {
        position: absolute;
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: normal;
    }

    .sortItem {
        font-size: 12px;
        color: #ddd;
        height: 12px;
        cursor: pointer;
        position: absolute;
    }

    .sortItem.active {
        color: #999;
    }

    .sortItem.icon-xiangshang {
        bottom: -2px;
    }

    .sortItem.icon-xiangxia {
        top: -2px;
    }
    /* 查询无记录 */
    .noData{
        font-size: 16px;
        text-align: center;
        font-weight: bold;
        margin-top: 16px;
        width: 100%;
        min-height: 420px;
    }

    .form-control.smallline {
        background-color: #fff;
    }
</style>