1.新 httpclient版本到4.5.6，解决凯歌提出的4.4.1版本存在的连接可能出现失败问题
2.提交图标样式更改
This commit is contained in:
zhanghongqing
@@ -9,6 +9,7 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/paginate.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/dashboard.js"></script>
|
||||
|
||||
@@ -81,10 +82,10 @@
|
||||
</div>
|
||||
<div class="fr_fc">
|
||||
<div class="fl_fc">
|
||||
<a href="${ctx}/dashboard/ipActiveList">
|
||||
<a href="${ctx}/dashboard/bandwidthList">
|
||||
<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="csNum">c2s <span class="c2sNum">83</span>% <i id="c2sColor" class="fa fa-arrow-up"></i> | s2c <span class="s2cNum">17</span>% <i id="s2cColor" class="fa fa-arrow-down"></i></p>
|
||||
<p class="numberRun4">15802</p>
|
||||
</span>
|
||||
</a>
|
||||
@@ -109,31 +110,66 @@
|
||||
</div> --%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--header结束-->
|
||||
|
||||
<!-- 第一行 -->
|
||||
<div class="data_main">
|
||||
<div class="main_left fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_protocol_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
<spring:message code="traffic_ipactive_chart"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 协议类型图 -->
|
||||
<div class="main_center fl">
|
||||
<div class="center_text">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_protocol_chart"/> <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 中图 -->
|
||||
<div class="main_center fl">
|
||||
<div class="center_text">
|
||||
<div class="main_title">
|
||||
<!-- <img src="img/title_3.png" alt=""> -->
|
||||
<spring:message code="traffic_ipactive_chart"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 第2行 -->
|
||||
<div class="data_main1">
|
||||
<div class="main_left1 fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="传输层协议"/> <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 id="chart_transport" style="width:100%;height:400px;"></div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_right fr">
|
||||
<div class="main_center1 fl">
|
||||
<div class="center_text1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="traffic_app_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- <div class="choice">
|
||||
<label for="">类型：</label>
|
||||
<select name="" id="">
|
||||
<option value="">核心</option>
|
||||
<option value="">其它</option>
|
||||
</select>
|
||||
</div> -->
|
||||
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%-- <div class="main_right1 fr">
|
||||
<div class="right_1">
|
||||
<div class="main_title">
|
||||
<!-- <img src="img/title_4.png" alt=""> -->
|
||||
<div class="main_title1">
|
||||
<spring:message code="traffic_app_chart"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- <div class="choice">
|
||||
@@ -144,66 +180,75 @@
|
||||
</select>
|
||||
</div> -->
|
||||
<div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
||||
<!-- ================ -->
|
||||
</div>
|
||||
</div> --%>
|
||||
</div>
|
||||
<!-- 第3行 -->
|
||||
<%-- <div class="data_main2">
|
||||
<!-- 中图 -->
|
||||
<div class="main_center2 fl">
|
||||
<div class="center_text2">
|
||||
<div class="main_title2">
|
||||
<spring:message code="业务分类"/> <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>
|
||||
</div>
|
||||
<div class="main_right2 fr">
|
||||
<div class="right_1">
|
||||
<div class="main_title2">
|
||||
<spring:message code="传输层协议"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div id="chart_3" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
--%>
|
||||
<!-- 第4行 -->
|
||||
<div class="data_bottom">
|
||||
<div class="bottom_1 fl">
|
||||
<div class="main_title">
|
||||
<!-- <img src="img/title_6.png" alt=""> -->
|
||||
<spring:message code="traffic_ua_list"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th>
|
||||
<div class="choice">
|
||||
<select name="uaSelect" id="uaSelect">
|
||||
<option value="system"><spring:message code="os"/></option>
|
||||
<option value="browser"><spring:message code="browser"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData1">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>mac</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Linux</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_1 fl">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_ua_list"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th>
|
||||
<div class="choice">
|
||||
<select name="uaSelect" id="uaSelect">
|
||||
<option value="system"><spring:message code="os"/></option>
|
||||
<option value="browser"><spring:message code="browser"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData1">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom_center fl">
|
||||
<div class="bottom_2 fl">
|
||||
<div class="main_title">
|
||||
<!-- <img src="img/title_6.png" alt=""> -->
|
||||
<spring:message code="traffic_ua_chart"/>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
||||
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_3 fl">
|
||||
<%-- <div class="bottom_3 fl">
|
||||
<div class="main_title">
|
||||
<!-- <img src="img/title_6.png" alt=""> -->
|
||||
<spring:message code="traffic_website_list"/> <a href="#"><i class="fa fa-list-ul"></i></a>
|
||||
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
@@ -217,35 +262,141 @@
|
||||
<tbody id="tbodyData2">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>百度</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>腾讯</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Google</td>
|
||||
<td>baidu.com</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_4 fr">
|
||||
--%>
|
||||
<div class="bottom_3 fl">
|
||||
<div class="center_text2">
|
||||
<div class="main_title">
|
||||
<spring:message code="业务分类"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- 业务分类图 --><div id="chart_serviceType" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%-- <div class="bottom_4 fr">
|
||||
<div class="main_title">
|
||||
<!-- <img src="img/title_5.png" alt=""> -->
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
--%>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第5行 -->
|
||||
<div class="data_bottom2">
|
||||
<div class="bottom_12 fl">
|
||||
<div class="main_title2">
|
||||
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table2">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th><spring:message code="website"/></th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData2">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>baidu.com</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom_center2 fl">
|
||||
<div class="bottom_22 fl">
|
||||
<div class="main_title2">
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div>
|
||||
<div class="main_table2">
|
||||
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%-- <div class="bottom_32 fl">
|
||||
<div class="center_text22">
|
||||
<div class="main_title2">
|
||||
<spring:message code="活跃端口图"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<!-- 活跃端口图 --><div id="chart_port" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div> --%>
|
||||
|
||||
<!-- 活跃端口图 -->
|
||||
<div class="bottom_32 fl">
|
||||
<div class="main_title2">
|
||||
<spring:message code="活跃端口图"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table2">
|
||||
<table id="contentTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th><spring:message code="port"/></th>
|
||||
<th><spring:message code="访问次数"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyDataPort">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="demo1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--content结束-->
|
||||
<!-- 列表显示 -->
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
@@ -253,16 +404,28 @@
|
||||
<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/pages/scripts/paginate.js"></script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$("#demo1").paginate({
|
||||
count : 10, //页数
|
||||
start : 1, //开始打开第几页
|
||||
display : 3, //显示几个页数 : true,
|
||||
border_color : '#3D3D3D',
|
||||
text_color : '#757575',
|
||||
background_color : '#303030',
|
||||
border_hover_color : '#3D3D3D',
|
||||
text_hover_color : '#fff',
|
||||
background_hover_color : '#3D3D3D',
|
||||
images : false,
|
||||
mouse : 'press'
|
||||
});
|
||||
//动态显示数据
|
||||
dataScroll(".numberRun",43113);
|
||||
dataScroll(".numberRun1",13414);
|
||||
dataScroll(".numberRun2",1235137653);
|
||||
dataScroll(".numberRun3",2134634);
|
||||
dataScroll(".numberRun4",1234656);
|
||||
|
||||
ajaxinfo();
|
||||
setInterval(function(){
|
||||
ajaxinfo();
|
||||
},6000);
|
||||
|
||||
protocolList();//协议统计
|
||||
ipActiveList();//活跃IP
|
||||
@@ -278,14 +441,59 @@ $(document).ready(function(){
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//获取数据info
|
||||
function ajaxinfo(){
|
||||
var c2s = $(".c2sNum").text().trim();
|
||||
var s2c = $(".s2cNum").text().trim();
|
||||
$.ajax({
|
||||
url:'${ctx}/dashboard/traffic/info',
|
||||
type : "get" ,
|
||||
dataType:'json',
|
||||
async:true,
|
||||
success:function (data){
|
||||
dataScroll(".numberRun",data.rejectNum);
|
||||
dataScroll(".numberRun1",data.newUniConn);
|
||||
dataScroll(".numberRun2",data.liveConnNum);
|
||||
dataScroll(".numberRun3",data.dropConnNum);
|
||||
dataScroll(".numberRun4",data.bandwidth);
|
||||
//计算带宽进出口流量百分比
|
||||
$("#c2sColor").removeClass();
|
||||
$("#s2cColor").removeClass();
|
||||
if(data.c2sNum!=c2s){
|
||||
$(".c2sNum").text(data.c2sNum);
|
||||
$(".s2cNum").text(100-data.c2sNum);
|
||||
if(data.c2sNum>c2s){
|
||||
//c2s增长 fa fa-arrow-up
|
||||
$("#c2sColor").addClass("fa fa-arrow-up");
|
||||
$("#c2sColor").attr({style:"color:green"});
|
||||
$("#s2cColor").addClass("fa fa-arrow-down");
|
||||
$("#s2cColor").attr({style:"color:red"});
|
||||
}
|
||||
//c2s下降
|
||||
if(data.c2sNum<c2s){
|
||||
$("#c2sColor").addClass("fa fa-arrow-down");
|
||||
$("#c2sColor").attr({style:"color:red"});
|
||||
$("#s2cColor").addClass("fa fa-arrow-up");
|
||||
$("#s2cColor").attr({style:"color:green"});
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
// warning_prompt("获取实时列表数据失败！",1500);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
//动态显示数据
|
||||
function dataScroll(index,num){
|
||||
var numRun = $(index).numberAnimate({num:num, speed:2000, symbol:","});
|
||||
var nums = 1000;
|
||||
setInterval(function(){
|
||||
nums-= 1000;
|
||||
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);
|
||||
// },2000);
|
||||
|
||||
}
|
||||
|
||||
|
||||
151
src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
Normal file
151
src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
Normal file
@@ -0,0 +1,151 @@
|
||||
<%@ 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>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css">
|
||||
|
||||
|
||||
<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/bandwidthList'"><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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="padding-right: 1px; ">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body" style="height: 500px;">
|
||||
<h5 class="ng-binding">网络带宽统计数据</h5>
|
||||
<div id="deviceRank" class="drank hm-scroll">
|
||||
<table>
|
||||
<tbody>
|
||||
<!-- ngRepeat: item in rankItems -->
|
||||
<tr class="dtr active" onClick="rankItemChanged(id, name)" style="">
|
||||
<td class="dtd1"><span class="ng-binding" style="">Total</span></td>
|
||||
<td class="dtd2"><span class="tz" style="width: 100%; max-width: 100px;"></span></td>
|
||||
<td class="dtd3"><span class="dy ng-binding1">234567891</span></td>
|
||||
</tr>
|
||||
<!-- end ngRepeat: item in rankItems -->
|
||||
<tr class="dtr" onClick="rankItemChanged(id, name)" style="">
|
||||
<td class="dtd1"><span class="ng-binding">c2s</span></td>
|
||||
<td class="dtd2"><span class="tz tz-from" style="width: 86.55%; max-width: 100px;"></span></td>
|
||||
<td class="dtd3"><span class="dy ng-binding2">123456789</span></td>
|
||||
</tr>
|
||||
<!-- end ngRepeat: item in rankItems -->
|
||||
<tr class="dtr" onClick="rankItemChanged(id, name)" style="">
|
||||
<td class="dtd1"><span class="ng-binding">s2c</span></td>
|
||||
<td class="dtd2"><span class="tz tz-to" style="width: 5.59%; max-width: 100px;"></span></td>
|
||||
<td class="dtd3"><span class="dy ng-binding3">1234</span></td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9" style="padding-left: 8px;">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body" style="height: 500px">
|
||||
<h5 class="ng-binding">网络带宽变化趋势</h5>
|
||||
<div id="trend" style="height: 400px; position: relative;" >
|
||||
<div style="position: relative;">
|
||||
<div id="chart" style="width:96%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css" type="text/css" />
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
showBandwidthChart();
|
||||
clickTrShowChart();
|
||||
|
||||
});
|
||||
//点击列表显示统计图
|
||||
function clickTrShowChart(response){
|
||||
$("tbody .dtr").on("click",function(){
|
||||
$("tbody tr").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
showBandwidthChart();//
|
||||
})
|
||||
}
|
||||
//点击列表显示统计图
|
||||
function rankItemChanged(id,name){
|
||||
$.ajax({
|
||||
url:"${ctx}/#",
|
||||
type:"get",
|
||||
data:{"id":id},
|
||||
dataType:"json",
|
||||
async:true,
|
||||
success:function (data){
|
||||
showBandwidthChart();
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
/* 网络带宽时间维度趋势图 */
|
||||
function showBandwidthChart(){
|
||||
var chart = Highcharts.chart('chart', {
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'bps'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
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: 'bps',
|
||||
// type:'spline',
|
||||
data: [43934, 32503, 57177, 69658, 97031, 69931, 87133, 54175]
|
||||
}],
|
||||
|
||||
responsive: {
|
||||
rules: [{
|
||||
condition: {
|
||||
maxWidth: 500
|
||||
},
|
||||
chartOptions: {
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,197 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8"%>
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>协议类型</title>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
</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/protocolTypeList'"><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="protocol_type"></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}/dashboard/traffic/protocolTypeList" 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="box-1 mt20">
|
||||
|
||||
<div class="clearfix">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<table id="contentTable" class="table table-hover table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl" width="100">协议名称</th>
|
||||
<th class="tl" width="100">总量</th>
|
||||
<th class="tl" width="80">比例</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td class="tc">TCP</td>
|
||||
<td class="tc">1</td>
|
||||
<td class="tc">
|
||||
25.0%
|
||||
</td>
|
||||
<td>
|
||||
<div class="c-progress c-progress-inline-2">
|
||||
<div class="c-progress-bar" style="width:25%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="tc">HTTP</td>
|
||||
<td class="tc">1</td>
|
||||
<td class="tc">
|
||||
45.0%
|
||||
</td>
|
||||
<td>
|
||||
<div class="c-progress c-progress-inline-2">
|
||||
<div class="c-progress-bar" style="width:45%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="tc">UDP</td>
|
||||
<td class="tc">1</td>
|
||||
<td class="tc">
|
||||
25.0%
|
||||
</td>
|
||||
<td>
|
||||
<div class="c-progress c-progress-inline-2">
|
||||
<div class="c-progress-bar" style="width:25%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="tc">其他</td>
|
||||
<td class="tc">0</td>
|
||||
<td class="tc">
|
||||
60.0%
|
||||
</td>
|
||||
<td>
|
||||
<div class="c-progress c-progress-inline-2">
|
||||
<div class="c-progress-bar" style="width:62%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<%-- <div class="page">${page}</div> --%>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div id="chart" style="height: 430px; -moz-user-select: none; position: relative; background: transparent none repeat scroll 0% 0%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</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: null
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'bps'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled:false
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
<script type="text/html" id="tpl-searchEngines">
|
||||
{{each list as item}}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="badge-square" style="background-color:{{item.color}}"></div>{{item.name}}</td>
|
||||
<td class="tc">{{item.value}}</td>
|
||||
<td class="tc">
|
||||
{{(item.rate*100).toFixed(1)}}%
|
||||
</td>
|
||||
<td>
|
||||
<div class="c-progress c-progress-inline-2">
|
||||
<div class="c-progress-bar" style="width:{{item.rate*100}}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</script>
|
||||
<script>
|
||||
var chartData = {"code":200,"msg":null,"data":{"searchEngineTotalIp":4,"totalIp":63,"rate":0.0635,"list":[{"name":"TCP","value":1,"rate":0.25,"totalIp":4},{"name":"UDP","value":1,"rate":0.25,"totalIp":4},{"name":"DNS","value":1,"rate":0.25,"totalIp":4},{"name":"FTP","value":0,"rate":0,"totalIp":4},{"name":"其他","value":0,"rate":0,"totalIp":4}]}}
|
||||
</script>
|
||||
<%-- <script src="${pageContext.request.contextPath}/static/pages/scripts/contentAnalysis.js"></script> --%>
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,28 +2,46 @@
|
||||
<%@ include file="/WEB-INF/include/taglib.jsp"%>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
<spring:message code="traffic_ip_active"></spring:message>
|
||||
</title>
|
||||
<title>网站主题服务分类</title>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
</head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
<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/webTypeList'"><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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<%--
|
||||
<embed width="700px" height="500px" src="${pageContext.request.contextPath}/static/global/plugins/highcharts/svg.svg"></embed>
|
||||
--%>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- -->
|
||||
<div id="chart" style="width:100%;height:400px;"></div>
|
||||
|
||||
<div class="col-md-12">
|
||||
@@ -31,7 +49,7 @@
|
||||
<div class="portlet-body">
|
||||
|
||||
<div class="row" >
|
||||
<form:form id="searchForm" modelAttribute="entry" action="${ctx}/traffic/ipActiveList" method="post" class="form-search">
|
||||
<form:form id="searchForm" modelAttribute="entry" action="${ctx}/dashboard/webTypeList" 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>
|
||||
@@ -49,6 +67,9 @@
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.tbody .tr:active{
|
||||
background: rgb(210, 232, 251, 0.8);
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
@@ -61,13 +82,13 @@
|
||||
</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">
|
||||
<table id="contentTable" style="width: 35%;" class="table table-hover 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="网站"/></th>
|
||||
<%-- <th><spring:message code="area_id"/></th> --%>
|
||||
<th><spring:message code="访问次数"/></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>
|
||||
@@ -80,7 +101,7 @@
|
||||
<tr>
|
||||
<td>${entry.id }</td>
|
||||
<td>${entry.ipAddr }</td>
|
||||
<td>${entry.areaId }</td>
|
||||
<%-- <td>${entry.areaId }</td> --%>
|
||||
<td>${entry.linkNum }</td>
|
||||
<td>${entry.c2sPktNum }</td>
|
||||
<td>${entry.s2cPktNum }</td>
|
||||
@@ -93,22 +114,22 @@
|
||||
</table>
|
||||
<div class="page">${page}</div>
|
||||
</div>
|
||||
<div class="right-table" style="width: 32%;float: right;" >
|
||||
<div class="right-table" style="width: 30%;float: right;" >
|
||||
<h3>
|
||||
<span class="title-num"> 1 </span>
|
||||
<label>详细性质</label>
|
||||
<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>
|
||||
<tr><td><spring:message code="新闻"/></td><td>12131</td></tr>
|
||||
<tr><td><spring:message code="军事"/></td><td>241241</td></tr>
|
||||
<tr><td><spring:message code="娱乐"/></td><td>31412</td></tr>
|
||||
<tr><td><spring:message code="游戏"/></td><td>34655</td></tr>
|
||||
<tr><td><spring:message code="科技"/></td><td>37457</td></tr>
|
||||
<tr><td><spring:message code="。。"/></td><td>33457</td></tr>
|
||||
<tr><td><spring:message code="。。"/></td><td>38468</td></tr>
|
||||
<tr><td><spring:message code="。。"/></td><td>3367</td></tr>
|
||||
<tr><td><spring:message code="。。"/></td><td>33456</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -121,11 +142,11 @@
|
||||
$(document).ready(function(){
|
||||
var chart = Highcharts.chart('chart', {
|
||||
title: {
|
||||
text: '网络带宽'
|
||||
text: '网站分类'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Pkt'
|
||||
text: 'bps'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
Reference in New Issue
Block a user