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.
308 lines
12 KiB
HTML
308 lines
12 KiB
HTML
2 years ago
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!--<meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">-->
|
||
|
|
<title>抽水蓄能电站智能化状态监测系统</title>
|
||
|
|
<meta name="viewport" content="with=device-width, initial-scale=1">
|
||
|
|
<style>
|
||
|
|
/*span{*/
|
||
|
|
/*color:blue;*/
|
||
|
|
/*}*/
|
||
|
|
/*.hfont{*/
|
||
|
|
/*color:#F00;*/
|
||
|
|
/*font-weight:bold;*/
|
||
|
|
/*}*/
|
||
|
|
</style>
|
||
|
|
<script src="/static/cssjs/js/jquery-1.8.3.min.js"></script>
|
||
|
|
<script src="/static/cssjs/js/highstock.js"></script>
|
||
|
|
<script src="/static/cssjs/js/highcharts.js"></script>
|
||
|
|
<script src="/static/cssjs/js/exporting.js"></script>
|
||
|
|
<script src="/static/cssjs/js/highcharts-zh_CN.js"></script>
|
||
|
|
<!--<link id="beyond-link" href="/static/cssjs/css/beyond.css" rel="stylesheet" type="text/css">-->
|
||
|
|
<!--<script src="https://img.hcharts.cn/highmaps/modules/map.js"></script>-->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div style="height: 100%;">
|
||
|
|
<div style="height: 100%; width: 150px;float: left" class="checkbox">
|
||
|
|
<br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_PT_1" checked="checked" />
|
||
|
|
<span style="color: #66B3FF;"><b>d_PT_1</b></span>
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_PT_2" checked="checked" />
|
||
|
|
<span class="text"><b>d_PT_2</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #9D9D9D" id="C2H4ppm">C2H4ppm</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_PT_3" checked="checked" />
|
||
|
|
<span style="color: #53FF53;"><b>d_PT_3</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #53FF53" id="C2H6ppm">C2H6ppm</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_PT_4" checked="checked" />
|
||
|
|
<span style="color: #FF9224;"><b>d_PT_4</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #FF9224" id="C2H2ppm">C2H2ppm</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_CT_1" checked="checked" />
|
||
|
|
<span style="color: #4A4AFF;"><b>d_CT_1</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #4A4AFF" id="H2ppm">H2ppm</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_CT_2" checked="checked" />
|
||
|
|
<span style="color: #EA0000;"><b>d_CT_2</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #EA0000" id="COppm">COppm</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_CT_3" checked="checked" />
|
||
|
|
<span style="color: #FFD306;"><b>d_CT_3</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #FFD306" id="CO2ppm">CO2ppm</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" name="subBox" id="d_CT_4" checked="checked" />
|
||
|
|
<span style="color: #5CADAD;"><b>d_CT_4</b></span>
|
||
|
|
<!--<button style="width:80px; height:22px; background: #408080" id="TotalHydrocarbon">THydrocarb</button>-->
|
||
|
|
<br><br><br>
|
||
|
|
<INPUT type="checkbox" id="checkall" checked="checked" />
|
||
|
|
<span><b>全选/全不选</b></span>
|
||
|
|
</div>
|
||
|
|
<div id="container" style="height:600px; margin-left:200px; "></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function () {
|
||
|
|
var alldata1=[];
|
||
|
|
var alldata2=[];
|
||
|
|
var alldata3=[];
|
||
|
|
var alldata4=[];
|
||
|
|
var alldata5=[];
|
||
|
|
var alldata6=[];
|
||
|
|
var alldata7=[];
|
||
|
|
var alldata8=[];
|
||
|
|
|
||
|
|
$.getJSON('http://www.tp5.com/index/eline/getjson', function (data) {
|
||
|
|
for(i=0;i<data.length;i++){
|
||
|
|
var tm=data[i].d_Time;
|
||
|
|
var ydata1=data[i].d_PT_1;
|
||
|
|
var ydata2=data[i].d_PT_2;
|
||
|
|
var ydata3=data[i].d_PT_3;
|
||
|
|
var ydata4=data[i].d_PT_4;
|
||
|
|
var ydata5=data[i].d_CT_1;
|
||
|
|
var ydata6=data[i].d_CT_2;
|
||
|
|
var ydata7=data[i].d_CT_3;
|
||
|
|
var ydata8=data[i].d_CT_4;
|
||
|
|
var someDate = new Date(Date.parse(tm));
|
||
|
|
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]);
|
||
|
|
}
|
||
|
|
// alert(alldatas);
|
||
|
|
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 : true
|
||
|
|
},
|
||
|
|
|
||
|
|
title: {
|
||
|
|
text: '设备温度曲线图'
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
valueSuffix: '°C'
|
||
|
|
},
|
||
|
|
yAxis:{
|
||
|
|
labels:{
|
||
|
|
formatter:function(){
|
||
|
|
return this.value+"°C";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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: 'd_PT_1',
|
||
|
|
data: alldata1
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_PT_2',
|
||
|
|
data: alldata2
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_PT_3',
|
||
|
|
data: alldata3
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_PT_4',
|
||
|
|
data: alldata4
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_CT_1',
|
||
|
|
data: alldata5
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_CT_2',
|
||
|
|
data: alldata6
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_CT_3',
|
||
|
|
data: alldata7
|
||
|
|
}, {
|
||
|
|
type: 'spline',
|
||
|
|
name: 'd_CT_4',
|
||
|
|
data: alldata8
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#checkall").click(function() {
|
||
|
|
|
||
|
|
if(this.checked)
|
||
|
|
{
|
||
|
|
$('input[name="subBox"]').attr("checked",true);
|
||
|
|
for(var i=0;i<8;i++)
|
||
|
|
{
|
||
|
|
if (!(chart.series[i].visible))
|
||
|
|
{
|
||
|
|
chart.series[i].show();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
$('input[name="subBox"]').attr("checked",false);
|
||
|
|
for(var i=0;i<8;i++)
|
||
|
|
{
|
||
|
|
if (chart.series[i].visible)
|
||
|
|
{
|
||
|
|
chart.series[i].hide();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
var $subBox = $("input[name='subBox']");
|
||
|
|
$subBox.click(function(){
|
||
|
|
$("#checkall").attr("checked",$subBox.length == $("input[name='subBox']:checked").length ? true : false);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$('#d_PT_1').click(function () {
|
||
|
|
var series = chart.series[0];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_PT_2').click(function () {
|
||
|
|
var series = chart.series[1];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_PT_3').click(function () {
|
||
|
|
var series = chart.series[2];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_PT_4').click(function () {
|
||
|
|
var series = chart.series[3];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_CT_1').click(function () {
|
||
|
|
var series = chart.series[4];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_CT_2').click(function () {
|
||
|
|
var series = chart.series[5];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_CT_3').click(function () {
|
||
|
|
var series = chart.series[6];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#d_CT_4').click(function () {
|
||
|
|
var series = chart.series[7];
|
||
|
|
if (series.visible) {
|
||
|
|
series.hide();
|
||
|
|
} else {
|
||
|
|
series.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|