gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
This repository has been archived on 2025-09-14. You can view files and clone it, but cannot push or open issues or pull requests.
Files
65188e4f0e759dd8f2296e55c84381631c5f095d
k18-ntcs-web-ntc/src/main/webapp/WEB-INF/views/dashboard/trafficHttpStatisticList.jsp

338 lines
14 KiB
Plaintext
Raw Normal View History

新增主题界面详情展示表
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">
将website改为service
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>
Merge branch 'develop' of https://git.mesalab.cn/K18_NTCS_WEB/NTC.git into develop Conflicts: src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
2019-01-03 15:01:46 +08:00
<input id="beginDate" name="beginDate" type="text"
readonly="readonly" class="form-control Wdate input-medium"
value=""
onclick="WdatePicker({onpicked:setTime(7),dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')||currentTime()}'});"/>
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
</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"
Merge branch 'develop' of https://git.mesalab.cn/K18_NTCS_WEB/NTC.git into develop Conflicts: src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
2019-01-03 15:01:46 +08:00
value="" onclick="WdatePicker({el:'endDate',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:getMaxDate(7) })"/>
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
</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> -->
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
2018-12-20 21:09:48 +08:00
<div class="btn-group pull-right">
解决导出错误提示-唐浩 活跃ip导出报表格式更改
2018-12-24 19:16:14 +08:00
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
2018-12-20 21:09:48 +08:00
<span class="caret"></span>
</button>
流量统计增加drop,loop,new link ,close link ,pass ,live link详情
2018-12-25 17:17:33 +08:00
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
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 &nbsp;&nbsp;&nbsp;</a><li>
</ul>
实时报表模块添加打印功能（暂时隐藏）12-28
2018-12-28 17:28:22 +08:00
<div class="btn-group">
<button type="button" class="btn btn-default css-print" onClick="doPrint()"><i class="fa glyphicon glyphicon-print" style="top:3px;margin-right: 3px;"></i><spring:message code="print"/></button>
</div>
新增主题界面详情展示表
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>
解决导出错误提示-唐浩 活跃ip导出报表格式更改
2018-12-24 19:16:14 +08:00
<th class="tl"><spring:message code="GByte"/></th>
<th class="tl"><spring:message code="percentage"/> (<spring:message code="GByte"/>)</th>
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
</tr>
</thead>
<tbody id="tableData"></tbody>
</table>
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
<div id="page" class="pageView"><div class="M-box"></div><div class="pageMessage"> <spring:message code="current"/> <input type="text" class="pageCurrent" readonly="readonly"/> / <span class="pageNum"></span> <spring:message code="page"/> , <spring:message code="total"/> <span class="pageTotal"></span> <spring:message code="count"/></div></div>
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
<div class="none-data"><i class="fa fa-warning font-red-flamingo"></i>&nbsp;&nbsp;<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>
Merge branch 'develop' of https://git.mesalab.cn/K18_NTCS_WEB/NTC.git into develop Conflicts: src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
2019-01-03 15:01:46 +08:00
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
实时报表模块添加打印功能（暂时隐藏）12-28
2018-12-28 17:28:22 +08:00
<script src="${ctxStatic }/pages/scripts/jQuery.print.js"></script>
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
<script type="text/javascript">
$(document).ready(function(){
流量统计带表格的导出excel，csv, 第一行标题，时间，最后一行统计，修改活跃IP的详情的标题
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();
});
注释流量统计详情界面定时刷新任务，防止跟查询条件不一致，界面统一标题下加一条横线
2018-12-26 10:23:14 +08:00
// setInterval(function(){
// ajaxProtocolList(starth,new Date().Format("yyyy-MM-dd HH:mm:00"));
// },500000);// 五分钟调用一次
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
$('.pageView').hide();
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
});
function searchList(){
var start=$("#beginDate").val();
var end=$("#endDate").val();
流量统计详情导出xls功能修改为后台
2019-01-04 12:48:24 +08:00
$("#beginDateh").val(start);
$("#endDateh").val(end);
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
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},
流量统计调整为异步调用，初始化参数
2018-12-26 11:49:17 +08:00
async:true,
流量统计详情导出xls功能修改为后台
2019-01-04 12:48:24 +08:00
timeout:50000,
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
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();
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
$('.pageView').hide();
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
}else if(data[0].allLink==0&&data[0].allPackets==0&&data[0].allGByte==0){
$("#tableData").html("");
$(".none-data").show();
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
$('.pageView').hide();
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
}else{
$('.none-data').hide();
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
$('.pageView').show();
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
}
},
error: function(data, textStatus, errorThrown){
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
}
实时报表模块添加打印功能（暂时隐藏）12-28
2018-12-28 17:28:22 +08:00
//打印列表
function doPrint() {
getPageData(1,999999);// 设置打印条数
$("#contentTable").print({
globalStyles: true,
iframe: true,
append: null
});
getPageData(1,10);
pageJuan(10);//初始化分页
}
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
// 导出列表
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
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);// 设置导出页条数
流量统计详情导出xls功能修改为后台
2019-01-04 12:48:24 +08:00
var start=$("#beginDateh").val();
var end=$("#endDateh").val();
流量统计导出图表修改文件名称，加后缀时间，导出csv的增加标题日期
2018-12-27 11:20:55 +08:00
var nowDate=new Date();
流量统计带表格的导出excel，csv, 第一行标题，时间，最后一行统计，修改活跃IP的详情的标题
2018-12-21 17:05:27 +08:00
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);
流量统计详情导出xls功能修改为后台
2019-01-04 12:48:24 +08:00
if(dataType=="xlsx"){
getTableContent("contentTable");
}else{
var te = $("#contentTable").tableExport({
headings:true,
footers:true,
formats:[dataType],
fileName:"<spring:message code='service'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
bootstrap:false
});
$("#myexport").click();
$("caption").remove();
}
流量统计带表格的导出excel，csv, 第一行标题，时间，最后一行统计，修改活跃IP的详情的标题
2018-12-21 17:05:27 +08:00
$(".tr-title").remove();
解决流量统计无数据导出后分页显示的问题
2018-12-27 14:02:34 +08:00
getPageData(1,10);
pageJuan(10);//初始化分页
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
});
流量统计详情导出xls功能修改为后台
2019-01-04 12:48:24 +08:00
/**
* 调用后台接口
* @param Int id 表格id
* @return Array
*/
function getTableContent(id){
var mytable = document.getElementById(id);
var nowDate=new Date();
var data = [];
for(var i=0,rows=mytable.rows.length; i<rows; i++){
for(var j=0,cells=mytable.rows[i].cells.length; j<cells; j++){
if(!data[i]){
data[i] = new Array();
}
data[i][j] = mytable.rows[i].cells[j].innerHTML;
}
}
var title= data.shift();
var heard= data.shift();
var map ={};
map["titleTime"]=title;
map["heard"]=heard;
map["book"]=data;
map["titleCode"]="<spring:message code='service'/>"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds();
var exports = JSON.stringify(map);
aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
}
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
/**
* 获取本页数据
* @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("");
解决流量统计无数据导出后分页显示的问题
2018-12-27 14:02:34 +08:00
if(fileDataS == null||(fileDataS!=null&&fileDataS.length<1)){
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
$(".none-data").show();
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
$('.pageView').hide();
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
}else{
$('.none-data').hide();
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
$('.pageView').show();
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
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>";
流量统计详情导出xls功能修改为后台
2019-01-04 12:48:24 +08:00
html+= "<td class='tc' title=''>"+data.name+"</td>";
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
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>"
流量统计详情增加表格导出excel ,csv ，表格后增加total统计列,图片打印。
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;
}
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
var current=1;
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
$('.M-box').pagination({
totalData: totalData,
showData: showData,
coping: true,
callback: function (index) {
//改变显示开始和结束数据编号
getPageData(index.getCurrent(),showData);
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
current=index.getCurrent();
$(".pageCurrent").val(current);
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
}
});
修改流量统计详情界面分页按钮样式
2019-01-02 11:41:10 +08:00
if(totalData<10){
$(".pageCurrent").val(1);
}
$(".pageTotal").text(totalData);
$(".pageNum").text(Math.ceil(totalData/10));
新增主题界面详情展示表
2018-12-17 14:25:15 +08:00
}
}
</script>
</body>
</html>
Reference in New Issue Copy Permalink