所有时间选择界面限制为一周,流量限制在24小时,用户选完开始会自动填入结束时间,流量界面修复样式加载问题以及谷歌不显示onloading问题

This commit is contained in:
tanghao
2018-12-25 15:44:24 +08:00
parent b889cb1ccb
commit a43a8663ee
9 changed files with 124 additions and 217 deletions

View File

@@ -27,7 +27,7 @@
<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:'#F{$dp.$D(\'endDate\')}'});"/>
value="" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -36,7 +36,7 @@
<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,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});"/>
</div>
</div>

View File

@@ -43,7 +43,7 @@
<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="${beginDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
value="${beginDate}" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -52,7 +52,7 @@
<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="${endDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
value="${endDate}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});"/>
</div>
</div>
<div class="pull-left">

View File

@@ -32,7 +32,7 @@
<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({onpicked:function(){console.log(endDate);console.log(this);$(endDate).val('')},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
value="" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -94,16 +94,13 @@ $(document).ready(function(){
$("#endDate").val(endh);
var unitType=$("#unitType").val();
changeBandwidth(unitType,starth,endh);
//changeBandwidth2(unitType,starth,endh);
$("#unitType").on("change",function(){
loading();
changeBandwidth($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
// changeBandwidth2($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
});
setInterval(function(){
changeBandwidth($("#unitType").val(),$("#beginDate").val(),new Date().Format("yyyy-MM-dd HH:mm:00"));
// changeBandwidth2($("#unitType").val(),$("#beginDate").val(),new Date().Format("yyyy-MM-dd HH:mm:00"));
},500000);// 五分钟调用一次
//筛选功能初始化
@@ -126,76 +123,109 @@ function searchList(){
window.location.reload();
}else{
changeBandwidth($("#unitType").val(),start,end);
// changeBandwidth2($("#unitType").val(),start,end);
}
}
// 默认显示四条线 ip46,tcp,udp
/* function rankItemChanged(addrType,transType,beginDate,endDate){
loading();
var result=null;
$.ajax({
url:"${ctx}/dashboard/traffic/bandwidthTrans",
type:"get",
data:{"addrType":addrType,"transType":transType,"beginDate":beginDate,"endDate":endDate},
dataType:"json",
async:false,
timeout:40000,
success:function (data){
if(data!=null){
result=(data)
}
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
return result;
}
// 默认显示四条线 ip46,tcp,udp
function rankItemChanged2(addrType,transType,beginDate,endDate){
loading();
var result2=null;
$.ajax({
url:"${ctx}/dashboard/traffic/bandwidthTransTwo",
type:"get",
data:{"addrType":addrType,"transType":transType,"beginDate":beginDate,"endDate":endDate},
dataType:"json",
async:false,
timeout:40000,
success:function (data){
if(data!=null){
result2=(data)
}
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
return result2;
} */
function rankItemChanged3(beginDate,endDate){
loading();
var result=null;
// 根据单位切换数据
function changeBandwidth(unitType,beginDate,endDate){
$.ajax({
url:"${ctx}/dashboard/traffic/bandwidthTransThree",
type:"get",
data:{"beginDate":beginDate,"endDate":endDate},
dataType:"json",
async:false,
async:true,
timeout:40000,
success:function (data){
if(data!=null){
result=data;
console.log(data)
console.log(1111)
var xdata=null;
var ipv4data=null;
var ipv6data=null;
var tcpdata=null;
var udpdata=null;
var ipv4data2=null;
var ipv6data2=null;
var tcpdata2=null;
var udpdata2=null;
if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type1!=undefined&&data.ipv4Type1!=null){
xdata=data.ipv4Type1.statTime;
if(unitType=="Gbps"){
ipv4data=data.ipv4Type1.gbps;
ipv6data=data.ipv6Type1.gbps;
tcpdata=data.trans6Type1.gbps;
udpdata=data.trans17Type1.gbps;
}
if(unitType=="pps"){
ipv4data=data.ipv4Type1.pps;
ipv6data=data.ipv6Type1.pps;
tcpdata=data.trans6Type1.pps;
udpdata=data.trans17Type1.pps;
}
if(unitType=="linkNumber"){
ipv4data=data.ipv4Type1.linkNum;
ipv6data=data.ipv6Type1.linkNum;
tcpdata=data.trans6Type1.linkNum;
udpdata=data.trans17Type1.linkNum;
}
}
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data
},{
name: "IPv6",
data: ipv6data
},{
name: "TCP",
data: tcpdata
},{
name: "UDP",
data: udpdata
});
showBandwidthChart("chart1",unitType,xdata,series,"Astana");
if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type2!=undefined&&data.ipv4Type2!=null){
xdata=data.ipv4Type2.statTime;
if(unitType=="Gbps"){
ipv4data2=data.ipv4Type2.gbps;
ipv6data2=data.ipv6Type2.gbps;
tcpdata2=data.trans6Type2.gbps;
udpdata2=data.trans17Type2.gbps;
}
if(unitType=="pps"){
ipv4data2=data.ipv4Type2.pps;
ipv6data2=data.ipv6Type2.pps;
tcpdata2=data.trans6Type2.pps;
udpdata2=data.trans17Type2.pps;
}
if(unitType=="linkNumber"){
ipv4data2=data.ipv4Type2.linkNum;
ipv6data2=data.ipv6Type2.linkNum;
tcpdata2=data.trans6Type2.linkNum;
udpdata2=data.trans17Type2.linkNum;
}
}
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data2
},{
name: "IPv6",
data: ipv6data2
},{
name: "TCP",
data: tcpdata2
},{
name: "UDP",
data: udpdata2
});
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
closeTip();
},
error: function(data, textStatus, errorThrown){
@@ -205,147 +235,8 @@ function rankItemChanged3(beginDate,endDate){
closeTip();
}
});
return result;
}
// 根据单位切换数据
function changeBandwidth(unitType,beginDate,endDate){
/* var ipv4=rankItemChanged(4,null,beginDate,endDate);
var ipv6=rankItemChanged(6,null,beginDate,endDate);
var transTcp=rankItemChanged(null,6,beginDate,endDate);
var transUdp=rankItemChanged(null,17,beginDate,endDate); */
var data=rankItemChanged3(beginDate,endDate);
var xdata=null;
var ipv4data=null;
var ipv6data=null;
var tcpdata=null;
var udpdata=null;
var ipv4data2=null;
var ipv6data2=null;
var tcpdata2=null;
var udpdata2=null;
if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type1!=undefined&&data.ipv4Type1!=null){
xdata=data.ipv4Type1.statTime;
if(unitType=="Gbps"){
ipv4data=data.ipv4Type1.gbps;
ipv6data=data.ipv6Type1.gbps;
tcpdata=data.trans6Type1.gbps;
udpdata=data.trans17Type1.gbps;
}
if(unitType=="pps"){
ipv4data=data.ipv4Type1.pps;
ipv6data=data.ipv6Type1.pps;
tcpdata=data.trans6Type1.pps;
udpdata=data.trans17Type1.pps;
}
if(unitType=="linkNumber"){
ipv4data=data.ipv4Type1.linkNum;
ipv6data=data.ipv6Type1.linkNum;
tcpdata=data.trans6Type1.linkNum;
udpdata=data.trans17Type1.linkNum;
}
}
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data
},{
name: "IPv6",
data: ipv6data
},{
name: "TCP",
data: tcpdata
},{
name: "UDP",
data: udpdata
});
showBandwidthChart("chart1",unitType,xdata,series,"Astana");
if(data!=null&&Object.keys(data).length>0){
if(data.ipv4Type2!=undefined&&data.ipv4Type2!=null){
xdata=data.ipv4Type2.statTime;
if(unitType=="Gbps"){
ipv4data2=data.ipv4Type2.gbps;
ipv6data2=data.ipv6Type2.gbps;
tcpdata2=data.trans6Type2.gbps;
udpdata2=data.trans17Type2.gbps;
}
if(unitType=="pps"){
ipv4data2=data.ipv4Type2.pps;
ipv6data2=data.ipv6Type2.pps;
tcpdata2=data.trans6Type2.pps;
udpdata2=data.trans17Type2.pps;
}
if(unitType=="linkNumber"){
ipv4data2=data.ipv4Type2.linkNum;
ipv6data2=data.ipv6Type2.linkNum;
tcpdata2=data.trans6Type2.linkNum;
udpdata2=data.trans17Type2.linkNum;
}
}
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data2
},{
name: "IPv6",
data: ipv6data2
},{
name: "TCP",
data: tcpdata2
},{
name: "UDP",
data: udpdata2
});
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
}
// 根据单位切换数据
function changeBandwidth2(unitType,beginDate,endDate){
var ipv4=rankItemChanged2(4,null,beginDate,endDate);
var ipv6=rankItemChanged2(6,null,beginDate,endDate);
var transTcp=rankItemChanged2(null,6,beginDate,endDate);
var transUdp=rankItemChanged2(null,17,beginDate,endDate);
var xdata=ipv4.statTime;
if(unitType=="Gbps"){
ipv4data=ipv4.gbps;
ipv6data=ipv6.gbps;
tcpdata=transTcp.gbps;
udpdata=transUdp.gbps;
}
if(unitType=="pps"){
ipv4data=ipv4.pps;
ipv6data=ipv6.pps;
tcpdata=transTcp.pps;
udpdata=transUdp.pps;
}
if(unitType=="linkNumber"){
ipv4data=ipv4.linkNum;
ipv6data=ipv6.linkNum;
tcpdata=transTcp.linkNum;
udpdata=transUdp.linkNum;
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data
},{
name: "IPv6",
data: ipv6data
},{
name: "TCP",
data: tcpdata
},{
name: "UDP",
data: udpdata
});
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
}
/* 网络带宽时间维度趋势图 */
function showBandwidthChart(id,unitType,xdata,ydata,title){
@@ -477,6 +368,13 @@ function showBandwidthChart(id,unitType,xdata,ydata,title){
});
};
}(Highcharts));
function setTime(){
var chooseDate=new Date($('#beginDate').val());
chooseDate=chooseDate.setDate(chooseDate.getDate()+1);
var modifyTime=new Date(chooseDate);
$('#endDate').val(modifyTime.getFullYear()+"-"+((modifyTime.getMonth()+1)>10?(modifyTime.getMonth()+1):"0"+(modifyTime.getMonth()+1))+"-"+(modifyTime.getDate()>10?modifyTime.getDate():'0'+modifyTime.getDate())+' '+(modifyTime.getHours()>10?modifyTime.getHours():'0'+modifyTime.getHours())+':'+(modifyTime.getMinutes()>10?modifyTime.getMinutes():'0'+modifyTime.getMinutes())+':'+(modifyTime.getSeconds()>10?modifyTime.getSeconds():'0'+modifyTime.getSeconds()));
}
</script>
</body>
</html>

View File

@@ -33,7 +33,7 @@
<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}'});"/>
value="" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -42,7 +42,7 @@
<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}'});"/>
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});"/>
</div>
</div>

View File

@@ -29,7 +29,7 @@
<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:'#F{$dp.$D(\'endDate\')}'});"/>
value="" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});" />
</div>
</div>
<div class="pull-left">
@@ -38,7 +38,7 @@
<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,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});" />
</div>
</div>

View File

@@ -27,7 +27,7 @@
<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:'#F{$dp.$D(\'endDate\')}'});"/>
value="" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -36,7 +36,7 @@
<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,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});"/>
</div>
</div>

View File

@@ -33,7 +33,7 @@
<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:'#F{$dp.$D(\'endDate\')}'});"/>
value="" onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -42,7 +42,7 @@
<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,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});"/>
</div>
</div>
<div class="pull-left">

View File

@@ -49,7 +49,7 @@
<input id="beginDate" name="beginDate" type="text"
readonly="readonly" class="form-control" style="width:166px"
value=""
onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
onclick="WdatePicker({onpicked:setTime,dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
</div>
</div>
<div class="pull-left">
@@ -60,7 +60,7 @@
</div>
<input id="endDate" name="endDate" type="text" readonly="readonly"
class="form-control" value="" style="width:166px"
onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'${endDate}'});"/>
onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'#F{$dp.$D(\'beginDate\',{d:7})}'});"/>
</div>
</div>

View File

@@ -5,6 +5,15 @@ $(function(){
//获取配置日志总数
getTotalLog();
});
function setTime(){
var chooseDate=new Date($('#beginDate').val());
chooseDate=chooseDate.setDate(chooseDate.getDate()+7);
var modifyTime=new Date(chooseDate);
$('#endDate').val(modifyTime.getFullYear()+"-"+((modifyTime.getMonth()+1)>10?(modifyTime.getMonth()+1):"0"+(modifyTime.getMonth()+1))+"-"+(modifyTime.getDate()>10?modifyTime.getDate():'0'+modifyTime.getDate())+' '+(modifyTime.getHours()>10?modifyTime.getHours():'0'+modifyTime.getHours())+':'+(modifyTime.getMinutes()>10?modifyTime.getMinutes():'0'+modifyTime.getMinutes())+':'+(modifyTime.getSeconds()>10?modifyTime.getSeconds():'0'+modifyTime.getSeconds()));
}
var getTotalLog=function(){
/*
td需要配置属性有audit,functionIdcompileIdaction