业务配置添加日志趋势图

js国际化添加日志趋势
This commit is contained in:
leijun
2019-01-15 18:49:28 +08:00
parent d0d2eb9e2a
commit 90a56b5e83
7 changed files with 546 additions and 6 deletions

View File

@@ -1,14 +1,32 @@
package com.nis.web.controller.configuration;
import java.net.URISyntaxException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.http.client.utils.URIBuilder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
import com.beust.jcommander.internal.Maps;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import com.nis.domain.log.BaseLogEntity;
import com.nis.util.Constants;
import com.nis.util.StringUtil;
import com.nis.util.httpclient.HttpClientUtil;
import com.nis.web.controller.BaseController;
import net.sf.json.JSONObject;
@Controller
@RequestMapping("${adminPath}/toLogSearch")
@@ -36,4 +54,95 @@ public class LogSearchController extends BaseController{
attr.addAttribute("isLogTotalSearch", entity.getIsLogTotalSearch());
return "redirect:"+adminPath+logUrl;
}
@RequestMapping(value = {"logTrend",""})
public String logTrend(Model model,BaseLogEntity<Object> entity,String cfgId,RedirectAttributes attr, HttpServletRequest request,
HttpServletResponse response) {
Calendar cal = Calendar. getInstance ();
cal.setTime(new Date());
String now = new SimpleDateFormat( "yyyy-MM-dd HH:mm:00" ).format(cal.getTime());//获取到完整的时间
cal.set(Calendar.HOUR_OF_DAY, cal.get(Calendar.HOUR_OF_DAY) - 1);
String oneHoursAgo = new SimpleDateFormat( "yyyy-MM-dd HH:mm:00" ).format(cal.getTime());
model.addAttribute("beginDate", oneHoursAgo);
model.addAttribute("endDate", now);
model.addAttribute("cfgId", cfgId);
return "/cfg/logCfgTrendList";
}
@RequestMapping(value="actionLogTrend")
@ResponseBody
public List actionTrans(String cfgId,String beginDate,String endDate){
Map<String, Object> fromJsonList = new HashMap<String, Object>();
List resultList = new ArrayList();
String url = Constants.LOG_BASE_URL+Constants.NTC_PZ_REPORT;
url=url+"?searchBusinessType=2&searchCfgId="+cfgId;
try {
//String url="http://192.168.10.204:9999/galaxy-service/service/log/v1/ntcPzReport?searchBusinessType=2&searchReportStartTime=2018-12-29%2000:00:00&searchReportEndTime=2018-12-30%2000:00:00";
url = urlAddDate(url,beginDate,endDate);
//String json=ConfigServiceUtil.getReport(url.toString(), null);
String json = HttpClientUtil.get(url);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(json, new TypeToken<Map>(){}.getType());
fromJsonList=(Map<String, Object>) fromJsonList.get("data");
logger.debug("日志趋势数据"+fromJsonList);
JSONObject obj=JSONObject.fromObject(json);
resultList =getList(fromJsonList);
} catch (Exception e) {
e.printStackTrace();
resultList.add(Maps.newHashMap("error","request_service_failed"));
}
return resultList;
}
public List getList(Map<String, Object> dateList){
List<Map<String,Object>> resultList = new ArrayList<Map<String,Object>>();
try {
List<Map<String, Object>> mapList=(List<Map<String, Object>>) dateList.get("list");
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Map<String, Object> maps=new HashMap<String,Object>();
List<Double[]> list=new ArrayList<Double[]>();
Double total=0.0;
for (Map<String, Object> map : mapList) {
Double[] logs=new Double[2];
Double sum=Double.valueOf(String.valueOf(map.get("sum")));
Double date=Double.valueOf(sdf.parse(String.valueOf(map.get("reportTime"))).getTime());
total+=sum;
logs[0]=date;
logs[1]=sum;
list.add(logs);
}
maps.put("sum",total);
maps.put("result", list);
resultList.add(maps);
} catch (Exception e) {
e.printStackTrace();
}
return resultList;
}
/**
*
*
* url路径时间参数格式化
* @param url
* @param beginDate
* @param endDate
* @return
* @throws URISyntaxException
*/
public String urlAddDate(String url,String beginDate,String endDate) throws URISyntaxException{
if(StringUtil.isBlank(beginDate)||StringUtil.isBlank(endDate)){
Calendar cal = Calendar. getInstance ();
cal.setTime(new Date());
endDate = new SimpleDateFormat( "yyyy-MM-dd HH:mm:00" ).format(cal.getTime());//获取到完整的时间
cal.set(Calendar.HOUR_OF_DAY, cal.get(Calendar.HOUR_OF_DAY) - 1);
beginDate = new SimpleDateFormat( "yyyy-MM-dd HH:mm:00" ).format(cal.getTime());
}
URIBuilder uriBuilder = new URIBuilder(url);
uriBuilder.addParameter("searchReportStartTime",beginDate);
uriBuilder.addParameter("searchReportEndTime",endDate);
return uriBuilder.toString();
}
}

View File

@@ -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>

View File

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

View File

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

View File

@@ -85,6 +85,7 @@
ipMaskSole:"IP уже существует.",
noStrategyCheck:"No effective spoofing IP configuration",
keywordLength:"Введите между 4 и 1024 символов длинной.",
arbitrary:"Любой"
arbitrary:"Любой",
log_trend:"Журнал Тенденция"
});
}(jQuery));

View File

@@ -85,6 +85,7 @@
ipMaskSole:"IP已存在",
noStrategyCheck:"策略组下无有效的欺骗IP配置",
keywordLength:"请输入一个长度介于4 和1024 之间的字符串",
arbitrary:"任意"
arbitrary:"任意",
log_trend:"日志趋势"
});
}(jQuery));

View File

@@ -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=====================================*/