<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
        <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>数据完整性详情</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <link rel="stylesheet" href="${ctx}/css/tip.css">
    <style>

        body {
            overflow: hidden;
        }

        #integritylist {
            min-width: 2000px;
        }

        .tr {
            text-align: center;
        }

        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }

        .table > tbody > tr > td {
            padding: 5px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        .pagination > li > a, .pagination > li > span {
            padding: 6px 12px;
        }

    </style>
</head>
<body>
<div class="container-fluid">
<div class="form-inline header mt10">
    <table id="detail" class="table table-striped table-bordered dataTable no-footer width100">
        <thead>
        <tr>
            <th>统计时间</th>
            <th>应收数据量(条)</th>
            <th>实收数据量(条)</th>
            <th>数据完整率(%)</th>
            <th>备注</th>
        </tr>
        </thead>
    </table>
</div>
<input id="_startTime" value="${startTime}" hidden>
<input id="_endTime" value="${endTime}" hidden>
<input id="_timeType" value="${timeType}" hidden>
<input id="_lineId" value="${lineId}" hidden>
</body>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/color.js"></script>
<script type="text/javascript">
    var dataTable = null;

    $(function () {
        var i;
        var startTime = $("#_startTime").val();
        var endTime = $("#_endTime").val();
        var timeType = $("#_timeType").val();
        var lineId = $("#_lineId").val();
        //初始化区域
        $.ajax({
            type: "POST",
            url: "/pqs9000/area/integralityDetail",
            dataType: 'json',
            data: {
                timeType: timeType,
                startTime: startTime,
                endTime: endTime,
                lineId: lineId
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 500) {
                    layer.msg(data.message, {icon: 2, time: 2000})
                } else {
                    initTable(data.body);
                }
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    });


    function initTable(data) {
        var height = $(window).height() - 155;
        var length = Math.floor(height / 50);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#detail").DataTable();
        dataTable.clear().draw();
        dataTable = $('#detail').DataTable({
            columnDefs: [
                {
                    orderable: false,
                    targets: [0]
                }
            ],
            columns: [
                {width: "4%", data: "startTime"},
                {width: "2%", data: "due"},
                {width: "2%", data: "real"},
                {width: "2%", data: "rate"},
                {width: "4%", data: "explain"}
            ],
            destroy: true,
            data: data,
            paging: false,
            info: false,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            scrollX: "",
            lengthMenu: [length],
            language: {
                url: '/pqs9000/json/chine.json'
            }
        });
    }

</script>
</html>
