Merge branch 'develop' of https://git.mesalab.cn/K18_NTCS_WEB/NTC.git into develop

src/main/webapp/WEB-INF/tags/sys/delRow.tag

@@ -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");

src/main/webapp/WEB-INF/views/dashboard/trafficAppTrendList.jsp

@@ -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 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="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 &nbsp;&nbsp;&nbsp;</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) {
+		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;
 		// 局点信息
-		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){
+												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({
-													x: x,
+													x: time + i * 1000*60,
-													y: y
+													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;
+												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({
-													x: x,
+													x: time + i * 1000*60,
-													y: y
+													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];
+			        	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) {
 			H.Chart.prototype.downloadXLS = function() {