JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>外网监控展示</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="easyui/easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/easyui/themes/icon.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/js/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="report_js/gainet.js"></script> <script type="text/javascript" src="config_js/logUtil.js"></script> <script type="text/javascript" src="js/hcharts/highcharts.js"></script> <script type="text/javascript" src="js/hcharts/exporting.js"></script> <script type="text/javascript" src="js/hcharts/highcharts-zh_CN.js"></script> <script type="text/javascript" src="js/echarts/echarts.min.js"></script> <script type="text/javascript" src="js/echarts/echarts.js"></script> <script type="text/javascript" src="config_js/exportFile.js"></script> <%-- <script type="text/javascript" src="js/monitorSplitWindows.js"></script> 中间可以拖拽移动调整上下高度 --%> <script type="text/javascript" src="report_js/infoGatewayShow.js"></script> <style type="text/css"> /* 中间tab */ html { font-size: 14px } body { margin: 0; padding: 0; font-family: "Hiragino Sans GB","Microsoft Yahei",SimSun,Arial,"Helvetica Neue",Helvetica; color: #333; word-wrap: break-word; -webkit-font-smoothing: antialiased; background: #FFF; } ul { margin: 0; padding: 0 } li { list-style: none } .aui-nav-list-box { height: 40px; overflow: hidden; zoom: 1; border-bottom: none; z-index: 110; background: #F0F0F0; width: 100%; display: block; border-top: solid 1px #d1d1d1; border-left: solid 1px #d1d1d1; } .aui-nav-list-box ul li a { color: #000; } .aui-nav-list-box ul li { float: left; color: #000; height: 45px; cursor: pointer; line-height: 40px; width: 80px; text-align: center; font-size: 14px; } .aui-nav-list-box ul .aui-current { background: white; font-weight: bold; } .aui-nav-list-item { display: none; background: #FFF; height: 78%; } /* 左边tab */ * { margin: 0; padding: 0; } ul { list-style: none; } .tab { width: 100%; background: #F0F0F0; } .tab .box { width: 100%; position: relative; margin: 0 auto; height: auto; } .tab .box .menus { width: 80px; height: auto; background: white; float: left; overflow: hidden; border-right: solid 1px #d1d1d1; border-bottom: solid 1px #d1d1d1; } .tab .box .menus li { cursor: pointer; width: 80px; height: 35px; background: #F0F0F0; font-size: 14px; text-align: center; line-height: 35px; transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .tab .box .menus li:nth-child(7) { border-bottom: none; } .tab .box .bg { background:white !important; } .tab .right { float: left; width: 93%; height: 700px; overflow: hidden; background: white; } .tab .tab_right { width: 100%; height: 700px; text-align: center; position:relative; } .tab .scroll { transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; } .leftSpan{ float:left; width:24%; margin-left: 32px; font-size: 16px; margin-bottom: 2px; } .rightSpan{ float:left; width:54%; font-size: 16px; margin-bottom: 2px; } .hj-wrap{ width:100%; clear:both; overflow: hidden; } .hj-transverse-split-div{ float: left; height: 100%; padding:0px; background: #0099EE; overflow: hidden; border:0px solid #0099ff; } .hj-wrap .hj-transverse-split-label{ float:left; width: 10px; height: 100%; display:block; cursor: e-resize; background-color:#fff; } table tr td{ border:1px solid #fff; } .hj-vertical-split-div{ /* height:700px; */ border:0px solid red; width:100%; margin:0 auto; } .hj-vertical-split-label{ width: 100%; height: 3px; display:block; cursor: n-resize; background-color:white; } .servertable select{width:240px} .servertable tr td:first-child{text-align:right;} .servertable {height: 215px;} .fast_search{margin-bottom: 6px;height:auto;width:100%} .fast_textbox{width: 300px;float:left;} .fast_button{width: 500px;float:left;} .advanced_search{margin-bottom:6px;height:auto;width:100%;float:right;margin-top:6px;display:none;} .advanced_parent{float:left;margin-bottom: 6px;} .explain{width:40px;text-align:right;float:left;margin-top: 3px;} .explain60{width:70px;text-align:right;float:left;margin-top: 3px;} .content{width: 150px;float:left;} .content select {width:140px} .floatsort{float:left;width: 130px;} .batchServer{width: 100%;float: left;margin-top: 10px;} .textbox{width: 140px;} .servertable1 select{width:240px;padding-top:20px;} .servertable1 tr td:first-child{text-align:right;padding-top:10px;} </style> </head> <body style="overflow:hidden;"> <div> <div style="width:100%; height:auto; background:white; border-bottom:solid 2px #D2E0F2;overflow: auto;"> <div style="width:auto;height:auto;"> <div style="float:left;padding-top:5px;margin-left:5px;margin-bottom:5px"> <select id="netType" class="easyui-combobox" name="netType" style="width:92px" editable="false" data-options="panelHeight:'auto'"> <option value="1">网关</option> <option value="2">宿主</option> </select> <input id="checkboxTask" style="margin-left:5px;width:16px;height:16px;vertical-align:middle;" type="checkbox" onclick="checkboxTask()"/><span style="font-size:16px">自动刷新</span> <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-right:4px;margin-left:4px;" id="addButton" iconCls="icon-add" >添加</a> </div> <div style="float:right;padding-top: 5px;margin-right: 5px;margin-bottom: 5px"> <a href="javascript:void(0)" class="easyui-linkbutton" style="margin-right:4px;" id="" onclick="batchChange()" iconCls="icon-edit" >批量修改</a> <input id="searchIp" class="easyui-textbox" type="text" data-options="prompt:'请输入IP或网关描述'"/> <a href="javascript:void(0)" class="easyui-linkbutton" id="searchButton" iconCls="icon-search" >搜索</a> </div> </div> </div> <div class='hj-wrap'> <div id="table" class="hj-vertical-split-div" style="position:relative;"> <table id="roleList"> <thead> <tr> <th data-options="field:'ck',checkbox:true"></th> <th data-options="field:'ip',width:60,align:'center',sortable:'true'">ip</th> <th data-options="field:'ipDescribe',width:60,align:'center',sortable:'true'">网关描述</th> <th data-options="field:'isMonitor',width:30,align:'center',sortable:'true',formatter:isMonitor">监控状态</th> <th data-options="field:'isEmail',width:30,align:'center',sortable:'true',formatter:isEmail">邮件状态</th> <th data-options="field:'alarmValue',width:30,align:'center',sortable:'true',formatter:lossRate">报警值</th> <th data-options="field:'alarmStatus',width:30,align:'center',sortable:'true',formatter:alarmStatus">报警状态</th> <th data-options="field:'lossRate',width:30,align:'center',sortable:'true',formatter:lossRate">丢包率</th> <th data-options="field:'sendNum',width:30,align:'center',sortable:'true'">请求次数</th> <th data-options="field:'receiveNum',width:30,align:'center',sortable:'true'">连通次数</th> <th data-options="field:'avgRrt',width:30,align:'center',sortable:'true'">平均延时</th> <th data-options="field:'minRrt',width:30,align:'center',sortable:'true'">最小延时</th> <th data-options="field:'maxRrt',width:30,align:'center',sortable:'true'">最大延时</th> <th data-options="field:'remark',width:50,align:'center',sortable:'true'">备注</th> <th data-options="field:'sTime',width:80,align:'center',sortable:'true',formatter:sTime">检测时间</th> <th data-options="field:'operate',width:60,align:'center',formatter:formatOper">操作</th> </tr> </thead> </table> </div> <label class="hj-vertical-split-label"> </label> <div id="details" class="hj-vertical-split-div aui-nav-content-box" style="position:absolute"> <div class="aui-nav-content-box"> <div class="aui-nav-list-box"> <ul> <li class="aui-current" id="overView">总览</li> </ul> <div style="float: right;margin-right:4px;margin-top:5px;" id="sj"> <a href="javascript:void(0)" class="easyui-linkbutton" id="fz30">30分钟</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="xs1">1小时</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="xs2">2小时</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="xs3">3小时</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="sjz">自定义</a> <div class="sjz" style="margin-left:5px; float:right; display:none;"> 开始时间：<input class="easyui-datetimebox" style="width: 170px;" id="stimeBox"/> 结束时间：<input class="easyui-datetimebox" style="width: 170px;" id="etimeBox"/> <a href="javascript:void(0)" class="easyui-linkbutton" id="qr">确认</a> <a href="javascript:void(0)" class="easyui-linkbutton" id="qx">取消</a> </div> </div> </div> <div class="aui-nav-list-tab"> <div class="aui-nav-list-item" style="display: block"> <div style="float:left;width:28%;height:auto;"> <div> <span style="margin-left:4%;line-height:44px;margin-top:4px;font-size:18px;">概括</span> </div> <div style="margin-left:6%;"> <ul id="detailsUl"> </ul> </div> </div> <div style="float:left;width:2px;height:570px;background:#D2E0F2;"></div> <div style="float:left;width:33%;height:auto;" id="pie"> <div> <span style="margin-left:4%;line-height:44px;margin-top:4px;font-size:18px;">网关丢包率</span> </div> <div style="width:99%;height:auto;margin:5px;"> <div id="lossRateLine" style="width:100%;height:190px;"></div> </div> <span id="lossRateData" style="margin-left: 60px;"></span> </div> <div style="float:left;width:2px;height:570px;background:#D2E0F2;"></div> <div style="float:left;width:38%;height:auto;"> <div> <span style="margin-left:4%;line-height:44px;margin-top:4px;font-size:18px;">网关平均延迟</span> </div> <div style="width:99%;height:auto;margin:5px;"> <div id="delayLine" style="width:100%;height:190px;"></div> </div> <span id="delayLineData" style="margin-left: 60px;"></span> </div> </div> </div> </div> </div> </div> <!-- 添加 --> <div id="titledialogs" class="easyui-dialog" style="width:550px;height:330px;padding:5px;"> <form id="addForm" method="post" style="text-align:-webkit-center;"> <table class="servertable"> <tr> <td>IP：</td> <td><input id="addIp" class="easyui-textbox" name="infoGatewayIp.ip" type="text" style="width:240px" data-options="required:true"></input></td> </tr> <tr> <td>网关描述：</td> <td><input id="describe" class="easyui-textbox" name="infoGatewayIp.describe" type="text" style="width:240px" data-options="required:true"></input></td> </tr> <tr> <td>报警值：</td> <td><input id="alarmValue" class="easyui-textbox" name="infoGatewayIp.alarmValue" type="text" style="width:240px" data-options="required:true,prompt:'请输入0~100的数字'"></input>(0~100)</td> </tr> <tr> <td>监控状态：</td> <td><input id="jk1" type="radio" name="infoGatewayIp.isMonitor" value="1">监控 <input id="jk2" type="radio" name="infoGatewayIp.isMonitor" value="0">不监控</td> </tr> <tr> <td>发送邮件：</td> <td><input id="bj1" type="radio" name="infoGatewayIp.isEmail" value="1">发送 <input id="bj2" type="radio" name="infoGatewayIp.isEmail" value="0">不发送</td> </tr> <tr> <td>备注：</td> <td><input id="remark" class="easyui-textbox" name="infoGatewayIp.remark" type="text" style="width:240px" data-options="required:true"></input></td> </tr> <input type=hidden name="id"/> </table> </form> </div> <!-- 批量修改 --> <div id="batchdialogs" class="easyui-dialog" style="width:550px;height:240px"> <form id="editForm" method="post" style="text-align:-webkit-center;"> <table > <tr> <td style="padding-bottom: 5px;padding-top: 10px;"><input id="monitor" type="checkbox" onclick="checkboxClick('monitor');">监控状态：</td> <td style="padding-bottom: 5px;padding-top: 10px;"><input id="monitor1" type="radio" name="infoGatewayIp.isMonitor" value="1">监控 <input id="monitor2" type="radio" name="infoGatewayIp.isMonitor" value="0">不监控</td> </tr> <tr> <td style="padding-bottom: 5px;"><input id="email" type="checkbox" onclick="checkboxClick('email');">发送邮件：</td> <td style="padding-bottom: 5px;"><input id="email1" type="radio" name="infoGatewayIp.isEmail" value="1">发送 <input id="email2" type="radio" name="infoGatewayIp.isEmail" value="0">不发送</td> </tr> <tr> <td style="padding-bottom: 10px;"><input id="bjz" type="checkbox" onclick="textboxClick('bjz');">报警值：</td> <td style="padding-bottom: 10px;"><input id="bjztext" class="easyui-textbox" name="infoGatewayIp.alarmValue" type="text" style="width:180px" data-options="required:true,prompt:'请输入0~100的数字'"></input>(0~100)</td> </tr> <tr> <td style="padding-bottom: 5px;"><input id="bz" type="checkbox" onclick="textboxClick('bz');">备注：</td> <td style="padding-bottom: 5px;"><input id="bztext" class="easyui-textbox" name="infoGatewayIp.remark" type="text" style="width:240px" data-options="required:true"></input></td> </tr> <input type=hidden name="id" id="ids"/> </table> </form> </div> </div> </body> </html>
JS
$(function() { //加载数据 loaddata("",1); // 关闭弹窗 $('#titledialogs').dialog('close'); $('#batchdialogs').dialog('close'); // 添加按钮 $("#addButton").click(function() { addInfo(); }); //下拉框点击事件 $("#netType").combobox({ onChange: function (newValue, oldValue) { if(newValue == 1){ window.location.href='report/infoGatewayShow.action'; }else if(newValue == 2){ window.location.href='report/infoHostShow.action'; } } }); $("#netType").combobox('setValue', 1); //下拉框显示横向滚轮 $(".combo").mouseenter(function(){ // $(this).prev().combobox("showPanel");//不用点击下拉框，鼠标放上去就弹出下拉框 $(".combobox-item").css({"white-space":"nowrap"});//下拉框文字超出宽度有横向滚轮 }); // 搜索 $("#searchButton").click(function() { var ip = $("#searchIp").val().trim(); if (ip.length == 0) { ip = ''; } loaddata(ip,1); }); //回车搜索 var ip = $('#searchIp'); ip.textbox('textbox').bind('keydown', function(e){ if (e.keyCode == 13){ ip.textbox('setValue', $(this).val()); //手动赋值 $('#searchButton').trigger('click'); } }); //时间点击事件 $('#fz30').bind('click', function(){ var stime = getNowFormatDate30(); var etime = getNowFormatDate(); //获取选中行数据 var row = $('#roleList').datagrid('getSelected'); overViewShow(row.ip,stime,etime); }) $('#xs1').bind('click', function(){ var stime = getNowFormatDateXS(1); var etime = getNowFormatDate(); //获取选中行数据 var row = $('#roleList').datagrid('getSelected'); overViewShow(row.ip,stime,etime); }) $('#xs2').bind('click', function(){ var stime = getNowFormatDateXS(2); var etime = getNowFormatDate(); //获取选中行数据 var row = $('#roleList').datagrid('getSelected'); overViewShow(row.ip,stime,etime); }) $('#xs3').bind('click', function(){ var stime = getNowFormatDateXS(3); var etime = getNowFormatDate(); //获取选中行数据 var row = $('#roleList').datagrid('getSelected'); overViewShow(row.ip,stime,etime); }) $('#qr').bind('click', function(){ var stime = $("#stimeBox").datetimebox("getValue"); var etime = $("#etimeBox").datetimebox("getValue"); if(isEmpty(stime) || isEmpty(etime)){ $.messager.alert('系统提示', '请设置开始时间和结束时间', 'info'); } //获取选中行数据 var row = $('#roleList').datagrid('getSelected'); overViewShow(row.ip,stime,etime); }) //时间自定义显示 $('#sjz').bind('click', function(){ $('#sjz').css("display", "none"); $('.sjz').css("display", ""); }) $('#qx').bind('click', function(){ $('#sjz').css("display", ""); $('.sjz').css("display", "none"); $('#stimeBox').textbox('setValue',''); $('#etimeBox').textbox('setValue',''); }) }); //是否自动刷新，刷新时间为5分钟 var taskSwitch = 0; var timer = null; function checkboxTask() { if (taskSwitch === 0) { taskSwitch = 1; var row = $('#roleList').datagrid('getSelected'); //获取日期 var stime = getNowFormatDate1(); var etime = getNowFormatDate(); timer = setInterval(function(){ showTask(row.ip,"2019-03-01 14:25:00",etime) }, 1000 * 10); } else { taskSwitch = 0; clearInterval(timer); } } //定时刷新页面数据 function showTask(ip,stime,etime) { if(!isEmpty(taskIp)){ ip = taskIp; } //表格数据 loaddata("",1); //去除遮罩 $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); //两个图 lossRateLineTask(ip,stime,etime); delayLineTask(ip,stime,etime); } //时间戳转化成时间格式 function add0(m){ return m<10?'0'+m:m } //时间戳转换为年月日，timestamp是整数，否则要parseInt转换,不会出现少个0的情况 function timeFormat(timestamp){ var time = new Date(timestamp); var year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); return year+'-'+add0(month)+'-'+add0(date)+' '+add0(hours)+':'+add0(minutes)+':'+add0(seconds); } // 表格加载数据 var getRowFlag = true; // 是否选中第一行，第一次加载页面选中 var IsCheckFlag = true; //标示是否是勾选复选框选中行的，true - 是 , false - 否 var taskIp; function loaddata(ip,netTypeId) { $("#roleList").datagrid({ height : $(window).height()*0.45, iconCls : 'icon-ok', width : "100%", pageSize : 10,// 默认选择的分页是每页5行数据 pageList : [ 5, 10, 15, 20 ],// 可以选择的分页集合 nowrap : true,// 设置为true，当数据长度超出列宽时将会自动截取 striped : true,// 设置为true将交替显示行背景。 collapsible : true,// 显示可折叠按钮 toolbar : "#tb",// 在添加 增添、删除、修改操作的按钮要用到这个 method: 'POST', async: true, url : 'report/getShowGatewayList.action',// url调用Action方法 loadMsg : '数据装载中......', singleSelect : false,// 为true时只能选择单行 fitColumns : true,// 允许表格自动缩放，以适应父容器 sortName : 'lossRate',// 当数据表格初始化时以哪一列来排序 sortOrder : 'desc',// 定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。 remoteSort : false, pagination : true,// 分页 rownumbers : true,// 行数 queryParams : {"infoGatewayIp.ip" : ip,"netTypeId" : netTypeId}, onLoadSuccess : function(data) { //操作按钮样式 $(".editCabinet").linkbutton({ text: '修改', plain: true, iconCls: 'icon-edit' }); $(".delCabinet").linkbutton({ text: '删除', plain: true, iconCls: 'icon-remove' }); $('#roleList').datagrid('fixRowHeight'); //单元格超出部分隐藏并鼠标移动到单元格时弹框显示 $(".datagrid-row td div").each(function() { $(this).attr("title", $(this).text()); }); //获取表格数据 if(getRowFlag){ $('#roleList').datagrid('selectRow', 0); var row = $('#roleList').datagrid('getSelected'); //获取日期 var stime = getNowFormatDate1(); var etime = getNowFormatDate(); //总览 details(row); //两个图 overViewShow(row.ip,stime,etime); //第一次刷新页面后，不自动获取 getRowFlag = false; //给定时IP赋值 taskIp = row.ip; } //获取数据列表中的所有数据 var rows = $("#roleList").datagrid("getRows"); //循环数据找出列表中ID和需要选中数据的ID相等的数据并选中 for(var i=0;i<rows.length;i++){ var rowip = rows[i].ip; if(taskIp == rowip){ var index = $("#roleList").datagrid("getRowIndex",rows[i]) $("#roleList").datagrid("selectRow",index); } } }, //表格样式 rowStyler:function(index,row){ //表格颜色，丢包率大于报警值的时候，显示为黄色，丢包率100%的时候，显示为红色。 if (row.lossRate == 100){ return 'background-color:#FF6347;'; }else if(row.lossRate >= row.alarmValue){ return 'background-color:#FFF68F;'; } }, //鼠标双击事件 onDblClickRow:function(index,row){ //获取点击的表格数据 $('#roleList').datagrid('clearSelections'); //取消选择行 $('#roleList').datagrid('selectRow',index);//选中 //获取日期 var stime = $("#stimeBox").datetimebox("getValue"); var etime = $("#etimeBox").datetimebox("getValue"); if(isEmpty(stime) && isEmpty(etime)){ stime = getNowFormatDate1(); etime = getNowFormatDate(); } //总览 details(row); //两个图 overViewShow(row.ip,stime,etime); //给定时IP赋值 taskIp = row.ip; }, //单击不选中 onClickCell: function (rowIndex, field, value) { IsCheckFlag = false; }, onSelect: function (rowIndex, rowData) { if (!IsCheckFlag) { IsCheckFlag = true; $("#roleList").datagrid("unselectRow", rowIndex); } }, onUnselect: function (rowIndex, rowData) { if (!IsCheckFlag) { IsCheckFlag = true; $("#roleList").datagrid("selectRow", rowIndex); } } }); } function isMonitor(val, row, index) { if (val == 1) { return '<span style = "color:green;">监控</span>'; } else if (val == 0) { return '<span style = "color:red;">不监控</span>'; } } function isEmail(val, row, index) { if (val == 1) { return '<span style = "color:green;">发送</span>'; } else if (val == 0) { return '<span style = "color:red;">不发送</span>'; } } function lossRate(val, row, index) { if(!isEmpty(val)){ return val + '%'; }else{ return "0%"; } } function alarmStatus(val, row, index) { if (val == 1) { return '<span style = "color:red;"">报警</span>'; } else if (val == 0) { return '<span style = "color:green;"">正常</span>'; } } function sTime(val, row, index) { if(!isEmpty(val)){ return timeFormat(val); }else{ return "未检测"; } } function formatOper(val, row, index) { var $row = JSON.stringify(row).replace(/\"/g,"'");//row的是一个对象 return '<a href="javascript:void(0)" class="editCabinet" onclick="editInfo('+$row+')"></a><a href="javascript:void(0)" class="delCabinet" onclick="deleteInfo('+$row+')"></a>'; }; //判断字符是否为空的方法 function isEmpty(obj){ if(typeof obj == "undefined" || obj == null || obj == ""){ return true; }else{ return false; } } //定时加载网关丢包率 function lossRateLineTask(ip,stime,etime) { $.ajax({ url: "report/getLineData.action", type: "POST", data: {'ip':ip,'stime':stime,'etime':etime,'monitorType':'gateway','lineType':'loss_rate'}, timeout: 180000, async: true, success: function (data) { data = eval(data); var lossRate = new Array(); var time = new Array(); for (var i = 0; i < data.length; i++) { lossRate.push(data[i].value); time.push(timeFormat(data[i].name)); } myChart.setOption({ xAxis: { data: time }, series: [{ data: lossRate }] }); } }); } //定时加载网关平均延迟 function delayLineTask(ip,stime,etime) { $.ajax({ url: "report/getLineData.action", type: "POST", data: {'ip':ip,'stime':stime,'etime':etime,'monitorType':'gateway','lineType':'gateway'}, timeout: 180000, async: true, success: function (data) { data = eval(data); var delayData = new Array(); var time = new Array(); for (var i = 0; i < data.length; i++) { delayData.push(data[i].value); time.push(timeFormat(data[i].name)); } myChart1.setOption({ xAxis: { data: time }, series: [{ data: delayData }] }); } }); } //双击事件 //总览 function details(row) { //总揽概括 //获取选中行数据 $("#detailsUl").html(""); var lossRate,sendNum,receiveNum,avgRrt,minRrt,maxRrt,alarmStatus; if(!isEmpty(row.lossRate)){ lossRate = row.lossRate + "%"; }else{ lossRate = "——"; } if(!isEmpty(row.sendNum)){ sendNum = row.sendNum; }else{ sendNum = "——"; } if(!isEmpty(row.receiveNum)){ receiveNum = row.receiveNum; }else{ receiveNum = "——"; } if(!isEmpty(row.minRrt)){ minRrt = row.minRrt; }else{ minRrt = "——"; } if(!isEmpty(row.maxRrt)){ maxRrt = row.maxRrt; }else{ maxRrt = "——"; } if(!isEmpty(row.avgRrt)){ avgRrt = row.avgRrt; }else{ avgRrt = "——"; } if (row.alarmStatus == 1) { alarmStatus = "<span class='rightSpan' style = 'color:red;'>报警</span>"; } else if (row.alarmStatus == 0) { alarmStatus = "<span class='rightSpan' style = 'color:green;'>正常</span>"; }else{ alarmStatus = "<span class='rightSpan''>——</span>"; } var details = "<li><span class='leftSpan'>网关描述</span><span class='rightSpan'>"+row.ipDescribe+"</span></li>"+ "<li><span class='leftSpan'>报警状态</span>"+alarmStatus+"</li>"+ "<li><span class='leftSpan'>丢包率</span><span class='rightSpan'>"+lossRate+"</span></li>"+ "<li><span class='leftSpan'>请求次数</span><span class='rightSpan'>"+sendNum+"</span></li>"+ "<li><span class='leftSpan'>连通次数 </span><span class='rightSpan'>"+receiveNum+"</span></li>"+ "<li><span class='leftSpan'>平均延时</span><span class='rightSpan'>"+avgRrt+"</span></li>"+ "<li><span class='leftSpan'>最小延时 </span><span class='rightSpan'>"+minRrt+"</span></li>"+ "<li><span class='leftSpan'>最大延时 </span><span class='rightSpan'>"+maxRrt+"</span></li>"+ "<li><span class='leftSpan'>备注 </span><span class='rightSpan'>"+row.remark+"</span></li>"; $("#detailsUl").html(details); } //两个图 function overViewShow(ip,stime,etime) { //网关丢包率 $.ajax({ url: "report/getLineData.action", type: "POST", data: {'ip':ip,'stime':stime,'etime':etime,'monitorType':'gateway','lineType':'loss_rate'}, timeout: 180000, async: true, beforeSend: function(){ var lossRate = new Array(); var time = new Array(); lossRateLine('lossRateLine',lossRate,time); }, success: function (data) { data = eval(data); var lossRate = new Array(); var time = new Array(); var sum = 0; for (var i = 0; i < data.length; i++) { lossRate.push(data[i].value); time.push(timeFormat(data[i].name)); sum += data[i].value; } //画图 lossRateLine('lossRateLine',lossRate,time); //最大值平均值当前值 $("#lossRateData").html(""); if(lossRate.length > 0){ var max = Math.max.apply(null,lossRate); var now = data[data.length-1].value; var avg = sum / data.length; $("#lossRateData").html("最大值："+max+"，当前值："+now+"，平均值："+avg.toFixed(2)); } } }); //网关平均延迟 $.ajax({ url: "report/getLineData.action", type: "POST", data: {'ip':ip,'stime':stime,'etime':etime,'monitorType':'gateway','lineType':'gateway'}, timeout: 180000, async: true, beforeSend : function() { var delayData = new Array(); var time = new Array(); delayLine('delayLine',delayData,time); }, success: function (data) { data = eval(data); var delayData = new Array(); var time = new Array(); var sum = 0; for (var i = 0; i < data.length; i++) { delayData.push(data[i].value); time.push(timeFormat(data[i].name)); sum += data[i].value; } //画图 delayLine('delayLine',delayData,time); //最大值最小值当前值 $("#delayLineData").html(""); if(delayData.length > 0){ var max = Math.max.apply(null,delayData); var now = data[data.length-1].value; var avg = sum / data.length; $("#delayLineData").html("最大值："+max+"，当前值："+now+"，平均值："+avg.toFixed(2)); } } }); } //网关丢包率 function lossRateLine(id,lossRate,time) { myChart = echarts.init(document.getElementById(id)); option = { backgroundColor : 'white', tooltip : { trigger : 'axis' }, color : [ 'red'], grid : { left : '3%', right : '5%', top : '13%', bottom : '0%', containLabel : true }, xAxis : { type : 'category', axisTick : { show : false // 删除超出正坐标线段 }, boundaryGap : false, data : time, axisLine : { lineStyle : { color : 'black', } }, }, yAxis : { type : 'value', axisTick : { show : false // 删除超出正坐标线段 }, }, dataZoom: [ //给x轴设置滚动条 { start: 0, //默认为0 end: 100, type: 'slider', show: true, xAxisIndex: [0], handleSize: 0, //滑动条的 左右2个滑动条的大小 height: 8, //组件高度 left : ' 12%', right : '5%', top: '8', handleColor: '#ddd', //h滑动图标的颜色 handleStyle: { borderColor: "#cacaca", borderWidth: "1", shadowBlur: 2, background: "#ddd", shadowColor: "#ddd", }, fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变 //给第一个设置0，第四个设置1，就是垂直渐变 offset: 0, color: '#1eb5e5' }, { offset: 1, color: '#5ccbb1' }]), backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色 showDataShadow: false, //是否显示数据阴影 默认auto showDetail: false, //即拖拽时候是否显示详细数值信息 默认true handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z', filterMode: 'filter' }, //下面这个属性是里面拖到 { type: 'inside', show: true, xAxisIndex: [0], start: 0, //默认为1 end: 50 }, ], series:[ { name : '网关丢包率', type : 'line', smooth: true, //是否平滑曲线显示 // stack : '总量', // areaStyle: {normal: {}}, data : lossRate }] }; myChart.setOption(option); } //网关平均延迟 function delayLine(id,delayData,time) { myChart1 = echarts.init(document.getElementById(id)); option = { backgroundColor : 'white', tooltip : { trigger : 'axis' }, color : [ '#f69846'], grid : { left : '3%', right : '5%', top : '13%', bottom : '0%', containLabel : true }, xAxis : { type : 'category', axisTick : { show : false // 删除超出正坐标线段 }, boundaryGap : false, data : time, axisLine : { lineStyle : { color : 'black', } }, }, yAxis : { // name:'GB', type : 'value', axisTick : { show : false // 删除超出正坐标线段 }, }, dataZoom: [ //给x轴设置滚动条 { start: 0, //默认为0 end: 100, type: 'slider', show: true, xAxisIndex: [0], handleSize: 0, //滑动条的 左右2个滑动条的大小 height: 8, //组件高度 left : ' 12%', right : '5%', top: '8', handleColor: '#ddd', //h滑动图标的颜色 handleStyle: { borderColor: "#cacaca", borderWidth: "1", shadowBlur: 2, background: "#ddd", shadowColor: "#ddd", }, fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变 //给第一个设置0，第四个设置1，就是垂直渐变 offset: 0, color: '#1eb5e5' }, { offset: 1, color: '#5ccbb1' }]), backgroundColor: '#ddd', //两边未选中的滑动条区域的颜色 showDataShadow: false, //是否显示数据阴影 默认auto showDetail: false, //即拖拽时候是否显示详细数值信息 默认true handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z', filterMode: 'filter' }, //下面这个属性是里面拖到 { type: 'inside', show: true, xAxisIndex: [0], start: 0, //默认为1 end: 50 }, ], series:[ { name : '网关平均延迟', type : 'line', smooth: true, //是否平滑曲线显示 // stack : '总量', // areaStyle: {normal: {}}, data : delayData }] }; myChart1.setOption(option); } //清除弹框数据 function clearInfo() { $('#addIp').textbox('setValue',''); $('#describe').textbox('setValue',''); $('#alarmValue').textbox('setValue',''); $('#jk1').prop("checked",true) $('#bj1').prop("checked",true) $('#remark').textbox('setValue',''); } //清除弹框数据 function clearInfo() { $('#addIp').textbox('setValue',''); $('#describe').textbox('setValue',''); $('#alarmValue').textbox('setValue',''); $('#jk1').prop("checked",true) $('#bj1').prop("checked",true) $('#remark').textbox('setValue',''); } //添加 function addInfo(){ clearInfo(); $('#titledialogs').dialog('open').dialog({ title:'添加网关配置', iconCls: 'icon-save', buttons: [ { text: '保存', iconCls:'icon-ok', handler: function(){ $.messager.confirm('系统提示', '您确定要添加吗？', function(r){ if (r) { var alarmValue = $("#alarmValue").val().trim(); if(alarmValue < 0 || alarmValue > 100 || !alarmValue.match(/[0-9]+/) || !/^\d+$/.test(alarmValue)){ $.messager.alert('系统提示', '报警值请输入0~100的整数', 'info'); return; } $("#searchIp").textbox('setValue',$("#addIp").val().trim()); $('#addForm').form('submit', { url: 'report/addInfoGateway.action', onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); } return isValid; }, success: function(data){ $.messager.progress('close'); $.messager.alert('系统提示', data, 'info'); if(data.indexOf('成功') >= 0){ $('#titledialogs').dialog('close'); var ip = $("#searchIp").val().trim(); if (ip.length == 0) { ip = ''; } loaddata(ip,1); } } }); } }); } }, { text: '取消', iconCls:'icon-cancel', handler: function(){ $('#titledialogs').dialog('close'); } } ] }); } //修改 function editInfo(row){ $('#addForm').form('load',{'infoGatewayIp.ip':row.ip,"infoGatewayIp.describe":row.ipDescribe, "infoGatewayIp.alarmValue":row.alarmValue,"infoGatewayIp.isMonitor":row.isMonitor, "infoGatewayIp.isEmail":row.isEmail,"infoGatewayIp.remark":row.remark,"id":row.id}); $('#titledialogs').dialog('open').dialog({ title:'修改网关配置', iconCls: 'icon-save', buttons: [ { text: '保存', iconCls:'icon-ok', handler: function(){ $.messager.confirm('系统提示', '您确定要修改吗？', function(r){ if (r) { var alarmValue = $("#alarmValue").val().trim(); if(alarmValue < 0 || alarmValue > 100 || !alarmValue.match(/[0-9]+/) || !/^\d+$/.test(alarmValue)){ $.messager.alert('系统提示', '报警值请输入0~100的整数', 'info'); return; } $("#searchIp").textbox('setValue',$("#addIp").val().trim()); $('#addForm').form('submit', { url: 'report/updateInfoGateway.action', onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); } return isValid; }, success: function(data){ $.messager.progress('close'); $.messager.alert('系统提示', data, 'info'); if(data.indexOf('成功') >= 0){ $('#titledialogs').dialog('close'); var ip = $("#searchIp").val().trim(); if (ip.length == 0) { ip = ''; } loaddata(ip,1); } } }); } }); } }, { text: '取消', iconCls:'icon-cancel', handler: function(){ $('#titledialogs').dialog('close'); } } ] }); } //删除 function deleteInfo(row){ if (row){ $.messager.confirm('系统提示', "您确定要删除该条信息吗？", function(r){ if (r) { $.ajax({ url:"report/delInfoGateway.action", type:"POST", data:{"id":row.id}, timeout:180000, success:function(data){ $.messager.alert('系统提示', data, 'info'); var ip = $("#searchIp").val().trim(); if (ip.length == 0) { ip = ''; } loaddata(ip,1); } }); } }); } } //清空批量修改状态 function batchdialogsClear() { $("#bjz").attr("checked", false); $("#bjztext").textbox({disabled:true}); $("#bjztext").textbox({required:false}); $('#bjztext').textbox('setValue',''); $("#bz").attr("checked", false); $("#bztext").textbox({disabled:true}); $("#bztext").textbox({required:false}); $('#bztext').textbox('setValue',''); $("#monitor").attr("checked", false); $("#monitor1").attr("checked", false); $("#monitor1").attr("disabled", "disabled"); $("#monitor2").attr("checked", false); $("#monitor2").attr("disabled", "disabled"); $("#email").attr("checked", false); $("#email1").attr("checked", false); $("#email1").attr("disabled", "disabled"); $("#email2").attr("checked", false); $("#email2").attr("disabled", "disabled"); } //批量修改 function batchChange(){ batchdialogsClear(); //获取表格选择行 var rows = $('#roleList').datagrid('getSelections'); //判断是否选择行 if (!rows || rows.length == 0) { $.messager.alert('系统提示', '请选择要修改的行', 'info'); return; } //循环ID,添加到idList中 var ids; $.each(rows, function (i, n) { if (i == 0) { ids = n.id; } else { ids += "," + n.id; } }); $('#batchdialogs').dialog('open').dialog({ title:'批量修改网关配置', iconCls: 'icon-save', buttons: [ { text: '保存', iconCls:'icon-ok', handler: function(){ $.messager.confirm('系统提示', '您确定要修改吗？', function(r){ if (r) { if(!$('#bjz').prop("checked") && !$('#bz').prop("checked") && !$('#monitor').prop("checked") && !$('#email').prop("checked")){ $.messager.alert('系统提示', '请至少选择一项批量修改', 'info'); return } var alarmValue = -1; if($('#bjz').prop("checked")){ alarmValue = $("#bjztext").val().trim(); if(alarmValue < 0 || alarmValue > 100 || !alarmValue.match(/[0-9]+/) || !/^\d+$/.test(alarmValue)){ $.messager.alert('系统提示', '报警值请输入0~100的整数', 'info'); return; } } var remark = ""; if($('#bz').prop("checked")){ remark = $("#bztext").val().trim(); } var isMonitor=-1; if($('#monitor').prop("checked")){ if($('#monitor1').prop("checked")){ isMonitor = 1; } if($('#monitor2').prop("checked")){ isMonitor = 0; } } var isEmail=-1; if($('#email').prop("checked")){ if($('#email1').prop("checked")){ isEmail = 1; } if($('#email2').prop("checked")){ isEmail = 0; } } $.ajax({ url:'report/batchUpdateInfoGateway.action', type:"POST", data:{"id": ids,"infoGatewayIp.alarmValue": alarmValue, "infoGatewayIp.isMonitor": isMonitor,"infoGatewayIp.isEmail": isEmail, "infoGatewayIp.remark": remark}, timeout:180000, success:function(data){ $.messager.progress('close'); $.messager.alert('系统提示', data, 'info'); if(data.indexOf('成功') >= 0){ $('#batchdialogs').dialog('close'); var ip = $("#searchIp").val().trim(); if (ip.length == 0) { ip = ''; } loaddata(ip,1); } } }); } }); } }, { text: '取消', iconCls:'icon-cancel', handler: function(){ $('#batchdialogs').dialog('close'); } } ] }); } function checkboxClick(id) { if ($('#' + id).prop("checked")) { //判断checkbox是否选中 //选中状态 $("#" + id + "1").removeAttr("disabled"); $("#" + id + "2").removeAttr("disabled"); } else { //未选中状态 $("#" + id + "1").attr("checked", false); $("#" + id + "1").attr("disabled", "disabled"); $("#" + id + "2").attr("checked", false); $("#" + id + "2").attr("disabled", "disabled"); } } function textboxClick(id) { if ($('#' + id).prop("checked")) { //判断checkbox是否选中 //选中状态 $("#" + id + "text").textbox({disabled:false}); $("#" + id + "text").textbox({required:true}); } else { //未选中状态 $("#" + id).attr("checked", false); $("#" + id + "text").textbox({disabled:true}); $("#" + id + "text").textbox({required:false}); } } //当前时间 function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate; } //1天前时间 function getNowFormatDate1() { var now = new Date(); //获取当前毫秒-7天的毫秒数 var date = new Date(now.getTime() - 24 * 3600 * 1000); var year = date.getFullYear();//年 var month = date.getMonth() + 1;//月 var day = date.getDate();//日 var hour = date.getHours();//时 var minute = date.getMinutes();//分 var second = date.getSeconds();//秒 return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } //30分钟前 function getNowFormatDate30() { var now = new Date(); //获取当前毫秒-7天的毫秒数 var date = new Date(now.getTime() - 30 * 60 * 1000); var year = date.getFullYear();//年 var month = date.getMonth() + 1;//月 var day = date.getDate();//日 var hour = date.getHours();//时 var minute = date.getMinutes();//分 var second = date.getSeconds();//秒 return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } //多少小时前 function getNowFormatDateXS(num) { var now = new Date(); //获取当前毫秒-7天的毫秒数 var date = new Date(now.getTime() - num * 3600 * 1000); var year = date.getFullYear();//年 var month = date.getMonth() + 1;//月 var day = date.getDate();//日 var hour = date.getHours();//时 var minute = date.getMinutes();//分 var second = date.getSeconds();//秒 return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; }
