realtimetraffic.jsp 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. <%@ page import="org.apache.commons.lang3.StringUtils" %>
  2. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme() + "://"
  6. + request.getServerName() + ":" + request.getServerPort()
  7. + path + "/";
  8. String taskname = (String)request.getParameter("taskname");
  9. %>
  10. <!DOCTYPE html>
  11. <html lang="zh-CN">
  12. <head>
  13. <meta charset="utf-8">
  14. <meta http-equiv="x-ua-compatible" content="IE=edge">
  15. <meta name="viewport" content="width=device-width, initial-scale=1">
  16. <title>车流量实时表</title>
  17. <link rel="stylesheet" href="css/bootstrap.min.css">
  18. <link rel="stylesheet" href="css/bootstrap-table.min.css">
  19. <link rel="stylesheet" href="css/sweetalert2.min.css" >
  20. <link rel="icon" href="favicon.ico">
  21. </head>
  22. <body>
  23. <div class="container-fluid">
  24. <table id="table"
  25. data-sort-order="desc" data-sort-name="alarmtime"
  26. data-sort-field="alarmtime" data-show-refresh="false"
  27. data-unique-id="guid"
  28. data-minimum-count-columns="2" data-show-pagination-switch="false"
  29. data-pagination="true" data-id-field="guid" data-id-table="advancedTable"
  30. data-page-list="[10, 50]" data-show-footer="false"
  31. data-query-params="queryParam"
  32. data-side-pagination="server" data-url="getlastrtinfo.cpp?<%=request.getQueryString() + "&timestamp=" + System.currentTimeMillis()%>"
  33. data-response-handler="responseHandler">
  34. </table>
  35. <!--data-filter-control="true" data-filter-show-clear="true"-->
  36. </div>
  37. <script src="js/jquery-3.1.1.min.js"></script>
  38. <script src="js/bootstrap.min.js"></script>
  39. <script src="js/sweetalert2.min.js"></script>
  40. <!-- for IE support -->
  41. <script src="js/es6-promise.auto.min.js"></script>
  42. <!-- END FOOTER -->
  43. <script>
  44. var $modal = $('#exampleModal');
  45. var recipient;
  46. var curindex;
  47. function queryParam(params) {
  48. return params;
  49. }
  50. //表格
  51. var $table = $('#table');
  52. function initTable() {
  53. $table.bootstrapTable({
  54. height: getHeight(),
  55. exportDataType: "basic",
  56. columns: [[{
  57. title: '通道名称',
  58. field: 'taskname',
  59. align: 'center',
  60. valign: 'middle',
  61. sortable: true,
  62. //filterControl:"select",
  63. }, {
  64. field: 'alarmtime',
  65. title: '统计时间',
  66. searchable: true,
  67. align: 'center',
  68. sortable: true
  69. }, {
  70. title: '方向',
  71. field: 'laneindex',
  72. align: 'center',
  73. formatter: function (value) {
  74. if (value === 1) {
  75. return "上行";
  76. }
  77. else if (value === 0) {
  78. return "下行";
  79. }
  80. else if (value === 2){
  81. return "出高速";
  82. }
  83. else if (value === 3){
  84. return "进高速";
  85. }
  86. }
  87. }, {
  88. title: '方向名称',
  89. field: 'laneno',
  90. align: 'center',
  91. formatter: function (value) {
  92. if (value === 1) {
  93. return "正向";
  94. }
  95. else if (value === 0) {
  96. return "反向";
  97. }
  98. else {
  99. return getLaneName(value);
  100. }
  101. }
  102. }, {
  103. field: 'uwJam',
  104. title: '交通状态',
  105. align: 'center',
  106. formatter: function (value) {
  107. return getJam(value);
  108. }
  109. }, {
  110. field: 'udwFlux',
  111. title: '车流量',
  112. align: 'center',
  113. }, {
  114. field: 'udwSpeed',
  115. title: '车速',
  116. align: 'center',
  117. formatter: function (value) {
  118. if (value === 0)
  119. return "-";
  120. return value + " km/h";
  121. }
  122. }, {
  123. field: 'udwSpace',
  124. title: '车间距',
  125. align: 'center',
  126. formatter: function (value) {
  127. if (value === 0)
  128. return "-";
  129. return value;
  130. }
  131. }, {
  132. field: 'uwDensity',
  133. title: '车辆密度',
  134. align: 'center',
  135. formatter: function (value) {
  136. if (value === 0)
  137. return "-";
  138. return value;
  139. }
  140. }, {
  141. field: 'uwOccupancy',
  142. title: '车道占有率',
  143. align: 'center',
  144. formatter: function (value) {
  145. return value + " ‰";
  146. }
  147. }],]
  148. });
  149. // sometimes footer render error.
  150. setTimeout(function () {
  151. $table.bootstrapTable('resetView');
  152. }, 200);
  153. $table.on('expand-row.bs.table', function (e, index, row, $detail) {
  154. });
  155. $table.on('all.bs.table', function (e, name, args) {
  156. console.log(name, args);
  157. });
  158. $(window).resize(function () {
  159. $table.bootstrapTable('resetView', {
  160. height: getHeight()
  161. });
  162. });
  163. }
  164. function refreshtable() {
  165. $table.bootstrapTable('refresh', null);
  166. setTimeout(refreshtable, 15000);
  167. }
  168. var refresh = setTimeout(refreshtable, 15000);
  169. function getFilterResult(result) {
  170. switch (result){
  171. case -1:
  172. return "未过滤";
  173. case 0:
  174. return "匹配到一致";
  175. case 1:
  176. return "匹配到相似";
  177. case 2:
  178. return "匹配到部分相似";
  179. case 3:
  180. return "未匹配到";
  181. case 4:
  182. return "宽高比例过滤";
  183. case 5:
  184. return "最小像素值过滤";
  185. case 6:
  186. return "连续播报过滤";
  187. case 7:
  188. return "水平框过滤";
  189. case 8:
  190. return "行人报警过滤";
  191. case 10:
  192. return "白线过滤";
  193. case 11:
  194. return "梯形过滤";
  195. case 12:
  196. return "树叶过滤";
  197. case 13:
  198. return "地面过滤";
  199. case 15:
  200. return "最小高度过滤";
  201. default:
  202. return result;
  203. }
  204. }
  205. function getLevel(level) {
  206. switch (level){
  207. case 1:
  208. return "紧急";
  209. case 2:
  210. return "重要";
  211. case 3:
  212. return "警告";
  213. case 4:
  214. return "提示";
  215. default:
  216. return "未知";
  217. }
  218. }
  219. function getJam(result) {
  220. switch (result){
  221. case 1:
  222. return "畅通";
  223. case 2:
  224. return "基本畅通";
  225. case 3:
  226. return "轻度拥堵";
  227. case 4:
  228. return "中度拥堵";
  229. case 5:
  230. return "重度拥堵";
  231. default:
  232. return "未知";
  233. }
  234. }
  235. function getResult(result) {
  236. switch (result) {
  237. case 0:
  238. return "未处理";
  239. case 1:
  240. return "已处理";
  241. case 2:
  242. return "误报警";
  243. default :
  244. return "其他";
  245. }
  246. }
  247. function getAlarmTypeName(alarmtype) {
  248. switch (alarmtype){
  249. case 0x50:
  250. return "停驶";
  251. case 0x51:
  252. return"超速";
  253. case 0x52:
  254. return "事故";
  255. case 0x53:
  256. return "慢行";
  257. case 0x54:
  258. return "行人";
  259. case 0x55:
  260. return "逆行";
  261. case 0x56:
  262. return "火灾";
  263. case 0x57:
  264. return "抛洒物";
  265. case 0x58:
  266. return "排队超限";
  267. case 0x59:
  268. return "交通状态信息";
  269. case 0x5a:
  270. return "车头间距";
  271. case 0x5b:
  272. return "交通状态";
  273. case 0xFF:
  274. return "测试";
  275. default:
  276. return "未知";
  277. }
  278. }
  279. function getLaneName(laneno)
  280. {
  281. switch (laneno)
  282. {
  283. case 92:
  284. return "福建方向";
  285. case 91:
  286. return "安徽方向";
  287. case 273:
  288. case 301678153:
  289. return "江西方向";
  290. case 270:
  291. return "杭州方向";
  292. case 271:
  293. return "上海方向";
  294. case 272:
  295. case 1028415928:
  296. case 404:
  297. return "杭州方向";
  298. case 401:
  299. return "金华方向";
  300. case 402:
  301. return "宁波方向";
  302. case 403:
  303. return "东阳方向";
  304. case 2135407016:
  305. return "友谊关方向";
  306. case 2135407017:
  307. return "南宁方向";
  308. case 2135407014:
  309. return "靖西方向";
  310. case 2135407015:
  311. return "崇左方向";
  312. case 0:
  313. case undefined:
  314. return "未知";
  315. default:
  316. return laneno;
  317. }
  318. }
  319. function getIdSelections() {
  320. return $.map($table.bootstrapTable('getSelections'), function (row) {
  321. return row.guid
  322. });
  323. }
  324. function responseHandler(res) {
  325. return res;
  326. }
  327. window.operateEvents = {};
  328. function getHeight() {
  329. return $(window).height();
  330. //return $(window).height() - $('h1').outerHeight(true);
  331. return $(window).height() - $('.page-footer').outerHeight(true)
  332. - $('.page-header').outerHeight(true);
  333. }
  334. $(function () {
  335. var scripts = [
  336. //location.search.substring(1) ||
  337. 'js/bootstrap-table.min.js', 'js/bootstrap-table-zh-CN.min.js',
  338. 'js/bootstrap-table-export.min.js', 'js/tableExport.js',
  339. 'js/bootstrap-table-editable.min.js',
  340. //"js/bootstrap-table-filter-control.js",
  341. //'js/bootstrap-editable.js',
  342. 'js/bootstrap-table-toolbar.min.js'], eachSeries = function (arr, iterator, callback) {
  343. callback = callback || function () {
  344. };
  345. if (!arr.length) {
  346. return callback();
  347. }
  348. var completed = 0;
  349. var iterate = function () {
  350. iterator(arr[completed], function (err) {
  351. if (err) {
  352. callback(err);
  353. callback = function () {
  354. };
  355. } else {
  356. completed += 1;
  357. if (completed >= arr.length) {
  358. callback(null);
  359. } else {
  360. iterate();
  361. }
  362. }
  363. });
  364. };
  365. iterate();
  366. };
  367. eachSeries(scripts, getScript, initTable);
  368. });
  369. function getScript(url, callback) {
  370. var head = document.getElementsByTagName('head')[0];
  371. var script = document.createElement('script');
  372. script.src = url;
  373. var done = false;
  374. // Attach handlers for all browsers
  375. script.onload = script.onreadystatechange = function () {
  376. if (!done
  377. && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
  378. done = true;
  379. if (callback)
  380. callback();
  381. // Handle memory leak in IE
  382. script.onload = script.onreadystatechange = null;
  383. }
  384. };
  385. head.appendChild(script);
  386. // We handle everything using the script element injection
  387. return undefined;
  388. }
  389. </script>
  390. </body>
  391. </html>