diff --git a/src/main/java/com/nis/web/controller/dashboard/TrafficStatisticsInfoController.java b/src/main/java/com/nis/web/controller/dashboard/TrafficStatisticsInfoController.java index 82b1a6ac1..69c096102 100644 --- a/src/main/java/com/nis/web/controller/dashboard/TrafficStatisticsInfoController.java +++ b/src/main/java/com/nis/web/controller/dashboard/TrafficStatisticsInfoController.java @@ -63,35 +63,41 @@ public class TrafficStatisticsInfoController extends BaseController { fromJsonList = gson.fromJson(string, new TypeToken(){}.getType()); list = (ArrayList) fromJsonList.get("data"); Random r = new Random(); - Double rejectNum=r.nextDouble()*100+61351; - Double dropConnNum=r.nextDouble()*100+54271; - Double monitorNum=r.nextDouble()*100+54271; - Double loopConnNum=r.nextDouble()*100+54271; + Double rejectNum=0d; + Double dropConnNum=0d; + Double monitorNum=0d; + Double loopConnNum=0d; + Double inoctetsNum=0d; + Double outoctetsNum=0d; + Double bandwidth=0d; if(list!=null&&list.size()>0){ Map map = (Map) list.get(0); rejectNum = (Double) map.get("rejectNum") ; monitorNum = (Double) map.get("monitorNum"); dropConnNum = (Double) map.get("dropConnNum"); loopConnNum = (Double) map.get("loopConnNum"); + inoctetsNum = (Double) map.get("inoctets"); + outoctetsNum = (Double) map.get("outoctets"); + //单位换算 byte->bit/s + inoctetsNum=(inoctetsNum*8)/(5*60*60); + outoctetsNum=(outoctetsNum*8)/(5*60*60); + } - int newUniConn=r.nextInt(7666)+815036; - int liveConnNum=r.nextInt(852)+23621; - int bandwidth=r.nextInt(2567)+62150; - int c2sNum=r.nextInt(100); + bandwidth=inoctetsNum+outoctetsNum; m.put("rejectNum", rejectNum); m.put("monitorNum", monitorNum); m.put("loopConnNum", loopConnNum); m.put("dropConnNum", dropConnNum); - m.put("newUniConn", newUniConn); - m.put("liveConnNum", liveConnNum); - m.put("c2sNum", c2sNum); - m.put("bandwidth", bandwidth); - logger.info("活跃IP数据"+fromJsonList); + m.put("bandwidth", bandwidth); + m.put("inoctetsNum", inoctetsNum); + m.put("outoctetsNum", outoctetsNum); + + logger.info("统计流量信息数据"+fromJsonList); return m; } catch (Exception e) { e.printStackTrace(); - logger.error("活跃IP错误"+e); + logger.error("统计流量信息数据错误"+e); } return m; } diff --git a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp index cbb10277b..2e1e98441 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp @@ -6,8 +6,8 @@ 数据概览 - - + + @@ -37,12 +37,14 @@
<%-- 详情显示--%> -

" +

+

-

In 83% | Out 17%

- 23802 bps +

In 0 | Out 0

+ 0 bps
@@ -51,10 +53,13 @@
-

" +

+

-

2102

+ + +

+

0

@@ -71,7 +76,7 @@

" class="tooltips" data-flag="false" data-html="true" data-placement="top">

-

65802

+

0

@@ -83,7 +88,7 @@

" class="tooltips" data-flag="false" data-html="true" data-placement="top">

-

85812

+

0

@@ -95,7 +100,7 @@

" class="tooltips" data-flag="false" data-html="true" data-placement="top">

-

45802

+

0

@@ -339,7 +344,7 @@ $(document).ready(function(){ ajaxinfo(); setInterval(function(){ ajaxinfo(); - },5000); + },20000); protocolList();//协议统计 ipActiveList();//活跃IP @@ -360,8 +365,8 @@ $(document).ready(function(){ }); //获取数据info function ajaxinfo(){ - var c2s = $(".c2sNum").text().trim(); - var s2c = $(".s2cNum").text().trim(); +// var c2s = $(".c2sNum").text().trim(); +// var s2c = $(".s2cNum").text().trim(); $.ajax({ url:'${ctx}/dashboard/traffic/info', type : "get" , @@ -372,11 +377,41 @@ function ajaxinfo(){ dataScroll(".numberRun1",Math.floor(data.rejectNum)); dataScroll(".numberRun2",Math.floor(data.monitorNum)); dataScroll(".numberRun3",Math.floor(data.dropConnNum)); - dataScroll(".numberRun4",Math.floor(data.bandwidth)); + var bandwidth=data.bandwidth; + var bandwidthK=bandwidth/1024; + var bandwidthM=bandwidthK/1024; + if(bandwidthK>10){ + bandwidth=bandwidthK; + $(".numberRun4-unit").text(" Kbps"); + } + if(bandwidthM>10){ + bandwidth=bandwidthM; + $(".numberRun4-unit").text(" Mbps"); + } + dataScroll(".numberRun4",Math.floor(bandwidth)); //计算带宽进出口流量百分比 - $("#c2sColor").removeClass(); - $("#s2cColor").removeClass(); - if(data.c2sNum!=c2s){ +// $("#c2sColor").removeClass(); +// $("#s2cColor").removeClass(); + var inoctetsNum=Math.floor(data.inoctetsNum); + var inoctetsNumK=inoctetsNum/1024; + var inoctetsNumM=inoctetsNumK/1024; + var outoctetsNum=Math.floor(data.outoctetsNum); + var outoctetsNumK=outoctetsNum/1024; + var outoctetsNumM=outoctetsNumK/1024; + var unit="bps"; + if(inoctetsNumK>10){ + inoctetsNum=inoctetsNumK; + outoctetsNum=outoctetsNumK; + unit="Kbps"; + }; + if(inoctetsNumM>10){ + inoctetsNum=inoctetsNumM; + outoctetsNum=outoctetsNumM; + unit="Mbps"; + }; + $(".c2sNum").text(inoctetsNum+" "+unit); + $(".s2cNum").text(outoctetsNum+" "+unit); + /* if(data.inoctetsNum!=c2s){ $(".c2sNum").text(data.c2sNum); $(".s2cNum").text(100-data.c2sNum); if(data.c2sNum>c2s){ @@ -393,7 +428,7 @@ function ajaxinfo(){ $("#s2cColor").addClass("fa fa-arrow-up"); $("#s2cColor").attr({style:"color:green"}); } - } + } */ }, error: function(data, textStatus, errorThrown){ // warning_prompt("获取实时列表数据失败！",1500); @@ -405,12 +440,7 @@ function ajaxinfo(){ function dataScroll(index,nums){ var num=nums; var numRun = $(index).numberAnimate({num:num, speed:3000, symbol:","}); -// var nums = 1000; -// setInterval(function(){ -// nums-= 1000; numRun.resetData(nums); -// },2000); - } //切换下拉列表-操作系统与浏览器 diff --git a/src/main/webapp/static/global/plugins/highcharts/echart.js b/src/main/webapp/static/global/plugins/highcharts/echart.js deleted file mode 100644 index 83a193ec4..000000000 --- a/src/main/webapp/static/global/plugins/highcharts/echart.js +++ /dev/null @@ -1,916 +0,0 @@ - - - //协议统计分析 - function echart_1(rs) { - var data=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - //协议图-操作系统 - data.push({ - name: d.protoType, - y: parseInt(d.count+Math.random()*300), - drilldown: d.protoType, - }); - - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - - drillData.push({ - name: d.protoType, - id: d.protoType, - type:'pie', - innerSize: '70%', - data: [pktNum,byteLen], - }); - - }); - var chart = Highcharts.chart('chart_1', { - chart: { - type: 'pie', - spacing : [40, 40 , 40, 40], - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, -// margin:10, - - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null - }, - tool: { - enabled: true, - headerFormat: '{point.key}: {point.percentage:.1f}%
', - pointFormat: '{series.name}: {point.y}', - shared: true, - useHTML: true - }, - credits:{//是否有highcharts水印 - enabled:false - }, - legend:{ - width:370, - x:20, - itemWidth:90, - itemHoverStyle:{ - color:'#61D2F7', - }, - itemStyle:{ - color: '#fff', - fontFamily:'Microsoft YaHei', - }, -// navigation: {//图例分页 -// activeColor: 'red', -// animation: true, -// arrowSize: 15, -// inactiveColor: '#CCC', -// style: { -// fontWeight: 'bold', -// color: '#333', -// fontSize: '12px' -// } -// } - }, - - plotOptions: { - pie: { - allowPointSelect: true, - cursor: 'pointer', - showInLegend: true, - dataLabels: { - enabled: false, - format: '{point.name}:{point.percentage:.1f}%', - style: { - color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' - } - }, - size: 200, //饼图的大小 - states: { - hover: { - enabled: false - } - }, - point: { - events: { - mouseOver: function(e) { // 鼠标滑过时动态更新标题 - // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle - chart.setTitle({ - text:e.target.name.length>10? this.percentage.toFixed(1)+"%
"+e.target.name.substring(0,10)+"...":this.percentage.toFixed(1)+"%
"+e.target.name.substring(0,10)+"", - floating:true, - y:120, - style: {//设置字体颜色 - color: '#fff', - fontFamily:'Microsoft YaHei' - }, - }); - this.slice(); - }, - // 鼠标移出时，收回突出显示 - mouseOut: function() { - this.slice(); - }, - // 默认是点击突出，这里屏蔽掉 - click: function() { - return false; - } - }, - }, - } - }, - series: [{ - type: 'pie', - innerSize: '70%',//圆环的大小 - name: 'count', - data: data - }], - drilldown:{ - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } - - }, function(c) { // 图表初始化完毕后的会掉函数 - // 环形图圆心 - var centerY = c.series[0].center[1], - titleHeight = parseInt(c.title.styles.fontSize); - // 动态设置标题位置 - c.setTitle({ - y:centerY + titleHeight/2 - }); - }); - - } - - - // echart_main中心图 活跃IP统计 - function echart_main(rs) { - if(rs==null||rs.length<=0){ - rs=[{"ipAddr":"103.6.1.12","linkNum":532,"pktNum": 5,"byteLen": 6}, - {"ipAddr":"163.5.6.43","linkNum":532,"pktNum": 5,"byteLen": 7}, - {"ipAddr":"170.1.0.1","linkNum":532,"pktNum": 5,"byteLen": 8}, - {"ipAddr":"10.32.33.61","linkNum":532,"pktNum": 5,"byteLen": 9}, - {"ipAddr":"145.16.1.2","linkNum":532,"pktNum": 5,"byteLen": 10}, - {"ipAddr":"153.5.0.36","linkNum":532,"pktNum": 5,"byteLen": 11}] - } - var data=new Array(); - var xData=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - xData.push(d.ipAddr); - //活跃IP图 - data.push({ - name: d.ipAddr, - y: parseInt(d.linkNum+Math.random()*300), - drilldown: d.ipAddr, - }); - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - drillData.push({ - name: d.ipAddr, - id: d.ipAddr, - type:'pie', - tooltip: { - enabled: true, - pointFormat: '{series.name}: {point.y} ({point.percentage:.1f}%)' - }, - data: [pktNum,byteLen], - }); - }); - var chart = Highcharts.chart('chart_main', { - chart: { - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, - type: 'bar', -// marginLeft:80, - marginTop:50, - inverted: true, - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null - }, - xAxis: { - type:'category', - categories: xData, - title: { - text: null - }, - labels:{ - formatter:function(){ - if(this.value.length>15){ - return ''+this.value.substring(0,15)+"..."+'' - }else{ - return this.value - } - } - } - - }, - yAxis: { - min: 0, - title: { - text: 'Number', - align:'high', - style: {//设置字体颜色 - color: '#fff', - fontFamily:'Microsoft YaHei' - }, - }, - labels: { - style: {//设置字体颜色 - color: '#fff', - fontFamily:'Microsoft YaHei' - }, - }, - lineWidth: 1, - - }, - tooltip: { -// valueSuffix: ' 单位' - }, - - plotOptions: { - bar: { - dataLabels: { - enabled: true, - allowOverlap: true, // 允许数据标签重叠 - }, - - showInLegend:false - }, - }, - credits:{//是否有highcharts水印 - enabled:false - }, - series: [{ - name: 'Number', - colorByPoint: true, - data: data - }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - drillUpButton:{ - relativeTo: 'spacingBox', - }, - series:drillData - } - }); - } - - //app应用类型统计 echart_3 - function echart_3(rs) { - var data=new Array(); - var xData=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - xData.push(d.appType); - //活跃IP图 - data.push({ - name: d.appType, - y: parseInt(d.count+Math.random()*300), - drilldown: d.appType, - }); - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - drillData.push({ - name: d.appType, - id: d.appType, - data: [pktNum,byteLen], - }); - }); - var chart = Highcharts.chart('chart_3',{ - chart: { - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, - type: 'column', - marginTop:50, - marginBottom:60, - - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - labels:{ - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null - }, - credits:{//是否有highcharts水印 - enabled:false - }, - xAxis: { - categories: xData, - labels:{ - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - title: { - text: 'App', - align:'high', - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - }, - yAxis: { - min: 0, - title: { - text: 'Number', - align:'high', - style: {//设置字体颜色 - color: '#fff', - fontFamily:'Microsoft YaHei' - }, - }, - labels:{ - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - } - }, - tooltip: { - enabled: true, - headerFormat: '{point.key}
', - pointFormat: '{series.name}: {point.y}', - shared: true, - useHTML: true - }, - plotOptions: { - column: { - dataLabels: {//数字显示 - enabled: true, - allowOverlap: true, // 允许数据标签重叠 - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - showInLegend:false - }, - }, - - series: [{ - name: 'count', - colorByPoint: true, - data: data - }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - drillUpButton: { - relativeTo: 'spacingBox', - }, - series:drillData - } - }); - } - //终端用户 分操作系统与浏览器 -function echart_2(rs){ - var data=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - //协议图-操作系统 - data.push({ - name: d.osType, - y: parseInt(d.count), - drilldown: d.osType, - }); - - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - - drillData.push({ - name: d.osType, - id: d.osType, - type:'pie', - data: [pktNum,byteLen], - }); - - }); - // 创建图例 - var chart = Highcharts.chart('chart_2',{ - chart: { - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, - type: 'pie' - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - legend:{ - width:480, - x:40, - itemWidth:100, - itemDistance:2, - itemHoverStyle:{ - color:'#61D2F7', - }, - itemStyle:{ - color: '#fff', - fontFamily:'Microsoft YaHei', - } - }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null, - style: {//设置字体颜色 - color: '#fff', - fontSize:'18px', - fontFamily:'Microsoft YaHei' - }, - - }, - plotOptions: { - series: { - dataLabels: { - enabled: false, - format: '{point.name}' - }, - }, - pie:{ - showInLegend: true, - point: { - events: { - mouseOver: function(e) { - this.slice(); - }, - // 鼠标移出时，收回突出显示 - mouseOut: function() { - this.slice(); - }, - // 默认是点击突出，这里屏蔽掉 - click: function() { - return false; - } - }, - }, - } - }, - credits:{//是否有highcharts水印 - enabled:false - }, - tooltip: { - enabled: true, - headerFormat: '{point.key}: {point.percentage:.1f}%
', - pointFormat: '{series.name}: {point.y}', - shared: true, - useHTML: true - }, - series: [{ - name: 'count', - colorByPoint: true, - data: data - }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } - }); -} -//当点击操作系统列表时-显示浏览器 -function echart_5(rs){ - var data=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - //协议图-操作系统 - data.push({ - name: d.bsType, - y: parseInt(d.count), - drilldown: d.bsType, - }); - - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - - drillData.push({ - name: d.bsType, - id: d.bsType, - type:'pie', - data: [pktNum,byteLen], - }); - - }); - // 创建图例 - var chart = Highcharts.chart('chart_2',{ - chart: { - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, - type: 'pie' - }, - legend:{ - width:480, - x:40, - itemWidth:100, - itemDistance:2, - itemHoverStyle:{ - color:'#61D2F7', - }, - itemStyle:{ - color: '#fff', - fontFamily:'Microsoft YaHei', - } - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null, - style: {//设置字体颜色 - color: '#fff', - fontSize:'18px', - fontFamily:'Microsoft YaHei' - }, - - }, - plotOptions: { - series: { - dataLabels: { - enabled: false, - format: '{point.name}' - }, - - }, - pie:{ - point: { - events: { - mouseOver: function(e) { // 鼠标滑过时动态更新标题 - this.slice(); - }, - // 鼠标移出时，收回突出显示 - mouseOut: function() { - this.slice(); - }, - // 默认是点击突出，这里屏蔽掉 - click: function() { - return false; - } - }, - }, - showInLegend: true, - } - }, - credits:{//是否有highcharts水印 - enabled:false - }, - tooltip: { - enabled: true, - headerFormat: '{point.key}: {point.percentage:.1f}%
', - pointFormat: '{series.name}: {point.y}', - shared: true, - useHTML: true - }, - series: [{ - name: 'count', - colorByPoint: true, - data: data - }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } - }); -} - -//网站流量分析 -function echart_4(rs){ - var data=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - data.push({ - name: d.webId, - y: parseInt(d.count), - drilldown: d.webId, - }); - - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - - drillData.push({ - name: d.webId, - id: d.webId, - type:'pie', - data: [pktNum,byteLen], - }); - - }); - // 创建图例 - var chart = Highcharts.chart('chart_4',{ - chart: { - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, - type: 'pie' - }, - - colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null, - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - plotOptions: { - series: { - dataLabels: { - enabled: false, - format: '{point.name}' - }, - }, - pie:{ - showInLegend: true, - point: { - events: { - mouseOver: function(e) { - this.slice(); - }, - // 鼠标移出时，收回突出显示 - mouseOut: function() { - this.slice(); - }, - // 默认是点击突出，这里屏蔽掉 - click: function() { - return false; - } - }, - }, - } - }, - credits:{//是否有highcharts水印 - enabled:false - }, - legend:{ - width:480, - x:40, - itemWidth:100, - itemDistance:2, - itemHoverStyle:{ - color:'#61D2F7', - }, - itemStyle:{ - color: '#fff', - fontFamily:'Microsoft YaHei', - } - }, - tooltip: { - enabled: true, - headerFormat: '{point.key}: {point.percentage:.1f}%
', - pointFormat: '{series.name}: {point.y}', - shared: true, - useHTML: true - }, - series: [{ - name: 'count', - colorByPoint: true, - data: data, - }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } - }); -} -//网站流量分析-点击列表显示网站分类 -function echart_6(rs){ - var data=new Array(); - var drillData=new Array(); - $(rs).each(function(i, d) { - var pktNum=new Array(); - var byteLen=new Array(); - //协议图-操作系统 - data.push({ - name: d.webType, - y: parseInt(d.count), - drilldown: d.webType, - }); - - pktNum[0]="pktNum"; - pktNum[1]=parseInt(d.pktNum); - byteLen[0]="byteLen"; - byteLen[1]=parseInt(d.byteLen); - - drillData.push({ - name: d.webType, - id: d.webType, - type:'pie', - data: [pktNum,byteLen], - }); - - }); - // 创建图例 - var chart = Highcharts.chart('chart_4',{ - chart: { - backgroundColor: 'rgba(255, 255, 255, 0)', - plotBackgroundColor:null, - plotBorderWidth:null, - plotShadow:false, - type: 'pie' - }, - noData:{ - style: {//设置字体颜色 - color: '#fff', - }, - }, - colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], - title: { - text: null, - }, - plotOptions: { - series: { - dataLabels: { - enabled: false, - format: '{point.name}' - }, - }, - pie:{ - showInLegend: true, - point: { - events: { - mouseOver: function(e) { // 鼠标滑过时动态更新标题 - this.slice(); - }, - // 鼠标移出时，收回突出显示 - mouseOut: function() { - this.slice(); - }, - // 默认是点击突出，这里屏蔽掉 - click: function() { - return false; - } - }, - }, - } - }, - credits:{//是否有highcharts水印 - enabled:false - }, - legend:{ - width:370, - x:20, - itemWidth:90, - itemHoverStyle:{ - color:'#61D2F7', - }, - itemStyle:{ - color: '#fff', - fontFamily:'Microsoft YaHei', - } - }, - tooltip: { - enabled: true, - headerFormat: '{point.key}: {point.percentage:.1f}%
', - pointFormat: '{series.name}: {point.y}', - shared: true, - useHTML: true - }, - series: [{ - name: 'count', - colorByPoint: true, - data: data, - }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } - }); -} - - diff --git a/src/main/webapp/static/global/plugins/highcharts/css/common.css b/src/main/webapp/static/pages/css/common.css similarity index 100% rename from src/main/webapp/static/global/plugins/highcharts/css/common.css rename to src/main/webapp/static/pages/css/common.css diff --git a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css b/src/main/webapp/static/pages/css/data_text.css similarity index 94% rename from src/main/webapp/static/global/plugins/highcharts/css/data_text.css rename to src/main/webapp/static/pages/css/data_text.css index 3b68b7328..53d28d572 100644 --- a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css +++ b/src/main/webapp/static/pages/css/data_text.css @@ -99,7 +99,7 @@ p{ margin-left: 10px; margin-top: 1px; } -.data_content .data_info p:nth-child(1){ +.data_content .data_info .info_2 p:nth-child(1){ color:#fff; font-size: 18px; text-align: center; @@ -107,6 +107,15 @@ p{ white-space: nowrap; text-overflow: ellipsis; } +.data_content .data_info .info_1 label:nth-child(1){ + color:#fff; + font-size: 18px; + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + margin: -3px; +} .data_content .data_info>div.info_1 p:nth-child(2){ font-weight: 600; font-size: 16px; diff --git a/src/main/webapp/static/pages/scripts/echart.js b/src/main/webapp/static/pages/scripts/echart.js index 993a72c04..b6ed9fe97 100644 --- a/src/main/webapp/static/pages/scripts/echart.js +++ b/src/main/webapp/static/pages/scripts/echart.js @@ -11,7 +11,7 @@ data.push({ name: d.protoType, y: parseInt(d.count), - drilldown: d.protoType, +// drilldown: d.protoType, }); pktNum[0]="pktNum"; @@ -134,12 +134,12 @@ name: 'count', data: data }], - drilldown:{ - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } +// drilldown:{ +// series:drillData, +// drillUpButton: { +// relativeTo: 'spacingBox', +// } +// } }, function(c) { // 图表初始化完毕后的会掉函数 // 环形图圆心 @@ -175,7 +175,7 @@ data.push({ name: d.ipAddr, y: parseInt(d.linkNum), - drilldown: d.ipAddr, +// drilldown: d.ipAddr, }); pktNum[0]="pktNum"; pktNum[1]=parseInt(d.pktNum); @@ -212,6 +212,13 @@ title: { text: null }, + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, xAxis: { type:'category', categories: xData, @@ -225,7 +232,12 @@ }else{ return this.value } - } + }, + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, } }, @@ -235,15 +247,17 @@ text: 'Link Number', align:'high', style: {//设置字体颜色 - color: '#fff', - fontFamily:'Microsoft YaHei' - }, + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, }, labels: { - style: {//设置字体颜色 - color: '#fff', - fontFamily:'Microsoft YaHei' - }, + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, }, lineWidth: 1, @@ -257,10 +271,16 @@ dataLabels: { enabled: true, allowOverlap: true, // 允许数据标签重叠 + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, }, showInLegend:false }, + }, credits:{//是否有highcharts水印 enabled:false @@ -270,23 +290,23 @@ colorByPoint: true, data: data }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - drillUpButton:{ - relativeTo: 'spacingBox', - }, - series:drillData - } +// drilldown:{ +// activeAxisLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei', +// +// }, +// activeDataLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei' +// }, +// drillUpButton:{ +// relativeTo: 'spacingBox', +// }, +// series:drillData +// } }); } @@ -375,12 +395,14 @@ }, }, labels:{ + enabled:true, style: {//设置字体颜色 color: '#fff', fontSize:'10px', fontFamily:'Microsoft YaHei' }, - } + }, + }, tooltip: { enabled: true, @@ -435,11 +457,10 @@ function echart_2(rs){ $(rs).each(function(i, d) { var pktNum=new Array(); var byteLen=new Array(); - //协议图-操作系统 data.push({ name: d.osType, y: parseInt(d.count), - drilldown: d.osType, +// drilldown: d.osType, }); pktNum[0]="pktNum"; @@ -533,23 +554,23 @@ function echart_2(rs){ colorByPoint: true, data: data }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } +// drilldown:{ +// activeAxisLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei', +// +// }, +// activeDataLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei' +// }, +// series:drillData, +// drillUpButton: { +// relativeTo: 'spacingBox', +// } +// } }); } //当点击操作系统列表时-显示浏览器 @@ -563,7 +584,7 @@ function echart_5(rs){ data.push({ name: d.bsType, y: parseInt(d.count), - drilldown: d.bsType, +// drilldown: d.bsType, }); pktNum[0]="pktNum"; @@ -658,23 +679,23 @@ function echart_5(rs){ colorByPoint: true, data: data }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } +// drilldown:{ +// activeAxisLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei', +// +// }, +// activeDataLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei' +// }, +// series:drillData, +// drillUpButton: { +// relativeTo: 'spacingBox', +// } +// } }); } @@ -688,7 +709,7 @@ function echart_4(rs){ data.push({ name: d.websiteService, y: parseInt(d.count), - drilldown: d.websiteService, +// drilldown: d.websiteService, }); pktNum[0]="pktNum"; @@ -777,23 +798,23 @@ function echart_4(rs){ colorByPoint: true, data: data, }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } +// drilldown:{ +// activeAxisLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei', +// +// }, +// activeDataLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei' +// }, +// series:drillData, +// drillUpButton: { +// relativeTo: 'spacingBox', +// } +// } }); } //网站流量分析-点击列表显示网站分类 @@ -807,7 +828,7 @@ function echart_6(rs){ data.push({ name: d.domain, y: parseInt(d.count), - drilldown: d.domain, +// drilldown: d.domain, }); pktNum[0]="pktNum"; @@ -895,23 +916,23 @@ function echart_6(rs){ colorByPoint: true, data: data, }], - drilldown:{ - activeAxisLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei', - - }, - activeDataLabelStyle:{ - textDecoration:'none', - color: '#fff', - fontStyle:'Microsoft YaHei' - }, - series:drillData, - drillUpButton: { - relativeTo: 'spacingBox', - } - } +// drilldown:{ +// activeAxisLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei', +// +// }, +// activeDataLabelStyle:{ +// textDecoration:'none', +// color: '#fff', +// fontStyle:'Microsoft YaHei' +// }, +// series:drillData, +// drillUpButton: { +// relativeTo: 'spacingBox', +// } +// } }); } function echart_topic_domain(rs){