gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.新 httpclient版本到4.5.6，解决凯歌提出的4.4.1版本存在的连接可能出现失败问题

Browse Source 
2.提交图标样式更改
This commit is contained in:
zhanghongqing
2018-09-10 11:39:04 +08:00
parent 7f918963a0
commit c5fb19c695
23 changed files with 1826 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
lib/commons-logging-1.2.jar Normal file
View File

Binary file not shown.

BIN
lib/fluent-hc-4.5.6.jar Normal file
View File

Binary file not shown.

BIN
lib/httpclient-4.5.6.jar Normal file
View File

Binary file not shown.

BIN
lib/httpclient-cache-4.5.6.jar Normal file
View File

Binary file not shown.

BIN
lib/httpclient-win-4.5.6.jar Normal file
View File

Binary file not shown.

BIN
lib/httpcore-4.4.6.jar Normal file
View File

Binary file not shown.

BIN
lib/httpmime-4.5.6.jar Normal file
View File

Binary file not shown.

BIN
lib/jna-4.4.0.jar Normal file
View File

Binary file not shown.

BIN
lib/jna-platform-4.4.0.jar Normal file
View File

Binary file not shown.

2
pom.xml
View File

@@ -675,7 +675,7 @@
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.4</version>
<version>4.5.6</version>
</dependency>
<!-- <dependency>
<groupId>javax.ws.rs</groupId>

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

@@ -407,7 +407,7 @@ public class DashboardController extends BaseController{
return resultList;
}
@RequestMapping(value="ipActiveList")
@RequestMapping(value="webTypeList")
public String ipActiveList( HttpServletRequest request, HttpServletResponse response, Model model){
PageLog<TrafficIpActiveStatistic> page = new PageLog<TrafficIpActiveStatistic>(request, response);
List list = new ArrayList();
@@ -421,7 +421,23 @@ public class DashboardController extends BaseController{
}
page.setList(list);
model.addAttribute("page", page);
return "/dashboard/trafficConnList";
return "/dashboard/trafficWebTypeList";
}
@RequestMapping(value="bandwidthList")
public String bandwidthList( HttpServletRequest request, HttpServletResponse response, Model model){
PageLog<TrafficIpActiveStatistic> page = new PageLog<TrafficIpActiveStatistic>(request, response);
List list = new ArrayList();
for (int i = 1; i < 10; i++) {
TrafficIpActiveStatistic ip = new TrafficIpActiveStatistic();
ip.setId(i);
ip.setIpAddr(3+i+".1.1."+i);
ip.setAreaId("11");
ip.setLinkNum(1212);
list.add(ip);
}
page.setList(list);
model.addAttribute("page", page);
return "/dashboard/trafficBandwidthList";
}
@@ -451,7 +467,7 @@ public class DashboardController extends BaseController{
// String json = new Gson().toJson();
model.addAttribute("ipAddr",ipAddr);
model.addAttribute("chartMap",list);
return "/dashboard/trafficIpActiveChart";
return "/dashboard/trafficWebTypeList";
}
public class TrafficIpActiveStatistic{
Integer id=1;

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

@@ -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"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
<spring:message code="traffic_ipactive_chart"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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="传输层协议"/>&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 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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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="业务分类"/>&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>
</div>
<div class="main_right2 fr">
<div class="right_1">
<div class="main_title2">
<spring:message code="传输层协议"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<a href="#"><i class="fa fa-list-ul"></i></a>
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<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="业务分类"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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="活跃端口图"/>&nbsp;&nbsp;<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="活跃端口图"/>&nbsp;&nbsp;<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
View 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>

197
src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp Normal file
View File

@@ -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>

75
src/main/webapp/WEB-INF/views/dashboard/trafficConnList.jsp → src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp
View File

@@ -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">&nbsp;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: {

11
src/main/webapp/static/global/plugins/bootstrap/css/bootstrap.css vendored
View File

@@ -2101,7 +2101,9 @@ th {
background-color: #fbfcfd; }
.table-hover > tbody > tr:hover {
background-color: #eef1f5; }
/* background-color: #eef1f5; */
background: rgb(210, 232, 251, 0.8);
}
table col[class*="col-"] {
position: static;
@@ -2126,14 +2128,17 @@ table th[class*="col-"] {
.table > tfoot > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th {
background-color: #eef1f5; }
background: rgb(210, 232, 251, 0.8);
/* background-color: #eef1f5; */ }
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
background-color: #dee5ec; }
/* background-color: #dee5ec; */
background: rgb(210, 232, 251, 0.8);
}
.table > thead > tr > td.success,
.table > thead > tr > th.success,

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

@@ -118,8 +118,8 @@ p{
margin-top: 1px;
}
.data_content .data_info>div.info_2 .fl_fc .csNum{
font-size: 5px;
color:#ff4e4e !important;
font-size: 12px;
color:#337ab7 !important;
margin-top: 1px;
}
/* .data_info{
@@ -143,14 +143,14 @@ p{
*zoom: 1; /*IE/7/6*/
}
/************** info end ***********************/
/* 第一行图 */
.data_content .data_main{
width: calc(100% - 30px);
height: 430px;
margin-left: 15px;
}
.data_content .data_main .main_left{
width: 26%;
width: 55%;
}
.data_content .data_main .main_left>div{
width: 100%;
@@ -164,15 +164,12 @@ p{
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main .main_left div.left_1{
/*background: url("../img/chart_1.png") no-repeat center;*/
}
.data_content .data_main .main_left div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main .main_left div .main_title{
width: 230px;
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
@@ -180,7 +177,7 @@ p{
position: absolute;
top: -17px;
left:45%;
margin-left: -90px;
margin-left: -100px;
color:#fff;
font-size: 18px;
font-weight: 600;
@@ -189,20 +186,14 @@ p{
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main .main_left div .main_title img{
position: absolute;
top: 8px;
left: 15px;
}
.data_content .data_main .main_center{
width: 46%;
width: 45%;
height: 400px;
}
.data_content .data_main .main_center .center_text{
width: calc(100% - 30px);
width: calc(100% - 16px);
height: 400px;
margin-left: 15px;
margin-right: 15px;
@@ -213,7 +204,6 @@ p{
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
/*background: url("../img/chart_map.png") no-repeat center ;*/
}
.data_content .data_main .main_center .main_title{
width: 250px;
@@ -223,7 +213,7 @@ p{
position: absolute;
top: -17px;
left:50%;
margin-left: -90px;
margin-left: -110px;
color:#fff;
font-size: 18px;
font-weight: 600;
@@ -234,7 +224,7 @@ p{
}
.data_content .data_main .main_right{
width: 28%;
width: 26%;
}
.data_content .data_main .main_right>div{
width: 100%;
@@ -257,40 +247,11 @@ p{
color:#fff;
}
.data_content .data_main .main_right div.right_2{
/*background: url("../img/chart_4.png") no-repeat center;*/
}
/* .data_content .data_main .main_right div.right_2 .chart_text {
width: 18%;
color:#fff;
text-align: center;
margin-top: 12px;
}
.data_content .data_main .main_right div.right_2 .chart_text p{
margin-top: 21px;
}
.data_content .data_main .main_right div.right_2 .chart_text p img{
margin-right: 5px;
margin-top: -4px;
}
.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){
font-size: 14px;
font-weight: 600;
} */
/* .data_content .data_main .main_right div.right_2 .text_sum{
text-align: center;
color:#ffff43;
font-weight: 600;
}
.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){
font-size: 18px;
font-weight: 600;
} */
.data_content .data_main .main_right div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main .main_right div .main_title{
width: 230px;
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
@@ -298,7 +259,7 @@ p{
position: absolute;
top: -17px;
left:45%;
margin-left: -90px;
margin-left: -100px;
color:#fff;
font-size: 18px;
font-weight: 600;
@@ -307,13 +268,257 @@ p{
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main .main_right div .main_title img{
position: absolute;
top: 8px;
left: 15px;
/* 第2行图 */
.data_content .data_main1{
width: calc(100% - 30px);
height: 430px;
margin-left: 15px;
}
.data_content .data_main1 .main_left1{
width: 50%;
}
.data_content .data_main1 .main_left1>div{
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*box-shadow: 0px 0px 10px #3D3D3D inset;*/
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main1 .main_left1 div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main1 .main_left1 div .main_title1{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
position: absolute;
top: -17px;
left:45%;
margin-left: -100px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main1 .main_center1{
width: 49%;
height: 400px;
}
.data_content .data_main1 .main_center1 .center_text1{
width: calc(100% - 5px);
height: 400px;
margin-left: 15px;
margin-right: 15px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main1 .main_center1 .main_title1{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
position: absolute;
top: -17px;
left:50%;
margin-left: -110px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main1 .main_right1{
width: 50%;
}
.data_content .data_main1 .main_right1>div{
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main1 .main_right1 div.right_1 .choice{
position: absolute;
top: 25px;
right: 30px;
z-index: 1000;
}
.data_content .data_main1 .main_right1 div.right_1 .choice label{
color:#fff;
}
.data_content .data_main1 .main_right1 div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main1 .main_right1 div .main_title1{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
position: absolute;
top: -17px;
left:45%;
margin-left: -100px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
/* 第3行图 */
.data_content .data_main2{
width: calc(100% - 30px);
height: 430px;
margin-left: 15px;
}
.data_content .data_main2 .main_left2{
width: 30%;
}
.data_content .data_main2 .main_left2>div{
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*box-shadow: 0px 0px 10px #3D3D3D inset;*/
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main2 .main_left2 div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main2 .main_left2 div .main_title2{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
position: absolute;
top: -17px;
left:45%;
margin-left: -100px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main2 .main_center2{
width: 40%;
height: 400px;
}
.data_content .data_main2 .main_center2 .center_text2{
width: calc(100% - 30px);
height: 400px;
margin-left: 15px;
margin-right: 15px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main2 .main_center2 .main_title2{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
position: absolute;
top: -17px;
left:50%;
margin-left: -110px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
.data_content .data_main2 .main_right2{
width: 30%;
}
.data_content .data_main2 .main_right2>div{
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
}
.data_content .data_main2 .main_right2 div.right_1 .choice{
position: absolute;
top: 25px;
right: 30px;
z-index: 1000;
}
.data_content .data_main2 .main_right2 div.right_1 .choice label{
color:#fff;
}
.data_content .data_main2 .main_right2 div:nth-child(1){
margin-bottom: 5px;
}
.data_content .data_main2 .main_right2 div .main_title2{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
position: absolute;
top: -17px;
left:45%;
margin-left: -100px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
z-index: 1000;
border-radius:18px !important;
}
/* 第4行图 */
.data_content .data_bottom{
width: calc(100% - 30px);
height: 430px;
@@ -324,7 +529,7 @@ p{
}
.data_content .data_bottom .bottom_1{
width: 22%;
width: 26%;
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
@@ -336,11 +541,11 @@ p{
/*background: url("../img/chart_5.png") no-repeat;*/
}
.data_content .data_bottom .bottom_center{
width: 52%;
width: 74%;
height: 430px;
}
.data_content .data_bottom .bottom_2{
width: calc(53% - 10px);
width: calc(53% - 15px);
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
@@ -353,7 +558,7 @@ p{
/*background: url("../img/chart_6.png") no-repeat;*/
}
.data_content .data_bottom .bottom_3{
width: calc(47% - 35px);
width: calc(47% - 15px);
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
@@ -362,30 +567,29 @@ p{
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*background: url("../img/chart_7.png") no-repeat;*/
margin-left:15px;
}
.data_content .data_bottom .bottom_4{
/* .data_content .data_bottom .bottom_4{
width: 26%;
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset;
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*background: url("../img/chart_8.png") no-repeat;*/
}
background: url("../img/chart_8.png") no-repeat;
} */
.data_content .data_bottom div .main_title{
width: 220px;
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
position: absolute;
top: -17px;
left:50%;
left:45%;
margin-left: -110px;
color:#fff;
font-size: 18px;
@@ -394,11 +598,6 @@ p{
text-align:center;
border-radius:18px !important;
}
.data_content .data_bottom div .main_title img{
position: absolute;
top: 8px;
left: 15px;
}
.data_content .data_bottom div .main_table tr{
height: 36px;
@@ -443,3 +642,128 @@ p{
10px 0px 15px #3D3D3D inset; /*右边阴影*/
/*0px 10px 15px #3D3D3D inset;*/
}
/* 第5行图 */
.data_content .data_bottom2{
width: calc(100% - 30px);
height: 430px;
margin-left: 15px;
margin-top: 30px;
}
.data_content .data_bottom2 div{
}
.data_content .data_bottom2 .bottom_12{
width: 26%;
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*background: url("../img/chart_5.png") no-repeat;*/
}
.data_content .data_bottom2 .bottom_center2{
width: 74%;
height: 430px;
}
.data_content .data_bottom2 .bottom_22{
width: calc(53% - 15px);
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
margin-left: 15px;
/*background: url("../img/chart_6.png") no-repeat;*/
}
.data_content .data_bottom2 .bottom_32{
width: calc(47% - 15px);
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*background: url("../img/chart_7.png") no-repeat;*/
margin-left:15px;
}
.data_content .data_bottom2 .bottom_42{
width: 26%;
height: 430px;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative;
box-sizing: border-box;
border: 1px solid #3D3D3D;
/*background: url("../img/chart_8.png") no-repeat;*/
}
.data_content .data_bottom2 div .main_title2{
width: 250px;
height: 35px;
line-height: 33px;
background-color: #3D3D3D;
border-radius: 18px;
position: absolute;
top: -17px;
left:45%;
margin-left: -110px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
text-align:center;
border-radius:18px !important;
}
.data_content .data_bottom2 div .main_table2 tr{
height: 36px;
}
.data_content .data_bottom2 div .main_table2{
width: 100%;
margin-top: 25px;
}
.data_content .data_bottom2 div .main_table2 table{
width: 100%;
}
.data_content .data_bottom2 div .main_table2 thead tr{
height: 36px;
}
.data_content .data_bottom2 div .main_table2 th{
font-size: 14px;
font-weight: 600;
color:#757575;
text-align: center;
}
.data_content .data_bottom2 div .main_table2 th:nth-child(1){
width: 30%;
}
.data_content .data_bottom2 div .main_table2 th:nth-child(2){
width: 35%;
}
.data_content .data_bottom2 div .main_table2 th:nth-child(2){
width: 35%;
}
.data_content .data_bottom2 div .main_table2 td{
color:#3D3D3D;
font-size: 12.8px;
text-align: center;
}
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(1),
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(3),
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(7),
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(9),
.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(5){
background-color: #303030;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
10px 0px 15px #3D3D3D inset; /*右边阴影*/
/*0px 10px 15px #3D3D3D inset;*/
}

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

@@ -31,7 +31,7 @@
var chart = Highcharts.chart('chart_1', {
chart: {
type: 'pie',
spacing : [40, 0 , 40, 0],
spacing : [40, 40 , 40, 40],
backgroundColor: 'rgba(255, 255, 255, 0)',
plotBackgroundColor:null,
plotBorderWidth:null,
@@ -89,13 +89,13 @@
events: {
mouseOver: function(e) { // 鼠标滑过时动态更新标题
// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
chart.setTitle({
/*chart.setTitle({
text: '<br>'+e.target.name,
style: {//设置字体颜色
color: '#fff',
fontFamily:'Microsoft YaHei'
},
});
});*/
this.slice();
},
// 鼠标移出时，收回突出显示

188
src/main/webapp/static/pages/css/bandwidth.css Normal file
View File

@@ -0,0 +1,188 @@
/*global css framework*/
/*/*@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");/*!
* bootswatch v3.3.7
* Homepage: http://bootswatch.com
* Copyright 2012-2016 Thomas Park
* Licensed under MIT
* Based on Bootstrap
*//*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
/*plugins css*/
/*@import (inline) '../../bower_components/angular-ui-select/dist/select.min.css';*/
/* color settings*/
/* font-size settings*/
/*page styles*/
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
color: #333;
font-size: 12px;
font-family: "Microsoft YaHei Light", "Arial Narrow", Arial, "sans-serif";
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
a,
a:hover {
color: #333;
cursor: pointer;
text-decoration: none !important;
}
hr {
margin-top: 5px;
margin-bottom: 5px;
border: 0;
border-top: 1px solid #e1e1e6;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "Microsoft YaHei Light", "Arial Narrow", Arial, "sans-serif";
}
.body {
background-color: #f5f5f5;
height: auto;
}
a {
margin-right: 10px;
margin-left: 10px;
}
.active a {
font-weight: 500;
color: #84c1ff;
border-bottom-style: solid;
border-bottom-color: #84c1ff;
border-bottom-width: 3px;
padding-bottom: 12px;
}
a:hover {
color: #84c1ff;
}
.tz {
height: 8px;
line-height: 30px;
display: block;
background-color: #4aa6fc;
}
.ty {
height: 8px;
line-height: 30px;
display: block;
background-color: #02a4ca;
}
.dy {
float: right !important;
margin-left: 15px;
}
.panel5 {
border: none;
}
.table {
table-layout: fixed;
}
.panel5-body {
padding-top: 0px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
height: 300px;
}
.row {
margin-left: 0px;
margin-right: 0px;
}
body {
font-family: Arial, "Microsoft Yahei", Helvetica, STHeitiSC-Light, sans-serif;
}
body h3,
h4,
h5,
h6 {
font-family: Arial, "Microsoft Yahei", Helvetica, STHeitiSC-Light, sans-serif;
}
body {
background-color: #f5f5f5;
}
button {
padding: 0 0;
}
a.ph,
button.ph {
color: #cfd2da;
}
.brank {
width: 520px;
height: 155px;
overflow: hidden;
overflow-x: hidden;
border-top: solid 1px #eeeeee;
}
.brank:hover {
overflow: auto;
}
.dtr {
height: 28px;
border-bottom: solid 1px #eeeeee;
border-spacing: 10px;
outline: none;
}
.dtr:hover {
background: rgb(210, 232, 251, 0.8);
color: #195b9f;
}
tbody .active {
background: rgb(210, 232, 251, 0.8);
color: #195b9f;
}
.dtd1 {
width: 60px;
max-width: 110px;
font-size: 100%;
padding-left: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dtd3 {
width: 80px;
max-width: 70px;
font-size: 100%;
padding-right: 10px;
}
.dtd2 {
position: relative;
padding: 15px 20px;
margin-bottom: -1px;
background-color: transparent;
width: 125px;
display: table-cell;
vertical-align: middle;
}
.drank {
width: 302px;
height: 405px;
overflow: hidden;
overflow-x: hidden;
}
.drank:hover {
overflow: auto;
}

250
src/main/webapp/static/pages/css/dashboard.css
View File

@@ -3,3 +3,253 @@
.mt-number-animate .mt-number-animate-dot{ width: 10px;/*设置分割符宽度*/ line-height: 20px; float: left; text-align: center;}
.mt-number-animate .mt-number-animate-dom{ width: 10px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;}
.mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;}
/* protocolType */
.box-1 {
background: #fff;
border: 1px solid #e3e6e9;
border-radius: 5px;
padding: 20px
}
.box-1 .btn-download {
color: #666
}
.box-1 .btn-download .iconfont {
margin-right: 5px
}
.box-1 .btn-download:hover {
color: #999
}
.c-table-responsive {
width: 100%;
overflow-x: auto
}
.c-table-responsive table {
border: 1px solid #e3e6e9;
border-radius: 2px;
width: 100%;
max-width: 100%;
border-collapse: collapse
}
.c-table-responsive table thead th {
background-color: #f2f2f2;
font-weight: 700;
vertical-align: baseline;
word-break: break-all
}
.c-table-responsive table td, .c-table-responsive table th {
border-bottom: 1px solid #e3e6e9;
padding: 10px;
line-height: 1.4;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #666;
word-break: break-all
}
.c-table {
border: 1px solid #e3e6e9;
border-radius: 2px;
width: 100%;
max-width: 100%;
border-collapse: collapse;
font-size: 14px
}
.c-table thead th {
background-color: #f2f2f2;
font-weight: 700;
vertical-align: baseline;
word-break: break-all
}
.c-table td, .c-table th {
border-bottom: 1px solid #e3e6e9;
padding: 5px;
line-height: 1.4;
color: #333;
word-break: break-all
}
.c-table td.text-up, .c-table th.text-up {
color: #fe5a5a
}
.c-table td.text-down, .c-table th.text-down {
color: #0fc725
}
.c-table td.active, .c-table th.active {
color: #4aa6fc
}
.c-table td.tl, .c-table th.tl {
text-align: center
}
.c-table td.tr, .c-table th.tr {
text-align: right
}
.c-table td.tc, .c-table th.tc {
text-align: center
}
.c-table tr:nth-child(2n) {
background-color: #fafafa
}
.c-table tbody .nozebra {
background-color: #fff
}
.c-table tr.fixed {
visibility: hidden
}
.c-table tbody tr:nth-child(2n):hover, .c-table tr:hover {
background: rgb(210, 232, 251, 0.8);
}
.c-table tr.fixed+tr {
position: fixed;
display: block;
visibility: visible;
z-index: 1000;
top: 0
}
.c-table.c-table-bordered td, .c-table.c-table-bordered th {
border: 1px solid #e3e6e9
}
.c-table.c-table-nested .btn-expand {
color: #999
}
.c-table.c-table-nested .btn-expand .iconfont {
font-size: 12px
}
.c-table.c-table-nested .tr-nested {
display: none
}
.c-table.c-table-nested .tr-nested>td {
padding-top: 6px;
padding-bottom: 6px;
background-color: #f9f9f9
}
.c-table .c-table-btn-sort {
color: #333;
position: relative;
margin-right: 15px
}
.c-table .c-table-btn-sort.desc:after {
border-top-color: #108ee9
}
.c-table .c-table-btn-sort.asc:before {
border-bottom-color: #108ee9
}
.c-table .c-table-btn-sort:before {
top: 2px;
border-bottom: 5px solid #ccc
}
.c-table .c-table-btn-sort:after, .c-table .c-table-btn-sort:before {
content: " ";
position: absolute;
right: -15px;
height: 0;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent
}
.c-table .c-table-btn-sort:after {
top: 10px;
border-top: 5px solid #ccc
}
.c-table .c-table-btn-sort-2 {
color: #666;
cursor: pointer
}
.c-table .c-table-btn-sort-2.sorted, .c-table .c-table-btn-sort-2.sorted:after,
.c-table .c-table-btn-sort-2:hover {
background: rgb(210, 232, 251, 0.8);
color: #73bffd
}
.c-table .c-table-btn-sort-2:after {
content: "\E67C";
font-family: iconfont;
-webkit-text-size-adjust: none;
font-size: 10px;
color: #999;
display: block;
margin-top: 2px
}
.c-table .c-table-btn-sort-2:after:hover {
background: rgb(210, 232, 251, 0.8);
color: #73bffd
}
.c-table.table-bordered td, .c-table.table-bordered th {
border: 1px solid #dedede
}
.c-progress {
background: #dcdcdc;
height: 5px;
font-size: 0;
line-height: 0
}
.c-progress-bar {
background: #4aa6fc;
height: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px
}
.c-progress-inline {
width: 45%
}
.c-progress-inline, .c-progress-inline-2 {
display: inline-block;
vertical-align: middle
}
.c-progress-inline-2 {
width: 100%
}
.tc {
text-align: center
}
/* protocolType end */
/* 端口 port */
.data_content #tbodyDataPort tr td{
color:#fff;
}
/* 端口 port end */

19
src/main/webapp/static/pages/css/paginate.css Normal file
View File

@@ -0,0 +1,19 @@
@charset "utf-8";
.jPaginate{height:34px;position:relative;color:#a5a5a5;font-size:small;width:100%;}
.jPaginate a{line-height:18px;height:18px;overflow:hidden;cursor:pointer;padding:2px 5px;margin:2px;float:left;}
.jPag-control-back{position:absolute;left:0px;}
.jPag-control-front{position:absolute;top:0px;}
.jPaginate span{cursor:pointer;}
ul.jPag-pages{float:left;list-style-type:none;margin:0px 0px 0px 0px;padding:0px;}
ul.jPag-pages li{display:inline;float:left;padding:0px;margin:0px;}
ul.jPag-pages li a{float:left;padding:2px 8px;}
span.jPag-current{cursor:default;font-weight:normal;line-height:18px;height:18px;padding:2px 8px;margin:2px;float:left;}
ul.jPag-pages li span.jPag-previous,ul.jPag-pages li span.jPag-next,span.jPag-sprevious,span.jPag-snext,ul.jPag-pages li span.jPag-previous-img,ul.jPag-pages li span.jPag-next-img,span.jPag-sprevious-img,span.jPag-snext-img{height:22px;margin:2px;float:left;line-height:18px;}
ul.jPag-pages li span.jPag-previous,ul.jPag-pages li span.jPag-previous-img{margin:2px 0px 2px 2px;font-size:12px;font-weight:bold;width:10px;}
ul.jPag-pages li span.jPag-next,ul.jPag-pages li span.jPag-next-img{margin:2px 2px 2px 0px;font-size:12px;font-weight:bold;width:10px;}
span.jPag-sprevious,span.jPag-sprevious-img{margin:2px 0px 2px 2px;font-size:18px;width:15px;text-align:right;}
span.jPag-snext,span.jPag-snext-img{margin:2px 2px 2px 0px;font-size:18px;width:15px; text-align:right;}
ul.jPag-pages li span.jPag-previous-img{background:url(../images/previous.png) no-repeat center right;}
ul.jPag-pages li span.jPag-next-img{background:url(../images/next.png) no-repeat center left;}
span.jPag-sprevious-img{background:url(../images/sprevious.png) no-repeat center right;}
span.jPag-snext-img{background:url(../images/snext.png) no-repeat center left;}

2
src/main/webapp/static/pages/scripts/dashboard.js
View File

@@ -4,7 +4,7 @@
(function($) {
$.fn.numberAnimate = function(setting) {
var defaults = {
speed : 1000,//动画速度
speed : 3000,//动画速度
num : "", //初始化值
iniAnimate : true, //是否要初始化动画效果
symbol : '',//默认的分割符号，千，万，千万

248
src/main/webapp/static/pages/scripts/paginate.js Normal file
View File

@@ -0,0 +1,248 @@
(function($) {
$.fn.paginate = function(options) {
var opts = $.extend({}, $.fn.paginate.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
var selectedpage = o.start;
$.fn.draw(o,$this,selectedpage);
});
};
var outsidewidth_tmp = 0;
var insidewidth = 0;
var bName = navigator.appName;
var bVer = navigator.appVersion;
if(bVer.indexOf('MSIE 7.0') > 0)
var ver = "ie7";
$.fn.paginate.defaults = {
count : 5,
start : 12,
display : 5,
border : true,
border_color : '#fff',
text_color : '#8cc59d',
background_color : 'black',
border_hover_color : '#fff',
text_hover_color : '#fff',
background_hover_color : '#fff',
rotate : true,
images : true,
mouse : 'slide',
onChange : function(){return false;}
};
$.fn.draw = function(o,obj,selectedpage){
if(o.display > o.count)
o.display = o.count;
$this.empty();
if(o.images){
var spreviousclass = 'jPag-sprevious-img';
var previousclass = 'jPag-previous-img';
var snextclass = 'jPag-snext-img';
var nextclass = 'jPag-next-img';
}
else{
var spreviousclass = 'jPag-sprevious';
var previousclass = 'jPag-previous';
var snextclass = 'jPag-snext';
var nextclass = 'jPag-next';
}
var _first = $(document.createElement('a')).addClass('jPag-first').html('First');
if(o.rotate){
if(o.images) var _rotleft = $(document.createElement('span')).addClass(spreviousclass);
else var _rotleft = $(document.createElement('span')).addClass(spreviousclass).html('&laquo;');
}
var _divwrapleft = $(document.createElement('div')).addClass('jPag-control-back');
_divwrapleft.append(_first).append(_rotleft);
var _ulwrapdiv = $(document.createElement('div')).css('overflow','hidden');
var _ul = $(document.createElement('ul')).addClass('jPag-pages')
var c = (o.display - 1) / 2;
var first = selectedpage - c;
var selobj;
for(var i = 0; i < o.count; i++){
var val = i+1;
if(val == selectedpage){
var _obj = $(document.createElement('li')).html('<span class="jPag-current">'+val+'</span>');
selobj = _obj;
_ul.append(_obj);
}
else{
var _obj = $(document.createElement('li')).html('<a>'+ val +'</a>');
_ul.append(_obj);
}
}
_ulwrapdiv.append(_ul);
if(o.rotate){
if(o.images) var _rotright = $(document.createElement('span')).addClass(snextclass);
else var _rotright = $(document.createElement('span')).addClass(snextclass).html('&raquo;');
}
var _last = $(document.createElement('a')).addClass('jPag-last').html('Last');
var _divwrapright = $(document.createElement('div')).addClass('jPag-control-front');
_divwrapright.append(_rotright).append(_last);
//append all:
$this.addClass('jPaginate').append(_divwrapleft).append(_ulwrapdiv).append(_divwrapright);
if(!o.border){
if(o.background_color == 'none') var a_css = {'color':o.text_color};
else var a_css = {'color':o.text_color,'background-color':o.background_color};
if(o.background_hover_color == 'none') var hover_css = {'color':o.text_hover_color};
else var hover_css = {'color':o.text_hover_color,'background-color':o.background_hover_color};
}
else{
if(o.background_color == 'none') var a_css = {'color':o.text_color,'border':'1px solid '+o.border_color};
else var a_css = {'color':o.text_color,'background-color':o.background_color,'border':'1px solid '+o.border_color};
if(o.background_hover_color == 'none') var hover_css = {'color':o.text_hover_color,'border':'1px solid '+o.border_hover_color};
else var hover_css = {'color':o.text_hover_color,'background-color':o.background_hover_color,'border':'1px solid '+o.border_hover_color};
}
$.fn.applystyle(o,$this,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright);
//calculate width of the ones displayed:
var outsidewidth = outsidewidth_tmp - _first.parent().width() -3;
if(ver == 'ie7'){
_ulwrapdiv.css('width',outsidewidth+72+'px');
_divwrapright.css('left',outsidewidth_tmp+6+72+'px');
}
else{
_ulwrapdiv.css('width',outsidewidth+'px');
_divwrapright.css('left',outsidewidth_tmp+6+'px');
}
if(o.rotate){
_rotright.hover(
function() {
thumbs_scroll_interval = setInterval(
function() {
var left = _ulwrapdiv.scrollLeft() + 1;
_ulwrapdiv.scrollLeft(left);
},
20
);
},
function() {
clearInterval(thumbs_scroll_interval);
}
);
_rotleft.hover(
function() {
thumbs_scroll_interval = setInterval(
function() {
var left = _ulwrapdiv.scrollLeft() - 1;
_ulwrapdiv.scrollLeft(left);
},
20
);
},
function() {
clearInterval(thumbs_scroll_interval);
}
);
if(o.mouse == 'press'){
_rotright.mousedown(
function() {
thumbs_mouse_interval = setInterval(
function() {
var left = _ulwrapdiv.scrollLeft() + 5;
_ulwrapdiv.scrollLeft(left);
},
20
);
}
).mouseup(
function() {
clearInterval(thumbs_mouse_interval);
}
);
_rotleft.mousedown(
function() {
thumbs_mouse_interval = setInterval(
function() {
var left = _ulwrapdiv.scrollLeft() - 5;
_ulwrapdiv.scrollLeft(left);
},
20
);
}
).mouseup(
function() {
clearInterval(thumbs_mouse_interval);
}
);
}
else{
_rotleft.click(function(e){
var width = outsidewidth - 10;
var left = _ulwrapdiv.scrollLeft() - width;
_ulwrapdiv.animate({scrollLeft: left +'px'});
});
_rotright.click(function(e){
var width = outsidewidth - 10;
var left = _ulwrapdiv.scrollLeft() + width;
_ulwrapdiv.animate({scrollLeft: left +'px'});
});
}
}
//first and last:
_first.click(function(e){
_ulwrapdiv.animate({scrollLeft: '0px'});
_ulwrapdiv.find('li').eq(0).click();
});
_last.click(function(e){
_ulwrapdiv.animate({scrollLeft: insidewidth +'px'});
_ulwrapdiv.find('li').eq(o.count - 1).click();
});
//click a page
_ulwrapdiv.find('li').click(function(e){
selobj.html('<a>'+selobj.find('.jPag-current').html()+'</a>');
var currval = $(this).find('a').html();
$(this).html('<span class="jPag-current">'+currval+'</span>');
selobj = $(this);
$.fn.applystyle(o,$(this).parent().parent().parent(),a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright);
var left = (this.offsetLeft) / 2;
var left2 = _ulwrapdiv.scrollLeft() + left;
var tmp = left - (outsidewidth / 2);
if(ver == 'ie7')
_ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 52 + 'px'});
else
_ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 'px'});
o.onChange(currval);
});
var last = _ulwrapdiv.find('li').eq(o.start-1);
last.attr('id','tmp');
var left = document.getElementById('tmp').offsetLeft / 2;
last.removeAttr('id');
var tmp = left - (outsidewidth / 2);
if(ver == 'ie7') _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 52 + 'px'});
else _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 'px'});
}
$.fn.applystyle = function(o,obj,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright){
obj.find('a').css(a_css);
obj.find('span.jPag-current').css(hover_css);
obj.find('a').hover(
function(){
$(this).css(hover_css);
},
function(){
$(this).css(a_css);
}
);
obj.css('padding-left',_first.parent().width() + 5 +'px');
insidewidth = 0;
obj.find('li').each(function(i,n){
if(i == (o.display-1)){
outsidewidth_tmp = this.offsetLeft + this.offsetWidth ;
}
insidewidth += this.offsetWidth;
})
_ul.css('width',insidewidth+'px');
}
})(jQuery);