2018-12-17 14:25:15 +08:00
|
|
|
|
<%@ 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">
|
|
|
|
|
|
<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/httpStatisticList'"><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">
|
2018-12-17 16:16:04 +08:00
|
|
|
|
<spring:message code="service"></spring:message>
|
2018-12-17 14:25:15 +08:00
|
|
|
|
</h3>
|
|
|
|
|
|
<h5 class="page-header"></h5>
|
|
|
|
|
|
<div class="row" >
|
|
|
|
|
|
<form:form id="searchForm" action="${ctx}/dashboard/traffic/protocolTypeList" method="get" class="form-search">
|
|
|
|
|
|
<input id="beginDateh" type="hidden" value="${beginDate}"/>
|
|
|
|
|
|
<input id="endDateh" type="hidden" value="${endDate}"/>
|
|
|
|
|
|
<!-- 搜索内容与操作按钮栏 -->
|
|
|
|
|
|
<div class="col-md-12">
|
|
|
|
|
|
<div class="pull-left">
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<div class="input-group-btn">
|
|
|
|
|
|
<span class="selectpicker form-control" ><spring:message code="begin_date"/></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input id="beginDate" name="beginDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
|
|
|
|
|
|
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'${endDate}'});"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pull-left">
|
|
|
|
|
|
<div class="input-group">
|
|
|
|
|
|
<div class="input-group-btn">
|
|
|
|
|
|
<span class="selectpicker form-control" ><spring:message code="end_date"/></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input id="endDate" name="endDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
|
|
|
|
|
|
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'${endDate}'});"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pull-left">
|
|
|
|
|
|
<button type="button" class="btn blue" onClick="return searchList()"> <i class="fa fa-search"></i> <spring:message code="search"/> </button>
|
|
|
|
|
|
<button type="button" class="btn btn-default" id="resetBtn" > <i class="fa fa-refresh"></i> <spring:message code="reset"/> </button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索内容与操作按钮栏 -->
|
|
|
|
|
|
</form:form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="row">
|
|
|
|
|
|
<div id="chart" style="width:98%;height: 510px; -moz-user-select: none; position: relative;"></div>
|
|
|
|
|
|
</div> -->
|
2018-12-20 21:09:48 +08:00
|
|
|
|
<div class="btn-group pull-right">
|
|
|
|
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <spring:message code="export"/>
|
|
|
|
|
|
<span class="caret"></span>
|
|
|
|
|
|
</button>
|
2018-12-21 17:05:27 +08:00
|
|
|
|
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -16px;">
|
2018-12-20 21:09:48 +08:00
|
|
|
|
<li><a class="btn export-btn" data-type="xlsx" id="export-btn"><i class="fa fa-download"> </i> excel </a><li>
|
|
|
|
|
|
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
|
|
|
|
|
</ul>
|
2018-12-17 14:25:15 +08:00
|
|
|
|
</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="service"/></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(){
|
2018-12-21 17:05:27 +08:00
|
|
|
|
loading();
|
2018-12-17 14:25:15 +08:00
|
|
|
|
var starth=$("#beginDateh").val();
|
|
|
|
|
|
var endh=$("#endDateh").val();
|
|
|
|
|
|
$("#beginDate").val(starth);
|
|
|
|
|
|
$("#endDate").val(endh);
|
|
|
|
|
|
ajaxProtocolList(starth,endh);
|
|
|
|
|
|
//筛选功能初始化
|
|
|
|
|
|
$("#resetBtn").on("click",function(){
|
|
|
|
|
|
$("select.selectpicker").each(function(){
|
|
|
|
|
|
$(this).selectpicker('val',$(this).find('option:first').val());
|
|
|
|
|
|
$(this).find("option").attr("selected",false);
|
|
|
|
|
|
$(this).find("option:first").attr("selected",true);
|
|
|
|
|
|
});
|
|
|
|
|
|
$(".Wdate").attr("value",'');
|
|
|
|
|
|
$("#searchForm")[0].reset();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
setInterval(function(){
|
|
|
|
|
|
ajaxProtocolList(starth,new Date().Format("yyyy-MM-dd HH:mm:00"));
|
|
|
|
|
|
},500000);// 五分钟调用一次
|
|
|
|
|
|
});
|
|
|
|
|
|
function searchList(){
|
|
|
|
|
|
var start=$("#beginDate").val();
|
|
|
|
|
|
var end=$("#endDate").val();
|
|
|
|
|
|
if(start==''||end==''||end==null||start==null){
|
|
|
|
|
|
window.location.reload();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
ajaxProtocolList(start,end);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function ajaxProtocolList(start,end){
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: '${ctx}/dashboard/traffic/statisticList',
|
|
|
|
|
|
type: 'get',
|
|
|
|
|
|
dataType: "json",
|
|
|
|
|
|
data:{"beginDate":start,"endDate":end},
|
|
|
|
|
|
async:false,
|
|
|
|
|
|
timeout:10000,
|
2018-12-20 21:09:48 +08:00
|
|
|
|
beforeSend:function(){
|
|
|
|
|
|
loading();
|
|
|
|
|
|
},
|
2018-12-17 14:25:15 +08:00
|
|
|
|
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);//初始化分页
|
|
|
|
|
|
closeTip();
|
|
|
|
|
|
if(data!= null&&data.length<1){
|
|
|
|
|
|
$(".none-data").show();
|
|
|
|
|
|
$('.M-box').hide();
|
|
|
|
|
|
}else if(data[0].allLink==0&&data[0].allPackets==0&&data[0].allGByte==0){
|
|
|
|
|
|
$("#tableData").html("");
|
|
|
|
|
|
$(".none-data").show();
|
|
|
|
|
|
$('.M-box').hide();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
$('.none-data').hide();
|
|
|
|
|
|
$('.M-box').show();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
error: function(data, textStatus, errorThrown){
|
|
|
|
|
|
closeTip();
|
|
|
|
|
|
},
|
|
|
|
|
|
complete:function(XMLHttpRequest,status){//超时设置
|
|
|
|
|
|
closeTip();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
// 导出列表
|
2018-12-20 21:09:48 +08:00
|
|
|
|
$(".export-btn").click(function(){
|
|
|
|
|
|
var dataType = $(this).attr("data-type");
|
2018-12-17 14:25:15 +08:00
|
|
|
|
getPageData(1,999999);// 设置导出页条数
|
2018-12-21 17:05:27 +08:00
|
|
|
|
var start=$("#beginDate").val();
|
|
|
|
|
|
var end=$("#endDate").val();
|
|
|
|
|
|
var htmlTitle="";
|
|
|
|
|
|
htmlTitle+="<tr class='tr-title'>";
|
|
|
|
|
|
htmlTitle+= "<th class='tc' colspan='1'>"+"<spring:message code='service'/>"+"</th>";
|
|
|
|
|
|
htmlTitle+= "<th class='tc' colspan='2'>"+start+"--"+ end +"</th>";
|
|
|
|
|
|
htmlTitle+="</tr>"
|
|
|
|
|
|
$("#contentTable thead").prepend(htmlTitle);
|
2018-12-17 14:25:15 +08:00
|
|
|
|
var te = $("#contentTable").tableExport({
|
|
|
|
|
|
headings:true,
|
|
|
|
|
|
footers:true,
|
2018-12-20 21:09:48 +08:00
|
|
|
|
formats:[dataType],
|
2018-12-18 18:00:31 +06:00
|
|
|
|
fileName:"service",
|
2018-12-17 14:25:15 +08:00
|
|
|
|
bootstrap:false
|
|
|
|
|
|
});
|
|
|
|
|
|
$("#myexport").click();
|
|
|
|
|
|
$("caption").remove();
|
2018-12-21 17:05:27 +08:00
|
|
|
|
$(".tr-title").remove();
|
2018-12-17 14:25:15 +08:00
|
|
|
|
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();
|
2018-12-20 21:09:48 +08:00
|
|
|
|
var start=$("#beginDate").val();
|
|
|
|
|
|
var end=$("#endDate").val();
|
2018-12-17 14:25:15 +08:00
|
|
|
|
$.each(fileDataS,function (index,data){
|
|
|
|
|
|
if(data!=null){
|
|
|
|
|
|
var html = "<tr>";
|
|
|
|
|
|
html+= "<td class='tc'>"+data.name+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+data.linkNum+"</td>";
|
2018-12-17 20:14:14 +08:00
|
|
|
|
html+= "<td class='tc'>"+(data.linkNum/data.allLink*100).toFixed(2)+"%"+"</td>";
|
2018-12-17 14:25:15 +08:00
|
|
|
|
html+= "<td class='tc'>"+data.packets+"</td>";
|
2018-12-17 20:14:14 +08:00
|
|
|
|
html+= "<td class='tc'>"+(data.packets/data.allPackets*100).toFixed(2)+"%"+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+(data.count/1073741824).toFixed(2)+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+(data.count/data.allGByte*100).toFixed(2)+"%"+"</td>";
|
2018-12-17 14:25:15 +08:00
|
|
|
|
html+="</tr>"
|
2018-12-20 21:09:48 +08:00
|
|
|
|
if(index==fileDataS.length-1){
|
|
|
|
|
|
html+="<tr class='tr-total hidden'>"
|
|
|
|
|
|
html+= "<td class='tc'>"+"<spring:message code='report_total'/>"+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+(data.allLink).toFixed(2)+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>" +"100%"+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+(data.allPackets).toFixed(2)+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+"100%"+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+(data.allGByte/1073741824).toFixed(2)+"</td>";
|
|
|
|
|
|
html+= "<td class='tc'>"+"100%"+"</td>";
|
|
|
|
|
|
html+="</tr>"
|
|
|
|
|
|
}
|
2018-12-17 14:25:15 +08:00
|
|
|
|
}
|
|
|
|
|
|
$("#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);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
