C_Mode_v3D.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>大数据可视化系统数据分析</title>
  6. dsad
  7. <link rel="stylesheet" href="static/css/comon0.css">
  8. <script src="https://webapi.amap.com/loader.js"></script>
  9. <script src="static/js/jquery.js"></script>
  10. <script src="static/js/bzd.js"></script>
  11. <script src="static/js/lib.js"></script>
  12. <script src="static/js/echarts.min.js"></script>
  13. <script src="static/js/jquery.liMarquee.js"></script>
  14. <script src="static/js/showTime.js"></script>
  15. <!-- 自定义 -->
  16. <!-- &lt;!&ndash; 地图&ndash;&gt;-->
  17. <!-- <script src="static/js/map.js"></script>-->
  18. <!-- 轨迹 -->
  19. <script src="static/js/trail.js"></script>
  20. <!-- V3D -->
  21. <script async src="https://vdata.baozhida.cn/3d1v/static/js/es-module-shims.js"></script>
  22. <link rel="stylesheet" href="https://vdata.baozhida.cn/3d1v/static/js/libs/loading/load.css" media="all">
  23. <script async src="https://vdata.baozhida.cn/3d1v/static/js/libs/loading/load.js" charset="utf-8"></script>
  24. <script type="importmap">
  25. {
  26. "imports": {
  27. "three": "/3d1v/static/js/three.module.js",
  28. "three/addons/": "/3d1v/static/js/jsm/"
  29. }
  30. }
  31. </script>
  32. <script>var iot3d;</script>
  33. <script src="static/js/v3d.js"></script>
  34. <script type="module" >
  35. import { IOT3D } from 'https://vdata.baozhida.cn/3d1v/static/js/version/IOT3Dv2.2.js';
  36. iot3d = new IOT3D("v_3d",true); // 创建应用 div_id, 是否主动渲染
  37. </script>
  38. <!-- 视图 - 必须 -->
  39. <script src="static/js/C_Mode_v3D.js"></script>
  40. </head>
  41. <body style="user-select:none;overflow:hidden">
  42. <div class="loading">
  43. <div class="loadbox"><img src="static/images/loading.gif"> 页面加载中...</div>
  44. </div>
  45. <script>
  46. var C_keys = "{{.C_keys}}" // 钥匙数组字符串 734A890EHOXXXXX,F8764NTVPXXXXXX
  47. var C_json = null // 数据 10s更新一次
  48. </script>
  49. <div class="head" style="z-index: 999;">
  50. <h1 id="T_公司名称">某某科技有限公司-全国冷链数据大屏</h1>
  51. <div class="time" id="showTime">2019/11/29 0:12:42</div>
  52. </div>
  53. <div style="width: 100%;height: 100%;position: absolute;z-index: 9;" id="v_trail">
  54. </div>
  55. <div class="map3d" style="" id="v_3d">
  56. </div>
  57. <div class="mainbox">
  58. <ul class="clearfix">
  59. <li style="z-index: 999;">
  60. <div class="boxall" style="height: calc(1.8rem)">
  61. <div class="alltitle">冷链汇总概览</div>
  62. <div class="sycm">
  63. <ul class="clearfix">
  64. <li>
  65. <h2 id="T_终端总数">1824</h2>
  66. <span>终端总数</span></li>
  67. <li>
  68. <h2 id="T_今日报警总数">99999</h2>
  69. <span>今日报警</span></li>
  70. <li>
  71. <h2 id="T_今日报警率">1920</h2>
  72. <span>今日报警率</span></li>
  73. <li>
  74. <h2 id="T_今日未处理总数">1824</h2>
  75. <span>未处理</span></li>
  76. </ul>
  77. </div>
  78. <div class="boxfoot"></div>
  79. </div>
  80. <div class="boxall" style="height: calc(50% - 2.0rem)">
  81. <div class="alltitle">设备报警曲线图</div>
  82. <div class="boxnav" id="echarts_报警设备数近7天曲线图"></div>
  83. <div class="boxfoot"></div>
  84. </div>
  85. <!--库房端-->
  86. <div class="boxall R_KF_Column" style="height: calc(1.5rem)">
  87. <div class="alltitle"><span class="KFspan"></span>库房端汇总统计</div>
  88. <div class="sycm_1">
  89. <ul class="clearfix">
  90. <li>
  91. <h2 id="T_库房总数">1824</h2>
  92. <span>库房总数</span></li>
  93. <li>
  94. <h2 id="T_库房报警设备数_今天">1920</h2>
  95. <span>报警设备数</span></li>
  96. <li>
  97. <h2 id="T_库房未处理总数">99999</h2>
  98. <span>报警未处理</span></li>
  99. <li>
  100. <h2 id="T_今日库房报警率">1824</h2>
  101. <span>今日报警率</span></li>
  102. </ul>
  103. </div>
  104. <div class="boxfoot"></div>
  105. </div>
  106. <div class="boxall R_KF_Column" style="height: calc(50% - 1.6rem)">
  107. <div class="alltitle"><span class="KFspan"></span>库房端报警类型统计
  108. </div>
  109. <div class="boxnav" id="echarts_库房端报警类型统计"></div>
  110. <div class="boxfoot"></div>
  111. </div>
  112. <!--移动端-->
  113. <div class="boxall R_YD_Column" style="height: calc(1.5rem)">
  114. <div class="alltitle"><span class="YDspan"></span>移动端汇总统计
  115. </div>
  116. <div class="sycm_1">
  117. <ul class="clearfix">
  118. <li>
  119. <h2 id="T_移动总数">1824</h2>
  120. <span>移动端总数</span></li>
  121. <li>
  122. <h2 id="T_任务总数_今天">1920</h2>
  123. <span>今日运输任务</span></li>
  124. <li>
  125. <h2 id="T_今日闲置设备">99999</h2>
  126. <span>今日设备使用率</span></li>
  127. <li>
  128. <h2 id="T_移动设备报警数_今天">1824</h2>
  129. <span>今日报警数量</span></li>
  130. </ul>
  131. </div>
  132. <div class="boxfoot"></div>
  133. </div>
  134. <div class="boxall R_YD_Column" style="height: calc(50% - 1.6rem)">
  135. <div class="alltitle"><span class="YDspan"></span>移动端任务曲线图
  136. <div class="pulll_right">
  137. <!-- <a style="color: #f93fff" >月统计</a>-->
  138. <!-- <a style="color: #3f99ff" >周统计</a>-->
  139. </div>
  140. </div>
  141. <div class="boxnav" id="echarts_移动端任务曲线图"></div>
  142. <div class="boxfoot"></div>
  143. </div>
  144. </li>
  145. <li>
  146. <div style="position: relative">
  147. <div class="barnav">
  148. <div class="bar">
  149. <div class="barbox">
  150. <ul class="clearfix">
  151. <li class="pulll_left counter" id="T_C_1">1942</li>
  152. <li class="pulll_left counter" id="T_C_2">98612</li>
  153. <li class="pulll_left counter" id="T_C_3">2091</li>
  154. </ul>
  155. </div>
  156. <div class="barbox2">
  157. <ul class="clearfix">
  158. <li class="pulll_left" id="T_Cn_1">公司/门店 数量</li>
  159. <li class="pulll_left" id="T_Cn_2">今日库房报警/监控总数</li>
  160. <li class="pulll_left" id="T_Cn_3">今日库房未处理/离线总数</li>
  161. </ul>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <div class="mapbox R_KF_Column" id="map_kf">
  167. <div class="map">
  168. <div class="map1"><img src="static/images/lbx.png"></div>
  169. <div class="map2"><img src="static/images/jt.png"></div>
  170. <div class="map3"><img src="static/images/map.png"></div>
  171. <!-- <div class="map4" id="v_map"></div>-->
  172. </div>
  173. </div>
  174. <div class="dibox">
  175. <div id="v_back" class="didata" onclick="f_v_back()">
  176. <img src="static/images/撤销.png" style="width: 50px;height: 50px;margin-top: -16px">
  177. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">返回</p>
  178. </div>
  179. <div id="v_open_KF" class="didata" onclick="f_kf_open()">
  180. <img src="static/images/库房管理.png" style="width: 50px;height: 50px;margin-top: -16px">
  181. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">库房端</p>
  182. </div>
  183. <div id="v_open_YD" class="didata" onclick="f_yd_open()">
  184. <img src="static/images/地图类_地图.png" style="width: 50px;height: 50px;margin-top: -16px">
  185. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">移动端</p>
  186. </div>
  187. </div>
  188. </li>
  189. <!-- 库房端--->
  190. <li style="z-index: 999;">
  191. <div class="boxall" style="height: 100%">
  192. <div class="alltitle">设备列表</div>
  193. <div class="wrap" style="height: 55px">
  194. <ul>
  195. <li><p><span>设备名称</span><span>温度</span><span>湿度</span></p></li>
  196. </ul>
  197. </div>
  198. <div class="wrap boxnava" id="Company_DeviceG" style="top: -10px;">
  199. <ul id="Company_DeviceL">
  200. <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
  201. <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  202. <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  203. <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  204. <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  205. <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
  206. <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  207. <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  208. <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  209. <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  210. </ul>
  211. </div>
  212. <div class="boxfoot"></div>
  213. </div>
  214. </li>
  215. </ul>
  216. <div class="copyright">宝智达冷链 技术支持</div>
  217. </div>
  218. </body>
  219. </html>