bzy_detail_list_detail.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  8. <link href="../css/mui.min.css" rel="stylesheet" />
  9. <link rel="stylesheet" href="../css/iconfont.css" />
  10. <link href="../css/common.css" rel="stylesheet" />
  11. <link rel="stylesheet" href="../css/mescroll.min.css">
  12. <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
  13. <style type="text/css">
  14. .mui-content {
  15. background: #fff;
  16. }
  17. .iconfont {
  18. font-size: 35px;
  19. color: #3bb9e7;
  20. /*font-weight: bold;*/
  21. line-height: 80px;
  22. margin: 10px 10px 10px 20px;
  23. }
  24. .equipState {
  25. font-size: 18px;
  26. margin-top: 14px;
  27. color: #333;
  28. }
  29. #detial>div {
  30. border-bottom: 2px solid #eee;
  31. }
  32. #detial>div:nth-of-type(odd) {
  33. border-right: 2px solid #eee;
  34. }
  35. .mui-table-view:after,
  36. .mui-table-view:before {
  37. height: 2px;
  38. background-color: #eee;
  39. }
  40. @media(max-width: 400px) {
  41. .mui-col-sm-6 {
  42. width: 50%;
  43. }
  44. }
  45. .nullData {
  46. top: 45px;
  47. }
  48. /*查看详情*/
  49. .areaTitle {
  50. color: #424242;
  51. padding-left: 5px;
  52. border-left: 5px solid #5870f6;
  53. font-weight: bold;
  54. font-size: 16px;
  55. }
  56. .detialBox .fa {
  57. padding-right: 5px;
  58. color: #ff6e00;
  59. }
  60. /**/
  61. .controlVal {
  62. position: absolute;
  63. top: 50%;
  64. right: 35px;
  65. -webkit-transform: translateY(-50%);
  66. transform: translateY(-50%);
  67. }
  68. #controlBtn {
  69. width: 80%;
  70. /*height: 0px;*/
  71. background: white;
  72. position: fixed;
  73. top: 24%;
  74. left: 50%;
  75. margin-left: -40%;
  76. }
  77. /*移除底部或顶部三角,需要在删除此代码*/
  78. .mui-popover .mui-popover-arrow:after {
  79. width: 0px;
  80. }
  81. .lnglat>p {
  82. color: #333;
  83. font-size: 14px;
  84. }
  85. .lnglat #lng {
  86. margin: 18px 0 3px 0;
  87. }
  88. </style>
  89. </head>
  90. <body>
  91. <header class="mui-bar mui-bar-nav">
  92. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  93. <h1 class="mui-title" id="title">孢子仪设备</h1>
  94. </header>
  95. <div class="mui-content">
  96. <div id="scrollPlace" class="mescroll">
  97. <div id="dataList">
  98. <ul class="mui-table-view" id="equip">
  99. <li class="mui-table-view-cell">
  100. <h1 class="areaTitle">设备信息</h1>
  101. </li>
  102. <li class="mui-table-view-cell">
  103. <p id="equipId"></p>
  104. </li>
  105. <li class="mui-table-view-cell">
  106. <p id="equipName"></p>
  107. </li>
  108. <li class="mui-table-view-cell">
  109. <p id="upl_time"></p>
  110. </li>
  111. </ul>
  112. <div class="mui-row" id="detial">
  113. <div class="mui-col-sm-6">
  114. <div class="mui-pull-left">
  115. <i class="iconfont">&#xe610;</i>
  116. </div>
  117. <div class="mui-pull-left ">
  118. <p class="equipState" id="at"></p>
  119. <p class="equipFun">环境温度(°C)</p>
  120. </div>
  121. </div>
  122. <div class="mui-col-sm-6">
  123. <div class="mui-pull-left">
  124. <i class="iconfont">&#xe60f;</i>
  125. </div>
  126. <div class="mui-pull-left ">
  127. <p class="equipState" id="ah"></p>
  128. <p class="equipFun">环境湿度(%)</p>
  129. </div>
  130. </div>
  131. <div class="mui-col-sm-6">
  132. <div class="mui-pull-left">
  133. <i class="iconfont">&#xe8f3;</i>
  134. </div>
  135. <div class="mui-pull-left ">
  136. <p class="equipState" id="bat_sta"></p>
  137. <p class="equipFun">电池状态</p>
  138. </div>
  139. </div>
  140. <div class="mui-col-sm-6">
  141. <div class="mui-pull-left">
  142. <i class="iconfont">&#xe612;</i>
  143. </div>
  144. <div class="mui-pull-left ">
  145. <p class="equipState" id="usb_sta"></p>
  146. <p class="equipFun">摄像头状态</p>
  147. </div>
  148. </div>
  149. <div class="mui-col-sm-6">
  150. <div class="mui-pull-left">
  151. <i class="iconfont">&#xe610;</i>
  152. </div>
  153. <div class="mui-pull-left ">
  154. <p class="equipState" id="pre_temp"></p>
  155. <p class="equipFun">保温仓温度(°C)</p>
  156. </div>
  157. </div>
  158. <div class="mui-col-sm-6">
  159. <div class="mui-pull-left">
  160. <i class="iconfont">&#xe624;</i>
  161. </div>
  162. <div class="mui-pull-left ">
  163. <p class="equipState" id="v_bat"></p>
  164. <p class="equipFun">电压(V)</p>
  165. </div>
  166. </div>
  167. <div class="mui-col-sm-6">
  168. <div class="mui-pull-left">
  169. <i class="iconfont">&#xeaae;</i>
  170. </div>
  171. <div class="mui-pull-left ">
  172. <p class="equipState" id="staytime"></p>
  173. <p class="equipFun">已培养时间</p>
  174. </div>
  175. </div>
  176. <div class="mui-col-sm-6">
  177. <div class="mui-pull-left">
  178. <i class="iconfont">&#xe711;</i>
  179. </div>
  180. <div class="mui-pull-left lnglat">
  181. <p class="equipState" id="lng"></p>
  182. <p class="equipFun" id="lat"></p>
  183. </div>
  184. </div>
  185. <div class="mui-col-sm-6">
  186. <div class="mui-pull-left">
  187. <i class="iconfont">&#xe60a;</i>
  188. </div>
  189. <div class="mui-pull-left ">
  190. <p class="equipState" id="csq"></p>
  191. <p class="equipFun">信号强度</p>
  192. </div>
  193. </div>
  194. <div class="mui-col-sm-6">
  195. <div class="mui-pull-left">
  196. <i class="iconfont">&#xe65f;</i>
  197. </div>
  198. <div class="mui-pull-left ">
  199. <p class="equipState" id="dver"></p>
  200. <p class="equipFun">版本型号</p>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <script src="../js/jquery-2.1.0.js"></script>
  208. <script src="../js/mui.min.js"></script>
  209. <script src="../js/mescroll.min.js" charset="utf-8"></script>
  210. <script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
  211. <script src="../js/common.js"></script>
  212. <script type="text/javascript">
  213. var equipId, bzy_status, upl_time, equip_name;
  214. mui.init();
  215. mui.plusReady(function() {
  216. var self = plus.webview.currentWebview();
  217. equipId = self.equipId;
  218. upl_time = self.upl_time;
  219. bzy_status = self.bzy_data;
  220. equip_name = self.equip_name;
  221. $('#equipId').html('设备ID:' + equipId);
  222. $('#equipName').html('设备名称:' + equip_name);
  223. $('#upl_time').html('上报时间:' + upl_time);
  224. var status = eval('(' + bzy_status + ')');
  225. $('#at').html(status.at);
  226. $('#ah').html(status.ah);
  227. $('#bat_sta').html(status.bat_sta?'电量过低':'正常');
  228. $('#usb_sta').html(status.usb_sta?'异常':'正常');
  229. if(parseInt(status.pre_temp) >100 || parseInt(status.pre_temp) < -10){
  230. $('#pre_temp').html(15);
  231. }else{
  232. $('#pre_temp').html(status.pre_temp);
  233. }
  234. $('#v_bat').html(status.v_bat);
  235. $('#staytime').html(status.staytime);
  236. var lng = status.lng || '暂无';
  237. var lat = status.lat || '暂无';
  238. $('#lng').html('经度:'+ lng);
  239. $('#lat').html('纬度:'+ lat);
  240. $('#csq').html(status.csq);
  241. $('#dver').html(status.dver);
  242. })
  243. </script>
  244. </body>
  245. </html>