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.
577 lines
10 KiB
HTML
577 lines
10 KiB
HTML
<!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">
|
|
|
|
<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">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="tabbable">
|
|
|
|
<ul class="nav nav-tabs" id="myTab">
|
|
|
|
<li class="active">
|
|
|
|
<a data-toggle="tab" href="#home">
|
|
|
|
Home
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li class="tab-red">
|
|
|
|
<a data-toggle="tab" href="#profile">
|
|
|
|
Profile
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li class="dropdown">
|
|
|
|
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
|
|
|
|
Dropdown
|
|
|
|
<b class="caret"></b>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<ul class="dropdown-menu dropdown-blue">
|
|
|
|
<li>
|
|
|
|
<a data-toggle="tab" href="#dropdown1">@fat</a>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<a data-toggle="tab" href="#dropdown2">@mdo</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<div class="tab-content">
|
|
|
|
<div id="home" class="tab-pane in active">
|
|
|
|
<div style="height: 100%;">
|
|
|
|
<div class="checkbox">
|
|
|
|
<label>
|
|
|
|
<input class="colored-success" checked="checked" type="checkbox">
|
|
|
|
<span class="text">Success</span>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div style="height: 100%; width: 150px;float: left" >
|
|
|
|
<br><br>
|
|
|
|
<input type="checkbox" name="CH4ppm" id="CH4ppm" checked="checked" />
|
|
|
|
<span class="text">CH4ppm</span>
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="C2H4ppm" id="C2H4ppm" checked="checked" />
|
|
|
|
<span class="text">C2H4ppm</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #9D9D9D" id="C2H4ppm">C2H4ppm</button>-->
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="C2H6ppm" id="C2H6ppm" checked="checked" />
|
|
|
|
<span class="text">C2H6ppm</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #53FF53" id="C2H6ppm">C2H6ppm</button>-->
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="C2H2ppm" id="C2H2ppm" checked="checked" />
|
|
|
|
<span class="text">C2H2ppm</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #FF9224" id="C2H2ppm">C2H2ppm</button>-->
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="H2ppm" id="H2ppm" checked="checked" />
|
|
|
|
<span class="text">H2ppm</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #4A4AFF" id="H2ppm">H2ppm</button>-->
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="COppm" id="COppm" checked="checked" />
|
|
|
|
<span class="text">COppm</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #EA0000" id="COppm">COppm</button>-->
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="CO2ppm" id="CO2ppm" checked="checked" />
|
|
|
|
<span class="text">CO2ppm</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #FFD306" id="CO2ppm">CO2ppm</button>-->
|
|
|
|
<br><br><br>
|
|
|
|
<INPUT type="checkbox" name="THydrocarb" id="THydrocarb" checked="checked" />
|
|
|
|
<span class="text">THydrocarb</span>
|
|
|
|
<!--<button style="width:80px; height:22px; background: #408080" id="TotalHydrocarbon">THydrocarb</button>-->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div id="container" style="height:600px; margin-left:200px; "></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="profile" class="tab-pane">
|
|
|
|
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="dropdown1" class="tab-pane">
|
|
|
|
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="dropdown2" class="tab-pane">
|
|
|
|
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
$(function () {
|
|
|
|
var alldata1=[];
|
|
|
|
var alldata2=[];
|
|
|
|
var alldata3=[];
|
|
|
|
var alldata4=[];
|
|
|
|
var alldata5=[];
|
|
|
|
var alldata6=[];
|
|
|
|
var alldata7=[];
|
|
|
|
var alldata8=[];
|
|
|
|
|
|
|
|
$.getJSON('/index.php/index/sline/getjson?sid={$id}', function (data) {
|
|
|
|
for(var i=0;i<data.length;i++){
|
|
|
|
var tm=data[i].d_Time;
|
|
|
|
var ydata1=data[i].CH4ppm;
|
|
|
|
var ydata2=data[i].C2H4ppm;
|
|
|
|
var ydata3=data[i].C2H6ppm;
|
|
|
|
var ydata4=data[i].C2H2ppm;
|
|
|
|
var ydata5=data[i].H2ppm;
|
|
|
|
var ydata6=data[i].COppm;
|
|
|
|
var ydata7=data[i].CO2ppm;
|
|
|
|
var ydata8=data[i].TotalHydrocarbon;
|
|
|
|
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: {
|
|
|
|
selected: 3
|
|
|
|
},
|
|
|
|
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,
|
|
|
|
|
|
|
|
},
|
|
|
|
yAxis:{
|
|
|
|
labels:{
|
|
|
|
formatter:function(){
|
|
|
|
return this.value
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
series: [{
|
|
|
|
type: 'spline',
|
|
|
|
name: 'CH4ppm',
|
|
|
|
data: alldata1
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'C2H4ppm',
|
|
|
|
data: alldata2
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'C2H6ppm',
|
|
|
|
data: alldata3
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'C2H2ppm',
|
|
|
|
data: alldata4
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'H2ppm',
|
|
|
|
data: alldata5
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'COppm',
|
|
|
|
data: alldata6
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'CO2ppm',
|
|
|
|
data: alldata7
|
|
|
|
}, {
|
|
|
|
type: 'spline',
|
|
|
|
name: 'TotalHydrocarbon',
|
|
|
|
data: alldata8
|
|
|
|
}]
|
|
|
|
});
|
|
|
|
$('#CH4ppm').click(function () {
|
|
|
|
var series = chart.series[0];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#C2H4ppm').click(function () {
|
|
|
|
var series = chart.series[1];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#C2H6ppm').click(function () {
|
|
|
|
var series = chart.series[2];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#C2H2ppm').click(function () {
|
|
|
|
var series = chart.series[3];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#H2ppm').click(function () {
|
|
|
|
var series = chart.series[4];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#COppm').click(function () {
|
|
|
|
var series = chart.series[5];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#CO2ppm').click(function () {
|
|
|
|
var series = chart.series[6];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('#THydrocarb').click(function () {
|
|
|
|
var series = chart.series[7];
|
|
|
|
if (series.visible) {
|
|
|
|
series.hide();
|
|
|
|
} else {
|
|
|
|
series.show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|