业务配置添加日志趋势图

js国际化添加日志趋势
2019-01-15 18:49:28 +08:00
parent d0d2eb9e2a
commit 90a56b5e83
7 changed files with 546 additions and 6 deletions
--- a/src/main/webapp/WEB-INF/views/cfg/logCfgTrendList.jsp
+++ b/src/main/webapp/WEB-INF/views/cfg/logCfgTrendList.jsp
@@ -0,0 +1,408 @@
+<%@ page contentType="text/html;charset=UTF-8"%>
+<%@ include file="/WEB-INF/include/taglib.jsp"%>
+<html>
+<head>
+<title>
+	<spring:message code="log"/><spring:message code="trend"/>
+</title>
+</head>
+
+<body>
+
+<div class="page-content">
+	<%-- <div class="theme-panel hidden-xs hidden-sm">
+	<button type="button" class="btn btn-default" onClick="javascript:window.location.reload()"><i class="fa fa-refresh"></i></button>
+	<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><i class="fa fa-history"></i></button>
+	</div> --%>
+	<!-- <h5 class="page-header"></h5> -->
+	<br>
+		<div class="row" style="margin-left: 12px;">
+		<form:form id="searchForm" method="get" class="form-search">
+			<!-- 搜索内容与操作按钮栏 -->
+			<div class="col-md-12">
+				<div class="pull-left">
+ 				  <div class="input-group">
+                              <div class="input-group-btn">
+						<span class="selectpicker form-control" ><spring:message code="begin_date"/></span>
+                          	</div>
+                              <input name="beginDate" id="beginDate" type="text" readonly="readonly" maxlength="20" class="form-control Wdate input-medium"
+										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="input-group">
+                              <div class="input-group-btn">
+						<span class="selectpicker form-control" ><spring:message code="end_date"/></span>
+                          	</div>
+                              	<input name="endDate" id="endDate" type="text" readonly="readonly" maxlength="20" class="form-control Wdate input-medium"
+										value="" onclick="WdatePicker({onpicked:function(){this.onchange()},dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true,maxDate:'#F{\'new Date()\'}'});" onchange="setEndTime('#beginDate','#endDate',7,'d','yyyy-MM-dd hh:mm:ss',false)"/>
+						</div>
+                    		</div>
+                    		
+				<div class="pull-left">
+					 <button type="button" class="btn blue" onClick="return searchList()"> <i class="fa fa-search"></i> <spring:message code="search"/>  </button>
+					 <button type="button" class="btn btn-default" id="resetBtn" > <i class="fa fa-refresh"></i> <spring:message code="reset"/>  </button>
+				</div>
+			</div>
+			<!-- 搜索内容与操作按钮栏 -->
+		</form:form>
+	</div>
+	<br>
+	<div id="chart" style="width:97%;height:480px;"></div>
+	
+	<%-- <input id="searchAction" name="searchAction" type="hidden" value="${searchAction}"/> --%>
+	<input id="beginDateh" type="hidden" value="${beginDate}"/>
+	<input id="endDateh" type="hidden" value="${endDate}"/>
+	<input id="cfgId" type="hidden" value="${cfgId}"/>
+	<input id="total" type="hidden"/>		
+</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>
+<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/series-label.js"></script>--%>
+<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/offline-exporting.js"></script>
+<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
+<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting-data.js"></script>
+<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/standalone.js"></script>
+<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/no-data-to-display.js"></script>
+
+<script type="text/javascript">
+var lineColors=['#a9d4cf','#eecf8d','#f1aa76','#88b876','#E2875C','#EDC86B','#DF8F7E','#F0AEC9','#59BACE','#8E97EE'];
+var logTltle=$.validator.messages.log_trend;
+var excfgid=null;
+$(document).ready(function(){
+	var starth=$("#beginDateh").val();
+	var endh=$("#endDateh").val();
+	var cfgId=$("#cfgId").val();
+	excfgid=cfgId;
+	$("#beginDate").val(starth);
+	$("#endDate").val(endh);
+	actionTransAjax(logTltle,starth,endh,cfgId);
+	//筛选功能初始化
+	$("#resetBtn").on("click",function(){
+			$("select.selectpicker").each(function(){
+				$(this).selectpicker('val',$(this).find('option:first').val());
+				$(this).find("option").attr("selected",false);
+				$(this).find("option:first").attr("selected",true);
+			});
+			$(".Wdate").attr("value",'');
+			$("#searchForm")[0].reset();
+		});
+	
+// 	setInterval(function(){
+// 		actionTransAjax($("#searchAction").val(),starth,new Date().Format("yyyy-MM-dd HH:mm:00"));
+// 	},500000);// 五分钟调用一次
+});
+function searchList(){
+	loading();
+	var start=$("#beginDate").val();
+	var end=$("#endDate").val();
+	var cfgId=$("#cfgId").val();
+	
+	$("#beginDateh").val(start);
+	$("#endDateh").val(end);
+	if(start==''||end==''||end==null||start==null){
+		window.location.reload();
+	}else{
+	actionTransAjax(logTltle,start,end,cfgId);
+	}
+}
+// 局点信息
+function showActionTransChart(xData,series){
+	var nowDate=new Date();
+	Highcharts.setOptions({ global: { useUTC: false } }); 
+	var chart = Highcharts.chart('chart', {
+		chart:{
+ 			type: 'area',
+			zoomType: 'x'
+		}, 
+		exporting: {
+			filename:logTltle+"_"+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
+                            ]
+                }
+            }
+		},
+		noData:{
+			style: {//设置字体颜色
+				color: '#413333',
+				fontFamily:'Microsoft YaHei',
+				fontWeight:"unset",
+			},
+		},
+	    title: {
+	        text: null
+	    },
+	    colors:['#e5e3cd','#f1e5cd','#f3ebdf','#f3f7f1','#F6DDD0','#FAF0D5','#F1CFC7','#F8DCE8','#CEEBF1','#CED3F8'],
+		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
+	    },
+	    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:{//是否有highcharts水印
+	        enabled:false
+	    },
+	    plotOptions: {
+	        series: {
+	            marker: {
+	                radius: 2,
+	                hover: {
+	                	enabled: true,
+	                	radius: 7,
+	                	radiusPlus: 5
+	                	}
+	            }
+	        }
+	    },
+// 	    legend: {
+// 	        layout: 'vertical',
+// 	        align: 'right',
+// 	        verticalAlign: 'middle'
+// 	    },
+	    series: series,
+	});
+}
+	// 动作一小时，间隔五分钟统计数据
+	function actionTransAjax(searchAction,beginDate,endDate,cfgId){
+		loading();
+		$.ajax({
+			url: "${ctx}/toLogSearch/actionLogTrend?cfgId="+cfgId+"&searchAction="+searchAction+"&beginDate="+beginDate+"&endDate="+endDate,
+			type : "get" ,
+			dataType:"json",
+			async:true,
+			success:function (rs) {
+				var xData=new Array();
+				var series=new Array();
+				var total=[];
+				if(rs!=null&&rs.length>0){
+					$(rs).each(function(i, d) {
+						 total.push(
+								d.sum
+							) 
+						var entrance=cfgId;
+						series.push({
+								name: entrance,
+								data: d.result,
+								lineColor:lineColors[i],
+								marker: {
+						            enabled: false
+						        }
+						});
+					})
+				}else{
+					series.push({
+						name: " ",
+						data: []
+					});
+					
+				}
+				$("#total").val(JSON.stringify(total));
+				showActionTransChart(xData,series);
+				closeTip();
+			},  
+			error: function(data, textStatus, errorThrown){
+				closeTip();
+			},
+			complete:function(XMLHttpRequest,status){//超时设置
+				closeTip();
+			}
+		});
+		 
+	  }
+	
+	function getLogDate(time){
+		var date = new Date(time);
+		var times = date.getTime();
+		times=times/1000;
+		return times;
+	}
+	
+	(function(H) {
+		var nowDate=new Date();
+		  H.Chart.prototype.downloadXLS = function() {
+			  var start=$("#beginDateh").val();
+				var end=$("#endDateh").val();
+		    var div = document.createElement('div'),
+		      xlsxRows = [],
+		      xlsxColumns = [];
+		    div.style.display = 'none';
+		    document.body.appendChild(div);
+		    rows = this.getDataRows(true);
+			/* 调用后台接口导出 */
+		var total = JSON.parse($("#total").val());
+		var map={};
+		$(rows).each(function(i,d){
+		    // 去掉多余属性
+	    	delete d.name;
+	    	delete d.x;
+	    	delete d.xValues;
+		 })
+		 total.unshift('<spring:message code="report_total"/>');
+		 rows.shift(); // 删除一个重复行
+		 var heard = rows.shift(); // 删除一个重复行
+		 rows.push(total)
+		 map["titleTime"]="<spring:message code='cfg_id'/>:"+excfgid+" "+logTltle+" "+start+"—"+end;
+		 map["heard"]=['time','sum'];
+		 map["book"]=rows;
+		 map["titleCode"]=logTltle;
+		var exports = JSON.stringify(map);
+		aJaxImportPost("${ctx}/export/ajaxExport",{"exports":exports});
+
+		    
+		    /* xlsxRows = H.map(rows.slice(1), function(row) {
+		      return H.map(row, function(column) {
+		        return {
+		          type: typeof column === 'number' ? 'number' : 'string',
+		          value: column
+		        };
+		      });
+		    });
+		    var a =new Array();
+			a.push({
+				type:'string',
+				value:'<spring:message code="total"></spring:message>'
+			})
+			
+			if(xlsxRows!=null&&xlsxRows!=undefined&&xlsxRows.length>0){
+				for(var j=0;j<xlsxRows[0].length-1;j++){
+					a.push({
+						type:'number',
+						value:0
+					})
+				}
+				for(var i=1;i<xlsxRows.length;i++){
+					for(var j=1;j<xlsxRows[i].length;j++){
+						a[j].value=a[j].value+xlsxRows[i][j].value;
+					}
+				}
+			}
+			xlsxRows.push(a)
+			
+			var b =new Array();
+			b.push({
+				type:'string',
+				value:'<spring:message code="${searchAction}"></spring:message>'
+			})
+			b.push({
+				type:"string",
+				value:start+'--'+end
+			})
+			xlsxRows.unshift(b)
+
+		    
+		    
+		    zipcelx({
+		      filename: '<spring:message code="${searchAction}"></spring:message>'+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds(),
+		      sheet: {
+		        data: xlsxRows
+		      }
+		    }); */
+		  };
+		}(Highcharts));
+	(function(H) {
+		H.Chart.prototype.downloadCSV = function() {
+			var rows = this.getDataRows(true);
+			var total = JSON.parse($("#total").val());
+			var data=[];
+			$(rows).each(function (i,d){
+				if(d!=null){
+				if(i>0){
+					data.push({
+		                      num1:d[0],
+		                      num2:d[1],
+		                      num3:d[2],
+					})
+				}
+				}
+			})
+			data.push({
+				num1:"<spring:message code='report_total'/>",
+                num2:total
+			})
+			data[0]={"num1":"time","num2":"sum"};
+			var start = $("#beginDateh").val();
+			var end = $("#endDateh").val();
+			exportCsv({
+                  title:["<spring:message code='cfg_id'/>:"+excfgid+" "+logTltle+" "+start+"—"+end],
+                  titleForKey:["num1","num2","num3"],
+                  data:data
+              });
+		};
+	}(Highcharts));
+
+	function exportCsv(obj){
+		var nowDate=new Date();
+        //title ["","",""]
+        var title = obj.title;
+        //titleForKey ["","",""]
+        var titleForKey = obj.titleForKey;
+        var data = obj.data;
+        var str = [];
+        str.push(obj.title.join(",")+"\n");
+        for(var i=0;i<data.length;i++){
+            var temp = [];
+            for(var j=0;j<titleForKey.length;j++){
+                temp.push(data[i][titleForKey[j]]);
+         }
+         str.push(temp.join(",")+"\n");
+     }
+     str = "\uFEFF"+str.join(""); //
+     var blob = new Blob([str], {type: 'text/plain'});
+      var uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(blob);
+      var downloadLink = document.createElement("a");
+      downloadLink.href = window.URL.createObjectURL(blob);
+      downloadLink.download = logTltle+"_"+nowDate.getFullYear()+(nowDate.getMonth()+1)+nowDate.getDate()+nowDate.getHours()+nowDate.getMinutes()+nowDate.getSeconds()+".csv"; 
+      downloadLink.style.display = 'none';
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+  }
+	function sum(arr) {
+	    return arr.reduce(function(prev, curr, idx, arr){
+	        return prev + curr;
+	    });
+	}
+</script>
+</body>
+</html>
--- a/src/main/webapp/WEB-INF/views/home.jsp
+++ b/src/main/webapp/WEB-INF/views/home.jsp
@@ -343,6 +343,7 @@ background:#3d3d3d;
 			<!-- END MEGA MENU -->

 			<input type="hidden"  id="tb_custom" value="<spring:message code='cfg_custom'/>"/>
+			<input type="hidden"  id="jbox_cfg_url" value="${ctx}/toLogSearch/logTrend"/>
 			<!-- BEGIN TOP NAVIGATION MENU -->
 			<div class="top-menu">
 				<ul class="nav navbar-nav pull-right">
--- a/src/main/webapp/static/global/plugins/jquery-validation/1.11.0/localization/messages_en.js
+++ b/src/main/webapp/static/global/plugins/jquery-validation/1.11.0/localization/messages_en.js
@@ -85,6 +85,7 @@
 		ipMaskSole:"IP already exists.",
 		noStrategyCheck:"No effective spoofing IP configuration",
 		keywordLength:"Please enter a value between 4 and 1024 characters long.",
-		arbitrary:"Arbitrarily"
+		arbitrary:"Arbitrarily",
+		log_trend:"Log Trend"
 	});
 }(jQuery));
--- a/src/main/webapp/static/global/plugins/jquery-validation/1.11.0/localization/messages_ru.js
+++ b/src/main/webapp/static/global/plugins/jquery-validation/1.11.0/localization/messages_ru.js
@@ -85,6 +85,7 @@
 		ipMaskSole:"IP уже существует.",
 		noStrategyCheck:"No effective spoofing IP configuration",
 		keywordLength:"Введите между 4 и 1024 символов длинной.",
-		arbitrary:"Любой"
+		arbitrary:"Любой",
+		log_trend:"Журнал Тенденция"
 	});
 }(jQuery));
--- a/src/main/webapp/static/global/plugins/jquery-validation/1.11.0/localization/messages_zh.js
+++ b/src/main/webapp/static/global/plugins/jquery-validation/1.11.0/localization/messages_zh.js
@@ -85,6 +85,7 @@
 		ipMaskSole:"IP已存在",
 		noStrategyCheck:"策略组下无有效的欺骗IP配置",
 		keywordLength:"请输入一个长度介于4 和1024 之间的字符串",
-		arbitrary:"任意"
+		arbitrary:"任意",
+		log_trend:"日志趋势"
 	});
 }(jQuery));
--- a/src/main/webapp/static/global/scripts/pzLog.js
+++ b/src/main/webapp/static/global/scripts/pzLog.js
@@ -112,11 +112,15 @@ var getTotalLog=function(){
 	   data.compileIds=[];
 	   data.serviceIds=[];
 	   data.objs=[];
+//	   data.url=null;
 	   $("td[compileId]").each(function(){
 		   	var audit=$(this).attr("audit");
 		   	var compileId=$(this).attr("compileId");
 		   	var serviceId=$(this).attr("serviceId");
 		   	var functionId=$(this).attr("functionId");
+		/*   	if(data.url==null){
+		   		data.url=$(this).attr("url");
+		   	}*/
 		   	if(audit&&compileId&&functionId&&serviceId){
 		   		if(audit != 0){
 					var has=false;
@@ -169,7 +173,8 @@ var GetLogTotal=function(_data){
 					for(var i=0;i<data.length;i++){
 						if($(this).attr("compileId")==data[i].compileId){
 							$(this).attr("id",i+"logTotal");
-							$(this).html(data[i].sum);
+							//$(this).html(data[i].sum);
+							$(this).html("<a href='javascript:;' onclick='logSearch(\""+data[i].compileId+"\")'>"+data[i].sum+"<a>");
 							$(this).parent("tr").find("td:eq(1)").html("<a href='javascript:;' onclick='toLogSearch("+i+")'>"+data[i].compileId+"<a>");
 							hasLog=true;
 						}
@@ -646,4 +651,18 @@ function setStartTimeByFormat(startTimeSelector,endTimeSelector,granule,unit,for
 	$(startTimeSelector).val(dateFtt(formatParm,startTime)+endStr);
 	$(endTimeSelector).val(dateFtt(formatParm,endTime)+endStr);
 }
+
+function logSearch(cfgId){ 
+	var  title=$.validator.messages.log_trend;
+	var  url=$("#jbox_cfg_url",parent.document).val();
+		url=url+"?cfgId="+cfgId;
+		 top.$.jBox("iframe:"+url, {
+		    	title: title,
+		    	width: $(document).width()*0.8,
+		    	height: $(document).height()*0.8,
+		    	buttons: { close : true }
+			});
+	//alert(cfgId+'======'+url);
+}
+
 /*======================新增按照需求指定时间范围，如取到天、小时等end=====================================*/