yf_zd
/
yfwlwCut


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

<head>
    <meta charset="UTF-8" />
    <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
    <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/jquery-ui.css' %}" />
    <link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.0" />
    <link rel="stylesheet" href="{% static '/css/equipmanage_cbd.css' %}" />
    <style>
        .content {
            overflow-x: scroll;
        }

        .searchCover {
            margin: 20px 0;
        }

        .innerTable {
            padding: 0 1px 0 0;
            min-width: 750px;
        }

        .table,
        .table.table-striped>thead>tr>th {
            text-align: center;
        }

        table td {
            vertical-align: middle !important;
        }

        .nullData {
            width: 100%;
            height: 500px;
            background: #ddd;
            text-align: center;
            line-height: 500px;
            font-size: 20px;
            border: 1px solid #ddd;
        }
    </style>

<body>
    <div class="content">
        <div id="detialPage"></div>
        <div id="listPage">
            <div class="searchCover">
                设备名称：
                <input type="text" value="" id="ename" placeholder="请输入设备名称"
                    onkeypress="if (event.keyCode == 13) sub_filter();" /> 设备ID：
                <input type="text" value="" id="eId" placeholder="请输入设备ID"
                    onkeypress="if (event.keyCode == 13) sub_filter();" />
                <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
            </div>
            <div class="innerTable">
                <table class="layui-hide" id="test" lay-filter="test"></table>
                <!-- <table id="datatable" class="table  table-striped table-hover">
            <thead>
              <tr>
                <th>设备ID</th>
                <th>设备名称</th>
                <th>在线状态</th>
                <th>设备开关</th>
                <th>工作状态</th>
                <th>雨控保护</th>
                <th>温控保护</th>
                <th>倾倒保护</th>
                <th>电池状态</th>
                <th>定时时长</th>
                <th>充电电压</th>
                <th>电池电压</th>
                <th>计数值</th>
                <th>信号强度</th>
                <th>版本号</th>
                <th>上报时间</th>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table> -->
                <div class="fenpei-bottom">
                    <!-- <input type="hidden" id="totalPage" value={{ nums }}> -->
                    <input type="hidden" id="totalPage" value=32>
                    <div id="page" style="text-align: center;"></div>
                </div>
            </div>
        </div>


    </div>

    <!-- loading -->
    <div id="loadingParent">
        <div id="loadCenter">
            <div class="skype-loader">
                <div class="dot">
                    <div class="first"></div>
                </div>
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            Logging in...
        </div>
    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
    <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
    <script src="{% static '/lib/layui/layui.all.js' %}"></script>
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script> -->
    <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>

    <script type="text/html" id="barDemo">
      <!-- <a class="btn btn-sm btn-primary" lay-event="lookall">查看详情</a> -->
    <button class="btn btn-sm btn-primary" lay-event="lookall">查看详情</button>
    </script>
    <script>
        $.ajaxSetup({
            data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
        });

        window.onload = function () {
            // console.log(window.location)
            if (window.location.search) {
                var currpage = getQueryString('currpage') || 1;
                var equipName = getQueryString('equipName') || '';
                var equipId = getQueryString('equipId') || '';
                getData(currpage, equipName, equipId);
                // let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                // let url = window.location.hash.split('?')[1].match(reg);
            } else {
                getData(1, '', '');
            }
        }

        function sub_filter() {
            var equipName = $('#ename').val();
            var equipId = $('#eId').val();
            getData(1, equipName, equipId);
        }

        function getQueryString(name) {
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            let url = window.location.href.split('?')[1].match(reg);
            // console.log(url)
            if (url != null) {
                return decodeURI(url[2])//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
            } else {
                return null
            }
        }

        // 数据请求
        function getData(page, equipName, equipId) {
            $.ajax({
                url: '',
                type: 'post',
                data: {
                    f_id: equipId,
                    ename: equipName,
                    page: page
                },
                dataType: 'json',
                success: function (data) {
                    renderTable(processingData(data));
                    renderPage(page, data);
                },
                error: function (type) {
                    console.log(type);
                }
            })
        }
        var dataArr = {
            dat: [{
                sex_trap: '{"imei":"123","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP2","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                upl_time: "2020-02-29 17:41:11",
                is_online: "0",
                off_time: "2020-02-29 18:00:13",
            },
            {
                sex_trap: '{"imei":"456","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP3","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                upl_time: "2020-02-28 17:41:11",
                is_online: "1",
                off_time: "2020-02-28 18:00:13",
            },
            {
                sex_trap: '{"imei":"789","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP1","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                upl_time: "2020-02-27 17:41:11",
                is_online: "0",
                off_time: "2020-02-27 18:00:13",
            },
            {
                sex_trap: '{"imei":"867038032102765","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP3","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                upl_time: "2020-02-26 17:41:11",
                is_online: "0",
                off_time: "2020-02-26 18:00:13",
            }],
            nums: 2
        }

        function processingData(data) {
            if (data.nums) {
                var dataArr = data.dat;
                var newDataArr = [];
                for (var i = 0; i < dataArr.length; i++) {
                    var tccb_status = eval('(' + dataArr[i].tccb_status + ')');
                    tccb_status.upl_time = dataArr[i].upl_time;
                    tccb_status.is_online = dataArr[i].is_online;
                    tccb_status.off_time = dataArr[i].off_time;
                    tccb_status.equip_name = dataArr[i].equip_name || '--';
                    tccb_status.dev_num = tccb_status.dev_num || '--';
                    newDataArr.push(tccb_status);
                    if (i == dataArr.length - 1) {
                        return newDataArr;
                    }
                }
            } else {
                return [];
            }
        }

        function renderTable(newDataArr) {
            console.log(newDataArr)
            layui.use(['table'], function () {
                var table = layui.table;
                table.render({
                    elem: '#test'
                    // ,url:'/demo/table/user/'
                    , skin: 'line' //行边框风格
                    , even: true //开启隔行背景
                    , size: 'lg' //小尺寸的表格
                    , data: newDataArr
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    // 糖醋测报
                    , cols: [[
                        { field: 'imei', align: 'center', title: '设备ID', minWidth: 150 }
                        , { field: 'is_online', align: 'center', title: '在线状态', templet: function (d) { if (d.is_online == 1) { return '<img src="static/img/onLine.png" />' } else { return '<span title="离线时间：' + d.off_time + '"><img src="static/img/offLine.png" /></span>' } } }
                        , { field: 'dev_num', align: 'center', title: '设备名称', minWidth: 50 }
                        , { field: 'csq', align: 'center', title: '信号强度' }
                        , { field: 'vbatstatus', align: 'center', title: '电池状态', minWidth: 100, templet: function (d) { if (d.vbatstatus == '0') { return '正常' } else if (d.vbatstatus == '1') { return '电量过低' } } }
                        , { field: 'vbat', align: 'center', title: '电压(V)', templet: function (d) { return d.vbat } }
                        , { field: 'dver', align: 'center', title: '设备版本', templet: function (d) { return d.dver } }
                        , { field: 'upl_time', align: 'center', title: '上报时间', minWidth: 200 }
                        , { fixed: 'right', align: 'center', title: '操作', toolbar: '#barDemo', width: 150 }
                    ]]
                });

                //监听行工具事件
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    // console.log(data)
                    if (obj.event == 'lookall') {
                        window.location.href = 'tccb_detail?id=' + data.imei + '&currpage=' + $(".layui-laypage-skip .layui-input").val() + '&equipName=' + $('#ename').val() + '&equipId=' + $('#eId').val()
                    }
                });

            });
        }
        function renderPage(currpage, data) {
            //调用分页
            layui.use(['laypage'], function () {
                var laypage = layui.laypage;
                laypage.render({
                    elem: 'page'
                    , count: data.nums
                    , curr: currpage
                    , theme: '#428BCA'
                    , layout: ['prev', 'page', 'next', 'skip']
                    , jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            $.ajax({
                                url: '',
                                type: 'post',
                                data: {
                                    page: obj.curr
                                },
                                dataType: 'json',
                                beforeSend: function () {
                                    $('#loadingParent').show();
                                },
                                complete: function () {
                                    $('#loadingParent').hide();
                                },
                                success: function (data) {
                                    if (data.nums > 0) {
                                        renderTable(processingData(data));
                                        $('#page').parent().show();
                                    } else {
                                        $('#page').parent().hide();
                                    }
                                },
                                error: function (type) {
                                    var data = {
                                        dat: [
                                            {
                                                sex_trap: '{"imei":"123","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP2","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                                                upl_time: "2020-02-29 17:41:11",
                                                is_online: "0",
                                                off_time: "2020-02-29 18:00:13",
                                            },
                                            {
                                                sex_trap: '{"imei":"456","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP3","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                                                upl_time: "2020-02-28 17:41:11",
                                                is_online: "1",
                                                off_time: "2020-02-28 18:00:13",
                                            },
                                            {
                                                sex_trap: '{"imei":"789","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP1","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                                                upl_time: "2020-02-27 17:41:11",
                                                is_online: "0",
                                                off_time: "2020-02-27 18:00:13",
                                            },
                                            {
                                                sex_trap: '{"imei":"867038032102765","iccid":"89860401101700076471","csq":29,"dver":"1.0.1","proj":"SEX_TRAP3","ds":1,"ws":1,"cbs":0,"rps":0,"tps":0,"dps":0,"bps":0,"ts":0,"st":20,"et":2,"cv":18000,"bv":12800,"at":"0","ah":"0","infr_ct":25,"volt_ct":100,"dat_f":5,"pic_f":10,"bt_ct":10,"lng":"113.67336","lat":"34.815187","stamp":"20180301211805"}',
                                                upl_time: "2020-02-26 17:41:11",
                                                is_online: "0",
                                                off_time: "2020-02-26 18:00:13",
                                            },
                                        ],
                                        nums: 32
                                    }
                                    renderTable(processingData(data));
                                }
                            })
                        }
                    }
                });
            })
        }
    </script>

</body>

</html>