gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改流量统计页面线条展示为面积图优化其它属性

Browse Source
This commit is contained in:
tanghao
2018-12-29 18:39:38 +08:00
parent ecefa007e1
commit 95185070c6
1 changed files with 113 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
View File

@@ -6,7 +6,6 @@
<spring:message code="bandwith"></spring:message> <spring:message code="bandwith"></spring:message>
</title> </title>
</head> </head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css">
<body> <body>
@@ -80,7 +79,7 @@
</div> </div>
</div> </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/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/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/series-label.js"></script>
@@ -135,7 +134,7 @@ function changeBandwidth(unitType,beginDate,endDate){
$.ajax({ $.ajax({
url:"${ctx}/dashboard/traffic/bandwidthTransThree", url:"${ctx}/dashboard/traffic/bandwidthTransThree",
type:"get", type:"get",
data:{"beginDate":beginDate,"endDate":endDate}, data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType},
dataType:"json", dataType:"json",
async:true, async:true,
timeout:40000, timeout:40000,
@@ -152,85 +151,82 @@ function changeBandwidth(unitType,beginDate,endDate){
var total=[]; var total=[];
var total2=[]; var total2=[];
if(data!=null&&Object.keys(data).length>0){ if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type1!=undefined&&data.ipv4Type1!=null){ ipv4data=data.ipv4Type1.result;
xdata=data.ipv4Type1.statTime; ipv6data=data.ipv6Type1.result;
if(unitType=="Gbps"){ tcpdata=data.trans6Type1.result;
ipv4data=data.ipv4Type1.gbps; udpdata=data.trans17Type1.result;
ipv6data=data.ipv6Type1.gbps; total.push(data.ipv4Type1.sum,data.ipv6Type1.sum,data.trans6Type1.sum,data.trans17Type1.sum);
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));
} }
var series=new Array(); var series=new Array();
series.push({ series.push({
// type:'area',
name: "IPv4", name: "IPv4",
data: ipv4data data: ipv4data,
marker: {
enabled: false
}
},{ },{
// type:'area',
name: "IPv6", name: "IPv6",
data: ipv6data data: ipv6data,
marker: {
enabled: false
}
},{ },{
// type:'area',
name: "TCP", name: "TCP",
data: tcpdata data: tcpdata,
marker: {
enabled: false
}
},{ },{
// type:'area',
name: "UDP", name: "UDP",
data: udpdata data: udpdata,
marker: {
enabled: false
}
}); });
$("#total").val(JSON.stringify(total)); $("#total").val(JSON.stringify(total));
showBandwidthChart("chart1",unitType,xdata,series,"Astana"); showBandwidthChart("chart1",unitType,xdata,series,"Astana");
if(data!=null&&Object.keys(data).length>0){ if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type2!=undefined&&data.ipv4Type2!=null){ ipv4data2=data.ipv4Type2.result;
xdata=data.ipv4Type2.statTime; ipv6data2=data.ipv6Type2.result;
if(unitType=="Gbps"){ tcpdata2=data.trans6Type2.result;
ipv4data2=data.ipv4Type2.gbps; udpdata2=data.trans17Type2.result;
ipv6data2=data.ipv6Type2.gbps; total2.push(data.ipv4Type2.sum,data.ipv6Type2.sum,data.trans6Type2.sum,data.trans17Type2.sum);
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));
} }
var series=new Array(); var series=new Array();
series.push({ series.push({
// type:'area',
name: "IPv4", name: "IPv4",
data: ipv4data2 data: ipv4data2,
marker: {
enabled: false
}
},{ },{
// type:'area',
name: "IPv6", name: "IPv6",
data: ipv6data2 data: ipv6data2,
marker: {
enabled: false
}
},{ },{
// type:'area',
name: "TCP", name: "TCP",
data: tcpdata2 data: tcpdata2,
marker: {
enabled: false
}
},{ },{
// type:'area',
name: "UDP", name: "UDP",
data: udpdata2 data: udpdata2,
marker: {
enabled: false
}
}); });
$("#total2").val(JSON.stringify(total2)); $("#total2").val(JSON.stringify(total2));
showBandwidthChart("chart2",unitType,xdata,series,"Alamty"); showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
@@ -250,7 +246,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
var nowDate=new Date(); var nowDate=new Date();
var chart = Highcharts.chart(id, { var chart = Highcharts.chart(id, {
chart:{ chart:{
// type: 'area', type: 'area',
zoomType: 'x' zoomType: 'x'
}, },
title: { title: {
@@ -262,6 +258,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
x: 5 x: 5
} }
}, },
colors: ['#25a2ff','#0594ff','#0086e9','#026fc0'],
noData:{ noData:{
style: {//设置字体颜色 style: {//设置字体颜色
color: '#413333', color: '#413333',
@@ -295,20 +292,64 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
enabled:true enabled:true
}, },
xAxis:{ xAxis:{
type:'category', /* type:'datetime',
title: {
labels: {
rotation: -45, //倾斜的角度
}, */
title: {
text: 'time-'+title, text: 'time-'+title,
align:'high', align:'high',
}, },
labels: { type: 'datetime',
rotation: -45, //倾斜的角度 dateTimeLabelFormats: {
}, second: '%H:%M:%S',
categories: xdata, 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水印 credits:{//是否有highcharts水印
enabled:false 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: { /* plotOptions: {
area: { area: {
stacking: 'normal', stacking: 'normal',
@@ -320,10 +361,9 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
} }
} }
}, */ }, */
series: ydata, series:ydata
}); });
Highcharts.setOptions({ global: { useUTC: false } });
} }
(function(H) { (function(H) {
H.Chart.prototype.downloadXLS = function() { H.Chart.prototype.downloadXLS = function() {
@@ -415,6 +455,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
} }
} }
}) })
console.log(total)
data.push({ data.push({
num1:"<spring:message code='total'/>", num1:"<spring:message code='total'/>",
num2:total num2:total
@@ -453,11 +494,11 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
downloadLink.click(); downloadLink.click();
document.body.removeChild(downloadLink); document.body.removeChild(downloadLink);
} }
function sum(arr) { /* function sum(arr) {
return arr.reduce(function(prev, curr, idx, arr){ return arr.reduce(function(prev, curr, idx, arr){
return prev + curr; return prev + curr;
}); });
} } */
</script> </script>
</body> </body>
</html> </html>