流量统计增加协议详情统计图与列表，列表可分页及导出
This commit is contained in:
zhanghongqing
@@ -148,7 +148,7 @@
|
||||
<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> --%>
|
||||
<spring:message code="traffic_protocol_chart"/> <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a>
|
||||
<a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
|
||||
@@ -556,12 +556,12 @@ function protocolList(){
|
||||
echart_1(rs);
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//活跃IP统计
|
||||
function ipActiveList(){
|
||||
@@ -579,12 +579,12 @@ function ipActiveList(){
|
||||
echart_main(rs);
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//活跃端口统计
|
||||
function portActiveList(){
|
||||
@@ -638,12 +638,12 @@ function portActiveList(){
|
||||
}
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
|
||||
//app应用类型统计
|
||||
@@ -662,12 +662,12 @@ function appTypeList(){
|
||||
echart_3(rs);
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//获取终端用户-操作系统列表 左下
|
||||
function systemList(){
|
||||
@@ -732,12 +732,12 @@ function systemList(){
|
||||
echart_2(rs.reverse());
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
// 点击操作系统列表右侧显示 浏览器图
|
||||
function osClick(osType,obj){
|
||||
@@ -755,12 +755,12 @@ function osClick(osType,obj){
|
||||
success:function (rs) {
|
||||
echart_5(rs.reverse());
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//点击浏览器列表右侧显示 操作系统图
|
||||
function bsClick(bsType,obj){
|
||||
@@ -776,12 +776,12 @@ function bsClick(bsType,obj){
|
||||
success:function (rs) {
|
||||
echart_2(rs.reverse());
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
|
||||
|
||||
@@ -794,7 +794,6 @@ function browserList() {
|
||||
dataType:"json",
|
||||
cache:false,async:true,timeout:10000,//超时时间设置，查询接口时间过长超时
|
||||
beforeSend: function () {
|
||||
|
||||
var msg = "OnLoading...";
|
||||
var trLen = $("#tbodyData1 tr").length;
|
||||
if(trLen<=0) {
|
||||
@@ -802,14 +801,11 @@ function browserList() {
|
||||
}else {
|
||||
$("#tbodyData1").html("")
|
||||
}
|
||||
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1' colspan='3' align='center' style='color:#fff'>"+msg+"</td>";
|
||||
|
||||
$("#tbodyData1").prepend(tr);
|
||||
},
|
||||
success:function (rs) {
|
||||
|
||||
$("#tbodyData1").html("");
|
||||
rs.reverse();
|
||||
var n=rs.length;
|
||||
@@ -825,7 +821,6 @@ function browserList() {
|
||||
bs=bs.substring(0,18);
|
||||
}
|
||||
}
|
||||
|
||||
var count= itemObj.count;
|
||||
var preCount = itemObj.preCount;
|
||||
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:bsClick(\""+itemObj.bsType+"\",this);return false;'>";
|
||||
@@ -847,13 +842,12 @@ function browserList() {
|
||||
//终端图-浏览器
|
||||
echart_5(rs.reverse());
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//获取http网站table列表
|
||||
function websiteList() {
|
||||
@@ -913,13 +907,12 @@ function websiteList() {
|
||||
//网站统计图
|
||||
echart_4(rs.reverse());
|
||||
}
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//点击http网站列表-显示域名图
|
||||
function webClick(websiteServiceId,obj){
|
||||
@@ -927,7 +920,6 @@ function webClick(websiteServiceId,obj){
|
||||
$("#tbodyData2 tr").removeClass("activeColor");
|
||||
loading();
|
||||
$(obj).addClass("activeColor");
|
||||
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/webTypeChart',
|
||||
type : "get" ,
|
||||
@@ -936,13 +928,12 @@ function webClick(websiteServiceId,obj){
|
||||
cache:false,async:true,timeout:10000,//超时时间设置，查询接口时间过长超时
|
||||
success:function (rs) {
|
||||
echart_6(rs);
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
//网站主题
|
||||
function topicAndDomainList(){
|
||||
@@ -955,18 +946,14 @@ function topicAndDomainList(){
|
||||
success:function (rs) {
|
||||
//主题域名流量统计图
|
||||
echart_topic_domain(rs);
|
||||
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
closeTip();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -4,194 +4,294 @@
|
||||
<head>
|
||||
<title>协议类型</title>
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/dashboard.css">
|
||||
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/pagination.css">
|
||||
|
||||
<script src="${pageContext.request.contextPath}/static/pages/scripts/jquery.pagination.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/xlsx.core.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/FileSaver.js"></script>
|
||||
<script src="${ctxStatic }/global/plugins/tableExport-3.3.13/tableexport.js"></script>
|
||||
</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>
|
||||
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/traffic/protocolTypeList'"><i class="fa fa-refresh"></i></button>
|
||||
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><i class="fa fa-history"></i></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>
|
||||
<div class="row">
|
||||
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
||||
</div>
|
||||
<div class="row pull-right">
|
||||
<button type="button" class="btn btn-default" id="export-btn"><i class="fa fa-download"> <spring:message code="export"/></i></button>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<table id="contentTable" class="table table-active table-striped table-bordered table-condensed text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="tl"><spring:message code="protocol_name"/></th>
|
||||
<th class="tl"><spring:message code="link_num"/></th>
|
||||
<th class="tl"><spring:message code="percentage"/> (<spring:message code="link_num"/>)</th>
|
||||
<th class="tl"><spring:message code="packets"/></th>
|
||||
<th class="tl"><spring:message code="percentage"/> (<spring:message code="packets"/>)</th>
|
||||
<th class="tl"><spring:message code="Gbyte"/></th>
|
||||
<th class="tl"><spring:message code="percentage"/> (<spring:message code="Gbyte"/>)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tableData"></tbody>
|
||||
</table>
|
||||
<div id="page"><div class="M-box" style="float: right"></div></div>
|
||||
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i> <spring:message code="noneData"/></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.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'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
});
|
||||
ajaxProtocolList();
|
||||
|
||||
});
|
||||
function ajaxProtocolList(){
|
||||
loading();
|
||||
$.ajax({
|
||||
url: '${ctx}/dashboard/traffic/protocolList',
|
||||
type: 'get',
|
||||
dataType: "json",
|
||||
async:false,
|
||||
timeout:10000,
|
||||
success:function (data){
|
||||
if(data!=null&&data.length>0&&data[0].error!=null){
|
||||
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
fileData =data;
|
||||
getPageData(1,10);//初始化第一页的数据
|
||||
pageJuan(10);//初始化分页
|
||||
protocolTypeChart(data);// 初始化图
|
||||
closeTip();
|
||||
},
|
||||
error: function(data, textStatus, errorThrown){
|
||||
closeTip();
|
||||
},
|
||||
complete:function(XMLHttpRequest,status){//超时设置
|
||||
closeTip();
|
||||
}
|
||||
});
|
||||
}
|
||||
// 导出列表
|
||||
$("#export-btn").click(function(){
|
||||
getPageData(1,999999);// 设置导出页条数
|
||||
var te = $("#contentTable").tableExport({
|
||||
headings:true,
|
||||
footers:true,
|
||||
formats:["xlsx"],
|
||||
fileName:"protocol",
|
||||
bootstrap:false
|
||||
});
|
||||
$("#myexport").click();
|
||||
$("caption").remove();
|
||||
getPageData(1,10);
|
||||
});
|
||||
/**
|
||||
* 获取本页数据
|
||||
* @param currentPage 当前页数 【初次查数据，默认第1页】
|
||||
*/
|
||||
var fileData;
|
||||
function getPageData(currentPage,pageNumber){
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
//计算每页数据起始和终止数据编号
|
||||
// var pageNumber = 10;
|
||||
var maxLength = currentPage * pageNumber - 1;
|
||||
var minLength = currentPage * pageNumber - pageNumber;
|
||||
var pageData = [];
|
||||
for (var i = minLength; i < fileData.length; i++) {
|
||||
if (maxLength < i) {
|
||||
break;
|
||||
} else {
|
||||
pageData.push(fileData[i]);
|
||||
}
|
||||
}
|
||||
htmlData(pageData);
|
||||
}else{
|
||||
//把空数据传到页面中去
|
||||
htmlData(fileData);
|
||||
}
|
||||
}
|
||||
// 处理接口数据
|
||||
function htmlData(fileDataS){
|
||||
$("#tableData").html("");
|
||||
if(fileDataS == null){
|
||||
$(".none-data").show();
|
||||
$('.M-box').hide();
|
||||
}else{
|
||||
$('.none-data').hide();
|
||||
$('.M-box').show();
|
||||
$.each(fileDataS,function (index,data){
|
||||
if(data!=null){
|
||||
var totalLink = data.totalLink;
|
||||
var totalPackets= data.totalPackets;
|
||||
var totalGByte= data.totalGByte;
|
||||
var linkper =0;
|
||||
var packper=0;
|
||||
var gbytper=0;
|
||||
if(totalLink!=null&&totalLink!=0 ){
|
||||
linkper=((data.linkNum/totalLink)*100).toFixed(2);
|
||||
}
|
||||
if(totalPackets!=null&&totalPackets!=0 ){
|
||||
packper=((data.packets/totalPackets)*100).toFixed(2);
|
||||
}
|
||||
if(totalGByte!=null&&totalGByte!=0 ){
|
||||
gbytper=((data.GByte/totalGByte)*100).toFixed(2);
|
||||
}
|
||||
var html = "<tr>";
|
||||
html+= "<td class='tc'>"+data.protocolType+"</td>";
|
||||
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
||||
html+= "<td class='tc'>"+linkper+"%"+"</td>";
|
||||
html+= "<td class='tc'>"+data.packets+"</td>";
|
||||
html+= "<td class='tc'>"+packper+"%"+"</td>";
|
||||
html+= "<td class='tc'>"+data.GByte+"</td>";
|
||||
html+= "<td class='tc'>"+gbytper+"%"+"</td>";
|
||||
html+="</tr>"
|
||||
}
|
||||
$("#tableData").append(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 分页控件处理
|
||||
*/
|
||||
function pageJuan(showData) {
|
||||
if (typeof (fileData) != "undefined" && fileData != null) {
|
||||
var totalData = fileData.length;
|
||||
// var showData = 10;
|
||||
if(showData > totalData){
|
||||
showData = totalData;
|
||||
}
|
||||
$('.M-box').pagination({
|
||||
totalData: totalData,
|
||||
showData: showData,
|
||||
coping: true,
|
||||
callback: function (index) {
|
||||
//改变显示开始和结束数据编号
|
||||
getPageData(index.getCurrent(),showData);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// 比例协议统计图
|
||||
function protocolTypeChart(rs){
|
||||
//终端用户 分操作系统与浏览器
|
||||
var data=new Array();
|
||||
$(rs).each(function(i, d) {
|
||||
data.push({
|
||||
name: d.protocolType,
|
||||
y: parseInt(d.GByte),
|
||||
});
|
||||
});
|
||||
// 创建图例
|
||||
var chart = Highcharts.chart('chart',{
|
||||
chart: {
|
||||
plotBackgroundColor:null,
|
||||
plotBorderWidth:null,
|
||||
plotShadow:false,
|
||||
type: 'pie'
|
||||
},
|
||||
navigation: {
|
||||
buttonOptions: {
|
||||
x:-25,
|
||||
}
|
||||
},
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:"Protocol",
|
||||
scale:1,
|
||||
sourceWidth: 1280,
|
||||
sourceHeight: 500,
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
color: '#000',
|
||||
},
|
||||
},
|
||||
// legend:{// 底部平鋪图例
|
||||
// width:1280,
|
||||
// x:40,
|
||||
// itemWidth:100,
|
||||
// itemDistance:2,
|
||||
// itemHoverStyle:{
|
||||
// color:'#61D2F7',
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
// layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'middle',
|
||||
width:380,
|
||||
itemWidth:100,
|
||||
itemDistance:2,
|
||||
itemHoverStyle:{
|
||||
color:'#61D2F7',
|
||||
},
|
||||
},
|
||||
// colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
softConnector: true, // 是否使用曲线
|
||||
formatter: function () {
|
||||
// 通过函数判断是否显示数据标签，为了防止数据标签过于密集
|
||||
return this.percentage > 1 ? '<b>' + this.point.name + ' :</b> ' +this.percentage.toFixed(1)+' %' : null;
|
||||
},
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
},
|
||||
},
|
||||
pie:{
|
||||
allowPointSelect: true,
|
||||
showInLegend: true,
|
||||
point: {
|
||||
events: {
|
||||
mouseOver: function(e) {
|
||||
this.slice();
|
||||
},
|
||||
// 鼠标移出时，收回突出显示
|
||||
mouseOut: function() {
|
||||
this.slice();
|
||||
},
|
||||
// 默认是点击突出，这里屏蔽掉
|
||||
click: function() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
credits:{//是否有highcharts水印
|
||||
enabled:false
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '{series.name}<br>',
|
||||
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
series: [{
|
||||
name: "Protocol",
|
||||
colorByPoint: true,
|
||||
data: data
|
||||
}],
|
||||
});
|
||||
}
|
||||
</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>
|
||||
@@ -1,6 +1,6 @@
|
||||
$(function(){
|
||||
// var leff =$("span[class~='le-ca-fo']").attr("data-original-title")
|
||||
getConfigSyncStatus();
|
||||
// getConfigSyncStatus();
|
||||
$("#contentTable").not(".logTb").find("tbody tr").each(function(i){
|
||||
if($(this).find("input[type='checkbox']").attr("value")==3){
|
||||
var ids = $(this).find("input").attr("id");
|
||||
|
||||
79
src/main/webapp/static/pages/css/pagination.css
Normal file
79
src/main/webapp/static/pages/css/pagination.css
Normal file
@@ -0,0 +1,79 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.wrapper{
|
||||
margin:0 auto;
|
||||
width:960px;
|
||||
height:100%;
|
||||
}
|
||||
.M-box,.M-box1,.M-box2,.M-box3{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
zoom: 1;
|
||||
}
|
||||
.M-box:before,.M-box:after,.M-box1:before,.M-box1:after ,.M-box2:before,.M-box2:after ,.M-box3:before,.M-box3:after{
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
.M-box:after,.M-box1:after,.M-box2:after,.M-box3:after{
|
||||
clear:both;
|
||||
overflow:hidden;
|
||||
}
|
||||
.M-box span,.M-box1 span,.M-box2 span,.M-box3 span{
|
||||
float: left;
|
||||
margin:0 5px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
color: #bdbdbd;
|
||||
font-size: 14px;
|
||||
}
|
||||
.M-box .active,.M-box1 .active,.M-box2 .active,.M-box3 .active{
|
||||
float: left;
|
||||
margin:0 5px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
background: #3598dc;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border: 1px solid #3598dc;
|
||||
}
|
||||
.M-box a,.M-box1 a,.M-box2 a,.M-box3 a{
|
||||
float: left;
|
||||
margin:0 5px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
background: #fff;
|
||||
border: 1px solid #ebebeb;
|
||||
color: #08c;
|
||||
font-size: 14px;
|
||||
}
|
||||
.M-box a:hover,.M-box1 a:hover,.M-box2 a:hover,.M-box3 a:hover{
|
||||
color:#fff;
|
||||
background: #3598dc;
|
||||
}
|
||||
.M-box .next,.M-box .prev,.M-box1 .next,.M-box1 .prev{
|
||||
font-family: "Simsun";
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.now,.count{
|
||||
padding:0 5px;
|
||||
color:#f00;
|
||||
}
|
||||
|
||||
/*
|
||||
input{
|
||||
float: left;
|
||||
margin:0 5px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #ebebeb;
|
||||
outline: none;
|
||||
color: #bdbdbd;
|
||||
font-size: 14px;
|
||||
}*/
|
||||
@@ -395,16 +395,6 @@
|
||||
exporting: {
|
||||
allowHTML:true,
|
||||
filename:'App',
|
||||
chartOptions: {
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
allowOverlap: true, // 允许数据标签重叠
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
noData:{
|
||||
style: {//设置字体颜色
|
||||
|
||||
181
src/main/webapp/static/pages/scripts/jquery.pagination.js
Normal file
181
src/main/webapp/static/pages/scripts/jquery.pagination.js
Normal file
@@ -0,0 +1,181 @@
|
||||
/**
|
||||
* pagination分页插件
|
||||
* @version 1.1.2
|
||||
* @author mss
|
||||
* @url http://maxiaoxiang.com/plugin/pagination.html
|
||||
* @E-mail 251445460@qq.com
|
||||
*
|
||||
* @调用方法
|
||||
* $(selector).pagination();
|
||||
*
|
||||
* @更新日志
|
||||
* 2016-07-25：修复click重复事件
|
||||
*/
|
||||
;(function($,window,document,undefined){
|
||||
|
||||
//配置参数
|
||||
var defaults = {
|
||||
totalData:0, //数据总条数
|
||||
showData:0, //每页显示的条数
|
||||
pageCount:9, //总页数,默认为9
|
||||
current:1, //当前第几页
|
||||
prevCls:'prev', //上一页class
|
||||
nextCls:'next', //下一页class
|
||||
prevContent:'<', //上一页内容
|
||||
nextContent:'>', //下一页内容
|
||||
activeCls:'active', //当前页选中状态
|
||||
coping:false, //首页和尾页
|
||||
homePage:'', //首页节点内容
|
||||
endPage:'', //尾页节点内容
|
||||
count:3, //当前页前后分页个数
|
||||
jump:false, //跳转到指定页数
|
||||
jumpIptCls:'jump-ipt', //文本框内容
|
||||
jumpBtnCls:'jump-btn', //跳转按钮
|
||||
jumpBtn:'跳转', //跳转按钮文本
|
||||
callback:function(){} //回调
|
||||
};
|
||||
|
||||
var Pagination = function(element,options){
|
||||
//全局变量
|
||||
var opts = options,//配置
|
||||
current,//当前页
|
||||
$document = $(document),
|
||||
$obj = $(element);//容器
|
||||
|
||||
/**
|
||||
* 设置总页数
|
||||
* @param int page 页码
|
||||
* @return opts.pageCount 总页数配置
|
||||
*/
|
||||
this.setTotalPage = function(page){
|
||||
return opts.pageCount = page;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取总页数
|
||||
* @return int p 总页数
|
||||
*/
|
||||
this.getTotalPage = function(){
|
||||
var p = opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
|
||||
return p;
|
||||
};
|
||||
|
||||
//获取当前页
|
||||
this.getCurrent = function(){
|
||||
return current;
|
||||
};
|
||||
|
||||
/**
|
||||
* 填充数据
|
||||
* @param int index 页码
|
||||
*/
|
||||
this.filling = function(index){
|
||||
var html = '';
|
||||
current = index || opts.current;//当前页码
|
||||
var pageCount = this.getTotalPage();
|
||||
if(current > 1){//上一页
|
||||
html += '<a href="javascript:;" class="'+opts.prevCls+'">'+opts.prevContent+'</a>';
|
||||
}else{
|
||||
$obj.find('.'+opts.prevCls) && $obj.find('.'+opts.prevCls).remove();
|
||||
}
|
||||
if(current >= opts.count * 2 && current != 1 && pageCount != opts.count){
|
||||
var home = opts.coping && opts.homePage ? opts.homePage : '1';
|
||||
html += opts.coping ? '<a href="javascript:;" data-page="1">'+home+'</a><span>...</span>' : '';
|
||||
}
|
||||
var start = current - opts.count,
|
||||
end = current + opts.count;
|
||||
((start > 1 && current < opts.count) || current == 1) && end++;
|
||||
(current > pageCount - opts.count && current >= pageCount) && start++;
|
||||
for (;start <= end; start++) {
|
||||
if(start <= pageCount && start >= 1){
|
||||
if(start != current){
|
||||
html += '<a href="javascript:;" data-page="'+start+'">'+ start +'</a>';
|
||||
}else{
|
||||
html += '<span class="'+opts.activeCls+'">'+ start +'</span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
if(current + opts.count < pageCount && current >= 1 && pageCount > opts.count){
|
||||
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
|
||||
html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="'+pageCount+'">'+end+'</a>' : '';
|
||||
}
|
||||
if(current < pageCount){//下一页
|
||||
html += '<a href="javascript:;" class="'+opts.nextCls+'">'+opts.nextContent+'</a>'
|
||||
}else{
|
||||
$obj.find('.'+opts.nextCls) && $obj.find('.'+opts.nextCls).remove();
|
||||
}
|
||||
|
||||
html += opts.jump ? '<input type="text" class="'+opts.jumpIptCls+'"><a href="javascript:;" class="'+opts.jumpBtnCls+'">'+opts.jumpBtn+'</a>' : '';
|
||||
|
||||
$obj.empty().html(html);
|
||||
};
|
||||
|
||||
//绑定事件
|
||||
this.eventBind = function(){
|
||||
var self = this;
|
||||
var pageCount = this.getTotalPage();//总页数
|
||||
$obj.off().on('click','a',function(){
|
||||
if($(this).hasClass(opts.nextCls)){
|
||||
var index = parseInt($obj.find('.'+opts.activeCls).text()) + 1;
|
||||
}else if($(this).hasClass(opts.prevCls)){
|
||||
var index = parseInt($obj.find('.'+opts.activeCls).text()) - 1;
|
||||
}else if($(this).hasClass(opts.jumpBtnCls)){
|
||||
if($obj.find('.'+opts.jumpIptCls).val() !== ''){
|
||||
var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
|
||||
}else{
|
||||
return;
|
||||
}
|
||||
}else{
|
||||
var index = parseInt($(this).data('page'));
|
||||
}
|
||||
self.filling(index);
|
||||
typeof opts.callback === 'function' && opts.callback(self);
|
||||
});
|
||||
//输入跳转的页码
|
||||
$obj.on('input propertychange','.'+opts.jumpIptCls,function(){
|
||||
var $this = $(this);
|
||||
var val = $this.val();
|
||||
var reg = /[^\d]/g;
|
||||
if (reg.test(val)) {
|
||||
$this.val(val.replace(reg, ''));
|
||||
}
|
||||
(parseInt(val) > pageCount) && $this.val(pageCount);
|
||||
if(parseInt(val) === 0){//最小值为1
|
||||
$this.val(1);
|
||||
}
|
||||
});
|
||||
//回车跳转指定页码
|
||||
$document.keydown(function(e){
|
||||
var self = this;
|
||||
if(e.keyCode == 13 && $obj.find('.'+opts.jumpIptCls).val()){
|
||||
var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
|
||||
self.filling(index);
|
||||
typeof opts.callback === 'function' && opts.callback(self);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//初始化
|
||||
this.init = function(){
|
||||
this.filling(opts.current);
|
||||
this.eventBind();
|
||||
};
|
||||
this.init();
|
||||
};
|
||||
|
||||
$.fn.pagination = function(parameter,callback){
|
||||
if(typeof parameter == 'function'){//重载
|
||||
callback = parameter;
|
||||
parameter = {};
|
||||
}else{
|
||||
parameter = parameter || {};
|
||||
callback = callback || function(){};
|
||||
}
|
||||
var options = $.extend({},defaults,parameter);
|
||||
return this.each(function(){
|
||||
var pagination = new Pagination(this, options);
|
||||
callback(pagination);
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery,window,document);
|
||||
Reference in New Issue
Block a user