000004.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <meta charset="utf-8">
  6. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  7. <meta content="yes" name="apple-mobile-web-app-capable">
  8. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  9. <meta content="telephone=no" name="format-detection">
  10. <script src="__PUBLIC__/wxapp/js/jquery-1.8.3/jquery.min.js"></script>
  11. <script src="__PUBLIC__/wxapp/js/echarts.min.js"></script>
  12. <script src="__PUBLIC__/html/video/ezuikit.js"></script>
  13. <link rel="stylesheet" href="__PUBLIC__/wxapp/css/jdxf.css">
  14. <title>设备详情</title>
  15. <style>
  16. .bjbox {
  17. margin: 15px 0;
  18. }
  19. .mar {
  20. margin: 0 30px;
  21. }
  22. .bjbox-c {
  23. font-size: 14px;
  24. color: #646464;
  25. }
  26. .box {
  27. height: 20px;
  28. background-color: #F5F5F5;
  29. }
  30. .mar-words {
  31. float: right;
  32. font-size: 18px;
  33. }
  34. .height1dcdcdc {
  35. display: block;
  36. height: 1px;
  37. margin-top: 2px;
  38. margin-bottom: 20px;
  39. background: #DCDCDC;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <!-- 头部 -->
  45. <div class="hand">
  46. <span class="hand-i">
  47. <a href="__MODULE__/Inspection/getDeviceList/record_id/{$record_id}/spot_id/{$spot_id}">
  48. <img style="height: 16px;" src="__PUBLIC__/wxapp/images/jd_07.png" alt="">
  49. </a>
  50. </span>
  51. 设备详情
  52. </div>
  53. <div class="bjbox">
  54. <div class="mar">
  55. <span class="ownername">{$list.owner_name}</span>
  56. <span class="mar-words" style="color: #646464;">{$list.zs_status}</span>
  57. </div>
  58. </div>
  59. <div class="box"></div>
  60. <div class="bjbox">
  61. <div class="bjbox-c mar">基本信息</div>
  62. <div class="height1dcdcdc"></div>
  63. <div class="mar">
  64. <span id='dev_title_lab'>当前水压:</span>{$bb}<span id='dev_title_unit'>Mpa</span> <br>
  65. 设备类型:{$list.dwtypes} <br>
  66. <if condition="$dwtype eq 2 ">
  67. 设备厂家:上海永天<br>
  68. 传输方式:4G<br>
  69. 设备型号:PT124B-289<br>
  70. <else/>
  71. 设备厂家:--<br>
  72. 传输方式:--<br>
  73. 设备型号:--<br>
  74. </if>
  75. 设备编号:{$list.deviceid} <br>
  76. 物联网卡号:{$list.sim}<br>
  77. 安装位置:{$list.azwz}<br>
  78. 添加时间:{$list.install_time}
  79. </div>
  80. </div>
  81. <div class="box"></div>
  82. <div class="bjbox">
  83. <div class="bjbox-c mar">基本信息</div>
  84. <div class="height1dcdcdc"></div>
  85. <div class="mar">
  86. {$list.owner_address}
  87. </div>
  88. </div>
  89. <div class="box"></div>
  90. <script>
  91. var player = new EZUIPlayer('video123');
  92. player.on('error', function () {
  93. console.log('error');
  94. });
  95. player.on('play', function () {
  96. console.log('play');
  97. });
  98. player.on('pause', function () {
  99. console.log('pause');
  100. });
  101. </script>
  102. <div class="bjbox">
  103. <div class="bjbox-c mar">图表</div>
  104. <div class="height1dcdcdc" style=" margin-bottom: 0;"></div>
  105. <div class="mar" style="margin: 0">
  106. <div id="ownerinfo_3" style="width: 100%;height: 300px"></div>
  107. </div>
  108. </div>
  109. <script>
  110. owner_3();
  111. function owner_3() {
  112. var dwtype = "{$dwtype}";
  113. var tes = '0';
  114. var tyss = "";
  115. if (dwtype == 2) {
  116. tes = '一周设备数值变化';
  117. tes2 = '水压值';
  118. tyss = "兆帕";
  119. }
  120. if (dwtype == 5) {
  121. tes = '一周水位值变化 (m)';
  122. tes2 = '水位值';
  123. tyss = "米";
  124. document.getElementById('dev_title_lab').innerHTML = '当前水位:';
  125. document.getElementById('dev_title_unit').innerHTML = 'm';
  126. }
  127. var options = {
  128. title: {
  129. x: 'center',
  130. text: tes
  131. },
  132. tooltip: {
  133. trigger: 'axis',
  134. axisPointer: {
  135. type: 'cross',
  136. animation: false,
  137. label: {
  138. backgroundColor: '#505765'
  139. }
  140. }
  141. },
  142. grid: {
  143. left: '3%',
  144. right: '4%',
  145. bottom: '3%',
  146. containLabel: true
  147. },
  148. toolbox: {}, legend: {
  149. data: ['水压/水位(兆帕/米)', '电量/信号(%)'],
  150. left: 10
  151. },
  152. xAxis: {
  153. type: 'category',
  154. axisTick: {
  155. alignWithLabel: true
  156. },
  157. data: {$time}
  158. },
  159. yAxis: [{
  160. name: '水压/水位',
  161. type: 'value',
  162. max: 1
  163. }, {
  164. name: '电量/信号',
  165. nameLocation: 'start',
  166. max: 100,
  167. type: 'value',
  168. // inverse: true
  169. }],
  170. dataZoom: [{
  171. type: 'slider',
  172. xAxisIndex: 0,
  173. filterMode: 'empty',
  174. start: 0,
  175. end: 100
  176. }, {
  177. type: 'inside',
  178. xAxisIndex: 0,
  179. filterMode: 'empty',
  180. start: 0,
  181. end: 100
  182. }],
  183. series: [
  184. {
  185. name: tes2,
  186. type: 'line',
  187. stack: 'Pa',
  188. animation: false,
  189. data: {$data4},
  190. color: ['#2699fb'],
  191. yAxisIndex: 0
  192. }, {
  193. name: "信号强度",
  194. type: 'line',
  195. stack: '%',
  196. animation: false,
  197. data: {$signal},
  198. color: ['#ffff00'],
  199. yAxisIndex: 1
  200. }, {
  201. name: "电池电量",
  202. type: 'line',
  203. stack: 'a',
  204. animation: false,
  205. data: {$electric},
  206. color: ['#ff0000'],
  207. yAxisIndex: 1
  208. }
  209. ]
  210. };
  211. var myChart3 = echarts.init(document.getElementById('ownerinfo_3'));//4echers // 基于准备好的dom,初始化echarts实例
  212. myChart3.setOption(options);// 使用刚指定的配置项和数据显示图表。
  213. }
  214. </script>
  215. </body>
  216. </html>