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

新增流量统计带宽详情页面，IPv4,6,Tcp,udp为条件统计

Browse Source
This commit is contained in:
zhanghongqing
2018-12-04 11:52:21 +08:00
parent 78fb41ef22
commit 32120c83dc
12 changed files with 254 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,17 +33,16 @@
<div class="text_1">
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-cloud-download"></i>
<a href="${ctx}/dashboard/traffic/bandwidthList"><i class="fa fa-cloud-download"></i></a>
</div>
<div class="fl_fc">
<%-- <a href="${ctx}/dashboard/bandwidthList"> 详情显示--%>
<p>
<label data-original-title="<spring:message code="bandwith"/>" class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 网络带宽 --><spring:message code="bandwith"/>
</label>
</p>
<p class="csNum">In <span class="c2sNum">0</span> | Out <span class="s2cNum">0</span> </p>
<span class="numberRun4">0</span > <span class="numberRun4-unit">bps</span>
<a href="${ctx}/dashboard/traffic/bandwidthList"><p class="csNum">In <span class="c2sNum">0</span> | Out <span class="s2cNum">0</span> </p>
<span class="numberRun4">0</span > <span class="numberRun4-unit">bps</span></a>
</div>
</div>
<div class="fr_fc">
@@ -51,7 +50,6 @@
<i class="fa fa-ban"></i>
</div>
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<p style="margin-left: 0px;width:100%">
<label data-original-title="<spring:message code="action_reject"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">

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

@@ -3,7 +3,7 @@
<html>
<head>
<title>
<spring:message code="traffic_ip_active"></spring:message>
<spring:message code="bandwith"></spring:message>
</title>
</head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css">
@@ -13,35 +13,36 @@
<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/bandwidthList'"><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/bandwidthList'"><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="Bandwidth"></spring:message>
<spring:message code="bandwith"></spring:message>
</h3>
<h5 class="page-header"></h5>
<div class="row">
<div class="col-md-3" style="padding-right: 1px; ">
<div class="row">
<!-- <div class="col-md-3" style="padding-right: 1px; ">
<div class="panel panel-default">
<div class="panel-body" style="height: 500px;">
<h5 class="ng-binding">Bandwidth Data</h5>
<div id="deviceRank" class="drank hm-scroll">
<table>
<tbody>
<!-- ngRepeat: item in rankItems -->
ngRepeat: item in rankItems
<tr class="dtr active" onClick="rankItemChanged(id, name)" style="">
<td class="dtd1"><span class="ng-binding" style="">Total</span></td>
<td class="dtd2"><span class="tz" style="width: 100%; max-width: 100px;"></span></td>
<td class="dtd3"><span class="dy ng-binding1">234567891</span></td>
</tr>
<!-- end ngRepeat: item in rankItems -->
end ngRepeat: item in rankItems
<tr class="dtr" onClick="rankItemChanged(id, name)" style="">
<td class="dtd1"><span class="ng-binding">c2s</span></td>
<td class="dtd2"><span class="tz tz-from" style="width: 86.55%; max-width: 100px;"></span></td>
<td class="dtd3"><span class="dy ng-binding2">123456789</span></td>
</tr>
<!-- end ngRepeat: item in rankItems -->
end ngRepeat: item in rankItems
<tr class="dtr" onClick="rankItemChanged(id, name)" style="">
<td class="dtd1"><span class="ng-binding">s2c</span></td>
<td class="dtd2"><span class="tz tz-to" style="width: 5.59%; max-width: 100px;"></span></td>
@@ -51,31 +52,42 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="col-md-9" style="padding-left: 8px;">
<div class="panel panel-default">
<div class="panel-body" style="height: 500px">
<h5 class="ng-binding">Bandwidth Trend</h5>
<div id="trend" style="height: 400px; position: relative;" >
<div class="col-md-12">
<select id="unitType" class="selectpicker select2 input-small">
<option value="Gbps">Gbps</option>
<option value="pps">pps</option>
<option value="linkNumber"><spring:message code="link_num"/>/S</option>
</select>
<br>
<div id="trend" style="height: 480px; position: relative;" >
<div style="position: relative;">
<div id="chart" style="width:96%;height:400px;"></div>
<div id="chart" style="width:97%;height:480px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css" type="text/css" />
<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(){
showBandwidthChart();
clickTrShowChart();
var unitType=$("#unitType").val();
changeBandwidth(unitType);
$("#unitType").on("change",function(){
changeBandwidth($("#unitType").val());
});
setInterval(function(){
changeBandwidth($("#unitType").val());
},500000);// 五分钟调用一次
});
function ajaxBandwidth(){
}
//点击列表显示统计图
function clickTrShowChart(response){
$("tbody .dtr").on("click",function(){
@@ -84,63 +96,109 @@ function clickTrShowChart(response){
showBandwidthChart();//
})
}
//点击列表显示统计图
function rankItemChanged(id,name){
// 默认显示四条线 ip46,tcp,udp
function rankItemChanged(addrType,transType){
loading();
var result=null;
$.ajax({
url:"${ctx}/#",
url:"${ctx}/dashboard/traffic/bandwidthTrans",
type:"get",
data:{"id":id},
data:{"addrType":addrType,"transType":transType},
dataType:"json",
async:true,
async:false,
timeout:10000,
success:function (data){
showBandwidthChart();
if(data!=null){
result=(data)
}
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
// warning_prompt("获取实时列表数据失败！",1500);
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
return result;
}
// 根据单位切换数据
function changeBandwidth(unitType){
var ipv4=rankItemChanged(4,null);
var ipv6=rankItemChanged(6,null);
var transTcp=rankItemChanged(null,6);
var transUdp=rankItemChanged(null,17);
var xdata=ipv4.statTime;
if(unitType=="Gbps"){
ipv4data=ipv4.gbps;
ipv6data=ipv6.gbps;
tcpdata=transTcp.gbps;
udpdata=transUdp.gbps;
}
if(unitType=="pps"){
ipv4data=ipv4.pps;
ipv6data=ipv6.pps;
tcpdata=transTcp.pps;
udpdata=transUdp.pps;
}
if(unitType=="linkNumber"){
ipv4data=ipv4.linkNum;
ipv6data=ipv6.linkNum;
tcpdata=transTcp.linkNum;
udpdata=transUdp.linkNum;
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data
},{
name: "IPv6",
data: ipv6data
},{
name: "TCP",
data: tcpdata
},{
name: "UDP",
data: udpdata
});
showBandwidthChart(unitType,xdata,series);
}
/* 网络带宽时间维度趋势图 */
function showBandwidthChart(){
function showBandwidthChart(unitType,xdata,ydata){
var chart = Highcharts.chart('chart', {
title: {
text: null
},
navigation: {
buttonOptions: {
y: -15,
x: 5
}
},
exporting: {
filename:'Bandwidth',
scale:1,
sourceWidth: 1280,
sourceHeight: 550,
},
yAxis: {
title: {
text: 'bps'
text: unitType
}
},
legend: {
enabled:false
enabled:true
},
xAxis:{
type:'datetime',
dateTimeLabelFormats:{
day:'%Y-%m-%d %h'
}
categories: xdata,
},
plotOptions: {
series: {
pointStart: Date.UTC(2018, 8, 16,1),
pointInterval: 3600*1000,
// pointIntervalUnit:'day'
}
credits:{//是否有highcharts水印
enabled:false
},
series: [{
name: 'bps',
// type:'spline',
data: [43934, 32503, 57177, 69658, 97031, 69931, 87133, 54175]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
}
}]
}
series: ydata,
});

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

@@ -134,7 +134,7 @@ function showIpActiveChart(rs){
},
yAxis: {
title: {
text: 'linkNumber'
text: 'bytes'
}
},
credits:{//是否有highcharts水印
@@ -150,7 +150,7 @@ function showIpActiveChart(rs){
}
//活跃IP一小时间隔五分钟统计
function ipActiveMinuteList(){
loading();
$.ajax({
url: '${ctx}/dashboard/ipActiveMinuteList',
type : "get" ,
@@ -158,10 +158,13 @@ function showIpActiveChart(rs){
cache:false,async:true,
success:function (rs) {
showIpActiveChart(rs);
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
// warning_prompt("获取实时列表数据失败！",1500);
}
},
});
}

57
src/main/webapp/WEB-INF/views/report/list.jsp
View File

@@ -29,8 +29,8 @@ $(document).ready(function() {
$("#searchForm")[0].reset();
});
if(!"${bean.reportBusinessType}"){//default
$("#reportBusinessType").val("label_report");
ajaxReport("/report/ajaxNtcTagReport","#label");
$("#reportBusinessType").val("lwhh_report");
ajaxReport("/report/ajaxNtcLwhhReport","#lwhh");
}else if("${bean.reportBusinessType}"=="label_report"){
ajaxReport("/report/ajaxNtcTagReport","#label");
}else if("${bean.reportBusinessType}"=="lwhh_report"){
@@ -68,7 +68,7 @@ $(document).ready(function() {
}
}
});
ajaxServiceLogTotal();
//ajaxServiceLogTotal();
$("#export-btn").click(function(){
totaltb(1,-1);
var te = $(".in table").tableExport({
@@ -166,8 +166,8 @@ var ajaxServiceLogTotal=function(){
data:{
"services":services.join(","),
"functionId":$("#functionId").val(),
"reportType":$('[name="reportType"]').val(),
"reportTime":$('[name="reportTime"]').val()
"reportType":1/* $('[name="reportType"]').val() ,
"reportTime":$('[name="reportTime"]').val()*/
},
dataType:'json',
async:true,
@@ -328,11 +328,11 @@ function customColumnClick(){
var reportBusinessType=$("#reportBusinessType").val()
var tableId="tagTable";
if(reportBusinessType=="label_report"){
tableId="tagTable";
}else if(reportBusinessType=="lwhh_report"){
if(reportBusinessType=="lwhh_report"){
tableId="lwhhTable";
}else if(reportBusinessType=="src_ip_report"){
}else if(reportBusinessType=="label_report"){
tableId="tagTable";
} else if(reportBusinessType=="src_ip_report"){
tableId="contentTable1";
}else if(reportBusinessType=="attr_type_report"){
tableId="attrTypeTable";
@@ -373,22 +373,23 @@ white-space:nowrap;
</head>
<body>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<%-- <c:forEach items="${fns:getDictList('SERVICE_ACTION')}" var="action"> --%>
<%--
<div class="theme-panel hidden-xs hidden-sm">
<c:forEach items="${serviceList}" var="service" varStatus="status">
<%-- <c:if test="${service.functionId eq bean.functionId and action.itemCode eq service.action}"> --%>
<c:if test="${(service.action ne 128) && (service.action ne 32) && (service.action ne 96) && (service.serviceId ne 37) && (service.serviceId ne 149)}" >
<div data-service="${service.serviceId}" class="service btn">
<spring:message code="${service.serviceName}"/>
<%-- <spring:message code="log_total"/> --%>
<spring:message code="total"/>
<c:forEach items="${fns:getDictList('SERVICE_ACTION')}" var="action">
<c:if test="${service.functionId eq bean.functionId and action.itemCode eq service.action}">
<spring:message code="${action.itemValue}"/>
</c:if>
</c:forEach>
<span>0</span>
</div>
</c:if>
<%-- </c:if> --%>
</c:forEach>
<%-- </c:forEach> --%>
</div>
--%>
<h3 class="page-title">
<spring:message code="${bean.cfgName}"/>
<small><spring:message code="report_list"/></small>
@@ -486,8 +487,13 @@ white-space:nowrap;
<sys:message content="${message}"/>
<br>
<ul class="nav nav-tabs nav-justified" >
<li
<c:if test="${bean.reportBusinessType eq 'lwhh_report' or bean.reportBusinessType ==null}">
class="active"
</c:if>
><a class="lireport" data-bussiness="lwhh_report" data-toggle="tab" href="#lwhh" title="<spring:message code="lwhh_report"/>" ><spring:message code="lwhh_report"/></a></li>
<li
<c:if test="${bean.reportBusinessType eq 'label_report' or bean.reportBusinessType ==null}">
<c:if test="${bean.reportBusinessType eq 'label_report'}">
class="active"
</c:if>
><a class="lireport" data-bussiness="label_report" data-toggle="tab" href="#label" title="<spring:message code="label_report"/>"><spring:message code="label_report"/></a></li>
@@ -496,11 +502,6 @@ white-space:nowrap;
class="active"
</c:if>
><a class="lireport" data-bussiness="attr_type_report" data-toggle="tab" href="#attrType" title="<spring:message code="attr_type_report"/>" ><spring:message code="attr_type_report"/></a></li>
<li
<c:if test="${bean.reportBusinessType eq 'lwhh_report'}">
class="active"
</c:if>
><a class="lireport" data-bussiness="lwhh_report" data-toggle="tab" href="#lwhh" title="<spring:message code="lwhh_report"/>" ><spring:message code="lwhh_report"/></a></li>
<li
<c:if test="${bean.reportBusinessType eq 'src_ip_report'}">
class="active"
@@ -518,18 +519,18 @@ white-space:nowrap;
><a class="lireport" data-bussiness="isp_report" data-toggle="tab" href="#entranceId" title="<spring:message code="isp_report"/>"><spring:message code="isp_report"/></a></li>
</ul>
<div class="tab-content table-responsive">
<div id="lwhh" class="tab-pane fade
<c:if test="${bean.reportBusinessType eq 'lwhh_report' or bean.reportBusinessType ==null}">
in active
</c:if>"></div>
<div id="label" class="tab-pane fade
<c:if test="${bean.reportBusinessType eq 'label_report' or bean.reportBusinessType ==null}">
<c:if test="${bean.reportBusinessType eq 'label_report'}">
in active
</c:if>"></div>
<div id="attrType" class="tab-pane fade
<c:if test="${bean.reportBusinessType eq 'attr_type_report'}">
in active
</c:if>"></div>
<div id="lwhh" class="tab-pane fade
<c:if test="${bean.reportBusinessType eq 'lwhh_report'}">
in active
</c:if>"></div>
<div id="srcIp" class="tab-pane fade
<c:if test="${bean.reportBusinessType eq 'src_ip_report'}">
in active

12
src/main/webapp/static/pages/css/data_text.css
View File

@@ -42,6 +42,18 @@ p{
position: relative;
margin-top: 15px;
}
.data_content .data_info .fr_fc .fl_visual a:link {
color: #C5C5C5 !important;
}
.data_content .data_info .fr_fc .fl_visual a:visited {
color: #C5C5C5 !important;
}
.data_content .data_info .fr_fc .fl_visual a:hover {
color: #716D6D !important;
}
.data_content .data_info .fr_fc .fl_visual a:active {
color: #716D6D !important;
}
.data_content .data_info .fr_fc .fl_fc{
width: 70%;
height: 110px;

22
src/main/webapp/static/pages/scripts/echart.js
View File

@@ -152,7 +152,7 @@
series: [{
type: 'pie',
innerSize: '70%',//圆环的大小
name: 'count',
name: 'bytes',
data: data
}],
// drilldown:{
@@ -285,7 +285,7 @@
yAxis: {
min: 0,
title: {
text: 'Link Number',
text: 'bytes',
align:'high',
style: {//设置字体颜色
color: '#fff',
@@ -327,7 +327,7 @@
enabled:false
},
series: [{
name: 'Link Number',
name: 'bytes',
colorByPoint: true,
data: data
}],
@@ -447,7 +447,7 @@
yAxis: {
min: 0,
title: {
text: 'Link Number',
text: 'bytes',
align:'high',
style: {//设置字体颜色
color: '#fff',
@@ -473,7 +473,7 @@
},
plotOptions: {
column: {
dataLabels: {//数字显示
dataLabels: {// 柱形图上的数字显示
enabled: true,
allowOverlap: true, // 允许数据标签重叠
style: {//设置字体颜色
@@ -481,13 +481,15 @@
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
// format:"{point.y:.2f}",
},
showInLegend:false
},
},
series: [{
name: 'count',
name: 'bytes',
colorByPoint: true,
data: data
}],
@@ -629,7 +631,7 @@ function echart_2(rs){
useHTML: true
},
series: [{
name: 'count',
name: 'bytes',
colorByPoint: true,
data: data
}],
@@ -773,7 +775,7 @@ function echart_5(rs){
useHTML: true
},
series: [{
name: 'count',
name: 'bytes',
colorByPoint: true,
data: data
}],
@@ -911,7 +913,7 @@ function echart_4(rs){
useHTML: true
},
series: [{
name: 'count',
name: 'bytes',
colorByPoint: true,
data: data,
}],
@@ -1049,7 +1051,7 @@ function echart_6(rs){
useHTML: true
},
series: [{
name: 'count',
name: 'bytes',
colorByPoint: true,
data: data,
}],

2
src/main/webapp/static/pages/scripts/pageLogs.js
View File

@@ -1,6 +1,6 @@
$(document).ready(function() {
// 隱藏日誌詳情
$("table.logTb .icon-book-open").hide();
// $("table.logTb .icon-book-open").hide();
// 界面鼠标悬停事件
/* $("table.logTb").find("td").not(":has(a)").bind("mouseover", function(){
var str = $(this).html(this.innerHTML.trim()).text();