C_Mode_v3D_1.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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. <!-- V3D -->
  16. <script async src="https://vdata.baozhida.cn/3d1v/static/js/es-module-shims.js"></script>
  17. <link rel="stylesheet" href="https://vdata.baozhida.cn/3d1v/static/js/libs/loading/load.css" media="all">
  18. <script async src="https://vdata.baozhida.cn/3d1v/static/js/libs/loading/load.js" charset="utf-8"></script>
  19. <script type="importmap">
  20. {
  21. "imports": {
  22. "three": "/3d1v/static/js/three.module.js",
  23. "three/addons/": "/3d1v/static/js/jsm/"
  24. }
  25. }
  26. </script>
  27. <script>var iot3d;</script>
  28. <script src="static/js/v3d.js"></script>
  29. <script type="module" >
  30. import { IOT3D } from 'https://vdata.baozhida.cn/3d1v/static/js/version/IOT3Dv2.2.js';
  31. iot3d = new IOT3D("v_3d",true); // 创建应用 div_id, 是否主动渲染
  32. </script>
  33. <!-- 视图 - 必须 -->
  34. <script src="static/js/C_Mode_v3D_精简版.js"></script>
  35. <style>
  36. .wrap li p span:first-child {
  37. width: 50%;
  38. text-align: left;
  39. }
  40. .wrap li p span {
  41. color: rgba(255, 255, 255, .6);
  42. text-align: center;
  43. text-overflow: ellipsis;
  44. white-space: nowrap;
  45. overflow: hidden;
  46. width: 25%;
  47. font-size: .16rem;
  48. }
  49. .bb {
  50. width: 110px;
  51. height: 28px;
  52. border-radius:15px;
  53. box-shadow: 0px 0px 6px #4fa4ff;;
  54. background-color: #4fa4ff;;
  55. font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  56. font-weight: bolder;
  57. font-size: 20px;
  58. padding: 2px 8px;
  59. margin: 10px 0px;
  60. text-align: center;
  61. color: #bde6ff;
  62. }
  63. .dibox {
  64. position: absolute;
  65. top: calc(100% - 1.4rem);
  66. left: 13%;
  67. /*width: 200px;*/
  68. height: 260px;
  69. z-index: 999;
  70. }
  71. </style>
  72. </head>
  73. <body style="user-select:none;overflow:hidden">
  74. <div class="loading">
  75. <div class="loadbox"><img src="static/images/loading.gif"> 页面加载中...</div>
  76. </div>
  77. <script>
  78. var C_keys = "{{.C_keys}}" // 钥匙数组字符串 734A890EHOXXXXX,F8764NTVPXXXXXX
  79. var C_json = null // 数据 10s更新一次
  80. </script>
  81. <div class="head" style="z-index: 999;">
  82. <h1 id="T_公司名称">某某科技有限公司-全国冷链数据大屏</h1>
  83. <div class="time" id="showTime">2019/11/29 0:12:42</div>
  84. </div>
  85. <div style="width: 100%;height: 100%;position: absolute;z-index: 9;" id="v_trail">
  86. </div>
  87. <div class="map3d" style="" id="v_3d">
  88. </div>
  89. <div class="mainbox">
  90. <ul class="clearfix">
  91. <li style="z-index: 999;">
  92. <div class="boxall" style="height: calc(1.8rem);width: 70%;">
  93. <div class="alltitle">冷链汇总概览</div>
  94. <div class="sycm_1">
  95. <ul class="clearfix">
  96. <li>
  97. <h2 id="T_终端总数">1824</h2>
  98. <span>终端总数</span></li>
  99. <li>
  100. <h2 id="T_今日报警总数">99999</h2>
  101. <span>今日报警</span></li>
  102. <li>
  103. <h2 id="T_今日报警率">1920</h2>
  104. <span>今日报警率</span></li>
  105. <li>
  106. <h2 id="T_今日未处理总数">1824</h2>
  107. <span style='color: #00abff'>未处理</span></li>
  108. </ul>
  109. </div>
  110. <div class="boxfoot"></div>
  111. </div>
  112. <!-- <div class="loucengbox" style="">-->
  113. <!-- <div class="alltitle">冷链汇总概览</div>-->
  114. <div class="loucengbox" id="div_louceng" style="height: calc(100% - 1.9rem);width: 2.5rem;">
  115. <div class="louceng" onclick="f_louceng_show('')">
  116. <img src="static/images/层.png" style="width: 50px;height: 50px;margin-top: -16px">
  117. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">显示所有</p>
  118. </div>
  119. </div>
  120. <!-- </div>-->
  121. </li>
  122. <li style="">
  123. <div class="mapbox R_KF_Column" id="map_kf">
  124. <div class="map">
  125. <div class="map1"><img src="static/images/lbx.png"></div>
  126. <div class="map2"><img src="static/images/jt.png"></div>
  127. <div class="map3"><img src="static/images/map.png"></div>
  128. <!-- <div class="map4" id="v_map"></div>-->
  129. </div>
  130. </div>
  131. <div class="dibox">
  132. <div id="v_back" class="didata" onclick="f_v_back()">
  133. <img src="static/images/撤销.png" style="width: 50px;height: 50px;margin-top: -16px">
  134. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">返回</p>
  135. </div>
  136. <div id="v_modes_1" class="didata" onclick="f_Vcss2d(2)">
  137. <img src="static/images/单色圆点.png" style="width: 50px;height: 50px;margin-top: -16px">
  138. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">状态模式</p>
  139. </div>
  140. <div id="v_modes_2" class="didata" onclick="f_Vcss2d(1)">
  141. <img src="static/images/详情.png" style="width: 50px;height: 50px;margin-top: -16px">
  142. <p style="font-size: .2rem;color: #46b8ff;padding-bottom: .2rem;">详情模式</p>
  143. </div>
  144. </div>
  145. </li>
  146. <!-- 库房端--->
  147. <li style="z-index: 999;">
  148. <div class="boxall" style="height: 100% ;width: 80%;float: right;">
  149. <div class="alltitle">设备列表</div>
  150. <div class="wrap" style="height: 55px">
  151. <ul>
  152. <li><p><span style="width: 50%;">设备名称</span><span style="width: 25%;">温度</span><span style="width: 25%;">湿度</span></p></li>
  153. </ul>
  154. </div>
  155. <div class="wrap boxnava" id="Company_DeviceG" style="top: -10px;">
  156. <ul id="Company_DeviceL">
  157. <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
  158. <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  159. <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  160. <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  161. <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  162. <li><p><span>深圳腾讯科技有限公司</span><span>门禁系统</span><span>在线</span></p></li>
  163. <li><p><span>网易科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  164. <li><p><span>百度科技有限公司</span><span>防火系统</span><span>在线</span></p></li>
  165. <li><p><span>汽车之家科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  166. <li><p><span>小米科技有限公司</span><span>定位系统</span><span>在线</span></p></li>
  167. </ul>
  168. </div>
  169. <div class="boxfoot"></div>
  170. </div>
  171. </li>
  172. </ul>
  173. <div class="copyright">宝智达冷链 技术支持 <span style="color: #f50101">【帮助】👆鼠标左键 旋转视角 🖕鼠标滚轮 缩放大小 ☝️鼠标右键 移动视角 </span></div>
  174. </div>
  175. </body>
  176. </html>