Merge branch 'develop' of https://git.mesalab.cn/K18_NTCS_WEB/NTC.git into develop
This commit is contained in:
duandongmei
@@ -415,10 +415,13 @@ function cancelPassOpt(url){
|
||||
url+="&"+$("#exportType").val()+"="+$("#exportValue").val();
|
||||
}
|
||||
}
|
||||
if(column){
|
||||
if(column.toString()!=""){
|
||||
url+="&columns="+column.toString();
|
||||
}else{
|
||||
top.$.jBox.tip("<spring:message code='all_columns_hidden'/>", "<spring:message code='info'/>");
|
||||
return;
|
||||
}
|
||||
if(hColumn){
|
||||
if(hColumn.toString()!=""){
|
||||
url+="&hColumns="+hColumn.toString();
|
||||
}
|
||||
var checkboxes=$("#${id} ${value} tbody tr td input.i-checks:checkbox");
|
||||
|
||||
@@ -29,11 +29,16 @@
|
||||
<spring:message code="${appName}"></spring:message>
|
||||
</h3>
|
||||
<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">
|
||||
<form:form id="searchForm" method="get" class="form-search">
|
||||
<!-- 搜索内容与操作按钮栏 -->
|
||||
<div class="col-md-12">
|
||||
<div class="pull-left">
|
||||
<div class="pull-left chart-history">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<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)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pull-left">
|
||||
<div class="pull-left chart-history">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<span class="selectpicker form-control"><spring:message
|
||||
@@ -72,17 +77,17 @@
|
||||
<i class="fa fa-search"></i>
|
||||
<spring:message code="search" />
|
||||
</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>
|
||||
<spring:message code="reset" />
|
||||
</button>
|
||||
</button> --%>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索内容与操作按钮栏 -->
|
||||
</form:form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="chart" style="width: 97%; height: 450px; margin-top: 20px"></div>
|
||||
<div class="row chart-realTime">
|
||||
<div id="chart-realTime" style="width: 97%; height: 430px; margin-top: 20px"></div>
|
||||
<input id="total" type="hidden" />
|
||||
<input id="sipData" type="hidden" />
|
||||
<input id="dipData" type="hidden" />
|
||||
@@ -90,6 +95,9 @@
|
||||
<input id="appType" name="appType" type="hidden" value="${appType}" />
|
||||
<input id="beginDateh" type="hidden" value="${beginDate}" />
|
||||
<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>
|
||||
<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>
|
||||
@@ -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"/>
|
||||
<span class="caret"></span>
|
||||
</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="csv" id="export-btn"><i class="fa fa-download"> </i> csv </a><li>
|
||||
</ul>
|
||||
@@ -150,6 +158,7 @@
|
||||
var entranceId=$("#entranceId").val();
|
||||
var searchQuota=$(".searchQuota[class~='active']").val();
|
||||
appTransAjax(starth,endh,appType,entranceId);
|
||||
showRealTimeTransChart(appType,entranceId);// 实时折线
|
||||
appTop100List(starth,endh,appType,entranceId,searchQuota);
|
||||
//筛选功能初始化
|
||||
$("#resetBtn").on("click",function() {
|
||||
@@ -165,6 +174,19 @@
|
||||
$(".searchQuota").removeClass("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();
|
||||
});
|
||||
// 改变排序字段
|
||||
@@ -183,6 +205,7 @@
|
||||
var entranceId=$("#entranceId").val();
|
||||
var searchQuota=$(".searchQuota[class~='active']").val();
|
||||
appTransAjax(start,end,appType,entranceId);// 折线
|
||||
showRealTimeTransChart(appType,entranceId);// 折线
|
||||
appTop100List(start,end,appType,entranceId,searchQuota);// 列表
|
||||
}
|
||||
}
|
||||
@@ -278,7 +301,6 @@
|
||||
// app曲线图
|
||||
function appTransAjax(beginDate, endDate,appType,entranceId) {
|
||||
loading();
|
||||
|
||||
$.ajax({ url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+beginDate+"&endDate="+endDate+"&entranceId="+entranceId,
|
||||
type : "get",
|
||||
dataType : "json",
|
||||
@@ -303,32 +325,11 @@
|
||||
$(dipResult).each(function(i,d){
|
||||
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{
|
||||
total.push(0,0);
|
||||
/* series.push({
|
||||
name: " ",
|
||||
data: []
|
||||
}); */
|
||||
|
||||
}
|
||||
showActionTransChart(sipResult,dipResult);
|
||||
showActionHistoryChart(sipResult,dipResult);
|
||||
$("#total").val(JSON.stringify(total));
|
||||
$("#sipData").val(JSON.stringify(sipData));
|
||||
$("#dipData").val(JSON.stringify(dipData));
|
||||
@@ -458,20 +459,46 @@
|
||||
$(".pageNum").text(Math.ceil(totalData/10));
|
||||
}
|
||||
}
|
||||
function activeLastPointToolip(chart) {
|
||||
var points = chart.series[0].points;
|
||||
chart.tooltip.refresh(points[points.length -1]);
|
||||
function realTimeTrendAjax(beginDate, endDate,appType,entranceId){
|
||||
var result={};
|
||||
$.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;
|
||||
// 局点信息
|
||||
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();
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
Highcharts.setOptions({ global: { useUTC: false } });
|
||||
var num=0;
|
||||
var chart = Highcharts.chart('chart',
|
||||
var chart = Highcharts.chart('chart-realTime',
|
||||
{
|
||||
chart: {
|
||||
// type: 'spline',
|
||||
type: 'area',
|
||||
marginRight: 10,
|
||||
// events: {
|
||||
// events: {
|
||||
@@ -562,46 +589,70 @@
|
||||
},
|
||||
series: [{
|
||||
name: '<spring:message code="client_ip"/>',
|
||||
lineColor:'#a9d4cf',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
data: (function () {
|
||||
var data = [];
|
||||
if(sipResult!=null&&sipResult.length>0){
|
||||
var count=10;
|
||||
if(sipResult.length<10){
|
||||
count=sipResult.length;
|
||||
}
|
||||
for (var i = 0; i <= count; i++) {
|
||||
var d =sipResult[i];
|
||||
var x = d[0], // 时间
|
||||
y = d[1];
|
||||
if(sipResult.length<10){
|
||||
count=sipResult.length;
|
||||
}
|
||||
for (var i = 0; i < count; i++) {
|
||||
var d =sipResult[i];
|
||||
var x = d[0], // 时间
|
||||
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({
|
||||
x: x,
|
||||
y: y
|
||||
x: time + i * 1000*60,
|
||||
y: 0
|
||||
});
|
||||
}
|
||||
num=count;
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}())
|
||||
},
|
||||
{
|
||||
name: '<spring:message code="server_ip"/>',
|
||||
lineColor:'#a9d4cf',
|
||||
lineWidth:1,
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
data: (function () {
|
||||
var data = [];
|
||||
if(dipResult!=null&&dipResult.length>0){
|
||||
var count=10;
|
||||
if(dipResult.length<10){
|
||||
count=dipResult.length;
|
||||
var count=10;
|
||||
if(dipResult.length<10){
|
||||
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++) {
|
||||
var d =dipResult[i];
|
||||
var x = d[0], // 当前时间
|
||||
y = d[1];
|
||||
}else{
|
||||
var time = (new Date()).getTime()-(1000 * 60 * 10+1000 * 60 * 5);
|
||||
for (var i = 0; i <10; i++) {
|
||||
data.push({
|
||||
x: x,
|
||||
y: y
|
||||
x: time + i * 1000*60,
|
||||
y: 0
|
||||
});
|
||||
}
|
||||
num=count;
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}())
|
||||
@@ -611,24 +662,159 @@
|
||||
var series = chart.series[0];
|
||||
var series1 = chart.series[1];
|
||||
window.clearInterval(timer);
|
||||
if(sipResult!=null&&sipResult.length>0){
|
||||
// if(sipResult!=null&&sipResult.length>0){
|
||||
timer=setInterval(function() {
|
||||
var d =sipResult[num];
|
||||
series.addPoint([d[0], d[1]], true, true);
|
||||
|
||||
var t =dipResult[num];
|
||||
series1.addPoint([t[0], t[1]], true, true);
|
||||
num=num+1;
|
||||
if(num==sipResult.length){
|
||||
num=0;
|
||||
window.clearInterval(timer);
|
||||
return
|
||||
var time3=(new Date().getTime())-(1000 * 60 * 5);
|
||||
var time4=(new Date().getTime())-(1000 * 60 * 4);
|
||||
var begin=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time3)); //获取1个点少算一分钟
|
||||
var end=dateFtt("yyyy-MM-dd hh:mm:ss",new Date(time4));
|
||||
$.ajax({
|
||||
url : "${ctx}/dashboard/traffic/ajaxAppTrend?appType="+appType+"&beginDate="+begin+"&endDate="+end+"&entranceId="+entranceId,
|
||||
type : "post",
|
||||
dataType : "json",
|
||||
cache:false,
|
||||
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{
|
||||
num=0;
|
||||
window.clearInterval(timer);
|
||||
}
|
||||
});
|
||||
},1000*60);
|
||||
// }else{
|
||||
// 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) {
|
||||
H.Chart.prototype.downloadXLS = function() {
|
||||
|
||||
Reference in New Issue
Block a user