557 lines
18 KiB
Plaintext
557 lines
18 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8"%>
|
|
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
|
<html>
|
|
<head>
|
|
<title>
|
|
<spring:message code="bandwith"></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/traffic/bandwidthList'"><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"></spring:message>
|
|
</h3>
|
|
<h5 class="page-header"></h5>
|
|
<div class="row" >
|
|
<form:form id="searchForm" action="${ctx}/dashboard/traffic/bandwidthList" method="get" class="form-search">
|
|
<input id="beginDateh" type="hidden" value="${beginDate}"/>
|
|
<input id="endDateh" type="hidden" value="${endDate}"/>
|
|
<input id="total" type="hidden"/>
|
|
<input id="total2" type="hidden"/>
|
|
<!-- 搜索内容与操作按钮栏 -->
|
|
<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({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/> -->
|
|
<input id="beginDate" name="beginDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
|
|
value="" onclick="WdatePicker({el:'beginDate',onpicked:setTime(1),dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endDate\')||currentTime()}' })" />
|
|
</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:'#F{$dp.$D(\'beginDate\',{H:24})}'});"/> -->
|
|
<input id="endDate" name="endDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
|
|
value="" onclick="WdatePicker({el:'endDate',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:getMaxDate(1) })"/>
|
|
</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>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<select id="unitType" class="selectpicker select2 input-small">
|
|
<option value="Gbps">Gbps</option>
|
|
<option value="pps">pps</option>
|
|
<option value="linkNumber"><spring:message code="link_num"/>/S</option>
|
|
</select>
|
|
<br>
|
|
<div id="trend" style="height: 500px; position: relative;" >
|
|
<div style="position: relative;">
|
|
<div id="chart1" style="width:97%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div id="trend" style="height: 500px; position: relative;" >
|
|
<div style="position: relative;">
|
|
<div id="chart2" style="width:97%;height:500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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/js/exporting-data.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
|
|
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
loading();
|
|
var starth=$("#beginDateh").val();
|
|
var endh=$("#endDateh").val();
|
|
$("#beginDate").val(starth);
|
|
$("#endDate").val(endh);
|
|
var unitType=$("#unitType").val();
|
|
changeBandwidth(unitType,starth,endh);
|
|
$("#unitType").on("change",function(){
|
|
loading();
|
|
changeBandwidth($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
|
|
});
|
|
|
|
// setInterval(function(){
|
|
// changeBandwidth($("#unitType").val(),$("#beginDate").val(),new Date().Format("yyyy-MM-dd HH:mm:00"));
|
|
// },500000);// 五分钟调用一次
|
|
|
|
//筛选功能初始化
|
|
$("#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();
|
|
});
|
|
});
|
|
|
|
function searchList(){
|
|
loading();
|
|
var start=$("#beginDate").val();
|
|
var end=$("#endDate").val();
|
|
$("#beginDateh").val(start);
|
|
$("#endDateh").val(end);
|
|
if(start==''||end==''||end==null||start==null){
|
|
window.location.reload();
|
|
}else{
|
|
changeBandwidth($("#unitType").val(),start,end);
|
|
}
|
|
}
|
|
|
|
// 根据单位切换数据
|
|
function changeBandwidth(unitType,beginDate,endDate){
|
|
$.ajax({
|
|
url:"${ctx}/dashboard/traffic/bandwidthTransThree",
|
|
type:"get",
|
|
data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType},
|
|
dataType:"json",
|
|
async:true,
|
|
timeout:40000,
|
|
success:function (data){
|
|
var xdata=null;
|
|
var ipv4data=null;
|
|
var ipv6data=null;
|
|
var tcpdata=null;
|
|
var udpdata=null;
|
|
var ipv4data2=null;
|
|
var ipv6data2=null;
|
|
var tcpdata2=null;
|
|
var udpdata2=null;
|
|
var total=[];
|
|
var total2=[];
|
|
if(data!=null&&Object.keys(data).length>0){
|
|
ipv4data=data.ipv4Type1.result;
|
|
ipv6data=data.ipv6Type1.result;
|
|
tcpdata=data.trans6Type1.result;
|
|
udpdata=data.trans17Type1.result;
|
|
total.push(data.ipv4Type1.sum,data.ipv6Type1.sum,data.trans6Type1.sum,data.trans17Type1.sum);
|
|
}
|
|
var series=new Array();
|
|
series.push({
|
|
// type:'area',
|
|
name: "IPv4",
|
|
data: ipv4data,
|
|
lineColor:'#a9d4cf',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},{
|
|
// type:'area',
|
|
name: "IPv6",
|
|
data: ipv6data,
|
|
lineColor:'#eecf8d',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},{
|
|
// type:'area',
|
|
name: "TCP",
|
|
data: tcpdata,
|
|
lineColor:'#f1aa76',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},{
|
|
// type:'area',
|
|
name: "UDP",
|
|
data: udpdata,
|
|
lineColor:'#88b876',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
});
|
|
$("#total").val(JSON.stringify(total));
|
|
showBandwidthChart("chart1",unitType,xdata,series,"Astana");
|
|
|
|
if(data!=null&&Object.keys(data).length>0){
|
|
ipv4data2=data.ipv4Type2.result;
|
|
ipv6data2=data.ipv6Type2.result;
|
|
tcpdata2=data.trans6Type2.result;
|
|
udpdata2=data.trans17Type2.result;
|
|
total2.push(data.ipv4Type2.sum,data.ipv6Type2.sum,data.trans6Type2.sum,data.trans17Type2.sum);
|
|
}
|
|
|
|
var series=new Array();
|
|
series.push({
|
|
// type:'area',
|
|
name: "IPv4",
|
|
data: ipv4data2,
|
|
lineColor:'#a9d4cf',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},{
|
|
// type:'area',
|
|
name: "IPv6",
|
|
data: ipv6data2,
|
|
lineColor:'#eecf8d',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},{
|
|
// type:'area',
|
|
name: "TCP",
|
|
data: tcpdata2,
|
|
lineColor:'#f1aa76',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},{
|
|
// type:'area',
|
|
name: "UDP",
|
|
data: udpdata2,
|
|
lineColor:'#88b876',
|
|
lineWidth:1,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
});
|
|
$("#total2").val(JSON.stringify(total2));
|
|
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
|
|
closeTip();
|
|
},
|
|
error: function(data, textStatus, errorThrown){
|
|
closeTip();
|
|
},
|
|
complete:function(XMLHttpRequest,status){//超时设置
|
|
closeTip();
|
|
}
|
|
});
|
|
}
|
|
|
|
/* 网络带宽时间维度趋势图 */
|
|
function showBandwidthChart(id,unitType,xdata,ydata,title){
|
|
var nowDate=new Date();
|
|
Highcharts.setOptions({ global: { useUTC: false } });
|
|
var chart = Highcharts.chart(id, {
|
|
chart:{
|
|
type: 'area',
|
|
zoomType: 'x'
|
|
},
|
|
title: {
|
|
text: title
|
|
},
|
|
navigation: {
|
|
buttonOptions: {
|
|
y: -15,
|
|
x: 5
|
|
}
|
|
},
|
|
//colors: ['#d6e6ff','#c2d9ff','#aecdff','#9ac0fe'],
|
|
colors:['#e5e3cd','#f1e5cd','#f3ebdf','#f3f7f1'],
|
|
noData:{
|
|
style: {//设置字体颜色
|
|
color: '#413333',
|
|
fontFamily:'Microsoft YaHei',
|
|
fontWeight:"unset",
|
|
},
|
|
},
|
|
exporting: {
|
|
filename:'<spring:message code="traffic"></spring:message>'+title+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
|
scale:1,
|
|
sourceWidth: 1280,
|
|
sourceHeight: 550,
|
|
buttons: {
|
|
contextButton: {
|
|
menuItems: [
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
|
'downloadPNG','downloadPDF',
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
|
]
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: unitType
|
|
},
|
|
min:0
|
|
},
|
|
legend: {
|
|
enabled:true
|
|
},
|
|
xAxis:{
|
|
/* type:'datetime',
|
|
|
|
labels: {
|
|
rotation: -45, //倾斜的角度
|
|
}, */
|
|
title: {
|
|
text: 'time-'+title,
|
|
align:'high',
|
|
},
|
|
type: 'datetime',
|
|
dateTimeLabelFormats: {
|
|
second: '%H:%M:%S',
|
|
minute: '%H:%M',
|
|
hour: '%H:%M',
|
|
day: '%m-%d',
|
|
week: '%m-%d',
|
|
month: '%Y-%m',
|
|
year: '%Y'
|
|
}
|
|
},
|
|
tooltip: {
|
|
dateTimeLabelFormats: {
|
|
millisecond: '%Y-%m-%d %H:%M:%S',
|
|
second: '%Y-%m-%d %H:%M:%S',
|
|
minute: '%Y-%m-%d %H:%M:%S',
|
|
hour: '%Y-%m-%d %H:%M:%S',
|
|
day: '%Y-%m-%d %H:%M:%S',
|
|
week: '%Y-%m-%d %H:%M:%S',
|
|
month: '%Y-%m-%d %H:%M:%S',
|
|
year: '%Y-%m-%d %H:%M:%S'
|
|
}
|
|
},
|
|
credits:{//是否有highcharts水印
|
|
enabled:false
|
|
},plotOptions: {
|
|
/* area: {
|
|
/* marker: {
|
|
radius: 2
|
|
},
|
|
lineWidth: 1,
|
|
states: {
|
|
hover: {
|
|
lineWidth: 1
|
|
}
|
|
},
|
|
threshold: null
|
|
lineColor:'#8216db'
|
|
}, */
|
|
series: {
|
|
label: {
|
|
style: {
|
|
fontWeight: 'bold',
|
|
color:'#012765'
|
|
},
|
|
boxesToAvoid: []
|
|
},
|
|
pointStart: 2010
|
|
}
|
|
},
|
|
/* plotOptions: {
|
|
area: {
|
|
stacking: 'normal',
|
|
lineColor: '#666666',
|
|
lineWidth: 1,
|
|
marker: {
|
|
lineWidth: 1,
|
|
lineColor: '#666666'
|
|
}
|
|
}
|
|
}, */
|
|
series:ydata
|
|
});
|
|
}
|
|
(function(H) {
|
|
H.Chart.prototype.downloadXLS = function() {
|
|
var nowDate=new Date();
|
|
var start=$("#beginDateh").val();
|
|
var end=$("#endDateh").val();
|
|
var div = document.createElement('div'),
|
|
xlsxRows = [],
|
|
xlsxColumns = [];
|
|
div.style.display = 'none';
|
|
document.body.appendChild(div);
|
|
rows = this.getDataRows(true);
|
|
/* 调用后台接口导出 */
|
|
var total = [];
|
|
var map={};
|
|
$(rows).each(function(i,d){
|
|
if(d!=null){
|
|
if(i==0){
|
|
if(d[0].indexOf("Astana") != -1){
|
|
total=JSON.parse($("#total").val());
|
|
}
|
|
if(d[0].indexOf("Alamty") != -1){
|
|
total=JSON.parse($("#total2").val());
|
|
}
|
|
}
|
|
}
|
|
// 去掉多余属性
|
|
delete d.name;
|
|
delete d.x;
|
|
delete d.xValues;
|
|
})
|
|
total.unshift('<spring:message code="report_total"/>');
|
|
rows.shift(); // 删除一个重复行
|
|
var heard = rows.shift(); // 删除一个重复行
|
|
rows.push(total)
|
|
var title=[];
|
|
title.push('<spring:message code="traffic"></spring:message>',start+"--"+end);
|
|
map["titleTime"]=title;
|
|
map["heard"]=heard;
|
|
map["book"]=rows;
|
|
map["titleCode"]='<spring:message code="traffic"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
|
|
var exports = JSON.stringify(map);
|
|
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
|
|
|
|
/* xlsxRows = H.map(rows.slice(1), function(row) {
|
|
return H.map(row, function(column) {
|
|
return {
|
|
type: typeof column === 'number' ? 'number' : 'string',
|
|
value: column
|
|
};
|
|
});
|
|
});
|
|
var a =new Array();
|
|
a.push({
|
|
type:'string',
|
|
value:'<spring:message code="total"></spring:message>'
|
|
})
|
|
|
|
if(xlsxRows!=null&&xlsxRows!=undefined&&xlsxRows.length>0){
|
|
for(var j=0;j<xlsxRows[0].length-1;j++){
|
|
a.push({
|
|
type:'number',
|
|
value:0
|
|
})
|
|
}
|
|
for(var i=1;i<xlsxRows.length;i++){
|
|
for(var j=1;j<xlsxRows[i].length;j++){
|
|
a[j].value=a[j].value+xlsxRows[i][j].value;
|
|
}
|
|
}
|
|
}
|
|
xlsxRows.push(a)
|
|
|
|
var b =new Array();
|
|
b.push({
|
|
type:'string',
|
|
value:'<spring:message code="traffic"></spring:message>'
|
|
})
|
|
b.push({
|
|
type:"string",
|
|
value:start+'--'+end
|
|
}); */
|
|
// xlsxRows.unshift(b)
|
|
/* zipcelx({
|
|
filename: '<spring:message code="traffic"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
|
sheet: {
|
|
data: xlsxRows
|
|
}
|
|
}); */
|
|
};
|
|
}(Highcharts));
|
|
|
|
/* function setTime(){
|
|
var chooseDate=new Date($('#beginDate').val());
|
|
chooseDate=chooseDate.setDate(chooseDate.getDate()+1);
|
|
var modifyTime=new Date(chooseDate);
|
|
$('#endDate').val(modifyTime.getFullYear()+"-"+((modifyTime.getMonth()+1)>=10?(modifyTime.getMonth()+1):"0"+(modifyTime.getMonth()+1))+"-"+(modifyTime.getDate()>=10?modifyTime.getDate():'0'+modifyTime.getDate())+' '+(modifyTime.getHours()>=10?modifyTime.getHours():'0'+modifyTime.getHours())+':'+(modifyTime.getMinutes()>=10?modifyTime.getMinutes():'0'+modifyTime.getMinutes())+':'+(modifyTime.getSeconds()>=10?modifyTime.getSeconds():'0'+modifyTime.getSeconds()));
|
|
} */
|
|
(function(H) {
|
|
H.Chart.prototype.downloadCSV = function() {
|
|
var rows = this.getDataRows(true);
|
|
var data=new Array();
|
|
var total = [];
|
|
$(rows).each(function (i,d){
|
|
if(d!=null){
|
|
if(i==0){
|
|
if(d[0].indexOf("Astana") != -1){
|
|
total=JSON.parse($("#total").val());
|
|
}
|
|
if(d[0].indexOf("Alamty") != -1){
|
|
total=JSON.parse($("#total2").val());
|
|
}
|
|
}
|
|
if(i>0){
|
|
data.push({
|
|
num1:d,
|
|
})
|
|
}
|
|
}
|
|
})
|
|
data.push({
|
|
num1:"<spring:message code='report_total'/>",
|
|
num2:total
|
|
})
|
|
var start = $("#beginDateh").val();
|
|
var end = $("#endDateh").val();
|
|
exportCsv({
|
|
title:["<spring:message code='traffic'/>",start+"--"+end],
|
|
titleForKey:["num1","num2","num3"],
|
|
data:data
|
|
});
|
|
};
|
|
}(Highcharts));
|
|
|
|
function exportCsv(obj){
|
|
var nowDate=new Date();
|
|
//title ["","",""]
|
|
var title = obj.title;
|
|
//titleForKey ["","",""]
|
|
var titleForKey = obj.titleForKey;
|
|
var data = obj.data;
|
|
var str = [];
|
|
str.push(obj.title.join(",")+"\n");
|
|
for(var i=0;i<data.length;i++){
|
|
var temp = [];
|
|
for(var j=0;j<titleForKey.length;j++){
|
|
temp.push(data[i][titleForKey[j]]);
|
|
}
|
|
str.push(temp.join(",")+"\n");
|
|
}
|
|
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(str.join(""));
|
|
var downloadLink = document.createElement("a");
|
|
downloadLink.href = uri;
|
|
downloadLink.download = '<spring:message code="traffic"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
|
document.body.appendChild(downloadLink);
|
|
downloadLink.click();
|
|
document.body.removeChild(downloadLink);
|
|
}
|
|
/* function sum(arr) {
|
|
return arr.reduce(function(prev, curr, idx, arr){
|
|
return prev + curr;
|
|
});
|
|
} */
|
|
</script>
|
|
</body>
|
|
</html> |