home.jsp 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
  2. <!DOCTYPE html>
  3. <html lang="ch">
  4. <head>
  5. <title>阻力监控后台管理系统-主页</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  8. <meta content="" name="description"/>
  9. <meta content="" name="author"/>
  10. <!-- BEGIN GLOBAL MANDATORY STYLES -->
  11. <link href="css/gfonts1.css" rel="stylesheet" type="text/css">
  12. <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
  13. <link href="css/simple-line-icons.min.css" rel="stylesheet">
  14. <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  15. <!-- END GLOBAL MANDATORY STYLES -->
  16. <!-- BEGIN PAGE LEVEL STYLES -->
  17. <!-- BEGIN THEME STYLES -->
  18. <link href="css/components.css" id="style_components" rel="stylesheet">
  19. <link href="css/plugins.css" rel="stylesheet" type="text/css">
  20. <link href="css/layout.css" rel="stylesheet" type="text/css">
  21. <link href="css/default.css" rel="stylesheet" id="style_color">
  22. <link href="css/sweetalert.css" rel="stylesheet">
  23. <link href="css/jBox.css" rel="stylesheet">
  24. <!-- END THEME STYLES -->
  25. <!-- js -->
  26. <!-- Load jQuery -->
  27. <script src="js/jquery.min.js"></script>
  28. <script src="js/jquery-migrate.min.js" type="text/javascript"></script>
  29. <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
  30. <script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
  31. <script src="js/bootstrap.min.js" type="text/javascript"></script>
  32. <!-- BEGIN PAGE LEVEL SCRIPTS -->
  33. <script src="js/metronic.js"></script>
  34. <script src="js/scripts/layout.js"></script>
  35. <script src="js/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
  36. <script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
  37. <script src="js/jquery.blockui.min.js" type="text/javascript"></script>
  38. <script src="js/jquery.cokie.min.js" type="text/javascript"></script>
  39. <script src="js/jquery.uniform.min.js" type="text/javascript"></script>
  40. <script src="js/morris.min.js" type="text/javascript"></script>
  41. <script src="js/raphael-min.js" type="text/javascript"></script>
  42. <script src="js/jquery.sparkline.min.js" type="text/javascript"></script>
  43. <!-- END CORE PLUGINS -->
  44. <script src="js/sweetalert.min.js"></script>
  45. <script src="js/jBox.min.js"></script>
  46. <!-- END PAGE LEVEL PLUGINS -->
  47. <!-- test -->
  48. <link rel="shortcut icon" href="favicon.ico">
  49. </head>
  50. <!-- END HEAD -->
  51. <!-- BEGIN BODY -->
  52. <!-- DOC: Apply "page-header-menu-fixed" class to set the mega menu fixed -->
  53. <!-- DOC: Apply "page-header-top-fixed" class to set the top menu fixed -->
  54. <body>
  55. <!-- BEGIN PAGE CONTAINER -->
  56. <div class="page-container">
  57. <!-- BEGIN PAGE HEAD -->
  58. <jsp:include page="frame_head.jsp" flush="false"></jsp:include>
  59. <!-- END PAGE HEAD -->
  60. <!-- BEGIN PAGE CONTENT -->
  61. <div class="page-content">
  62. <div class="container">
  63. <!--<h3 class="admin"> <%=session.getAttribute("userName")%>,您好!&nbsp;&nbsp;<small>欢迎您回来!</small> </h3>-->
  64. <div style="min-height: 600px;"></div>
  65. </div>
  66. </div>
  67. <!-- END PAGE CONTENT -->
  68. <!-- END PAGE CONTENT -->
  69. <jsp:include page="frame_tail.jsp" flush="false"></jsp:include>
  70. <!-- END PAGE CONTAINER -->
  71. </div>
  72. <script>
  73. jQuery(document).ready(function () {
  74. //Metronic.init(); // init metronic core components
  75. //Layout.init(); // init current layout
  76. //Index.init();
  77. //Tasks.initDashboardWidget();
  78. var colorsN2 = ['red', 'green', 'blue', 'yellow'];
  79. var currentColorN2 = 0;
  80. var jbox = new jBox('Notice', {
  81. //animation: 'flip',
  82. attributes: {
  83. x: 'right',
  84. y: 'top'
  85. },
  86. theme: 'NoticeBorder',
  87. animation: {open: 'tada', close: 'slide:right'},
  88. onInit: function () {
  89. this.options.color = colorsN2[Math.floor(Math.random() * 10) % 4];
  90. this.options.title = '登录成功';
  91. this.options.content = '欢迎您回来! <%=session.getAttribute("userName")%>';
  92. },
  93. //zIndex: 12000
  94. });
  95. // IE8 Fix: function.bind polyfill
  96. if (Metronic.isIE8() && !Function.prototype.bind) {
  97. Function.prototype.bind = function (oThis) {
  98. if (typeof this !== "function") {
  99. // closest thing possible to the ECMAScript 5 internal IsCallable function
  100. throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  101. }
  102. var aArgs = Array.prototype.slice.call(arguments, 1),
  103. fToBind = this,
  104. fNOP = function () {
  105. },
  106. fBound = function () {
  107. return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
  108. aArgs.concat(Array.prototype.slice.call(arguments)));
  109. };
  110. fNOP.prototype = this.prototype;
  111. fBound.prototype = new fNOP();
  112. return fBound;
  113. };
  114. }
  115. /*
  116. $.get("request_device_overview_pre.do", {}, function (data, status) {
  117. var s = '<div class="col-md-6 col-sm-6 col-xs-6"><div class="stat-left"><div class="stat-chart">' +
  118. '<div id="sparkline_warn"></div></div><div class="stat-number"><div class="title">报警</div><div class="number">' + data.a + '</div></div></div></div> ' +
  119. '<div class="col-md-6 col-sm-6 col-xs-6"><div class="stat-right"><div class="stat-chart"><div id="sparkline_event"></div></div><div class="stat-number"><div class="title">事件</div><div class="number">' + data.c + '</div></div></div></div>';
  120. $('#device_over_view_pre').html(s)
  121. $("#sparkline_warn").sparkline(data.b, {
  122. type: 'bar',
  123. width: '100',
  124. barWidth: 6,
  125. height: '45',
  126. barColor: '#F36A5B',
  127. negBarColor: '#e02222'
  128. });
  129. $("#sparkline_event").sparkline(data.d, {
  130. type: 'bar',
  131. width: '100',
  132. barWidth: 6,
  133. height: '45',
  134. barColor: '#5C9BD1',
  135. negBarColor: '#e02222'
  136. });
  137. })
  138. //请求设备总览
  139. $.get("request_device_overview.do", {}, function (data, status) {
  140. clearInterval(devicetimer);
  141. var arr = [];
  142. arr.push('<table class="table table-hover table-light">');
  143. arr.push('<thead><tr><th>设备名称</th><th>报警总数</th><th>未处理报警</th><th>事件总数</th><th>未处理事件</th></tr></thead>');
  144. for (var i = 0; i < data.length; i++) {
  145. arr.push('<tr><td><a href="deviceinfo.do?tb_no=' + data[i].devicenum + '&tb_name=' + data[i].devicename + '" class="primary-link">' + data[i].devicename + '</a></td>');
  146. arr.push('<td>' + data[i].totalwarn + '</td>');
  147. if ((data[i].totalwarn - data[i].handlewarn) > 0) {
  148. arr.push('<td><a href="warnrecord.do?search=true&filter={\'devicenum\':\'' + data[i].devicenum + '\',\'servicecode\':\'-\',\'handletime\':\'-\'}" class="primary-link">' + (data[i].totalwarn - data[i].handlewarn) + '</a></td>');
  149. } else {
  150. arr.push('<td>0</td>');
  151. }
  152. arr.push('<td>' + data[i].totalevent + '</td>');
  153. if ((data[i].totalevent - data[i].handleevent) > 0) {
  154. arr.push('<td><a href="eventrecord.do?search=true&filter={\'devicenum\':\'' + data[i].devicenum + '\',\'servicecode\':\'-\',\'handletime\':\'-\'}" class="primary-link">' + (data[i].totalevent - data[i].handleevent) + '</a></td></tr>');
  155. } else {
  156. arr.push('<td>0</td></tr>');
  157. }
  158. }
  159. arr.push('</table>');
  160. var s = arr.join('');
  161. $('#shclKeyframes_device_over_view').remove();
  162. $('#device_over_view').html(s);
  163. })
  164. $.get("request_service_overview_pre.do", {}, function (data, status) {
  165. var s = '<div class="col-md-6 col-sm-6 col-xs-6"><div class="stat-left"><div class="stat-chart">' +
  166. '<div id="sparkline_warn2"></div></div><div class="stat-number"><div class="title">报警</div><div class="number">' + data.a + '</div></div></div></div> ' +
  167. '<div class="col-md-6 col-sm-6 col-xs-6"><div class="stat-right"><div class="stat-chart"><div id="sparkline_event2"></div></div><div class="stat-number"><div class="title">事件</div><div class="number">' + data.c + '</div></div></div></div>';
  168. $('#service_over_view_pre').html(s)
  169. $("#sparkline_warn2").sparkline(data.b, {
  170. type: 'bar',
  171. width: '100',
  172. barWidth: 6,
  173. height: '45',
  174. barColor: '#F36A5B',
  175. negBarColor: '#e02222'
  176. });
  177. $("#sparkline_event2").sparkline(data.d, {
  178. type: 'bar',
  179. width: '100',
  180. barWidth: 6,
  181. height: '45',
  182. barColor: '#5C9BD1',
  183. negBarColor: '#e02222'
  184. });
  185. })
  186. //请求服务总览
  187. $.get("request_service_overview.do", {}, function (data, status) {
  188. clearInterval(servicetimer);
  189. var arr = [];
  190. arr.push('<table class="table table-hover table-light">');
  191. arr.push('<thead><tr><th>服务名称</th><th>部署总数</th><th>报警总数</th><th>未处理报警</th><th>事件总数</th><th>未处理事件</th></tr></thead>');
  192. for (var i = 0; i < data.length; i++) {
  193. arr.push('<tr><td><a href="serviceinfo.do?tb_no=' + data[i].servicecode + '&tb_name=' + data[i].servicename + '" class="primary-link">' + data[i].servicename + '</a></td>');
  194. arr.push('<td>' + data[i].usenum + '</td>');
  195. arr.push('<td>' + data[i].totalwarn + '</td>');
  196. if ((data[i].totalwarn - data[i].handlewarn) > 0) {
  197. arr.push('<td><a href="warnrecord.do?search=true&filter={\'servicecode\':\'' + data[i].servicecode + '\',\'handletime\':\'-\'}" class="primary-link">' + (data[i].totalwarn - data[i].handlewarn) + '</a></td>');
  198. } else {
  199. arr.push('<td>0</td>');
  200. }
  201. arr.push('<td>' + data[i].totalevent + '</td>');
  202. if ((data[i].totalevent - data[i].handleevent) > 0) {
  203. arr.push('<td><a href="eventrecord.do?search=true&filter={\'servicecode\':\'' + data[i].servicecode + '\',\'handletime\':\'-\'}" class="primary-link">' + (data[i].totalevent - data[i].handleevent) + '</a></td></tr>');
  204. } else {
  205. arr.push('<td>0</td></tr>')
  206. }
  207. }
  208. arr.push('</table>');
  209. var s = arr.join('');
  210. $('#shclKeyframes_service_over_view').remove();
  211. $('#service_over_view').html(s);
  212. });
  213. //请求服务器状态
  214. requestserverstatus();
  215. function requestserverstatus() {
  216. $.get("serverstatus.do", {}, function (data, status) {
  217. if (success = status) {
  218. if (data) {
  219. var arr = [];
  220. arr.push('<thead> <tr> <th>服务器名称</th> <th style="text-align: center;">CPU使用率</th><th style="text-align: center;">内存使用率</th>' +
  221. '<th style="text-align: center;">Ping延时</th><th style="text-align: center;">C盘使用率</th>' +
  222. '<th style="text-align: center;">D盘使用率</th><th style="text-align: center;">E盘使用率</th><th style="text-align: center;">F盘使用率</th>' +
  223. '</tr> </thead>');
  224. for (var i = 0; i < data.length; i++) {
  225. console.log(data[i]);
  226. arr.push('<tr><td><a href="viewstatus.do?devicenum=' + data[i].num + '&devicename=' + data[i].name + '" class="primary-link">' + data[i].name + '</a></td>');
  227. if (data[i].cpu >= 95) {
  228. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].cpu + '%</td>');
  229. } else if (data[i].cpu >= 80 && data[i].cpu < 95) {
  230. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].cpu + '%</td>');
  231. } else if (data[i].cpu != undefined) {
  232. arr.push('<td align="center">' + data[i].cpu + '%</td>');
  233. } else {
  234. arr.push('<td></td>');
  235. }
  236. if (data[i].ram >= 95) {
  237. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].ram + '%</td>');
  238. } else if (data[i].ram >= 80 && data[i].ram < 95) {
  239. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].ram + '%</td>');
  240. } else if (data[i].ram != undefined) {
  241. arr.push('<td align="center">' + data[i].ram + '%</td>');
  242. } else {
  243. arr.push('<td></td>');
  244. }
  245. if (data[i].ping >= 10000) {
  246. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].ping + 'us</td>');
  247. } else if (data[i].ping >= 1000 && data[i].ping < 10000) {
  248. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].ping + 'us</td>');
  249. } else if (data[i].ping != undefined) {
  250. arr.push('<td align="center">' + data[i].ping + 'us</td>');
  251. } else {
  252. arr.push('<td></td>');
  253. }
  254. if (data[i].disk_c >= 95) {
  255. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].disk_c + '%</td>');
  256. } else if (data[i].disk_c >= 80 && data[i].disk_c < 95) {
  257. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].disk_c + '%</td>');
  258. } else if (data[i].disk_c != undefined) {
  259. arr.push('<td align="center">' + data[i].disk_c + '%</td>');
  260. } else {
  261. arr.push('<td></td>');
  262. }
  263. if (data[i].disk_d >= 95) {
  264. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].disk_d + '%</td>');
  265. } else if (data[i].disk_d >= 80 && data[i].disk_d < 95) {
  266. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].disk_d + '%</td>');
  267. } else if (data[i].disk_d != undefined) {
  268. arr.push('<td align="center">' + data[i].disk_d + '%</td>');
  269. } else {
  270. arr.push('<td></td>');
  271. }
  272. if (data[i].disk_e >= 95) {
  273. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].disk_e + '%</td>');
  274. } else if (data[i].disk_e >= 80 && data[i].disk_e < 95) {
  275. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].disk_e + '%</td>');
  276. } else if (data[i].disk_e != undefined) {
  277. arr.push('<td align="center">' + data[i].disk_e + '%</td>');
  278. } else {
  279. arr.push('<td></td>');
  280. }
  281. if (data[i].disk_f >= 95) {
  282. arr.push('<td align="center" style="color: red; font-size: 13px;font-weight: bold">' + data[i].disk_f + '%</td>');
  283. } else if (data[i].disk_f >= 80 && data[i].disk_f < 95) {
  284. arr.push('<td align="center" style="color: deepskyblue; font-size: 13px;font-weight: bold">' + data[i].disk_f + '%</td>');
  285. } else if (data[i].disk_f != undefined) {
  286. arr.push('<td align="center">' + data[i].disk_f + '%</td>');
  287. } else {
  288. arr.push('<td></td>');
  289. }
  290. }
  291. var s = arr.join('');
  292. var a = $('#shclKeyframes_server_over_view').html(s);
  293. }
  294. setTimeout(function () {
  295. requestserverstatus();
  296. }, 20000)
  297. }
  298. });
  299. }
  300. */
  301. });
  302. </script>
  303. </body>
  304. <!-- END BODY -->
  305. </html>