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:
zhanghongqing
2018-12-05 16:42:43 +08:00
parent 7ca1f7c7a2
commit 0fd791a0e3
9 changed files with 727 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp
View File

@@ -148,7 +148,7 @@
<div class="main_center fl">
<div class="center_text">
<div class="main_title">
<spring:message code="traffic_protocol_chart"/>&nbsp;&nbsp;<%-- <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-list-ul"></i></a> --%>
<spring:message code="traffic_protocol_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a>
<a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
@@ -556,12 +556,12 @@ function protocolList(){
echart_1(rs);
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//活跃IP统计
function ipActiveList(){
@@ -579,12 +579,12 @@ function ipActiveList(){
echart_main(rs);
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//活跃端口统计
function portActiveList(){
@@ -638,12 +638,12 @@ function portActiveList(){
}
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//app应用类型统计
@@ -662,12 +662,12 @@ function appTypeList(){
echart_3(rs);
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//获取终端用户-操作系统列表 左下
function systemList(){
@@ -732,12 +732,12 @@ function systemList(){
echart_2(rs.reverse());
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
// 点击操作系统列表右侧显示 浏览器图
function osClick(osType,obj){
@@ -755,12 +755,12 @@ function osClick(osType,obj){
success:function (rs) {
echart_5(rs.reverse());
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//点击浏览器列表右侧显示 操作系统图
function bsClick(bsType,obj){
@@ -776,12 +776,12 @@ function bsClick(bsType,obj){
success:function (rs) {
echart_2(rs.reverse());
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
@@ -794,7 +794,6 @@ function browserList() {
dataType:"json",
cache:false,async:true,timeout:10000,//超时时间设置，查询接口时间过长超时
beforeSend: function () {
var msg = "OnLoading...";
var trLen = $("#tbodyData1 tr").length;
if(trLen<=0) {
@@ -802,14 +801,11 @@ function browserList() {
}else {
$("#tbodyData1").html("")
}
var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1' colspan='3' align='center' style='color:#fff'>"+msg+"</td>";
$("#tbodyData1").prepend(tr);
},
success:function (rs) {
$("#tbodyData1").html("");
rs.reverse();
var n=rs.length;
@@ -825,7 +821,6 @@ function browserList() {
bs=bs.substring(0,18);
}
}
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:bsClick(\""+itemObj.bsType+"\",this);return false;'>";
@@ -847,13 +842,12 @@ function browserList() {
//终端图-浏览器
echart_5(rs.reverse());
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//获取http网站table列表
function websiteList() {
@@ -913,13 +907,12 @@ function websiteList() {
//网站统计图
echart_4(rs.reverse());
}
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//点击http网站列表-显示域名图
function webClick(websiteServiceId,obj){
@@ -927,7 +920,6 @@ function webClick(websiteServiceId,obj){
$("#tbodyData2 tr").removeClass("activeColor");
loading();
$(obj).addClass("activeColor");
$.ajax({
url: '${ctx}/dashboard/webTypeChart',
type : "get" ,
@@ -936,13 +928,12 @@ function webClick(websiteServiceId,obj){
cache:false,async:true,timeout:10000,//超时时间设置，查询接口时间过长超时
success:function (rs) {
echart_6(rs);
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
//网站主题
function topicAndDomainList(){
@@ -955,18 +946,14 @@ function topicAndDomainList(){
success:function (rs) {
//主题域名流量统计图
echart_topic_domain(rs);
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
closeTip();
}
</script>
</body>
</html>

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

@@ -4,194 +4,294 @@
<head>
<title>协议类型</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
<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>
</head>
<body>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/traffic/protocolTypeList'"><spring:message code="refresh"/></button>
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><spring:message code="back"/></button>
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/traffic/protocolTypeList'"><i class="fa fa-refresh"></i></button>
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><i class="fa fa-history"></i></button>
</div>
<h3 class="page-title">
<spring:message code="protocol_type"></spring:message>
</h3>
<h5 class="page-header"></h5>
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
<%-- <div class="row" >
<form:form id="searchForm" modelAttribute="entry" action="${ctx}/dashboard/traffic/protocolTypeList" 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> --%>
<!-- =============================== -->
<div class="box-1 mt20">
<div class="clearfix">
<div class="row">
<div class="col-md-6">
<table id="contentTable" class="table table-hover table-active table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th class="tl" width="100">协议名称</th>
<th class="tl" width="100">总量</th>
<th class="tl" width="80">比例</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tc">TCP</td>
<td class="tc">1</td>
<td class="tc">
25.0%
</td>
<td>
<div class="c-progress c-progress-inline-2">
<div class="c-progress-bar" style="width:25%"></div>
</div>
</td>
</tr>
<tr>
<td class="tc">HTTP</td>
<td class="tc">1</td>
<td class="tc">
45.0%
</td>
<td>
<div class="c-progress c-progress-inline-2">
<div class="c-progress-bar" style="width:45%"></div>
</div>
</td>
</tr>
<tr>
<td class="tc">UDP</td>
<td class="tc">1</td>
<td class="tc">
25.0%
</td>
<td>
<div class="c-progress c-progress-inline-2">
<div class="c-progress-bar" style="width:25%"></div>
</div>
</td>
</tr>
<tr>
<td class="tc">其他</td>
<td class="tc">0</td>
<td class="tc">
60.0%
</td>
<td>
<div class="c-progress c-progress-inline-2">
<div class="c-progress-bar" style="width:62%"></div>
</div>
</td>
</tr>
</tbody>
</table>
<%-- <div class="page">${page}</div> --%>
</div>
<div class="col-md-6">
<div id="chart" style="height: 430px; -moz-user-select: none; position: relative; background: transparent none repeat scroll 0% 0%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
<br>
<br>
<div class="row">
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th class="tl"><spring:message code="protocol_name"/></th>
<th class="tl"><spring:message code="link_num"/></th>
<th class="tl"><spring:message code="percentage"/> (<spring:message code="link_num"/>)</th>
<th class="tl"><spring:message code="packets"/></th>
<th class="tl"><spring:message code="percentage"/> (<spring:message code="packets"/>)</th>
<th class="tl"><spring:message code="Gbyte"/></th>
<th class="tl"><spring:message code="percentage"/> (<spring:message code="Gbyte"/>)</th>
</tr>
</thead>
<tbody id="tableData"></tbody>
</table>
<div id="page"><div class="M-box" style="float: right"></div></div>
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<spring:message code="noneData"/></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 type="text/javascript">
$(document).ready(function(){
var chart = Highcharts.chart('chart', {
title: {
text: null
},
yAxis: {
title: {
text: 'bps'
}
},
legend: {
enabled:false
},
xAxis:{
type:'datetime',
dateTimeLabelFormats:{
day:'%Y-%m-%d %h'
}
},
plotOptions: {
series: {
pointStart: Date.UTC(2018, 8, 16,1),
pointInterval: 3600*1000,
// pointIntervalUnit:'day'
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
ajaxProtocolList();
});
function ajaxProtocolList(){
loading();
$.ajax({
url: '${ctx}/dashboard/traffic/protocolList',
type: 'get',
dataType: "json",
async:false,
timeout:10000,
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'/>");
return;
}
fileData =data;
getPageData(1,10);//初始化第一页的数据
pageJuan(10);//初始化分页
protocolTypeChart(data);// 初始化图
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
}
// 导出列表
$("#export-btn").click(function(){
getPageData(1,999999);// 设置导出页条数
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:["xlsx"],
fileName:"protocol",
bootstrap:false
});
$("#myexport").click();
$("caption").remove();
getPageData(1,10);
});
/**
* 获取本页数据
* @param currentPage 当前页数 【初次查数据，默认第1页】
*/
var fileData;
function getPageData(currentPage,pageNumber){
if (typeof (fileData) != "undefined" && fileData != null) {
//计算每页数据起始和终止数据编号
// var pageNumber = 10;
var maxLength = currentPage * pageNumber - 1;
var minLength = currentPage * pageNumber - pageNumber;
var pageData = [];
for (var i = minLength; i < fileData.length; i++) {
if (maxLength < i) {
break;
} else {
pageData.push(fileData[i]);
}
}
htmlData(pageData);
}else{
//把空数据传到页面中去
htmlData(fileData);
}
}
// 处理接口数据
function htmlData(fileDataS){
$("#tableData").html("");
if(fileDataS == null){
$(".none-data").show();
$('.M-box').hide();
}else{
$('.none-data').hide();
$('.M-box').show();
$.each(fileDataS,function (index,data){
if(data!=null){
var totalLink = data.totalLink;
var totalPackets= data.totalPackets;
var totalGByte= data.totalGByte;
var linkper =0;
var packper=0;
var gbytper=0;
if(totalLink!=null&&totalLink!=0 ){
linkper=((data.linkNum/totalLink)*100).toFixed(2);
}
if(totalPackets!=null&&totalPackets!=0 ){
packper=((data.packets/totalPackets)*100).toFixed(2);
}
if(totalGByte!=null&&totalGByte!=0 ){
gbytper=((data.GByte/totalGByte)*100).toFixed(2);
}
var html = "<tr>";
html+= "<td class='tc'>"+data.protocolType+"</td>";
html+= "<td class='tc'>"+data.linkNum+"</td>";
html+= "<td class='tc'>"+linkper+"%"+"</td>";
html+= "<td class='tc'>"+data.packets+"</td>";
html+= "<td class='tc'>"+packper+"%"+"</td>";
html+= "<td class='tc'>"+data.GByte+"</td>";
html+= "<td class='tc'>"+gbytper+"%"+"</td>";
html+="</tr>"
}
$("#tableData").append(html);
});
}
}
/**
* 分页控件处理
*/
function pageJuan(showData) {
if (typeof (fileData) != "undefined" && fileData != null) {
var totalData = fileData.length;
// var showData = 10;
if(showData > totalData){
showData = totalData;
}
$('.M-box').pagination({
totalData: totalData,
showData: showData,
coping: true,
callback: function (index) {
//改变显示开始和结束数据编号
getPageData(index.getCurrent(),showData);
}
});
}
}
// 比例协议统计图
function protocolTypeChart(rs){
//终端用户 分操作系统与浏览器
var data=new Array();
$(rs).each(function(i, d) {
data.push({
name: d.protocolType,
y: parseInt(d.GByte),
});
});
// 创建图例
var chart = Highcharts.chart('chart',{
chart: {
plotBackgroundColor:null,
plotBorderWidth:null,
plotShadow:false,
type: 'pie'
},
navigation: {
buttonOptions: {
x:-25,
}
},
exporting: {
allowHTML:true,
filename:"Protocol",
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
},
noData:{
style: {//设置字体颜色
color: '#000',
},
},
// legend:{// 底部平鋪图例
// width:1280,
// x:40,
// itemWidth:100,
// itemDistance:2,
// itemHoverStyle:{
// color:'#61D2F7',
// },
// },
legend: {
// layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
width:380,
itemWidth:100,
itemDistance:2,
itemHoverStyle:{
color:'#61D2F7',
},
},
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: {
text: null,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
softConnector: true, // 是否使用曲线
formatter: function () {
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(1)+' %' : null;
},
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
},
pie:{
allowPointSelect: true,
showInLegend: true,
point: {
events: {
mouseOver: function(e) {
this.slice();
},
// 鼠标移出时，收回突出显示
mouseOut: function() {
this.slice();
},
// 默认是点击突出，这里屏蔽掉
click: function() {
return false;
}
},
},
}
},
credits:{//是否有highcharts水印
enabled:false
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
name: "Protocol",
colorByPoint: true,
data: data
}],
});
}
</script>
<script type="text/html" id="tpl-searchEngines">
{{each list as item}}
<tr>
<td>
<div class="badge-square" style="background-color:{{item.color}}"></div>{{item.name}}</td>
<td class="tc">{{item.value}}</td>
<td class="tc">
{{(item.rate*100).toFixed(1)}}%
</td>
<td>
<div class="c-progress c-progress-inline-2">
<div class="c-progress-bar" style="width:{{item.rate*100}}%"></div>
</div>
</td>
</tr>
{{/each}}
</script>
<script>
var chartData = {"code":200,"msg":null,"data":{"searchEngineTotalIp":4,"totalIp":63,"rate":0.0635,"list":[{"name":"TCP","value":1,"rate":0.25,"totalIp":4},{"name":"UDP","value":1,"rate":0.25,"totalIp":4},{"name":"DNS","value":1,"rate":0.25,"totalIp":4},{"name":"FTP","value":0,"rate":0,"totalIp":4},{"name":"其他","value":0,"rate":0,"totalIp":4}]}}
</script>
<%-- <script src="${pageContext.request.contextPath}/static/pages/scripts/contentAnalysis.js"></script> --%>
</body>
</html>