equip.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../css/mui.min.css" rel="stylesheet" />
  8. <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
  9. <link href="../css/common.css" rel="stylesheet" />
  10. <style type="text/css">
  11. .manageStyle,
  12. .reportStyle {
  13. padding: 5px 10px;
  14. }
  15. .manageStyle h1 {
  16. font-size: 18px;
  17. color: #333;
  18. border-left: 5px solid #21b2e7;
  19. padding-left: 10px;
  20. }
  21. .reportStyle h1 {
  22. font-size: 18px;
  23. color: #333;
  24. border-left: 5px solid #6fd867;
  25. padding-left: 10px;
  26. }
  27. @media (max-width: 400px) {
  28. .mui-col-sm-6 {
  29. width: 50%;
  30. }
  31. }
  32. .categoryItem {
  33. padding: 15px 12px;
  34. background: #fff;
  35. border-radius: 10px;
  36. margin: 5px 7px;
  37. }
  38. .blueColor {
  39. box-shadow: 0px 0px 3px 0px rgb(36, 178, 231);
  40. }
  41. .blueColor .leftTxt p {
  42. color: #21b2e7;
  43. }
  44. .greenColor {
  45. box-shadow: 0px 0px 3px 0px rgb(111, 216, 103);
  46. }
  47. .greenColor .leftTxt p {
  48. color: #6fd867;
  49. }
  50. .categoryItem .leftTxt h2 {
  51. font-size: 20px;
  52. /*letter-spacing: 2px;*/
  53. margin-bottom: 10px;
  54. font-weight: 100;
  55. }
  56. .categoryItem .leftTxt p {
  57. margin: 0;
  58. }
  59. .categoryItem .rightImg {
  60. top: 22%;
  61. right: 8%;
  62. position: absolute;
  63. width: 27%;
  64. }
  65. .mui-content{
  66. display:none;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <header class="mui-bar mui-bar-nav">
  72. <h1 class="mui-title">设备中心</h1>
  73. </header>
  74. <div class="mui-content">
  75. <div class="equipManage manageStyle">
  76. <h1>设备管理</h1>
  77. <div class="mui-row" id="equipManageDiv">
  78. <!--<div class="mui-col-xs-6">
  79. <div class="categoryItem blueColor">
  80. <div class="leftTxt">
  81. <h2>杀虫灯</h2>
  82. <p>查看更多 >></p>
  83. </div>
  84. <img class="rightImg" src="../images/equipPageIcon1.png" />
  85. </div>
  86. </div>-->
  87. </div>
  88. </div>
  89. <div class="equipReport reportStyle">
  90. <h1>报表管理</h1>
  91. <div class="mui-row" id="equipReportDiv">
  92. <!--<div class="mui-col-xs-6">
  93. <div class="categoryItem greenColor">
  94. <div class="leftTxt">
  95. <h2>杀虫灯</h2>
  96. <p>查看更多 >></p>
  97. </div>
  98. <img class="rightImg" src="../images/equipPageIcon7.png" />
  99. </div>
  100. </div>-->
  101. </div>
  102. </div>
  103. </div>
  104. <script src="../js/jquery-2.1.0.js"></script>
  105. <script src="../js/mui.min.js"></script>
  106. <script type="text/javascript">
  107. mui.init();
  108. // var managePath = ['../equipManage/equipManage_scd.html','../equipManage/equipManage_cbd.html',
  109. // '../equipManage/equipManage_ybq.html','../equipManage/equipManage_qxz.html',
  110. // '../equipManage/equipManage_bzy.html','../equipManage/equipManage_jk.html'];
  111. // var reportPath = ['../reportManage/reprotManage_scd.html','../reportManage/reprotManage_cbd.html',
  112. // '../reportManage/reportManage_ybq.html','../reportManage/reportManage_qxz.html',
  113. // '../reportManage/reportManage_bzy.html'];
  114. var manageArr = [{
  115. name: '杀虫灯',
  116. type: 2,
  117. icon: ['../images/equipPageIcon1.png', '../images/equipPageIcon7.png'],
  118. url: ['../equipManage/equipManage_scd.html', '../reportManage/reprotManage_scd.html']
  119. },
  120. {
  121. name: '虫情测报',
  122. type: 3,
  123. icon: ['../images/equipPageIcon2.png', '../images/equipPageIcon8.png'],
  124. url: ['../equipManage/equipManage_cbd.html', '../reportManage/reprotManage_cbd.html']
  125. },
  126. {
  127. name: '性诱设备',
  128. type: 4,
  129. icon: ['../images/equipPageIcon12.png',''],
  130. url: ['../equipManage/sex_trap.html','']
  131. },
  132. {
  133. name: '环境监测',
  134. type: 5,
  135. icon: ['../images/equipPageIcon4.png', '../images/equipPageIcon10.png'],
  136. url: ['../equipManage/equipManage_qxz.html', '../reportManage/reprotManage_qxz.html']
  137. },
  138. {
  139. name: '监控',
  140. type: 6,
  141. icon: ['../images/equipPageIcon6.png', '../images/equipPageIcon6.png'],
  142. url: ['../equipManage/equipManage_jk.html', '../equipManage_jk/equipManage_jk.html']
  143. },
  144. {
  145. name: '孢子捕捉',
  146. type: 7,
  147. icon: ['../images/equipPageIcon5.png', '../images/equipPageIcon11.png'],
  148. url: ['../equipManage/equipManage_bzy.html', '../reportManage/reprotManage_bzy.html']
  149. },
  150. {
  151. name: '诱捕设备',
  152. type: 8,
  153. icon: ['', '../images/equipPageIcon9.png'],
  154. url: ['', '../reportManage/reprotManage_xyq.html']
  155. }
  156. ]
  157. function sortNumber(a,b){
  158. return a - b
  159. }
  160. mui.plusReady(function() {
  161. mui.ajax('http://120.27.222.26/product_view', {
  162. data: {},
  163. dataType: 'json', //服务器返回json格式数据
  164. type: 'post', //HTTP请求类型
  165. timeout: 10000, //超时时间设置为10秒;
  166. beforeSend: function() {
  167. plus.nativeUI.showWaiting('请求中...');
  168. },
  169. complete: function() {
  170. plus.nativeUI.closeWaiting();
  171. },
  172. success: function(data) {
  173. $('.mui-content').show();
  174. console.log(typeof data)
  175. var dat = data.sort(sortNumber);
  176. var equipManageHtml = '';
  177. var equipreportHtml = '';
  178. if(dat.length) {
  179. for(var j = 0; j < dat.length; j++) {
  180. for(var i = 0; i < manageArr.length; i++) {
  181. console.log(manageArr[i].type)
  182. if(manageArr[i].type == dat[j]) {
  183. if(manageArr[i].type != 8) {
  184. equipManageHtml += '<div class="mui-col-xs-6" onclick="openwindow(\'' + manageArr[i].url[0] + '\')"><div class="categoryItem blueColor">' +
  185. '<div class="leftTxt"><h2>' + manageArr[i].name + '</h2><p>查看更多 >></p>' +
  186. '</div><img class="rightImg" src="' + manageArr[i].icon[0] + '" /></div></div>';
  187. }
  188. if(manageArr[i].type != 4 && manageArr[i].type != 6 ) {
  189. equipreportHtml += '<div class="mui-col-xs-6" onclick="openwindow(\'' + manageArr[i].url[1] + '\')"><div class="categoryItem greenColor">' +
  190. '<div class="leftTxt"><h2>' + manageArr[i].name + '</h2><p>查看更多 >></p>' +
  191. '</div><img class="rightImg" src="' + manageArr[i].icon[1] + '" /></div></div>'
  192. }
  193. }
  194. }
  195. if(j == dat.length - 1) {
  196. console.log(equipManageHtml)
  197. console.log(equipreportHtml)
  198. $('#equipManageDiv').html(equipManageHtml);
  199. $('#equipReportDiv').html(equipreportHtml);
  200. }
  201. }
  202. } else {
  203. var html = '<div class="mui-col-xs-6"><div>暂无设备</h2></div></div>';
  204. $('#equipManageDiv').html(html);
  205. $('#equipReportDiv').html(html);
  206. }
  207. },
  208. error: function(xhr, type, errorThrown) {
  209. console.log(errorThrown)
  210. mui.toast('登录请求失败');
  211. }
  212. });
  213. })
  214. function openwindow(para) {
  215. var path = para;
  216. var id = (path.substr(path.lastIndexOf('/') + 1)).split('.')[0]
  217. mui.openWindow({
  218. url: path,
  219. id: id
  220. })
  221. }
  222. </script>
  223. </body>
  224. </html>