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

流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。

Browse Source
This commit is contained in:
zhanghongqing
2018-12-20 21:09:48 +08:00
parent 74c978286a
commit c7b86b08c6
12 changed files with 316 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/main/webapp/WEB-INF/views/dashboard/trafficAppTypeList.jsp
View File

@@ -80,8 +80,14 @@
<div class="row">
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
</div>
<div class="row pull-right">
<button type="button" class="btn btn-default" id="export-btn"><i class="fa fa-download"> <spring:message code="export"/></i></button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <spring:message code="export"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -9px;">
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv &nbsp;&nbsp;&nbsp;</a><li>
</ul>
</div>
<br>
<br>
@@ -176,13 +182,14 @@ function ajaxAppList(start,end){
});
}
// 导出列表
$("#export-btn").click(function(){
$(".export-btn").click(function(){
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:["xlsx"],
fileName:"App",
formats:[dataType],
fileName:"service",
bootstrap:false
});
$("#myexport").click();
@@ -224,6 +231,8 @@ function htmlData(fileDataS){
}else{
$('.none-data').hide();
$('.M-box').show();
var start=$("#beginDate").val();
var end=$("#endDate").val();
$.each(fileDataS,function (index,data){
if(data!=null){
var totalLink = data.totalLink;
@@ -250,6 +259,17 @@ function htmlData(fileDataS){
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
html+= "<td class='tc'>"+gbytper+"%"+"</td>";
html+="</tr>"
if(index==fileDataS.length-1){
html+="<tr class='tr-total hidden'>"
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
html+= "<td class='tc'>"+totalLink+"</td>";
html+= "<td class='tc'>" +"100%"+"</td>";
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
html+= "<td class='tc'>"+"100%"+"</td>";
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
html+= "<td class='tc'>"+start+"--"+ end +"</td>";
html+="</tr>"
}
}
$("#tableData").append(html);
});

3
src/main/webapp/WEB-INF/views/dashboard/trafficDomainTrans.jsp
View File

@@ -3,7 +3,7 @@
<html>
<head>
<title>
<spring:message code="traffic_ip_active"></spring:message>
<spring:message code="domain_name"></spring:message>
</title>
</head>
@@ -37,6 +37,7 @@
<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/themes/grid.js"></script> --%>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
<script type="text/javascript">
$(document).ready(function(){
domainTrans();

34
src/main/webapp/WEB-INF/views/dashboard/trafficHttpStatisticList.jsp
View File

@@ -57,8 +57,14 @@
<!-- <div class="row">
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
</div> -->
<div class="row pull-right">
<button type="button" class="btn btn-default" id="export-btn"><i class="fa fa-download"> <spring:message code="export"/></i></button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <spring:message code="export"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -9px;">
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv &nbsp;&nbsp;&nbsp;</a><li>
</ul>
</div>
<br>
<br>
@@ -108,7 +114,6 @@ $(document).ready(function(){
},500000);// 五分钟调用一次
});
function searchList(){
loading();
var start=$("#beginDate").val();
var end=$("#endDate").val();
if(start==''||end==''||end==null||start==null){
@@ -118,7 +123,6 @@ function searchList(){
}
}
function ajaxProtocolList(start,end){
loading();
$.ajax({
url: '${ctx}/dashboard/traffic/statisticList',
type: 'get',
@@ -126,6 +130,9 @@ function ajaxProtocolList(start,end){
data:{"beginDate":start,"endDate":end},
async:false,
timeout:10000,
beforeSend:function(){
loading();
},
success:function (data){
if(data!=null&&data.length>0&&data[0].error!=null){
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
@@ -156,12 +163,13 @@ function ajaxProtocolList(start,end){
});
}
// 导出列表
$("#export-btn").click(function(){
$(".export-btn").click(function(){
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:["xlsx"],
formats:[dataType],
fileName:"service",
bootstrap:false
});
@@ -203,6 +211,8 @@ function htmlData(fileDataS){
}else{
$('.none-data').hide();
$('.M-box').show();
var start=$("#beginDate").val();
var end=$("#endDate").val();
$.each(fileDataS,function (index,data){
if(data!=null){
var html = "<tr>";
@@ -214,6 +224,18 @@ function htmlData(fileDataS){
html+= "<td class='tc'>"+(data.count/1073741824).toFixed(2)+"</td>";
html+= "<td class='tc'>"+(data.count/data.allGByte*100).toFixed(2)+"%"+"</td>";
html+="</tr>"
if(index==fileDataS.length-1){
html+="<tr class='tr-total hidden'>"
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
html+= "<td class='tc'>"+(data.allLink).toFixed(2)+"</td>";
html+= "<td class='tc'>" +"100%"+"</td>";
html+= "<td class='tc'>"+(data.allPackets).toFixed(2)+"</td>";
html+= "<td class='tc'>"+"100%"+"</td>";
html+= "<td class='tc'>"+(data.allGByte/1073741824).toFixed(2)+"</td>";
html+= "<td class='tc'>"+"100%"+"</td>";
html+= "<td class='tc'>"+start+"--"+ end +"</td>";
html+="</tr>"
}
}
$("#tableData").append(html);
});

111
src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp
View File

@@ -60,8 +60,14 @@
<h3 class="page-title">
<spring:message code="traffic_ipactive_hour_max"></spring:message>
</h3>
<div class="pull-right">
<button type="button" onClick="return _export('${ctx}/dashboard/export');" class="btn btn-default"><i class="fa fa-download"> <spring:message code="export"/></i></button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <spring:message code="export"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -9px;">
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv &nbsp;&nbsp;&nbsp;</a><li>
</ul>
</div>
<br>
<br>
@@ -91,11 +97,15 @@
</div>
</div>
</div>
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.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/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/themes/grid.js"></script> --%>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var starth=$("#beginDateh").val();
@@ -115,12 +125,22 @@ $(document).ready(function(){
$("#searchForm")[0].reset();
});
});
//导出列表
$(".export-btn").click(function(){
var dataType = $(this).attr("data-type");
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:[dataType],
fileName:"IP-Active-2",
bootstrap:false
});
$("#myexport").click();
$("caption").remove();
});
function searchList(){
var start=$("#beginDate").val();
var end=$("#endDate").val();
// IF(!CHECKDATE(START,END)){
// RETURN FALSE
// }
loading();
if(start==''||end==''||end==null||start==null){
window.location.reload();
@@ -130,26 +150,6 @@ function searchList(){
}
}
function checkDate(start,end){
if(getDate(start)-getDate(end)>0){
alert("结束时间不能小于开始时间！");
return false;
}
}
function getDate(date){
var dates = date.split("-");
var dateReturn = '';
for(var i=0; i<dates.length; i++){
dateReturn+=dates[i];
}
return dateReturn;
}
function _export(url){
window.location=url+"?beginDate="+$("#beginDateh").val()+"&endDate="+$("#endDateh").val();
}
function showIpActiveChart(rs){
var data=new Array();
var xData=new Array();
@@ -170,6 +170,16 @@ function showIpActiveChart(rs){
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
buttons: {
contextButton: {
menuItems: [
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
]
}
}
},
title: {
text: null
@@ -181,27 +191,6 @@ function showIpActiveChart(rs){
text: 'time',
align:'high',
},
/* plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
}, */
// labels:{
// formatter:function(){
// if(this.value.length>15){
// return '<span>'+this.value.substring(10,20)+"..."+'</span>'
// }else{
// return this.value
// }
// },
// }
},
yAxis: {
title: {
@@ -261,9 +250,24 @@ function showIpActiveChart(rs){
success:function (data) {
$("#tbodyData").html("");
if(data!=null&&data.length>0){
var totalc2sByte= 0;
var totals2cByte= 0;
var totalByte= 0;
var totalLink= 0;
var totalc2sPkt= 0;
var totals2cPkt= 0;
var totalpacket= 0;
$(data).each(function(i, rs) {
var byteNum=rs.s2cByteLen+rs.c2sByteLen;
var packetNum=rs.s2cPktNum+rs.c2sPktNum;
totalc2sByte=totalc2sByte+(rs.c2sByteLen);
totals2cByte=totals2cByte+(rs.s2cByteLen);
totalByte=totalByte+(byteNum);
totalLink=totalLink+(rs.linkNum);
totalc2sPkt=totalc2sPkt+(rs.c2sPktNum);
totals2cPkt=totals2cPkt+(rs.s2cPktNum);
totalpacket=totalpacket+(packetNum);
var html = "<tr>";
html+= "<td class='tc'>"+rs.ipAddr+"</td>";
html+= "<td class='tc'>"+(rs.areaId==1? "Astana":"Alamty")+"</td>";
@@ -276,6 +280,21 @@ function showIpActiveChart(rs){
html+= "<td class='tc'>"+packetNum+"</td>";
html+= "<td class='tc'>"+rs.statTime+"</td>";
html+="</tr>"
if(i==data.length-1){
html+="<tr class='tr-total hidden'>"
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
html+= "<td class='tc'>"+"--"+"</td>";
html+= "<td class='tc'>"+totalc2sByte+"</td>";
html+= "<td class='tc'>"+totals2cByte+"</td>";
html+= "<td class='tc'>"+totalByte+"</td>";
html+= "<td class='tc'>"+totalLink+"</td>";
html+= "<td class='tc'>"+totalc2sPkt+"</td>";
html+= "<td class='tc'>"+totals2cPkt+"</td>";
html+= "<td class='tc'>"+totalpacket+"</td>";
html+= "<td class='tc'>"+beginDate+"--"+ endDate +"</td>";
html+="</tr>"
}
$("#tbodyData").append(html);
})

38
src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp
View File

@@ -57,8 +57,14 @@
<div class="row">
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
</div>
<div class="row pull-right">
<button type="button" class="btn btn-default" id="export-btn"><i class="fa fa-download"> <spring:message code="export"/></i></button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <spring:message code="export"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -9px;">
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv &nbsp;&nbsp;&nbsp;</a><li>
</ul>
</div>
<br>
<br>
@@ -108,7 +114,7 @@ $(document).ready(function(){
},500000);// 五分钟调用一次
});
function searchList(){
loading();
// loading();
var start=$("#beginDate").val();
var end=$("#endDate").val();
if(start==''||end==''||end==null||start==null){
@@ -118,7 +124,7 @@ function searchList(){
}
}
function ajaxProtocolList(start,end){
loading();
// loading();
$.ajax({
url: '${ctx}/dashboard/traffic/protocolList',
type: 'get',
@@ -126,6 +132,9 @@ function ajaxProtocolList(start,end){
data:{"beginDate":start,"endDate":end},
async:false,
timeout:10000,
beforeSend:function(){
loading();
},
success:function (data){
if(data!=null&&data.length>0&&data[0].error!=null){
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
@@ -153,13 +162,14 @@ function ajaxProtocolList(start,end){
});
}
// 导出列表
$("#export-btn").click(function(){
$(".export-btn").click(function(){
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:["xlsx"],
fileName:"protocol",
formats:[dataType],
fileName:"Protocol",
bootstrap:false
});
$("#myexport").click();
@@ -200,6 +210,8 @@ function htmlData(fileDataS){
}else{
$('.none-data').hide();
$('.M-box').show();
var start=$("#beginDate").val();
var end=$("#endDate").val();
$.each(fileDataS,function (index,data){
if(data!=null){
var totalLink = data.totalLink;
@@ -226,6 +238,17 @@ function htmlData(fileDataS){
html+= "<td class='tc'>"+Math.round(data.GByte*100)/100+"</td>";
html+= "<td class='tc'>"+gbytper+"%"+"</td>";
html+="</tr>"
if(index==fileDataS.length-1){
html+="<tr class='tr-total hidden'>"
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
html+= "<td class='tc'>"+totalLink+"</td>";
html+= "<td class='tc'>" +"100%"+"</td>";
html+= "<td class='tc'>"+Math.round(totalPackets*100)/100+"</td>";
html+= "<td class='tc'>"+"100%"+"</td>";
html+= "<td class='tc'>"+Math.round(totalGByte*100)/100+"</td>";
html+= "<td class='tc'>"+start+"--"+ end +"</td>";
html+="</tr>"
}
}
$("#tableData").append(html);
});
@@ -265,6 +288,7 @@ function protocolTypeChart(rs){
});
// 创建图例
var chart = Highcharts.chart('chart',{
chart: {
plotBackgroundColor:null,
plotBorderWidth:null,

109
src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp
View File

@@ -120,59 +120,21 @@
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
<div class="row">
<form:form id="searchForm" modelAttribute="entry"
action="${ctx}/dashboard/websiteList" method="post"
class="form-search">
<input id="pageNo" name="pageNo" type="hidden"
value="${page.pageNo}" />
<input id="pageSize" name="pageSize" type="hidden"
value="${page.pageSize}" />
</form:form>
</div>
<style>
.show-two {
display: inline-block;
}
.title-num {
margin-right: 8px;
border-radius: 40px !important;
background-color: #f34b60;
color: #fff;
width: 40px;
text-align: center;
font-size: 20px;
}
.tbody .tr:active {
background: rgb(210, 232, 251, 0.8);
}
</style>
<script type="text/javascript">
$(function() {
$("#contentTable tbody tr").bind(
'click',
function() {
$("tbody tr").removeClass("active");
$(this).addClass("active");
$("span[class='title-num']").html(
'&nbsp;'
+ ($(this).index() + 1)
+ '&nbsp;')
});
});
</script>
<sys:message content="${message}" type="${messageType }" />
<div class="row">
<div class="pull-right">
<button type="button" class="btn btn-default" id="print-btn" >
<i class="fa fa-download"> <spring:message code="print" /></i>
</button>
<button type="button" class="btn btn-default" id="export-btn" >
<i class="fa fa-download"> <spring:message code="export" /></i>
</button>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <spring:message code="export"/>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -9px;">
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv &nbsp;&nbsp;&nbsp;</a><li>
</ul>
</div>
</div>
</div>
<div class="row">
@@ -235,7 +197,6 @@
}, 500000);// 五分钟调用一次
});
function searchList() {
loading();
var start = $("#beginDate").val();
var end = $("#endDate").val();
if (start == '' || end == '' || end == null || start == null) {
@@ -291,14 +252,15 @@
});
}
// 导出列表
$("#export-btn").click(function() {
getPageData(1, 999999);// 设置导出页条数
$(".export-btn").click(function(){
var dataType = $(this).attr("data-type");
getPageData(1,999999);// 设置导出页条数
var te = $("#contentTable").tableExport({
headings : true,
footers : true,
formats : [ "xlsx" ],
fileName : "Domain",
bootstrap : false
headings:true,
footers:true,
formats:[dataType],
fileName:"Domain",
bootstrap:false
});
$("#myexport").click();
$("caption").remove();
@@ -341,18 +303,45 @@
} else {
$('.none-data').hide();
$('.M-box').show();
var start=$("#beginDate").val();
var end=$("#endDate").val();
var totalunique=0;
var totalpkt=0;
var totalGbyte=0;
$.each(fileDataS, function(index, data) {
if (data != null) {
var packper=0;
var gbytper=0;
totalunique=totalunique+(data.uniqueNum);
var totalPackets= data.totalPackets;
var totalGbyte= data.totalGbyte;
if(totalPackets!=null&&totalPackets!=0 ){
packper=((data.pktCount/totalPackets)*100).toFixed(2);
}
if(totalGbyte!=null&&totalGbyte!=0 ){
gbytper=((data.Gbyte/(totalGbyte))*100).toFixed(2);
}
var html = '<tr onclick="searchByDomain(\''+data.webId+'\',\''+data.website+'\')">';
html += "<td class='tc'>" + data.website + "</td>";
html += "<td class='tc'>" + data.uniqueNum + "</td>";
html += "<td class='tc'>" + (((data.entranceId)==1) ? "Astana":"Alamty") + "</td>";
html += "<td class='tc'>" + data.pktCount + "</td>";
html += "<td class='tc'>" + data.perPackets + "</td>";
html += "<td class='tc'>" + data.Gbyte + "</td>";
html += "<td class='tc'>" + data.perGbyte + "</td>";
html += "<td class='tc'>" + Math.round(data.pktCount*100)/100 + "</td>";
html += "<td class='tc'>" + packper + " %</td>";
html += "<td class='tc'>" + Math.round(data.Gbyte*100)/100 + "</td>";
html += "<td class='tc'>" + gbytper + " %</td>";
html += "</tr>"
if(index==fileDataS.length-1){
html+="<tr class='tr-total hidden'>"
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
html+= "<td class='tc'>"+totalunique+"</td>";
html+= "<td class='tc'>" +"--"+"</td>";
html+= "<td class='tc'>"+totalPackets+"</td>";
html+= "<td class='tc'>"+"100%"+"</td>";
html+= "<td class='tc'>"+totalGbyte+"</td>";
html+= "<td class='tc'>"+"100%"+"</td>";
html+= "<td class='tc'>"+start+"--"+ end +"</td>";
html+="</tr>"
}
}
$("#tableData").append(html);
});