作物生长监测系统完整代码示例 - 监控、分析、预警 - 常规

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>作物生长监测</title>
  <link href='https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css' rel='stylesheet'>
</head>
<body>
  <div class='container mx-auto'>
    <h1 class='text-2xl font-bold my-4'>作物生长监测</h1>
<pre><code>&lt;div class='my-4'&gt;
  &lt;label for='cropType' class='font-bold'&gt;作物类型：&lt;/label&gt;
  &lt;select id='cropType' class='border border-gray-300 rounded px-2 py-1'&gt;
    &lt;option value='corn'&gt;玉米&lt;/option&gt;
    &lt;option value='wheat'&gt;小麦&lt;/option&gt;
    &lt;option value='rice'&gt;稻米&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;

&lt;div class='my-4'&gt;
  &lt;label for='temperature' class='font-bold'&gt;温度：&lt;/label&gt;
  &lt;input type='number' id='temperature' class='border border-gray-300 rounded px-2 py-1'&gt;
&lt;/div&gt;

&lt;div class='my-4'&gt;
  &lt;button id='analyzeBtn' class='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'&gt;分析数据&lt;/button&gt;
&lt;/div&gt;

&lt;div id='prediction' class='my-4'&gt;
  &lt;h2 class='text-xl font-bold mb-2'&gt;生长预测&lt;/h2&gt;
  &lt;p id='growth_prediction' class='text-red-500'&gt;正在加载预测结果...&lt;/p&gt;
&lt;/div&gt;

&lt;div id='warning' class='my-4'&gt;
  &lt;h2 class='text-xl font-bold mb-2'&gt;病虫害预警&lt;/h2&gt;
  &lt;p id='pest_warning' class='text-red-500'&gt;正在加载预警信息...&lt;/p&gt;
&lt;/div&gt;

&lt;div class='my-4'&gt;
  &lt;h2 class='text-xl font-bold'&gt;生长历史记录&lt;/h2&gt;
  &lt;table class='w-full table-auto'&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class='px-4 py-2'&gt;日期&lt;/th&gt;
        &lt;th class='px-4 py-2'&gt;温度&lt;/th&gt;
        &lt;th class='px-4 py-2'&gt;湿度&lt;/th&gt;
        &lt;th class='px-4 py-2'&gt;土壤湿度&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;!-- 填充生长历史记录数据 --&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/div&gt;

&lt;div class='my-4'&gt;
  &lt;canvas id='growthChart'&gt;&lt;/canvas&gt;
&lt;/div&gt;

&lt;div class='my-4'&gt;
  &lt;div id='alarm' class='bg-red-500 text-white font-bold py-2 px-4 rounded hidden'&gt;
    发现作物生长异常！请采取措施保护作物！
  &lt;/div&gt;
&lt;/div&gt;

&lt;script src='https://cdn.jsdelivr.net/npm/chart.js'&gt;&lt;/script&gt;
&lt;script&gt;
  const analyzeBtn = document.getElementById('analyzeBtn');
  const cropTypeSelect = document.getElementById('cropType');
  const temperatureInput = document.getElementById('temperature');
  const growthChart = new Chart(document.getElementById('growthChart').getContext('2d'), {
    type: 'line',
    data: {
      // 填充作物生长数据
    },
    options: {
      // 配置图表样式和交互
    }
  });
  const alarmDiv = document.getElementById('alarm');

  analyzeBtn.addEventListener('click', function() {
    const selectedCropType = cropTypeSelect.value;
    const temperature = temperatureInput.value;

    // 根据选定的作物类型，更新页面上的生长参数和建议信息
    // 可以通过切换CSS类、修改文本内容、显示/隐藏元素等来实现

    // 检测作物生长异常并显示警报
    // 根据检测结果显示/隐藏警报信息
    const hasGrowthIssue = true; // 根据实际情况设置
    if (hasGrowthIssue) {
      alarmDiv.classList.remove('hidden');
    } else {
      alarmDiv.classList.add('hidden');
    }

    // 获取当前日期并添加到生长历史记录表格
    const date = new Date().toLocaleDateString();
    const historyTable = document.querySelector('table tbody');
    const newRow = `
      &lt;tr&gt;
        &lt;td class='px-4 py-2'&gt;${date}&lt;/td&gt;
        &lt;td class='px-4 py-2'&gt;${temperature}&lt;/td&gt;
        &lt;td class='px-4 py-2'&gt;25&lt;/td&gt; &lt;!-- 临时数据 --&gt;
        &lt;td class='px-4 py-2'&gt;50%&lt;/td&gt; &lt;!-- 临时数据 --&gt;
      &lt;/tr&gt;
    `;
    historyTable.innerHTML += newRow;
  });
&lt;/script&gt;
</code></pre>
  </div>
</body>
</html>