流量统计app详情界面中app趋势改为实时跟历史界面,实时可查当时五分钟前的实时数据,粒度1分钟,历史可按时间,地域查询历史信息,默认为跳转前app详情界面时间。
This commit is contained in:
@@ -1464,4 +1464,6 @@ protocol_statistics=Protocol Statistics
|
|||||||
app_statistics=App Statistics
|
app_statistics=App Statistics
|
||||||
service_statistics=Service Statistics
|
service_statistics=Service Statistics
|
||||||
website_statistics=Website Statistics
|
website_statistics=Website Statistics
|
||||||
not_exist=not exist
|
not_exist=not exist
|
||||||
|
real_time=Real Time
|
||||||
|
history=History
|
||||||
@@ -719,7 +719,7 @@ app_features_config=\u041f\u0440\u0438\u0437\u043d\u0430\u043a\u0438 \u043f\u044
|
|||||||
cfg_type=\u0422\u0438\u043f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438
|
cfg_type=\u0422\u0438\u043f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438
|
||||||
encrypted_tunnel_behavior=\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f
|
encrypted_tunnel_behavior=\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f
|
||||||
behaviour_type=\u0422\u0438\u043f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f
|
behaviour_type=\u0422\u0438\u043f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f
|
||||||
basic_protocol=L7 \u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B
|
basic_protocol=L7 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b
|
||||||
ip_Reuse_pool_config=\u041f\u0443\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432
|
ip_Reuse_pool_config=\u041f\u0443\u043b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432
|
||||||
dns_res_strategy=\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 DNS
|
dns_res_strategy=\u041f\u043e\u043b\u0438\u0442\u0438\u043a\u0430 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 DNS
|
||||||
policy_number=\u2116 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438
|
policy_number=\u2116 \u043f\u043e\u043b\u0438\u0442\u0438\u043a\u0438
|
||||||
@@ -1132,7 +1132,7 @@ report_total=\u0412\u0441\u0435\u0433\u043e
|
|||||||
message_type=\u0422\u0438\u043f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f
|
message_type=\u0422\u0438\u043f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f
|
||||||
as=\u041a\u0410\u041a
|
as=\u041a\u0410\u041a
|
||||||
route=\u041c\u0430\u0440\u0448\u0440\u0443\u0442
|
route=\u041c\u0430\u0440\u0448\u0440\u0443\u0442
|
||||||
transport_layer_protocol=\u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B \u0422\u0440\u0430\u043D\u0441\u043F\u043E\u0440\u0442\u043D\u043E\u0433\u043E \u0423\u0440\u043E\u0432\u043D\u044F
|
transport_layer_protocol=\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b \u0422\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u043d\u043e\u0433\u043e \u0423\u0440\u043e\u0432\u043d\u044f
|
||||||
av_voip_monit=\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 VoIP
|
av_voip_monit=\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 VoIP
|
||||||
av_voip_reject=VoIP \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435
|
av_voip_reject=VoIP \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435
|
||||||
label_proto_source=\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430
|
label_proto_source=\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430
|
||||||
@@ -1461,11 +1461,13 @@ country_code=Country Code
|
|||||||
asn_name=ASN Name
|
asn_name=ASN Name
|
||||||
details=Details
|
details=Details
|
||||||
NTC_ASN_NUMBER=ASN
|
NTC_ASN_NUMBER=ASN
|
||||||
application_layer_protocol=L7 \u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B
|
application_layer_protocol=L7 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b
|
||||||
traffic_statistics=\u041F\u0440\u043E\u043F\u0443\u0441\u043A\u043D\u0430\u044F \u0421\u043F\u043E\u0441\u043E\u0431\u043D\u043E\u0441\u0442\u044C \u0422\u0440\u0430\u0444\u0438\u043A\u0430
|
traffic_statistics=\u041f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u0430\u044f \u0421\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0422\u0440\u0430\u0444\u0438\u043a\u0430
|
||||||
active_ip_statistics= \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u0410\u043A\u0442\u0438\u0432\u043D\u044B\u0445 IP-\u0430\u0434\u0440\u0435\u0441\u043E\u0432
|
active_ip_statistics= \u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0410\u043a\u0442\u0438\u0432\u043d\u044b\u0445 IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432
|
||||||
protocol_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u041F\u0440\u043E\u0442\u043E\u043A\u043E\u043B\u043E\u0432
|
protocol_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u0432
|
||||||
app_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u041F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0439
|
app_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439
|
||||||
service_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u0421\u0435\u0440\u0432\u0438\u0441\u043E\u0432
|
service_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0421\u0435\u0440\u0432\u0438\u0441\u043e\u0432
|
||||||
website_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043A\u0430 \u0412\u0435\u0431-\u0441\u0430\u0439\u0442\u043E\u0432
|
website_statistics=\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0412\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432
|
||||||
not_exist=not exist
|
not_exist=not exist
|
||||||
|
real_time=Real Time
|
||||||
|
history=History
|
||||||
@@ -717,7 +717,7 @@ app_features_config=APP\u7279\u5f81
|
|||||||
cfg_type=\u914d\u7f6e\u7c7b\u578b
|
cfg_type=\u914d\u7f6e\u7c7b\u578b
|
||||||
encrypted_tunnel_behavior=\u52a0\u5bc6\u96a7\u9053\u884c\u4e3a
|
encrypted_tunnel_behavior=\u52a0\u5bc6\u96a7\u9053\u884c\u4e3a
|
||||||
behaviour_type=\u884c\u4e3a\u7c7b\u578b
|
behaviour_type=\u884c\u4e3a\u7c7b\u578b
|
||||||
basic_protocol=L7\u534F\u8BAE
|
basic_protocol=L7\u534f\u8bae
|
||||||
ip_Reuse_pool_config=IP \u590d\u7528\u5730\u5740\u6c60
|
ip_Reuse_pool_config=IP \u590d\u7528\u5730\u5740\u6c60
|
||||||
dns_res_strategy=DNS\u54cd\u5e94\u7b56\u7565
|
dns_res_strategy=DNS\u54cd\u5e94\u7b56\u7565
|
||||||
policy_number=\u7b56\u7565\u53f7
|
policy_number=\u7b56\u7565\u53f7
|
||||||
@@ -1458,10 +1458,12 @@ asn_name=ASN\u7ec4\u7ec7\u540d
|
|||||||
details=\u8be6\u60c5
|
details=\u8be6\u60c5
|
||||||
NTC_ASN_NUMBER=ASN
|
NTC_ASN_NUMBER=ASN
|
||||||
application_layer_protocol=\u5e94\u7528\u5c42\u534f\u8bae
|
application_layer_protocol=\u5e94\u7528\u5c42\u534f\u8bae
|
||||||
traffic_statistics=\u6D41\u91CF\u541E\u5410\u91CF
|
traffic_statistics=\u6d41\u91cf\u541e\u5410\u91cf
|
||||||
active_ip_statistics=\u6D3B\u8DC3IP\u7EDF\u8BA1
|
active_ip_statistics=\u6d3b\u8dc3IP\u7edf\u8ba1
|
||||||
protocol_statistics=\u534F\u8BAE\u7EDF\u8BA1
|
protocol_statistics=\u534f\u8bae\u7edf\u8ba1
|
||||||
app_statistics=App\u7EDF\u8BA1
|
app_statistics=App\u7edf\u8ba1
|
||||||
service_statistics=\u670D\u52A1\u7EDF\u8BA1
|
service_statistics=\u670d\u52a1\u7edf\u8ba1
|
||||||
website_statistics=\u7F51\u7AD9\u7EDF\u8BA1
|
website_statistics=\u7f51\u7ad9\u7edf\u8ba1
|
||||||
not_exist=\u4E0D\u5B58\u5728
|
not_exist=\u4e0d\u5b58\u5728
|
||||||
|
real_time=\u5b9e\u65f6
|
||||||
|
history=\u5386\u53f2
|
||||||
@@ -29,11 +29,16 @@
|
|||||||
<spring:message code="${appName}"></spring:message>
|
<spring:message code="${appName}"></spring:message>
|
||||||
</h3>
|
</h3>
|
||||||
<h5 class="page-header"></h5>
|
<h5 class="page-header"></h5>
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li class="changeData active" value="1"><a href="javascript:void(0);"><spring:message code="real_time"/></a></li>
|
||||||
|
<li class="changeData" value="2"><a href="javascript:void(0);"><spring:message code="history"/></a></li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<form:form id="searchForm" method="get" class="form-search">
|
<form:form id="searchForm" method="get" class="form-search">
|
||||||
<!-- 搜索内容与操作按钮栏 -->
|
<!-- 搜索内容与操作按钮栏 -->
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<div class="pull-left">
|
<div class="pull-left chart-history">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<div class="input-group-btn">
|
<div class="input-group-btn">
|
||||||
<span class="selectpicker form-control"><spring:message
|
<span class="selectpicker form-control"><spring:message
|
||||||
@@ -43,7 +48,7 @@
|
|||||||
value="" onclick="WdatePicker({onpicked:function(){this.onchange()},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{\'new Date()\'}'});" onchange="setStartTime('#beginDate','#endDate',7,'d','yyyy-MM-dd hh:mm:ss',false)"/>
|
value="" onclick="WdatePicker({onpicked:function(){this.onchange()},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{\'new Date()\'}'});" onchange="setStartTime('#beginDate','#endDate',7,'d','yyyy-MM-dd hh:mm:ss',false)"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pull-left">
|
<div class="pull-left chart-history">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<div class="input-group-btn">
|
<div class="input-group-btn">
|
||||||
<span class="selectpicker form-control"><spring:message
|
<span class="selectpicker form-control"><spring:message
|
||||||
@@ -72,17 +77,17 @@
|
|||||||
<i class="fa fa-search"></i>
|
<i class="fa fa-search"></i>
|
||||||
<spring:message code="search" />
|
<spring:message code="search" />
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="btn btn-default" id="resetBtn">
|
<%-- <button type="button" class="btn btn-default" id="resetBtn">
|
||||||
<i class="fa fa-refresh"></i>
|
<i class="fa fa-refresh"></i>
|
||||||
<spring:message code="reset" />
|
<spring:message code="reset" />
|
||||||
</button>
|
</button> --%>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 搜索内容与操作按钮栏 -->
|
<!-- 搜索内容与操作按钮栏 -->
|
||||||
</form:form>
|
</form:form>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row chart-realTime">
|
||||||
<div id="chart" style="width: 97%; height: 450px; margin-top: 20px"></div>
|
<div id="chart-realTime" style="width: 97%; height: 430px; margin-top: 20px"></div>
|
||||||
<input id="total" type="hidden" />
|
<input id="total" type="hidden" />
|
||||||
<input id="sipData" type="hidden" />
|
<input id="sipData" type="hidden" />
|
||||||
<input id="dipData" type="hidden" />
|
<input id="dipData" type="hidden" />
|
||||||
@@ -90,6 +95,9 @@
|
|||||||
<input id="appType" name="appType" type="hidden" value="${appType}" />
|
<input id="appType" name="appType" type="hidden" value="${appType}" />
|
||||||
<input id="beginDateh" type="hidden" value="${beginDate}" />
|
<input id="beginDateh" type="hidden" value="${beginDate}" />
|
||||||
<input id="endDateh" type="hidden" value="${endDate}" />
|
<input id="endDateh" type="hidden" value="${endDate}" />
|
||||||
|
</div>
|
||||||
|
<div class="row chart-history hidden">
|
||||||
|
<div id="chart-history" style="width: 97%; height: 430px; margin-top: 20px"></div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="nav nav-tabs">
|
<ul class="nav nav-tabs">
|
||||||
<li class="searchQuota active" value="1" onclick="changeOrderby(1)"><a href="javascript:void(0);"><spring:message code="link_num"/></a></li>
|
<li class="searchQuota active" value="1" onclick="changeOrderby(1)"><a href="javascript:void(0);"><spring:message code="link_num"/></a></li>
|
||||||
@@ -100,7 +108,7 @@
|
|||||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> <spring:message code="export"/>
|
||||||
<span class="caret"></span>
|
<span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: 2px;">
|
<ul class="dropdown-menu" role="menu" style="min-width: 81px;right: -12px;">
|
||||||
<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="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>
|
<li><a class="btn export-btn" data-type="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -150,6 +158,7 @@
|
|||||||
var entranceId=$("#entranceId").val();
|
var entranceId=$("#entranceId").val();
|
||||||
var searchQuota=$(".searchQuota[class~='active']").val();
|
var searchQuota=$(".searchQuota[class~='active']").val();
|
||||||
appTransAjax(starth,endh,appType,entranceId);
|
appTransAjax(starth,endh,appType,entranceId);
|
||||||
|
showRealTimeTransChart(appType,entranceId);// 实时折线
|
||||||
appTop100List(starth,endh,appType,entranceId,searchQuota);
|
appTop100List(starth,endh,appType,entranceId,searchQuota);
|
||||||
//筛选功能初始化
|
//筛选功能初始化
|
||||||
$("#resetBtn").on("click",function() {
|
$("#resetBtn").on("click",function() {
|
||||||
@@ -165,6 +174,19 @@
|
|||||||
$(".searchQuota").removeClass("active");
|
$(".searchQuota").removeClass("active");
|
||||||
$(this).addClass("active");
|
$(this).addClass("active");
|
||||||
})
|
})
|
||||||
|
$(".chart-realTime").removeClass("hidden");
|
||||||
|
$(".chart-history").addClass("hidden");
|
||||||
|
$(".changeData").on("click",function(){
|
||||||
|
$(".changeData").removeClass("active");
|
||||||
|
$(this).addClass("active");
|
||||||
|
if($(this).val()==1){
|
||||||
|
$(".chart-realTime").removeClass("hidden");
|
||||||
|
$(".chart-history").addClass("hidden");
|
||||||
|
}else{
|
||||||
|
$(".chart-realTime").addClass("hidden");
|
||||||
|
$(".chart-history").removeClass("hidden");
|
||||||
|
}
|
||||||
|
})
|
||||||
$('.pageView').hide();
|
$('.pageView').hide();
|
||||||
});
|
});
|
||||||
// 改变排序字段
|
// 改变排序字段
|
||||||
@@ -183,6 +205,7 @@
|
|||||||
var entranceId=$("#entranceId").val();
|
var entranceId=$("#entranceId").val();
|
||||||
var searchQuota=$(".searchQuota[class~='active']").val();
|
var searchQuota=$(".searchQuota[class~='active']").val();
|
||||||
appTransAjax(start,end,appType,entranceId);// 折线
|
appTransAjax(start,end,appType,entranceId);// 折线
|
||||||
|
showRealTimeTransChart(appType,entranceId);// 折线
|
||||||
appTop100List(start,end,appType,entranceId,searchQuota);// 列表
|
appTop100List(start,end,appType,entranceId,searchQuota);// 列表
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -278,7 +301,6 @@
|
|||||||
// app曲线图
|
// app曲线图
|
||||||
function appTransAjax(beginDate, endDate,appType,entranceId) {
|
function appTransAjax(beginDate, endDate,appType,entranceId) {
|
||||||
loading();
|
loading();
|
||||||
|
|
||||||
$.ajax({ url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+beginDate+"&endDate="+endDate+"&entranceId="+entranceId,
|
$.ajax({ url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+beginDate+"&endDate="+endDate+"&entranceId="+entranceId,
|
||||||
type : "get",
|
type : "get",
|
||||||
dataType : "json",
|
dataType : "json",
|
||||||
@@ -303,32 +325,11 @@
|
|||||||
$(dipResult).each(function(i,d){
|
$(dipResult).each(function(i,d){
|
||||||
dipData.push(d[1])
|
dipData.push(d[1])
|
||||||
})
|
})
|
||||||
/* series.push({
|
|
||||||
name: "server",
|
|
||||||
data: sipResult,
|
|
||||||
// lineColor:'#a9d4cf',
|
|
||||||
lineWidth:2,
|
|
||||||
marker: {
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
name: "client",
|
|
||||||
data: dipResult,
|
|
||||||
// lineColor:'#eecf8d',
|
|
||||||
lineWidth:2,
|
|
||||||
marker: {
|
|
||||||
enabled: false
|
|
||||||
}
|
|
||||||
}); */
|
|
||||||
}else{
|
}else{
|
||||||
total.push(0,0);
|
total.push(0,0);
|
||||||
/* series.push({
|
|
||||||
name: " ",
|
|
||||||
data: []
|
|
||||||
}); */
|
|
||||||
|
|
||||||
}
|
}
|
||||||
showActionTransChart(sipResult,dipResult);
|
showActionHistoryChart(sipResult,dipResult);
|
||||||
$("#total").val(JSON.stringify(total));
|
$("#total").val(JSON.stringify(total));
|
||||||
$("#sipData").val(JSON.stringify(sipData));
|
$("#sipData").val(JSON.stringify(sipData));
|
||||||
$("#dipData").val(JSON.stringify(dipData));
|
$("#dipData").val(JSON.stringify(dipData));
|
||||||
@@ -458,20 +459,46 @@
|
|||||||
$(".pageNum").text(Math.ceil(totalData/10));
|
$(".pageNum").text(Math.ceil(totalData/10));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function activeLastPointToolip(chart) {
|
function realTimeTrendAjax(beginDate, endDate,appType,entranceId){
|
||||||
var points = chart.series[0].points;
|
var result={};
|
||||||
chart.tooltip.refresh(points[points.length -1]);
|
$.ajax({
|
||||||
|
url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+beginDate+"&endDate="+endDate+"&entranceId="+entranceId,
|
||||||
|
type : "get",
|
||||||
|
dataType : "json",
|
||||||
|
async : false,
|
||||||
|
success : function(rs) {
|
||||||
|
result=rs;
|
||||||
|
closeTip();
|
||||||
|
},
|
||||||
|
error : function(data, textStatus, errorThrown) {
|
||||||
|
closeTip();
|
||||||
|
},
|
||||||
|
complete : function(XMLHttpRequest, status) {//超时设置
|
||||||
|
closeTip();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
var timer=null;
|
var timer=null;
|
||||||
// 局点信息
|
// 局点信息
|
||||||
function showActionTransChart(sipResult,dipResult) {
|
function showRealTimeTransChart(appType,entranceId) {
|
||||||
|
var time1=(new Date().getTime())-(1000 * 60 * 10+1000 * 60 * 5);
|
||||||
|
var time2=(new Date().getTime())-(1000 * 60 * 5);//推迟五分钟
|
||||||
|
var beginDate=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time1)); //获取十个点
|
||||||
|
var endDate=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time2)); // 少算一分钟
|
||||||
|
var sipResult=new Array();
|
||||||
|
var dipResult=new Array();
|
||||||
|
var intData = realTimeTrendAjax(beginDate, endDate,appType,entranceId); //初始化数据 为10个点
|
||||||
|
sipResult=intData.sipResult;
|
||||||
|
dipResult=intData.dipResult;
|
||||||
var nowDate=new Date();
|
var nowDate=new Date();
|
||||||
Highcharts.setOptions({ global: { useUTC: false } });
|
Highcharts.setOptions({ global: { useUTC: false } });
|
||||||
var num=0;
|
var num=0;
|
||||||
var chart = Highcharts.chart('chart',
|
var chart = Highcharts.chart('chart-realTime',
|
||||||
{
|
{
|
||||||
chart: {
|
chart: {
|
||||||
// type: 'spline',
|
// type: 'spline',
|
||||||
|
type: 'area',
|
||||||
marginRight: 10,
|
marginRight: 10,
|
||||||
// events: {
|
// events: {
|
||||||
// events: {
|
// events: {
|
||||||
@@ -562,46 +589,70 @@
|
|||||||
},
|
},
|
||||||
series: [{
|
series: [{
|
||||||
name: '<spring:message code="client_ip"/>',
|
name: '<spring:message code="client_ip"/>',
|
||||||
|
lineColor:'#a9d4cf',
|
||||||
|
lineWidth:1,
|
||||||
|
marker: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
data: (function () {
|
data: (function () {
|
||||||
var data = [];
|
var data = [];
|
||||||
if(sipResult!=null&&sipResult.length>0){
|
if(sipResult!=null&&sipResult.length>0){
|
||||||
var count=10;
|
var count=10;
|
||||||
if(sipResult.length<10){
|
if(sipResult.length<10){
|
||||||
count=sipResult.length;
|
count=sipResult.length;
|
||||||
}
|
}
|
||||||
for (var i = 0; i <= count; i++) {
|
for (var i = 0; i < count; i++) {
|
||||||
var d =sipResult[i];
|
var d =sipResult[i];
|
||||||
var x = d[0], // 时间
|
var x = d[0], // 时间
|
||||||
y = d[1];
|
y = d[1];
|
||||||
|
data.push({
|
||||||
|
x: x,
|
||||||
|
y: y
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else{
|
||||||
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
||||||
|
for (var i = 0; i <10; i++) {
|
||||||
data.push({
|
data.push({
|
||||||
x: x,
|
x: time + i * 1000*60,
|
||||||
y: y
|
y: 0
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
num=count;
|
}
|
||||||
}
|
|
||||||
return data;
|
return data;
|
||||||
}())
|
}())
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '<spring:message code="server_ip"/>',
|
name: '<spring:message code="server_ip"/>',
|
||||||
|
lineColor:'#a9d4cf',
|
||||||
|
lineWidth:1,
|
||||||
|
marker: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
data: (function () {
|
data: (function () {
|
||||||
var data = [];
|
var data = [];
|
||||||
if(dipResult!=null&&dipResult.length>0){
|
if(dipResult!=null&&dipResult.length>0){
|
||||||
var count=10;
|
var count=10;
|
||||||
if(dipResult.length<10){
|
if(dipResult.length<10){
|
||||||
count=dipResult.length;
|
count=dipResult.length;
|
||||||
|
}
|
||||||
|
for (var i = 0; i < count; i++) {
|
||||||
|
var d =dipResult[i];
|
||||||
|
var x = d[0], // 当前时间
|
||||||
|
y = d[1];
|
||||||
|
data.push({
|
||||||
|
x: x,
|
||||||
|
y: y
|
||||||
|
});
|
||||||
}
|
}
|
||||||
for (var i = 0; i <= count; i++) {
|
}else{
|
||||||
var d =dipResult[i];
|
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
||||||
var x = d[0], // 当前时间
|
for (var i = 0; i <10; i++) {
|
||||||
y = d[1];
|
|
||||||
data.push({
|
data.push({
|
||||||
x: x,
|
x: time + i * 1000*60,
|
||||||
y: y
|
y: 0
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
num=count;
|
|
||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
}())
|
}())
|
||||||
@@ -611,24 +662,159 @@
|
|||||||
var series = chart.series[0];
|
var series = chart.series[0];
|
||||||
var series1 = chart.series[1];
|
var series1 = chart.series[1];
|
||||||
window.clearInterval(timer);
|
window.clearInterval(timer);
|
||||||
if(sipResult!=null&&sipResult.length>0){
|
// if(sipResult!=null&&sipResult.length>0){
|
||||||
timer=setInterval(function() {
|
timer=setInterval(function() {
|
||||||
var d =sipResult[num];
|
var time3=(new Date().getTime())-(1000 * 60 * 5);
|
||||||
series.addPoint([d[0], d[1]], true, true);
|
var time4=(new Date().getTime())-(1000 * 60 * 4);
|
||||||
|
var begin=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time3)); //获取1个点少算一分钟
|
||||||
var t =dipResult[num];
|
var end=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time4));
|
||||||
series1.addPoint([t[0], t[1]], true, true);
|
$.ajax({
|
||||||
num=num+1;
|
url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+begin+"&endDate="+end+"&entranceId="+entranceId,
|
||||||
if(num==sipResult.length){
|
type : "post",
|
||||||
num=0;
|
dataType : "json",
|
||||||
window.clearInterval(timer);
|
cache:false,
|
||||||
return
|
async : true,
|
||||||
|
success : function(rs) {
|
||||||
|
var realTimeData=rs;
|
||||||
|
if(realTimeData!=null&&Object.keys(realTimeData).length>0){
|
||||||
|
var sipReal=realTimeData.sipResult;
|
||||||
|
var dipReal=realTimeData.dipResult;
|
||||||
|
var d =sipReal[0];
|
||||||
|
series.addPoint([d[0], d[1]], true, true);
|
||||||
|
var t =dipReal[0];
|
||||||
|
series1.addPoint([t[0], t[1]], true, true);
|
||||||
|
}else{
|
||||||
|
var x=(new Date()).getTime()-(1000 * 60 * 5);
|
||||||
|
var y=0;
|
||||||
|
series.addPoint([x, y], true, true);
|
||||||
|
series1.addPoint([x, y], true, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
closeTip();
|
||||||
|
},
|
||||||
|
error : function(data, textStatus, errorThrown) {
|
||||||
|
closeTip();
|
||||||
|
},
|
||||||
|
complete : function(XMLHttpRequest, status) {//超时设置
|
||||||
|
closeTip();
|
||||||
}
|
}
|
||||||
},3000);
|
});
|
||||||
}else{
|
},1000*60);
|
||||||
num=0;
|
// }else{
|
||||||
window.clearInterval(timer);
|
// window.clearInterval(timer);
|
||||||
}
|
// }
|
||||||
|
}
|
||||||
|
// 历史信息
|
||||||
|
function showActionHistoryChart(sipResult,dipResult) {
|
||||||
|
var nowDate=new Date();
|
||||||
|
Highcharts.setOptions({ global: { useUTC: false } });
|
||||||
|
var num=0;
|
||||||
|
var chart = Highcharts.chart('chart-history',
|
||||||
|
{
|
||||||
|
chart: {
|
||||||
|
type: 'area',
|
||||||
|
zoomType: 'x'
|
||||||
|
},
|
||||||
|
noData:{
|
||||||
|
style: {//设置字体颜色
|
||||||
|
color: '#413333',
|
||||||
|
fontFamily:'Microsoft YaHei',
|
||||||
|
fontWeight:"unset",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
exporting : {
|
||||||
|
filename : '<spring:message code="${appName}"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
|
||||||
|
scale : 1,
|
||||||
|
sourceWidth : 1280,
|
||||||
|
sourceHeight : 500,
|
||||||
|
buttons : {
|
||||||
|
contextButton : {
|
||||||
|
menuItems : [
|
||||||
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0],// 打印
|
||||||
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[1],// jpeg
|
||||||
|
'downloadPNG','downloadPDF',
|
||||||
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[4],// excel
|
||||||
|
Highcharts.getOptions().exporting.buttons.contextButton.menuItems[3],// cvs
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colors:['#a9d4cf','#eecf8d'],
|
||||||
|
title : {
|
||||||
|
text : null
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type:'datetime',
|
||||||
|
dateTimeLabelFormats: {
|
||||||
|
second: '%H:%M:%S',
|
||||||
|
minute: '%H:%M',
|
||||||
|
hour: '%H:%M',
|
||||||
|
day: '%m-%d',
|
||||||
|
week: '%m-%d',
|
||||||
|
month: '%Y-%m',
|
||||||
|
year: '%Y'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'time',
|
||||||
|
align:'high',
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
// rotation: -45, //倾斜的角度
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis : {
|
||||||
|
title : {
|
||||||
|
text : null
|
||||||
|
},
|
||||||
|
min:0,
|
||||||
|
allowDecimals:false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
dateTimeLabelFormats: {
|
||||||
|
millisecond: '%Y-%m-%d %H:%M:%S',
|
||||||
|
second: '%Y-%m-%d %H:%M:%S',
|
||||||
|
minute: '%Y-%m-%d %H:%M:%S',
|
||||||
|
hour: '%Y-%m-%d %H:%M:%S',
|
||||||
|
day: '%Y-%m-%d %H:%M:%S',
|
||||||
|
week: '%Y-%m-%d %H:%M:%S',
|
||||||
|
month: '%Y-%m-%d %H:%M:%S',
|
||||||
|
year: '%Y-%m-%d %H:%M:%S'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
credits : {//是否有水印
|
||||||
|
enabled : false
|
||||||
|
},
|
||||||
|
plotOptions : {
|
||||||
|
series : {
|
||||||
|
marker : {
|
||||||
|
radius : 2,
|
||||||
|
hover : {
|
||||||
|
enabled : true,
|
||||||
|
radius : 7,
|
||||||
|
radiusPlus : 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: '<spring:message code="client_ip"/>',
|
||||||
|
data: sipResult,
|
||||||
|
lineColor:'#a9d4cf',
|
||||||
|
lineWidth:1,
|
||||||
|
marker: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '<spring:message code="server_ip"/>',
|
||||||
|
data: dipResult,
|
||||||
|
lineColor:'#eecf8d',
|
||||||
|
lineWidth:1,
|
||||||
|
marker: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
}
|
}
|
||||||
(function(H) {
|
(function(H) {
|
||||||
H.Chart.prototype.downloadXLS = function() {
|
H.Chart.prototype.downloadXLS = function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user