parent
3f902d19e3
commit
e55aeee5b8
13 changed files with 2664 additions and 1547 deletions
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@ -0,0 +1,211 @@ |
||||
<!DOCTYPE html> |
||||
<html style="height: 100%"> |
||||
<head> |
||||
<meta name="viewport" content="width=device-width,maximum-scale=2"> |
||||
<meta charset="utf-8"> |
||||
<title>Node0 History</title> |
||||
<script src="https://cdn.yimian.xyz/dateSelector/dateSelector.js"></script> |
||||
|
||||
</head> |
||||
<body style="height: 100%; margin: 0"> |
||||
|
||||
<h2>Node0 History</h2> |
||||
from: <input id="dateFrom" readonly="readonly"> to: <input id="dateTo" readonly="readonly"><br/><br/> |
||||
<button onclick="window.location.href='https://smartfarm.yimian.xyz/'">Back to Homepage</button> |
||||
<div class="load">Data Loading...</div> |
||||
<div class="loaded" id="temperature" style="height: 50%"></div> |
||||
<div class="loaded" id="humidity" style="height: 50%"></div> |
||||
<div class="loaded" id="waterswitch" style="height: 50%"></div> |
||||
<div class="loaded" id="batterylevel" style="height: 50%"></div> |
||||
<div class="loaded" id="qos" style="height: 50%"></div> |
||||
|
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/echarts.min.js"></script> |
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/ecStat.min.js"></script> |
||||
<script src="https://cdn.yimian.xyz/jquery/jquery.min.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
var chart = function(id){ |
||||
|
||||
var o = {}; |
||||
|
||||
o.dom = document.getElementById(id); |
||||
o.myChart = echarts.init(o.dom); |
||||
o.app = {}; |
||||
o.option = null; |
||||
o.base = +new Date(2014, 9, 3); |
||||
o.oneDay = 24 * 3600 * 1000; |
||||
o.date = []; |
||||
|
||||
o.data = [Math.random() * 150]; |
||||
o.now = new Date(o.base); |
||||
|
||||
o.addData = function(d, c, shift, f = 'push') { |
||||
o.now = [o.now.getFullYear(), o.now.getMonth() + 1, o.now.getDate()].join('/'); |
||||
o.date[f](d); |
||||
o.data[f](c); |
||||
|
||||
if (shift) { |
||||
o.date.shift(); |
||||
o.data.shift(); |
||||
} |
||||
|
||||
o.now = new Date(+new Date(o.now) + o.oneDay); |
||||
} |
||||
|
||||
o.clearData = function() { |
||||
o.date = []; |
||||
o.data = []; |
||||
} |
||||
|
||||
|
||||
|
||||
o.pushData = function(){ |
||||
o.data.pop(); |
||||
o.date.pop(); |
||||
|
||||
o.myChart.setOption({ |
||||
toolbox: { |
||||
left: 'center', |
||||
feature: { |
||||
dataZoom: { |
||||
yAxisIndex: 'none' |
||||
}, |
||||
restore: {}, |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
xAxis: { |
||||
data: o.date |
||||
}, |
||||
series: [{ |
||||
name:id, |
||||
data: o.data, |
||||
type: 'line', |
||||
}] |
||||
}); |
||||
} |
||||
|
||||
o.option = { |
||||
title: { |
||||
text: id |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: o.date |
||||
}, |
||||
yAxis: { |
||||
boundaryGap: [0, '50%'], |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name:id, |
||||
type:'line', |
||||
smooth:true, |
||||
symbol: 'none', |
||||
stack: 'a', |
||||
areaStyle: { |
||||
normal: {} |
||||
}, |
||||
data: o.data |
||||
} |
||||
] |
||||
}; |
||||
if (o.option && typeof o.option === "object") { |
||||
o.myChart.setOption(o.option, true); |
||||
} |
||||
|
||||
return o; |
||||
} |
||||
|
||||
|
||||
|
||||
var temp = chart("temperature"); |
||||
var hum = chart("humidity"); |
||||
var waterswitch = chart("waterswitch"); |
||||
var batterylevel = chart("batterylevel"); |
||||
var qos = chart("qos"); |
||||
|
||||
|
||||
var pullData = function(){ |
||||
|
||||
$('.load').css('display', 'block'); |
||||
$('.loaded').css('display', 'none'); |
||||
|
||||
|
||||
$.get('https://smartfarm.yimian.xyz/api/get?type=node&sid=0×tart='+(new Date(dateFrom.value)).valueOf()/1000+'&timeend='+(new Date(dateTo.value)).valueOf()/1000, function(res){ |
||||
|
||||
temp.clearData(); |
||||
hum.clearData(); |
||||
waterswitch.clearData(); |
||||
batterylevel.clearData(); |
||||
qos.clearData(); |
||||
|
||||
|
||||
$('.load').css('display', 'none'); |
||||
$('.loaded').css('display', 'block'); |
||||
|
||||
for(i in res.data){ |
||||
temp.addData(res.data[i].datetime, res.data[i].temperature, false, 'push'); |
||||
hum.addData(res.data[i].datetime, res.data[i].humidity, false, 'push'); |
||||
waterswitch.addData(res.data[i].datetime, res.data[i].waterswitch, false, 'push'); |
||||
batterylevel.addData(res.data[i].datetime, res.data[i].batterylevel, false, 'push'); |
||||
if(res.data[i].qos != -1) qos.addData(res.data[i].datetime, res.data[i].qos, false, 'push'); |
||||
} |
||||
|
||||
|
||||
temp.pushData(); |
||||
hum.pushData(); |
||||
waterswitch.pushData(); |
||||
batterylevel.pushData(); |
||||
qos.pushData(); |
||||
|
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<script type="text/javascript"> |
||||
var dateFrom = new datePicker(); |
||||
var dateTo = new datePicker(); |
||||
var date = new Date(); |
||||
|
||||
dateFrom.init({ |
||||
'trigger': '#dateFrom', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 1, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
dateTo.init({ |
||||
'trigger': '#dateTo', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 0, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
|
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
pullData(); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,211 @@ |
||||
<!DOCTYPE html> |
||||
<html style="height: 100%"> |
||||
<head> |
||||
<meta name="viewport" content="width=device-width,maximum-scale=2"> |
||||
<meta charset="utf-8"> |
||||
<title>Node1 History</title> |
||||
<script src="https://cdn.yimian.xyz/dateSelector/dateSelector.js"></script> |
||||
|
||||
</head> |
||||
<body style="height: 100%; margin: 0"> |
||||
|
||||
<h2>Node1 History</h2> |
||||
from: <input id="dateFrom" readonly="readonly"> to: <input id="dateTo" readonly="readonly"><br/><br/> |
||||
<button onclick="window.location.href='https://smartfarm.yimian.xyz/'">Back to Homepage</button> |
||||
<div class="load">Data Loading...</div> |
||||
<div class="loaded" id="temperature" style="height: 50%"></div> |
||||
<div class="loaded" id="humidity" style="height: 50%"></div> |
||||
<div class="loaded" id="waterswitch" style="height: 50%"></div> |
||||
<div class="loaded" id="batterylevel" style="height: 50%"></div> |
||||
<div class="loaded" id="qos" style="height: 50%"></div> |
||||
|
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/echarts.min.js"></script> |
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/ecStat.min.js"></script> |
||||
<script src="https://cdn.yimian.xyz/jquery/jquery.min.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
var chart = function(id){ |
||||
|
||||
var o = {}; |
||||
|
||||
o.dom = document.getElementById(id); |
||||
o.myChart = echarts.init(o.dom); |
||||
o.app = {}; |
||||
o.option = null; |
||||
o.base = +new Date(2014, 9, 3); |
||||
o.oneDay = 24 * 3600 * 1000; |
||||
o.date = []; |
||||
|
||||
o.data = [Math.random() * 150]; |
||||
o.now = new Date(o.base); |
||||
|
||||
o.addData = function(d, c, shift, f = 'push') { |
||||
o.now = [o.now.getFullYear(), o.now.getMonth() + 1, o.now.getDate()].join('/'); |
||||
o.date[f](d); |
||||
o.data[f](c); |
||||
|
||||
if (shift) { |
||||
o.date.shift(); |
||||
o.data.shift(); |
||||
} |
||||
|
||||
o.now = new Date(+new Date(o.now) + o.oneDay); |
||||
} |
||||
|
||||
o.clearData = function() { |
||||
o.date = []; |
||||
o.data = []; |
||||
} |
||||
|
||||
|
||||
|
||||
o.pushData = function(){ |
||||
o.data.pop(); |
||||
o.date.pop(); |
||||
|
||||
o.myChart.setOption({ |
||||
toolbox: { |
||||
left: 'center', |
||||
feature: { |
||||
dataZoom: { |
||||
yAxisIndex: 'none' |
||||
}, |
||||
restore: {}, |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
xAxis: { |
||||
data: o.date |
||||
}, |
||||
series: [{ |
||||
name:id, |
||||
data: o.data, |
||||
type: 'line', |
||||
}] |
||||
}); |
||||
} |
||||
|
||||
o.option = { |
||||
title: { |
||||
text: id |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: o.date |
||||
}, |
||||
yAxis: { |
||||
boundaryGap: [0, '50%'], |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name:id, |
||||
type:'line', |
||||
smooth:true, |
||||
symbol: 'none', |
||||
stack: 'a', |
||||
areaStyle: { |
||||
normal: {} |
||||
}, |
||||
data: o.data |
||||
} |
||||
] |
||||
}; |
||||
if (o.option && typeof o.option === "object") { |
||||
o.myChart.setOption(o.option, true); |
||||
} |
||||
|
||||
return o; |
||||
} |
||||
|
||||
|
||||
|
||||
var temp = chart("temperature"); |
||||
var hum = chart("humidity"); |
||||
var waterswitch = chart("waterswitch"); |
||||
var batterylevel = chart("batterylevel"); |
||||
var qos = chart("qos"); |
||||
|
||||
|
||||
var pullData = function(){ |
||||
|
||||
$('.load').css('display', 'block'); |
||||
$('.loaded').css('display', 'none'); |
||||
|
||||
|
||||
$.get('https://smartfarm.yimian.xyz/api/get?type=node&sid=1×tart='+(new Date(dateFrom.value)).valueOf()/1000+'&timeend='+(new Date(dateTo.value)).valueOf()/1000, function(res){ |
||||
|
||||
temp.clearData(); |
||||
hum.clearData(); |
||||
waterswitch.clearData(); |
||||
batterylevel.clearData(); |
||||
qos.clearData(); |
||||
|
||||
|
||||
$('.load').css('display', 'none'); |
||||
$('.loaded').css('display', 'block'); |
||||
|
||||
for(i in res.data){ |
||||
temp.addData(res.data[i].datetime, res.data[i].temperature, false, 'push'); |
||||
hum.addData(res.data[i].datetime, res.data[i].humidity, false, 'push'); |
||||
waterswitch.addData(res.data[i].datetime, res.data[i].waterswitch, false, 'push'); |
||||
batterylevel.addData(res.data[i].datetime, res.data[i].batterylevel, false, 'push'); |
||||
if(res.data[i].qos != -1) qos.addData(res.data[i].datetime, res.data[i].qos, false, 'push'); |
||||
} |
||||
|
||||
|
||||
temp.pushData(); |
||||
hum.pushData(); |
||||
waterswitch.pushData(); |
||||
batterylevel.pushData(); |
||||
qos.pushData(); |
||||
|
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<script type="text/javascript"> |
||||
var dateFrom = new datePicker(); |
||||
var dateTo = new datePicker(); |
||||
var date = new Date(); |
||||
|
||||
dateFrom.init({ |
||||
'trigger': '#dateFrom', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 1, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
dateTo.init({ |
||||
'trigger': '#dateTo', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 0, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
|
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
pullData(); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,234 @@ |
||||
<!DOCTYPE html> |
||||
<html style="height: 100%"> |
||||
<head> |
||||
<meta name="viewport" content="width=device-width,maximum-scale=2"> |
||||
<meta charset="utf-8"> |
||||
<title>Station History</title> |
||||
<script src="https://cdn.yimian.xyz/dateSelector/dateSelector.js"></script> |
||||
|
||||
</head> |
||||
<body style="height: 100%; margin: 0"> |
||||
|
||||
<h2>Station History</h2> |
||||
from: <input id="dateFrom" readonly="readonly"> to: <input id="dateTo" readonly="readonly"><br/><br/> |
||||
<button onclick="window.location.href='https://smartfarm.yimian.xyz/'">Back to Homepage</button> |
||||
<div class="load">Data Loading...</div> |
||||
<div class="loaded" id="temperature" style="height: 50%"></div> |
||||
<div class="loaded" id="humidity" style="height: 50%"></div> |
||||
<div class="loaded" id="light" style="height: 50%"></div> |
||||
<div class="loaded" id="batterylevel" style="height: 50%"></div> |
||||
<div class="loaded" id="nh3" style="height: 50%"></div> |
||||
<div class="loaded" id="co" style="height: 50%"></div> |
||||
<div class="loaded" id="airpressure" style="height: 50%"></div> |
||||
<div class="loaded" id="rainfall" style="height: 50%"></div> |
||||
<div class="loaded" id="qos" style="height: 50%"></div> |
||||
|
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/echarts.min.js"></script> |
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/ecStat.min.js"></script> |
||||
<script src="https://cdn.yimian.xyz/jquery/jquery.min.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
|
||||
var chart = function(id){ |
||||
|
||||
var o = {}; |
||||
|
||||
o.dom = document.getElementById(id); |
||||
o.myChart = echarts.init(o.dom); |
||||
o.app = {}; |
||||
o.option = null; |
||||
o.base = +new Date(2014, 9, 3); |
||||
o.oneDay = 24 * 3600 * 1000; |
||||
o.date = []; |
||||
|
||||
o.data = [Math.random() * 150]; |
||||
o.now = new Date(o.base); |
||||
|
||||
o.addData = function(d, c, shift, f = 'push') { |
||||
o.now = [o.now.getFullYear(), o.now.getMonth() + 1, o.now.getDate()].join('/'); |
||||
o.date[f](d); |
||||
o.data[f](c); |
||||
|
||||
if (shift) { |
||||
o.date.shift(); |
||||
o.data.shift(); |
||||
} |
||||
|
||||
o.now = new Date(+new Date(o.now) + o.oneDay); |
||||
} |
||||
|
||||
o.clearData = function() { |
||||
o.date = []; |
||||
o.data = []; |
||||
} |
||||
|
||||
|
||||
|
||||
o.pushData = function(){ |
||||
o.data.pop(); |
||||
o.date.pop(); |
||||
|
||||
o.myChart.setOption({ |
||||
toolbox: { |
||||
left: 'center', |
||||
feature: { |
||||
dataZoom: { |
||||
yAxisIndex: 'none' |
||||
}, |
||||
restore: {}, |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
xAxis: { |
||||
data: o.date |
||||
}, |
||||
series: [{ |
||||
name:id, |
||||
data: o.data, |
||||
type: 'line', |
||||
}] |
||||
}); |
||||
} |
||||
|
||||
o.option = { |
||||
title: { |
||||
text: id |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: o.date |
||||
}, |
||||
yAxis: { |
||||
boundaryGap: [0, '50%'], |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name:id, |
||||
type:'line', |
||||
smooth:true, |
||||
symbol: 'none', |
||||
stack: 'a', |
||||
areaStyle: { |
||||
normal: {} |
||||
}, |
||||
data: o.data |
||||
} |
||||
] |
||||
}; |
||||
if (o.option && typeof o.option === "object") { |
||||
o.myChart.setOption(o.option, true); |
||||
} |
||||
|
||||
|
||||
|
||||
return o; |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
var temp = chart("temperature"); |
||||
var hum = chart("humidity"); |
||||
var light = chart("light"); |
||||
var batterylevel = chart("batterylevel"); |
||||
var co = chart("co"); |
||||
var nh3 = chart("nh3"); |
||||
var qos = chart("qos"); |
||||
var rainfall = chart("rainfall"); |
||||
var air = chart("airpressure"); |
||||
|
||||
|
||||
var pullData = function(){ |
||||
|
||||
$('.load').css('display', 'block'); |
||||
$('.loaded').css('display', 'none'); |
||||
|
||||
|
||||
$.get('https://smartfarm.yimian.xyz/api/get?type=station×tart='+(new Date(dateFrom.value)).valueOf()/1000+'&timeend='+(new Date(dateTo.value)).valueOf()/1000, function(res){ |
||||
|
||||
temp.clearData(); |
||||
hum.clearData(); |
||||
light.clearData(); |
||||
batterylevel.clearData(); |
||||
co.clearData(); |
||||
nh3.clearData(); |
||||
qos.clearData(); |
||||
rainfall.clearData(); |
||||
air.clearData(); |
||||
|
||||
$('.load').css('display', 'none'); |
||||
$('.loaded').css('display', 'block'); |
||||
|
||||
for(i in res.data){ |
||||
temp.addData(res.data[i].datetime, res.data[i].temperature, false, 'push'); |
||||
hum.addData(res.data[i].datetime, res.data[i].humidity, false, 'push'); |
||||
light.addData(res.data[i].datetime, res.data[i].light, false, 'push'); |
||||
batterylevel.addData(res.data[i].datetime, res.data[i].batterylevel, false, 'push'); |
||||
co.addData(res.data[i].datetime, res.data[i].co, false, 'push'); |
||||
nh3.addData(res.data[i].datetime, res.data[i].nh3, false, 'push'); |
||||
if(res.data[i].qos != -1) qos.addData(res.data[i].datetime, res.data[i].qos, false, 'push'); |
||||
rainfall.addData(res.data[i].datetime, res.data[i].rainfall, false, 'push'); |
||||
air.addData(res.data[i].datetime, res.data[i].airpressure, false, 'push'); |
||||
} |
||||
|
||||
|
||||
temp.pushData(); |
||||
hum.pushData(); |
||||
light.pushData(); |
||||
batterylevel.pushData(); |
||||
co.pushData(); |
||||
nh3.pushData(); |
||||
qos.pushData(); |
||||
rainfall.pushData(); |
||||
air.pushData(); |
||||
|
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<script type="text/javascript"> |
||||
var dateFrom = new datePicker(); |
||||
var dateTo = new datePicker(); |
||||
var date = new Date(); |
||||
|
||||
dateFrom.init({ |
||||
'trigger': '#dateFrom', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 1, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
dateTo.init({ |
||||
'trigger': '#dateTo', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 0, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
|
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
pullData(); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,199 @@ |
||||
<!DOCTYPE html> |
||||
<html style="height: 100%"> |
||||
<head> |
||||
<meta name="viewport" content="width=device-width,maximum-scale=2"> |
||||
<meta charset="utf-8"> |
||||
<title>WaterSys History</title> |
||||
<script src="https://cdn.yimian.xyz/dateSelector/dateSelector.js"></script> |
||||
|
||||
</head> |
||||
<body style="height: 100%; margin: 0"> |
||||
|
||||
<h2>WaterSys History</h2> |
||||
from: <input id="dateFrom" readonly="readonly"> to: <input id="dateTo" readonly="readonly"><br/><br/> |
||||
<button onclick="window.location.href='https://smartfarm.yimian.xyz/'">Back to Homepage</button> |
||||
<div class="load">Data Loading...</div> |
||||
<div class="loaded" id="pump0" style="height: 50%"></div> |
||||
<div class="loaded" id="qos" style="height: 50%"></div> |
||||
|
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/echarts.min.js"></script> |
||||
<script type="text/javascript" src="https://cdn.yimian.xyz/echart/ecStat.min.js"></script> |
||||
<script src="https://cdn.yimian.xyz/jquery/jquery.min.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
var chart = function(id){ |
||||
|
||||
var o = {}; |
||||
|
||||
o.dom = document.getElementById(id); |
||||
o.myChart = echarts.init(o.dom); |
||||
o.app = {}; |
||||
o.option = null; |
||||
o.base = +new Date(2014, 9, 3); |
||||
o.oneDay = 24 * 3600 * 1000; |
||||
o.date = []; |
||||
|
||||
o.data = [Math.random() * 150]; |
||||
o.now = new Date(o.base); |
||||
|
||||
o.addData = function(d, c, shift, f = 'push') { |
||||
o.now = [o.now.getFullYear(), o.now.getMonth() + 1, o.now.getDate()].join('/'); |
||||
o.date[f](d); |
||||
o.data[f](c); |
||||
|
||||
if (shift) { |
||||
o.date.shift(); |
||||
o.data.shift(); |
||||
} |
||||
|
||||
o.now = new Date(+new Date(o.now) + o.oneDay); |
||||
} |
||||
|
||||
o.clearData = function() { |
||||
o.date = []; |
||||
o.data = []; |
||||
} |
||||
|
||||
|
||||
|
||||
o.pushData = function(){ |
||||
o.data.pop(); |
||||
o.date.pop(); |
||||
|
||||
o.myChart.setOption({ |
||||
toolbox: { |
||||
left: 'center', |
||||
feature: { |
||||
dataZoom: { |
||||
yAxisIndex: 'none' |
||||
}, |
||||
restore: {}, |
||||
saveAsImage: {} |
||||
} |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
xAxis: { |
||||
data: o.date |
||||
}, |
||||
series: [{ |
||||
name:id, |
||||
data: o.data, |
||||
type: 'line', |
||||
}] |
||||
}); |
||||
} |
||||
|
||||
o.option = { |
||||
title: { |
||||
text: id |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: o.date |
||||
}, |
||||
yAxis: { |
||||
boundaryGap: [0, '50%'], |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
name:id, |
||||
type:'line', |
||||
smooth:true, |
||||
symbol: 'none', |
||||
stack: 'a', |
||||
areaStyle: { |
||||
normal: {} |
||||
}, |
||||
data: o.data |
||||
} |
||||
] |
||||
}; |
||||
|
||||
|
||||
|
||||
if (o.option && typeof o.option === "object") { |
||||
o.myChart.setOption(o.option, true); |
||||
} |
||||
|
||||
return o; |
||||
} |
||||
|
||||
|
||||
|
||||
var pump0 = chart("pump0"); |
||||
var qos = chart("qos"); |
||||
|
||||
|
||||
var pullData = function(){ |
||||
|
||||
$('.load').css('display', 'block'); |
||||
$('.loaded').css('display', 'none'); |
||||
|
||||
|
||||
$.get('https://smartfarm.yimian.xyz/api/get?type=waterSys×tart='+(new Date(dateFrom.value)).valueOf()/1000+'&timeend='+(new Date(dateTo.value)).valueOf()/1000, function(res){ |
||||
|
||||
pump0.clearData(); |
||||
qos.clearData(); |
||||
|
||||
|
||||
$('.load').css('display', 'none'); |
||||
$('.loaded').css('display', 'block'); |
||||
|
||||
for(i in res.data){ |
||||
pump0.addData(res.data[i].datetime, res.data[i].pump0, false, 'push'); |
||||
if(res.data[i].qos != -1) qos.addData(res.data[i].datetime, res.data[i].qos, false, 'push'); |
||||
} |
||||
|
||||
|
||||
pump0.pushData(); |
||||
qos.pushData(); |
||||
|
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<script type="text/javascript"> |
||||
var dateFrom = new datePicker(); |
||||
var dateTo = new datePicker(); |
||||
var date = new Date(); |
||||
|
||||
dateFrom.init({ |
||||
'trigger': '#dateFrom', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 1, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
dateTo.init({ |
||||
'trigger': '#dateTo', /*按钮选择器，用于触发弹出插件*/ |
||||
'type': 'datetime',/*模式：date日期；datetime日期时间；time时间；ym年月；*/ |
||||
'minDate':'2019-6-15',/*最小日期*/ |
||||
'maxDate':date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),/*最大日期*/ |
||||
'cutDays': 0, |
||||
'onSubmit':function(){/*确认时触发事件*/ |
||||
|
||||
pullData(); |
||||
}, |
||||
'onClose':function(){/*取消时触发事件*/ |
||||
} |
||||
}); |
||||
pullData(); |
||||
</script> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue