火箭军大屏html静态页面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

291 lines
11 KiB

2 years ago
2 years ago
2 years ago
2 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>智能库房综合管理系统</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  9. <meta http-equiv="Pragma" content="no-cache" />
  10. <meta http-equiv="Expires" content="0" />
  11. <link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
  12. <link rel="stylesheet" href="css/reset.css">
  13. <link rel="stylesheet" href="iconfont/iconfont.css">
  14. <link rel="stylesheet" href="css/swiper.min.css">
  15. <link href="css/style.css" rel="stylesheet" type="text/css">
  16. <style>
  17. .swiper-container {
  18. width: 100%;
  19. height: 100%;
  20. overflow: hidden;
  21. }
  22. .swiper-slide {
  23. width: 940px;
  24. height: 450px;
  25. margin-top: 100px;
  26. }
  27. .my-bullet{
  28. display: inline-block;
  29. width: 26px;
  30. height: 2px;
  31. background-color: #c0c4cc;
  32. opacity: .24;
  33. position: relative;
  34. margin: 0 2px;
  35. }
  36. .swiper-pagination-bullet-active {
  37. background-color: #c0c4cc;
  38. opacity: 1;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div class="env-container">
  44. <div class="env-top-title"></div>
  45. <div class="current-date"></div>
  46. <div class="env-main">
  47. <div class="env-main-left">
  48. <div class="env-item container-wrap">
  49. <span class="right-top-line"></span>
  50. <span class="left-bottom-line"></span>
  51. <h3><i class="iconfont icon-kongqizhiliangshuju"></i>档案库空气质量数据</h3>
  52. <ul class="screen-env-list left-top-env">
  53. </ul>
  54. </div>
  55. <div class="env-item container-wrap">
  56. <span class="right-top-line"></span>
  57. <span class="left-bottom-line"></span>
  58. <h3><i class="iconfont icon-loushuijiance"></i>漏水检测</h3>
  59. <div class="leakage-detection">
  60. <div class="state-list">
  61. <span>正常</span>
  62. <span>报警</span>
  63. </div>
  64. <ul class="leakage-list">
  65. <li class="leakage-item001">
  66. <p><i class="iconfont icon-weihubaojing"></i>维护报警</p>
  67. <span class="leakage-state-tip"></span>
  68. </li>
  69. <li class="leakage-item002">
  70. <p><i class="iconfont icon-loushuibaojing"></i>漏水报警</p>
  71. <span class="leakage-state-tip"></span>
  72. </li>
  73. <li class="leakage-item003">
  74. <p><i class="iconfont icon-ganyingxianduanlie"></i>感应线断裂</p>
  75. <span class="leakage-state-tip"></span>
  76. </li>
  77. <li class="leakage-item004">
  78. <p><i class="iconfont icon-loushuiweizhi"></i>漏水位置</p>
  79. <span class="lsLocation"></span>
  80. </li>
  81. </ul>
  82. </div>
  83. </div>
  84. <!-- 门禁记录 -->
  85. <div class="env-item container-wrap">
  86. <span class="right-top-line"></span>
  87. <span class="left-bottom-line"></span>
  88. <h3 class="table-title">
  89. <p class="title-arrow">
  90. <i class="iconfont icon-menjinjilu"></i>门禁记录
  91. </p>
  92. </h3>
  93. <table class="table-wrapper" cellpadding="0" cellspacing="8">
  94. <tr class="table-header">
  95. <th>时间</th>
  96. <th>位置</th>
  97. <th>说明</th>
  98. </tr>
  99. </table>
  100. <div id="scrollTable" class="scrollTable">
  101. <table class="table-wrapper " cellpadding="0" cellspacing="8">
  102. <tbody class="table-text" id="fTbody">
  103. </tbody>
  104. </table>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="env-main-middle">
  109. <div class="env-3d">
  110. <div class="banner-top-name">5F 全景图</div>
  111. <div class="swiper-container">
  112. <div class="swiper-wrapper">
  113. <div class="swiper-slide">
  114. <img src="images/largeScreen/screen1.png" alt="" />
  115. </div>
  116. <div class="swiper-slide" >
  117. <img src="images/largeScreen/screen2.png" alt="" />
  118. </div>
  119. <div class="swiper-slide" >
  120. <img src="images/largeScreen/screen3.png" alt="" />
  121. </div>
  122. <div class="swiper-slide">
  123. <img src="images/largeScreen/screen4.png" alt="" />
  124. </div>
  125. <div class="swiper-slide" >
  126. <img src="images/largeScreen/screen5.png" alt="" />
  127. </div>
  128. <div class="swiper-slide" >
  129. <img src="images/largeScreen/screen6.png" alt="" />
  130. </div>
  131. <div class="swiper-slide" >
  132. <img src="images/largeScreen/screen7.png" alt="" />
  133. </div>
  134. </div>
  135. <div class="swiper-pagination"></div>
  136. </div>
  137. <ul class="screen-env-list middle-env">
  138. </ul>
  139. </div>
  140. <div class="middle-bottom">
  141. <div class="env-item container-wrap middle-bottom-l">
  142. <span class="right-top-line"></span>
  143. <span class="left-bottom-line"></span>
  144. <ul>
  145. <li>
  146. <div class="row-item">
  147. <i class="row-icon row-icon1"></i>
  148. <span>馆藏总量</span>
  149. </div>
  150. <div class="card-panel-text">
  151. <p class="row-num" id="archivesNum"><b class="timer" data-to="0" data-speed="800"></b></p>
  152. </div>
  153. </li>
  154. <li>
  155. <div class="row-item">
  156. <i class="row-icon row-icon2"></i>
  157. <span>文件数量</span>
  158. </div>
  159. <div class="card-panel-text">
  160. <p id="filesNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  161. </div>
  162. </li>
  163. <li>
  164. <div class="row-item">
  165. <i class="row-icon row-icon3"></i>
  166. <span>案卷数量</span>
  167. </div>
  168. <div class="card-panel-text">
  169. <p id="anjuanNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  170. </div>
  171. </li>
  172. </ul>
  173. <ul>
  174. <li>
  175. <div class="row-item">
  176. <i class="row-icon row-icon4"></i>
  177. <span>全部设备</span>
  178. </div>
  179. <div class="card-panel-text">
  180. <p id="deviceTotal" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  181. </div>
  182. </li>
  183. <li>
  184. <div class="row-item">
  185. <i class="row-icon row-icon5"></i>
  186. <span>在线设备</span>
  187. </div>
  188. <div class="card-panel-text">
  189. <p id="lineDevNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  190. </div>
  191. </li>
  192. <li>
  193. <div class="row-item">
  194. <i class="row-icon row-icon6"></i>
  195. <span>离线设备</span>
  196. </div>
  197. <div class="card-panel-text">
  198. <p id="offlineDevice" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  199. </div>
  200. </li>
  201. </ul>
  202. </div>
  203. <div class="env-item container-wrap middle-bottom-r">
  204. <span class="right-top-line"></span>
  205. <span class="left-bottom-line"></span>
  206. <ul>
  207. <li>
  208. <span>日借阅量</span>
  209. <div id="tnum1" class="num"></div>
  210. </li>
  211. <li><span>日归还量</span>
  212. <div id="tnum2" class="num"></div>
  213. </li>
  214. <li><span>月借阅量</span>
  215. <div id="tnum3" class="num"></div>
  216. </li>
  217. <li><span>月归还量</span>
  218. <div id="tnum4" class="num"></div>
  219. </li>
  220. </ul>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="env-main-right">
  225. <div class="env-item container-wrap">
  226. <span class="right-top-line"></span>
  227. <span class="left-bottom-line"></span>
  228. <h3>
  229. <i class="iconfont icon-danganjieyue"></i>档案借阅
  230. </h3>
  231. <div id="chart1" class="chart-wrapper" style="height: calc(100% - 40px);">
  232. </div>
  233. </div>
  234. <div class="env-item container-wrap">
  235. <span class="right-top-line"></span>
  236. <span class="left-bottom-line"></span>
  237. <h3>
  238. <i class="iconfont icon-danganleixing"></i>档案类型
  239. </h3>
  240. <div id="chart2" class="chart-wrapper" style="height: calc(100% - 40px);">
  241. </div>
  242. <!-- <div class="empty-main">
  243. <svg-icon icon-class="empty" class-name="empty-img" />
  244. <i></i>
  245. <p>暂无数据</p>
  246. </div> -->
  247. </div>
  248. <!-- 报警记录 -->
  249. <div class="env-item container-wrap">
  250. <span class="right-top-line"></span>
  251. <span class="left-bottom-line"></span>
  252. <h3 class="table-title">
  253. <p class="title-arrow">
  254. <i class="iconfont icon-baojingjilu"></i>报警记录
  255. </p>
  256. </h3>
  257. <!--表格渲染-->
  258. <table class="table-wrapper" cellpadding="0" cellspacing="8">
  259. <tr class="table-header">
  260. <th>时间</th>
  261. <th>库房</th>
  262. <th>警情</th>
  263. </tr>
  264. </table>
  265. <div id="scrollTable2" class="scrollTable">
  266. <table class="table-wrapper" cellpadding="0" cellspacing="8">
  267. <tbody class="table-text" id="fTbody2">
  268. </tbody>
  269. </table>
  270. </div>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. </body>
  276. <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
  277. <script type="text/javascript" src="/js/echarts.js"></script>
  278. <script type="text/javascript" src="/js/flexible.js"></script>
  279. <script type="text/javascript" src="/iconfont/iconfont.js"></script>
  280. <script type="text/javascript" src="/js/jquery.countTo.js"></script>
  281. <script type="text/javascript" src="/js/swiper.min.js"></script>
  282. <script type="text/javascript" src="/js/countTo.js"></script>
  283. <script type="text/javascript" src="/js/number.js"></script>
  284. <script type="text/javascript" src="/js/util.js"></script>
  285. <script type="text/javascript" src="/js/lendAcross.js"></script>
  286. <script type="text/javascript" src="/js/typePie.js"></script>
  287. <script type="text/javascript" src="/js/index.js"></script>
  288. </html>