isDistinguish.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  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 '/css/loading.css' %}?versions=0.5.0" />
  13. <style type="text/css">
  14. body {
  15. overflow: hidden;
  16. background: #fff;
  17. }
  18. .searchCover {
  19. margin: 20px 0;
  20. }
  21. .innerTable {
  22. padding: 0 1px 0 0;
  23. min-width: 750px;
  24. }
  25. .table,
  26. .table.table-striped>thead>tr>th {
  27. text-align: center;
  28. }
  29. table td {
  30. vertical-align: middle !important;
  31. }
  32. .nullData {
  33. display: none;
  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. #addAgent {
  43. display: none;
  44. }
  45. .editRole {
  46. padding: 10px 0 0 30px;
  47. }
  48. .editRole input {
  49. width: 200px;
  50. margin-bottom: 10px;
  51. }
  52. .refresh {
  53. font-size: 16px;
  54. color: #4C8FBD;
  55. margin-right: 30px;
  56. }
  57. .content {
  58. overflow-x: scroll;
  59. }
  60. /*代理商分配框 */
  61. #addAgentForm select {
  62. width: 150px;
  63. }
  64. .is_agent {
  65. vertical-align: middle;
  66. line-height: 33px;
  67. }
  68. .is_agent>input[type='checkbox'] {
  69. display: none;
  70. border: none;
  71. border-radius: 0;
  72. padding: 8px;
  73. width: 95%;
  74. margin: 0;
  75. text-indent: 25px;
  76. }
  77. .is_agent>input[type='checkbox']+label {
  78. position: relative;
  79. padding-left: 25px;
  80. border: #F0F8FF;
  81. color: #7d7d7d;
  82. display: inline-block;
  83. font-size: 14px;
  84. vertical-align: text-top;
  85. }
  86. .is_agent>input[type="checkbox"]+label span:first-child {
  87. width: 18px;
  88. height: 18px;
  89. display: inline-block;
  90. border: 1px solid #7d7d7d;
  91. position: absolute;
  92. top: 1px;
  93. left: 4px;
  94. bottom: 4px;
  95. }
  96. .is_agent>input[type="checkbox"]:checked+label span:first-child:before {
  97. content: "";
  98. background: url(../static/img/tick.png) no-repeat;
  99. position: absolute;
  100. left: 3px;
  101. top: 3px;
  102. font-size: 10px;
  103. width: 10px;
  104. height: 10px;
  105. }
  106. .editRoleTitle {
  107. width: 100px;
  108. text-align: right;
  109. line-height: 32px;
  110. }
  111. .fl {
  112. float: left;
  113. }
  114. .clear {
  115. clear: both;
  116. }
  117. .editRole input {
  118. width: 250px;
  119. margin-bottom: 10px;
  120. }
  121. #addr {
  122. margin: 0px;
  123. width: 252px;
  124. height: 90px;
  125. resize: none;
  126. padding: 5px;
  127. }
  128. .content {
  129. overflow-x: scroll;
  130. }
  131. </style>
  132. </head>
  133. <body>
  134. <div class="content">
  135. <div class="searchCover">
  136. 设备ID:
  137. <input type="text" class="input-user" placeholder="请输入设备ID" autocomplete="off" id="uequip" maxlength="20" onkeypress="if (event.keyCode == 13) sub_filter();"
  138. />
  139. <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
  140. <!-- <a class="refresh" onclick="addAgencyName()" href="javascript:;" style="float: right;">
  141. <i class="add">
  142. <img src="{% static '/img/addicon.png' %}" alt="" width="28">
  143. </i>添加新代理 </a> -->
  144. </div>
  145. <div class="innerTable">
  146. <table id="datatable" class="table table-striped table-hover">
  147. <thead>
  148. <tr>
  149. <td>设备号</td>
  150. <td>设备添加时间</td>
  151. <td style="width:50%">图片转发路径</td>
  152. <td>操作</td>
  153. </tr>
  154. </thead>
  155. <tbody>
  156. </tbody>
  157. </table>
  158. <div class="fenpei-bottom">
  159. <input type="hidden" id="totalPage" value={{ nums }}>
  160. <div id="page" style="text-align: center;"></div>
  161. </div>
  162. </div>
  163. <div id="addRoleBox" style="display: none;">
  164. <form id="addUserForm" action="" method="post"> {% csrf_token %}
  165. <div class="editRole clearfix">
  166. <div class="editRoleTitle fl">图片转发地址:</div>
  167. <div class="editRoleBody fl">
  168. <textarea name="addr" id="addr" maxlength="100" placeholder="请输入图片转发地址"></textarea>
  169. </div>
  170. <div class="clear"></div>
  171. <br>
  172. <div class="editRoleTitle fl">转发识别结果:</div>
  173. <div class="editRoleBody fl">
  174. <label class="" style="margin-top:6px">
  175. <input type="checkbox" name="discern" id="discern" class="ace" value="False">
  176. <span class="lbl"></span>
  177. </label>
  178. </div>
  179. </div>
  180. </form>
  181. </div>
  182. </div>
  183. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  184. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  185. <script type="text/javascript">
  186. $.ajaxSetup({
  187. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  188. });
  189. </script>
  190. <script type="text/javascript">
  191. // 分页初始化
  192. layui.use('laypage', function () {
  193. var laypage = layui.laypage;
  194. var uequip = $('#uequip').val()
  195. laypage.render({
  196. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  197. // , count: 30
  198. , count: $('#totalPage').val()
  199. , theme: '#428BCA'
  200. , layout: ['prev', 'page', 'next', 'skip']
  201. , jump: function (obj, first) {
  202. $.ajax({
  203. url: 'isDistinguish',
  204. type: 'post',
  205. data: {
  206. page: obj.curr,
  207. imei: $('#uequip').val()
  208. },
  209. dataType: 'json',
  210. success: function (data) {
  211. if (data.dat.length) {
  212. Fill_Table('datatable', data.dat)
  213. } else {
  214. Fill_null_Table(table_id)
  215. }
  216. if ($('#totalPage').val() > 0) {
  217. $('.nullData').hide();
  218. $('#page').parent().show();
  219. } else {
  220. $('.nullData').show();
  221. $('#page').parent().hide();
  222. }
  223. if ($('.content').height() > 750) {
  224. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  225. } else {
  226. $('#iframe-main', parent.document).css('height', '750px')
  227. }
  228. }
  229. })
  230. if (!first) {
  231. $("#datatable tr:not(:first)").remove();
  232. }
  233. }
  234. });
  235. });
  236. //筛选:
  237. function sub_filter() {
  238. var uequip = $('#uequip').val();
  239. $("#datatable tr:not(:first)").html("");
  240. $.ajax({
  241. type: "post",
  242. url: "isDistinguish",
  243. data: {
  244. imei: uequip,
  245. page: 1
  246. },
  247. dataType: "json",
  248. success: function (data) {
  249. if (data.dat.length) {
  250. Fill_Table('datatable', data.dat)
  251. } else {
  252. Fill_null_Table(table_id)
  253. }
  254. if ($('#totalPage').val() > 0) {
  255. $('.nullData').hide();
  256. $('#page').parent().show();
  257. } else {
  258. $('.nullData').show();
  259. $('#page').parent().hide();
  260. }
  261. if ($('.content').height() > 750) {
  262. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  263. } else {
  264. $('#iframe-main', parent.document).css('height', '750px')
  265. }
  266. var datas = {
  267. imei: uequip,
  268. page: '1'
  269. }
  270. initSearchPage(data.nums, 'isDistinguish', datas);
  271. if ($('.content').height() > 750) {
  272. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  273. } else {
  274. $('#iframe-main', parent.document).css('height', '750px')
  275. }
  276. }
  277. });
  278. }
  279. //搜索分页
  280. function initSearchPage(page, url, datas) {
  281. layui.use('laypage', function () {
  282. var laypage = layui.laypage;
  283. laypage.render({
  284. elem: 'page' //注意,这里的 test1 是 ID,不用加 # 号
  285. // , count: 30
  286. , count: page
  287. , theme: '#428BCA'
  288. , layout: ['prev', 'page', 'next', 'skip']
  289. , jump: function (obj, first) {
  290. datas.page = obj.curr;
  291. if (!first) {
  292. $.ajax({
  293. url: url,
  294. type: 'post',
  295. data: datas,
  296. dataType: 'json',
  297. success: function (data) {
  298. $("#datatable tr:not(:first)").html("");
  299. if (data.dat.length > 0) {
  300. Fill_Table('datatable', data.dat);
  301. } else {
  302. Fill_null_Table('datatable');
  303. }
  304. if ($('.content').height() > 750) {
  305. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  306. } else {
  307. $('#iframe-main', parent.document).css('height', '750px')
  308. }
  309. }
  310. })
  311. }
  312. }
  313. });
  314. });
  315. }
  316. function Fill_null_Table(table_id) {
  317. var table = document.getElementById(table_id).children[1];
  318. var row = table.insertRow(table.rows.length);
  319. var c1 = row.insertCell(0);
  320. c1.setAttribute('colspan', '16');
  321. c1.setAttribute('class', 'nullData');
  322. c1.innerHTML = "暂无数据";
  323. scrollBar();
  324. }
  325. function Fill_Table(table_id, dat) {
  326. //js循环读取json数据
  327. var table = document.getElementById(table_id).children[1];
  328. for (var i = 0; i < dat.length; i++) {
  329. var row = table.insertRow(table.rows.length);
  330. var c1 = row.insertCell(0);
  331. c1.innerHTML = dat[i].e_id;
  332. c1.setAttribute('class', 'id')
  333. var c2 = row.insertCell(1);
  334. c2.innerHTML = dat[i].add_time;
  335. var c3 = row.insertCell(2);
  336. c3.innerHTML = dat[i].addr ? dat[i].addr : '无';
  337. var c4 = row.insertCell(3);
  338. var str = "<select onchange='isDistinguish(\"" + dat[i].e_id + "\",this)'>";
  339. if(dat[i].disc == 0){
  340. str += "<option selected value=\"0\">禁用</option>";
  341. }else{
  342. str += "<option value=\"0\">禁用</option>";
  343. }
  344. if(dat[i].disc == 1){
  345. str += "<option selected value=\"1\">启用</option>";
  346. }else{
  347. str += "<option value=\"1\">启用</option>";
  348. }
  349. if(dat[i].disc == 2){
  350. str += "<option selected value=\"2\">计数</option>";
  351. }else{
  352. str += "<option value=\"2\">计数</option>";
  353. }
  354. str += "</select> <button class='btn btn-sm btn-primary' onclick='transmit(this,\"" + dat[i].e_id + "\",\"" + dat[i].addr + "\")'>转发</button>";
  355. // c4.innerHTML = "<button class='btn btn-sm btn-danger' data-status='" + discern + "' onclick='isDistinguish(\"" + dat[i].e_id + "\",this)'>" + discernTxt + "</button> <button class='btn btn-sm btn-primary' onclick='transmit(this,\"" + dat[i].e_id + "\",\"" + dat[i].addr + "\")'>转发</button>";
  356. c4.innerHTML = str;
  357. // }
  358. }
  359. }
  360. function isDistinguish(imei, ele) {
  361. var discern = '', flag = '',dataStatus = '',dataStatusTxt = '';
  362. var layer = layui.layer;
  363. layer.confirm('是否设置此设备识别权限?', {title:'提示'}, function(){
  364. $.ajax({
  365. url: 'isDistinguishchange',
  366. type: 'post',
  367. data: {
  368. imei: imei,
  369. disc: $(ele).val()
  370. },
  371. dataType: 'json',
  372. success: function (data) {
  373. if(data == 0){
  374. layer.msg('设置成功', {icon: 1});
  375. }else{
  376. layer.msg('设置失败', {icon: 2});
  377. }
  378. },
  379. error:function(type){
  380. layer.msg('设置失败', {icon: 2});
  381. }
  382. })
  383. });
  384. }
  385. function transmit(ele, imei, oldaddr) {
  386. console.log(oldaddr)
  387. if (oldaddr != 'null') {
  388. var addrArr = oldaddr.split('#');
  389. $('#addr').val(addrArr[0]);
  390. if (addrArr[1] == 0) {
  391. $('#discern').prop('checked', '');
  392. } else {
  393. $('#discern').prop('checked', 'checked');
  394. }
  395. } else {
  396. $('#addr').val('');
  397. $('#discern').prop('checked', '');
  398. }
  399. layui.use('layer', function () {
  400. var layer = layui.layer;
  401. layer.open({
  402. type: 1,
  403. title: "图片转发",
  404. closeBtn: 2,
  405. area: '516px',
  406. btn: ['保存', '取消'],
  407. shadeClose: false,
  408. content: $('#addRoleBox'),
  409. yes: function (index, layero) {
  410. saveDiscern('isDistinguishchange', imei);
  411. },
  412. btn2: function (index, layero) {
  413. closeResetPwd($('#addUserForm'), $('#addRoleBox'));
  414. },
  415. cancel: function (index, layero) {
  416. closeResetPwd($('#addUserForm'), $('#addRoleBox'));
  417. }
  418. });
  419. });
  420. }
  421. function saveDiscern(url, imei) {
  422. if ($('#addr').val()) {
  423. if ($('#discern').is(':checked')) {
  424. var data = $('#addr').val() + '#1';
  425. } else {
  426. var data = $('#addr').val() + '#0';
  427. }
  428. } else {
  429. var data = 'cancel';
  430. }
  431. if ($('#discern').is(':checked')) {
  432. $('#discern').val('False')
  433. } else {
  434. $('#discern').val('True')
  435. }
  436. $.ajax({
  437. url: url,
  438. type: 'post',
  439. data: {
  440. imei: imei,
  441. addr: data
  442. },
  443. success: function (data) {
  444. layer.closeAll();
  445. $('#addRoleBox').hide();
  446. if (data == 0) {
  447. $.ajax({
  448. url: 'isDistinguish',
  449. type: 'post',
  450. data: {
  451. page: $('.layui-laypage-curr em').eq(1).html(),
  452. imei: $('#uequip').val()
  453. },
  454. dataType:'json',
  455. success: function (data) {
  456. $("#datatable tr:not(:first)").remove();
  457. if (data.dat.length) {
  458. Fill_Table('datatable', data.dat)
  459. } else {
  460. Fill_null_Table(table_id)
  461. }
  462. if ($('.content').height() > 750) {
  463. $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
  464. } else {
  465. $('#iframe-main', parent.document).css('height', '750px')
  466. }
  467. }
  468. })
  469. } else if (data == 1) {
  470. layer.msg("转发失败!");
  471. }
  472. }
  473. })
  474. }
  475. function closeResetPwd(formObj, hideObj) {
  476. formObj.find('input').val('');
  477. formObj.find('textarea').val('');
  478. hideObj.hide();
  479. }
  480. </script>
  481. <!-- <script src="{% static '/js/usermanage/agency_view.js' %}?versions=0.5.0" type="text/javascript"></script> -->
  482. </body>
  483. </html>