写一段代码创建智慧农业系统的web界面
时间: 2023-12-23 16:03:30 浏览: 29
由于智慧农业系统的web界面的具体要求和功能比较复杂,因此以下代码仅供参考,可以根据具体需求进行修改和完善。
```html
<!DOCTYPE html>
<html>
<head>
<title>智慧农业系统</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>智慧农业系统</h1>
<hr>
<div class="row">
<div class="col-md-4">
<h3>农田监控</h3>
<div class="card">
<div class="card-body">
<p>土壤温度:25°C</p>
<p>土壤湿度:50%</p>
<p>光照强度:8000 lux</p>
</div>
</div>
</div>
<div class="col-md-4">
<h3>温室监控</h3>
<div class="card">
<div class="card-body">
<p>温度:30°C</p>
<p>湿度:60%</p>
<p>CO2浓度:800 ppm</p>
</div>
</div>
</div>
<div class="col-md-4">
<h3>农作物管理</h3>
<div class="card">
<div class="card-body">
<p>作物名称:番茄</p>
<p>生长阶段:生长期</p>
<p>预计收成日期:2022年10月10日</p>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h3>数据报表</h3>
<canvas id="myChart"></canvas>
</div>
<div class="col-md-6">
<h3>农作物图片</h3>
<img src="crop.jpg" class="img-fluid">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
datasets: [{
label: '土壤温度',
data: [20, 22, 25, 27, 28, 30, 32, 31, 28, 26, 23, 21],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '土壤湿度',
data: [40, 45, 50, 55, 60, 65, 70, 70, 65, 60, 50, 45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
```
以上代码使用了Bootstrap和Chart.js等库,实现了农田监控、温室监控、农作物管理、数据报表和农作物图片等功能。其中,数据报表使用了Chart.js库创建了一个折线图,展示了土壤温度和土壤湿度的变化趋势。