火箭军大屏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.

238 lines
9.3 KiB

  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 href="css/style.css" rel="stylesheet" type="text/css">
  15. </head>
  16. <body>
  17. <div class="env-container">
  18. <div class="env-top-title"></div>
  19. <div class="current-date"></div>
  20. <div class="env-main">
  21. <div class="env-main-left">
  22. <div class="env-item container-wrap">
  23. <span class="right-top-line"></span>
  24. <span class="left-bottom-line"></span>
  25. <h3><i class="iconfont icon-kongqizhiliangshuju"></i>档案库空气质量数据</h3>
  26. <ul class="screen-env-list left-top-env">
  27. </ul>
  28. </div>
  29. <div class="env-item container-wrap">
  30. <span class="right-top-line"></span>
  31. <span class="left-bottom-line"></span>
  32. <h3><i class="iconfont icon-loushuijiance"></i>漏水检测</h3>
  33. <div class="leakage-detection">
  34. <div class="state-list">
  35. <span>正常</span>
  36. <span>报警</span>
  37. </div>
  38. <ul class="leakage-list">
  39. <li class="leakage-item001">
  40. <p><i class="iconfont icon-weihubaojing"></i>维护报警</p>
  41. <span class="leakage-state-tip"></span>
  42. </li>
  43. <li class="leakage-item002">
  44. <p><i class="iconfont icon-loushuibaojing"></i>漏水报警</p>
  45. <span class="leakage-state-tip"></span>
  46. </li>
  47. <li class="leakage-item003">
  48. <p><i class="iconfont icon-ganyingxianduanlie"></i>感应线断裂</p>
  49. <span class="leakage-state-tip"></span>
  50. </li>
  51. <li class="leakage-item004">
  52. <p><i class="iconfont icon-loushuiweizhi"></i>漏水位置</p>
  53. <span class="lsLocation"></span>
  54. </li>
  55. </ul>
  56. </div>
  57. </div>
  58. <!-- 门禁记录 -->
  59. <div class="env-item container-wrap">
  60. <span class="right-top-line"></span>
  61. <span class="left-bottom-line"></span>
  62. <h3 class="table-title">
  63. <p class="title-arrow">
  64. <i class="iconfont icon-menjinjilu"></i>门禁记录
  65. </p>
  66. </h3>
  67. <table class="table-wrapper" cellpadding="0" cellspacing="8">
  68. <tr class="table-header">
  69. <th>时间</th>
  70. <th>库房</th>
  71. <th>警情</th>
  72. </tr>
  73. </table>
  74. <div id="scrollTable" class="scrollTable">
  75. <table class="table-wrapper " cellpadding="0" cellspacing="8">
  76. <tbody class="table-text" id="fTbody">
  77. </tbody>
  78. </table>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="env-main-middle">
  83. <div class="env-3d">
  84. <img src="/images/largeScreen/screen.png" alt="" />
  85. <ul class="screen-env-list middle-env">
  86. </ul>
  87. </div>
  88. <div class="middle-bottom">
  89. <div class="env-item container-wrap middle-bottom-l">
  90. <span class="right-top-line"></span>
  91. <span class="left-bottom-line"></span>
  92. <ul>
  93. <li>
  94. <div class="row-item">
  95. <i class="row-icon row-icon1"></i>
  96. <span>馆藏总量</span>
  97. </div>
  98. <div class="card-panel-text">
  99. <p class="row-num" id="archivesNum"><b class="timer" data-to="0" data-speed="800"></b></p>
  100. </div>
  101. </li>
  102. <li>
  103. <div class="row-item">
  104. <i class="row-icon row-icon2"></i>
  105. <span>文件数量</span>
  106. </div>
  107. <div class="card-panel-text">
  108. <p id="filesNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  109. </div>
  110. </li>
  111. <li>
  112. <div class="row-item">
  113. <i class="row-icon row-icon3"></i>
  114. <span>案卷数量</span>
  115. </div>
  116. <div class="card-panel-text">
  117. <p id="anjuanNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  118. </div>
  119. </li>
  120. </ul>
  121. <ul>
  122. <li>
  123. <div class="row-item">
  124. <i class="row-icon row-icon4"></i>
  125. <span>全部设备</span>
  126. </div>
  127. <div class="card-panel-text">
  128. <p id="deviceTotal" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  129. </div>
  130. </li>
  131. <li>
  132. <div class="row-item">
  133. <i class="row-icon row-icon5"></i>
  134. <span>在线设备</span>
  135. </div>
  136. <div class="card-panel-text">
  137. <p id="lineDevNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  138. </div>
  139. </li>
  140. <li>
  141. <div class="row-item">
  142. <i class="row-icon row-icon6"></i>
  143. <span>离线设备</span>
  144. </div>
  145. <div class="card-panel-text">
  146. <p id="offlineDevice" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
  147. </div>
  148. </li>
  149. </ul>
  150. </div>
  151. <div class="env-item container-wrap middle-bottom-r">
  152. <span class="right-top-line"></span>
  153. <span class="left-bottom-line"></span>
  154. <ul>
  155. <li>
  156. <span>日借阅量</span>
  157. <div id="tnum1" class="num"></div>
  158. </li>
  159. <li><span>日归还量</span>
  160. <div id="tnum2" class="num"></div>
  161. </li>
  162. <li><span>月借阅量</span>
  163. <div id="tnum3" class="num"></div>
  164. </li>
  165. <li><span>月归还量</span>
  166. <div id="tnum4" class="num"></div>
  167. </li>
  168. </ul>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="env-main-right">
  173. <div class="env-item container-wrap">
  174. <span class="right-top-line"></span>
  175. <span class="left-bottom-line"></span>
  176. <h3>
  177. <i class="iconfont icon-danganjieyue"></i>档案借阅
  178. </h3>
  179. <div id="chart1" class="chart-wrapper" style="height: calc(100% - 40px);">
  180. </div>
  181. </div>
  182. <div class="env-item container-wrap">
  183. <span class="right-top-line"></span>
  184. <span class="left-bottom-line"></span>
  185. <h3>
  186. <i class="iconfont icon-danganleixing"></i>档案类型
  187. </h3>
  188. <div id="chart2" class="chart-wrapper" style="height: calc(100% - 40px);">
  189. </div>
  190. <!-- <div class="empty-main">
  191. <svg-icon icon-class="empty" class-name="empty-img" />
  192. <i></i>
  193. <p>暂无数据</p>
  194. </div> -->
  195. </div>
  196. <!-- 报警记录 -->
  197. <div class="env-item container-wrap">
  198. <span class="right-top-line"></span>
  199. <span class="left-bottom-line"></span>
  200. <h3 class="table-title">
  201. <p class="title-arrow">
  202. <i class="iconfont icon-baojingjilu"></i>报警记录
  203. </p>
  204. </h3>
  205. <!--表格渲染-->
  206. <table class="table-wrapper" cellpadding="0" cellspacing="8">
  207. <tr class="table-header">
  208. <th>时间</th>
  209. <th>库房</th>
  210. <th>警情</th>
  211. </tr>
  212. </table>
  213. <div id="scrollTable2" class="scrollTable">
  214. <table class="table-wrapper" cellpadding="0" cellspacing="8">
  215. <tbody class="table-text" id="fTbody2">
  216. </tbody>
  217. </table>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. </body>
  224. <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
  225. <script type="text/javascript" src="/js/echarts.js"></script>
  226. <script type="text/javascript" src="/js/flexible.js"></script>
  227. <script type="text/javascript" src="/iconfont/iconfont.js"></script>
  228. <script type="text/javascript" src="/js/jquery.countTo.js"></script>
  229. <script type="text/javascript" src="/js/countTo.js"></script>
  230. <script type="text/javascript" src="/js/number.js"></script>
  231. <script type="text/javascript" src="/js/util.js"></script>
  232. <script type="text/javascript" src="/js/lendAcross.js"></script>
  233. <script type="text/javascript" src="/js/typePie.js"></script>
  234. <script type="text/javascript" src="/js/index.js"></script>
  235. </html>