统计图表增加详情静态页面
This commit is contained in:
zhanghongqing
@@ -8,6 +8,9 @@
|
||||
<title>数据概览</title>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/plugins/highcharts/css/common.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/global/plugins/highcharts/css/data_text.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/dashboard.js"></script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
@@ -24,80 +27,88 @@
|
||||
<div class="title-center fl"><a href="javascript:window.location.reload()"><i class="fa fa-line-chart"></i> 网络流量分析</a></div>
|
||||
<div class="title-right fr"></div>
|
||||
</div> -->
|
||||
<div class="header">
|
||||
<div class="data_info">
|
||||
<div class="info_1 fl">
|
||||
<div class="info_1 fl_fc">
|
||||
<div class="text_1">
|
||||
<div class="fr">
|
||||
<div class="fl">
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="#">
|
||||
<span>
|
||||
<p>业务总量</p>
|
||||
<p>15802</p>
|
||||
<p><i class="fa fa-ban"> </i> 阻断链接数</p>
|
||||
<p class="numberRun">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<div class="fl">
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<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>
|
||||
<p><i class="fa fa-external-link"></i> 新建链接数</p>
|
||||
<p class="numberRun1">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="info_2 fl">
|
||||
<div class="info_2 fl_fc">
|
||||
<div class="text_2">
|
||||
<div class="fr">
|
||||
<div class="fl">
|
||||
<p>活跃网站流量</p>
|
||||
<p>15802</p>
|
||||
<div class="fr_fc">
|
||||
<!-- <i class="fa fa-bar-chart"></i> -->
|
||||
<div class="fl_fc">
|
||||
<a href="#">
|
||||
<span>
|
||||
<p><i class="fa fa-trash"> </i> 丢弃链接数</p>
|
||||
<p class="numberRun2">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<div class="fl">
|
||||
<p>境外IP流量</p>
|
||||
<p>15802</p>
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="${ctx}/dashboard/ipActiveList">
|
||||
<span>
|
||||
<p><i class="fa fa-heartbeat"> </i> 活跃链接数</p>
|
||||
<p class="numberRun3">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="${ctx}/dashboard/ipActiveList">
|
||||
<span>
|
||||
<p><i class="fa fa-cloud-download"></i> 网络带宽</p>
|
||||
<p clas="csNum">c2s 83%<i class="fa fa-arrow-up" style="color: green"></i> | s2c 17%<i class="fa fa-arrow-down" style="color: red"></i></p>
|
||||
<p class="numberRun4">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="info_3 fl">
|
||||
<%-- <div class="info_3 fl_fc">
|
||||
<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 class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="${ctx}/dashboard/ipActiveList">
|
||||
<span>
|
||||
<p>网络带宽</p>
|
||||
<p class="numberRun5">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> --%>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--header结束-->
|
||||
|
||||
<div class="data_main">
|
||||
@@ -175,41 +186,6 @@
|
||||
<td>Linux</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>DOS</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>iOS</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -254,41 +230,6 @@
|
||||
<td>Google</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Yahoo</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>qq</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Googleusercontent</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Microsoftonline</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Pornhub</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Youtube</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Facebook</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -313,27 +254,15 @@
|
||||
<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(){
|
||||
//动态显示数据
|
||||
dataScroll(".numberRun",43113);
|
||||
dataScroll(".numberRun1",13414);
|
||||
dataScroll(".numberRun2",1235137653);
|
||||
dataScroll(".numberRun3",2134634);
|
||||
dataScroll(".numberRun4",1234656);
|
||||
|
||||
|
||||
protocolList();//协议统计
|
||||
ipActiveList();//活跃IP
|
||||
@@ -348,7 +277,17 @@ $(document).ready(function(){
|
||||
uaSelectChange($('#uaSelect').val());
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
//动态显示数据
|
||||
function dataScroll(index,num){
|
||||
var numRun = $(index).numberAnimate({num:num, speed:2000, symbol:","});
|
||||
var nums = 1000;
|
||||
setInterval(function(){
|
||||
nums-= 1000;
|
||||
numRun.resetData(nums);
|
||||
},2000);
|
||||
|
||||
}
|
||||
|
||||
//切换下拉列表-操作系统与浏览器
|
||||
function uaSelectChange(ua){
|
||||
|
||||
180
src/main/webapp/WEB-INF/views/dashboard/trafficConnList.jsp
Normal file
180
src/main/webapp/WEB-INF/views/dashboard/trafficConnList.jsp
Normal file
@@ -0,0 +1,180 @@
|
||||
<%@ 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/ipActiveList'"><spring:message code="refresh"/></button>
|
||||
<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="网络带宽"></spring:message>
|
||||
</h3>
|
||||
<h5 class="page-header"></h5>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="${ctx}/dashboard/ipActiveList">发送</a></li>
|
||||
<li><a href="${ctx}/dashboard/ipActiveList">接收</a></li>
|
||||
<li><a href="${ctx}/dashboard/ipActiveList">总计</a></li>
|
||||
</ul>
|
||||
|
||||
<div id="chart" style="width:100%;height:400px;"></div>
|
||||
|
||||
<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>
|
||||
<style>
|
||||
.show-two{
|
||||
display: inline-block;
|
||||
}
|
||||
.title-num{
|
||||
margin-right:8px;
|
||||
border-radius:40px !important;
|
||||
background-color: #f34b60;
|
||||
color:#fff;
|
||||
width:40px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$("#contentTable tbody tr").bind('click',function(){
|
||||
$("tbody tr").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$("span[class='title-num']").html(' '+($(this).index()+1)+' ')
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="table-responsive show-two">
|
||||
<sys:message content="${message}"/>
|
||||
<table id="contentTable" style="width: 40%;" class="table table-hover table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="sort"/></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>${entry.id }</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 class="right-table" style="width: 32%;float: right;" >
|
||||
<h3>
|
||||
<span class="title-num"> 1 </span>
|
||||
<label>详细性质</label>
|
||||
</h3>
|
||||
<table id="contentTable2" class="table table-striped table-bordered table-condensed text-nowrap">
|
||||
<tbody>
|
||||
<tr><td><spring:message code="chart"/></td><td>12131</td></tr>
|
||||
<tr><td><spring:message code="ip_addr"/></td><td>241241</td></tr>
|
||||
<tr><td><spring:message code="area_id"/></td><td>31412</td></tr>
|
||||
<tr><td><spring:message code="link_num"/></td><td>34655</td></tr>
|
||||
<tr><td><spring:message code="c2s_pkt_num"/></td><td>37457</td></tr>
|
||||
<tr><td><spring:message code="s2c_pkt_num"/></td><td>33457</td></tr>
|
||||
<tr><td><spring:message code="c2s_byte_len"/></td><td>38468</td></tr>
|
||||
<tr><td><spring:message code="s2c_byte_len"/></td><td>3367</td></tr>
|
||||
<tr><td><spring:message code="stat_time"/></td><td>33456</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var chart = Highcharts.chart('chart', {
|
||||
title: {
|
||||
text: '网络带宽'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Pkt'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
xAxis:{
|
||||
type:'datetime',
|
||||
dateTimeLabelFormats:{
|
||||
day:'%Y-%m-%d %h'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointStart: Date.UTC(2018, 8, 16,1),
|
||||
pointInterval: 3600*1000,
|
||||
// pointIntervalUnit:'day'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Installation',
|
||||
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
||||
}],
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function showIpActiveChart(){
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -17,6 +17,9 @@
|
||||
<spring:message code="活跃IP实时统计TOP100"></spring:message>
|
||||
</h3>
|
||||
<h5 class="page-header"></h5>
|
||||
|
||||
<div id="chart" style="width:100%;height:400px;"></div>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="portlet">
|
||||
<div class="portlet-body">
|
||||
@@ -64,9 +67,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/layouts/layout/scripts/layout.js" type="text/javascript"></script>
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
var chart = Highcharts.chart('chart', {
|
||||
title: {
|
||||
text: 'Traffic IP Active Total'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'IP'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
label: {
|
||||
connectorAllowed: false
|
||||
},
|
||||
pointStart: 2010
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Installation',
|
||||
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
||||
}, {
|
||||
name: 'Manufacturing',
|
||||
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
|
||||
}, {
|
||||
name: 'Sales & Distribution',
|
||||
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
|
||||
}, {
|
||||
name: 'Project Development',
|
||||
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
|
||||
}, {
|
||||
name: 'Other',
|
||||
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
|
||||
}],
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
legend: {
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function showIpActiveChart(){
|
||||
|
||||
}
|
||||
|
||||
function openChart(){
|
||||
var url = "${ctx}/traffic/showChart";
|
||||
|
||||
Reference in New Issue
Block a user