{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 内容 */

        .tableDiv {
            display: table;
            width: 100%;
        }

        .tableDiv>div {
            display: table-cell;
        }

        .equipListDiv {
            width: 233px;
            /* height: 751px; */
            position: absolute;
        }

        .searchInp {
            text-align: center;
            margin: 10px 0;
            position: relative;
            height: 40px;
        }

        .searchInp>input {
            line-height: 30px;
            font-size: 14px;
            border: 1px solid #d9d9d9;
            width: 93%;
            padding-left: 5px;
            position: absolute;
            left: 10px;
        }

        .searchInp>button {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 31px;
            background: #bbb;
            color: #fff;
        }

        .searchInp>button:hover {
            background: #8B9AA3;
        }

        .searchInp>button span {
            padding: 0 10px;
        }

        .equipListUl>li {
            padding-left: 30px;
            color: #333;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .equipListUl>li:before {
            position: absolute;
            content: '';
            width: 7px;
            height: 7px;
            background: #1e9fff;
            border-radius: 50%;
            margin-top: -3.5px;
            top: 50%;
            left: 15px;
        }

        .equipListUl>li.active:before {
            background: #3ab851
        }

        .equipListUl>li.active {
            background: #eee;
        }

        .equipListUl>li i {
            font-size: 12px;
            margin-right: 10px;
            color: #41baff;
        }

        .searchCover input {
            color: #858585;
            background-color: #FFF;
            border: 1px solid #D5D5D5;
            padding: 5px 4px 6px;
            width: 200px;
        }

        .page {
            text-align: center;
            padding: 10px 0;
        }

        .page span {
            padding: 0 5px;
            vertical-align: middle;
        }

        .page span i {
            font-size: 28px;
            cursor: pointer;
            vertical-align: middle;
        }

        .page span i:hover {
            color: #1E9FFF;
        }

        /* 主体 */

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .rightDiv {
            min-height: 730px;
            margin-left: 240px;
            border-left: 1px solid #dbdbdb;
            padding: 20px;
        }

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }

        .newStatusBox>div {
            width: 20%;
            margin: 15px 0;
        }

        .dev .devLeft {
            width: 30%;
            text-align: right;
        }


        .dev .devRight {
            padding-left: 15px;
            line-height: 33px;
            font-size: 14px;
            width: 60%;
        }

        .dev .devRight .val {
            font-size: 20px;
        }

        .dev .devRight .wayName {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        /* 统计图 */

        .analysisChart {
            padding: 20px 0;
        }

        .echart {
            height: 400px;
        }

        /* 搜索时间段 */

        .layui-form-label {
            font-size: 16px;
            padding: 5px 15px;
        }

        .layui-input {
            font-size: 14px;
            color: #333;
            background-color: #FFF;
            font-weight: 100;
            width: 188px;
            line-height: 30px;
            height: 30px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a href="info_pub" target="BoardRight">首页</a>
                <a>
                    <cite>数据分析</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div>
            <div class="">
                <div class="equipListDiv">
                    <div class="searchInp">
                        <input type="text" id="searchImei" autocomplete="off" placeholder="请输入设备ID搜索">
                        <button id="searchBtn">
                            <span class="iconfont"><i class="layui-icon layui-icon-search"></i></span>
                        </button>
                    </div>
                    <ul class="equipListUl">
                    </ul>
                    <div class="page">
                        <span onclick="gotofirstpage()">
                            <i class="iconfont">&#xe661;</i>
                        </span>
                        <span onclick="changePage('jian')">
                            <i class="iconfont">&#xe728;</i>
                        </span>
                        <span>1</span>
                        <span>/</span>
                        <span id="totelpage">3</span>
                        <span onclick="changePage('add')">
                            <i class="iconfont">&#xe601;</i>
                        </span>
                    </div>
                </div>
                <div class="rightDiv">
                    <div>
                        <div class="searchCover tablesearchCover">
                            时间段搜索：
                            <input type="text" id="timSelectBox" autocomplete="off" placeholder="请选择时间段 ">
                            <input type="hidden" id="tableBegin" name="begin">
                            <input type="hidden" id="tableEnd" name="end">
                            <button type="button" onclick="table_filter()" class="layui-btn layui-btn-sm layui-btn-normal">筛选</button>
                            <button type="button" class="layui-btn layui-btn-sm" onclick="decideExport()">导出</button>
                        </div>
                        <div>
                            <div>
                                <table id="datatable" class="table layui-table table-bordered table-hover"></table>
                            </div>
                            <div class="fenpei-bottom">
                                <div id="page"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="qxzPhotoId">


    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/lib/js/echarts.min.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script src="{% static '/lib/js/qxz_dict.js'%}"></script>
    <script>
        var currPage = 1, totelpage;
        var layer, element, laydate, laypage;
        layui.use(['element', 'layer', 'laydate', 'laypage'], function () {
            element = layui.element;
            layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            getEquipList(1, '');
            // 搜索
            $('#searchBtn').on('click', function () {
                getEquipList(1, $('#searchImei').val())
            });
            $('#searchImei').on('keyup', function (event) {
                if (event.keyCode == 13) {
                    getEquipList(1, $('#searchImei').val())
                }
            })
            //执行一个laydate实例
            laydate.render({
                elem: '#timSelectBox' //指定元素
                , range: true
                , done: function (value, date) {
                    var dateArray = value.split(' - ')
                    $('#tableBegin').val(dateArray[0])
                    $('#tableEnd').val(dateArray[1])
                }
            });
        })
        // 首页
        function gotofirstpage() {
            currpage = 1;
            $('#currentpage').html(1);
            getEquipList(1, $('#searchImei').val())
            // 搜索
            $('#searchBtn').on('click', function () {
                getEquipList(1, $('#searchImei').val())
            });
            $('#searchImei').on('keyup', function (event) {
                if (event.keyCode == 13) {
                    getEquipList(1, $('#searchImei').val())
                }
            })
        }
        var currpage = 1;
        function changePage(symbol) {
            var totelpage = Number($('#totelpage').html());
            if (symbol == 'add') {
                if (currpage < totelpage) {
                    currpage++;
                    $('#currentpage').html(currpage);
                    $('addPage').attr('disable', 'false')
                } else {
                    $('addPage').attr('disable', 'true')
                    return false;
                }
            } else {
                if (currpage > 1) {
                    currpage--;
                    $('#currentpage').html(currpage);
                    $('jianPage').attr('disable', 'false')
                } else {
                    $('jianPage').attr('disable', 'true')
                    return false;
                }
            }
            getEquipList(currpage, $('#searchImei').val())

        }
        // 加载数据列表
        function getEquipList(page, filter) {
            $.ajax({
                url: 'qxz_page',
                type: 'get',
                dataType: 'json',
                data: {
                    page: page,
                    f_id: filter
                },
                beforeSend: function (XMLHttpRequest) {
                    loadingFlag = layer.load();
                },
                success: function (data) {
                    layer.close(loadingFlag);
                    if (data.nums) {
                        // console.log(data.ids)
                        var html = '';
                        var msg = data.ids
                        var pagecount = Math.ceil(data.nums / 10);
                        // console.log(pagecount)
                        for (var i = 0; i < msg.length; i++) {
                            if (msg[i].equip_name) {
                                var equip_name = '设备：' + msg[i].equip_name;
                            } else {
                                var equip_name = '设备：' + msg[i].equip_id;
                            }
                            // var equip_name = msg[i].equip_name?'---设备名：'+msg[i].equip_name:'';
                            html += '<li title="设备' + msg[i].equip_id + '"id="' + msg[i].equip_id + '">' + equip_name + '</li>';
                            // html += '<a href="javascript:;" title="设备' + msg[i].equip_id + '" class="text-overflow" id="' + msg[i].equip_id + '" data-pid="322">' + equip_name + '</a>'
                        }
                        $('.equipListUl').html(html);
                        $('.page').show();
                        $('#totelpage').html(pagecount)
                        // 菜单栏
                        $(".equipListUl li:eq(0)").addClass('active');
                        loadTable(msg[0].equip_id);
                        $('#qxzPhotoId').val(msg[0].equip_id)
                    } else {
                        $('.page').hide();
                        var html = '<a href="javascript:;" class="text-overflow nulldata" data-pid="322">暂未设备</a>'
                        $('#firstpane .menu_body').html(html);
                    }
                },
                error: function (type) {
                    layer.close(loadingFlag);
                    // console.log(type)
                }
            })
        }
        $(".equipListUl").on('click', 'li', function () {
            $(".equipListUl li").removeClass("active");
            $(this).addClass("active");
            var facId = $(this).attr("id");
            if (facId && facId != null && facId != "") {
                $('#timSelectBox').val('');
                $('#tableBegin').val('');
                $('#tableEnd').val('');
                loadTable(facId);
                $('#qxzPhotoId').val(facId);
            }
        });

        // 表格搜索
        function table_filter() {
            var currId = $(".equipListUl .active").attr("id");
            loadTable(currId)
        }

        // 分页初始化--数据请求 
        function loadTable(facId) {
            $.ajax({
                url: 'qxz_report_detail2',
                type: 'post',
                data: {
                    page: 1,
                    e_id: facId,
                    begin: $('#tableBegin').val(),
                    end: $('#tableEnd').val(),
                },
                dataType: 'json',
                beforeSend: function () {
                    loadFlage = layer.load();
                },
                complete: function () {
                    layer.close(loadFlage);
                },
                success: function (data) {
                    randerTable(data)
                    randerPage(data.nums,1)
                }
            })


        }
        function randerPage(totalPage,currPage){
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                // , count: 30
                , count: totalPage
                , theme: '#2ca9f9'
                , curr:currPage
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {
                    var currId = $(".equipListUl .active").attr("id");
                    $.ajax({
                        url: 'qxz_report_detail2',
                        type: 'post',
                        data: {
                            page: obj.curr,
                            e_id: currId,
                            begin: $('#tableBegin').val(),
                            end: $('#tableEnd').val(),
                        },
                        dataType: 'json',
                        beforeSend: function () {
                            loadFlage = layer.load();
                        },
                        complete: function () {
                            layer.close(loadFlage);
                        },
                        success: function (data) {
                            randerTable(data)
                        }
                    })
                }
            });
        }

        function randerTable(data) {
            $(document.getElementById('datatable')).empty();
            var html = '<thead><tr><th>采集时间</th>';
            var arrData = data.data;
            var datLen = Object.keys(arrData[0].dat).length; //json数据长度
            for (var t = 1; t <= datLen; t++) {
                if (arrData[0].dat['e' + t] != "") {
                    var currval = arrData[0].dat['e' + t].split('#');
                    html += '<th title="通道' + t + '">' + qxz_dict[currval[1]][1] +'('+ qxz_dict[currval[1]][2] + ')</th>';
                }
                if (t == datLen) {
                    html += '</tr></thead>';
                    for (var i = 0; i < arrData.length; i++) {
                        html += '<tr><td>'+arrData[i].upl_time+'</td>';
                        for (var z = 1; z <= datLen; z++) {
                            if (arrData[i].dat['e' + z] != '') {
                                var currdatval = arrData[i].dat['e' + z].split('#');
                                html += '<td>' + currdatval[0] + '</td>';
                            }

                        }
                        html += '</tr>';
                        if (i == arrData.length - 1) {
                            $(document.getElementById('datatable')).html(html);
                            scrollBar()
                        }
                    }
                }
            }

        }

        var waterTempId = [];
        var datamsg = { "nums": 2777, "dat": [{ "upl_time": "2019-07-30 18:10:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["7.6", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["0", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["159", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["71", "\u78f7", "mg/kg", "e15"], ["54", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:09:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["7.4", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["0", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["157", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["65", "\u78f7", "mg/kg", "e15"], ["67", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:08:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["6.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["0", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["157", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["82", "\u78f7", "mg/kg", "e15"], ["69", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:07:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["6.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["157", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["157", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:06:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["6.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["163", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["157", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:05:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["6.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["152", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["157", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:04:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["4.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["146", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["157", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:03:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["4.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["163", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["0", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:02:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["4.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["0", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["0", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }, { "upl_time": "2019-07-30 18:01:09", "equip_id": "16062388", "unit": [["0.0", "\u98ce\u901f", "m/s", "e1"], ["4.2", "\u96e8\u91cf\u7d2f\u8ba1", "mm", "e2"], ["0", "\u7167\u5ea6", "LUX", "e3"], ["0.00", "PH\u503c", "", "e4"], ["0", "\u94be", "mg/kg", "e5"], ["0.0", "\u5927\u6c14\u6e29\u5ea6", "\u2103", "e6"], ["0", "\u98ce\u5411", "\u00b0", "e7"], ["0.0", "\u5927\u6c14\u6e7f\u5ea6", "%RH", "e8"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e9"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e10"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e11"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e12"], ["0.0", "\u571f\u58e4\u6e29\u5ea6", "\u2103", "e13"], ["0.0", "\u571f\u58e4\u6e7f\u5ea6", "%RH", "e14"], ["0", "\u78f7", "mg/kg", "e15"], ["0", "\u6c2e", "mg/kg", "e16"]] }] }
        // Fill_Table('datatable', data.dat, '10086')
        // 填充表格
        function Fill_Table(table_id, data, facId) {
            var html = "";
            for (var i = 0; i < data.length; i++) {
                if (i == 0) {
                    html += "<thead><tr>";
                    html += "<th>采集时间</th>";
                    for (var j = 0; j < data[0].unit.length; j++) {
                        var elementName = data[0].unit[j][1];
                        html += "<th title=\'通道" + (data[0].unit[j][3]).substr(1, data[0].unit[j][3].length) + "\'>" + elementName + "(" + data[0].unit[j][2] + ")</th>";
                    }
                    html += "</tr></thead>";
                }
                html += "<tr>";
                html += "<td>" + data[i].upl_time + "</td>";
                for (var z = 0; z < data[i].unit.length; z++) {
                    html += "<td>" + data[i].unit[z][0] + "</td>";
                }
                html += "</tr>";
                if (i == data.length - 1) {
                    $(document.getElementById(table_id)).html(html);
                    scrollBar()
                }
            }
        }
        function Fill_null_Table(table_id) {
            var html = "";
            html += "<thead><tr><th>采集时间</th><th>风速</th><th>温度</th></tr></thead>";
            html += "<tr><td colspan=3 style='line-height:100px;text-align:center'>暂无数据</td></tr>";
            $(document.getElementById(table_id)).html(html);
            scrollBar()
        }

// $.ajax({
            //     url: 'qxz_report_detail?page=1&id=' + facId,
            //     type: 'get',
            //     data: {
            //         begin: $('#tableBegin').val(),
            //         end: $('#tableEnd').val(),
            //     },
            //     dataType: 'json',
            //     beforeSend: function () {
            //         loadFlage = layer.load();
            //     },
            //     complete: function () {
            //         layer.close(loadFlage);
            //     },
            //     success: function (data) {
            //         $(document.getElementById('datatable')).empty();
            //         if (data.dat.length) {
            //             Fill_Table('datatable', data.dat, facId)
            //             layui.use('laypage', function () {
            //                 var laypage = layui.laypage;
            //                 laypage.render({
            //                     elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            //                     // , count: 30
            //                     , count: data.nums
            //                     , theme: '#428BCA'
            //                     , layout: ['prev', 'page', 'next', 'skip']
            //                     , jump: function (obj, first) {
            //                         //首次不执行
            //                         if (!first) {
            //                             $.ajax({
            //                                 url: 'qxz_report_detail?page=' + obj.curr + '&id=' + facId,
            //                                 type: 'get',
            //                                 data: {
            //                                     begin: $('#tableBegin').val(),
            //                                     end: $('#tableEnd').val(),
            //                                 },
            //                                 dataType: 'json',
            //                                 success: function (data) {
            //                                     $(document.getElementById('datatable')).empty();
            //                                     if (data.dat.length) {
            //                                         Fill_Table('datatable', data.dat, facId)
            //                                     }
            //                                 }
            //                             })
            //                         }
            //                     }
            //                 });
            //             });
            //         } else {
            //             Fill_null_Table('datatable');
            //             layui.use('laypage', function () {
            //                 var laypage = layui.laypage;
            //                 laypage.render({
            //                     elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
            //                     // , count: 30
            //                     , count: 0
            //                     , theme: '#428BCA'
            //                     , layout: []
            //                     , jump: function (obj, first) {

            //                     }
            //                 });
            //             });
            //         }
            //     }
            // })

        // scrollBar()

    </script>
</body>

</html>