1.统计-带宽两个图的合并2.HTTP(S)操控日志页面增加查询条件及Custom列表展示列选择页面增加滚动条

This commit is contained in:
shangguanyanfei
2019-06-05 14:14:40 +08:00
parent c83472c508
commit db7049c041
7 changed files with 346 additions and 66 deletions

View File

@@ -76,7 +76,7 @@
</select>
</div>
</div>
<div id="statis_detail" class="pull-left">
<div id="statis_detail" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class=" form-control" ><spring:message code="statistical_detail"/></span>
@@ -86,7 +86,7 @@
</select>
</div>
</div>
<div id="statis_detail_1" class="pull-left">
<div id="statis_detail_1" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class=" form-control" ><spring:message code="statistical_detail"/></span>
@@ -99,7 +99,7 @@
</select>
</div>
</div>
<div id="statis_detail_2" class="pull-left">
<div id="statis_detail_2" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class=" form-control" ><spring:message code="statistical_detail"/></span>
@@ -114,7 +114,7 @@
</select>
</div>
</div>
<div id="statis_detail_3" class="pull-left">
<div id="statis_detail_3" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class=" form-control" ><spring:message code="statistical_detail"/></span>
@@ -129,7 +129,7 @@
</select>
</div>
</div>
<div class="pull-left">
<div id="dimension_detail" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class=" form-control" ><spring:message code="statistical_dimension"/></span>
@@ -203,7 +203,7 @@
</div>
<div class="col-md-12" style="padding-top: 6px;">
<div class="pull-left">
<div id="area_detail" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="area_id"/></span>
@@ -215,7 +215,7 @@
</select>
</div>
</div>
<div class="pull-left">
<div id="operator_detail" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="isp"/></span>
@@ -232,7 +232,7 @@
</div>
<div class="col-md-12" style="padding-top: 6px;">
<div class="pull-left" >
<div id="chart_detail" class="pull-left" style="display: none;">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="chart_type"/></span>
@@ -350,6 +350,11 @@ $(document).ready(function(){
$("#statis_detail_3").hide();
//初始化统计维度下拉框
createSelect('dimension_select','Rule', dimensionNation1);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
initTimeSize();
$("#searchForm").attr("modelAttribute",'log');
// $("#searchForm").attr("action",'${ctx}/dashboard/traffic/configStatistic');
@@ -366,6 +371,10 @@ $(document).ready(function(){
$("#statis_detail_3").hide();
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation2);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
initTimeSize();
@@ -384,16 +393,21 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
//初始化统计明细下拉框
createSelect('detail_select',$("#detail").val(), detailNation1);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation3);
//初始化统计明细下拉框
$("#statis_detail").show();
$("#statis_detail_1").hide();
$("#statis_detail_2").hide();
$("#statis_detail_3").hide();
createSelect('detail_select',$("#detail").val(), detailNation1);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation3);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//地域下拉框的改变事件
$("#area_select").on("change",function(){
/* $("#area_select").on("change",function(){
var area_select = $("#area_select").val();
if(area_select == "astana"){
$("#chartDiv1").show();
@@ -405,10 +419,10 @@ $(document).ready(function(){
$("#chartDiv1").show();
$("#chartDiv2").show();
}
});
}); */
//查询条件的回显
commonHx();
//初始化图表的显示
/* //初始化图表的显示
if($("#area").val() == "astana"){
$("#chartDiv1").show();
$("#chartDiv2").hide();
@@ -418,7 +432,7 @@ $(document).ready(function(){
}else{
$("#chartDiv1").show();
$("#chartDiv2").show();
}
} */
initTimeSize();
$("#searchForm").removeAttr("modelAttribute");
var unitType=$("#dimension_select").val(); // 单位类型
@@ -437,18 +451,22 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
var arr=$("#detail").val().split(",");
for (var int = 0; int < arr.length; int++) {
$("#detail_select_1 option[value='"+arr[int]+"'] ").attr("selected",true);
}
//初始化统计明细下拉框
$("#statis_detail").hide();
$("#statis_detail_1").show();
$("#statis_detail_2").hide();
$("#statis_detail_3").hide();
var arr=$("#detail").val().split(",");
for (var int = 0; int < arr.length; int++) {
$("#detail_select_1 option[value='"+arr[int]+"'] ").attr("selected",true);
}
// createSelect('detail_select',$("#detail").val(), detailNation1);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation4);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
//默认展示饼图
@@ -475,20 +493,25 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
//初始化统计明细下拉框
$("#statis_detail").hide();
$("#statis_detail_1").hide();
$("#statis_detail_2").show();
$("#statis_detail_3").hide();
var arr=$("#detail").val().split(",");
if(arr.length>0){
for (var int = 0; int < arr.length; int++) {
$("#detail_select_2 option[value='"+arr[int]+"'] ").attr("selected",true);
}
}
//初始化统计明细下拉框
$("#statis_detail").hide();
$("#statis_detail_1").hide();
$("#statis_detail_2").show();
$("#statis_detail_3").hide();
// createSelect('detail_select',$("#detail").val(), detailNation1);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation4);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
$("#chartType option[value='pie'] ").attr("selected",true);
@@ -513,20 +536,25 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
//初始化统计明细下拉框
$("#statis_detail").hide();
$("#statis_detail_1").hide();
$("#statis_detail_2").hide();
$("#statis_detail_3").show();
var arr=$("#detail").val().split(",");
if(arr.length>0){
for (var int = 0; int < arr.length; int++) {
$("#detail_select_3 option[value='"+arr[int]+"'] ").attr("selected",true);
}
}
//初始化统计明细下拉框
$("#statis_detail").hide();
$("#statis_detail_1").hide();
$("#statis_detail_2").hide();
$("#statis_detail_3").show();
// createSelect('detail_select',$("#detail").val(), detailNation1);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation5);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
$("#chartType option[value='pie'] ").attr("selected",true);
@@ -544,15 +572,19 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
createSelect('detail_select',$("#detail").val(), detailNation5);
//初始化统计明细下拉框
$("#statis_detail").show();
$("#statis_detail_1").hide();
$("#statis_detail_2").hide();
$("#statis_detail_3").hide();
createSelect('detail_select',$("#detail").val(), detailNation5);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation6);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
$("#chartType option[value='pie'] ").attr("selected",true);
@@ -577,15 +609,19 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
createSelect('detail_select',$("#detail").val(), detailNation5);
//初始化统计明细下拉框
$("#statis_detail").show();
$("#statis_detail_1").hide();
$("#statis_detail_2").hide();
$("#statis_detail_3").hide();
createSelect('detail_select',$("#detail").val(), detailNation5);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation6);
createSelect('dimension_select',$("#dimension").val(), dimensionNation6);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
$("#chartType option[value='pie'] ").attr("selected",true);
@@ -610,15 +646,19 @@ $(document).ready(function(){
$("#endDate").val(endh);
$("#concent option[value='"+statistic_concent+"'] ").attr("selected",true);
createSelect('detail_select',$("#detail").val(), detailNation5);
//初始化统计明细下拉框
$("#statis_detail").show();
$("#statis_detail_1").hide();
$("#statis_detail_2").hide();
$("#statis_detail_3").hide();
createSelect('detail_select',$("#detail").val(), detailNation5);
//初始化统计维度下拉框
createSelect('dimension_select',$("#dimension").val(), dimensionNation6);
$("#dimension_detail").show();
$("#area_detail").show();
$("#operator_detail").show();
$("#chart_detail").show();
//查询条件回显
commonHx();
$("#chartType option[value='pie'] ").attr("selected",true);

View File

@@ -10,7 +10,7 @@
</div>
</div>
</div>
<div class="row">
<!-- <div class="row">
<div id="chartDiv2" class="col-md-12">
<div id="trend" style="height: 500px; position: relative;" >
<div style="position: relative;">
@@ -18,7 +18,7 @@
</div>
</div>
</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>
@@ -70,13 +70,21 @@ function changeBandwidth(unitType,beginDate,endDate){
}else{
searchDirection="";
}
var entranceId=$("#area_select").val();
if(entranceId == "astana"){
entranceId="1";
}else if(entranceId =="almaty"){
entranceId="2";
}else{
entranceId="";
}
var chartType = $("#chartType").val();
var timeSize = $(".timeSize:checked").val();
var operator=$("#operator_select").val();
$.ajax({
url:"${ctx}/dashboard/traffic/bandWidthTransThreeNew",
type:"get",
data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType,"searchDirection":searchDirection,"timeSize":timeSize,"operator":operator},
data:{"beginDate":beginDate,"endDate":endDate,"searchQuotaType":unitType,"searchDirection":searchDirection,"timeSize":timeSize,"operator":operator,"searchEntranceId":entranceId},
dataType:"json",
async:true,
timeout:50000,
@@ -146,9 +154,18 @@ function changeBandwidth(unitType,beginDate,endDate){
}else{
unitType = "linkNumber"
}
showBandwidthChart("chart1",unitType,xdata,series,"Astana",chartType);
var title="Astana";
if(entranceId == "1"){
title="Astana";
}else if(entranceId == "2"){
title="Almaty";
}else{
title="Astana+Almaty";
}
if(data!=null&&Object.keys(data).length>0){
showBandwidthChart("chart1",unitType,xdata,series,title,chartType);
/* if(data!=null&&Object.keys(data).length>0){
ipv4data2=data.ipv4Type2.result;
ipv6data2=data.ipv6Type2.result;
tcpdata2=data.trans6Type2.result;
@@ -195,7 +212,7 @@ function changeBandwidth(unitType,beginDate,endDate){
}
});
$("#total2").val(JSON.stringify(total2));
showBandwidthChart("chart2",unitType,xdata,series,"Almaty",chartType);
showBandwidthChart("chart2",unitType,xdata,series,"Almaty",chartType); */
// closeTip();
},
error: function(data, textStatus, errorThrown){
@@ -407,7 +424,7 @@ function showBandwidthChart(id,unitType,xdata,ydata,title,chartType){
var total = [];
var map={};
$(rows).each(function(i,d){
if(d!=null){
/* if(d!=null){
if(i==0){
if(d[0].indexOf("Astana") != -1){
total=JSON.parse($("#total").val());
@@ -416,7 +433,8 @@ function showBandwidthChart(id,unitType,xdata,ydata,title,chartType){
total=JSON.parse($("#total2").val());
}
}
}
} */
total=JSON.parse($("#total").val());
// 去掉多余属性
delete d.name;
delete d.x;
@@ -496,14 +514,15 @@ function showBandwidthChart(id,unitType,xdata,ydata,title,chartType){
var total = [];
$(rows).each(function (i,d){
if(d!=null){
if(i==0){
/* if(i==0){
if(d[0].indexOf("Astana") != -1){
total=JSON.parse($("#total").val());
}
if(d[0].indexOf("Almaty") != -1){
total=JSON.parse($("#total2").val());
}
}
} */
total=JSON.parse($("#total").val());
if(i>0){
data.push({
num1:d,

View File

@@ -5,6 +5,7 @@
<title>
<spring:message code="http_manipulation"/><spring:message code="log"/>
</title>
<script>
$(document).ready(function() {
//reset
@@ -20,6 +21,7 @@
.attr("value",'');
$("#searchForm")[0].reset();
});
returnBack();
//筛选功能
filterActionInit();
//异步获取voip相关信息
@@ -64,7 +66,38 @@
$("#"+openId).show();
$("#"+closeId).parent().parent().next("tr").hide();
});
$('.ipTypeDisplay').css('display','block');
});
function returnBack(){
$('#appSelect').selectpicker();
var app = $("#apps").val(); //回选的数据
if (app !=null && app !='') {
var seasonlist = app.split(",");
$('#appSelect').selectpicker('val',seasonlist);
$('#appSelect').selectpicker('render');
}
/* $('#ispSelect').selectpicker();
var app = $("#isps").val(); //回选的数据
if (app !=null && app !='') {
var seasonlist = app.split(",");
$('#ispSelect').selectpicker('val',seasonlist);
$('#ispSelect').selectpicker('render');
} */
$('#protoSelect').selectpicker();
var proto = $("#protos").val(); //回选的数据
if (proto !=null && proto !='') {
var protolist = proto.split(",");
$('#protoSelect').selectpicker('val',protolist);
$('#protoSelect').selectpicker('render');
}
};
</script>
</head>
<body>
@@ -84,6 +117,9 @@
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<input id="functionId" name="functionId" type="hidden" value="${log.functionId}"/>
<input id="apps" type="hidden" value="${log.appId}"/>
<input id="protos" type="hidden" value="${log.protocolId}"/>
<input id="jboxtCustomValue" type="hidden" value="true"/>
<input id="isLogTotalSearch" name="isLogTotalSearch" type="hidden" value="${log.isLogTotalSearch}"/>
<!-- 筛选按钮展开状态-->
<input id="isFilterAction" name="isFilterAction" type="hidden" value="${log.isFilterAction }"/><sys:tableSort id="orderBy" name="orderBy" value="${page.orderBy}" callback="page();"/>
@@ -187,12 +223,13 @@
</div>
</div> --%>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<div class="form-group">
<label><spring:message code="cfg_id"></spring:message></label>
<input name="policyId" type="text" class="form-control logCfgId number" value="${log.policyId }"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
@@ -206,8 +243,140 @@
<input name="domain" type="text" class="form-control" value="${log.domain }"/>
</div>
</div>
<div class="col-md-2" style="display: none;">
<div class="form-group">
<label><spring:message code="action"></spring:message></label>
<input name="action" type="text" class="form-control" value="465"/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label"><spring:message code='application_layer_protocol'/></label>
<select id="protoSelect" name="protocolId" title="<spring:message code="select"/>" class="selectpicker form-control " data-max-options="10" data-selected-text-format="count > 3" multiple data-live-search="true" data-live-search-placeholder="<spring:message code="search"/>">
<option value="" disabled="true"><spring:message code="select"/></option>
<c:forEach items="${protocolList}" var="proto" >
<option value="${proto.code}"><spring:message code="${proto.item}"></spring:message></option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label><spring:message code='direction'/></label>
<form:select path="direction" class="selectpicker form-control">
<form:option value=""><spring:message code="select"/></form:option>
<c:forEach items="${fns:getDictList('LOG_DIRECTION')}" var="directions" >
<form:option value="${directions.itemCode}"><spring:message code="${directions.itemValue}"></spring:message></form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code='addr_type'/></label>
<form:select path="addrType" class="selectpicker form-control ipTypeDisplay">
<form:option value=""><spring:message code="select"/></form:option>
<c:forEach items="${fns:getDictList('IP_TYPE')}" var="ipType" >
<form:option value="${ipType.itemCode}"><spring:message code="${ipType.itemValue}"></spring:message></form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="isp"></spring:message></label>
<input name="isp" type="text" class="form-control" value="${log.isp }"/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="server_locate"></spring:message></label>
<input name="serverLocation" type="text" class="form-control" value="${log.serverLocation }"/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="client_locate"></spring:message></label>
<input name="clientLocation" type="text" class="form-control" value="${log.clientLocation }"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="host"></spring:message></label>
<input name="host" type="text" class="form-control" value="${log.host }"/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="sni"></spring:message></label>
<input name="sni" type="text" class="form-control" value="${log.sni }"/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="san"></spring:message></label>
<input name="san" type="text" class="form-control" value="${log.san }"/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label><spring:message code="cn"></spring:message></label>
<input name="cn" type="text" class="form-control" value="${log.cn }"/>
</div>
</div>
<%-- <div class="col-md-2">
<div class="form-group">
<label><spring:message code='social_app'/></label>
<form:select path="appId" class="selectpicker form-control " >
<form:option value=""><spring:message code="select"/></form:option>
<c:forEach items="${fns:getCodeList('appCode')}" var="appCodes" >
<form:option value="${appCodes.code}"><spring:message code="${appCodes.item}"></spring:message></form:option>
</c:forEach>
</form:select>
</div>
</div> --%>
<div class="col-md-2">
<div class="form-group">
<label class="control-label"><spring:message code='social_app'/></label>
<select id="appSelect" name="appId" title="<spring:message code="select"/>" class="selectpicker form-control " data-max-options="10" data-selected-text-format="count > 3" multiple data-live-search="true" data-live-search-placeholder="<spring:message code="search"/>">
<option value="" disabled="true"><spring:message code="select"/></option>
<c:forEach items="${appList}" var="app" >
<option value="${app.code}"><spring:message code="${app.item}"></spring:message></option>
</c:forEach>
</select>
</div>
</div>
</div>
<%-- <div class="row">
<div class="col-md-2">
<div class="form-group">
<label><spring:message code='protocol'/></label>
<form:select path="protocolId" class="selectpicker form-control " >
<form:option value=""><spring:message code="select"/></form:option>
<c:forEach items="${fns:getCodeList('protocolCode')}" var="protocolCodes" >
<form:option value="${protocolCodes.code}"><spring:message code="${protocolCodes.item}"></spring:message></form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label"><spring:message code='application_layer_protocol'/></label>
<select id="protoSelect" name="protocolId" title="<spring:message code="select"/>" class="selectpicker form-control " data-max-options="10" data-selected-text-format="count > 3" multiple data-live-search="true" data-live-search-placeholder="<spring:message code="search"/>">
<option value="" disabled="true"><spring:message code="select"/></option>
<c:forEach items="${protocolList}" var="proto" >
<option value="${proto.code}"><spring:message code="${proto.item}"></spring:message></option>
</c:forEach>
</select>
</div>
</div>
</div> --%>
</div>
<!-- /筛选搜索内容栏 结束-->
</form:form>
</div>

View File

@@ -403,7 +403,14 @@ function customColumnClick(){
})
html +="</div>";
var cus=$("#tb_custom",parent.document).val();
top.$.jBox(html,{title:"<i class='fa fa-wrench'></i>"+cus ,showIcon:false,opacity:0.3,submit:submit});
var jboxtCustomValue=$("#jboxtCustomValue").val();
if(jboxtCustomValue == "true"){
top.$.jBox(html,{title:"<i class='fa fa-wrench'></i>"+cus ,showIcon:false,opacity:0.3,
width: $(document).width()*0.25,
height: $(document).height()*0.8,submit:submit});
}else{
top.$.jBox(html,{title:"<i class='fa fa-wrench'></i>"+cus ,showIcon:false,opacity:0.3,submit:submit});
}
}