initial commit
This commit is contained in:
chenjinsong
195
gloam/WebRoot/detection/chart-mem.html
Normal file
195
gloam/WebRoot/detection/chart-mem.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user