sex_trap.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  7. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  8. <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  9. <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  10. <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  12. <link rel="stylesheet" href="{% static '/lib/css/jquery-ui.css' %}" />
  13. <link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.4" />
  14. <link rel="stylesheet" href="{% static '/css/equipmanage_cbd.css' %}" />
  15. <style>
  16. .content {
  17. overflow-x: scroll;
  18. }
  19. .searchCover {
  20. margin: 20px 0;
  21. }
  22. .innerTable {
  23. padding: 0 1px 0 0;
  24. min-width: 750px;
  25. }
  26. .table,
  27. .table.table-striped>thead>tr>th {
  28. text-align: center;
  29. }
  30. table td {
  31. vertical-align: middle !important;
  32. }
  33. .nullData {
  34. width: 100%;
  35. height: 500px;
  36. background: #ddd;
  37. text-align: center;
  38. line-height: 500px;
  39. font-size: 20px;
  40. border: 1px solid #ddd;
  41. }
  42. </style>
  43. <body>
  44. <div class="content">
  45. <div id="detialPage"></div>
  46. <div id="listPage">
  47. <div class="searchCover">
  48. 设备名称:
  49. <input type="text" value="" id="ename" placeholder="请输入设备名称"
  50. onkeypress="if (event.keyCode == 13) sub_filter();" /> 设备ID:
  51. <input type="text" value="" id="eId" placeholder="请输入设备ID"
  52. onkeypress="if (event.keyCode == 13) sub_filter();" />
  53. <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
  54. 在线状态:
  55. <select name="" onchange="isOnline(this,'is_online')" id="onoffSelect" style="width:120px">
  56. <option value="">全部</option>
  57. <option value="1">在线</option>
  58. <option value="0">离线</option>
  59. </select>
  60. 性诱类型:
  61. <select name="" id="lightType" onchange="isOnline(this,'etype')" style="width:120px">
  62. <option value="">全部</option>
  63. <option value="1">性诱一型</option>
  64. <option value="2">性诱二型</option>
  65. </select>
  66. </div>
  67. <div class="innerTable">
  68. <table class="layui-hide" id="test" lay-filter="test"></table>
  69. <!-- <table id="datatable" class="table table-striped table-hover">
  70. <thead>
  71. <tr>
  72. <th>设备ID</th>
  73. <th>设备名称</th>
  74. <th>在线状态</th>
  75. <th>设备开关</th>
  76. <th>工作状态</th>
  77. <th>雨控保护</th>
  78. <th>温控保护</th>
  79. <th>倾倒保护</th>
  80. <th>电池状态</th>
  81. <th>定时时长</th>
  82. <th>充电电压</th>
  83. <th>电池电压</th>
  84. <th>计数值</th>
  85. <th>信号强度</th>
  86. <th>版本号</th>
  87. <th>上报时间</th>
  88. </tr>
  89. </thead>
  90. <tbody>
  91. </tbody>
  92. </table> -->
  93. <div class="fenpei-bottom">
  94. <!-- <input type="hidden" id="totalPage" value={{ nums }}> -->
  95. <input type="hidden" id="totalPage" value=32>
  96. <div id="page" style="text-align: center;"></div>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. <!-- loading -->
  102. <div id="loadingParent">
  103. <div id="loadCenter">
  104. <div class="skype-loader">
  105. <div class="dot">
  106. <div class="first"></div>
  107. </div>
  108. <div class="dot"></div>
  109. <div class="dot"></div>
  110. <div class="dot"></div>
  111. </div>
  112. Logging in...
  113. </div>
  114. </div>
  115. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  116. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  117. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  118. <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script> -->
  119. <script src="{% static '/js/common.js' %}?versions=0.5.4"></script>
  120. <script type="text/html" id="barDemo">
  121. <!-- <a class="btn btn-sm btn-primary" lay-event="lookall">查看详情</a> -->
  122. <button class="btn btn-sm btn-primary" lay-event="lookall">查看详情</button>
  123. </script>
  124. <script>
  125. $.ajaxSetup({
  126. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  127. });
  128. window.onload = function () {
  129. if (window.location.search) {
  130. var currpage = getQueryString('currpage') || 1;
  131. var equipName = getQueryString('equipName') || '';
  132. var equipId = getQueryString('equipId') || '';
  133. var etype = getQueryString('etype') || '';
  134. var etypeA = getQueryString('etypeA') || '';
  135. var onoffSelect = getQueryString('onoffSelect') || '';
  136. // getData(currpage, equipName, equipId, etype, onoffSelect);
  137. console.log(etypeA)
  138. getData(currpage, equipName, equipId, etypeA, onoffSelect);
  139. $('#onoffSelect').val(onoffSelect)
  140. $('#lightType').val(etypeA)
  141. $('#ename').val(equipName)
  142. $('#eId').val(equipId)
  143. // let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  144. // let url = window.location.hash.split('?')[1].match(reg);
  145. } else {
  146. getData(1, '', '', '', '');
  147. }
  148. }
  149. //筛选
  150. function sub_filter() {
  151. var equipName = $('#ename').val();
  152. var equipId = $('#eId').val();
  153. // var etype = $('#lightType').val()
  154. var etypeA = $('#lightType').val()
  155. var online = $('#onoffSelect').val()
  156. // getData(1, equipName, equipId, etype, online);
  157. getData(1, equipName, equipId, etypeA, online);
  158. }
  159. //在线状态/性诱类型筛选
  160. function isOnline(obj, req) {
  161. var equipName = $('#ename').val();
  162. var equipId = $('#eId').val();
  163. // var etype = $('#lightType').val()
  164. var etypeA = $('#lightType').val()
  165. var online = $('#onoffSelect').val()
  166. // getData(1, equipName, equipId, etype, online);
  167. getData(1, equipName, equipId, etypeA, online);
  168. }
  169. // //性诱类型筛选
  170. // function typEfiltrate() {
  171. // }
  172. function getQueryString(name) {
  173. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  174. let url = window.location.href.split('?')[1].match(reg);
  175. // console.log(url)
  176. if (url != null) {
  177. return decodeURI(url[2])//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
  178. } else {
  179. return null
  180. }
  181. }
  182. // 数据请求
  183. // function getData(page, equipName, equipId, etype, online) {
  184. function getData(page, equipName, equipId, etypeA, online) {
  185. $.ajax({
  186. url: '',
  187. type: 'post',
  188. data: {
  189. f_id: equipId,
  190. ename: equipName,
  191. page: page,
  192. is_online: online,
  193. // etype: etype
  194. etype: etypeA
  195. },
  196. dataType: 'json',
  197. success: function (data) {
  198. renderTable(processingData(data));
  199. renderPage(page, data);
  200. },
  201. error: function (type) {
  202. console.log(type);
  203. }
  204. })
  205. }
  206. var dataArr = {
  207. dat: [{
  208. 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"}',
  209. upl_time: "2020-02-29 17:41:11",
  210. is_online: "0",
  211. off_time: "2020-02-29 18:00:13",
  212. },
  213. {
  214. 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"}',
  215. upl_time: "2020-02-28 17:41:11",
  216. is_online: "1",
  217. off_time: "2020-02-28 18:00:13",
  218. },
  219. {
  220. 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"}',
  221. upl_time: "2020-02-27 17:41:11",
  222. is_online: "0",
  223. off_time: "2020-02-27 18:00:13",
  224. },
  225. {
  226. 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"}',
  227. upl_time: "2020-02-26 17:41:11",
  228. is_online: "0",
  229. off_time: "2020-02-26 18:00:13",
  230. }],
  231. nums: 2
  232. }
  233. function processingData(data) {
  234. if (data.nums) {
  235. var dataArr = data.dat;
  236. var newDataArr = [];
  237. for (var i = 0; i < dataArr.length; i++) {
  238. var sex_trap = eval('(' + dataArr[i].sex_trap + ')');
  239. sex_trap.upl_time = dataArr[i].upl_time;
  240. sex_trap.is_online = dataArr[i].is_online;
  241. sex_trap.pest_name = dataArr[i].pest_name;
  242. sex_trap.off_time = dataArr[i].off_time;
  243. sex_trap.equip_name = dataArr[i].equip_name || '--';
  244. sex_trap.dev_num = sex_trap.dev_num || '--';
  245. newDataArr.push(sex_trap);
  246. if (i == dataArr.length - 1) {
  247. return newDataArr;
  248. }
  249. }
  250. } else {
  251. return [];
  252. }
  253. }
  254. function renderTable(newDataArr) {
  255. // console.log(newDataArr[0].pest_name)
  256. layui.use(['table'], function () {
  257. var table = layui.table;
  258. table.render({
  259. elem: '#test'
  260. // ,url:'/demo/table/user/'
  261. , skin: 'line' //行边框风格
  262. , even: true //开启隔行背景
  263. , size: 'lg' //小尺寸的表格
  264. , data: newDataArr
  265. , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
  266. , cols: [[
  267. { field: 'imei', align: 'center', title: '设备ID', minWidth: 150 }
  268. , { 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>' } } }
  269. , { field: 'dev_num', align: 'center', title: '设备编号', minWidth: 50 }
  270. , { field: 'equip_name', align: 'center', title: '设备名称' }
  271. , { 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型' } } }
  272. , { field: 'ds', align: 'center', title: '设备开关', templet: function (d) { if (d.ds == 1) { return '开' } else { return '关' } } }
  273. , { field: 'ws', align: 'center', title: '工作状态', templet: function (d) { if (d.ws == 1) { return '工作' } else { return '待机' } } }
  274. , { 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 '--' } } }
  275. , { title: '充电电压', align: 'center', templet: function (d) { if (d.cv == '') { return '--' } else { return d.cv / 1000 } } }
  276. , { title: '电池电压', align: 'center', templet: function (d) { if (d.bv == '') { return '--' } else { return d.bv / 1000 } } }
  277. , { field: 'csq', align: 'center', title: '信号强度' }
  278. , { field: 'dver', align: 'center', title: '版本号' }
  279. // ,{field:'dat_f',align:'center', title: '数据上传间隔', minWidth: 200}
  280. , { field: 'pest_name', align: 'center', title: '目标害虫名称', minWidth: 200, templet: function (d) { if (d.pest_name == null) { return '--' } else { return d.pest_name } } }
  281. , { field: 'upl_time', align: 'center', title: '上报时间', minWidth: 200 }
  282. , { fixed: 'right', align: 'center', title: '操作', toolbar: '#barDemo', width: 150 }
  283. ]]
  284. });
  285. //监听行工具事件
  286. table.on('tool(test)', function (obj) {
  287. var data = obj.data;
  288. if (obj.event == 'lookall') {
  289. 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()
  290. console.log( $('#onoffSelect').val())
  291. }
  292. });
  293. });
  294. }
  295. function renderPage(currpage, data) {
  296. //调用分页
  297. layui.use(['laypage'], function () {
  298. var laypage = layui.laypage;
  299. laypage.render({
  300. elem: 'page'
  301. , count: data.nums
  302. , curr: currpage
  303. , theme: '#428BCA'
  304. , layout: ['prev', 'page', 'next', 'skip']
  305. , jump: function (obj, first) {
  306. // var equipId, equipName, online, etype
  307. var equipId, equipName, online, etypeA
  308. equipId = $('#eId').val()
  309. equipName = $('#ename').val()
  310. online = $('#onoffSelect').val()
  311. // etype = $('#lightType').val()
  312. etypeA = $('#lightType').val()
  313. //首次不执行
  314. if (!first) {
  315. $.ajax({
  316. url: '',
  317. type: 'post',
  318. data: {
  319. page: obj.curr,
  320. f_id: equipId,
  321. ename: equipName,
  322. is_online: online,
  323. etype: etypeA
  324. },
  325. dataType: 'json',
  326. beforeSend: function () {
  327. $('#loadingParent').show();
  328. },
  329. complete: function () {
  330. $('#loadingParent').hide();
  331. },
  332. success: function (data) {
  333. if (data.nums > 0) {
  334. renderTable(processingData(data));
  335. $('#page').parent().show();
  336. } else {
  337. $('#page').parent().hide();
  338. }
  339. },
  340. error: function (type) {
  341. var data = {
  342. dat: [
  343. {
  344. 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"}',
  345. upl_time: "2020-02-29 17:41:11",
  346. is_online: "0",
  347. off_time: "2020-02-29 18:00:13",
  348. },
  349. {
  350. 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"}',
  351. upl_time: "2020-02-28 17:41:11",
  352. is_online: "1",
  353. off_time: "2020-02-28 18:00:13",
  354. },
  355. {
  356. 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"}',
  357. upl_time: "2020-02-27 17:41:11",
  358. is_online: "0",
  359. off_time: "2020-02-27 18:00:13",
  360. },
  361. {
  362. 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"}',
  363. upl_time: "2020-02-26 17:41:11",
  364. is_online: "0",
  365. off_time: "2020-02-26 18:00:13",
  366. },
  367. ],
  368. nums: 32
  369. }
  370. renderTable(processingData(data));
  371. }
  372. })
  373. }
  374. }
  375. });
  376. })
  377. }
  378. </script>
  379. </body>
  380. </html>