index.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>首页-设施管理系统</title>
  7. <link rel="shortcut icon" href="favicon.ico">
  8. <link rel="stylesheet" href="css/common.css" />
  9. <link rel="stylesheet" href="css/index.css" />
  10. </head>
  11. <body style=" background-size: cover;">
  12. <!--<header>-->
  13. <!-- <h1>设施管理系统</h1>-->
  14. <!--</header>-->
  15. <section class="mainbox">
  16. <div class="column">
  17. <div class="panel pie-bar">
  18. <h2>
  19. 设备工况
  20. </h2>
  21. <div class="pie-bar-container">
  22. <div class="pie-bar-top">
  23. <div id="loading"></div>
  24. <div class="chart">
  25. </div>
  26. </div>
  27. <div class="pie-bar-bottom">
  28. <div class="title-btn">异常设备数</div>
  29. <div class="chart pie"></div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="panel line">
  34. <h2>报警处理</h2>
  35. <div class="chart"></div>
  36. </div>
  37. </div>
  38. <div class="column">
  39. <div class="map">
  40. <iframe style="width:100%;height:100%" src='http://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe>
  41. </div>
  42. <div class="no panel">
  43. <h2>实时告警信息</h2>
  44. <table class="pure-table">
  45. <thead>
  46. <tr>
  47. <th>序号</th>
  48. <th>告警时间</th>
  49. <th>告警类型</th>
  50. <th>告警详情</th>
  51. <th>告警状态</th>
  52. </tr>
  53. </thead>
  54. </table>
  55. <div class="scroll" style="height: calc(100% - 1.2rem);overflow-y: auto;">
  56. <table class="pure-table">
  57. <tbody class="warning-info">
  58. </tbody>
  59. </table>
  60. </div>
  61. </div>
  62. </div>
  63. <div class="column">
  64. <div class="panel right-top">
  65. <h2>园区实时报警统计</h2>
  66. <div class="total-squares">
  67. </div>
  68. <div class="yq-total">当前时间</div>
  69. <div class="chart"></div>
  70. </div>
  71. <div class="panel huan right-bottom">
  72. <h2>设备隐患处理</h2>
  73. <div style="height:calc(100% - 0.7rem)">
  74. <ul id="pop" style="height:45%">
  75. </ul>
  76. <div style="height:55%">
  77. <div class="title-btn">异常设备数</div>
  78. <table class="pure-table">
  79. <thead>
  80. <tr>
  81. <th>序号</th>
  82. <th>任务名称</th>
  83. <th>当前状态</th>
  84. <th>应完成时间</th>
  85. </tr>
  86. </thead>
  87. </table>
  88. <div class="scroll" style="height:calc(100% - 1.3rem);overflow-y: auto;">
  89. <table class="pure-table">
  90. <tbody class="abnormal">
  91. <tr>
  92. <td>1</td>
  93. <td>任务111</td>
  94. <td class="unprocess">待处理</td>
  95. <td>2020-12-15 15:22</td>
  96. </tr>
  97. <tr>
  98. <td>2</td>
  99. <td>任务111</td>
  100. <td class="unprocess">待处理</td>
  101. <td>2020-12-15 15:22</td>
  102. </tr>
  103. </tbody>
  104. </table>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </section>
  111. <script src="js/flexible.js"></script>
  112. <script src="js/jquery.js"></script>
  113. <script src="api/request.js"></script>
  114. <script src="js/echarts.min.js"></script>
  115. <script src="js/index.js"></script>
  116. </body>
  117. </html>