588 lines
16 KiB
Plaintext
588 lines
16 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8"%>
|
||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||
|
||
<div id="errorTipDiv" style="display: none;padding-top: 3px;"><sys:message content="server_internal_error"/></div>
|
||
<div class="row">
|
||
<div id="chartDiv1" class="col-md-12">
|
||
<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 id="chartDiv2" 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> -->
|
||
|
||
<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">
|
||
|
||
|
||
|
||
|
||
function searchList(){
|
||
// loading();
|
||
top.$.jBox.tip("onloading",'loading',{opacity:0.5,persistent:true});
|
||
|
||
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{
|
||
var unitType="";
|
||
if($("#dimension_select").val() =="Gbps"){
|
||
unitType="1";
|
||
}
|
||
if($("#dimension_select").val() =="pps"){
|
||
unitType="2";
|
||
}
|
||
changeBandwidth(unitType,start,end);
|
||
}
|
||
}
|
||
/*
|
||
* searchBuinessType 1（分钟） 2（小时） 3（天） 4（月） 5（年）
|
||
* searchDirection 方向
|
||
* searchQuotaType 1（bps） 2（pps） 3（linknum）
|
||
*/
|
||
// 根据单位切换数据
|
||
function changeBandwidth(unitType,beginDate,endDate){
|
||
var searchDirection = $("#detail_select").val();
|
||
if(searchDirection =="Outbound"){
|
||
searchDirection="0";
|
||
}else if(searchDirection =="Inbound"){
|
||
searchDirection="1";
|
||
}else{
|
||
searchDirection="";
|
||
}
|
||
var entranceId=$("#area_select").val();
|
||
if(entranceId == "astana"){
|
||
entranceId="1";
|
||
}else if(entranceId =="almaty"){
|
||
entranceId="2";
|
||
}else{
|
||
entranceId="";
|
||
}
|
||
var chartType = $("#chartType").val();
|
||
var timeSize = $(".timeSize:checked").val();
|
||
var operator=$("#operator_select").val();
|
||
|
||
$.ajax({
|
||
url:"${ctx}/dashboard/traffic/bandWidthTransThreeNew",
|
||
type:"get",
|
||
data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType,"searchDirection":searchDirection,"timeSize":timeSize,"operator":operator,"searchEntranceId":entranceId},
|
||
dataType:"json",
|
||
async:true,
|
||
timeout:50000,
|
||
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));
|
||
|
||
if(unitType == "1"){
|
||
unitType = "Gbps"
|
||
}else if(unitType == "2"){
|
||
unitType = "pps"
|
||
}else{
|
||
unitType = "linkNumber"
|
||
}
|
||
var title="Astana";
|
||
if(entranceId == "1"){
|
||
title="Astana";
|
||
}else if(entranceId == "2"){
|
||
title="Almaty";
|
||
}else{
|
||
title="Astana+Almaty";
|
||
}
|
||
|
||
showBandwidthChart("chart1",unitType,xdata,series,title,chartType);
|
||
$("#errorTipDiv").hide();
|
||
/* 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,"Almaty",chartType); */
|
||
// closeTip();
|
||
},
|
||
error: function(data, textStatus, errorThrown){
|
||
// alert("error");
|
||
$("#errorTipDiv").show();
|
||
closeTip();
|
||
},
|
||
complete:function(XMLHttpRequest,status){//超时设置
|
||
// alert("complete");
|
||
if(status == 'timeout'){
|
||
$("#errorTipDiv").show();
|
||
}
|
||
closeTip();
|
||
}
|
||
});
|
||
// closeTip();
|
||
}
|
||
|
||
/* 网络带宽时间维度趋势图 */
|
||
function showBandwidthChart(id,unitType,xdata,ydata,title,chartType){
|
||
var nowDate=new Date();
|
||
Highcharts.setOptions({ global: { useUTC: false } });
|
||
var chart = {
|
||
chart:{
|
||
type: 'line',
|
||
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'
|
||
}
|
||
}
|
||
}, */
|
||
// pie
|
||
plotOptions: {
|
||
pie: {
|
||
allowPointSelect: true,
|
||
cursor: 'pointer',
|
||
dataLabels: {
|
||
enabled: true,
|
||
format: '<br>{point.name}</br>: {point.percentage:.1f} %',
|
||
style: {
|
||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||
}
|
||
},
|
||
showInLegend: true
|
||
}
|
||
},
|
||
series:ydata
|
||
};
|
||
|
||
if(typeof chartType != "undefined"){
|
||
chart.chart.type = chartType;
|
||
if(chartType == "pie"){
|
||
var oldSeries = chart.series;
|
||
var pieSeries = [];
|
||
var pieSeries2 = {};
|
||
|
||
var pieData = [];
|
||
for(var ind in oldSeries){
|
||
|
||
var pieDataObj = {};
|
||
var countY = 0;
|
||
|
||
var dataArray = oldSeries[ind].data;
|
||
for(var index in dataArray){
|
||
var num = dataArray[index][1];
|
||
countY += num;
|
||
}
|
||
/* if(){ 数据列项为空处理
|
||
|
||
} */
|
||
pieDataObj.name = oldSeries[ind].name;
|
||
pieDataObj.y = countY;
|
||
pieData.push(pieDataObj);
|
||
}
|
||
|
||
pieSeries2.name = 'Brands';
|
||
pieSeries2.colorByPoint = true;
|
||
pieSeries2.data = pieData;
|
||
pieSeries.push(pieSeries2);
|
||
|
||
chart.series = pieSeries;
|
||
chart.tooltip.pointFormat = "{point.y}| <b>{point.percentage:.1f}%</br>";
|
||
}else{
|
||
chart.tooltip.pointFormat = "<span style='color:{point.color}'>\u25CF</span> {series.name}: <b>{point.y}</b><br/>";
|
||
}
|
||
|
||
}
|
||
|
||
$("#"+id).highcharts(chart);
|
||
// top.$.jBox.closeTip();
|
||
}
|
||
(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("Almaty") != -1){
|
||
total=JSON.parse($("#total2").val());
|
||
}
|
||
}
|
||
} */
|
||
total=JSON.parse($("#total").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("Almaty") != -1){
|
||
total=JSON.parse($("#total2").val());
|
||
}
|
||
} */
|
||
total=JSON.parse($("#total").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");
|
||
}
|
||
|
||
str = "\uFEFF"+str.join(""); //
|
||
var blob = new Blob([str], {type: 'text/plain'});
|
||
var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
|
||
var downloadLink = document.createElement("a");
|
||
downloadLink.href = window.URL.createObjectURL(blob);
|
||
downloadLink.download = "<spring:message code='traffic'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv";
|
||
downloadLink.style.display = 'none';
|
||
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> |