405 lines
14 KiB
Plaintext
405 lines
14 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8"%>
|
|
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
|
<html>
|
|
<head>
|
|
<title>
|
|
<spring:message code="traffic_ip_active"></spring:message>
|
|
</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="page-content">
|
|
<div class="theme-panel hidden-xs hidden-sm">
|
|
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/ipActiveList'"><i class="fa fa-refresh"></i></button>
|
|
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><i class="fa fa-history"></i></button>
|
|
</div>
|
|
<h3 class="page-title">
|
|
<spring:message code="traffic_ipactive_hour_trend"></spring:message>
|
|
</h3>
|
|
<div class="row" >
|
|
<form:form id="searchForm" action="${ctx}/traffic/ipActiveList" method="get" class="form-search">
|
|
<input id="beginDateh" type="hidden" value="${beginDate}"/>
|
|
<input id="endDateh" type="hidden" value="${endDate}"/>
|
|
<!-- 搜索内容与操作按钮栏 -->
|
|
<div class="col-md-12">
|
|
<div class="pull-left">
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<span class="selectpicker form-control" ><spring:message code="begin_date"/></span>
|
|
</div>
|
|
<input id="beginDate" name="beginDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
|
|
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
|
|
</div>
|
|
</div>
|
|
<div class="pull-left">
|
|
<div class="input-group">
|
|
<div class="input-group-btn">
|
|
<span class="selectpicker form-control" ><spring:message code="end_date"/></span>
|
|
</div>
|
|
<input id="endDate" name="endDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
|
|
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pull-left">
|
|
<button type="button" class="btn blue" onClick="return searchList()"> <i class="fa fa-search"></i> <spring:message code="search"/> </button>
|
|
<button type="button" class="btn btn-default" id="resetBtn" > <i class="fa fa-refresh"></i> <spring:message code="reset"/> </button>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 搜索内容与操作按钮栏 -->
|
|
</form:form>
|
|
</div>
|
|
<div id="chart" style="width:95%;height:350px;"></div>
|
|
<input id="total" type="hidden"/>
|
|
<div class="col-md-12">
|
|
<div class="portlet">
|
|
<div class="portlet-body">
|
|
|
|
<sys:message content="${message}" type="${messageType }"/>
|
|
<h3 class="page-title">
|
|
<spring:message code="traffic_ipactive_hour_max"></spring:message>
|
|
</h3>
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -16px;">
|
|
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
|
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
|
</ul>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
<div class="" align="center">
|
|
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th><spring:message code="ip_addr"/></th>
|
|
<th><spring:message code="area_id"/></th>
|
|
<th><spring:message code="c2s_byte_num"/></th>
|
|
<th><spring:message code="s2c_byte_num"/></th>
|
|
<th><spring:message code="bytes"/></th>
|
|
<th><spring:message code="link_num"/></th>
|
|
<th><spring:message code="c2s_pkt_num"/></th>
|
|
<th><spring:message code="s2c_pkt_num"/></th>
|
|
<th><spring:message code="packet"/></th>
|
|
<th><spring:message code="stat_time"/></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbodyData">
|
|
|
|
</tbody>
|
|
</table>
|
|
<%-- <div class="page">${page}</div> --%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
|
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
|
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
|
|
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
loading();
|
|
var starth=$("#beginDateh").val();
|
|
var endh=$("#endDateh").val();
|
|
$("#beginDate").val(starth);
|
|
$("#endDate").val(endh);
|
|
ipActiveMinuteList(starth,endh);
|
|
ipActiveOneHourList(starth,endh);
|
|
//筛选功能初始化
|
|
$("#resetBtn").on("click",function(){
|
|
$("select.selectpicker").each(function(){
|
|
$(this).selectpicker('val',$(this).find('option:first').val());
|
|
$(this).find("option").attr("selected",false);
|
|
$(this).find("option:first").attr("selected",true);
|
|
});
|
|
$(".Wdate").attr("value",'');
|
|
$("#searchForm")[0].reset();
|
|
});
|
|
});
|
|
|
|
//导出列表
|
|
$(".export-btn").click(function(){
|
|
var dataType = $(this).attr("data-type");
|
|
var start=$("#beginDate").val();
|
|
var end=$("#endDate").val();
|
|
var htmlTitle="";
|
|
htmlTitle+="<tr class='tr-title'>";
|
|
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='traffic_ipactive_hour_trend'/>"+"</th>";
|
|
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
|
htmlTitle+="</tr>"
|
|
$("#contentTable thead").prepend(htmlTitle);
|
|
var te = $("#contentTable").tableExport({
|
|
headings:true,
|
|
footers:true,
|
|
formats:[dataType],
|
|
fileName:"IP-Active-2",
|
|
bootstrap:false
|
|
});
|
|
$("#myexport").click();
|
|
$("caption").remove();
|
|
$(".tr-title").remove();
|
|
});
|
|
function searchList(){
|
|
var start=$("#beginDate").val();
|
|
var end=$("#endDate").val();
|
|
loading();
|
|
if(start==''||end==''||end==null||start==null){
|
|
window.location.reload();
|
|
}else{
|
|
ipActiveMinuteList(start,end);
|
|
ipActiveOneHourList(start,end);
|
|
}
|
|
}
|
|
|
|
function showIpActiveChart(rs){
|
|
var data=new Array();
|
|
var xData=new Array();
|
|
xData=rs[0].statTime;
|
|
var series=new Array();
|
|
var total=[];
|
|
$(rs).each(function(i, d) {
|
|
total.push(
|
|
sum(d.linkNum)
|
|
)
|
|
series.push({
|
|
name: d.ipAddr,
|
|
data: d.linkNum
|
|
});
|
|
})
|
|
$("#total").val(JSON.stringify(total));
|
|
var chart = Highcharts.chart('chart', {
|
|
chart:{
|
|
//type: 'area',
|
|
zoomType: 'x'
|
|
},
|
|
exporting: {
|
|
filename:'IP-Active',
|
|
scale:1,
|
|
sourceWidth: 1280,
|
|
sourceHeight: 500,
|
|
buttons: {
|
|
contextButton: {
|
|
menuItems: [
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
|
]
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
text: null
|
|
},
|
|
xAxis: {
|
|
//tickInterval:tickInterval,
|
|
type:'category',
|
|
categories: xData,
|
|
title: {
|
|
text: 'time',
|
|
align:'high',
|
|
},
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
marker: {
|
|
radius: 2,
|
|
hover: {
|
|
enabled: true,
|
|
radius: 7,
|
|
radiusPlus: 5
|
|
}
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
pointFormat: '<b><spring:message code="ip"/>:</b>{series.name} <b><spring:message code="count"/>:</b>{point.y}<br/>'
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'bytes'
|
|
}
|
|
},
|
|
credits:{//是否有highcharts水印
|
|
enabled:false
|
|
},
|
|
legend: {
|
|
layout: 'vertical',
|
|
align: 'right',
|
|
verticalAlign: 'middle'
|
|
},
|
|
series: series,
|
|
});
|
|
}
|
|
//活跃IP一小时间隔五分钟统计
|
|
function ipActiveMinuteList(beginDate,endDate){
|
|
loading();
|
|
$.ajax({
|
|
url: '${ctx}/dashboard/ipActiveMinuteList',
|
|
type : "get",
|
|
dataType:"json",
|
|
data:{"beginDate":beginDate,"endDate":endDate},
|
|
cache:false,
|
|
async:false,
|
|
timeout:40000,
|
|
success:function (rs) {
|
|
$("#tbodyData").html("");
|
|
if(rs!=null&&rs.length>0){
|
|
showIpActiveChart(rs);
|
|
}
|
|
closeTip();
|
|
},
|
|
error: function(data, textStatus, errorThrown){
|
|
closeTip();
|
|
},
|
|
complete:function(XMLHttpRequest,status){//超时设置
|
|
closeTip();
|
|
}
|
|
});
|
|
}
|
|
//活跃IP一小时统计
|
|
function ipActiveOneHourList(beginDate,endDate){
|
|
loading();
|
|
$.ajax({
|
|
url: '${ctx}/dashboard/ajaxIpActiveList',
|
|
type : "get" ,
|
|
dataType:"json",
|
|
data:{"beginDate":beginDate,"endDate":endDate},
|
|
cache:false,
|
|
async:false,
|
|
timeout:40000,
|
|
success:function (data) {
|
|
$("#tbodyData").html("");
|
|
if(data!=null&&data.length>0){
|
|
var totalc2sByte= 0;
|
|
var totals2cByte= 0;
|
|
var totalByte= 0;
|
|
var totalLink= 0;
|
|
var totalc2sPkt= 0;
|
|
var totals2cPkt= 0;
|
|
var totalpacket= 0;
|
|
$(data).each(function(i, rs) {
|
|
var byteNum=rs.s2cByteLen+rs.c2sByteLen;
|
|
var packetNum=rs.s2cPktNum+rs.c2sPktNum;
|
|
totalc2sByte=totalc2sByte+(rs.c2sByteLen);
|
|
totals2cByte=totals2cByte+(rs.s2cByteLen);
|
|
totalByte=totalByte+(byteNum);
|
|
totalLink=totalLink+(rs.linkNum);
|
|
totalc2sPkt=totalc2sPkt+(rs.c2sPktNum);
|
|
totals2cPkt=totals2cPkt+(rs.s2cPktNum);
|
|
totalpacket=totalpacket+(packetNum);
|
|
|
|
var html = "<tr>";
|
|
html+= "<td class='tc'>"+rs.ipAddr+"</td>";
|
|
html+= "<td class='tc'>"+(rs.areaId==1? "Astana":"Alamty")+"</td>";
|
|
html+= "<td class='tc'>"+rs.c2sByteLen+"</td>";
|
|
html+= "<td class='tc'>"+rs.s2cByteLen+"</td>";
|
|
html+= "<td class='tc'>"+byteNum+"</td>";
|
|
html+= "<td class='tc'>"+rs.linkNum+"</td>";
|
|
html+= "<td class='tc'>"+rs.c2sPktNum+"</td>";
|
|
html+= "<td class='tc'>"+rs.s2cPktNum+"</td>";
|
|
html+= "<td class='tc'>"+packetNum+"</td>";
|
|
html+= "<td class='tc'>"+rs.statTime+"</td>";
|
|
html+="</tr>"
|
|
|
|
if(i==data.length-1){
|
|
html+="<tr class='tr-total hidden'>"
|
|
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
|
html+= "<td class='tc'>"+"--"+"</td>";
|
|
html+= "<td class='tc'>"+totalc2sByte+"</td>";
|
|
html+= "<td class='tc'>"+totals2cByte+"</td>";
|
|
html+= "<td class='tc'>"+totalByte+"</td>";
|
|
html+= "<td class='tc'>"+totalLink+"</td>";
|
|
html+= "<td class='tc'>"+totalc2sPkt+"</td>";
|
|
html+= "<td class='tc'>"+totals2cPkt+"</td>";
|
|
html+= "<td class='tc'>"+totalpacket+"</td>";
|
|
html+= "<td class='tc'>"+"--"+"</td>";
|
|
html+="</tr>"
|
|
}
|
|
$("#tbodyData").append(html);
|
|
|
|
})
|
|
|
|
}
|
|
closeTip();
|
|
},
|
|
error: function(data, textStatus, errorThrown){
|
|
closeTip();
|
|
},
|
|
complete:function(XMLHttpRequest,status){//超时设置
|
|
closeTip();
|
|
}
|
|
});
|
|
|
|
}
|
|
(function(H) {
|
|
H.Chart.prototype.downloadXLS = function() {
|
|
var div = document.createElement('div'),
|
|
xlsxRows = [],
|
|
xlsxColumns = [];
|
|
|
|
div.style.display = 'none';
|
|
document.body.appendChild(div);
|
|
rows = this.getDataRows(true);
|
|
xlsxRows = H.map(rows.slice(1), function(row) {
|
|
return H.map(row, function(column) {
|
|
return {
|
|
type: typeof column === 'number' ? 'number' : 'string',
|
|
value: column
|
|
};
|
|
});
|
|
});
|
|
var start=$("#beginDate").val();
|
|
var end=$("#endDate").val();
|
|
var b =new Array();
|
|
b.push({
|
|
type:'string',
|
|
value:'IP-Active'
|
|
})
|
|
b.push({
|
|
type:"string",
|
|
value:start+"--"+end
|
|
})
|
|
xlsxRows.unshift(b);
|
|
|
|
var a =new Array();
|
|
a.push({
|
|
type:'string',
|
|
value:'Total'
|
|
})
|
|
var total=total=JSON.parse($("#total").val());
|
|
$(total).each(function(i, d) {
|
|
a.push({
|
|
type:"number",
|
|
value:d
|
|
})
|
|
})
|
|
xlsxRows.push(a)
|
|
zipcelx({
|
|
filename: 'IP-Active',
|
|
sheet: {
|
|
data: xlsxRows
|
|
}
|
|
});
|
|
};
|
|
}(Highcharts));
|
|
function sum(arr) {
|
|
return arr.reduce(function(prev, curr, idx, arr){
|
|
return prev + curr;
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |