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.
390 lines
14 KiB
HTML
390 lines
14 KiB
HTML
2 years ago
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
|
|
<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="cb1" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #66B3FF;">1通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb2" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text">2通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb3" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #53FF53;">3通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb4" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #FF9224;">4通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb5" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #4A4AFF;">5通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb6" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #4A4AFF;">6通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb7" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #4A4AFF;">7通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb8" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #EA0000;">8通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb9" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #FFD306;">9通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb10" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #2E8B57;">10通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb11" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #2E8B57;">11通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb12" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #2E8B57;">12通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb13" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #FFD306;">13通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb14" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #2E8B57;">14通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb15" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #2E8B57;">15通道溫度</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="checkbox">
|
||
|
|
<label>
|
||
|
|
<input id="cb16" name="subcb" checked="checked" type="checkbox">
|
||
|
|
<span class="text" style="color: #2E8B57;">16通道溫度</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: 160px;overflow-x: auto;">
|
||
|
|
<div id="container" style="height: 630px"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
var alldata1=[];
|
||
|
|
var alldata2=[];
|
||
|
|
var alldata3=[];
|
||
|
|
var alldata4=[];
|
||
|
|
var alldata5=[];
|
||
|
|
var alldata6=[];
|
||
|
|
var alldata7=[];
|
||
|
|
var alldata8=[];
|
||
|
|
var alldata9=[];
|
||
|
|
var alldata10=[];
|
||
|
|
var alldata11=[];
|
||
|
|
var alldata12=[];
|
||
|
|
var alldata13=[];
|
||
|
|
var alldata14=[];
|
||
|
|
var alldata15=[];
|
||
|
|
var alldata16=[];
|
||
|
|
|
||
|
|
$.getJSON('__ROOTURL__/index/line_etp_rzcw/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].t1;
|
||
|
|
var ydata2=data[i].t2;
|
||
|
|
var ydata3=data[i].t3;
|
||
|
|
var ydata4=data[i].t4;
|
||
|
|
var ydata5=data[i].t5;
|
||
|
|
var ydata6=data[i].t6;
|
||
|
|
var ydata7=data[i].t7;
|
||
|
|
var ydata8=data[i].t8;
|
||
|
|
var ydata9=data[i].t9;
|
||
|
|
var ydata10=data[i].t10;
|
||
|
|
var ydata11=data[i].t11;
|
||
|
|
var ydata12=data[i].t12;
|
||
|
|
var ydata13=data[i].t13;
|
||
|
|
var ydata14=data[i].t14;
|
||
|
|
var ydata15=data[i].t15;
|
||
|
|
var ydata16=data[i].t16;
|
||
|
|
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]);
|
||
|
|
alldata3.push([tms,ydata3]);
|
||
|
|
alldata4.push([tms,ydata4]);
|
||
|
|
alldata5.push([tms,ydata5]);
|
||
|
|
alldata6.push([tms,ydata6]);
|
||
|
|
alldata7.push([tms,ydata7]);
|
||
|
|
alldata8.push([tms,ydata8]);
|
||
|
|
alldata9.push([tms,ydata9]);
|
||
|
|
alldata10.push([tms,ydata10]);
|
||
|
|
alldata11.push([tms,ydata11]);
|
||
|
|
alldata12.push([tms,ydata12]);
|
||
|
|
alldata13.push([tms,ydata13]);
|
||
|
|
alldata14.push([tms,ydata14]);
|
||
|
|
alldata15.push([tms,ydata15]);
|
||
|
|
alldata16.push([tms,ydata16]);
|
||
|
|
}
|
||
|
|
//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',
|
||
|
|
cunt : 1,
|
||
|
|
text: '全部'
|
||
|
|
}],
|
||
|
|
selected : 1,
|
||
|
|
inputEnabled : false
|
||
|
|
|
||
|
|
},
|
||
|
|
credits: {
|
||
|
|
enabled: 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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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: '1通道溫度',
|
||
|
|
data: alldata1
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '2通道溫度',
|
||
|
|
data: alldata2
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '3通道溫度',
|
||
|
|
data: alldata3
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '4通道溫度',
|
||
|
|
data: alldata4
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '5通道溫度',
|
||
|
|
data: alldata5
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '6通道溫度',
|
||
|
|
data: alldata6
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '7通道溫度',
|
||
|
|
data: alldata7
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '8通道溫度',
|
||
|
|
data: alldata8
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '9通道溫度',
|
||
|
|
data: alldata9
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '10通道溫度',
|
||
|
|
data: alldata10
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '11通道溫度',
|
||
|
|
data: alldata11
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '12通道溫度',
|
||
|
|
data: alldata12
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '13通道溫度',
|
||
|
|
data: alldata13
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '14通道溫度',
|
||
|
|
data: alldata14
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '15通道溫度',
|
||
|
|
data: alldata15
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: '16通道溫度',
|
||
|
|
data: alldata16
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
$("#allcb").click(function() {
|
||
|
|
|
||
|
|
if(this.checked)
|
||
|
|
{
|
||
|
|
$('input[name="subcb"]').prop("checked", true);
|
||
|
|
for(var i=0;i<16;i++)
|
||
|
|
{
|
||
|
|
if (!(chart.series[i].visible))
|
||
|
|
{
|
||
|
|
chart.series[i].show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
$('input[name="subcb"]').attr("checked",false);
|
||
|
|
for(var i=0;i<16;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>
|