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-08-01 12:59:29 +08:00
parent 170249033b
commit 80b2623cc5
7 changed files with 445 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/main/java/com/nis/web/controller/dashboard/DashboardController.java
View File

@@ -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<TrafficIpActiveStatistic> page = new Page<TrafficIpActiveStatistic>(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;
}
}
}

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

@@ -14,44 +14,97 @@
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/*
a:link {
color:red !important;
text-decoration:none
}
a:visited {
background-color:blue !important;
text-decoration:none
}
a:hover {
color:green !important;
text-decoration:none
}
a:active {
color:green !important;
text-decoration:none;
background-color:blue !important;
} */
</style>
</head>
<body>
<!--content开始-->
<div class="data_content">
<!--header开始-->
<!-- <div class="header-title">
<!-- <div class="header-title">
<div class="title-left fl"></div>
<div class="title-center fl"><a href="javascript:window.location.reload()"><i class="fa fa-line-chart"></i>&nbsp;网络流量分析</a></div>
<div class="title-right fr"></div>
</div> -->
<div class="data_info">
<div class="info_1 fl">
<div class="text_1">
<div class="fr">
<div class="fl">
<a href="#">
<span>
<p>业务总量</p>
<p>15802</p>
</span>
</a>
</div>
</div>
<div class="fr">
<div class="fl">
<a href="#">
<span>
<p>异常IP</p>
<p>15802</p>
</span>
</a>
</div>
</div>
<div class="fr">
<!-- <i class="fa fa-bar-chart"></i> -->
<div class="fl">
<a href="#">
<span>
<p>丢包数</p>
<p>15802</p>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="info_2 fl">
<div class="text_2">
<div class="fr">
<div class="fl">
<p>活跃网站流量</p>
<p>15802</p>
</div>
</div>
<div class="fr">
<div class="fl">
<p>境外IP流量</p>
<p>15802</p>
</div>
</div>
</div>
</div>
<div class="info_3 fl">
<div class="text_3">
<div class="fr">
<div class="fl">
<p>热门网站流量</p>
<p>15802</p>
</div>
</div>
<div class="fr">
<div class="fl">
<p>互联网流量包数</p>
<p>15802</p>
</div>
</div>
</div>
</div>
</div>
<!--header结束-->
<div class="data_main">
<div class="main_left fl">
<div class="left_1">
<div class="main_title">
<!-- <img src="img/title_1.png" alt=""> -->
<spring:message code="traffic_protocol_chart"/>
<spring:message code="traffic_protocol_chart"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
</div>
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
</div>
@@ -61,7 +114,7 @@
<div class="center_text">
<div class="main_title">
<!-- <img src="img/title_3.png" alt=""> -->
<spring:message code="traffic_ipactive_chart"/>
<spring:message code="traffic_ipactive_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
</div>
<div id="chart_main" style="width:100%;height:400px;"></div>
</div>
@@ -70,7 +123,7 @@
<div class="right_1">
<div class="main_title">
<!-- <img src="img/title_4.png" alt=""> -->
<spring:message code="traffic_app_chart"/>
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
</div>
<!-- <div class="choice">
<label for="">类型：</label>
@@ -88,7 +141,7 @@
<div class="bottom_1 fl">
<div class="main_title">
<!-- <img src="img/title_6.png" alt=""> -->
<spring:message code="traffic_ua_list"/>
<spring:message code="traffic_ua_list"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
</div>
<div class="main_table">
<table>
@@ -174,7 +227,7 @@
<div class="bottom_3 fl">
<div class="main_title">
<!-- <img src="img/title_6.png" alt=""> -->
<spring:message code="traffic_website_list"/>
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
</div>
<div class="main_table">
<table>
@@ -257,9 +310,28 @@
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/data.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/drilldown.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/echart.js"></script>
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
<!-- <style type="text/css">
a:link {
color:#fff !important;
text-decoration:none
}
a:visited {
background-color:yellow !important;
text-decoration:none
}
a:hover {
color:green !important;
text-decoration:none
}
a:active {
color:green !important;
text-decoration:none;
}
</style> -->
<script type="text/javascript">
$(document).ready(function(){
@@ -367,7 +439,7 @@ function systemList(){
rs.reverse();
var n=rs.length;
$(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData'>";
var tr = "<tr class='frist rowData' >";
tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
tr += "<td class='list_c2'><a href='javascript:;' data-toggle='tooltip' title='"+itemObj.osType+"' onclick='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
if(itemObj.preCount<itemObj.count){
@@ -375,7 +447,7 @@ function systemList(){
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+""+"</a></td></tr>";
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"--"+"</a></td></tr>";
}
n=n-1;
$("#tbodyData1").prepend(tr);
@@ -533,7 +605,6 @@ function webClick(webId){
dataType:"json",
async:true,
success:function (rs) {
console.log(rs)
echart_6(rs);
},
error: function(data, textStatus, errorThrown){
@@ -541,6 +612,7 @@ function webClick(webId){
}
});
}
</script>

82
src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp Normal file
View File

@@ -0,0 +1,82 @@
<%@ 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='${ctx}/dashboard/logChart'"><spring:message code="back"/></button>
</div>
<h3 class="page-title">
<spring:message code="活跃IP实时统计TOP100"></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}/traffic/ipActiveList" 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="table-responsive">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th><spring:message code="chart"/></th>
<th><spring:message code="ip_addr"/></th>
<th><spring:message code="area_id"/></th>
<th><spring:message code="link_num"/></th>
<th><spring:message code="c2s_pkt_num"/></th>
<th><spring:message code="s2c_pkt_num"/></th>
<th><spring:message code="c2s_byte_len"/></th>
<th><spring:message code="s2c_byte_len"/></th>
<th><spring:message code="stat_time"/></th>
</tr>
</thead>
<tbody>
<c:forEach var="entry" items="${page.list }" varStatus="status">
<tr>
<td><a href="#" onclick="openChart();return false"><i class="fa fa-bar-chart"></i></a></td>
<td>${entry.ipAddr }</td>
<td>${entry.areaId }</td>
<td>${entry.linkNum }</td>
<td>${entry.c2sPktNum }</td>
<td>${entry.s2cPktNum }</td>
<td>${entry.c2sByteLen }</td>
<td>${entry.s2cByteLen }</td>
<td><fmt:formatDate value="${entry.statTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="page">${page}</div>
</div>
</div>
</div>
</div>
</div>
<script src="${pageContext.request.contextPath}/static/layouts/layout/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript">
function openChart(){
var url = "${ctx}/traffic/showChart";
windowOpen(url, "", 900, 600);
// lay.open({
// type:1,
// area:['420px','240px'],
// content:''
// })
}
</script>
</body>
</html>

2
src/main/webapp/static/global/plugins/highcharts/css/common.css
View File

@@ -105,4 +105,4 @@ td a:hover {
color:red;
text-decoration:underline
} */
/*content 结束*/
/*content 结束*/

94
src/main/webapp/static/global/plugins/highcharts/css/data_text.css
View File

@@ -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;*/
}
}

44
src/main/webapp/static/global/plugins/highcharts/echart.js
View File

@@ -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: '<br>'+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,

12
src/main/webapp/static/global/plugins/highcharts/js/no-data-to-display.js Normal file
View File

@@ -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)});