Networksituation.jsp 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>查看网络情况</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <meta http-equiv="X-UA-Compatible" content="IE=9"/>
  17. <meta http-equiv="X-UA-Compatible" content="IE=10"/>
  18. <link rel="stylesheet" type="text/css" href="css/easyui/themes/default/easyui.css">
  19. <link rel="stylesheet" type="text/css" href="css/easyui/themes/icon.css">
  20. <link rel="stylesheet" type="text/css" href="css/easyui/demo/demo.css">
  21. <script type="text/javascript" src="css/easyui/jquery.min.js"></script>
  22. <script type="text/javascript" src="css/easyui/jquery.easyui.min.js" charset="utf-8"></script>
  23. <script type="text/javascript" src="css/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
  24. <link rel="stylesheet" type="text/css" href="css/common/hzbstyle.css">
  25. <script type="text/javascript">
  26. var state = false;
  27. function formatDatebox(value) {
  28.     if (value == null || value == '') {
  29.         return '';
  30.     }
  31.     var dt = parseToDate(value);//关键代码,将那个长字符串的日期值转换成正常的JS日期格式
  32.     return dt.format("yyyy-MM-dd"); //这里用到一个javascript的Date类型的拓展方法,这个是自己添加的拓展方法,在后面的步骤3定义
  33. }
  34. /*带时间*/
  35. function formatDateBoxFull(value) {
  36.     if (value == null || value == '') {
  37.         return '';
  38.     }
  39.     var dt = parseToDate(value);
  40.     return dt.format("yyyy-MM-dd hh:mm:ss");
  41. }
  42. </script>
  43. <script type="text/javascript">
  44. var i = 1;//第几页
  45. var sum;//总条数
  46. var totalpage;//总页数
  47. $(document).ready(function(){
  48. fLoadTable();
  49. fLoadData(1,10);
  50. });
  51. function fLoadTable(){
  52. $('#tt').datagrid({
  53. fit: true,//自动大小
  54. title: '',
  55. width: '100%',
  56. height: 580,
  57. toolbar: '#toolbar',
  58. fitColumns: true,
  59. loadMsg:'正在加载, 请稍等 …',
  60. nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取
  61. striped : true,//设置为true将交替显示行背景
  62. collapsible : true,//显示可折叠按钮
  63. fitColumns:true,//允许表格自动缩放,以适应父容器
  64. rownumbers:true,
  65. columns:[[
  66. {field:'stationName',title:'地区',width:'250px',align:'left',formatter: function(value, row, index){
  67. return '<font style="color:black;" class="hzbspan" >'+value+'</font>';
  68. }},
  69. {field:'state',title:'链接状态',width:'180px',height:'26px',align:'left',formatter: function(value, row, index){
  70. if (value == "1") {
  71. state = true;
  72. return '<img src="images/rzx/connect.png"/>';
  73. }
  74. else if(value == "0") {
  75. state = false;
  76. return '<img src="images/rzx/disconnect.png"/>';
  77. }
  78. }},
  79. {field:'connectTime1',title:'链接时间',width:'180px',align:'left',formatter: function(value, row, index){
  80. if(state==true){
  81. return '<font style="color:green;font-weight: bold;" class="hzbspan">'+value+'</font>';}
  82. }},
  83. {field:'disconnectTime1',title:'断开时间',width:'180px',align:'left',formatter: function(value, row, index){
  84. if(state==false){
  85. return '<font style="color:red;font-weight: bold;" class="hzbspan">'+value+'</font>';}
  86. }},
  87. {field:'serverIp',title:'服务器IP',width:'180px',align:'left',formatter: function(value, row, index){
  88. return '<font style="color:blue;" class="hzbspan">'+value+'</font>';
  89. }},
  90. {field:'clientIp',title:'客户端IP',width:'180px',align:'left',formatter: function(value, row, index){
  91. return '<font style="color:blue;" class="hzbspan">'+ value+'</font>';
  92. }}
  93. ]]
  94. });
  95. }
  96. function show(message) {
  97. $.messager.show({
  98. title: '提示信息',
  99. msg: message,
  100. timeout: 2000,
  101. showType: 'slide'
  102. });
  103. }
  104. function fLoadData(page,rows){
  105. $.messager.progress({
  106. title: '请等待',
  107. msg: '正在加载数据...',
  108. text: '查询中.......'
  109. });
  110. $.ajax({
  111. type:"POST",
  112. contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  113. url:"ajax/getCNGStationTranInfoList",
  114. success:function (data){
  115. $.messager.progress('close');
  116. var vData = $.parseJSON(data);
  117. sum = vData.total;
  118. if(sum <=0){
  119. show("没有查询到相关数据!!!");
  120. }
  121. totalpage = Math.ceil(sum/rows);
  122. $('#tt').datagrid('loadData', vData); //将数据绑定到datagrid
  123. $('#pp').pagination({
  124. total:sum,
  125. pageList: [2,10,50,100],
  126. beforePageText: '第',//页数文本框前显示的汉字
  127. afterPageText: '页 共 {pages} 页',
  128. displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
  129. onSelectPage:function(pageNumber, pageSize){
  130. fLoadData();
  131. }
  132. });
  133. }
  134. });
  135. }
  136. </script>
  137. </head>
  138. <body>
  139. <!-- 查询结果:数据表格 -->
  140. <table id="tt" cellspacing="0" cellpadding="0" >
  141. </table>
  142. </body>
  143. </html>