341 lines
9.5 KiB
HTML
341 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>智能农业大棚</title>
|
|
<style>
|
|
div,
|
|
input {
|
|
padding: 0;
|
|
margin: 0
|
|
}
|
|
|
|
input {
|
|
outline: none;
|
|
display: block
|
|
}
|
|
|
|
.container {
|
|
width: 650px;
|
|
height: 400px;
|
|
border-radius: 1em;
|
|
border: 1px solid #003333;
|
|
margin: 100px auto;
|
|
}
|
|
|
|
.title {
|
|
text-align: center
|
|
}
|
|
|
|
.data1 {
|
|
width: 60px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
background: pink;
|
|
border: 1px solid #ccc;
|
|
border-radius: .3em;
|
|
margin: 5px 10px;
|
|
float: left
|
|
}
|
|
|
|
.data2 {
|
|
width: 150px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
background: pink;
|
|
border: 1px solid #ccc;
|
|
border-radius: .3em;
|
|
margin: 5px 10px;
|
|
float: left
|
|
}
|
|
|
|
.active {
|
|
width: 50px;
|
|
height: 20px;
|
|
background: red;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
border-radius: .3em;
|
|
text-align: center;
|
|
margin: 5px 10px;
|
|
float: right
|
|
}
|
|
|
|
.active_1 {
|
|
width: 160px;
|
|
height: 20px;
|
|
background: red;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
border-radius: .3em;
|
|
text-align: center;
|
|
margin: 5px 10px;
|
|
float: center
|
|
}
|
|
|
|
.main {
|
|
height: 280px;
|
|
display: flex;
|
|
justify-content: space-around
|
|
}
|
|
|
|
.main div {
|
|
width: 180px;
|
|
height: 280px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 1.5em
|
|
}
|
|
|
|
.wrap input {
|
|
width: 45px;
|
|
height: 15px;
|
|
display: inline;
|
|
margin: 4px 8px;
|
|
text-align: center
|
|
}
|
|
|
|
h6 a {
|
|
font-size: 14px;
|
|
margin: 0 8px
|
|
}
|
|
|
|
.middle p a {
|
|
font-size: 14px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.middle p span {
|
|
font-size: 14px;
|
|
margin: 20px;
|
|
display: inline;
|
|
}
|
|
|
|
.main div.right {
|
|
width: 210px
|
|
}
|
|
|
|
.right p {
|
|
display: flex;
|
|
justify-content: space-around
|
|
}
|
|
|
|
.right p a {
|
|
font-size: 14px
|
|
}
|
|
|
|
.right p span {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
color: blue;
|
|
border: 1px solid #000;
|
|
border-radius: .5em;
|
|
text-align: center
|
|
}
|
|
|
|
body {
|
|
background-image: url(/image/background.png);
|
|
background-repeat: repeat-repeat;
|
|
background-size: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<script type="text/javascript" src="Arg_data.js"></script>
|
|
|
|
<body onload="init_getdata()">
|
|
<div class="schmenu">
|
|
<ul>
|
|
<li><a href="#top">返回首页</a></li>
|
|
<li><a onclick="on_button_show()">刷新</a></li>
|
|
<li><a onclick="historical_data()" target="_self">历史数据</a></li>
|
|
<!-- <li><a id="Refresh_auto" onclick="on_button_auto()">无刷新</a></li> -->
|
|
<li><a href="" target="_self">请打赏</a></li>
|
|
</ul>
|
|
</div>
|
|
<br><br><br>
|
|
<h1 style="text-align:center;">智能大棚控制系统111
|
|
</h1>
|
|
|
|
<style type="text/css">
|
|
.schmenu {
|
|
height: 33px;
|
|
line-height: 33px;
|
|
background: #2c56a3;
|
|
opacity: 0.8;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
top: 10px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.schmenu ul {
|
|
width: 1180px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.schmenu ul li {
|
|
float: left;
|
|
list-style: none;
|
|
}
|
|
|
|
.schmenu ul li a {
|
|
height: 33px;
|
|
line-height: 33px;
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
padding: 0 10px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.schmenu ul li a:hover {
|
|
color: #fff;
|
|
background: #000;
|
|
text-decoration: none;
|
|
-moz-transition: all 0.2s ease;
|
|
-webkit-transition: all 0.2s ease;
|
|
-o-transition: all 0.2s ease;
|
|
-moz-transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
}
|
|
</style>
|
|
|
|
<input type="button" class="active" value="注销" onclick="cancellation()" />
|
|
<div class="container">
|
|
<p class="title">
|
|
<input type="button" class="data1" value="历史数据" onclick="historical_data()" />
|
|
<!-- <input type="button" class="data2" id='date_id' value=" 时间 " /> -->
|
|
<!-- <span class="store">5号</span> -->
|
|
<label id='device_id'>1</label>号棚
|
|
<input type="button" class="active" value="无刷新" id="button_1" onclick="on_button_auto()" />
|
|
<input type="button" class="active" value="刷新" onclick="on_button_show()" />
|
|
<input type="button" class="active" value="配置文件" onclick="on_button_show_conf()" />
|
|
</p>
|
|
<div class="main">
|
|
<div class="left">
|
|
<h6>
|
|
<a>最小值</a>
|
|
<a>最大值</a>
|
|
</h6>
|
|
<p class="wrap">
|
|
<input value="24" id="value_c_min" />
|
|
<input value="24" id="value_c_max" />℃
|
|
</p>
|
|
<br>
|
|
<p class="wrap">
|
|
<input value="24" id="value_h_min" />
|
|
<input value="24" id="value_h_max" />%
|
|
</p>
|
|
<br>
|
|
|
|
<p class="wrap">
|
|
<input value="24" id="value_i_min" />
|
|
<input value="24" id="value_i_max" />LUX
|
|
</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div class="middle">
|
|
<h6>
|
|
<a>采集节点</a>
|
|
<a>当前值</a>
|
|
</h6>
|
|
<p>
|
|
<a>温度：</a>
|
|
<th><span id="value_c">10</span></th>
|
|
<label>℃</label>
|
|
<!-- <span>28.2℃</span> -->
|
|
</p>
|
|
<br>
|
|
<p>
|
|
<a>湿度：</a>
|
|
<th><span id="value_h">30</span></th>
|
|
<label>%</label>
|
|
<!-- <span>60%</span> -->
|
|
</p>
|
|
<br>
|
|
<p>
|
|
|
|
<a>光照：</a>
|
|
<th><span id="value_i">10</span></th>
|
|
<label>LUX</label>
|
|
|
|
|
|
</p>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<th align="center">
|
|
<input type="button" class="active_1" value="保存配置" onclick="on_button_seve()" />
|
|
</th>
|
|
</div>
|
|
<div class="right">
|
|
<h6>
|
|
<a>控制节点</a>
|
|
<a>状态</a>
|
|
<a> 手动状态</a>
|
|
|
|
</h6>
|
|
<p>
|
|
<a>风扇：</a>
|
|
<!-- <span>关闭</span> -->
|
|
<!-- <i></i> -->
|
|
<!-- <a>手动</a> -->
|
|
<th><input type="button" name="close_1" value="关闭" id="close_1" onclick="on_button_close1()"></th>
|
|
<th></th>
|
|
<!-- <th><label>手动</label></th> -->
|
|
<th>
|
|
<select id="select_query_t" onchange="on_select1()">
|
|
<option value="auto_t">自动</option>
|
|
<option value="cur_t">手动</option>
|
|
</select>
|
|
</th>
|
|
</p>
|
|
<br>
|
|
<p>
|
|
<a>加湿器：</a>
|
|
<th><input type="button" name="close_2" value="关闭" id="close_2" onclick="on_button_close2()"></th>
|
|
<th></th>
|
|
<!-- <th><label>手动</label></th> -->
|
|
<th>
|
|
<select id="select_query_h" onchange="on_select2()">
|
|
<option value="auto_h">自动</option>
|
|
<option value="cur_h">手动</option>
|
|
</select>
|
|
</th>
|
|
</p>
|
|
<br>
|
|
<p>
|
|
|
|
<a>卷 帘：</a>
|
|
<th><input type="button" name="close_3" value="关闭" id="close_3" onclick="on_button_close3()"></th>
|
|
<th></th>
|
|
<th>
|
|
<select id="select_query_i" onchange="on_select3()">
|
|
<option value="auto_i">自动</option>
|
|
<option value="cur_i">手动</option>
|
|
</select>
|
|
</th>
|
|
|
|
</p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |