index.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="renderer" content="webkit">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  8. <script type="text/javascript" src="js/rem.js"></script>
  9. <link rel="stylesheet" href="css/style.css">
  10. <title>天津市博安信通智慧社区内网数据比对信息系统</title>
  11. </head>
  12. <body style="visibility: hidden;">
  13. <div class="container-flex" tabindex="0" hidefocus="true">
  14. <div class="box-left">
  15. <div class="left-top">
  16. <div class="current-num">
  17. <div>当前比对数据</div>
  18. <p>3,456,789</p>
  19. </div>
  20. </div>
  21. <div class="left-center">
  22. <div class="title-box">
  23. <h6>违法犯罪人员分析</h6>
  24. </div>
  25. <div class="chart-box pie-chart" style="">
  26. <div id="pie_fanzui" style="width:100%;"></div>
  27. </div>
  28. </div>
  29. <div class="left-bottom" class="select">
  30. <div class="title-box">
  31. <h6>人口出入记录</h6>
  32. </div>
  33. <div class="chart-box">
  34. <table class="table3">
  35. <thead>
  36. <tr>
  37. <th>姓名</th>
  38. <th>角色</th>
  39. <th>开门方式</th>
  40. <th>时间</th>
  41. </tr>
  42. </thead>
  43. <tbody id="tList">
  44. <!--<tr><td colspan="4"><p style="width:9.6rem;">暂无数据</p></td></tr>-->
  45. <tr>
  46. <td>张梦</td>
  47. <td>访客</td>
  48. <td>人脸</td>
  49. <td>2018-11-01 13:51:23</td>
  50. </tr>
  51. <tr>
  52. <td>李阳荣</td>
  53. <td>业主</td>
  54. <td>APP</td>
  55. <td>2018-11-01 13:51:23</td>
  56. </tr>
  57. <tr>
  58. <td>张无双</td>
  59. <td>访客</td>
  60. <td>人脸</td>
  61. <td>2018-11-01 13:51:23</td>
  62. </tr>
  63. <tr>
  64. <td>李阳</td>
  65. <td>业主</td>
  66. <td>APP</td>
  67. <td>2018-11-01 13:51:23</td>
  68. </tr>
  69. </tbody>
  70. </table>
  71. </div>
  72. </div>
  73. </div>
  74. <div class="box-center">
  75. <div class="center-top">
  76. <h1><img src="images/jinghui.png" style="width:55px;margin-right:20px;"/>智慧社区内网比对平台</h1>
  77. </div>
  78. <div class="center-center">
  79. <div class="weather-box">
  80. <div class="data">
  81. <p class="time" id="time">00:00:00</p>
  82. <p id="date"></p>
  83. </div>
  84. <div class="weather">
  85. <img id="weatherImg" src="images/weather/weather_img01.png" alt="">
  86. <div id="weather">
  87. <p class="active">多云</p>
  88. <p>16-22℃</p>
  89. <p>天津市和平区</p>
  90. </div>
  91. </div>
  92. </div>
  93. <img src="images/line_bg.png" alt="">
  94. <div class="select-box" style="height: 0.3rem;">
  95. <div data-type="2">
  96. <div class="select" tabindex="0" hidefocus="true" >
  97. <p style="color:#FFFF00;font-weight:bold;">NO.1北京:2543289人</p>
  98. <p style="color:#7FFF00;font-weight:bold;">NO.1天津: 5690人</p>
  99. <p style="color:#7FFFD4;font-weight:bold;">NO.1河北: 456人</p>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="center-bottom">
  105. <div class="chart-box">
  106. <div id="china_map" style="width:100%;height:95%;"></div>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="box-right">
  111. <div class="right-top">
  112. <div class="title-box">
  113. <h6 id="barTitle">违法犯罪人员年龄分布</h6>
  114. </div>
  115. <p class="unit">单位:岁</p>
  116. <div class="chart-box">
  117. <div id="pie_age" style="width:100%;height:100%;"></div>
  118. </div>
  119. </div>
  120. <div class="right-center">
  121. <div class="title-box">
  122. <h6>违法犯罪人员地区分布</h6>
  123. </div>
  124. <div class="chart-box pie-chart">
  125. <div id="qufenbu_data"style="width:90%;height:120px;margin-left:10px;"></div>
  126. </div>
  127. </div>
  128. <div class="right-bottom">
  129. <div class="title-box">
  130. <p id="switchBtn"><span class="active" data-dataType="income">人口出入时间段统计</span></p>
  131. </div>
  132. <div id="line_time" style="width:90%;height:160px;margin-left:10px;"></div>
  133. </div>
  134. </div>
  135. </div>
  136. </body>
  137. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  138. <script type="text/javascript" src="js/layer/layer.min.js"></script>
  139. <script type="text/javascript" src="js/layer/laydate/laydate.js"></script>
  140. <script type="text/javascript" src="js/echarts.min.js"></script>
  141. <script type="text/javascript" src="js/china.js"></script>
  142. <script type="text/javascript" src="js/infographic.js"></script>
  143. <script type="text/javascript" src="js/macarons.js"></script>
  144. <script type="text/javascript" src="js/shine.js"></script>
  145. <script type="text/javascript" src="js/base.js"></script>
  146. <script type="text/javascript">
  147. $('document').ready(function () {
  148. $("body").css('visibility', 'visible');
  149. var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()]
  150. localStorage.setItem("data", localData);
  151. })
  152. </script>
  153. </html>