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

流量统计新增app应用详情，阻断监测动作趋势统计

Browse Source
This commit is contained in:
zhanghongqing
2018-12-06 17:27:04 +08:00
parent d3bbf10f72
commit 68a28366a0
12 changed files with 653 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/main/java/com/nis/util/Constants.java
View File

@@ -699,7 +699,8 @@ public final class Constants {
public static final String NTC_RADIUS_REPORT=Configurations.getStringProperty("ntcRadiusReport","ntcRadiusReport");
public static final String TRAFFIC_BANDWIDTH_TRANS=Configurations.getStringProperty("trafficBandwidthTrans","trafficBandwidthTrans");
public static final String TRAFFIC_PROTOCOL_LIST=Configurations.getStringProperty("trafficProtocolList","trafficProtocolList");
public static final String TRAFFIC_APP_LIST=Configurations.getStringProperty("trafficAppList","trafficAppList");
public static final String NTC_ACTION_ENTRANCE_REPORT=Configurations.getStringProperty("ntcActionEntranceReport","ntcActionEntranceReport");
/**
* httpclient 工具超时时间设置
*/

85
src/main/java/com/nis/web/controller/dashboard/TrafficStatisticsInfoController.java
View File

@@ -106,6 +106,37 @@ public class TrafficStatisticsInfoController extends BaseController {
public String bandwidthList( HttpServletRequest request, HttpServletResponse response, Model model){
return "/dashboard/trafficBandwidthList";
}
/**
* 流量统计滚动动作查看详情页面
*/
@RequestMapping(value={"trafficBlockList","trafficMonitorList"})
public String serviceBlockList(@RequestParam("searchAction")String searchAction,HttpServletRequest request, HttpServletResponse response, Model model){
model.addAttribute("searchAction", searchAction);
return "/dashboard/trafficActionTransList";
}
/**
* 根据动作查询entrance趋势 间隔5分钟数据
*/
@RequestMapping(value="actionEntranceTrans")
@ResponseBody
public List actionTrans(@RequestParam("searchAction")String searchAction){
Map<String, Object> fromJsonList = new HashMap<String, Object>();
List resultList = new ArrayList();
String url = Constants.DASHBOARD_URL+Constants.NTC_ACTION_ENTRANCE_REPORT;
url=url+"?searchAction="+searchAction;
try {
String string = HttpClientUtil.get(url);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
logger.info(searchAction+"动作间隔5分钟数据"+fromJsonList);
resultList = (ArrayList) fromJsonList.get("data");
} catch (Exception e) {
e.printStackTrace();
logger.error(searchAction+"动作详情数据获取错误"+e);
resultList.add(Maps.newHashMap("error","request_service_failed"));
}
return resultList;
}
/**
* 根据ip46,协议tcp,udp查询带宽 间隔5分钟数据
*/
@@ -190,5 +221,57 @@ public class TrafficStatisticsInfoController extends BaseController {
}
return list;
}
/**
* App类型详细列表
*/
@RequestMapping(value="appTypeList")
public String appTypeList(){
return "/dashboard/trafficAppTypeList";
}
/**
* 协议详情统计图跟表
*/
@RequestMapping(value="appList")
@ResponseBody
public List appList(){
Map<String, Object> fromJsonList = new HashMap<String, Object>();
List list = new ArrayList();
String url = Constants.DASHBOARD_URL+Constants.TRAFFIC_APP_LIST;
try {
String string = HttpClientUtil.get(url);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
logger.info("app详情5分钟数据"+fromJsonList);
list = (ArrayList) fromJsonList.get("data");
Long totalLink=0l;
Long totalPackets=0l;
Double totalGByte=0d;
DecimalFormat lf = new DecimalFormat("0");
DecimalFormat df = new DecimalFormat("0.00000000");
if(!StringUtil.isEmpty(list)){
for (Object object : list) {
Map m=(Map) object;
totalGByte+=Double.parseDouble(m.get("GByte").toString());
// String linkNum = df.format(m.get("linkNum"));
m.put("GByte", df.format(m.get("GByte")));
m.put("packets", lf.format(m.get("packets")));
m.put("linkNum", lf.format(m.get("linkNum")));
totalLink+=Long.parseLong( m.get("linkNum").toString());
totalPackets+=Long.parseLong(m.get("packets").toString());
}
for (Object object : list) {
Map m=(Map) object;
m.put("totalLink", totalLink);
m.put("totalPackets", totalPackets);
m.put("totalGByte", totalGByte);
}
}
} catch (Exception e) {
e.printStackTrace();
logger.error("app详情数据获取错误"+e);
list.add(Maps.newHashMap("error","request_service_failed"));
}
return list;
}
}

3
src/main/resources/messages/message_en.properties
View File

@@ -1346,4 +1346,5 @@ policy_sipv4_user=Three tier access to IP(IPv4)
policy_sipv6_user=Three tier access to IP(IPv6)
creat_time=Creat Time
close_time=Close Time
nat_ip=Multiplexed IP Address
nat_ip=Multiplexed IP Address
traffic=Traffic

3
src/main/resources/messages/message_ru.properties
View File

@@ -1347,4 +1347,5 @@ ip_check=\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043F\u0440\u0430\u0432\u04
user_type=User Type
policy_vpn_user=VPN access user name
policy_sipv4_user=Three tier access to IP(IPv4)
policy_sipv6_user=Three tier access to IP(IPv6)
policy_sipv6_user=Three tier access to IP(IPv6)
traffic=Traffic

3
src/main/resources/messages/message_zh_CN.properties
View File

@@ -1344,4 +1344,5 @@ policy_sipv4_user=\u4E09\u5C42\u63A5\u5165\u6E90IP(IPv4)
policy_sipv6_user=\u4E09\u5C42\u63A5\u5165\u6E90IP(IPv6)
creat_time=\u94FE\u63A5\u5EFA\u7ACB\u65F6\u95F4
close_time=\u94FE\u63A5\u7ED3\u675F\u65F6\u95F4
nat_ip=\u590d\u7528\u7684IP\u5730\u5740
nat_ip=\u590D\u7528\u7684IP\u5730\u5740
traffic=Traffic

6
src/main/resources/nis.properties
View File

@@ -572,4 +572,8 @@ allIpGet=AllIpGet
trafficBandwidthTrans=trafficBandwidthTrans
trafficProtocolList=trafficProtocolList
irSnatLog=irSnatLogs
irDnatLog=irDnatLogs
irDnatLog=irDnatLogs
trafficBandwidthTrans=trafficBandwidthTrans
trafficProtocolList=trafficProtocolList
trafficAppList=trafficAppList
ntcActionEntranceReport=ntcActionEntranceReport

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

@@ -37,8 +37,8 @@
</div>
<div class="fl_fc">
<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 data-original-title="<spring:message code="traffic"/>" class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 网络带宽 --><spring:message code="traffic"/>
</label>
</p>
<a href="${ctx}/dashboard/traffic/bandwidthList"><p class="csNum">In <span class="c2sNum">0</span> | Out <span class="s2cNum">0</span> </p>
@@ -47,7 +47,7 @@
</div>
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-ban"></i>
<a href="${ctx}/dashboard/traffic/trafficBlockList?searchAction=block"><i class="fa fa-ban"></i></a>
</div>
<div class="fl_fc">
<p style="margin-left: 0px;width:100%">
@@ -56,7 +56,7 @@
<!-- 阻断链接数 --><spring:message code="action_reject"/>
</label>
</p>
<p class="numberRun1">0</p>
<a href="${ctx}/dashboard/traffic/trafficBlockList?searchAction=block"><p class="numberRun1">0</p></a>
</div>
</div>
</div>
@@ -65,15 +65,13 @@
<div class="text_2">
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-eye"> </i>
<a href="${ctx}/dashboard/traffic/trafficBlockList?searchAction=monitor"><i class="fa fa-eye"> </i></a>
</div>
<!-- <i class="fa fa-bar-chart"></i> -->
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<p data-original-title="<spring:message code="action_monit"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 监测链接数 --><spring:message code="action_monit"/></p>
<p class="numberRun2">0</p>
<a href="${ctx}/dashboard/traffic/trafficBlockList?searchAction=monitor"><p class="numberRun2">0</p></a>
</div>
</div>
<div class="fr_fc">
@@ -232,7 +230,7 @@
<div class="main_left1 fl">
<div class="left_1">
<div class="main_title1">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a>
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>

110
src/main/webapp/WEB-INF/views/dashboard/trafficActionTransList.jsp Normal file
View File

@@ -0,0 +1,110 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>
<spring:message code="traffic_ip_active"></spring:message>
</title>
</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.reload()"><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="${searchAction}"></spring:message>
</h3>
<div id="chart" style="width:97%;height:550px;"></div>
<input id="searchAction" name="searchAction" type="hidden" value="${searchAction}"/>
</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/themes/grid.js"></script> --%>
<script type="text/javascript">
$(document).ready(function(){
actionTransAjax($("#searchAction").val());
});
// 局点信息
function showActionTransChart(rs){
var data=new Array();
var xData=new Array();
xData=rs[0].statTime;
var series=new Array();
$(rs).each(function(i, d) {
var entrance="";
if(d!=null&&d.entranceId==1){
entrance="Astana";
}
if(d!=null&&d.entranceId==2){
entrance="Alamty";
}
series.push({
name: entrance,
data: d.count
});
})
var chart = Highcharts.chart('chart', {
exporting: {
filename:'Action-Trans',
scale:1,
sourceWidth: 1280,
sourceHeight: 500,
},
title: {
text: null
},
xAxis: {
type:'category',
categories: xData,
title: {
text: 'time',
align:'high',
},
},
yAxis: {
title: {
text: null
}
},
credits:{//是否有highcharts水印
enabled:false
},
// legend: {
// layout: 'vertical',
// align: 'right',
// verticalAlign: 'middle'
// },
series: series,
});
}
// 动作一小时，间隔五分钟统计数据
function actionTransAjax(searchAction){
loading();
$.ajax({
url: "${ctx}/dashboard/traffic/actionEntranceTrans?searchAction="+searchAction,
type : "get" ,
dataType:"json",
cache:false,
async:true,
success:function (rs) {
showActionTransChart(rs);
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
},
});
}
</script>
</body>
</html>

297
src/main/webapp/WEB-INF/views/dashboard/trafficAppTypeList.jsp Normal file
View File

@@ -0,0 +1,297 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>app类型</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/appTypeList'"><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="App"></spring:message>
</h3>
<h5 class="page-header"></h5>
<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="app"/></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(){
ajaxProtocolList();
});
function ajaxProtocolList(){
loading();
$.ajax({
url: '${ctx}/dashboard/traffic/appList',
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:"App",
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.appName+"</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.appName,
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:"App",
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: "App",
colorByPoint: true,
data: data
}],
});
}
</script>
</body>
</html>

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

@@ -17,7 +17,7 @@
<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="bandwith"></spring:message>
<spring:message code="traffic"></spring:message>
</h3>
<h5 class="page-header"></h5>
@@ -115,7 +115,6 @@ function rankItemChanged(addrType,transType){
},
error: function(data, textStatus, errorThrown){
closeTip();
// warning_prompt("获取实时列表数据失败！",1500);
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();

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

@@ -127,7 +127,7 @@ p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: -3px;
margin: -2px;
margin-left: -20px;
}
.data_content .data_info>div.info_1 p:nth-child(2){
@@ -186,6 +186,14 @@ p{
margin-top: 1px;
margin-left: 0px;
}
.data_content .data_info>div.info_1 .fl_fc .numberRun1{
width:100%;
font-weight: 600;
font-size: 16px;
color:#288dce;
margin-top: 33px;
margin-left: 0px;
}
.data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{
font-weight: 500;
font-size: 16px;

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

@@ -4,13 +4,17 @@
function echart_1(rs) {
var data=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
var pktNum=new Array();
var byteLen=new Array();
//协议图-操作系统
data.push({
name: d.protoType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.protoType,
});
@@ -69,12 +73,14 @@
title: {
text: null
},
tool: {
/*tool: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
shared: true,
useHTML: true
// headerFormat: '<span style="font-size:10px">{point.key}- <b>{point.percentage:.1f}%</span>'+unit,
pointFormat: '{series.name} {point.y}<b>'+unit,
},*/
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name} <br>{point.y}</b> '+unit
},
credits:{//是否有highcharts水印
enabled:false
@@ -152,7 +158,7 @@
series: [{
type: 'pie',
innerSize: '70%',//圆环的大小
name: 'bytes',
name: ' ',
data: data
}],
// drilldown:{
@@ -188,21 +194,25 @@
var data=new Array();
var xData=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.linkNum;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
/*var pktNum=new Array();
var byteLen=new Array();*/
xData.push(d.ipAddr);
//活跃IP图
data.push({
name: d.ipAddr,
y: parseInt(d.linkNum),
y: parseFloat(inoctetsNum),
// drilldown: d.ipAddr,
});
pktNum[0]="pktNum";
/*pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
drillData.push({
byteLen[1]=parseInt(d.byteLen);*/
/*drillData.push({
name: d.ipAddr,
id: d.ipAddr,
type:'pie',
@@ -211,7 +221,7 @@
pointFormat: '{series.name}: {point.y}<b> ({point.percentage:.1f}%)'
},
data: [pktNum,byteLen],
});
});*/
});
var chart = Highcharts.chart('chart_main', {
chart: {
@@ -285,7 +295,7 @@
yAxis: {
min: 0,
title: {
text: 'bytes',
text: unit,
align:'high',
style: {//设置字体颜色
color: '#fff',
@@ -304,9 +314,9 @@
},
tooltip: {
// valueSuffix: ' 单位'
},
headerFormat: '{series.name}<br>',
pointFormat: '{point.name} <br>{point.y}</b> '+unit
},
plotOptions: {
bar: {
dataLabels: {
@@ -327,7 +337,7 @@
enabled:false
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data
}],
@@ -350,23 +360,59 @@
// }
});
}
function changeNum(inoctetsNum){
// 变化单位
var inoctetsNumK=inoctetsNum/1024;
var inoctetsNumM=inoctetsNumK/1024;
var inoctetsNumG=inoctetsNumM/1024;
if(inoctetsNumK>1){
inoctetsNum=inoctetsNumK;
};
if(inoctetsNumM>1){
inoctetsNum=inoctetsNumM;
};
if(inoctetsNumG>1){
inoctetsNum=inoctetsNumG;
};
inoctetsNum=inoctetsNum.toFixed(1)
return inoctetsNum;
}
function changeUnit(inoctetsNum){
// 变化单位
var unit="bytes";
var inoctetsNumK=inoctetsNum/1024;
var inoctetsNumM=inoctetsNumK/1024;
var inoctetsNumG=inoctetsNumM/1024;
if(inoctetsNumK>1){
unit="KB";
};
if(inoctetsNumM>1){
unit="MB";
};
if(inoctetsNumG>1){
unit="GB";
};
return unit
}
//app应用类型统计 echart_3
function echart_3(rs) {
var data=new Array();
var xData=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
var pktNum=new Array();
var byteLen=new Array();
xData.push(d.appType);
//活跃IP图
data.push({
name: d.appType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.appType,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -374,7 +420,7 @@
name: d.appType,
id: d.appType,
data: [pktNum,byteLen],
});
});*/
});
var chart = Highcharts.chart('chart_3',{
chart: {
@@ -437,7 +483,7 @@
yAxis: {
min: 0,
title: {
text: 'bytes',
text: unit,
align:'high',
style: {//设置字体颜色
color: '#fff',
@@ -457,7 +503,7 @@
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px"><b>{point.key}</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y:.1f} <b> '+unit,
shared: true,
useHTML: true
},
@@ -479,7 +525,7 @@
},
series: [{
name: 'bytes',
name: '',
colorByPoint: true,
data: data
}],
@@ -502,20 +548,24 @@
}*/
});
}
//终端用户 分操作系统与浏览器
//终端用户 分操作系统
function echart_2(rs){
var data=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
data.push({
name: d.osType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.osType,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -525,7 +575,7 @@ function echart_2(rs){
id: d.osType,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -616,12 +666,12 @@ function echart_2(rs){
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data
}],
@@ -648,17 +698,21 @@ function echart_2(rs){
function echart_5(rs){
var data=new Array();
var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
//协议图-操作系统
data.push({
name: d.bsType,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.bsType,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -668,7 +722,7 @@ function echart_5(rs){
id: d.bsType,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -760,12 +814,12 @@ function echart_5(rs){
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data
}],
@@ -792,17 +846,21 @@ function echart_5(rs){
//网站流量分析
function echart_4(rs){
var data=new Array();
var drillData=new Array();
// var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
data.push({
name: d.websiteService,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.websiteService,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -812,7 +870,7 @@ function echart_4(rs){
id: d.websiteService,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -895,15 +953,15 @@ function echart_4(rs){
fontFamily:'Microsoft YaHei',
}
},
tooltip: {
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data,
}],
@@ -929,18 +987,22 @@ function echart_4(rs){
//网站流量分析-点击列表显示网站分类
function echart_6(rs){
var data=new Array();
var drillData=new Array();
// var drillData=new Array();
var unit="bytes";
$(rs).each(function(i, d) {
var pktNum=new Array();
var byteLen=new Array();
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array();
// var byteLen=new Array();
//协议图-操作系统
data.push({
name: d.domain,
y: parseInt(d.count),
y: parseFloat(inoctetsNum),
// drilldown: d.domain,
});
pktNum[0]="pktNum";
/* pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen);
@@ -950,7 +1012,7 @@ function echart_6(rs){
id: d.domain,
type:'pie',
data: [pktNum,byteLen],
});
});*/
});
// 创建图例
@@ -1033,15 +1095,15 @@ function echart_6(rs){
fontFamily:'Microsoft YaHei',
}
},
tooltip: {
tooltip: {
enabled: true,
headerFormat: '<span style="font-size:10px">{point.key}: <b>{point.percentage:.1f}%</span><br>',
pointFormat: '{series.name}: {point.y}<b>',
pointFormat: '{point.y} <b> '+unit,
shared: true,
useHTML: true
},
series: [{
name: 'bytes',
name: ' ',
colorByPoint: true,
data: data,
}],
@@ -1070,21 +1132,27 @@ function echart_topic_domain(rs){
'parent': '',
'name': 'TOPIC'
}];
var unit="bytes";
$(rs).each(function(i,d){
var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum);
data.push({
'id': '1.'+d.topicId,
'parent': '0.0',
'name': d.topic,
'value':d.count
'value':parseFloat(inoctetsNum)
});
/****主题中的子域名*******/
$(d.domainData).each(function(j,t){
var domainNum=d.count;
unit=changeUnit(domainNum);
domainNum=changeNum(domainNum);
data.push({
'id': '2.'+t.webId,
'parent': '1.'+d.topicId,
'name': t.domain,
'value':t.count
'value':parseFloat(domainNum)
});
})
@@ -1186,7 +1254,7 @@ function echart_topic_domain(rs){
}],
tooltip: {
headerFormat: "",
pointFormat: '<b>{point.name}</b>: <b>{point.value}</b>'
pointFormat: '<b>{point.name}</b> : <b>{point.value}<b> ' +unit
}
});
}