• 日期: 2027-01-31
  • 标签: 常规
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>农业物联网监控系统：实时数据与智能控制</title>
  <link href="./tailwind.css" rel="stylesheet">
</head>
<body class="bg-gray-200">
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">农业物联网监控系统</h1>

    <div class="flex justify-center items-center">
      <img src="./farm.jpg" alt="农田图像" class="w-1/2 rounded-lg shadow-md">
    </div>

    <div class="mt-8">
      <h2 class="text-xl font-bold mb-4">传感器实时数据</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg p-4 shadow-md">
          <h3 class="text-lg font-bold mb-2">温度</h3>
          <p id="temperatureValue" class="text-gray-700">25°C</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-md">
          <h3 class="text-lg font-bold mb-2">湿度</h3>
          <p id="humidityValue" class="text-gray-700">60%</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-md">
          <h3 class="text-lg font-bold mb-2">土壤湿度</h3>
          <p id="soilMoistureValue" class="text-gray-700">40%</p>
        </div>
        <div class="bg-white rounded-lg p-4 shadow-md">
          <h3 class="text-lg font-bold mb-2">光照强度</h3>
          <p id="lightIntensityValue" class="text-gray-700">800 lx</p>
        </div>
      </div>
    </div>

    <div class="mt-8">
      <h2 class="text-xl font-bold mb-4">水泵控制</h2>
      <div class="flex justify-center">
        <button id="openPumpBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">打开水泵</button>
        <button id="closePumpBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded ml-4">关闭水泵</button>
      </div>
    </div>

    <div class="mt-8">
      <h2 class="text-xl font-bold mb-4">传感器阈值配置</h2>
      <div class="flex items-center">
        <label for="temperatureThreshold" class="mr-4">温度阈值：</label>
        <input type="number" id="temperatureThreshold" class="border border-gray-300 rounded px-2 py-1">
      </div>
      <!-- 添加其他传感器配置参数 -->
      <button id="saveConfigBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">保存配置</button>
    </div>

    <div class="my-8">
      <canvas id="sensorChart"></canvas>
    </div>
  </div>

  <script src="./chart.js"></script>
  <script>
    const openPumpBtn = document.getElementById('openPumpBtn');
    const closePumpBtn = document.getElementById('closePumpBtn');
    const saveConfigBtn = document.getElementById('saveConfigBtn');

    openPumpBtn.addEventListener('click', function() {
      alert('水泵已打开');
    });

    closePumpBtn.addEventListener('click', function() {
      alert('水泵已关闭');
    });

    saveConfigBtn.addEventListener('click', function() {
      alert('保存成功');
    });

    setInterval(function() {
      const temperatureValue = getRandomValue(20, 30);
      const humidityValue = getRandomValue(40, 70);
      const soilMoistureValue = getRandomValue(30, 60);
      const lightIntensityValue = getRandomValue(600, 1000);

      document.getElementById('temperatureValue').innerText = temperatureValue + '°C';
      document.getElementById('humidityValue').innerText = humidityValue + '%';
      document.getElementById('soilMoistureValue').innerText = soilMoistureValue + '%';
      document.getElementById('lightIntensityValue').innerText = lightIntensityValue + 'lx';

      const sensorChart = window.sensorChart;
      sensorChart.data.labels.push('');
      sensorChart.data.datasets[0].data.push(temperatureValue);
      sensorChart.data.datasets[1].data.push(humidityValue);
      sensorChart.data.datasets[2].data.push(soilMoistureValue);
      sensorChart.data.datasets[3].data.push(lightIntensityValue);
      sensorChart.update();
    }, 5000);

    function getRandomValue(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    const ctx = document.getElementById('sensorChart').getContext('2d');
    const sensorChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],
        datasets: [
          {
            label: '温度',
            data: [],
            borderColor: 'rgba(255, 99, 132, 1)',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            fill: false
          },
          {
            label: '湿度',
            data: [],
            borderColor: 'rgba(54, 162, 235, 1)',
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            fill: false
          },
          {
            label: '土壤湿度',
            data: [],
            borderColor: 'rgba(75, 192, 192, 1)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            fill: false
          },
          {
            label: '光照强度',
            data: [],
            borderColor: 'rgba(255, 206, 86, 1)',
            backgroundColor: 'rgba(255, 206, 86, 0.2)',
            fill: false
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });

    window.sensorChart = sensorChart;
  </script>
</body>
</html>
农业物联网监控系统：实时数据与智能控制

原文地址: http://www.cveoy.top/t/topic/Hvx 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录