196 lines
4.9 KiB
HTML
196 lines
4.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" style="height:100%">
|
||
|
|
<head>
|
||
|
|
#include("/common/header.html")
|
||
|
|
<script src="/js/highcharts/highcharts.js"></script>
|
||
|
|
<script src="/js/highcharts/exporting.js"></script>
|
||
|
|
<script src="/js/highcharts/series-label.js"></script>
|
||
|
|
<script src="/js/highcharts/oldie.js"></script>
|
||
|
|
<script src="/js/highcharts/dark-unica.js"></script>
|
||
|
|
<link id="bootstrap-style" href="/css/chart.css" rel="stylesheet">
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
$(".tab").click(function(){ //切换tab
|
||
|
|
$("[name=titleId]").val($(this).attr("titleId"));
|
||
|
|
$("#my-form").submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#search").click(function(){ //搜索
|
||
|
|
$("#my-form").submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
var datas = #(datas);
|
||
|
|
xtitle = datas[0].xtitle;
|
||
|
|
ytitle = datas[0].ytitle;
|
||
|
|
var lines = datas[1].lines;
|
||
|
|
if (lines) {
|
||
|
|
seriesOptions = [];
|
||
|
|
for (var i = 0; i < lines.length; i++) {
|
||
|
|
seriesOptions[i] = {
|
||
|
|
name: lines[i].name,
|
||
|
|
data: lines[i].data,
|
||
|
|
type: 'line'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
createChart();
|
||
|
|
} else {
|
||
|
|
$("#container").empty();
|
||
|
|
$("#container").append('<div style="padding-top:50px">i18n_dspmi.message.noData_n81i</div>');
|
||
|
|
}
|
||
|
|
|
||
|
|
$("#clear").click(function(){
|
||
|
|
$("input[type=checkbox]").prop("checked", false);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
|
||
|
|
function myup(obj) {
|
||
|
|
$(obj).attr("class", "my-button-up");
|
||
|
|
}
|
||
|
|
|
||
|
|
function mydown(obj) {
|
||
|
|
$(obj).attr("class", "my-button-down");
|
||
|
|
}
|
||
|
|
|
||
|
|
function createChart() {
|
||
|
|
Highcharts.setOptions( {
|
||
|
|
global : {
|
||
|
|
useUTC : false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var chartObj = new Highcharts.Chart(
|
||
|
|
{
|
||
|
|
chart : {
|
||
|
|
renderTo : 'container',
|
||
|
|
zoomType : 'x',
|
||
|
|
spacingRight : 20
|
||
|
|
},
|
||
|
|
title : {
|
||
|
|
text : xtitle
|
||
|
|
},
|
||
|
|
subtitle : {
|
||
|
|
text : ''//这是副标题内容
|
||
|
|
},
|
||
|
|
xAxis : {
|
||
|
|
type : 'datetime',
|
||
|
|
labels : {
|
||
|
|
rotation : 20
|
||
|
|
},
|
||
|
|
dateTimeLabelFormats: {
|
||
|
|
second: '%Y-%m-%d %H:%M:%S',
|
||
|
|
minute: '%Y-%m-%d %H:%M',
|
||
|
|
hour: '%Y-%m-%d %H:%M',
|
||
|
|
day: '%Y-%m-%d',
|
||
|
|
week: '%Y-%m-%d',
|
||
|
|
month: '%Y-%m',
|
||
|
|
year: '%Y'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis : {
|
||
|
|
title : {
|
||
|
|
text : ytitle
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip : {
|
||
|
|
formatter : function() {
|
||
|
|
var s = Highcharts.dateFormat("%Y-%m-%d %H:%M",
|
||
|
|
this.x) + ' [ ';
|
||
|
|
s += '<span>'
|
||
|
|
+ this.point.series.name
|
||
|
|
+ ': </span><span>'
|
||
|
|
+ this.point.y + '</span> ';
|
||
|
|
s = $.trim(s) + " ]";
|
||
|
|
return s;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plotOptions:{
|
||
|
|
|
||
|
|
line:{
|
||
|
|
lineWidth : 1,
|
||
|
|
marker: {
|
||
|
|
radius: 2,
|
||
|
|
states: {
|
||
|
|
hover: {
|
||
|
|
radius: 3
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
area : {
|
||
|
|
fillOpacity: 0.08,
|
||
|
|
lineWidth : 1,
|
||
|
|
shadow : true,
|
||
|
|
marker: {
|
||
|
|
radius: 3,
|
||
|
|
states: {
|
||
|
|
hover: {
|
||
|
|
radius: 5
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
column: {
|
||
|
|
grouping: false,
|
||
|
|
shadow: false,
|
||
|
|
pointPlacement: 'between',
|
||
|
|
groupPadding: 0,
|
||
|
|
pointPadding: 0,
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
scatter:{
|
||
|
|
marker: {
|
||
|
|
radius: 2,
|
||
|
|
states: {
|
||
|
|
hover: {
|
||
|
|
radius: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
symbol: 'circle'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
exporting : {
|
||
|
|
enabled : false
|
||
|
|
},
|
||
|
|
series : seriesOptions,
|
||
|
|
credits: {
|
||
|
|
enabled: false,
|
||
|
|
text: 'i18n_dspmi.message.updateTheMark_n81i'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form id="my-form" action="/monitor/chart" method="post">
|
||
|
|
<input type="hidden" name="seqId" value="#(seqId)"/>
|
||
|
|
<input type="hidden" name="checkTypeId" value="#(checkTypeId)"/>
|
||
|
|
<input type="hidden" name="detectionSetInfoId" value="#(detectionSetInfoId)"/>
|
||
|
|
<input type="hidden" name="titleId" value="#(titleId)"/>
|
||
|
|
<div style="margin:10px 0 10px 15px; position:relative;">
|
||
|
|
<label class="bar">#(_res.get("startTime"))</label>
|
||
|
|
<input id="startTime" value="#(startTime)" name="startTime" class="bar bar-input" onfocus="this.blur()" onclick="WdatePicker({skin:'simple',maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\',lang:'#(_locale)'}'})">
|
||
|
|
<label class="bar">#(_res.get("endTime"))</label>
|
||
|
|
<input id="endTime" value="#(endTime)" name="endTime" class="bar bar-input" onfocus="this.blur()" onclick="WdatePicker({skin:'simple',minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d',lang:'#(_locale)'})">
|
||
|
|
<div id="search" style="display:inline-block; background-color:#ce0000; width:50px; line-height:18px; text-align:center; padding:3px 0 5px 0;position:absolute; margin-left: 10px;">
|
||
|
|
<span id="search" class="icon-search"></span>
|
||
|
|
</div>
|
||
|
|
<div class="my-button-up" onmousedown="mydown(this)" onmouseup="myup(this)" onclick="location.href='/monitor'" style="float:right;margin-right:25px;width:24px;"><span class="icon-arrow-left"></span>#--#(_res.get("goback"))--#</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left:8px">
|
||
|
|
#for(x : columns)
|
||
|
|
#if(x.chartState == "0")
|
||
|
|
#if(fieldName == x.fieldName)
|
||
|
|
#set(class="tab tab-active")
|
||
|
|
#else
|
||
|
|
#set(class="tab")
|
||
|
|
#end
|
||
|
|
<div class="#(class)" titleId="#(x.id)">#(x.fieldComments)</div>
|
||
|
|
#end
|
||
|
|
#end
|
||
|
|
</div>
|
||
|
|
<div id="container" style="min-height:500px; width: 99%;" align="center"></div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|