修改流量统计页面线条展示为面积图优化其它属性
This commit is contained in:
tanghao
@@ -6,7 +6,6 @@
|
||||
<spring:message code="bandwith"></spring:message>
|
||||
</title>
|
||||
</head>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css">
|
||||
|
||||
|
||||
<body>
|
||||
@@ -80,7 +79,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css" type="text/css" />
|
||||
</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>
|
||||
@@ -135,7 +134,7 @@ function changeBandwidth(unitType,beginDate,endDate){
|
||||
$.ajax({
|
||||
url:"${ctx}/dashboard/traffic/bandwidthTransThree",
|
||||
type:"get",
|
||||
data:{"beginDate":beginDate,"endDate":endDate},
|
||||
data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType},
|
||||
dataType:"json",
|
||||
async:true,
|
||||
timeout:40000,
|
||||
@@ -152,85 +151,82 @@ function changeBandwidth(unitType,beginDate,endDate){
|
||||
var total=[];
|
||||
var total2=[];
|
||||
if(data!=null&&Object.keys(data).length>0){
|
||||
if(data.ipv4Type1!=undefined&&data.ipv4Type1!=null){
|
||||
xdata=data.ipv4Type1.statTime;
|
||||
if(unitType=="Gbps"){
|
||||
ipv4data=data.ipv4Type1.gbps;
|
||||
ipv6data=data.ipv6Type1.gbps;
|
||||
tcpdata=data.trans6Type1.gbps;
|
||||
udpdata=data.trans17Type1.gbps;
|
||||
}
|
||||
if(unitType=="pps"){
|
||||
ipv4data=data.ipv4Type1.pps;
|
||||
ipv6data=data.ipv6Type1.pps;
|
||||
tcpdata=data.trans6Type1.pps;
|
||||
udpdata=data.trans17Type1.pps;
|
||||
|
||||
}
|
||||
if(unitType=="linkNumber"){
|
||||
ipv4data=data.ipv4Type1.linkNum;
|
||||
ipv6data=data.ipv6Type1.linkNum;
|
||||
tcpdata=data.trans6Type1.linkNum;
|
||||
udpdata=data.trans17Type1.linkNum;
|
||||
}
|
||||
}
|
||||
total.push(sum(ipv4data),sum(ipv6data),sum(tcpdata),sum(udpdata));
|
||||
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
|
||||
data: ipv4data,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "IPv6",
|
||||
data: ipv6data
|
||||
data: ipv6data,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "TCP",
|
||||
data: tcpdata
|
||||
data: tcpdata,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "UDP",
|
||||
data: udpdata
|
||||
data: udpdata,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
$("#total").val(JSON.stringify(total));
|
||||
showBandwidthChart("chart1",unitType,xdata,series,"Astana");
|
||||
|
||||
if(data!=null&&Object.keys(data).length>0){
|
||||
if(data.ipv4Type2!=undefined&&data.ipv4Type2!=null){
|
||||
xdata=data.ipv4Type2.statTime;
|
||||
if(unitType=="Gbps"){
|
||||
ipv4data2=data.ipv4Type2.gbps;
|
||||
ipv6data2=data.ipv6Type2.gbps;
|
||||
tcpdata2=data.trans6Type2.gbps;
|
||||
udpdata2=data.trans17Type2.gbps;
|
||||
}
|
||||
if(unitType=="pps"){
|
||||
ipv4data2=data.ipv4Type2.pps;
|
||||
ipv6data2=data.ipv6Type2.pps;
|
||||
tcpdata2=data.trans6Type2.pps;
|
||||
udpdata2=data.trans17Type2.pps;
|
||||
|
||||
}
|
||||
if(unitType=="linkNumber"){
|
||||
ipv4data2=data.ipv4Type2.linkNum;
|
||||
ipv6data2=data.ipv6Type2.linkNum;
|
||||
tcpdata2=data.trans6Type2.linkNum;
|
||||
udpdata2=data.trans17Type2.linkNum;
|
||||
}
|
||||
}
|
||||
total2.push(sum(ipv4data2),sum(ipv6data2),sum(tcpdata2),sum(udpdata2));
|
||||
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
|
||||
data: ipv4data2,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "IPv6",
|
||||
data: ipv6data2
|
||||
data: ipv6data2,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "TCP",
|
||||
data: tcpdata2
|
||||
data: tcpdata2,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},{
|
||||
// type:'area',
|
||||
name: "UDP",
|
||||
data: udpdata2
|
||||
data: udpdata2,
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
$("#total2").val(JSON.stringify(total2));
|
||||
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
|
||||
@@ -250,7 +246,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
|
||||
var nowDate=new Date();
|
||||
var chart = Highcharts.chart(id, {
|
||||
chart:{
|
||||
// type: 'area',
|
||||
type: 'area',
|
||||
zoomType: 'x'
|
||||
},
|
||||
title: {
|
||||
@@ -262,6 +258,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
|
||||
x: 5
|
||||
}
|
||||
},
|
||||
colors: ['#25a2ff','#0594ff','#0086e9','#026fc0'],
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#413333',
|
||||
@@ -295,20 +292,64 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
|
||||
enabled:true
|
||||
},
|
||||
xAxis:{
|
||||
type:'category',
|
||||
title: {
|
||||
/* type:'datetime',
|
||||
|
||||
labels: {
|
||||
rotation: -45, //倾斜的角度
|
||||
}, */
|
||||
title: {
|
||||
text: 'time-'+title,
|
||||
align:'high',
|
||||
},
|
||||
labels: {
|
||||
rotation: -45, //倾斜的角度
|
||||
},
|
||||
categories: xdata,
|
||||
},
|
||||
|
||||
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
|
||||
}, */
|
||||
series: {
|
||||
label: {
|
||||
style: {
|
||||
fontWeight: 'bold',
|
||||
color:'#012765'
|
||||
},
|
||||
boxesToAvoid: []
|
||||
},
|
||||
pointStart: 2010
|
||||
}
|
||||
},
|
||||
/* plotOptions: {
|
||||
area: {
|
||||
stacking: 'normal',
|
||||
@@ -320,10 +361,9 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
|
||||
}
|
||||
}
|
||||
}, */
|
||||
series: ydata,
|
||||
|
||||
series:ydata
|
||||
});
|
||||
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
}
|
||||
(function(H) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
@@ -415,6 +455,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(total)
|
||||
data.push({
|
||||
num1:"<spring:message code='total'/>",
|
||||
num2:total
|
||||
@@ -453,11 +494,11 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
function sum(arr) {
|
||||
/* function sum(arr) {
|
||||
return arr.reduce(function(prev, curr, idx, arr){
|
||||
return prev + curr;
|
||||
});
|
||||
}
|
||||
} */
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user