| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413 |
- {% 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.4" />
- <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>
- 在线状态:
- <select name="" onchange="isOnline(this,'is_online')" id="onoffSelect" style="width:120px">
- <option value="">全部</option>
- <option value="1">在线</option>
- <option value="0">离线</option>
- </select>
- 性诱类型:
- <select name="" id="lightType" onchange="isOnline(this,'etype')" style="width:120px">
- <option value="">全部</option>
- <option value="1">性诱一型</option>
- <option value="2">性诱二型</option>
- </select>
- </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.4"></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 () {
- if (window.location.search) {
- var currpage = getQueryString('currpage') || 1;
- var equipName = getQueryString('equipName') || '';
- var equipId = getQueryString('equipId') || '';
- var etype = getQueryString('etype') || '';
- var etypeA = getQueryString('etypeA') || '';
- var onoffSelect = getQueryString('onoffSelect') || '';
- // getData(currpage, equipName, equipId, etype, onoffSelect);
- console.log(etypeA)
- getData(currpage, equipName, equipId, etypeA, onoffSelect);
- $('#onoffSelect').val(onoffSelect)
- $('#lightType').val(etypeA)
- $('#ename').val(equipName)
- $('#eId').val(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();
- // var etype = $('#lightType').val()
- var etypeA = $('#lightType').val()
- var online = $('#onoffSelect').val()
- // getData(1, equipName, equipId, etype, online);
- getData(1, equipName, equipId, etypeA, online);
- }
- //在线状态/性诱类型筛选
- function isOnline(obj, req) {
- var equipName = $('#ename').val();
- var equipId = $('#eId').val();
- // var etype = $('#lightType').val()
- var etypeA = $('#lightType').val()
- var online = $('#onoffSelect').val()
- // getData(1, equipName, equipId, etype, online);
- getData(1, equipName, equipId, etypeA, online);
- }
- // //性诱类型筛选
- // function typEfiltrate() {
- // }
- 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, etype, online) {
- function getData(page, equipName, equipId, etypeA, online) {
- $.ajax({
- url: '',
- type: 'post',
- data: {
- f_id: equipId,
- ename: equipName,
- page: page,
- is_online: online,
- // etype: etype
- etype: etypeA
- },
- 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 sex_trap = eval('(' + dataArr[i].sex_trap + ')');
- sex_trap.upl_time = dataArr[i].upl_time;
- sex_trap.is_online = dataArr[i].is_online;
- sex_trap.pest_name = dataArr[i].pest_name;
- sex_trap.off_time = dataArr[i].off_time;
- sex_trap.equip_name = dataArr[i].equip_name || '--';
- sex_trap.dev_num = sex_trap.dev_num || '--';
- newDataArr.push(sex_trap);
- if (i == dataArr.length - 1) {
- return newDataArr;
- }
- }
- } else {
- return [];
- }
- }
- function renderTable(newDataArr) {
- // console.log(newDataArr[0].pest_name)
- 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: 'equip_name', align: 'center', title: '设备名称' }
- , { field: 'proj', align: 'center', title: '设备型号', minWidth: 100, templet: function (d) { if (d.proj == 'SEX_TRAP_1') { return 'I型' } else if (d.proj == 'SEX_TRAP_2') { return 'II型' } } }
- , { field: 'ds', align: 'center', title: '设备开关', templet: function (d) { if (d.ds == 1) { return '开' } else { return '关' } } }
- , { field: 'ws', align: 'center', title: '工作状态', templet: function (d) { if (d.ws == 1) { return '工作' } else { return '待机' } } }
- , { field: 'bps', align: 'center', title: '电池状态', templet: function (d) { if (d.bs == '0') { return '正常' } else if (d.bs == '1') { return '欠压' } else if (d.bs == '2') { return '过压' } else { return '--' } } }
- , { title: '充电电压', align: 'center', templet: function (d) { if (d.cv == '') { return '--' } else { return d.cv / 1000 } } }
- , { title: '电池电压', align: 'center', templet: function (d) { if (d.bv == '') { return '--' } else { return d.bv / 1000 } } }
- , { field: 'csq', align: 'center', title: '信号强度' }
- , { field: 'dver', align: 'center', title: '版本号' }
- // ,{field:'dat_f',align:'center', title: '数据上传间隔', minWidth: 200}
- , { field: 'pest_name', align: 'center', title: '目标害虫名称', minWidth: 200, templet: function (d) { if (d.pest_name == null) { return '--' } else { return d.pest_name } } }
- , { 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;
- if (obj.event == 'lookall') {
- window.location.href = 'sex_trap_detail?id=' + data.imei + '&currpage=' + $(".layui-laypage-skip .layui-input").val() + '&equipName=' + $('#ename').val() + '&equipId=' + $('#eId').val() + '&etype=' + $('#lightType').val() + '&etypeA=' + $('#lightType').val() + '&onoffSelect=' + $('#onoffSelect').val()
- console.log( $('#onoffSelect').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) {
- // var equipId, equipName, online, etype
- var equipId, equipName, online, etypeA
- equipId = $('#eId').val()
- equipName = $('#ename').val()
- online = $('#onoffSelect').val()
- // etype = $('#lightType').val()
- etypeA = $('#lightType').val()
- //首次不执行
- if (!first) {
- $.ajax({
- url: '',
- type: 'post',
- data: {
- page: obj.curr,
- f_id: equipId,
- ename: equipName,
- is_online: online,
- etype: etypeA
- },
- 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>
|