466 lines
16 KiB
Plaintext
466 lines
16 KiB
Plaintext
<%@ 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>
|
||
|
||
<div id="chart" style="width:97%;height:90%;margin-top: 35px;"></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="serviceId" type="hidden" value="${serviceId}"/>
|
||
<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();
|
||
var serviceId=$("#serviceId").val();
|
||
excfgid=cfgId;
|
||
$("#beginDate").val(starth);
|
||
$("#endDate").val(endh);
|
||
actionTransAjax(logTltle,starth,endh,cfgId,serviceId);
|
||
//筛选功能初始化
|
||
$("#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();
|
||
var serviceId=$("#serviceId").val();
|
||
$("#beginDateh").val(start);
|
||
$("#endDateh").val(end);
|
||
if(start==''||end==''||end==null||start==null){
|
||
window.location.reload();
|
||
}else{
|
||
actionTransAjax(logTltle,start,end,cfgId,serviceId);
|
||
}
|
||
}
|
||
// 局点信息
|
||
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: 600,
|
||
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: {
|
||
millisecond: '%H:%M:%S',
|
||
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,serviceId){
|
||
loading();
|
||
$.ajax({
|
||
url: "${ctx}/toLogSearch/actionLogTrend?cfgId="+cfgId+"&searchAction="+searchAction+"&beginDate="+beginDate+"&endDate="+endDate+"&serviceId="+serviceId,
|
||
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;
|
||
});
|
||
}
|
||
|
||
|
||
//配置趋势图需特殊提示，所以从公共js文件中拿出无数据提示方法到本文件中
|
||
var log_data=$.validator.messages.log_no_data;
|
||
(function(d) {
|
||
"object" === typeof module && module.exports ? module.exports = d: d(Highcharts)
|
||
})(function(d) { (function(c) {
|
||
var d = c.seriesTypes,
|
||
e = c.Chart.prototype,
|
||
f = c.getOptions(),
|
||
g = c.extend,
|
||
h = c.each;
|
||
g(f.lang, {
|
||
noData: log_data
|
||
});
|
||
f.noData = {
|
||
position: {
|
||
x: 0,
|
||
y: 0,
|
||
align: "center",
|
||
verticalAlign: "middle"
|
||
}
|
||
};
|
||
f.noData.style = {
|
||
fontWeight: "bold",
|
||
fontSize: "12px",
|
||
color: "#666666"
|
||
};
|
||
h("bubble gauge heatmap pie sankey treemap waterfall".split(" "),
|
||
function(b) {
|
||
d[b] && (d[b].prototype.hasData = function() {
|
||
return !! this.points.length
|
||
})
|
||
});
|
||
c.Series.prototype.hasData = function() {
|
||
return this.visible && void 0 !== this.dataMax && void 0 !== this.dataMin
|
||
};
|
||
e.showNoData = function(b) {
|
||
var a = this.options;
|
||
b = b || a && a.lang.noData;
|
||
a = a && a.noData; ! this.noDataLabel && this.renderer && (this.noDataLabel = this.renderer.label(b, 0, 0, null, null, null, a.useHTML, null, "no-data"), this.noDataLabel.attr(a.attr).css(a.style), this.noDataLabel.add(), this.noDataLabel.align(g(this.noDataLabel.getBBox(), a.position), !1, "plotBox"))
|
||
};
|
||
e.hideNoData = function() {
|
||
this.noDataLabel && (this.noDataLabel = this.noDataLabel.destroy())
|
||
};
|
||
e.hasData = function() {
|
||
for (var b = this.series || [], a = b.length; a--;) if (b[a].hasData() && !b[a].options.isInternal) return ! 0;
|
||
return this.loadingShown
|
||
};
|
||
c.addEvent(c.Chart, "render",
|
||
function() {
|
||
this.hasData() ? this.hideNoData() : this.showNoData()
|
||
})
|
||
})(d)
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |