You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
210 lines
7.1 KiB
HTML
210 lines
7.1 KiB
HTML
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="viewport" content="with=device-width, initial-scale=1">
|
||
|
|
<title>抽水蓄能电站智能化状态监测系统</title>
|
||
|
|
|
||
|
|
<link href="__PUBLIC__/style/bootstrap.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/font-awesome.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/weather-icons.css" rel="stylesheet">
|
||
|
|
|
||
|
|
<!--Beyond styles-->
|
||
|
|
<link id="beyond-link" href="__PUBLIC__/style/beyond.css" rel="stylesheet" type="text/css">
|
||
|
|
<link href="__PUBLIC__/style/demo.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/typicons.css" rel="stylesheet">
|
||
|
|
<link href="__PUBLIC__/style/animate.css" rel="stylesheet">
|
||
|
|
<script src="__IMG__/cssjs/js/jquery-1.8.3.min.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/highstock.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/highcharts.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/exporting.js"></script>
|
||
|
|
<script src="__IMG__/cssjs/js/highcharts-zh_CN.js"></script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="widget" >
|
||
|
|
<div class="widget-header ">
|
||
|
|
<span class="widget-caption">趋势图表</span>
|
||
|
|
</div>
|
||
|
|
<div class="widget-body">
|
||
|
|
<div role="grid" id="simpledatatable_wrapper" class="dataTables_wrapper form-inline no-footer" >
|
||
|
|
<div role="grid" class="dataTables_wrapper form-inline no-footer" style="width: 150px;float: left">
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb0" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #66B3FF;">告警等级</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb1" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #FF9224;">环流数据(A)</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="allcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text">全选</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div role="grid" class="dataTables_wrapper form-inline no-footer" style="margin-left: 150px;">
|
||
|
|
<div id="container" style="height: 630px"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
var alldata1=[];
|
||
|
|
var alldata2=[];
|
||
|
|
|
||
|
|
|
||
|
|
$.getJSON('__ROOTURL__/index/line_scur/getjson?sid={$id}&stime={$sdate}&etime={$edate}', function (data) {
|
||
|
|
for(i=0;i<data.length;i++){
|
||
|
|
var tm=data[i].d_time;
|
||
|
|
var ydata1=data[i].alarm_level;
|
||
|
|
var ydata2=data[i].current_val;
|
||
|
|
var someDate = new Date(Date.parse(tm.replace(/-/g,"/")));
|
||
|
|
var tms=Date.UTC(someDate.getFullYear(), someDate.getMonth(), someDate.getDate(), someDate.getHours(),someDate.getMinutes(),someDate.getSeconds());
|
||
|
|
alldata1.push([tms,ydata1]);
|
||
|
|
alldata2.push([tms,ydata2]);
|
||
|
|
}
|
||
|
|
//alert(alldata1);
|
||
|
|
var chart = Highcharts.stockChart('container', {
|
||
|
|
rangeSelector : {
|
||
|
|
buttons : [{
|
||
|
|
type : 'day',
|
||
|
|
count : 1,
|
||
|
|
text : '天'
|
||
|
|
}, {
|
||
|
|
type : 'month',
|
||
|
|
count : 1,
|
||
|
|
text : '月'
|
||
|
|
},{
|
||
|
|
type : 'year',
|
||
|
|
count : 1,
|
||
|
|
text : '年'
|
||
|
|
},{
|
||
|
|
type: 'all',
|
||
|
|
count : 1,
|
||
|
|
text: '全部'
|
||
|
|
}],
|
||
|
|
selected : 1,
|
||
|
|
inputEnabled : false
|
||
|
|
|
||
|
|
},
|
||
|
|
plotOptions: {
|
||
|
|
series: {
|
||
|
|
events: {
|
||
|
|
legendItemClick: function(e) {
|
||
|
|
/*var target = e.target;
|
||
|
|
console.log(target === this);
|
||
|
|
*/
|
||
|
|
var index = this.index;
|
||
|
|
var series = this.chart.series;
|
||
|
|
if(!series[index].visible) {
|
||
|
|
for(var i=0;i<series.length;i++) {
|
||
|
|
var s = series[i];
|
||
|
|
i===index ? s.show() : s.hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: false
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
valueDecimals: 3,
|
||
|
|
split: false,
|
||
|
|
shared: true,
|
||
|
|
|
||
|
|
},
|
||
|
|
yAxis:{
|
||
|
|
labels:{
|
||
|
|
formatter:function(){
|
||
|
|
return this.value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis:{
|
||
|
|
ordinal: false,
|
||
|
|
tickPixelInterval: 100,
|
||
|
|
dateTimeLabelFormats: {
|
||
|
|
millisecond: '%H:%M:%S.%L',
|
||
|
|
second: '%H:%M:%S',
|
||
|
|
minute: '%H:%M',
|
||
|
|
hour: '%H:%M',
|
||
|
|
day: '%Y-%m-%d',
|
||
|
|
week: '%m-%d',
|
||
|
|
month: '%Y-%m',
|
||
|
|
year: '%Y'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
type: 'spline',
|
||
|
|
name: '告警等级',
|
||
|
|
data: alldata1
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '环流数据',
|
||
|
|
data: alldata2
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
$("#allcb").click(function() {
|
||
|
|
|
||
|
|
if(this.checked)
|
||
|
|
{
|
||
|
|
$('input[name="subcb"]').prop("checked", true);
|
||
|
|
for(var i=0;i<3;i++)
|
||
|
|
{
|
||
|
|
if (!(chart.series[i].visible))
|
||
|
|
{
|
||
|
|
chart.series[i].show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
$('input[name="subcb"]').attr("checked",false);
|
||
|
|
for(var i=0;i<3;i++)
|
||
|
|
{
|
||
|
|
if (chart.series[i].visible)
|
||
|
|
{
|
||
|
|
chart.series[i].hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$("input[name='subcb']").click(function(){
|
||
|
|
var series = chart.series[parseInt(this.id.substr(2))];
|
||
|
|
if(this.checked)
|
||
|
|
{
|
||
|
|
series.show();
|
||
|
|
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
series.hide();
|
||
|
|
}
|
||
|
|
if($("input[name='subcb']").length==$("input[name='subcb']:checked").length)
|
||
|
|
{
|
||
|
|
$("#allcb").prop("checked",true)
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
$("#allcb").attr("checked",false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|