04-01.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->
  6. <meta charset="utf-8">
  7. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  8. <meta content="yes" name="apple-mobile-web-app-capable">
  9. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  10. <meta content="telephone=no" name="format-detection">
  11. <!-- <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> -->
  12. <script src="__PUBLIC__/wxapp/js/jquery-1.8.3/jquery.min.js"></script>
  13. <script src="__PUBLIC__/wxapp/js/echarts.min.js"></script>
  14. <script src="__PUBLIC__/html/video/ezuikit.js"></script>
  15. <link rel="stylesheet" href="__PUBLIC__/wxapp/css/jdxf.css">
  16. <title>设备详情</title>
  17. <style>
  18. .bjbox {
  19. margin: 15px 0;
  20. }
  21. .mar {
  22. margin: 0 30px;
  23. }
  24. .bjbox-c {
  25. font-size: 14px;
  26. color: #646464;
  27. }
  28. .box {
  29. height: 20px;
  30. background-color: #F5F5F5;
  31. }
  32. .mar-words {
  33. float: right;
  34. font-size: 18px;
  35. }
  36. .height1dcdcdc {
  37. display: block;
  38. height: 1px;
  39. margin-top: 2px;
  40. margin-bottom: 20px;
  41. background: #DCDCDC;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <!-- 头部 -->
  47. <div class="hand">
  48. <span class="hand-i"><!-- <i class="fa fa-angle-down"></i> -->
  49. <a href="__MODULE__/Dmanger/index{$tokenurl}/companyid/{$companyid}">
  50. <img style="height: 16px;" src="__PUBLIC__/wxapp/images/jd_07.png" alt="">
  51. </a>
  52. </span>
  53. 设备详情
  54. </div>
  55. <!-- 内容块 -->
  56. <div class="bjbox">
  57. <!-- <div class="bjbox-c mar">
  58. <span>2018/02/20 10:25</span>
  59. <span style="float: right;">离线</span>
  60. </div> -->
  61. <div class="mar">
  62. <span class="ownername">{$list.owner_name}</span>
  63. <span class="mar-words" style="color: #646464;">{$list.zs_status}</span>
  64. </div>
  65. </div>
  66. <div class="box"></div>
  67. <div class="bjbox">
  68. <div class="bjbox-c mar">基本信息</div>
  69. <div class="height1dcdcdc"></div>
  70. <div class="mar">设备类型:{$list.dwtypes} <br>
  71. 设备编号:{$list.deviceid} <br>
  72. 物联网卡号:{$list.sim}<br>
  73. 安装位置:{$list.azwz}<br>
  74. 添加时间:{$list.install_time}
  75. </div>
  76. </div>
  77. <div class="box"></div>
  78. <div class="bjbox">
  79. <div class="bjbox-c mar">基本信息</div>
  80. <div class="height1dcdcdc"></div>
  81. <div class="mar">
  82. {$list.owner_address}
  83. </div>
  84. </div>
  85. <div class="box"></div>
  86. <!--<div class="bjbox">-->
  87. <!-- <div class="bjbox-c mar">视频</div>-->
  88. <!-- <div class="height1dcdcdc" style=" margin-bottom: 0;">-->
  89. <!-- </div>-->
  90. <!-- <div class="br-video-body">-->
  91. <!-- <video id="video123" style="width: 100%; height: 200px" poster="" controls playsInline webkit-playsinline-->
  92. <!-- autoplay>-->
  93. <!-- &lt;!&ndash;<source src="rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b" type="" />&ndash;&gt;-->
  94. <!-- &lt;!&ndash;<source src="http://hls.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.m3u8" type="application/x-mpegURL" />&ndash;&gt;-->
  95. <!-- <source src="{$list.rtmp}" type=""/>-->
  96. <!-- <source src="{$list.hls}" type="application/x-mpegURL"/>-->
  97. <!-- </video>-->
  98. <script>
  99. var player = new EZUIPlayer('video123');
  100. player.on('error', function () {
  101. console.log('error');
  102. });
  103. player.on('play', function () {
  104. console.log('play');
  105. });
  106. player.on('pause', function () {
  107. console.log('pause');
  108. });
  109. </script>
  110. <!-- </div>-->
  111. <!--<div class="mar" style="margin: 0">
  112. {$list.rtmp}
  113. </div>-->
  114. <!--</div>-->
  115. <!--<div class="box"></div>-->
  116. <div class="bjbox">
  117. <div class="bjbox-c mar">图表</div>
  118. <div class="height1dcdcdc" style=" margin-bottom: 0;"></div>
  119. <div class="mar" style="margin: 0">
  120. <div id="ownerinfo_3" style="width: 100%;height: 300px"></div>
  121. </div>
  122. </div>
  123. <script>
  124. owner_3();
  125. function owner_3() {
  126. var options = {
  127. title: {
  128. text: '设备统计数据',
  129. subtext: '',
  130. x: 'center'
  131. },
  132. tooltip: {
  133. trigger: 'item',
  134. formatter: "{a} <br/>{b}"
  135. },//({d}%)
  136. legend: {
  137. x: 'center',
  138. y: 'bottom',
  139. data: ['报警总数 {$counts}', '真实报警 {$z_counts}', '解决次数 {$j_counts}', '误报数 {$w_counts}']
  140. },
  141. toolbox: {
  142. // show : true,
  143. // feature : {
  144. // mark : {show: true},
  145. // dataView : {show: true, readOnly: false},
  146. // magicType : {
  147. // show: true,
  148. // type: ['pie', 'funnel']
  149. // },
  150. // restore : {show: true},
  151. // saveAsImage : {show: true}
  152. // }
  153. },
  154. calculable: true,
  155. series: [
  156. {
  157. name: '统计数据',
  158. type: 'pie',
  159. radius: [30, 80],
  160. center: ['50%', '50%'],
  161. roseType: 'radius',
  162. data: [
  163. {value: {$counts}, name: '报警总数 {$counts}'},
  164. {value: {$z_counts}, name: '真实报警 {$z_counts}'},
  165. {value: {$j_counts}, name: '解决次数 {$j_counts}'},
  166. {value: {$w_counts}, name: '误报数 {$w_counts}'}
  167. ]
  168. }
  169. ]
  170. };
  171. var myChart3 = echarts.init(document.getElementById('ownerinfo_3'));//4echers // 基于准备好的dom,初始化echarts实例
  172. myChart3.setOption(options);// 使用刚指定的配置项和数据显示图表。
  173. }
  174. </script>
  175. </body>
  176. </html>