From 80b2623cc52c229f03cadd656b38807c17f5e4f0 Mon Sep 17 00:00:00 2001 From: zhanghongqing Date: Wed, 1 Aug 2018 12:59:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/DashboardController.java | 114 +++++++++++++++ .../views/dashboard/dashBoardIndex.jsp | 134 ++++++++++++++---- .../views/dashboard/trafficIpActiveList.jsp | 82 +++++++++++ .../global/plugins/highcharts/css/common.css | 2 +- .../plugins/highcharts/css/data_text.css | 94 +++++++++++- .../global/plugins/highcharts/echart.js | 44 +++++- .../highcharts/js/no-data-to-display.js | 12 ++ 7 files changed, 445 insertions(+), 37 deletions(-) create mode 100644 src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp create mode 100644 src/main/webapp/static/global/plugins/highcharts/js/no-data-to-display.js diff --git a/src/main/java/com/nis/web/controller/dashboard/DashboardController.java b/src/main/java/com/nis/web/controller/dashboard/DashboardController.java index 308d5eb28..0962220b2 100644 --- a/src/main/java/com/nis/web/controller/dashboard/DashboardController.java +++ b/src/main/java/com/nis/web/controller/dashboard/DashboardController.java @@ -5,8 +5,12 @@ import java.util.HashMap; import java.util.List; import java.util.Map; +import javax.servlet.http.HttpServletRequest; +import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; +import org.springframework.ui.Model; +import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; @@ -14,6 +18,7 @@ import org.springframework.web.bind.annotation.ResponseBody; import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.google.gson.reflect.TypeToken; +import com.nis.domain.Page; import com.nis.util.CodeDicUtils; import com.nis.util.Constants; import com.nis.util.StringUtil; @@ -400,4 +405,113 @@ public class DashboardController extends BaseController{ } return resultList; } + + @RequestMapping(value="ipActiveList") + public String ipActiveList( HttpServletRequest request, HttpServletResponse response, Model model){ + Page page = new Page(request, response); + TrafficIpActiveStatistic ip = new TrafficIpActiveStatistic(); + ip.setIpAddr("1.1.1.1"); + ip.setAreaId("11"); + ip.setLinkNum(1212); + List list = new ArrayList(); + list.add(ip); + page.setList(list); + model.addAttribute("page", page); + return "/dashboard/trafficIpActiveList"; + } + + + @RequestMapping(value="showChart") + public String showChart(@ModelAttribute("entry") TrafficIpActiveStatistic entry, Model model){ + String ipAddr="1.1.1.1"; + TrafficIpActiveStatistic ip=new TrafficIpActiveStatistic(); + ArrayList list = new ArrayList(); +// chartMap.put("ipAddr", ip.getIpAddr()); + HashMap map1 = new HashMap(); + HashMap map2 = new HashMap(); + HashMap map3 = new HashMap(); + HashMap map4 = new HashMap(); + map1.put("name", "c2sPktNum"); + map1.put("y", ip.getC2sPktNum()); + map2.put("name", "s2cPktNum"); + map2.put("y", ip.getS2cPktNum()); + map3.put("name", "c2sByteLen"); + map3.put("y", ip.getC2sByteLen()); + map4.put("name", "s2cByteLen"); + map4.put("y", ip.getS2cByteLen()); + list.add(ip.getC2sPktNum()); + list.add(ip.getS2cPktNum()); + list.add(ip.getC2sByteLen()); + list.add(ip.getS2cByteLen()); + +// String json = new Gson().toJson(); + model.addAttribute("ipAddr",ipAddr); + model.addAttribute("chartMap",list); + return "/dashboard/trafficIpActiveChart"; + } + public class TrafficIpActiveStatistic{ + String ipAddr="10.1.1.2"; + String areaId="1045"; + Integer linkNum=3121; + Integer c2sPktNum=1352; + Integer s2cPktNum=2234; + Integer c2sByteLen=31; + Integer s2cByteLen=23323; + String statTime; + + public String getStatTime() { + return statTime; + } + public void setStatTime(String statTime) { + this.statTime = statTime; + } + public TrafficIpActiveStatistic(){ + super(); + } + public String getIpAddr() { + return ipAddr; + } + public void setIpAddr(String ipAddr) { + this.ipAddr = ipAddr; + } + public String getAreaId() { + return areaId; + } + public void setAreaId(String areaId) { + this.areaId = areaId; + } + public Integer getLinkNum() { + return linkNum; + } + public void setLinkNum(Integer linkNum) { + this.linkNum = linkNum; + } + public Integer getC2sPktNum() { + return c2sPktNum; + } + public void setC2sPktNum(Integer c2sPktNum) { + this.c2sPktNum = c2sPktNum; + } + public Integer getS2cPktNum() { + return s2cPktNum; + } + public void setS2cPktNum(Integer s2cPktNum) { + this.s2cPktNum = s2cPktNum; + } + public Integer getC2sByteLen() { + return c2sByteLen; + } + public void setC2sByteLen(Integer c2sByteLen) { + this.c2sByteLen = c2sByteLen; + } + public Integer getS2cByteLen() { + return s2cByteLen; + } + public void setS2cByteLen(Integer s2cByteLen) { + this.s2cByteLen = s2cByteLen; + } + + + + } } diff --git a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp index 687d34433..80f5170c9 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp @@ -14,44 +14,97 @@ -
- +
+
+
+
+
+ + +

业务总量

+

15802

+ + + +
+
+
+
+ + +

异常IP

+

15802

+ + +
+
+
+ +
+ + +

丢包数

+

15802

+ + +
+
+
+ +
+
+
+
+
+

活跃网站流量

+

15802

+
+
+
+
+

境外IP流量

+

15802

+
+
+
+ +
+
+
+
+
+

热门网站流量

+

15802

+
+
+
+
+

互联网流量包数

+

15802

+
+
+
+ +
+
+
- - +   
@@ -61,7 +114,7 @@
- +   
@@ -70,7 +123,7 @@
- +   
- +   
@@ -174,7 +227,7 @@
- +   
@@ -257,9 +310,28 @@ + <%-- --%> - + diff --git a/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp b/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp new file mode 100644 index 000000000..8b8f6ca33 --- /dev/null +++ b/src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp @@ -0,0 +1,82 @@ +<%@ page contentType="text/html;charset=UTF-8"%> +<%@ include file="/WEB-INF/include/taglib.jsp"%> + + + + <spring:message code="traffic_ip_active"></spring:message> + + + + + +
+ +

+ +

+
+
+
+
+
+ + + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
${entry.ipAddr }${entry.areaId }${entry.linkNum }${entry.c2sPktNum }${entry.s2cPktNum }${entry.c2sByteLen }${entry.s2cByteLen }
+
${page}
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/src/main/webapp/static/global/plugins/highcharts/css/common.css b/src/main/webapp/static/global/plugins/highcharts/css/common.css index e4277bd7d..00631575a 100644 --- a/src/main/webapp/static/global/plugins/highcharts/css/common.css +++ b/src/main/webapp/static/global/plugins/highcharts/css/common.css @@ -105,4 +105,4 @@ td a:hover { color:red; text-decoration:underline } */ -/*content 结束*/ \ No newline at end of file +/*content 结束*/ diff --git a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css b/src/main/webapp/static/global/plugins/highcharts/css/data_text.css index 671423e22..205bad8bb 100644 --- a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css +++ b/src/main/webapp/static/global/plugins/highcharts/css/data_text.css @@ -5,6 +5,98 @@ padding-top: 40px; padding-bottom: 10px; } + +/* */ +.data_content .data_info{ + width: calc(100% - 30px); + margin-bottom: 40px; + height: 110px; + margin-left: 15px; + text-align: center; +} +.data_content .data_info .info_1{ + width: 40%; + height: 110px; +} + +.data_content .data_info .fr{ + width: 40%; + border: 1px solid #303030; + border-width: 0 1px; + margin-left: 0px; +} +.data_content .data_info .info_1>.text_1{ + width: calc(100% - 15px); + background-color: #3D3D3D; + height: 110px; +} + +.data_content .data_info .info_2{ + width: 31%; + height: 110px; +} +.data_content .data_info .info_1 .fr:first-child{ + border-left: none; +} +.data_content .data_info .info_1 .fr:last-child{ + border-right: none; +} +.data_content .data_info .info_2>.text_2{ + width: calc(100% - 15px); + background-color: #3D3D3D; + height: 110px; +} + +.data_content .data_info .info_3{ + width: 29%; + height: 110px; +} +.data_content .data_info .info_3>.text_3{ + width:100%; + background-color: #3D3D3D; + height: 110px; + +} + +.data_content .data_info>div.info_1>.text_1>div{ + width: 33.333%; + position: relative; +} +.data_content .data_info>div.info_2>div>div, +.data_content .data_info>div.info_3>div>div{ + width: 50%; + position: relative; +} + +.data_content .data_info>div>div>div>div{ + margin-left:40px; + margin-top: 1px; +} +.data_content .data_info>div.info_2>div>div>div{ + margin-left: 40px; + margin-top: 1px; +} +.data_content .data_info p:nth-child(1){ + color:#fff; + font-size: 12.8px; +} +.data_content .data_info p:nth-child(2){ + font-weight: 600; + font-size: 28px; + color:#ffff43; +} +.data_content .data_info>div.info_2 p:nth-child(2){ + font-weight: 600; + font-size: 28px; + color:#25f3e6; +} +.data_content .data_info>div.info_3 p:nth-child(2){ + font-weight: 600; + font-size: 28px; + color:#ff4e4e; +} +/* info end */ + .data_content .data_main{ width: calc(100% - 30px); height: 430px; @@ -303,4 +395,4 @@ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 10px 0px 15px #3D3D3D inset; /*右边阴影*/ /*0px 10px 15px #3D3D3D inset;*/ -} \ No newline at end of file +} diff --git a/src/main/webapp/static/global/plugins/highcharts/echart.js b/src/main/webapp/static/global/plugins/highcharts/echart.js index 423e52d4b..92cccd123 100644 --- a/src/main/webapp/static/global/plugins/highcharts/echart.js +++ b/src/main/webapp/static/global/plugins/highcharts/echart.js @@ -28,7 +28,7 @@ }); }); - + console.log(data) var chart = Highcharts.chart('chart_1', { chart: { type: 'pie', @@ -40,6 +40,14 @@ // margin:10, }, + noData:{ + position:{ + align:'center' + }, + style: {//设置字体颜色 + color: '#fff', + }, + }, colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], title: { text: null @@ -84,7 +92,6 @@ point: { events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 - console.log(e) // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle chart.setTitle({ text: '
'+e.target.name, @@ -111,7 +118,7 @@ type: 'pie', innerSize: '70%',//圆环的大小 name: 'count', - data: data + data: [] }], drilldown:{ series:drillData, @@ -174,6 +181,11 @@ marginTop:50, inverted: true, }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], title: { text: null @@ -292,6 +304,11 @@ marginBottom:60, }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, labels:{ style: {//设置字体颜色 color: '#fff', @@ -420,6 +437,11 @@ function echart_2(rs){ plotShadow:false, type: 'pie' }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, legend:{ layout:'vertical', align:'center', @@ -556,6 +578,11 @@ function echart_5(rs){ fontFamily:'Microsoft YaHei', } }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], title: { text: null, @@ -669,6 +696,11 @@ function echart_4(rs){ title: { text: null, }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, plotOptions: { series: { dataLabels: { @@ -774,7 +806,11 @@ function echart_6(rs){ plotShadow:false, type: 'pie' }, - + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], title: { text: null, diff --git a/src/main/webapp/static/global/plugins/highcharts/js/no-data-to-display.js b/src/main/webapp/static/global/plugins/highcharts/js/no-data-to-display.js new file mode 100644 index 000000000..b00d4776d --- /dev/null +++ b/src/main/webapp/static/global/plugins/highcharts/js/no-data-to-display.js @@ -0,0 +1,12 @@ +/* + Highcharts JS v6.1.0 (2018-04-13) + Plugin for displaying a message when there is no data visible in chart. + + (c) 2010-2017 Highsoft AS + Author: Oystein Moseng + + License: www.highcharts.com/license +*/ +(function(d){"object"===typeof module&&module.exports?module.exports=d:d(Highcharts)})(function(d){(function(c){var d=c.seriesTypes,e=c.Chart.prototype,f=c.getOptions(),g=c.extend,h=c.each;g(f.lang,{noData:"No data to display"});f.noData={position:{x:0,y:0,align:"center",verticalAlign:"middle"}};f.noData.style={fontWeight:"bold",fontSize:"12px",color:"#666666"};h("bubble gauge heatmap pie sankey treemap waterfall".split(" "),function(b){d[b]&&(d[b].prototype.hasData=function(){return!!this.points.length})}); +c.Series.prototype.hasData=function(){return this.visible&&void 0!==this.dataMax&&void 0!==this.dataMin};e.showNoData=function(b){var a=this.options;b=b||a&&a.lang.noData;a=a&&a.noData;!this.noDataLabel&&this.renderer&&(this.noDataLabel=this.renderer.label(b,0,0,null,null,null,a.useHTML,null,"no-data"),this.noDataLabel.attr(a.attr).css(a.style),this.noDataLabel.add(),this.noDataLabel.align(g(this.noDataLabel.getBBox(),a.position),!1,"plotBox"))};e.hideNoData=function(){this.noDataLabel&&(this.noDataLabel= +this.noDataLabel.destroy())};e.hasData=function(){for(var b=this.series||[],a=b.length;a--;)if(b[a].hasData()&&!b[a].options.isInternal)return!0;return this.loadingShown};c.addEvent(c.Chart,"render",function(){this.hasData()?this.hideNoData():this.showNoData()})})(d)});