main.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  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="sooka.ico">
  8. <script type="text/javascript" th:src="@{/util/businessutil.js}"></script>
  9. <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
  10. <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
  11. <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
  12. <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
  13. <link th:href="@{/css/style.css}" rel="stylesheet"/>
  14. </head>
  15. <body class="gray-bg">
  16. <div class="wrapper wrapper-content">
  17. <div class="row">
  18. <div class="col-sm-3 topbar_allnav_new" th:object="${todayWindPower}">
  19. <span class="weather_tit_new"><span th:text="*{temperature}">-25</span><span class="font_s20">℃</span></span>
  20. <div class="topbar_nav_new float-e-margins">
  21. <div class="topbar_title_new">
  22. <span class="tit_topbar_fire" th:text="*{fireRating}">一级火险</span>
  23. </div>
  24. <div class="topbar_content padding_nav_news_3">
  25. <ul style="text-align: center;">
  26. <li class="top_m20" ><span class="tit_list bgc_1">湿度</span><p class="font_s22"><span th:text="*{humidity}">69</span><span>%</span></p></li>
  27. <li class="left5 top_m20"><span class="tit_list bgc_2">风向</span><p class="font_s20" th:text="*{windDirection}">西北</p></li>
  28. <li class="left5 top_m20"><span class="tit_list bgc_3">风力</span><p class="font_s20" th:text="*{windPower}">五级</p></li>
  29. </ul>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="col-sm-3 topbar_allnav_new">
  34. <div class="topbar_nav_new float-e-margins">
  35. <div class="topbar_title_new">
  36. <span class="tit_topbar_fire">人员情况</span>
  37. </div>
  38. <div class="topbar_content padding_nav_news_3" th:object="${user}">
  39. <ul style="text-align: center;">
  40. <li class="top_m20"><span class="tit_list bgc_4">在线人员</span><p class="font_s22" th:text="*{online}">300</p></li>
  41. <li class="left5 top_m20" ><span class="tit_list bgc_5">上岗人员</span><p class="font_s22" th:text="*{total}">280</p></li>
  42. <li class="left5 top_m20" ><span class="tit_list bgc_6">缺岗人员</span><p class="font_s22" th:text="*{absence}">20</p></li>
  43. </ul>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="col-sm-3 topbar_allnav_new">
  48. <div class="topbar_nav_new float-e-margins" th:object="${policies}">
  49. <div class="topbar_title_new">
  50. <span class="tit_topbar_fire">政策法规 </span>
  51. </div>
  52. <div class="topbar_content padding_nav_news_3">
  53. <ul style="text-align: center;">
  54. <li class="top_m20" ><span class="tit_list bgc_7">政策</span><p class="font_s22" th:text="*{policies_type_1}">300</p></li>
  55. <li class="top_m20 left5" ><span class="tit_list bgc_8">法规</span><p class="font_s22" th:text="*{policies_type_2}">280</p></li>
  56. <li class="top_m20 left5" ><span class="tit_list bgc_9" >应急预案</span><p class="font_s22" th:text="*{reserveplan}">20</p></li>
  57. </ul>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="col-sm-3 topbar_allnav_new">
  62. <div class="topbar_nav_new float-e-margins">
  63. <div class="topbar_title_new">
  64. <span class="tit_topbar_fire">通知公告</span>
  65. </div>
  66. <div class="topbar_content padding_nav_news" th:object="${notice}">
  67. <!--<span th:text="*{title}">通知通告内容给上了飞机说带飞了看见说带飞了卡桑德拉见说带飞了卡桑见说带飞了卡桑见说带飞了卡桑见说带飞了卡桑见说带飞了卡桑</span>-->
  68. <span>专业扑火队集中待命</span>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="row">
  74. <div class="col-sm-12">
  75. <div class="ibox float-e-margins">
  76. <div class="ibox-title">
  77. <h5>天气指数</h5>
  78. <!--<div class="pull-right">
  79. <div class="btn-group">
  80. <button type="button" class="btn btn-xs btn-white active">天</button>
  81. <button type="button" class="btn btn-xs btn-white">月</button>
  82. <button type="button" class="btn btn-xs btn-white">年</button>
  83. </div>
  84. </div>-->
  85. <div th:each="obj,objStat : ${weather}">
  86. <input type="hidden" class="year" th:value="*{obj.year}">
  87. <input type="hidden" class="month" th:value="*{obj.month}">
  88. <input type="hidden" class="day" th:value="*{obj.day}">
  89. <input type="hidden" class="temperature" th:value="*{obj.temperature}">
  90. <input type="hidden" class="humidity" th:value="*{obj.humidity}">
  91. </div>
  92. </div>
  93. <div class="ibox-content">
  94. <div class="row">
  95. <div class="col-sm-9">
  96. <div class="flot-chart">
  97. <div class="flot-chart-content" id="flot-dashboard-chart"></div>
  98. </div>
  99. </div>
  100. <div class="col-sm-3" th:object="${event}">
  101. <ul class="stat-list">
  102. <li>
  103. <h2 class="no-margins" th:text="*{total}">2,346</h2>
  104. <small>事件总数</small>
  105. <div class="progress progress-mini">
  106. <div style="width: 48%;" class="progress-bar"></div>
  107. </div>
  108. </li>
  109. <li>
  110. <h2 class="no-margins" th:text="*{doing}">4,422</h2>
  111. <small>处理中任务</small>
  112. <div class="progress progress-mini">
  113. <div style="width: 60%;" class="progress-bar"></div>
  114. </div>
  115. </li>
  116. <li>
  117. <h2 class="no-margins" th:text="*{done}">9,180</h2>
  118. <small>已处理任务</small>
  119. <div class="progress progress-mini">
  120. <div style="width: 22%;" class="progress-bar"></div>
  121. </div>
  122. </li>
  123. </ul>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <div class="row">
  131. <div class="col-sm-12">
  132. <div class="ibox float-e-margins">
  133. <div class="ibox-title">
  134. <h5>待办任务</h5>
  135. </div>
  136. <div class="ibox-content">
  137. <table class="table table-hover no-margins">
  138. <thead>
  139. <tr>
  140. <th>状态</th>
  141. <th>标题</th>
  142. <th>日期</th>
  143. <th>用户</th>
  144. </tr>
  145. </thead>
  146. <tbody th:each="obj,objStat : ${task}">
  147. <tr>
  148. <td th:hidden="*{obj.taskStatusValue}!='task_status_1'?true:false"><small class="label status_1" th:text="*{obj.taskStatus}">进行中...</small></td>
  149. <td th:hidden="*{obj.taskStatusValue}!='task_status_2'?true:false"><small class="label status_2" th:text="*{obj.taskStatus}">进行中...</small></td>
  150. <td th:hidden="*{obj.taskStatusValue}!='task_status_3'?true:false"><small class="label status_3" th:text="*{obj.taskStatus}">进行中...</small></td>
  151. <td th:hidden="*{obj.taskStatusValue}!='task_status_4'?true:false"><small class="label status_4" th:text="*{obj.taskStatus}">进行中...</small></td>
  152. <td th:hidden="*{obj.taskStatusValue}!='task_status_5'?true:false"><small class="label status_5" th:text="*{obj.taskStatus}">进行中...</small></td>
  153. <td th:text="*{obj.title}">发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  154. <td><i class="fa fa-clock-o" th:text="*{obj.sendTime}"> 11:20</i></td>
  155. <td th:text="*{obj.chargerName}">青衣5858</td>
  156. </tr>
  157. <!--<tr>
  158. <td><span class="label label-warning">已取消</span>
  159. </td>
  160. <td>发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  161. <td><i class="fa fa-clock-o"></i> 10:40</td>
  162. <td>徐子崴</td>
  163. </tr>
  164. <tr>
  165. <td><small>进行中...</small>
  166. </td>
  167. <td>发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  168. <td><i class="fa fa-clock-o"></i> 01:30</td>
  169. <td>姜岚昕</td>
  170. </tr>
  171. <tr>
  172. <td><small>进行中...</small>
  173. </td>
  174. <td>发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  175. <td><i class="fa fa-clock-o"></i> 02:20</td>
  176. <td>武汉大兵哥</td>
  177. </tr>
  178. <tr>
  179. <td><small>进行中...</small>
  180. </td>
  181. <td>发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  182. <td><i class="fa fa-clock-o"></i> 09:40</td>
  183. <td>荆莹儿</td>
  184. </tr>
  185. <tr>
  186. <td><span class="label label-primary">已完成</span>
  187. </td>
  188. <td>发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  189. <td><i class="fa fa-clock-o"></i> 04:10</td>
  190. <td>栾某某</td>
  191. </tr>
  192. <tr>
  193. <td><small>进行中...</small>
  194. </td>
  195. <td>发所带来的咖啡机三段来咖啡机水电费来看圣诞福利</td>
  196. <td><i class="fa fa-clock-o"></i> 12:08</td>
  197. <td>范范范二妮</td>
  198. </tr>-->
  199. </tbody>
  200. </table>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <script th:src="@{/js/jquery.min.js}"></script>
  208. <script th:src="@{/js/bootstrap.min.js}"></script>
  209. <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
  210. <th:block th:include="include :: sparkline-js" />
  211. <script th:inline="javascript">
  212. $(document).ready(function () {
  213. var data2 = [
  214. [gd(2012, 1, 1), 7], [gd(2012, 1, 2), 6], [gd(2012, 1, 3), 4], [gd(2012, 1, 4), 8],
  215. [gd(2012, 1, 5), 9], [gd(2012, 1, 6), 7], [gd(2012, 1, 7), 5], [gd(2012, 1, 8), 4],
  216. [gd(2012, 1, 9), 7], [gd(2012, 1, 10), 8], [gd(2012, 1, 11), 9], [gd(2012, 1, 12), 6],
  217. [gd(2012, 1, 13), 4], [gd(2012, 1, 14), 5], [gd(2012, 1, 15), 11], [gd(2012, 1, 16), 8],
  218. [gd(2012, 1, 17), 8], [gd(2012, 1, 18), 11], [gd(2012, 1, 19), 11], [gd(2012, 1, 20), 6],
  219. [gd(2012, 1, 21), 6], [gd(2012, 1, 22), 8], [gd(2012, 1, 23), 11], [gd(2012, 1, 24), 13],
  220. [gd(2012, 1, 25), 7], [gd(2012, 1, 26), 9], [gd(2012, 1, 27), 9], [gd(2012, 1, 28), 8],
  221. [gd(2012, 1, 29), 5], [gd(2012, 1, 30), 8], [gd(2012, 1, 31), 25]
  222. ];
  223. var data3 = [
  224. [gd(2012, 1, 1), 800], [gd(2012, 1, 2), 500], [gd(2012, 1, 3), 600], [gd(2012, 1, 4), 700],
  225. [gd(2012, 1, 5), 500], [gd(2012, 1, 6), 456], [gd(2012, 1, 7), 800], [gd(2012, 1, 8), 589],
  226. [gd(2012, 1, 9), 467], [gd(2012, 1, 10), 876], [gd(2012, 1, 11), 689], [gd(2012, 1, 12), 700],
  227. [gd(2012, 1, 13), 500], [gd(2012, 1, 14), 600], [gd(2012, 1, 15), 700], [gd(2012, 1, 16), 786],
  228. [gd(2012, 1, 17), 345], [gd(2012, 1, 18), 888], [gd(2012, 1, 19), 888], [gd(2012, 1, 20), 888],
  229. [gd(2012, 1, 21), 987], [gd(2012, 1, 22), 444], [gd(2012, 1, 23), 999], [gd(2012, 1, 24), 567],
  230. [gd(2012, 1, 25), 786], [gd(2012, 1, 26), 666], [gd(2012, 1, 27), 888], [gd(2012, 1, 28), 900],
  231. [gd(2012, 1, 29), 178], [gd(2012, 1, 30), 555], [gd(2012, 1, 31), 993]
  232. ];
  233. data2 = new Array();
  234. data3 = new Array();
  235. var year = document.getElementsByClassName("year");
  236. var month = document.getElementsByClassName("month");
  237. var day = document.getElementsByClassName("day");
  238. var temperature = document.getElementsByClassName("temperature");
  239. var humidity = document.getElementsByClassName("humidity");
  240. for (var i = 0; i < humidity.length; i++) {
  241. //alert(humidity[i].value)
  242. var arr2 = new Array();
  243. arr2.push(gd(year[i].value,month[i].value,day[i].value))
  244. arr2.push(humidity[i].value)
  245. data2.push(arr2)
  246. var arr3 = new Array();
  247. arr3.push(gd(year[i].value,month[i].value,day[i].value))
  248. arr3.push(temperature[i].value)
  249. data3.push(arr3)
  250. }
  251. for (var i = 0; i < 3; i++) {
  252. /*var arr2 = new Array();
  253. arr2.push(gd(2020,1,12+i))
  254. arr2.push(i)
  255. data2.push(arr2)
  256. var arr3 = new Array();
  257. arr3.push(gd(2020,1,12+i))
  258. arr3.push(i*125)
  259. data3.push(arr3)*/
  260. }
  261. var dataset = [
  262. {
  263. label: "温度",
  264. data: data3,
  265. color: "#1ab394",
  266. bars: {
  267. show: true,
  268. align: "center",
  269. barWidth: 24 * 60 * 60 * 600,
  270. lineWidth: 0
  271. }
  272. }, {
  273. label: "湿度",
  274. data: data2,
  275. yaxis: 2,
  276. color: "#464f88",
  277. lines: {
  278. lineWidth: 1,
  279. show: true,
  280. fill: true,
  281. fillColor: {
  282. colors: [{
  283. opacity: 0.2
  284. }, {
  285. opacity: 0.2
  286. }]
  287. }
  288. },
  289. splines: {
  290. show: false,
  291. tension: 0.6,
  292. lineWidth: 1,
  293. fill: 0.1
  294. }
  295. }
  296. ];
  297. var options = {
  298. xaxis: {
  299. mode: "time",
  300. tickSize: [3, "day"],
  301. tickLength: 0,
  302. axisLabel: "Date",
  303. axisLabelUseCanvas: true,
  304. axisLabelFontSizePixels: 12,
  305. axisLabelFontFamily: 'Arial',
  306. axisLabelPadding: 10,
  307. color: "#838383"
  308. },
  309. yaxes: [{
  310. position: "left",
  311. max: 1070,
  312. color: "#838383",
  313. axisLabelUseCanvas: true,
  314. axisLabelFontSizePixels: 12,
  315. axisLabelFontFamily: 'Arial',
  316. axisLabelPadding: 3
  317. }, {
  318. position: "right",
  319. clolor: "#838383",
  320. axisLabelUseCanvas: true,
  321. axisLabelFontSizePixels: 12,
  322. axisLabelFontFamily: ' Arial',
  323. axisLabelPadding: 67
  324. }
  325. ],
  326. legend: {
  327. noColumns: 1,
  328. labelBoxBorderColor: "#000000",
  329. position: "nw"
  330. },
  331. grid: {
  332. hoverable: false,
  333. borderWidth: 0,
  334. color: '#838383'
  335. }
  336. };
  337. function gd(year, month, day) {
  338. return new Date(year, month - 1, day).getTime();
  339. }
  340. var previousPoint = null,
  341. previousLabel = null;
  342. $.plot($("#flot-dashboard-chart"), dataset, options);
  343. //当日没有填写天气自动打开新增页面
  344. var prefix = getBaseRootPath()+"/business/manager/levelmanager";
  345. var url = prefix + "/add";
  346. var date = new Date();
  347. var year = date.getFullYear();
  348. var month = date.getMonth() + 1;
  349. month = month >= 10?month:'0'+month
  350. var day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
  351. var obj = new Object();
  352. obj.rectime = year+"-"+month+"-"+day
  353. $.ajax({
  354. url : prefix + "/addFilter",
  355. method : 'post',
  356. data : obj,
  357. success : function (e) {
  358. if(e == 0){
  359. parent.$.modal.open("新增【气象火险等级】", url);
  360. }
  361. }
  362. });
  363. });
  364. </script>
  365. </body>
  366. </html>