流量统计导出图表修改文件名称,加后缀时间,导出csv的增加标题日期

This commit is contained in:
zhanghongqing
2018-12-27 11:20:55 +08:00
parent cab074abea
commit 73c3b9db1f
10 changed files with 378 additions and 23 deletions

View File

@@ -175,7 +175,8 @@
yAxis : {
title : {
text : null
}
},
min:0
},
credits : {//是否有highcharts水印
enabled : false

View File

@@ -145,7 +145,8 @@ function showActionTransChart(xData,series){
yAxis: {
title: {
text: null
}
},
min:0
},
credits:{//是否有highcharts水印
enabled:false
@@ -286,6 +287,7 @@ function showActionTransChart(xData,series){
H.Chart.prototype.downloadCSV = function() {
var rows = this.getDataRows(true);
var total = JSON.parse($("#total").val());
var data=[];
$(rows).each(function (i,d){
if(d!=null){
if(i>0){

View File

@@ -187,6 +187,7 @@ function ajaxAppList(start,end){
}
// 导出列表
$(".export-btn").click(function(){
var nowDate=new Date();
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var start=$("#beginDate").val();
@@ -201,7 +202,7 @@ $(".export-btn").click(function(){
headings:true,
footers:true,
formats:[dataType],
fileName:"<spring:message code='App'></spring:message>",
fileName:"<spring:message code='App'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
bootstrap:false
});
$("#myexport").click();
@@ -313,6 +314,7 @@ function pageJuan(showData) {
function protocolTypeChart(rs){
//终端用户 分操作系统与浏览器
var data=new Array();
var nowDate=new Date();
$(rs).each(function(i, d) {
data.push({
name: d.appName,
@@ -334,7 +336,7 @@ function protocolTypeChart(rs){
},
exporting: {
allowHTML:true,
filename:"<spring:message code='App'></spring:message>",
filename:"<spring:message code='App'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 500,

View File

@@ -24,6 +24,8 @@
<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">
@@ -138,8 +140,6 @@ function changeBandwidth(unitType,beginDate,endDate){
async:true,
timeout:40000,
success:function (data){
console.log(data)
console.log(1111)
var xdata=null;
var ipv4data=null;
var ipv6data=null;
@@ -149,6 +149,8 @@ function changeBandwidth(unitType,beginDate,endDate){
var ipv6data2=null;
var tcpdata2=null;
var udpdata2=null;
var total=[];
var total2=[];
if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type1!=undefined&&data.ipv4Type1!=null){
xdata=data.ipv4Type1.statTime;
@@ -172,6 +174,7 @@ function changeBandwidth(unitType,beginDate,endDate){
udpdata=data.trans17Type1.linkNum;
}
}
total.push(sum(ipv4data),sum(ipv6data),sum(tcpdata),sum(udpdata));
}
var series=new Array();
series.push({
@@ -187,6 +190,7 @@ function changeBandwidth(unitType,beginDate,endDate){
name: "UDP",
data: udpdata
});
$("#total").val(JSON.stringify(total));
showBandwidthChart("chart1",unitType,xdata,series,"Astana");
if(data!=null&&Object.keys(data).length>0){
@@ -212,6 +216,7 @@ function changeBandwidth(unitType,beginDate,endDate){
udpdata2=data.trans17Type2.linkNum;
}
}
total2.push(sum(ipv4data2),sum(ipv6data2),sum(tcpdata2),sum(udpdata2));
}
var series=new Array();
series.push({
@@ -227,6 +232,7 @@ function changeBandwidth(unitType,beginDate,endDate){
name: "UDP",
data: udpdata2
});
$("#total2").val(JSON.stringify(total2));
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
closeTip();
},
@@ -241,7 +247,7 @@ function changeBandwidth(unitType,beginDate,endDate){
/* 网络带宽时间维度趋势图 */
function showBandwidthChart(id,unitType,xdata,ydata,title){
var nowDate=new Date();
var chart = Highcharts.chart(id, {
chart:{
// type: 'area',
@@ -264,7 +270,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
},
},
exporting: {
filename:'Bandwidth',
filename:'<spring:message code="traffic"></spring:message>'+title+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 550,
@@ -290,7 +296,10 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
},
xAxis:{
type:'category',
// tickmarkPlacement: 'on',
title: {
text: 'time-'+title,
align:'high',
},
labels: {
rotation: -45, //倾斜的角度
},
@@ -317,8 +326,8 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
}
(function(H) {
var nowDate=new Date();
H.Chart.prototype.downloadXLS = function() {
var nowDate=new Date();
var start=$("#beginDate").val();
var end=$("#endDate").val();
var div = document.createElement('div'),
@@ -384,6 +393,71 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
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='total'/>",
num2:total
})
var start = $("#beginDate").val();
var end = $("#endDate").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()+".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>

View File

@@ -24,6 +24,7 @@
<input id="domain" type="hidden" value="${domain}"/>
<input id="entranceId" type="hidden" value="${entranceId}"/>
<input id="domainName" type="hidden" value="${domainName}"/>
<input id="total" type="hidden"/>
<!-- 搜索内容与操作按钮栏 -->
<!-- 搜索内容与操作按钮栏 -->
@@ -39,6 +40,7 @@
<%-- <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/no-data-to-display.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
<script type="text/javascript">
$(document).ready(function(){
@@ -62,8 +64,12 @@ $(document).ready(function(){
$("#tbodyData").html("");
var xData=new Array();
var series=new Array();
var total = 0;
if(rs!=null&&rs.length>0){
xData=rs[0].statTime;
xData=rs[0].statTime;
$(rs[0].count).each(function(i,d) {
total+=d
})
series.push({
name: 'unique',
data: rs[0].count
@@ -74,6 +80,7 @@ $(document).ready(function(){
data: []
});
}
$("#total").val(JSON.stringify(total));
showDomainTrans(xData,series);
closeTip();
},
@@ -87,6 +94,7 @@ $(document).ready(function(){
}
function showDomainTrans(xData,series){
var nowDate=new Date();
var domainName= $("#domainName").val();
var chart = Highcharts.chart('chart', {
chart:{
@@ -94,7 +102,7 @@ function showDomainTrans(xData,series){
zoomType: 'x'
},
exporting: {
filename:'Domain-Trans',
filename:'<spring:message code="domain_name"/>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
@@ -154,7 +162,104 @@ function showDomainTrans(xData,series){
series: series,
});
}
(function(H) {
H.Chart.prototype.downloadXLS = function() {
var div = document.createElement('div'), xlsxRows = [], xlsxColumns = [];
var nowDate=new Date();
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 : '<spring:message code="domain_name"></spring:message>'
})
b.push({
type : "string",
value : start + "--" + end
})
xlsxRows.unshift(b);
var a = new Array();
a.push({
type : 'string',
value : '<spring:message code="total"></spring:message>'
})
var total = JSON.parse($("#total").val());
a.push({
type : "number",
value : total
})
xlsxRows.push(a)
zipcelx({
filename : '<spring:message code="domain_name"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
sheet : {
data : xlsxRows
}
});
};
}(Highcharts));
(function(H) {
H.Chart.prototype.downloadCSV = function() {
var rows = this.getDataRows(true);
var data=new Array();
var total = total = JSON.parse($("#total").val());
$(rows).each(function (i,d){
if(d!=null&&i>0){
data.push({
num1:d,
})
}
})
data.push({
num1:"<spring:message code='total'/>",
num2:total
})
var start = $("#beginDate").val();
var end = $("#endDate").val();
exportCsv({
title:["<spring:message code='domain_name'/>",start+"--"+end],
titleForKey:["num1","num2"],
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='domain_name'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+".csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
</script>
</body>
</html>

View File

@@ -169,6 +169,7 @@ $(".export-btn").click(function(){
getPageData(1,999999);// 设置导出页条数
var start=$("#beginDate").val();
var end=$("#endDate").val();
var nowDate=new Date();
var htmlTitle="";
htmlTitle+="<tr class='tr-title'>";
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='service'/>"+"</th>";
@@ -179,7 +180,7 @@ $(".export-btn").click(function(){
headings:true,
footers:true,
formats:[dataType],
fileName:"service",
fileName:"service"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
bootstrap:false
});
$("#myexport").click();

View File

@@ -167,14 +167,14 @@ function searchList(){
}
function showIpActiveChart(xData,series){
var nowDate=new Date();
var chart = Highcharts.chart('chart', {
chart:{
//type: 'area',
zoomType: 'x'
},
exporting: {
filename:'<spring:message code="traffic_ipactive_hour_trend"></spring:message>',
filename:'<spring:message code="traffic_ipactive_hour_trend"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
@@ -360,8 +360,8 @@ function showIpActiveChart(xData,series){
}
(function(H) {
var nowDate=new Date();
H.Chart.prototype.downloadXLS = function() {
var nowDate=new Date();
var div = document.createElement('div'),
xlsxRows = [],
xlsxColumns = [];
@@ -411,6 +411,56 @@ function showIpActiveChart(xData,series){
});
};
}(Highcharts));
(function(H) {
H.Chart.prototype.downloadCSV = function() {
var rows = this.getDataRows(true);
var data=new Array();
var total = total = JSON.parse($("#total").val());
$(rows).each(function (i,d){
if(d!=null&&i>0){
data.push({
num1:d,
})
}
})
data.push({
num1:"<spring:message code='total'/>",
num2:total
})
var start = $("#beginDate").val();
var end = $("#endDate").val();
exportCsv({
title:["<spring:message code='traffic_ipactive_hour_trend'/>",start+"--"+end],
titleForKey:["num1","num2"],
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_ipactive_hour_trend'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+".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;

View File

@@ -20,6 +20,7 @@
<form:form id="searchForm" action="${ctx}/dashboard/portActiveList" method="get" class="form-search">
<input id="beginDateh" type="hidden" value="${beginDate}"/>
<input id="endDateh" type="hidden" value="${endDate}"/>
<input id="total" type="hidden"/>
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left">
@@ -61,6 +62,7 @@
<%-- <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/no-data-to-display.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
<script type="text/javascript">
$(document).ready(function(){
@@ -83,12 +85,13 @@ $(document).ready(function(){
});
//导出列表
$(".export-btn").click(function(){
var nowDate=new Date();
var dataType = $(this).attr("data-type");
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:[dataType],
fileName:"Port-Active-2",
fileName:"<spring:message code='active_port'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
bootstrap:false
});
$("#myexport").click();
@@ -107,14 +110,14 @@ function searchList(){
}
function showPortActiveChart(xData,series){
var nowDate=new Date();
var chart = Highcharts.chart('chart', {
chart:{
// type: 'area',
zoomType: 'x'
},
exporting: {
filename:'<spring:message code="active_port"></spring:message>',
filename:'<spring:message code="active_port"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
@@ -193,9 +196,13 @@ function showPortActiveChart(xData,series){
success:function (rs) {
var xData=new Array();
var series=new Array();
var total = [];
if(rs!=null&&rs.length>0){
xData=rs[0].statTime;
$(rs).each(function(i, d) {
total.push(
sum(d.sum)
)
series.push({
name: d.port,
data: d.sum
@@ -207,6 +214,7 @@ function showPortActiveChart(xData,series){
data: []
});
}
$("#total").val(JSON.stringify(total));
showPortActiveChart(xData,series);
closeTip();
},
@@ -296,6 +304,114 @@ function showPortActiveChart(xData,series){
});
} */
(function(H) {
var nowDate=new Date();
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:'<spring:message code="active_port"></spring:message>'
})
b.push({
type:"string",
value:start+"--"+end
})
xlsxRows.unshift(b);
var a =new Array();
a.push({
type:'string',
value:'<spring:message code="total"></spring:message>'
})
var total=total=JSON.parse($("#total").val());
$(total).each(function(i, d) {
a.push({
type:"number",
value:d
})
})
xlsxRows.push(a)
zipcelx({
filename: '<spring:message code="active_port"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
sheet: {
data: xlsxRows
}
});
};
}(Highcharts));
(function(H) {
H.Chart.prototype.downloadCSV = function() {
var rows = this.getDataRows(true);
var data=new Array();
var total = total = JSON.parse($("#total").val());
$(rows).each(function (i,d){
if(d!=null&&i>0){
data.push({
num1:d,
})
}
})
data.push({
num1:"<spring:message code='total'/>",
num2:total
})
var start = $("#beginDate").val();
var end = $("#endDate").val();
exportCsv({
title:["<spring:message code='active_port'/>",start+"--"+end],
titleForKey:["num1","num2"],
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='active_port'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+".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>

View File

@@ -181,6 +181,7 @@ function ajaxProtocolList(start,end){
}
// 导出列表
$(".export-btn").click(function(){
var nowDate=new Date();
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var start=$("#beginDate").val();
@@ -195,7 +196,7 @@ $(".export-btn").click(function(){
headings:true,
footers:true,
formats:[dataType],
fileName:"<spring:message code='protocol_type'></spring:message>",
fileName:"<spring:message code='protocol_type'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
bootstrap:false
});
$("#myexport").click();
@@ -305,6 +306,7 @@ function pageJuan(showData) {
}
// 比例协议统计图
function protocolTypeChart(rs){
var nowDate=new Date();
//终端用户 分操作系统与浏览器
var data=new Array();
$(rs).each(function(i, d) {
@@ -329,7 +331,7 @@ function protocolTypeChart(rs){
},
exporting: {
allowHTML:true,
filename:"<spring:message code='protocol_type'></spring:message>",
filename:"<spring:message code='protocol_type'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 500,

View File

@@ -249,6 +249,7 @@
}
// 导出列表
$(".export-btn").click(function(){
var nowDate=new Date();
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var start=$("#beginDate").val();
@@ -263,7 +264,7 @@
headings:true,
footers:true,
formats:[dataType],
fileName:"<spring:message code='domain_name'></spring:message>",
fileName:"<spring:message code='domain_name'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
bootstrap:false
});
$("#myexport").click();
@@ -395,6 +396,7 @@
// 比例域名统计图
function webTypeChart(rs){
var nowDate=new Date();
//终端用户 分操作系统与浏览器
var data=new Array();
$(rs).each(function(i, d) {
@@ -418,7 +420,7 @@ function webTypeChart(rs){
},
exporting: {
allowHTML:true,
filename:"<spring:message code='domain_name'></spring:message>",
filename:"<spring:message code='domain_name'></spring:message>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate(),
scale:1,
sourceWidth: 1280,
sourceHeight: 500,