device-manage.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=750, initial-scale=1, maximum-scale=1, user-scalable=0" />
  7. <meta name="keywords" content="" />
  8. <meta name="description" content="" />
  9. <title>设备管理</title>
  10. <!-- FAVICON AND APPLE TOUCH -->
  11. <link href="favicon.ico" rel="shortcut icon" />
  12. <link rel="apple-touch-icon-precomposed" sizes="180x180" />
  13. <meta name="msapplication-TileImage" content="mstile.png" />
  14. <link rel="stylesheet" href="css/common.css" />
  15. <meta name="viewport" content="width=375, user-scalable=no" />
  16. </head>
  17. <body>
  18. <div class="page-wrapper">
  19. <div class="fixed-section">
  20. <div class="nav-tit">
  21. <a class="goBack" onclick="history.back()"></a>
  22. 设备管理
  23. </div>
  24. <div class="filterSection">
  25. <input type="text" placeholder="请选择传输方式">
  26. <span class="search">查询</span>
  27. </div>
  28. </div>
  29. <div class="device-list parent">
  30. <div class="noResult">
  31. <p>暂无查询结果...</p>
  32. </div>
  33. <p class="refreshText"></p>
  34. <ul id="content-box">
  35. <li class="device-item">
  36. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  37. <div class="desBox">
  38. <p class="device-tit">测试用传装置</p>
  39. <p>三楼茶水间</p>
  40. <p>2020-01-08 15:15:08</p>
  41. </div>
  42. <div class="statusBox onlineColor">在线</div>
  43. <div class="arrowRight"><img src="image/right-icon.png" alt="" w></div>
  44. <div class="operate-box">
  45. <ul>
  46. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  47. <li class="opera-delete">删除设备</li>
  48. </ul>
  49. </div>
  50. </li>
  51. <li class="device-item">
  52. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  53. <div class="desBox">
  54. <p class="device-tit">测试用传装置</p>
  55. <p>三楼茶水间</p>
  56. <p>2020-01-08 15:15:08</p>
  57. </div>
  58. <div class="statusBox offlineColor">离线</div>
  59. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  60. <div class="operate-box">
  61. <ul>
  62. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  63. <li class="opera-delete">删除设备</li>
  64. </ul>
  65. </div>
  66. </li>
  67. <li class="device-item">
  68. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  69. <div class="desBox">
  70. <p class="device-tit">测试用传装置</p>
  71. <p>三楼茶水间</p>
  72. <p>2020-01-08 15:15:08</p>
  73. </div>
  74. <div class="statusBox hitchColor">故障</div>
  75. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  76. <div class="operate-box">
  77. <ul>
  78. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  79. <li class="opera-delete">删除设备</li>
  80. </ul>
  81. </div>
  82. </li>
  83. <li class="device-item">
  84. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  85. <div class="desBox">
  86. <p class="device-tit">测试用传装置</p>
  87. <p>三楼茶水间</p>
  88. <p>2020-01-08 15:15:08</p>
  89. </div>
  90. <div class="statusBox hitchColor">故障</div>
  91. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  92. <div class="operate-box">
  93. <ul>
  94. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  95. <li class="opera-delete">删除设备</li>
  96. </ul>
  97. </div>
  98. </li>
  99. <li class="device-item">
  100. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  101. <div class="desBox">
  102. <p class="device-tit">测试用传装置</p>
  103. <p>三楼茶水间</p>
  104. <p>2020-01-08 15:15:08</p>
  105. </div>
  106. <div class="statusBox hitchColor">故障</div>
  107. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  108. <div class="operate-box">
  109. <ul>
  110. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  111. <li class="opera-delete">删除设备</li>
  112. </ul>
  113. </div>
  114. </li>
  115. <li class="device-item">
  116. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  117. <div class="desBox">
  118. <p class="device-tit">测试用传装置</p>
  119. <p>三楼茶水间</p>
  120. <p>2020-01-08 15:15:08</p>
  121. </div>
  122. <div class="statusBox hitchColor">故障</div>
  123. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  124. <div class="operate-box">
  125. <ul>
  126. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  127. <li class="opera-delete">删除设备</li>
  128. </ul>
  129. </div>
  130. </li>
  131. <li class="device-item">
  132. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  133. <div class="desBox">
  134. <p class="device-tit">测试用传装置</p>
  135. <p>三楼茶水间</p>
  136. <p>2020-01-08 15:15:08</p>
  137. </div>
  138. <div class="statusBox hitchColor">故障</div>
  139. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  140. <div class="operate-box">
  141. <ul>
  142. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  143. <li class="opera-delete">删除设备</li>
  144. </ul>
  145. </div>
  146. </li>
  147. <li class="device-item">
  148. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  149. <div class="desBox">
  150. <p class="device-tit">测试用传装置</p>
  151. <p>三楼茶水间</p>
  152. <p>2020-01-08 15:15:08</p>
  153. </div>
  154. <div class="statusBox hitchColor">故障</div>
  155. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  156. <div class="operate-box">
  157. <ul>
  158. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  159. <li class="opera-delete">删除设备</li>
  160. </ul>
  161. </div>
  162. </li>
  163. <li class="device-item">
  164. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  165. <div class="desBox">
  166. <p class="device-tit">测试用传装置</p>
  167. <p>三楼茶水间</p>
  168. <p>2020-01-08 15:15:08</p>
  169. </div>
  170. <div class="statusBox hitchColor">故障</div>
  171. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  172. <div class="operate-box">
  173. <ul>
  174. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  175. <li class="opera-delete">删除设备</li>
  176. </ul>
  177. </div>
  178. </li>
  179. <li class="device-item">
  180. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  181. <div class="desBox">
  182. <p class="device-tit">测试用传装置</p>
  183. <p>三楼茶水间</p>
  184. <p>2020-01-08 15:15:08</p>
  185. </div>
  186. <div class="statusBox hitchColor">故障</div>
  187. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  188. <div class="operate-box">
  189. <ul>
  190. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  191. <li class="opera-delete">删除设备</li>
  192. </ul>
  193. </div>
  194. </li>
  195. <li class="device-item">
  196. <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
  197. <div class="desBox">
  198. <p class="device-tit">测试用传装置</p>
  199. <p>三楼茶水间</p>
  200. <p>2020-01-08 15:15:08</p>
  201. </div>
  202. <div class="statusBox hitchColor">故障</div>
  203. <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
  204. <div class="operate-box">
  205. <ul>
  206. <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
  207. <li class="opera-delete">删除设备</li>
  208. </ul>
  209. </div>
  210. </li>
  211. </ul>
  212. <a href="add.html"><img class="plus" src="image/plus-icon.png" alt=""></a>
  213. </div>
  214. </div>
  215. <script src="js/layout.js"></script>
  216. <script src="js/jquery-2.2.2.min.js"></script>
  217. <script>
  218. // 手机长按事件
  219. var timeOutEvent = 0;
  220. var _this;
  221. $(function() {
  222. $(".desBox").on({
  223. touchstart: function(e) {
  224. _this = $(this)
  225. timeOutEvent = setTimeout("longPress()", 500);
  226. //e.preventDefault();
  227. },
  228. touchmove: function() {
  229. clearTimeout(timeOutEvent);
  230. timeOutEvent = 0;
  231. //document.removeEventListener('touchstart', this.preventDefault, false);
  232. },
  233. touchend: function() {
  234. clearTimeout(timeOutEvent);
  235. if (timeOutEvent != 0) {
  236. // alert("你这是点击,不是长按");
  237. }
  238. return false;
  239. }
  240. })
  241. });
  242. function longPress() {
  243. timeOutEvent = 0;
  244. // alert("长按事件触发发");
  245. _this.parent().find('.operate-box').show().parent().siblings().find('.operate-box').hide();
  246. }
  247. //点击修改页面跳转;
  248. $(".device-item").on("touchend", ".opera-edit", function() {
  249. // alert("子元素点击");
  250. window.location.href = "add.html";
  251. })
  252. $(".device-item").on("touchend", ".opera-delete", function() {
  253. // alert("子元素点击");
  254. $(this).parent().parent().parent().remove();
  255. })
  256. // 点击除按钮和弹框之外任意地方隐藏表情
  257. $("body").click(function(e) {
  258. if ($('.operate-box').is(':visible')) {
  259. if (!$(e.target).closest(".operate-box").length) {
  260. // alert(1);
  261. $(".operate-box").hide();
  262. }
  263. }
  264. });
  265. </script>
  266. </body>
  267. </html>