You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

598 lines
34 KiB

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>环境监测-Air Liquide 4F</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="content/skin/css/style.css">
</head>
<body style="height: 100%; width: 100%">
<div class="main-content">
<table class="content">
<tr style="height: 15%">
<td>
<div class="head-top">
<div class="logo">
<img src="content/skin/images/10002.png" style="height: 85px" />
</div>
<div class="time" id="DataTime">
-- -- --/--/--
</div>
</div>
</td>
</tr>
<tr style="height: 75%">
<td style="vertical-align: text-top">
<table>
<tr>
<td style="width: 70%; min-width: 520px; vertical-align: text-top;overflow: hidden" id="dynamic-showbox">
<div class="showbox" style="width: 100%; height: 100%; " id="showbox-0">
<table style="padding-left: 2%; vertical-align: top;" id="59053893-box" page="0">
<tr style="height: 70%; vertical-align: top">
<td style="vertical-align: top">
<div class="middle-box">
<div class="tmbg quxian" id="59053893-quxian">
</div>
</div>
</td>
</tr>
<tr style="height: 30%;">
<td style="vertical-align: top">
<div class="item-box">
<div style="width: 915%; position: relative; transition-duration: 0s;">
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59053893-PM10-title">PM10</span>
<small class="unit" id="59053893-PM10-unit">--</small>
</div>
<div class="value" id="59053893-PM10-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59053893-PM10txt"></div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59053893-HUMI-title">HUMI</span>
<small class="unit" id="59053893-HUMI-unit">--</small>
</div>
<div class="value" id="59053893-HUMI-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59053893-HUMItxt">舒 适</div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59053893-TEMP-title">TEMP</span>
<small class="unit" id="59053893-TEMP-unit">--</small>
</div>
<div class="value" id="59053893-TEMP-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59053893-TEMPtxt">舒适</div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59053893-CO2-title">CO2</span>
<small class="unit" id="59053893-CO2-unit">--</small>
</div>
<div class="value" id="59053893-CO2-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59053893-CO2txt"></div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59053893-VOC-title">VOC</span>
<small class="unit" id="59053893-VOC-unit">--</small>
</div>
<div class="value" id="59053893-VOC-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59053893-VOCtxt"></div>
</div>
</div>
</div>
</tr>
</table> </div>
<div class="showbox" style="width: 100%; height: 100%; display:none;" id="showbox-1">
<table style="padding-left: 2%; vertical-align: top;" id="59570501-box" page="1">
<tr style="height: 70%; vertical-align: top">
<td style="vertical-align: top">
<div class="middle-box">
<div class="tmbg quxian" id="59570501-quxian">
</div>
</div>
</td>
</tr>
<tr style="height: 30%;">
<td style="vertical-align: top">
<div class="item-box">
<div style="width: 915%; position: relative; transition-duration: 0s;">
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59570501-PM10-title">PM10</span>
<small class="unit" id="59570501-PM10-unit">--</small>
</div>
<div class="value" id="59570501-PM10-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59570501-PM10txt"></div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59570501-HUMI-title">HUMI</span>
<small class="unit" id="59570501-HUMI-unit">--</small>
</div>
<div class="value" id="59570501-HUMI-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59570501-HUMItxt">舒 适</div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59570501-TEMP-title">TEMP</span>
<small class="unit" id="59570501-TEMP-unit">--</small>
</div>
<div class="value" id="59570501-TEMP-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59570501-TEMPtxt">舒适</div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59570501-CO2-title">CO2</span>
<small class="unit" id="59570501-CO2-unit">--</small>
</div>
<div class="value" id="59570501-CO2-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59570501-CO2txt"></div>
</div>
<div class="item tmbg" style="height: 100%;margin:0 20px 0 0">
<div class="info">
<span class="title" id="59570501-VOC-title">VOC</span>
<small class="unit" id="59570501-VOC-unit">--</small>
</div>
<div class="value" id="59570501-VOC-value" >--</div>
<div class="value" style="font-size:12px;margin:5px 0"> </div>
<div class="value" id="59570501-VOCtxt"></div>
</div>
</div>
</div>
</tr>
</table> </div>
</td>
<td style="width: 30%; min-width: 240px; top: 0; right: 0; position: relative; vertical-align: top;">
<table>
<tr>
<td style="position: relative;">
<div style="top: 0;">
<img src="content/skin/images/00.png" style="width: 50%; padding-left: 15%; margin-top: -120px" id="weatherpic" title="晴" />
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="width: 65%; padding-left: 10%">
<div class="weather">
<ul>
<li>
<i></i>室外温度:<b id="wendu">--</b>
</li>
<li>
<i></i>室外湿度:<b id="shidu">--</b>
</li>
<li>
<i></i>室外PM2.5:<b id="pm25">--</b>
</li>
<li>
<i></i>室外AQI:<b id="aqi">--</b>
</li>
</ul>
</div>
</td>
<td>
<div style="font-size: 40px; text-align: center; font-weight: bold;">
<span>上海</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 40%;">
<td>
<div style="padding-left: 30px; height: 100%;">
<div style="border-top: 2px dashed"></div>
<div style="height: 98%; min-height: 130px; text-align: center">
<table class="zhibiao">
<tr>
<td><span class="zhibiao-color" style="background-color: #00a040;"></span></td>
<td><span class="zhibiao-color" style="background-color: #dbbc49;"></span></td>
<td><span class="zhibiao-color" style="background-color: #fc703a;"></span></td>
<td><span class="zhibiao-color" style="background-color: #de4045;"></span></td>
<td><span class="zhibiao-color" style="background-color: #a13f6f;"></span></td>
<td><span class="zhibiao-color" style="background-color: #5c1a25;"></span></td>
</tr>
<tr>
<td><span class="zhibiao-title" style="width:50px">(0~35)</span></td>
<td><span class="zhibiao-title" style="width:50px">(35↑)</span></td>
<td><span class="zhibiao-title" style="width:50px">(75↑)</span></td>
<td><span class="zhibiao-title" style="width:50px">(115↑)</span></td>
<td><span class="zhibiao-title" style="width:50px">(150↑)</span></td>
<td><span class="zhibiao-title" style="width:50px">(350↑)</span></td>
</tr>
<tr class="title">
<td><span class="zhibiao-title"></span></td>
<td><span class="zhibiao-title"></span></td>
<td><span class="zhibiao-title">轻度污染</span></td>
<td><span class="zhibiao-title">中度污染</span></td>
<td><span class="zhibiao-title">重度污染</span></td>
<td><span class="zhibiao-title">严重污染</span></td>
</tr>
</table>
</div>
<div style="border-top: 2px dashed"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 10%">
<td>
<div class="footer" style="display:none">
<span class="title">健康提示:</span>
<small id="tishi"></small>
<span class="title">建议措施:</span>
<small id="cuoshi"></small>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<script src="content/skin/js/jquery.js"></script>
<script src="content/skin/js/highcharts.js"></script>
<script src="content/skin/js//skincommon.js?dt=201706261450"></script>
<script>
var currentData = new Date('2018/05/23 10:30:52');
var quxian = "PM25";
var charts = {"59053893":null,"59570501":null };
var last = {"59053893":null,"59570501":null };
var color = { "--": "#fff", "优": "#00a040", "良": "#dbbc49", "轻度污染": "#fc703a", "中度污染": "#de4045", "重度污染": "#a13f6f", "严重污染": "#5c1a25" };
var outline ={"59053893":0,"59570501":0 };
$(function () {
setInterval(function () {
currentData.setTime(currentData.getTime() + 1000);
}, 1000);
Highcharts.setOptions({ global: { useUTC: false } });
InitShowBoxSize();
UpdateTime();
GetWeather();
UpdateData();
setInterval(SlipeItems,5000);
setInterval(UpdateData, 4000);
setInterval(GetWeather, 60000);
});
function InitItemShowColor(deviceID,itemValueID,item,itemValue){
//dynamic-showbox
console.info("deviceID:"+deviceID+" itemValueID:"+itemValueID+" item:"+item+" itemValue:"+itemValue)
var showtxt="";
if(item=="PM10"){
if(itemValue>=0&&itemValue<=50){
showtxt= "一级";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=50.1&&itemValue<=150){
showtxt= "二级";
$("#"+deviceID+"-"+item+"txt").css("color","#FFFF00");
}else{
showtxt= "三级 ";
$("#"+deviceID+"-"+item+"txt").css("color","#FF0000");
}
}else if(item=="TEMP"){
if(itemValue>=0&&itemValue<=16){
showtxt= "偏冷";
$("#"+deviceID+"-"+item+"txt").css("color","#dbbc49");
}else if(itemValue>=16.1&&itemValue<=28){
showtxt= "舒适";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=28.1){
showtxt= "偏热";
$("#"+deviceID+"-"+item+"txt").css("color","#dbbc49");
}
}else if(item=="HUMI"){
if(itemValue>=0&&itemValue<=40){
showtxt= "干燥";
$("#"+deviceID+"-"+item+"txt").css("color","#dbbc49");
}else if(itemValue>=40.1&&itemValue<=60){
showtxt= "舒适";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=60.1){
showtxt= "潮湿";
$("#"+deviceID+"-"+item+"txt").css("color","#dbbc49");
}
}else if(item=="CO2"){
if(itemValue>=0&&itemValue<=350){
showtxt= "-- ";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=351&&itemValue<=1000){
showtxt= "优";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=1001&&itemValue<=2000){
showtxt= "中";
$("#"+deviceID+"-"+item+"txt").css("color","#dbbc49");
}else if(itemValue>=2001){
showtxt= "差";
}
}else if(item=="VOC"){
if(itemValue>=0&&itemValue<=830){
showtxt= "合格";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=11 ){
showtxt= "不合格";
$("#"+deviceID+"-"+item+"txt").css("color","#dbbc49");
}
} else if(item=="PM25"){
if(itemValue>=0&&itemValue<=35){
showtxt= "优";
$("#"+deviceID+"-"+item+"txt").css("color","#92D050");
}else if(itemValue>=35.1&&itemValue<=75){
showtxt= "良";
$("#"+deviceID+"-"+item+"txt").css("color","#FFFF00");
}else if(itemValue>=75.1&&itemValue<=115){
showtxt= "轻";
$("#"+deviceID+"-"+item+"txt").css("color","#FFC000");
}else if(itemValue>=115.1&&itemValue<=150){
showtxt= "中度";
$("#"+deviceID+"-"+item+"txt").css("color","#FF0000");
}else if(itemValue>=150.1&&itemValue<=250){
showtxt= "重度";
$("#"+deviceID+"-"+item+"txt").css("color","#7030A0");
}else if(itemValue>=250.1){
showtxt= "严重";
$("#"+deviceID+"-"+item+"txt").css("color","#595959");
}
}
$("#"+deviceID+"-"+item+"txt").text(showtxt)
}
function InitShowBoxSize() {
var myw = $("#showbox-0").width();
var myh = $("#showbox-0").height();
var qxw = $("#dynamic-showbox .quxian:first").width();
var qxh = $("#dynamic-showbox .quxian:first").height();
$("#dynamic-showbox .showbox").each(function () {
$(this).width(myw);
$(this).height(myh);
});
$("#dynamic-showbox .quxian").each(function () {
$(this).width(qxw);
$(this).height(qxh);
});
}
var currentPage = 0;
var countPage = $("#dynamic-showbox .showbox").length;
function SlipeItems() {
currentPage++;
if (currentPage >= countPage) {
currentPage = 0;
}
$("#dynamic-showbox .showbox").hide();
$("#showbox-"+currentPage).show();
}
var lastRestart = "";
function UpdateData() {
$.ajax({
type: "get",
url: './GetCompanyThemeData.json?qy=host&ck=10009&lp=',
success: function (data) {
if (data.Code != 200) {
return;
}
if (lastRestart == "") {
lastRestart = data.Data.restart;
} else {
if (lastRestart != data.Data.restart) {
location.reload();
}
}
for (var i = 0; i < data.Data.list.length; i++) {
var deno = data.Data.list[i].DeviceNo;
if ($("#" + deno + "-quxian").length > 0) {
var myl = data.Data.list[i].DateTime;
for (var o in data.Data.list[i].ItemsData) {
if(data.Data.list[i].ItemsData[o].ItemKey=="CH2O"){
data.Data.list[i].ItemsData[o].Value = (data.Data.list[i].ItemsData[o].Value /1000).toFixed(3);
}
var cl = color[data.Data.list[i].ItemsData[o].Grade] || color["--"];
if (data.Data.list[i].ItemsData[o].ItemKey == quxian) {
if (charts[deno] == null) {
charts[deno] = CreateChart(deno + "-quxian","("+data.Data.list[i].Name +") "+ data.Data.list[i].ItemsData[o].Title, data.Data.list[i].ItemsData[o].Unit);
}
if (data.Data.list[i].IsOnline) {
var n = (new Date(myl)).getTime();
if (last[deno] == null || last[deno] < n) {
last[deno] = n;
charts[deno].series[0].addPoint({ x: n, y: data.Data.list[i].ItemsData[o].Value, marker: { fillColor: cl } }, true, true);
outline[deno] = 0;
} else if (last[deno] == n) {
outline[deno]++;
if (outline[deno] > 50) {
charts[deno].series[0].addPoint([currentData.getTime(), 0], true, true);
outline[deno] = 0;
}
}
} else {
outline[deno]++;
if (outline[deno] > 50) {
charts[deno].series[0].addPoint([currentData.getTime(), 0], true, true);
outline[deno] = 0;
}
}
// continue;
}
var key = "#" + deno + "-" + data.Data.list[i].ItemsData[o].ItemKey;
$(key + "-title").html(data.Data.list[i].ItemsData[o].Title);
$(key + "-unit").html(data.Data.list[i].ItemsData[o].Unit);
if (data.Data.list[i].ItemsData[o].ItemKey == "WD") {
$(key + "-value").html(GetWdirect(data.Data.list[i].ItemsData[o].Value));
} else {
$(key + "-value").html(data.Data.list[i].ItemsData[o].Value);
}
$(key + "-value").css("color", cl);
InitItemShowColor(deno,key + "-value",data.Data.list[i].ItemsData[o].ItemKey,data.Data.list[i].ItemsData[o].Value)
}
}
}
},
error: function (data) {
}
});
}
function GetWeather() {
var city = encodeURIComponent('上海');
$.get("./GetAir.json?cityname=" + city, function (data) {
if (data.resultcode == "200") {
$("#pm25").html(data.result[0]["PM2.5"] + "ug/m3");
$("#aqi").html(data.result[0]["AQI"]);
advise(parseFloat(data.result[0]["AQI"]));
}
});
$.get("./GetWeather.json?cityname=" + city, function (data) {
if (data.resultcode == "200") {
$("#wendu").html(data.result.today.temperature);
$("#shidu").html(data.result.sk.humidity);
var modal = (currentData.getHours() > 19) || (currentData.getHours()<5) ? "night" : "/day";
$("#weatherpic").attr("src", "content/weather_icon/g2/120x120/" + modal + "/" + data.result.today.weather_id.fb + ".png");
$("#weatherpic").attr("title", data.result.today.weather);
}
});
}
function UpdateTime() {
var temp = WeekCN(currentData.getDay()) + " " + WeekEN(currentData.getDay()) + " " + currentData.Format("yyyy/MM/dd");
$("#DataTime").html(temp);
setTimeout(UpdateTime, 20000);
}
function CreateChart(container, titlename, titleUnit) {
var temp = new Highcharts.Chart({
chart: {
renderTo: container,
type: 'spline',
marginRight: 10,
borderWidth: 1,
backgroundColor: 'rgba(0,0,0,0)',
events: {
load: function () { }
}
},
title: {
text: titlename + ' 实时数据(' + titleUnit + ')',
align: 'right',
style: {
color: "#fff",
fontSize: '25px'
}
},
xAxis: {
title: {
text: '时 间',
style: {
color: '#fff',//颜色
fontSize: '16px', //字体
fontWeight: 'bold'
}
},
type: 'datetime',
gridLineDashStyle: 'Dot',
gridLineColor: '#fff',
gridLineWidth: 1,
tickPixelInterval: 120,
style: {
color: "#fff"
},
labels: {
style: {
color: '#fff',//颜色
fontSize: '14px' //字体
}
}
},
yAxis: {
title: {
text: ''
},
labels: {
style: {
color: '#fff',//颜色
fontSize: '14px' //字体
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br />' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br />' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
spline: {
dataLabels: {
enabled: true, // 开启数据标签
style: {
color: '#fff',//颜色
fontSize: '14px' //字体
}
}
}
},
series: [{
name: '实时数据',
color: "#fff",
data: (function () {
var data = [],
time = currentData.getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 20000,
y: 0
});
}
return data;
})()
}]
});
return temp;
}
</script>