From 2aa93f941eb1d13248d428c5489ef70969de44c7 Mon Sep 17 00:00:00 2001
From: peng <cavin@maimaiplanet.com>
Date: Thu, 30 Oct 2025 10:53:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=AE=A1=E7=90=86=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=89=8D=E7=AB=AF=20-=20=E6=B0=94=E8=B1=A1=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E4=B8=8E=E7=8E=AF=E5=A2=83=E7=9B=91=E6=B5=8B=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SoilQualityAnalysis.tsx        | 862 ++++++++++++++++++
 .../components/soilQualityService.ts          | 558 ++++++++++++
 .../soil-quality/components/soilTypes.ts      | 256 ++++++
 .../analysis/soil-quality/page.tsx            |  15 +-
 .../environment/components/DataTrends.tsx     | 207 +++++
 .../environment/components/DeviceDialog.tsx   | 298 ++++++
 .../components/DeviceManagement.tsx           | 109 +++
 .../environment/components/DeviceOverview.tsx |  60 ++
 .../components/RealTimeMonitoring.tsx         | 167 ++++
 .../environmentMonitoringReducer.tsx          | 247 +++++
 .../monitoring/environment/page.tsx           | 225 ++++-
 .../weather/components/ControlPanel.tsx       |  78 ++
 .../components/RealtimeWeatherCards.tsx       | 155 ++++
 .../weather/components/UsageGuide.tsx         |  27 +
 .../weather/components/WeatherAlerts.tsx      |  86 ++
 .../weather/components/WeatherAnalysis.tsx    | 227 +++++
 .../weather/components/WeatherCharts.tsx      | 227 +++++
 .../weather/components/WeatherContent.tsx     | 125 +++
 .../weather/components/WeatherForecast.tsx    | 160 ++++
 .../weather/components/WeatherHistory.tsx     | 243 +++++
 .../weather/components/weatherDataReducer.tsx | 479 ++++++++++
 .../monitoring/weather/page.tsx               |  25 +-
 22 files changed, 4808 insertions(+), 28 deletions(-)
 create mode 100644 crop-x/src/app/(app)/land-information/analysis/soil-quality/components/SoilQualityAnalysis.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilQualityService.ts
 create mode 100644 crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilTypes.ts
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/environment/components/DataTrends.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceDialog.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceManagement.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceOverview.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/environment/components/RealTimeMonitoring.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/environment/components/environmentMonitoringReducer.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/ControlPanel.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/RealtimeWeatherCards.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/UsageGuide.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAlerts.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAnalysis.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherCharts.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherContent.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherForecast.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherHistory.tsx
 create mode 100644 crop-x/src/app/(app)/land-information/monitoring/weather/components/weatherDataReducer.tsx

diff --git a/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/SoilQualityAnalysis.tsx b/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/SoilQualityAnalysis.tsx
new file mode 100644
index 0000000..1312b19
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/SoilQualityAnalysis.tsx
@@ -0,0 +1,862 @@
+/**
+ * 土壤质量评价组件
+ * 提供土壤质量分析、评价和改良建议功能
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  BarChart3,
+  TrendingUp,
+  TrendingDown,
+  Activity,
+  AlertCircle,
+  CheckCircle,
+  Info,
+  Droplets,
+  Leaf,
+  Zap,
+  Beaker,
+  Calculator,
+  FileText,
+  Calendar,
+  MapPin,
+  User,
+  Download,
+  RefreshCw,
+  Eye,
+  Settings,
+  Target,
+  Award,
+  AlertTriangle,
+  ThumbsUp
+} from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  SoilQualityService,
+  SoilQualityEvaluation,
+  SoilIndicator,
+  SoilRecommendation,
+  SoilQualityHistory,
+  SoilAnalysisForm,
+  formatSoilScore,
+  getSoilGradeColor,
+  getIndicatorStatusColor,
+  formatDate
+} from './soilQualityService';
+import {
+  SOIL_TYPES,
+  SOIL_TEXTURES,
+  DRAINAGE_LEVELS
+} from './soilTypes';
+
+export function SoilQualityAnalysis() {
+  const [activeTab, setActiveTab] = useState<'analysis' | 'evaluation' | 'history' | 'recommendations'>('analysis');
+  const [selectedField, setSelectedField] = useState('field-1');
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentEvaluation, setCurrentEvaluation] = useState<SoilQualityEvaluation | null>(null);
+  const [historicalData, setHistoricalData] = useState<SoilQualityHistory[]>([]);
+  const [showForm, setShowForm] = useState(false);
+
+  // 表单数据
+  const [formData, setFormData] = useState<SoilAnalysisForm>({
+    fieldId: 'field-1',
+    sampleDate: new Date().toISOString().split('T')[0],
+    sampleDepth: 20,
+    ph: 6.5,
+    organicMatter: 2.5,
+    nitrogen: 1.2,
+    phosphorus: 18,
+    potassium: 120,
+    calcium: 1200,
+    magnesium: 250,
+    sulfur: 15,
+    iron: 10,
+    manganese: 5,
+    zinc: 2,
+    copper: 1,
+    boron: 0.8,
+    soilTexture: 'medium',
+    drainage: 'good',
+    notes: ''
+  });
+
+  // 模拟地块数据
+  const mockFields = [
+    { id: 'field-1', name: '东区1号地', code: 'DB001', area: 85.5 },
+    { id: 'field-2', name: '西区2号地', code: 'DB002', area: 92.3 },
+    { id: 'field-3', name: '南区3号地', code: 'DB003', area: 78.7 },
+  ];
+
+  // 初始化数据
+  useEffect(() => {
+    loadHistoricalData();
+  }, [selectedField]);
+
+  const loadHistoricalData = () => {
+    const history = SoilQualityService.getHistoricalData(selectedField);
+    setHistoricalData(history);
+
+    // 如果有历史记录，显示最新的评价
+    if (history.length > 0) {
+      setCurrentEvaluation(history[0].evaluation);
+    }
+  };
+
+  const handleFormSubmit = async () => {
+    setIsLoading(true);
+    try {
+      // 生成土壤质量评价
+      const evaluation = SoilQualityService.generateEvaluation(formData);
+      setCurrentEvaluation(evaluation);
+
+      // 更新历史数据
+      const newHistory: SoilQualityHistory = {
+        date: evaluation.date,
+        overallScore: evaluation.overallScore,
+        indicatorChanges: [],
+        evaluation
+      };
+
+      setHistoricalData([newHistory, ...historicalData]);
+      setShowForm(false);
+      setActiveTab('evaluation');
+
+      toast.success('土壤质量评价完成！');
+    } catch (error) {
+      toast.error('评价失败，请检查数据');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleInputChange = (field: keyof SoilAnalysisForm, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const exportReport = () => {
+    if (!currentEvaluation) {
+      toast.error('没有可导出的评价报告');
+      return;
+    }
+
+    // 模拟导出功能
+    toast.success('正在生成土壤质量评价报告...');
+    setTimeout(() => {
+      toast.success('报告已生成并下载');
+    }, 2000);
+  };
+
+  const getPriorityColor = (priority: string): string => {
+    switch (priority) {
+      case 'high': return 'text-red-600 dark:text-red-400';
+      case 'medium': return 'text-yellow-600 dark:text-yellow-400';
+      case 'low': return 'text-green-600 dark:text-green-400';
+      default: return 'text-gray-600 dark:text-gray-400';
+    }
+  };
+
+  const getPriorityBadgeVariant = (priority: string): string => {
+    switch (priority) {
+      case 'high': return 'destructive';
+      case 'medium': return 'default';
+      case 'low': return 'secondary';
+      default: return 'outline';
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 页面头部 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-green-800 dark:text-green-200">土壤质量评价</h2>
+          <p className="text-muted-foreground">
+            专业的土壤质量分析与改良建议系统
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={() => setShowForm(!showForm)}>
+            <Calculator className="w-4 h-4 mr-2" />
+            {showForm ? '隐藏表单' : '新建评价'}
+          </Button>
+          <Button variant="outline" onClick={loadHistoricalData}>
+            <RefreshCw className="w-4 h-4 mr-2" />
+            刷新数据
+          </Button>
+          <Button variant="outline" onClick={exportReport} disabled={!currentEvaluation}>
+            <Download className="w-4 h-4 mr-2" />
+            导出报告
+          </Button>
+        </div>
+      </div>
+
+      {/* 地块信息卡片 */}
+      <div className="grid grid-cols-4 gap-4">
+        <Card className="p-4 bg-gradient-to-br from-green-50 to-blue-50 dark:from-green-950 dark:to-blue-950">
+          <div className="flex items-center gap-3">
+            <MapPin className="w-8 h-8 text-green-600 dark:text-green-400" />
+            <div>
+              <div className="text-sm text-muted-foreground">当前地块</div>
+              <div className="font-medium">{mockFields.find(f => f.id === selectedField)?.name}</div>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4 bg-card">
+          <div className="flex items-center gap-3">
+            <Award className="w-8 h-8 text-blue-600 dark:text-blue-400" />
+            <div>
+              <div className="text-sm text-muted-foreground">总体评分</div>
+              <div
+                className="font-bold text-lg"
+                style={{ color: currentEvaluation ? getSoilGradeColor(currentEvaluation.overallGrade) : '#6b7280' }}
+              >
+                {currentEvaluation ? formatSoilScore(currentEvaluation.overallScore) : '--'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4 bg-card">
+          <div className="flex items-center gap-3">
+            <Activity className="w-8 h-8 text-purple-600 dark:text-purple-400" />
+            <div>
+              <div className="text-sm text-muted-foreground">质量等级</div>
+              <div
+                className="font-bold text-lg"
+                style={{ color: currentEvaluation ? getSoilGradeColor(currentEvaluation.overallGrade) : '#6b7280' }}
+              >
+                {currentEvaluation ? currentEvaluation.overallGrade : '--'}
+              </div>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4 bg-card">
+          <div className="flex items-center gap-3">
+            <FileText className="w-8 h-8 text-orange-600 dark:text-orange-400" />
+            <div>
+              <div className="text-sm text-muted-foreground">历史记录</div>
+              <div className="font-medium">{historicalData.length} 条</div>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* 土壤分析表单 */}
+      {showForm && (
+        <Card className="p-6 bg-card">
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="text-lg font-semibold">土壤质量分析表单</h3>
+            <Button variant="outline" size="sm" onClick={() => setShowForm(false)}>
+              <Eye className="w-4 h-4 mr-2" />
+              查看评价结果
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-6">
+            {/* 基本信息 */}
+            <div className="space-y-4">
+              <h4 className="font-medium">基本信息</h4>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="fieldId">地块选择</Label>
+                  <Select value={formData.fieldId} onValueChange={(value) => handleInputChange('fieldId', value)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {mockFields.map(field => (
+                        <SelectItem key={field.id} value={field.id}>
+                          {field.name} ({field.code})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label htmlFor="sampleDate">取样日期</Label>
+                  <Input
+                    id="sampleDate"
+                    type="date"
+                    value={formData.sampleDate}
+                    onChange={(e) => handleInputChange('sampleDate', e.target.value)}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="sampleDepth">取样深度 (cm)</Label>
+                  <Input
+                    id="sampleDepth"
+                    type="number"
+                    value={formData.sampleDepth}
+                    onChange={(e) => handleInputChange('sampleDepth', Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="soilTexture">土壤质地</Label>
+                  <Select value={formData.soilTexture} onValueChange={(value) => handleInputChange('soilTexture', value)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {SOIL_TEXTURES.map(texture => (
+                        <SelectItem key={texture.id} value={texture.id}>
+                          {texture.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label htmlFor="drainage">排水条件</Label>
+                  <Select value={formData.drainage} onValueChange={(value) => handleInputChange('drainage', value)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {DRAINAGE_LEVELS.map(level => (
+                        <SelectItem key={level.id} value={level.id}>
+                          {level.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
+            {/* 化学指标 */}
+            <div className="space-y-4">
+              <h4 className="font-medium">化学指标</h4>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="ph">pH值</Label>
+                  <Input
+                    id="ph"
+                    type="number"
+                    step="0.1"
+                    value={formData.ph}
+                    onChange={(e) => handleInputChange('ph', Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="organicMatter">有机质 (%)</Label>
+                  <Input
+                    id="organicMatter"
+                    type="number"
+                    step="0.1"
+                    value={formData.organicMatter}
+                    onChange={(e) => handleInputChange('organicMatter', Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="nitrogen">全氮 (g/kg)</Label>
+                  <Input
+                    id="nitrogen"
+                    type="number"
+                    step="0.1"
+                    value={formData.nitrogen}
+                    onChange={(e) => handleInputChange('nitrogen', Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="phosphorus">有效磷 (mg/kg)</Label>
+                  <Input
+                    id="phosphorus"
+                    type="number"
+                    step="1"
+                    value={formData.phosphorus}
+                    onChange={(e) => handleInputChange('phosphorus', Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="potassium">速效钾 (mg/kg)</Label>
+                  <Input
+                    id="potassium"
+                    type="number"
+                    step="1"
+                    value={formData.potassium}
+                    onChange={(e) => handleInputChange('potassium', Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="notes">备注</Label>
+                  <Textarea
+                    id="notes"
+                    value={formData.notes}
+                    onChange={(e) => handleInputChange('notes', e.target.value)}
+                    placeholder="请输入其他相关信息..."
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end mt-6">
+            <Button onClick={handleFormSubmit} disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                  分析中...
+                </>
+              ) : (
+                <>
+                  <Calculator className="w-4 h-4 mr-2" />
+                  生成评价
+                </>
+              )}
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {/* 主要内容区域 */}
+      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as any)}>
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="analysis">指标分析</TabsTrigger>
+          <TabsTrigger value="evaluation">评价结果</TabsTrigger>
+          <TabsTrigger value="recommendations">改良建议</TabsTrigger>
+          <TabsTrigger value="history">历史记录</TabsTrigger>
+        </TabsList>
+
+        {/* 指标分析 */}
+        <TabsContent value="analysis" className="space-y-4">
+          {currentEvaluation ? (
+            <div className="grid grid-cols-2 gap-6">
+              {/* 主要指标 */}
+              <Card className="p-6 bg-card">
+                <h3 className="mb-4">主要指标得分</h3>
+                <div className="space-y-4">
+                  {currentEvaluation.indicators
+                    .filter(ind => ['ph', 'organicMatter', 'nitrogen', 'phosphorus', 'potassium'].includes(ind.id))
+                    .map(indicator => (
+                    <div key={indicator.id} className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: getIndicatorStatusColor(indicator.status) }}
+                        />
+                        <div>
+                          <div className="font-medium">{indicator.name}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {indicator.value} {indicator.unit}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className="font-bold">{indicator.score}分</div>
+                        <Badge
+                          variant="outline"
+                          className="font-light"
+                          style={{
+                            backgroundColor: `${getIndicatorStatusColor(indicator.status)}20`,
+                            borderColor: getIndicatorStatusColor(indicator.status),
+                            color: getIndicatorStatusColor(indicator.status)
+                          }}
+                        >
+                          {indicator.status === 'excellent' && '优秀'}
+                          {indicator.status === 'good' && '良好'}
+                          {indicator.status === 'moderate' && '中等'}
+                          {indicator.status === 'poor' && '较差'}
+                          {indicator.status === 'very_poor' && '很差'}
+                        </Badge>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+
+              {/* 微量元素 */}
+              <Card className="p-6 bg-card">
+                <h3 className="mb-4">微量元素得分</h3>
+                <div className="space-y-4">
+                  {currentEvaluation.indicators
+                    .filter(ind => ['iron', 'manganese', 'zinc', 'copper', 'boron'].includes(ind.id))
+                    .map(indicator => (
+                    <div key={indicator.id} className="flex items-center justify-between">
+                      <div className="flex items-center gap-3">
+                        <div
+                          className="w-3 h-3 rounded-full"
+                          style={{ backgroundColor: getIndicatorStatusColor(indicator.status) }}
+                        />
+                        <div>
+                          <div className="font-medium">{indicator.name}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {indicator.value} {indicator.unit}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className="font-bold">{indicator.score}分</div>
+                        <Badge
+                          variant="outline"
+                          className="font-light"
+                          style={{
+                            backgroundColor: `${getIndicatorStatusColor(indicator.status)}20`,
+                            borderColor: getIndicatorStatusColor(indicator.status),
+                            color: getIndicatorStatusColor(indicator.status)
+                          }}
+                        >
+                          {indicator.status === 'excellent' && '优秀'}
+                          {indicator.status === 'good' && '良好'}
+                          {indicator.status === 'moderate' && '中等'}
+                          {indicator.status === 'poor' && '较差'}
+                          {indicator.status === 'very_poor' && '很差'}
+                        </Badge>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          ) : (
+            <Card className="p-8 text-center bg-card">
+              <Beaker className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">暂无评价数据</h3>
+              <p className="text-muted-foreground mb-4">
+                请先填写土壤分析表单生成评价报告
+              </p>
+              <Button onClick={() => setShowForm(true)}>
+                <Calculator className="w-4 h-4 mr-2" />
+                开始评价
+              </Button>
+            </Card>
+          )}
+        </TabsContent>
+
+        {/* 评价结果 */}
+        <TabsContent value="evaluation" className="space-y-4">
+          {currentEvaluation ? (
+            <div className="space-y-4">
+              {/* 总体评价 */}
+              <Card className="p-6 bg-card">
+                <div className="flex items-center justify-between mb-4">
+                  <h3 className="text-lg font-semibold">总体评价</h3>
+                  <div className="flex items-center gap-3">
+                    <div className="text-center">
+                      <div
+                        className="text-4xl font-bold"
+                        style={{ color: getSoilGradeColor(currentEvaluation.overallGrade) }}
+                      >
+                        {currentEvaluation.overallScore}
+                      </div>
+                      <div className="text-sm text-muted-foreground">综合得分</div>
+                    </div>
+                    <div className="text-center">
+                      <div
+                        className="text-3xl font-bold"
+                        style={{ color: getSoilGradeColor(currentEvaluation.overallGrade) }}
+                      >
+                        {currentEvaluation.overallGrade}级
+                      </div>
+                      <div className="text-sm text-muted-foreground">质量等级</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-4">
+                  <Card className="p-4 bg-green-50 dark:bg-green-950">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Leaf className="w-5 h-5 text-green-600 dark:text-green-400" />
+                      <span className="font-medium">土壤类型</span>
+                    </div>
+                    <div className="text-lg text-green-600 dark:text-green-400">
+                      {currentEvaluation.soilType}
+                    </div>
+                  </Card>
+                  <Card className="p-4 bg-blue-50 dark:bg-blue-950">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Droplets className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                      <span className="font-medium">排水条件</span>
+                    </div>
+                    <div className="text-lg text-blue-600 dark:text-blue-400">
+                      {currentEvaluation.drainage === 'excellent' && '优秀'}
+                      {currentEvaluation.drainage === 'good' && '良好'}
+                      {currentEvaluation.drainage === 'moderate' && '中等'}
+                      {currentEvaluation.drainage === 'poor' && '较差'}
+                    </div>
+                  </Card>
+                  <Card className="p-4 bg-purple-50 dark:bg-purple-950">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Zap className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                      <span className="font-medium">肥力水平</span>
+                    </div>
+                    <div className="text-lg text-purple-600 dark:text-purple-400">
+                      {currentEvaluation.fertility === 'high' && '高'}
+                      {currentEvaluation.fertility === 'medium' && '中'}
+                      {currentEvaluation.fertility === 'low' && '低'}
+                    </div>
+                  </Card>
+                </div>
+
+                {/* 评价信息 */}
+                <div className="grid grid-cols-2 gap-4 mt-6">
+                  <div className="flex items-center gap-2 text-sm">
+                    <Calendar className="w-4 h-4 text-muted-foreground" />
+                    <span className="text-muted-foreground">评价日期：</span>
+                    <span>{formatDate(currentEvaluation.date)}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <User className="w-4 h-4 text-muted-foreground" />
+                    <span className="text-muted-foreground">评价人员：</span>
+                    <span>{currentEvaluation.evaluator}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <MapPin className="w-4 h-4 text-muted-foreground" />
+                    <span className="text-muted-foreground">地块位置：</span>
+                    <span>{currentEvaluation.location}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <Target className="w-4 h-4 text-muted-foreground" />
+                    <span className="text-muted-foreground">下次评价：</span>
+                    <span>{formatDate(currentEvaluation.nextEvaluationDate)}</span>
+                  </div>
+                </div>
+
+                {currentEvaluation.evaluationNotes && (
+                  <div className="mt-4 p-3 bg-muted rounded-lg">
+                    <div className="text-sm text-muted-foreground mb-1">评价备注：</div>
+                    <div className="text-sm">{currentEvaluation.evaluationNotes}</div>
+                  </div>
+                )}
+              </Card>
+
+              {/* 得分分布 */}
+              <Card className="p-6 bg-card">
+                <h3 className="mb-4">得分分布图</h3>
+                <div className="space-y-3">
+                  {currentEvaluation.indicators.map(indicator => (
+                    <div key={indicator.id} className="space-y-2">
+                      <div className="flex justify-between text-sm">
+                        <span>{indicator.name}</span>
+                        <span>{indicator.score}分</span>
+                      </div>
+                      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                        <div
+                          className="h-2 rounded-full"
+                          style={{
+                            width: `${indicator.score}%`,
+                            backgroundColor: getIndicatorStatusColor(indicator.status)
+                          }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          ) : (
+            <Card className="p-8 text-center bg-card">
+              <Award className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">暂无评价结果</h3>
+              <p className="text-muted-foreground mb-4">
+                请先完成土壤质量分析以查看评价结果
+              </p>
+              <Button onClick={() => setShowForm(true)}>
+                <Calculator className="w-4 h-4 mr-2" />
+                开始评价
+              </Button>
+            </Card>
+          )}
+        </TabsContent>
+
+        {/* 改良建议 */}
+        <TabsContent value="recommendations" className="space-y-4">
+          {currentEvaluation && currentEvaluation.recommendations.length > 0 ? (
+            <div className="space-y-4">
+              {currentEvaluation.recommendations.map((recommendation, index) => (
+                <Card key={index} className="p-6 bg-card">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-center gap-3">
+                      {recommendation.priority === 'high' && <AlertTriangle className="w-5 h-5 text-red-500" />}
+                      {recommendation.priority === 'medium' && <AlertCircle className="w-5 h-5 text-yellow-500" />}
+                      {recommendation.priority === 'low' && <Info className="w-5 h-5 text-blue-500" />}
+                      <div>
+                        <h4 className="font-semibold">{recommendation.title}</h4>
+                        <p className="text-sm text-muted-foreground mt-1">{recommendation.description}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Badge variant={getPriorityBadgeVariant(recommendation.priority) as any}>
+                        {recommendation.priority === 'high' && '高优先级'}
+                        {recommendation.priority === 'medium' && '中优先级'}
+                        {recommendation.priority === 'low' && '低优先级'}
+                      </Badge>
+                    </div>
+                  </div>
+
+                  {/* 行动项目 */}
+                  <div className="mb-4">
+                    <h5 className="font-medium mb-2">具体措施：</h5>
+                    <ul className="space-y-1">
+                      {recommendation.actionItems.map((item, itemIndex) => (
+                        <li key={itemIndex} className="flex items-start gap-2 text-sm">
+                          <CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                          <span>{item}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  {/* 预期效果和成本 */}
+                  <div className="grid grid-cols-3 gap-4">
+                    <Card className="p-3 bg-green-50 dark:bg-green-950">
+                      <div className="text-sm text-muted-foreground mb-1">预期改善</div>
+                      <div className="font-bold text-green-600 dark:text-green-400">
+                        +{recommendation.expectedImprovement}分
+                      </div>
+                    </Card>
+                    <Card className="p-3 bg-blue-50 dark:bg-blue-950">
+                      <div className="text-sm text-muted-foreground mb-1">实施周期</div>
+                      <div className="font-bold text-blue-600 dark:text-blue-400">
+                        {recommendation.timeframe}
+                      </div>
+                    </Card>
+                    <Card className="p-3 bg-purple-50 dark:bg-purple-950">
+                      <div className="text-sm text-muted-foreground mb-1">预估成本</div>
+                      <div className="font-bold text-purple-600 dark:text-purple-400">
+                        ¥{recommendation.estimatedCost}
+                        {recommendation.costUnit === 'yuan_per_mu' && '/亩'}
+                        {recommendation.costUnit === 'yuan_per_hectare' && '/公顷'}
+                      </div>
+                    </Card>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <Card className="p-8 text-center bg-card">
+              <ThumbsUp className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">土壤质量良好</h3>
+              <p className="text-muted-foreground mb-4">
+                当前土壤质量状况良好，暂无特殊改良建议
+              </p>
+              <Button variant="outline" onClick={() => setShowForm(true)}>
+                <Calculator className="w-4 h-4 mr-2" />
+                重新评价
+              </Button>
+            </Card>
+          )}
+        </TabsContent>
+
+        {/* 历史记录 */}
+        <TabsContent value="history" className="space-y-4">
+          {historicalData.length > 0 ? (
+            <div className="space-y-4">
+              {/* 趋势分析 */}
+              <Card className="p-6 bg-card">
+                <h3 className="mb-4">质量趋势分析</h3>
+                <div className="flex items-center gap-4">
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm text-muted-foreground">总体趋势</span>
+                      <span className={`font-medium ${
+                        historicalData[0].overallScore > historicalData[1]?.overallScore ? 'text-green-600' :
+                        historicalData[0].overallScore < historicalData[1]?.overallScore ? 'text-red-600' :
+                        'text-gray-600'
+                      }`}>
+                        {historicalData[0].overallScore > historicalData[1]?.overallScore && '↑ 上升趋势'}
+                        {historicalData[0].overallScore < historicalData[1]?.overallScore && '↓ 下降趋势'}
+                        {historicalData[0].overallScore === historicalData[1]?.overallScore && '→ 保持稳定'}
+                      </span>
+                    </div>
+                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
+                      <div
+                        className="h-3 rounded-full bg-gradient-to-r from-blue-500 to-green-500"
+                        style={{ width: `${historicalData[0].overallScore}%` }}
+                      />
+                    </div>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+                      {historicalData[0].overallScore}分
+                    </div>
+                    <div className="text-sm text-muted-foreground">最新评分</div>
+                  </div>
+                </div>
+              </Card>
+
+              {/* 历史记录列表 */}
+              <div className="space-y-3">
+                {historicalData.map((history, index) => (
+                  <Card key={index} className="p-4 bg-card">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-4">
+                        <div className="text-center">
+                          <div
+                            className="text-2xl font-bold"
+                            style={{ color: getSoilGradeColor(history.evaluation.overallGrade) }}
+                          >
+                            {history.overallScore}
+                          </div>
+                          <div className="text-xs text-muted-foreground">得分</div>
+                        </div>
+                        <div>
+                          <div className="font-medium">
+                            {formatDate(history.date)} - {history.evaluation.overallGrade}级
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            评价人：{history.evaluation.evaluator}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {index === 0 && (
+                          <Badge variant="default">最新</Badge>
+                        )}
+                        <Button variant="outline" size="sm">
+                          <Eye className="w-4 h-4 mr-1" />
+                          查看
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <Card className="p-8 text-center bg-card">
+              <FileText className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">暂无历史记录</h3>
+              <p className="text-muted-foreground mb-4">
+                完成第一次土壤质量评价后将显示历史记录
+              </p>
+              <Button onClick={() => setShowForm(true)}>
+                <Calculator className="w-4 h-4 mr-2" />
+                开始评价
+              </Button>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {/* 使用说明 */}
+      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+        <div className="flex gap-2">
+          <Info className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
+          <div className="text-sm text-blue-800 dark:text-blue-200">
+            <p className="mb-2">土壤质量评价系统说明：</p>
+            <ul className="space-y-1 text-xs">
+              <li>• <strong>科学评价</strong>：基于13项关键指标进行综合评分，包括pH值、有机质、氮磷钾、微量元素等</li>
+              <li>• <strong>智能分析</strong>：系统自动计算各指标得分，生成综合评价和质量等级</li>
+              <li>• <strong>改良建议</strong>：根据土壤状况提供针对性的改良措施和施肥建议</li>
+              <li>• <strong>历史追踪</strong>：记录历次评价结果，分析土壤质量变化趋势</li>
+              <li>• <strong>专业报告</strong>：支持导出详细的土壤质量评价报告，便于存档和分享</li>
+              <li>• <strong>成本估算</strong>：提供改良措施的预估成本和实施周期，帮助制定改良计划</li>
+            </ul>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilQualityService.ts b/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilQualityService.ts
new file mode 100644
index 0000000..9153ba7
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilQualityService.ts
@@ -0,0 +1,558 @@
+/**
+ * 土壤质量评价服务类
+ * 提供土壤质量分析、评价和改良建议功能
+ */
+
+import {
+  SoilIndicator,
+  SoilQualityEvaluation,
+  SoilRecommendation,
+  SoilQualityHistory,
+  SoilAnalysisForm,
+  FertilizerRecommendation,
+  SOIL_INDICATORS,
+  SOIL_QUALITY_GRADES,
+  SOIL_TYPES,
+  SOIL_TEXTURES,
+  DRAINAGE_LEVELS
+} from './soilTypes';
+
+export class SoilQualityService {
+  /**
+   * 根据土壤分析表单数据生成土壤指标
+   */
+  static generateIndicators(formData: SoilAnalysisForm): SoilIndicator[] {
+    const indicators: SoilIndicator[] = [];
+
+    // 处理每个指标
+    Object.entries(SOIL_INDICATORS).forEach(([key, config]) => {
+      let value: number;
+
+      switch (key) {
+        case 'ph':
+          value = formData.ph;
+          break;
+        case 'organicMatter':
+          value = formData.organicMatter;
+          break;
+        case 'nitrogen':
+          value = formData.nitrogen;
+          break;
+        case 'phosphorus':
+          value = formData.phosphorus;
+          break;
+        case 'potassium':
+          value = formData.potassium;
+          break;
+        case 'calcium':
+          value = formData.calcium;
+          break;
+        case 'magnesium':
+          value = formData.magnesium;
+          break;
+        case 'sulfur':
+          value = formData.sulfur;
+          break;
+        case 'iron':
+          value = formData.iron;
+          break;
+        case 'manganese':
+          value = formData.manganese;
+          break;
+        case 'zinc':
+          value = formData.zinc;
+          break;
+        case 'copper':
+          value = formData.copper;
+          break;
+        case 'boron':
+          value = formData.boron;
+          break;
+        default:
+          return;
+      }
+
+      const score = this.calculateIndicatorScore(value, config.optimalRange);
+      const status = this.getIndicatorStatus(score);
+
+      indicators.push({
+        id: config.id,
+        name: config.name,
+        value,
+        unit: config.unit,
+        optimalRange: config.optimalRange,
+        score,
+        status,
+        weight: config.weight,
+        description: config.description
+      });
+    });
+
+    return indicators;
+  }
+
+  /**
+   * 计算单个指标的得分
+   */
+  static calculateIndicatorScore(value: number, optimalRange: { min: number; max: number }): number {
+    if (value >= optimalRange.min && value <= optimalRange.max) {
+      // 在最佳范围内，满分
+      return 100;
+    }
+
+    const midPoint = (optimalRange.min + optimalRange.max) / 2;
+    const range = optimalRange.max - optimalRange.min;
+
+    if (value < optimalRange.min) {
+      // 低于最佳范围
+      const deviation = optimalRange.min - value;
+      if (deviation <= range * 0.5) {
+        return 100 - (deviation / (range * 0.5)) * 30;
+      } else {
+        return Math.max(0, 70 - (deviation - range * 0.5) / range * 70);
+      }
+    } else {
+      // 高于最佳范围
+      const deviation = value - optimalRange.max;
+      if (deviation <= range * 0.5) {
+        return 100 - (deviation / (range * 0.5)) * 30;
+      } else {
+        return Math.max(0, 70 - (deviation - range * 0.5) / range * 70);
+      }
+    }
+  }
+
+  /**
+   * 获取指标状态
+   */
+  static getIndicatorStatus(score: number): 'excellent' | 'good' | 'moderate' | 'poor' | 'very_poor' {
+    if (score >= 90) return 'excellent';
+    if (score >= 80) return 'good';
+    if (score >= 70) return 'moderate';
+    if (score >= 60) return 'poor';
+    return 'very_poor';
+  }
+
+  /**
+   * 计算土壤质量总体评分
+   */
+  static calculateOverallScore(indicators: SoilIndicator[]): number {
+    const weightedSum = indicators.reduce((sum, indicator) => {
+      return sum + (indicator.score * indicator.weight);
+    }, 0);
+
+    return Math.round(weightedSum);
+  }
+
+  /**
+   * 获取土壤质量等级
+   */
+  static getSoilQualityGrade(score: number): 'A' | 'B' | 'C' | 'D' | 'E' {
+    for (const [grade, config] of Object.entries(SOIL_QUALITY_GRADES)) {
+      if (score >= config.min && score <= config.max) {
+        return grade as 'A' | 'B' | 'C' | 'D' | 'E';
+      }
+    }
+    return 'E';
+  }
+
+  /**
+   * 生成土壤质量评价
+   */
+  static generateEvaluation(formData: SoilAnalysisForm): SoilQualityEvaluation {
+    const indicators = this.generateIndicators(formData);
+    const overallScore = this.calculateOverallScore(indicators);
+    const overallGrade = this.getSoilQualityGrade(overallScore);
+    const recommendations = this.generateRecommendations(indicators, formData);
+
+    return {
+      id: `eval-${Date.now()}`,
+      fieldId: formData.fieldId,
+      fieldName: this.getFieldName(formData.fieldId),
+      date: formData.sampleDate,
+      location: this.getFieldLocation(formData.fieldId),
+      indicators,
+      overallScore,
+      overallGrade,
+      soilType: this.determineSoilType(formData.soilTexture),
+      texture: formData.soilTexture,
+      drainage: formData.drainage as any,
+      fertility: this.determineFertility(overallScore),
+      recommendations,
+      evaluationNotes: formData.notes || '',
+      evaluator: '系统自动评价',
+      nextEvaluationDate: this.calculateNextEvaluationDate(formData.sampleDate)
+    };
+  }
+
+  /**
+   * 生成改良建议
+   */
+  static generateRecommendations(indicators: SoilIndicator[], formData: SoilAnalysisForm): SoilRecommendation[] {
+    const recommendations: SoilRecommendation[] = [];
+
+    // 分析pH值
+    const phIndicator = indicators.find(ind => ind.id === 'ph');
+    if (phIndicator && (phIndicator.status === 'poor' || phIndicator.status === 'very_poor')) {
+      if (phIndicator.value < 6.0) {
+        recommendations.push({
+          category: 'ph_adjustment',
+          priority: 'high',
+          title: '土壤酸化改良',
+          description: '土壤偏酸性，需要进行酸化改良以提高pH值',
+          actionItems: [
+            '施用石灰，每亩施用量100-200公斤',
+            '增施有机肥，改善土壤缓冲能力',
+            '选择耐酸性作物进行轮作',
+            '减少酸性肥料的使用'
+          ],
+          expectedImprovement: 15,
+          timeframe: '3-6个月',
+          estimatedCost: 200,
+          costUnit: 'yuan_per_mu'
+        });
+      } else if (phIndicator.value > 7.5) {
+        recommendations.push({
+          category: 'ph_adjustment',
+          priority: 'high',
+          title: '土壤碱化改良',
+          description: '土壤偏碱性，需要进行碱化改良以降低pH值',
+          actionItems: [
+            '施用硫磺或硫酸亚铁，每亩施用量20-50公斤',
+            '增施酸性有机肥（如松针堆肥）',
+            '种植绿肥作物，如三叶草、苜蓿',
+            '减少碱性肥料的使用'
+          ],
+          expectedImprovement: 15,
+          timeframe: '6-12个月',
+          estimatedCost: 300,
+          costUnit: 'yuan_per_mu'
+        });
+      }
+    }
+
+    // 分析有机质
+    const omIndicator = indicators.find(ind => ind.id === 'organicMatter');
+    if (omIndicator && omIndicator.status !== 'excellent') {
+      recommendations.push({
+        category: 'organic_matter',
+        priority: omIndicator.status === 'very_poor' ? 'high' : 'medium',
+        title: '有机质提升',
+        description: '土壤有机质含量偏低，需要增施有机肥',
+        actionItems: [
+          '施用腐熟农家肥，每亩2000-3000公斤',
+          '种植绿肥作物并翻压还田',
+          '秸秆还田，增加土壤有机质',
+          '使用生物有机肥，改善土壤微生物环境'
+        ],
+        expectedImprovement: 20,
+        timeframe: '6-12个月',
+        estimatedCost: 500,
+        costUnit: 'yuan_per_mu'
+      });
+    }
+
+    // 分析氮磷钾
+    const npkIndicators = indicators.filter(ind => ['nitrogen', 'phosphorus', 'potassium'].includes(ind.id));
+    const deficientNPK = npkIndicators.filter(ind => ind.status === 'poor' || ind.status === 'very_poor');
+
+    if (deficientNPK.length > 0) {
+      const fertilizerRec = this.generateFertilizerRecommendation(deficientNPK);
+      recommendations.push({
+        category: 'fertilizer',
+        priority: 'high',
+        title: '营养元素补充',
+        description: `土壤缺乏${deficientNPK.map(ind => ind.name).join('、')}，需要针对性施肥`,
+        actionItems: fertilizerRec.actionItems,
+        expectedImprovement: 25,
+        timeframe: '1-3个月',
+        estimatedCost: fertilizerRec.estimatedCost,
+        costUnit: 'yuan_per_mu'
+      });
+    }
+
+    // 分析微量元素
+    const microIndicators = indicators.filter(ind =>
+      ['iron', 'manganese', 'zinc', 'copper', 'boron'].includes(ind.id) &&
+      (ind.status === 'poor' || ind.status === 'very_poor')
+    );
+
+    if (microIndicators.length > 0) {
+      recommendations.push({
+        category: 'fertilizer',
+        priority: 'medium',
+        title: '微量元素补充',
+        description: `土壤缺乏${microIndicators.map(ind => ind.name).join('、')}等微量元素`,
+        actionItems: [
+          '施用复合微量元素肥料',
+          '叶面喷施微量元素溶液',
+          '增施有机肥，提高微量元素有效性',
+          '调节土壤pH值，改善微量元素吸收'
+        ],
+        expectedImprovement: 10,
+        timeframe: '1-2个月',
+        estimatedCost: 150,
+        costUnit: 'yuan_per_mu'
+      });
+    }
+
+    // 排水改良建议
+    if (formData.drainage === 'poor' || formData.drainage === 'moderate') {
+      recommendations.push({
+        category: 'drainage',
+        priority: formData.drainage === 'poor' ? 'high' : 'medium',
+        title: '排水系统改良',
+        description: '土壤排水条件较差，需要改良排水系统',
+        actionItems: [
+          '开挖排水沟，改善地表排水',
+          '深耕土壤，打破犁底层',
+          '增施有机肥，改善土壤结构',
+          '种植深根系作物，改良土壤通透性'
+        ],
+        expectedImprovement: 15,
+        timeframe: '3-6个月',
+        estimatedCost: 800,
+        costUnit: 'yuan_per_mu'
+      });
+    }
+
+    return recommendations.sort((a, b) => {
+      const priorityOrder = { high: 3, medium: 2, low: 1 };
+      return priorityOrder[b.priority] - priorityOrder[a.priority];
+    });
+  }
+
+  /**
+   * 生成施肥建议
+   */
+  private static generateFertilizerRecommendation(deficientIndicators: SoilIndicator[]): {
+    actionItems: string[];
+    estimatedCost: number;
+  } {
+    const actionItems: string[] = [];
+    let estimatedCost = 0;
+
+    deficientIndicators.forEach(indicator => {
+      switch (indicator.id) {
+        case 'nitrogen':
+          actionItems.push('施用尿素，每亩20-30公斤');
+          actionItems.push('或施用复合肥（15-15-15），每亩40-50公斤');
+          estimatedCost += 120;
+          break;
+        case 'phosphorus':
+          actionItems.push('施用过磷酸钙，每亩30-40公斤');
+          actionItems.push('或施用磷酸二铵，每亩15-20公斤');
+          estimatedCost += 100;
+          break;
+        case 'potassium':
+          actionItems.push('施用氯化钾，每亩10-15公斤');
+          actionItems.push('或施用硫酸钾，每亩12-18公斤');
+          estimatedCost += 80;
+          break;
+      }
+    });
+
+    return { actionItems, estimatedCost };
+  }
+
+  /**
+   * 确定土壤肥力等级
+   */
+  static determineFertility(score: number): 'high' | 'medium' | 'low' {
+    if (score >= 80) return 'high';
+    if (score >= 60) return 'medium';
+    return 'low';
+  }
+
+  /**
+   * 确定土壤类型
+   */
+  static determineSoilType(texture: string): string {
+    const soilType = SOIL_TYPES.find(type => type.id === texture);
+    return soilType ? soilType.name : '未知';
+  }
+
+  /**
+   * 获取地块名称
+   */
+  private static getFieldName(fieldId: string): string {
+    const mockFields = {
+      'field-1': '东区1号地',
+      'field-2': '西区2号地',
+      'field-3': '南区3号地'
+    };
+    return mockFields[fieldId as keyof typeof mockFields] || '未知地块';
+  }
+
+  /**
+   * 获取地块位置
+   */
+  private static getFieldLocation(fieldId: string): string {
+    const mockLocations = {
+      'field-1': '东区A区',
+      'field-2': '西区B区',
+      'field-3': '南区C区'
+    };
+    return mockLocations[fieldId as keyof typeof mockLocations] || '未知位置';
+  }
+
+  /**
+   * 计算下次评价日期
+   */
+  private static calculateNextEvaluationDate(currentDate: string): string {
+    const date = new Date(currentDate);
+    date.setFullYear(date.getFullYear() + 1);
+    return date.toISOString().split('T')[0];
+  }
+
+  /**
+   * 获取历史记录数据
+   */
+  static getHistoricalData(fieldId: string): SoilQualityHistory[] {
+    // 模拟历史数据
+    const mockHistory: SoilQualityHistory[] = [
+      {
+        date: '2024-01-15',
+        overallScore: 75,
+        indicatorChanges: [],
+        evaluation: {
+          id: 'eval-2024-01',
+          fieldId,
+          fieldName: this.getFieldName(fieldId),
+          date: '2024-01-15',
+          location: this.getFieldLocation(fieldId),
+          indicators: [],
+          overallScore: 75,
+          overallGrade: 'C',
+          soilType: '壤土',
+          texture: 'medium',
+          drainage: 'good',
+          fertility: 'medium',
+          recommendations: [],
+          evaluationNotes: '春季施肥前取样分析',
+          evaluator: '技术员张三',
+          nextEvaluationDate: '2025-01-15'
+        }
+      },
+      {
+        date: '2023-07-20',
+        overallScore: 72,
+        indicatorChanges: [],
+        evaluation: {
+          id: 'eval-2023-07',
+          fieldId,
+          fieldName: this.getFieldName(fieldId),
+          date: '2023-07-20',
+          location: this.getFieldLocation(fieldId),
+          indicators: [],
+          overallScore: 72,
+          overallGrade: 'C',
+          soilType: '壤土',
+          texture: 'medium',
+          drainage: 'good',
+          fertility: 'medium',
+          recommendations: [],
+          evaluationNotes: '夏季作物生长期取样',
+          evaluator: '技术员李四',
+          nextEvaluationDate: '2024-07-20'
+        }
+      },
+      {
+        date: '2023-01-10',
+        overallScore: 68,
+        indicatorChanges: [],
+        evaluation: {
+          id: 'eval-2023-01',
+          fieldId,
+          fieldName: this.getFieldName(fieldId),
+          date: '2023-01-10',
+          location: this.getFieldLocation(fieldId),
+          indicators: [],
+          overallScore: 68,
+          overallGrade: 'D',
+          soilType: '壤土',
+          texture: 'medium',
+          drainage: 'moderate',
+          fertility: 'low',
+          recommendations: [],
+          evaluationNotes: '年初土壤基础检测',
+          evaluator: '技术员王五',
+          nextEvaluationDate: '2024-01-10'
+        }
+      }
+    ];
+
+    return mockHistory;
+  }
+
+  /**
+   * 分析指标变化趋势
+   */
+  static analyzeTrend(historicalData: SoilQualityHistory[]): {
+    trend: 'improving' | 'stable' | 'declining';
+    changeRate: number;
+    description: string;
+  } {
+    if (historicalData.length < 2) {
+      return {
+        trend: 'stable',
+        changeRate: 0,
+        description: '数据不足，无法分析趋势'
+      };
+    }
+
+    const latest = historicalData[0];
+    const previous = historicalData[1];
+    const change = latest.overallScore - previous.overallScore;
+
+    let trend: 'improving' | 'stable' | 'declining';
+    let description: string;
+
+    if (Math.abs(change) < 3) {
+      trend = 'stable';
+      description = '土壤质量保持稳定';
+    } else if (change > 0) {
+      trend = 'improving';
+      description = `土壤质量正在改善，提升了${change}分`;
+    } else {
+      trend = 'declining';
+      description = `土壤质量有所下降，降低了${Math.abs(change)}分`;
+    }
+
+    return {
+      trend,
+      changeRate: change,
+      description
+    };
+  }
+}
+
+// 工具函数
+export const formatSoilScore = (score: number): string => {
+  return `${score}分`;
+};
+
+export const getSoilGradeColor = (grade: string): string => {
+  const gradeConfig = SOIL_QUALITY_GRADES[grade as keyof typeof SOIL_QUALITY_GRADES];
+  return gradeConfig?.color || '#6b7280';
+};
+
+export const getIndicatorStatusColor = (status: string): string => {
+  const colorMap = {
+    excellent: '#22c55e',
+    good: '#84cc16',
+    moderate: '#eab308',
+    poor: '#f97316',
+    very_poor: '#ef4444'
+  };
+  return colorMap[status as keyof typeof colorMap] || '#6b7280';
+};
+
+export const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  });
+};
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilTypes.ts b/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilTypes.ts
new file mode 100644
index 0000000..2fff09c
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/analysis/soil-quality/components/soilTypes.ts
@@ -0,0 +1,256 @@
+/**
+ * 土壤质量评价类型定义
+ */
+
+export interface SoilIndicator {
+  id: string;
+  name: string;
+  value: number;
+  unit: string;
+  optimalRange: {
+    min: number;
+    max: number;
+  };
+  score: number;
+  status: 'excellent' | 'good' | 'moderate' | 'poor' | 'very_poor';
+  weight: number;
+  description: string;
+}
+
+export interface SoilQualityEvaluation {
+  id: string;
+  fieldId: string;
+  fieldName: string;
+  date: string;
+  location: string;
+  indicators: SoilIndicator[];
+  overallScore: number;
+  overallGrade: 'A' | 'B' | 'C' | 'D' | 'E';
+  soilType: string;
+  texture: string;
+  drainage: 'excellent' | 'good' | 'moderate' | 'poor';
+  fertility: 'high' | 'medium' | 'low';
+  recommendations: SoilRecommendation[];
+  evaluationNotes: string;
+  evaluator: string;
+  nextEvaluationDate: string;
+}
+
+export interface SoilRecommendation {
+  category: 'fertilizer' | 'organic_matter' | 'ph_adjustment' | 'drainage' | 'crop_rotation' | 'other';
+  priority: 'high' | 'medium' | 'low';
+  title: string;
+  description: string;
+  actionItems: string[];
+  expectedImprovement: number;
+  timeframe: string;
+  estimatedCost: number;
+  costUnit: 'yuan_per_mu' | 'yuan_per_hectare' | 'yuan_total';
+}
+
+export interface SoilQualityHistory {
+  date: string;
+  overallScore: number;
+  indicatorChanges: {
+    indicatorId: string;
+    indicatorName: string;
+    previousValue: number;
+    currentValue: number;
+    change: number;
+    trend: 'improving' | 'declining' | 'stable';
+  }[];
+  evaluation: SoilQualityEvaluation;
+}
+
+export interface SoilQualityStandard {
+  region: string;
+  soilType: string;
+  indicators: {
+    [key: string]: {
+      optimalRange: { min: number; max: number };
+      acceptableRange: { min: number; max: number };
+      criticalRange: { min: number; max: number };
+      weight: number;
+    };
+  };
+}
+
+export interface FertilizerRecommendation {
+  nutrientType: 'nitrogen' | 'phosphorus' | 'potassium' | 'organic_matter' | 'micronutrients';
+  currentLevel: number;
+  targetLevel: number;
+  deficit: number;
+  recommendedAmount: number;
+  unit: string;
+  fertilizerOptions: {
+    name: string;
+    content: number;
+    applicationRate: number;
+    cost: number;
+    timing: string;
+  }[];
+}
+
+export interface SoilAnalysisForm {
+  fieldId: string;
+  sampleDate: string;
+  sampleDepth: number;
+  ph: number;
+  organicMatter: number;
+  nitrogen: number;
+  phosphorus: number;
+  potassium: number;
+  calcium: number;
+  magnesium: number;
+  sulfur: number;
+  iron: number;
+  manganese: number;
+  zinc: number;
+  copper: number;
+  boron: number;
+  soilTexture: string;
+  drainage: string;
+  notes: string;
+}
+
+// 土壤质量等级定义
+export const SOIL_QUALITY_GRADES = {
+  A: { min: 90, max: 100, label: '优秀', color: '#22c55e', description: '土壤质量极佳，适合各种作物生长' },
+  B: { min: 80, max: 89, label: '良好', color: '#84cc16', description: '土壤质量良好，适合大部分作物生长' },
+  C: { min: 70, max: 79, label: '中等', color: '#eab308', description: '土壤质量中等，需要适当改良' },
+  D: { min: 60, max: 69, label: '较差', color: '#f97316', description: '土壤质量较差，需要重点改良' },
+  E: { min: 0, max: 59, label: '很差', color: '#ef4444', description: '土壤质量很差，需要全面改良' }
+};
+
+// 土壤指标定义
+export const SOIL_INDICATORS = {
+  ph: {
+    id: 'ph',
+    name: 'pH值',
+    unit: '',
+    optimalRange: { min: 6.0, max: 7.5 },
+    weight: 0.15,
+    description: '土壤酸碱度，影响养分有效性和微生物活动'
+  },
+  organicMatter: {
+    id: 'organicMatter',
+    name: '有机质',
+    unit: '%',
+    optimalRange: { min: 2.5, max: 5.0 },
+    weight: 0.20,
+    description: '土壤有机质含量，反映土壤肥力和结构'
+  },
+  nitrogen: {
+    id: 'nitrogen',
+    name: '全氮',
+    unit: 'g/kg',
+    optimalRange: { min: 1.0, max: 2.0 },
+    weight: 0.15,
+    description: '土壤氮素含量，植物生长的重要营养元素'
+  },
+  phosphorus: {
+    id: 'phosphorus',
+    name: '有效磷',
+    unit: 'mg/kg',
+    optimalRange: { min: 15, max: 30 },
+    weight: 0.15,
+    description: '土壤有效磷含量，促进植物根系发育和开花结果'
+  },
+  potassium: {
+    id: 'potassium',
+    name: '速效钾',
+    unit: 'mg/kg',
+    optimalRange: { min: 100, max: 200 },
+    weight: 0.15,
+    description: '土壤速效钾含量，提高植物抗逆性和产量'
+  },
+  calcium: {
+    id: 'calcium',
+    name: '交换性钙',
+    unit: 'mg/kg',
+    optimalRange: { min: 1000, max: 2000 },
+    weight: 0.05,
+    description: '土壤钙含量，调节土壤结构和植物细胞壁形成'
+  },
+  magnesium: {
+    id: 'magnesium',
+    name: '交换性镁',
+    unit: 'mg/kg',
+    optimalRange: { min: 200, max: 400 },
+    weight: 0.05,
+    description: '土壤镁含量，叶绿素合成的重要元素'
+  },
+  sulfur: {
+    id: 'sulfur',
+    name: '有效硫',
+    unit: 'mg/kg',
+    optimalRange: { min: 10, max: 30 },
+    weight: 0.05,
+    description: '土壤硫含量，蛋白质合成的重要元素'
+  },
+  iron: {
+    id: 'iron',
+    name: '有效铁',
+    unit: 'mg/kg',
+    optimalRange: { min: 5, max: 20 },
+    weight: 0.025,
+    description: '土壤铁含量，叶绿素合成必需元素'
+  },
+  manganese: {
+    id: 'manganese',
+    name: '有效锰',
+    unit: 'mg/kg',
+    optimalRange: { min: 2, max: 10 },
+    weight: 0.025,
+    description: '土壤锰含量，参与植物光合作用'
+  },
+  zinc: {
+    id: 'zinc',
+    name: '有效锌',
+    unit: 'mg/kg',
+    optimalRange: { min: 1, max: 5 },
+    weight: 0.025,
+    description: '土壤锌含量，植物生长素合成的必需元素'
+  },
+  copper: {
+    id: 'copper',
+    name: '有效铜',
+    unit: 'mg/kg',
+    optimalRange: { min: 0.5, max: 2 },
+    weight: 0.025,
+    description: '土壤铜含量，参与植物呼吸作用'
+  },
+  boron: {
+    id: 'boron',
+    name: '有效硼',
+    unit: 'mg/kg',
+    optimalRange: { min: 0.5, max: 2 },
+    weight: 0.025,
+    description: '土壤硼含量，植物开花结果必需元素'
+  }
+};
+
+// 土壤类型定义
+export const SOIL_TYPES = [
+  { id: 'sandy_loam', name: '砂壤土', description: '排水良好，保肥能力中等' },
+  { id: 'loam', name: '壤土', description: '质地适中，农业生产的理想土壤' },
+  { id: 'clay_loam', name: '黏壤土', description: '保肥保水能力强，但排水较差' },
+  { id: 'sandy', name: '砂土', description: '排水良好，但保肥能力差' },
+  { id: 'clay', name: '黏土', description: '保肥保水能力强，通气性差' },
+  { id: 'silt', name: '粉土', description: '肥力较高，但结构不稳定' }
+];
+
+// 土壤质地定义
+export const SOIL_TEXTURES = [
+  { id: 'coarse', name: '粗质地', description: '砂粒含量高，排水快' },
+  { id: 'medium', name: '中等质地', description: '砂粒、粉粒、黏粒比例适中' },
+  { id: 'fine', name: '细质地', description: '黏粒含量高，保水保肥能力强' }
+];
+
+// 排水等级定义
+export const DRAINAGE_LEVELS = [
+  { id: 'excellent', name: '优秀', description: '排水通畅，无积水现象' },
+  { id: 'good', name: '良好', description: '排水较好，偶有短期积水' },
+  { id: 'moderate', name: '中等', description: '排水一般，雨季有积水' },
+  { id: 'poor', name: '较差', description: '排水困难，长期积水' }
+];
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/analysis/soil-quality/page.tsx b/crop-x/src/app/(app)/land-information/analysis/soil-quality/page.tsx
index 2ff1992..9ab79d7 100644
--- a/crop-x/src/app/(app)/land-information/analysis/soil-quality/page.tsx
+++ b/crop-x/src/app/(app)/land-information/analysis/soil-quality/page.tsx
@@ -1,18 +1,7 @@
 'use client';
 
-import { Card } from '@/components/ui/card';
+import { SoilQualityAnalysis } from './components/SoilQualityAnalysis';
 
 export default function SoilQualityPage() {
-  return (
-    <div className="space-y-6">
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">土壤质量评价</h2>
-        <div className="p-3 bg-muted rounded-lg mt-3">
-          <p className="text-sm">
-            <strong>页面路径：</strong> /land-information/analysis/soil-quality
-          </p>
-        </div>
-      </Card>
-    </div>
-  );
+  return <SoilQualityAnalysis />;
 }
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/components/DataTrends.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DataTrends.tsx
new file mode 100644
index 0000000..4b553c6
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DataTrends.tsx
@@ -0,0 +1,207 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+interface DataTrendsProps {
+  timeRange: '1h' | '6h' | '24h' | '7d';
+  onTimeRangeChange: (value: '1h' | '6h' | '24h' | '7d') => void;
+}
+
+export function DataTrends({ timeRange, onTimeRangeChange }: DataTrendsProps) {
+  const environmentData = [
+    { time: '00:00', temperature: 18, humidity: 75, co2: 380, light: 0, pm25: 25 },
+    { time: '03:00', temperature: 16, humidity: 80, co2: 390, light: 0, pm25: 22 },
+    { time: '06:00', temperature: 15, humidity: 85, co2: 400, light: 5000, pm25: 20 },
+    { time: '09:00', temperature: 20, humidity: 70, co2: 410, light: 35000, pm25: 28 },
+    { time: '12:00', temperature: 25, humidity: 55, co2: 420, light: 50000, pm25: 35 },
+    { time: '15:00', temperature: 24.5, humidity: 62, co2: 420, light: 45000, pm25: 35 },
+    { time: '18:00', temperature: 22, humidity: 65, co2: 410, light: 15000, pm25: 30 },
+    { time: '21:00', temperature: 19, humidity: 72, co2: 395, light: 0, pm25: 26 },
+  ];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        {(['1h', '6h', '24h', '7d'] as const).map((range) => (
+          <button
+            key={range}
+            onClick={() => onTimeRangeChange(range)}
+            className={`px-3 py-1 rounded-lg text-sm transition-colors ${
+              timeRange === range
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground hover:bg-muted/80'
+            }`}
+          >
+            {range === '1h' && '1小时'}
+            {range === '6h' && '6小时'}
+            {range === '24h' && '24小时'}
+            {range === '7d' && '7天'}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <Card className="p-6">
+          <h3 className="mb-4">温度变化曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+                label={{
+                  value: '温度 (°C)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' },
+                  className: "dark:fill-gray-400"
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'var(--card)',
+                  border: '1px solid var(--border)',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value}°C`, '温度']}
+              />
+              <Line
+                type="monotone"
+                dataKey="temperature"
+                stroke="#dc2626"
+                strokeWidth={2}
+                dot={{ fill: '#dc2626', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+
+        <Card className="p-6">
+          <h3 className="mb-4">湿度变化曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+                label={{
+                  value: '湿度 (%)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' },
+                  className: "dark:fill-gray-400"
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'var(--card)',
+                  border: '1px solid var(--border)',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value}%`, '湿度']}
+              />
+              <Line
+                type="monotone"
+                dataKey="humidity"
+                stroke="#2563eb"
+                strokeWidth={2}
+                dot={{ fill: '#2563eb', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+
+        <Card className="p-6">
+          <h3 className="mb-4">CO₂浓度曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+                label={{
+                  value: 'CO₂ (ppm)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' },
+                  className: "dark:fill-gray-400"
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'var(--card)',
+                  border: '1px solid var(--border)',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value} ppm`, 'CO₂浓度']}
+              />
+              <Line
+                type="monotone"
+                dataKey="co2"
+                stroke="#22c55e"
+                strokeWidth={2}
+                dot={{ fill: '#22c55e', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+
+        <Card className="p-6">
+          <h3 className="mb-4">光照强度曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={environmentData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" className="dark:stroke-gray-600" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                className="dark:fill-gray-400"
+                label={{
+                  value: '光照 (lux)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' },
+                  className: "dark:fill-gray-400"
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: 'var(--card)',
+                  border: '1px solid var(--border)',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value} lux`, '光照强度']}
+              />
+              <Line
+                type="monotone"
+                dataKey="light"
+                stroke="#eab308"
+                strokeWidth={2}
+                dot={{ fill: '#eab308', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceDialog.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceDialog.tsx
new file mode 100644
index 0000000..683c413
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceDialog.tsx
@@ -0,0 +1,298 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  Thermometer,
+  Droplets,
+  Leaf,
+  Eye,
+  Wind,
+  X
+} from 'lucide-react';
+import { SensorDevice, IoTDevice } from './environmentMonitoringReducer';
+
+interface DeviceDialogProps {
+  showDeviceDialog: boolean;
+  editingDevice: SensorDevice | null;
+  deviceForm: {
+    iotDeviceId: string;
+    location: string;
+    fieldId: string;
+  };
+  availableIoTDevices: IoTDevice[];
+  onDeviceFormChange: (form: Partial<typeof deviceForm>) => void;
+  onSaveDevice: () => void;
+  onCancel: () => void;
+}
+
+interface DeviceViewDialogProps {
+  showViewDialog: boolean;
+  viewingDevice: SensorDevice | null;
+  onClose: () => void;
+}
+
+const availableFields = [
+  { id: 'field-1', name: '东区1号地' },
+  { id: 'field-2', name: '西区2号地' },
+  { id: 'field-3', name: '南区3号地' },
+  { id: 'field-4', name: '北区4号地' },
+];
+
+export function DeviceDialog({
+  showDeviceDialog,
+  editingDevice,
+  deviceForm,
+  availableIoTDevices,
+  onDeviceFormChange,
+  onSaveDevice,
+  onCancel
+}: DeviceDialogProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online': return 'bg-green-500';
+      case 'offline': return 'bg-gray-500';
+      case 'warning': return 'bg-yellow-500';
+      default: return 'bg-gray-500';
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'online': return '在线';
+      case 'offline': return '离线';
+      case 'warning': return '警告';
+      default: return '未知';
+    }
+  };
+
+  return (
+    <Dialog open={showDeviceDialog} onOpenChange={onCancel}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{editingDevice ? '编辑设备' : '添加设备'}</DialogTitle>
+          <DialogDescription>
+            {editingDevice ? '修改设备信息' : '从物联设备数据接入中选择设备并配置'}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          {!editingDevice && (
+            <div>
+              <Label>选择设备</Label>
+              <Select
+                value={deviceForm.iotDeviceId}
+                onValueChange={(value) => onDeviceFormChange({ iotDeviceId: value })}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="请从物联设备数据接入中选择" />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableIoTDevices.length === 0 ? (
+                    <div className="p-4 text-sm text-muted-foreground text-center">
+                      暂无可用设备<br />
+                      请先在AI系统-全域数据感知中心-物联设备数据接入中添加环境监测站设备
+                    </div>
+                  ) : (
+                    availableIoTDevices.map((device) => (
+                      <SelectItem key={device.id} value={device.id}>
+                        {device.code} - {device.name} ({device.manufacturer} {device.model})
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          <div>
+            <Label>选择地块</Label>
+            <Select
+              value={deviceForm.fieldId}
+              onValueChange={(value) => onDeviceFormChange({ fieldId: value })}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="请选择地块" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableFields.map((field) => (
+                  <SelectItem key={field.id} value={field.id}>
+                    {field.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label>安装位置</Label>
+            <Input
+              value={deviceForm.location}
+              onChange={(e) => onDeviceFormChange({ location: e.target.value })}
+              placeholder="如：地块中心位置"
+            />
+          </div>
+
+          <div className="flex justify-end gap-2 pt-4 border-t">
+            <Button variant="outline" onClick={onCancel}>
+              取消
+            </Button>
+            <Button className="bg-green-600 hover:bg-green-700" onClick={onSaveDevice}>
+              保存
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function DeviceViewDialog({
+  showViewDialog,
+  viewingDevice,
+  onClose
+}: DeviceViewDialogProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online': return 'bg-green-500';
+      case 'offline': return 'bg-gray-500';
+      case 'warning': return 'bg-yellow-500';
+      default: return 'bg-gray-500';
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'online': return '在线';
+      case 'offline': return '离线';
+      case 'warning': return '警告';
+      default: return '未知';
+    }
+  };
+
+  return (
+    <Dialog open={showViewDialog} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>设备详情</DialogTitle>
+          <DialogDescription>
+            {viewingDevice?.name} - {viewingDevice?.type}
+          </DialogDescription>
+        </DialogHeader>
+        {viewingDevice && (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div>
+                <Label>设备名称</Label>
+                <div className="mt-1 p-2 bg-muted rounded-md text-sm">{viewingDevice.name}</div>
+              </div>
+              <div>
+                <Label>设备类型</Label>
+                <div className="mt-1 p-2 bg-muted rounded-md text-sm">{viewingDevice.type}</div>
+              </div>
+              <div>
+                <Label>所属地块</Label>
+                <div className="mt-1 p-2 bg-muted rounded-md text-sm">{viewingDevice.fieldName}</div>
+              </div>
+              <div>
+                <Label>安装位置</Label>
+                <div className="mt-1 p-2 bg-muted rounded-md text-sm">{viewingDevice.location}</div>
+              </div>
+              <div>
+                <Label>设备状态</Label>
+                <div className="mt-1">
+                  <Badge className={`${getStatusColor(viewingDevice.status)} text-white`}>
+                    {getStatusLabel(viewingDevice.status)}
+                  </Badge>
+                </div>
+              </div>
+              <div>
+                <Label>电池电量</Label>
+                <div className="mt-1 p-2 bg-muted rounded-md text-sm">
+                  <span className={viewingDevice.battery < 40 ? 'text-red-600 dark:text-red-400' : ''}>
+                    {viewingDevice.battery}%
+                  </span>
+                </div>
+              </div>
+              <div className="sm:col-span-2">
+                <Label>最后更新时间</Label>
+                <div className="mt-1 p-2 bg-muted rounded-md text-sm">{viewingDevice.lastUpdate}</div>
+              </div>
+            </div>
+
+            <div>
+              <Label>传感器数据</Label>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mt-2">
+                {viewingDevice.sensors.temperature && (
+                  <Card className="p-3 bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800">
+                    <div className="flex items-center gap-2">
+                      <Thermometer className="w-4 h-4 text-red-600 dark:text-red-400" />
+                      <div>
+                        <p className="text-xs text-muted-foreground">温度</p>
+                        <p className="text-sm font-medium">{viewingDevice.sensors.temperature}°C</p>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+                {viewingDevice.sensors.humidity && (
+                  <Card className="p-3 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+                    <div className="flex items-center gap-2">
+                      <Droplets className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                      <div>
+                        <p className="text-xs text-muted-foreground">湿度</p>
+                        <p className="text-sm font-medium">{viewingDevice.sensors.humidity}%</p>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+                {viewingDevice.sensors.co2 && (
+                  <Card className="p-3 bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800">
+                    <div className="flex items-center gap-2">
+                      <Leaf className="w-4 h-4 text-green-600 dark:text-green-400" />
+                      <div>
+                        <p className="text-xs text-muted-foreground">CO₂</p>
+                        <p className="text-sm font-medium">{viewingDevice.sensors.co2} ppm</p>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+                {viewingDevice.sensors.light && (
+                  <Card className="p-3 bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-800">
+                    <div className="flex items-center gap-2">
+                      <Eye className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
+                      <div>
+                        <p className="text-xs text-muted-foreground">光照</p>
+                        <p className="text-sm font-medium">{(viewingDevice.sensors.light / 1000).toFixed(1)}k lux</p>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+                {viewingDevice.sensors.pm25 && (
+                  <Card className="p-3 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
+                    <div className="flex items-center gap-2">
+                      <Wind className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+                      <div>
+                        <p className="text-xs text-muted-foreground">PM2.5</p>
+                        <p className="text-sm font-medium">{viewingDevice.sensors.pm25} μg/m³</p>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+              </div>
+            </div>
+
+            <div className="flex justify-end pt-4 border-t">
+              <Button variant="outline" onClick={onClose}>
+                关闭
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceManagement.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceManagement.tsx
new file mode 100644
index 0000000..485a05f
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceManagement.tsx
@@ -0,0 +1,109 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Eye, Edit, Trash2, Battery } from 'lucide-react';
+import { SensorDevice } from './environmentMonitoringReducer';
+
+interface DeviceManagementProps {
+  sensorDevices: SensorDevice[];
+  onViewDevice: (device: SensorDevice) => void;
+  onEditDevice: (device: SensorDevice) => void;
+  onDeleteDevice: (deviceId: string) => void;
+}
+
+export function DeviceManagement({
+  sensorDevices,
+  onViewDevice,
+  onEditDevice,
+  onDeleteDevice
+}: DeviceManagementProps) {
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online': return 'bg-green-500';
+      case 'offline': return 'bg-gray-500';
+      case 'warning': return 'bg-yellow-500';
+      default: return 'bg-gray-500';
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'online': return '在线';
+      case 'offline': return '离线';
+      case 'warning': return '警告';
+      default: return '未知';
+    }
+  };
+
+  return (
+    <Card className="p-4">
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b">
+              <th className="text-left p-2">设备名称</th>
+              <th className="text-left p-2">类型</th>
+              <th className="text-left p-2">地块</th>
+              <th className="text-left p-2">位置</th>
+              <th className="text-left p-2">状态</th>
+              <th className="text-left p-2">电量</th>
+              <th className="text-left p-2">最后更新</th>
+              <th className="text-left p-2">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sensorDevices.map((device) => (
+              <tr key={device.id} className="border-b hover:bg-muted/50">
+                <td className="p-2">{device.name}</td>
+                <td className="p-2">{device.type}</td>
+                <td className="p-2">{device.fieldName}</td>
+                <td className="p-2">{device.location}</td>
+                <td className="p-2">
+                  <Badge variant="outline" className={`${getStatusColor(device.status)} text-white`}>
+                    {getStatusLabel(device.status)}
+                  </Badge>
+                </td>
+                <td className="p-2">
+                  <div className="flex items-center gap-1">
+                    <Battery className={`w-4 h-4 ${device.battery < 40 ? 'text-red-500' : 'text-green-500'}`} />
+                    <span className={device.battery < 40 ? 'text-red-600 dark:text-red-400' : ''}>
+                      {device.battery}%
+                    </span>
+                  </div>
+                </td>
+                <td className="p-2 text-sm text-muted-foreground">{device.lastUpdate}</td>
+                <td className="p-2">
+                  <div className="flex gap-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onViewDevice(device)}
+                    >
+                      <Eye className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onEditDevice(device)}
+                    >
+                      <Edit className="w-4 h-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDeleteDevice(device.id)}
+                    >
+                      <Trash2 className="w-4 h-4 text-red-500" />
+                    </Button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceOverview.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceOverview.tsx
new file mode 100644
index 0000000..4839a5c
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/components/DeviceOverview.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle2, AlertCircle, Radio, Activity } from 'lucide-react';
+import { SensorDevice } from './environmentMonitoringReducer';
+
+interface DeviceOverviewProps {
+  sensorDevices: SensorDevice[];
+}
+
+export function DeviceOverview({ sensorDevices }: DeviceOverviewProps) {
+  const onlineDevices = sensorDevices.filter(d => d.status === 'online').length;
+  const warningDevices = sensorDevices.filter(d => d.status === 'warning').length;
+  const offlineDevices = sensorDevices.filter(d => d.status === 'offline').length;
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <Card className="p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 border-green-200 dark:border-green-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">在线设备</p>
+            <p className="mt-2 text-2xl text-green-600 dark:text-green-400">{onlineDevices}</p>
+          </div>
+          <CheckCircle2 className="w-10 h-10 text-green-600 dark:text-green-400 opacity-50" />
+        </div>
+      </Card>
+
+      <Card className="p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-950 dark:to-yellow-900 border-yellow-200 dark:border-yellow-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">警告设备</p>
+            <p className="mt-2 text-2xl text-yellow-600 dark:text-yellow-400">{warningDevices}</p>
+          </div>
+          <AlertCircle className="w-10 h-10 text-yellow-600 dark:text-yellow-400 opacity-50" />
+        </div>
+      </Card>
+
+      <Card className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 border-gray-200 dark:border-gray-600">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">离线设备</p>
+            <p className="mt-2 text-2xl text-muted-foreground">{offlineDevices}</p>
+          </div>
+          <Radio className="w-10 h-10 text-muted-foreground opacity-50" />
+        </div>
+      </Card>
+
+      <Card className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-blue-200 dark:border-blue-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">设备总数</p>
+            <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400">{sensorDevices.length}</p>
+          </div>
+          <Activity className="w-10 h-10 text-blue-600 dark:text-blue-400 opacity-50" />
+        </div>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/components/RealTimeMonitoring.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/components/RealTimeMonitoring.tsx
new file mode 100644
index 0000000..3096022
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/components/RealTimeMonitoring.tsx
@@ -0,0 +1,167 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  Thermometer,
+  Droplets,
+  Leaf,
+  Eye,
+  Wind,
+  TrendingUp,
+  Battery
+} from 'lucide-react';
+import { SensorDevice } from './environmentMonitoringReducer';
+
+interface RealTimeMonitoringProps {
+  selectedDevice: string;
+  sensorDevices: SensorDevice[];
+  onDeviceChange: (value: string) => void;
+}
+
+export function RealTimeMonitoring({
+  selectedDevice,
+  sensorDevices,
+  onDeviceChange
+}: RealTimeMonitoringProps) {
+  const currentDevice = sensorDevices.find(d => d.id === selectedDevice) || sensorDevices[0];
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online': return 'bg-green-500';
+      case 'offline': return 'bg-gray-500';
+      case 'warning': return 'bg-yellow-500';
+      default: return 'bg-gray-500';
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'online': return '在线';
+      case 'offline': return '离线';
+      case 'warning': return '警告';
+      default: return '未知';
+    }
+  };
+
+  const getCO2Level = (co2: number) => {
+    if (co2 < 400) return { label: '正常', color: 'text-green-600 dark:text-green-400' };
+    if (co2 < 600) return { label: '良好', color: 'text-blue-600 dark:text-blue-400' };
+    if (co2 < 1000) return { label: '偏高', color: 'text-yellow-600 dark:text-yellow-400' };
+    return { label: '过高', color: 'text-red-600 dark:text-red-400' };
+  };
+
+  const getPM25Level = (pm25: number) => {
+    if (pm25 < 35) return { label: '优', color: 'text-green-600 dark:text-green-400' };
+    if (pm25 < 75) return { label: '良', color: 'text-blue-600 dark:text-blue-400' };
+    if (pm25 < 115) return { label: '轻度污染', color: 'text-yellow-600 dark:text-yellow-400' };
+    return { label: '重度污染', color: 'text-red-600 dark:text-red-400' };
+  };
+
+  return (
+    <Card className="p-4">
+      <div className="flex items-center gap-4 mb-4 flex-wrap">
+        <Label className="text-sm">选择设备查看实时数据:</Label>
+        <Select value={selectedDevice} onValueChange={onDeviceChange}>
+          <SelectTrigger className="w-80">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {sensorDevices.map((device) => (
+              <SelectItem key={device.id} value={device.id}>
+                {device.name} - {device.fieldName} - {device.type}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Badge variant="outline" className={`${getStatusColor(currentDevice.status)} text-white`}>
+          {getStatusLabel(currentDevice.status)}
+        </Badge>
+        <Badge variant="outline" className="flex items-center gap-1">
+          <Battery className={`w-3 h-3 ${currentDevice.battery < 40 ? 'text-red-500' : 'text-green-500'}`} />
+          电量: {currentDevice.battery}%
+        </Badge>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+        <Card className="p-4 bg-gradient-to-br from-red-50 to-red-100 dark:from-red-950 dark:to-red-900 border-red-200 dark:border-red-800">
+          <div className="flex items-center justify-between mb-2">
+            <Thermometer className="w-6 h-6 text-red-600 dark:text-red-400" />
+            <Badge variant="outline">实时</Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">空气温度</p>
+          <p className="mt-2 text-2xl text-red-600 dark:text-red-400">{currentDevice.sensors.temperature}°C</p>
+          <p className="text-xs text-green-600 dark:text-green-400 mt-1">↑ 0.5°C</p>
+        </Card>
+
+        <Card className="p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900 border-blue-200 dark:border-blue-800">
+          <div className="flex items-center justify-between mb-2">
+            <Droplets className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+            <Badge variant="outline">实时</Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">空气湿度</p>
+          <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400">{currentDevice.sensors.humidity}%</p>
+          <p className="text-xs text-red-600 dark:text-red-400 mt-1">↓ 3%</p>
+        </Card>
+
+        <Card className="p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900 border-green-200 dark:border-green-800">
+          <div className="flex items-center justify-between mb-2">
+            <Leaf className="w-6 h-6 text-green-600 dark:text-green-400" />
+            <Badge variant="outline">实时</Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">CO₂浓度</p>
+          <p className="mt-2 text-2xl text-green-600 dark:text-green-400">{currentDevice.sensors.co2}</p>
+          <p className="text-xs text-muted-foreground mt-1">ppm</p>
+        </Card>
+
+        <Card className="p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-950 dark:to-yellow-900 border-yellow-200 dark:border-yellow-800">
+          <div className="flex items-center justify-between mb-2">
+            <Eye className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
+            <Badge variant="outline">实时</Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">光照强度</p>
+          <p className="mt-2 text-2xl text-yellow-600 dark:text-yellow-400">{(currentDevice.sensors.light! / 1000).toFixed(0)}k</p>
+          <p className="text-xs text-muted-foreground mt-1">lux</p>
+        </Card>
+
+        <Card className="p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900 border-purple-200 dark:border-purple-800">
+          <div className="flex items-center justify-between mb-2">
+            <Wind className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+            <Badge variant="outline">实时</Badge>
+          </div>
+          <p className="text-xs text-muted-foreground">PM2.5</p>
+          <p className="mt-2 text-2xl text-purple-600 dark:text-purple-400">{currentDevice.sensors.pm25}</p>
+          <p className="text-xs text-muted-foreground mt-1">μg/m³</p>
+        </Card>
+      </div>
+
+      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <Card className="p-4 bg-gradient-to-br from-green-50 to-white dark:from-green-950 dark:to-card border-green-200 dark:border-green-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-muted-foreground">CO₂水平评估</p>
+              <p className={`mt-2 ${getCO2Level(currentDevice.sensors.co2!).color}`}>
+                {getCO2Level(currentDevice.sensors.co2!).label}
+              </p>
+            </div>
+            <TrendingUp className="w-8 h-8 text-green-600 dark:text-green-400 opacity-30" />
+          </div>
+        </Card>
+
+        <Card className="p-4 bg-gradient-to-br from-purple-50 to-white dark:from-purple-950 dark:to-card border-purple-200 dark:border-purple-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs text-muted-foreground">空气质量评估</p>
+              <p className={`mt-2 ${getPM25Level(currentDevice.sensors.pm25!).color}`}>
+                {getPM25Level(currentDevice.sensors.pm25!).label}
+              </p>
+            </div>
+            <Wind className="w-8 h-8 text-purple-600 dark:text-purple-400 opacity-30" />
+          </div>
+        </Card>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/components/environmentMonitoringReducer.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/components/environmentMonitoringReducer.tsx
new file mode 100644
index 0000000..df9a026
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/components/environmentMonitoringReducer.tsx
@@ -0,0 +1,247 @@
+'use client';
+
+export interface SensorDevice {
+  id: string;
+  name: string;
+  type: string;
+  location: string;
+  fieldId: string;
+  fieldName: string;
+  status: 'online' | 'offline' | 'warning';
+  battery: number;
+  lastUpdate: string;
+  sensors: {
+    temperature?: number;
+    humidity?: number;
+    co2?: number;
+    light?: number;
+    pm25?: number;
+  };
+}
+
+export interface IoTDevice {
+  id: string;
+  code: string;
+  name: string;
+  type: string;
+  manufacturer: string;
+  model: string;
+  location: string;
+  fieldId: string;
+  fieldName: string;
+  protocol: string;
+  ipAddress?: string;
+  mqttTopic?: string;
+  status: string;
+  bindingStatus: '未绑定' | '已绑定';
+  bindingSystem?: string;
+  lastReportTime: string;
+  dataFrequency: string;
+  batteryLevel?: number;
+  signalStrength?: number;
+  sensors: {
+    name: string;
+    unit: string;
+    currentValue: number;
+    normalRange: string;
+  }[];
+}
+
+export interface EnvironmentMonitoringState {
+  selectedDevice: string;
+  showDeviceDialog: boolean;
+  showViewDialog: boolean;
+  editingDevice: SensorDevice | null;
+  viewingDevice: SensorDevice | null;
+  timeRange: '1h' | '6h' | '24h' | '7d';
+  availableIoTDevices: IoTDevice[];
+  sensorDevices: SensorDevice[];
+  deviceForm: {
+    iotDeviceId: string;
+    location: string;
+    fieldId: string;
+  };
+}
+
+export type EnvironmentMonitoringAction =
+  | { type: 'SET_SELECTED_DEVICE'; payload: string }
+  | { type: 'SET_SHOW_DEVICE_DIALOG'; payload: boolean }
+  | { type: 'SET_SHOW_VIEW_DIALOG'; payload: boolean }
+  | { type: 'SET_EDITING_DEVICE'; payload: SensorDevice | null }
+  | { type: 'SET_VIEWING_DEVICE'; payload: SensorDevice | null }
+  | { type: 'SET_TIME_RANGE'; payload: '1h' | '6h' | '24h' | '7d' }
+  | { type: 'SET_AVAILABLE_IOT_DEVICES'; payload: IoTDevice[] }
+  | { type: 'SET_SENSOR_DEVICES'; payload: SensorDevice[] }
+  | { type: 'SET_DEVICE_FORM'; payload: Partial<EnvironmentMonitoringState['deviceForm']> }
+  | { type: 'ADD_SENSOR_DEVICE'; payload: SensorDevice }
+  | { type: 'UPDATE_SENSOR_DEVICE'; payload: { id: string; updates: Partial<SensorDevice> } }
+  | { type: 'DELETE_SENSOR_DEVICE'; payload: string }
+  | { type: 'LOAD_IOT_DEVICES' }
+  | { type: 'RESET_DEVICE_FORM' };
+
+const availableFields = [
+  { id: 'field-1', name: '东区1号地' },
+  { id: 'field-2', name: '西区2号地' },
+  { id: 'field-3', name: '南区3号地' },
+  { id: 'field-4', name: '北区4号地' },
+];
+
+const initialSensorDevices: SensorDevice[] = [
+  {
+    id: 'device-1',
+    name: 'ENV-001',
+    type: '综合环境监测站',
+    location: '东区1号地中心',
+    fieldId: 'field-1',
+    fieldName: '东区1号地',
+    status: 'online',
+    battery: 85,
+    lastUpdate: '2024-10-18 15:30',
+    sensors: {
+      temperature: 24.5,
+      humidity: 62,
+      co2: 420,
+      light: 45000,
+      pm25: 35,
+    },
+  },
+  {
+    id: 'device-2',
+    name: 'ENV-002',
+    type: '气象传感器',
+    location: '西区2号地北侧',
+    fieldId: 'field-2',
+    fieldName: '西区2号地',
+    status: 'online',
+    battery: 92,
+    lastUpdate: '2024-10-18 15:28',
+    sensors: {
+      temperature: 23.8,
+      humidity: 68,
+      co2: 410,
+      light: 42000,
+      pm25: 28,
+    },
+  },
+  {
+    id: 'device-3',
+    name: 'ENV-003',
+    type: 'CO2监测器',
+    location: '南区3号地温室',
+    fieldId: 'field-3',
+    fieldName: '南区3号地',
+    status: 'warning',
+    battery: 35,
+    lastUpdate: '2024-10-18 15:25',
+    sensors: {
+      temperature: 26.2,
+      humidity: 75,
+      co2: 550,
+      light: 38000,
+      pm25: 42,
+    },
+  },
+];
+
+export const initialState: EnvironmentMonitoringState = {
+  selectedDevice: 'device-1',
+  showDeviceDialog: false,
+  showViewDialog: false,
+  editingDevice: null,
+  viewingDevice: null,
+  timeRange: '24h',
+  availableIoTDevices: [],
+  sensorDevices: initialSensorDevices,
+  deviceForm: {
+    iotDeviceId: '',
+    location: '',
+    fieldId: '',
+  },
+};
+
+export function environmentMonitoringReducer(
+  state: EnvironmentMonitoringState,
+  action: EnvironmentMonitoringAction
+): EnvironmentMonitoringState {
+  switch (action.type) {
+    case 'SET_SELECTED_DEVICE':
+      return { ...state, selectedDevice: action.payload };
+
+    case 'SET_SHOW_DEVICE_DIALOG':
+      return { ...state, showDeviceDialog: action.payload };
+
+    case 'SET_SHOW_VIEW_DIALOG':
+      return { ...state, showViewDialog: action.payload };
+
+    case 'SET_EDITING_DEVICE':
+      return { ...state, editingDevice: action.payload };
+
+    case 'SET_VIEWING_DEVICE':
+      return { ...state, viewingDevice: action.payload };
+
+    case 'SET_TIME_RANGE':
+      return { ...state, timeRange: action.payload };
+
+    case 'SET_AVAILABLE_IOT_DEVICES':
+      return { ...state, availableIoTDevices: action.payload };
+
+    case 'SET_SENSOR_DEVICES':
+      return { ...state, sensorDevices: action.payload };
+
+    case 'SET_DEVICE_FORM':
+      return {
+        ...state,
+        deviceForm: { ...state.deviceForm, ...action.payload }
+      };
+
+    case 'ADD_SENSOR_DEVICE':
+      return {
+        ...state,
+        sensorDevices: [...state.sensorDevices, action.payload]
+      };
+
+    case 'UPDATE_SENSOR_DEVICE':
+      return {
+        ...state,
+        sensorDevices: state.sensorDevices.map(device =>
+          device.id === action.payload.id
+            ? { ...device, ...action.payload.updates }
+            : device
+        )
+      };
+
+    case 'DELETE_SENSOR_DEVICE':
+      return {
+        ...state,
+        sensorDevices: state.sensorDevices.filter(device => device.id !== action.payload)
+      };
+
+    case 'LOAD_IOT_DEVICES':
+      try {
+        const data = localStorage.getItem('smart_agriculture_ai_iot_devices');
+        if (data) {
+          const devices: IoTDevice[] = JSON.parse(data);
+          const environmentDevices = devices.filter(
+            d => d.type === '环境监测站' && d.bindingStatus === '未绑定'
+          );
+          return { ...state, availableIoTDevices: environmentDevices };
+        }
+      } catch (error) {
+        console.error('Failed to load IoT devices:', error);
+      }
+      return { ...state, availableIoTDevices: [] };
+
+    case 'RESET_DEVICE_FORM':
+      return {
+        ...state,
+        deviceForm: {
+          iotDeviceId: '',
+          location: '',
+          fieldId: '',
+        }
+      };
+
+    default:
+      return state;
+  }
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/environment/page.tsx b/crop-x/src/app/(app)/land-information/monitoring/environment/page.tsx
index e4c6e98..0c69e26 100644
--- a/crop-x/src/app/(app)/land-information/monitoring/environment/page.tsx
+++ b/crop-x/src/app/(app)/land-information/monitoring/environment/page.tsx
@@ -1,18 +1,229 @@
 'use client';
 
-import { Card } from '@/components/ui/card';
+import { useReducer, useEffect } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Plus } from 'lucide-react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  environmentMonitoringReducer,
+  initialState,
+  EnvironmentMonitoringAction,
+  SensorDevice,
+  IoTDevice
+} from './components/environmentMonitoringReducer';
+import { DeviceOverview } from './components/DeviceOverview';
+import { RealTimeMonitoring } from './components/RealTimeMonitoring';
+import { DeviceManagement } from './components/DeviceManagement';
+import { DataTrends } from './components/DataTrends';
+import { DeviceDialog, DeviceViewDialog } from './components/DeviceDialog';
+
+const availableFields = [
+  { id: 'field-1', name: '东区1号地' },
+  { id: 'field-2', name: '西区2号地' },
+  { id: 'field-3', name: '南区3号地' },
+  { id: 'field-4', name: '北区4号地' },
+];
 
 export default function EnvironmentPage() {
+  const [state, dispatch] = useReducer(environmentMonitoringReducer, initialState);
+
+  useEffect(() => {
+    dispatch({ type: 'LOAD_IOT_DEVICES' });
+  }, []);
+
+  const handleDeviceChange = (value: string) => {
+    dispatch({ type: 'SET_SELECTED_DEVICE', payload: value });
+  };
+
+  const handleTimeRangeChange = (value: '1h' | '6h' | '24h' | '7d') => {
+    dispatch({ type: 'SET_TIME_RANGE', payload: value });
+  };
+
+  const handleAddDevice = () => {
+    dispatch({ type: 'SET_EDITING_DEVICE', payload: null });
+    dispatch({ type: 'RESET_DEVICE_FORM' });
+    dispatch({ type: 'SET_SHOW_DEVICE_DIALOG', payload: true });
+  };
+
+  const handleEditDevice = (device: SensorDevice) => {
+    dispatch({ type: 'SET_EDITING_DEVICE', payload: device });
+    dispatch({ type: 'SET_DEVICE_FORM', payload: {
+      iotDeviceId: '',
+      location: device.location,
+      fieldId: device.fieldId,
+    }});
+    dispatch({ type: 'SET_SHOW_DEVICE_DIALOG', payload: true });
+  };
+
+  const handleViewDevice = (device: SensorDevice) => {
+    dispatch({ type: 'SET_VIEWING_DEVICE', payload: device });
+    dispatch({ type: 'SET_SHOW_VIEW_DIALOG', payload: true });
+  };
+
+  const handleDeleteDevice = (deviceId: string) => {
+    if (confirm('确定要删除该设备吗？')) {
+      dispatch({ type: 'DELETE_SENSOR_DEVICE', payload: deviceId });
+      toast.success('设备已删除');
+    }
+  };
+
+  const handleDeviceFormChange = (form: Partial<typeof state.deviceForm>) => {
+    dispatch({ type: 'SET_DEVICE_FORM', payload: form });
+  };
+
+  const handleSaveDevice = () => {
+    if (!state.deviceForm.fieldId) {
+      toast.error('请选择地块');
+      return;
+    }
+
+    const field = availableFields.find(f => f.id === state.deviceForm.fieldId);
+
+    if (!field) {
+      toast.error('无效的地块选择');
+      return;
+    }
+
+    if (state.editingDevice) {
+      // 编辑设备
+      dispatch({
+        type: 'UPDATE_SENSOR_DEVICE',
+        payload: {
+          id: state.editingDevice.id,
+          updates: {
+            location: state.deviceForm.location,
+            fieldId: state.deviceForm.fieldId,
+            fieldName: field.name,
+          }
+        }
+      });
+      toast.success('设备信息已更新');
+    } else {
+      // 添加新设备
+      if (!state.deviceForm.iotDeviceId) {
+        toast.error('请选择设备');
+        return;
+      }
+
+      const iotDevice = state.availableIoTDevices.find(d => d.id === state.deviceForm.iotDeviceId);
+
+      if (!iotDevice) {
+        toast.error('无效的设备选择');
+        return;
+      }
+
+      const newDevice: SensorDevice = {
+        id: `device-${Date.now()}`,
+        name: iotDevice.code,
+        type: iotDevice.type,
+        location: state.deviceForm.location,
+        fieldId: state.deviceForm.fieldId,
+        fieldName: field.name,
+        status: 'online',
+        battery: iotDevice.batteryLevel || 100,
+        lastUpdate: new Date().toLocaleString('zh-CN'),
+        sensors: {
+          temperature: 22,
+          humidity: 60,
+          co2: 400,
+          light: 40000,
+          pm25: 30,
+        },
+      };
+
+      dispatch({ type: 'ADD_SENSOR_DEVICE', payload: newDevice });
+
+      // 更新AI数据中心的设备绑定状态
+      try {
+        const allIoTDevices = localStorage.getItem('smart_agriculture_ai_iot_devices');
+        if (allIoTDevices) {
+          const devices: IoTDevice[] = JSON.parse(allIoTDevices);
+          const updatedDevices = devices.map(d =>
+            d.id === state.deviceForm.iotDeviceId
+              ? { ...d, bindingStatus: '已绑定' as const, bindingSystem: '地块环境监测-环境监测' }
+              : d
+          );
+          localStorage.setItem('smart_agriculture_ai_iot_devices', JSON.stringify(updatedDevices));
+        }
+      } catch (error) {
+        console.error('Failed to update IoT device binding status:', error);
+      }
+
+      toast.success('设备添加成功');
+    }
+
+    dispatch({ type: 'SET_SHOW_DEVICE_DIALOG', payload: false });
+  };
+
+  const handleCancelDialog = () => {
+    dispatch({ type: 'SET_SHOW_DEVICE_DIALOG', payload: false });
+    dispatch({ type: 'SET_SHOW_VIEW_DIALOG', payload: false });
+  };
+
   return (
     <div className="space-y-6">
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">环境监测</h2>
-        <div className="p-3 bg-muted rounded-lg mt-3">
-          <p className="text-sm">
-            <strong>页面路径：</strong> /land-information/monitoring/environment
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-green-800 dark:text-green-200">环境监测</h2>
+          <p className="text-muted-foreground">
+            物联网传感器管理、环境数据采集与分析
           </p>
         </div>
-      </Card>
+        <div className="flex gap-2">
+          <Button className="bg-green-600 hover:bg-green-700" onClick={handleAddDevice}>
+            <Plus className="w-4 h-4 mr-2" />
+            添加设备
+          </Button>
+        </div>
+      </div>
+
+      <DeviceOverview sensorDevices={state.sensorDevices} />
+
+      <RealTimeMonitoring
+        selectedDevice={state.selectedDevice}
+        sensorDevices={state.sensorDevices}
+        onDeviceChange={handleDeviceChange}
+      />
+
+      <Tabs defaultValue="devices" className="w-full">
+        <TabsList>
+          <TabsTrigger value="devices">设备管理</TabsTrigger>
+          <TabsTrigger value="trends">数据趋势</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="devices">
+          <DeviceManagement
+            sensorDevices={state.sensorDevices}
+            onViewDevice={handleViewDevice}
+            onEditDevice={handleEditDevice}
+            onDeleteDevice={handleDeleteDevice}
+          />
+        </TabsContent>
+
+        <TabsContent value="trends">
+          <DataTrends
+            timeRange={state.timeRange}
+            onTimeRangeChange={handleTimeRangeChange}
+          />
+        </TabsContent>
+      </Tabs>
+
+      <DeviceDialog
+        showDeviceDialog={state.showDeviceDialog}
+        editingDevice={state.editingDevice}
+        deviceForm={state.deviceForm}
+        availableIoTDevices={state.availableIoTDevices}
+        onDeviceFormChange={handleDeviceFormChange}
+        onSaveDevice={handleSaveDevice}
+        onCancel={handleCancelDialog}
+      />
+
+      <DeviceViewDialog
+        showViewDialog={state.showViewDialog}
+        viewingDevice={state.viewingDevice}
+        onClose={handleCancelDialog}
+      />
     </div>
   );
 }
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/ControlPanel.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/ControlPanel.tsx
new file mode 100644
index 0000000..c9e72b7
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/ControlPanel.tsx
@@ -0,0 +1,78 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { WeatherDataState, WeatherDataAction } from './weatherDataReducer';
+
+interface ControlPanelProps {
+  state: WeatherDataState;
+  dispatch: React.Dispatch<WeatherDataAction>;
+}
+
+export default function ControlPanel({ state, dispatch }: ControlPanelProps) {
+  const handleFieldChange = (fieldId: string) => {
+    dispatch({ type: 'SET_FILTERS', payload: { selectedField: fieldId } });
+  };
+
+  const handleTimeRangeChange = (timeRange: '24h' | '7d' | '30d') => {
+    dispatch({ type: 'SET_FILTERS', payload: { timeRange } });
+  };
+
+  return (
+    <Card className="p-4">
+      <div className="flex items-center gap-4">
+        <div className="flex-1">
+          <label className="text-xs text-muted-foreground mb-2 block">选择地块</label>
+          <Select value={state.filters.selectedField} onValueChange={handleFieldChange}>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="field-1">东区1号地</SelectItem>
+              <SelectItem value="field-2">西区2号地</SelectItem>
+              <SelectItem value="field-3">南区3号地</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex-1">
+          <label className="text-xs text-muted-foreground mb-2 block">时间范围</label>
+          <div className="flex gap-2">
+            <Button
+              variant={state.filters.timeRange === '24h' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handleTimeRangeChange('24h')}
+              className="flex-1"
+            >
+              24小时
+            </Button>
+            <Button
+              variant={state.filters.timeRange === '7d' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handleTimeRangeChange('7d')}
+              className="flex-1"
+            >
+              7天
+            </Button>
+            <Button
+              variant={state.filters.timeRange === '30d' ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => handleTimeRangeChange('30d')}
+              className="flex-1"
+            >
+              30天
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-end">
+          <div className="text-xs text-muted-foreground text-right">
+            <div>最后更新:</div>
+            <div className="font-medium">{state.lastUpdateTime || '未更新'}</div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/RealtimeWeatherCards.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/RealtimeWeatherCards.tsx
new file mode 100644
index 0000000..0d25350
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/RealtimeWeatherCards.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { WeatherData } from './weatherDataReducer';
+import {
+  Thermometer,
+  Droplets,
+  Wind,
+  CloudRain,
+  Sun,
+  Activity,
+} from 'lucide-react';
+
+interface RealtimeWeatherCardsProps {
+  weatherData: WeatherData[];
+}
+
+export default function RealtimeWeatherCards({ weatherData }: RealtimeWeatherCardsProps) {
+  // 获取最新的数据（最后一个数据点）
+  const latestData = weatherData[weatherData.length - 1];
+
+  // 如果没有数据，显示占位符
+  if (!latestData) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+        {[1, 2, 3, 4, 5, 6].map((i) => (
+          <Card key={i} className="p-4 animate-pulse">
+            <div className="flex items-center justify-between">
+              <div className="space-y-2">
+                <div className="h-3 bg-muted rounded w-16"></div>
+                <div className="h-6 bg-muted rounded w-12"></div>
+              </div>
+              <div className="w-10 h-10 bg-muted rounded"></div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  // 计算变化趋势（与上一个数据点比较）
+  const previousData = weatherData[weatherData.length - 2];
+  const getTrend = (current: number, previous?: number) => {
+    if (!previous) return null;
+    const diff = current - previous;
+    if (Math.abs(diff) < 0.1) return null;
+    return diff > 0 ? 'up' : 'down';
+  };
+
+  const tempTrend = getTrend(latestData.temperature, previousData?.temperature);
+  const humidityTrend = getTrend(latestData.humidity, previousData?.humidity);
+  const windTrend = getTrend(latestData.windSpeed, previousData?.windSpeed);
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+      {/* 温度 */}
+      <Card className="p-4 bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">温度</p>
+            <p className="mt-2 text-2xl text-red-600 dark:text-red-400 font-semibold">
+              {latestData.temperature}°C
+            </p>
+            {tempTrend && (
+              <p className={`text-xs mt-1 ${tempTrend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
+                {tempTrend === 'up' ? '↑' : '↓'} {Math.abs(latestData.temperature - (previousData?.temperature || 0)).toFixed(1)}°C
+              </p>
+            )}
+          </div>
+          <Thermometer className="w-10 h-10 text-red-600 dark:text-red-400 opacity-50" />
+        </div>
+      </Card>
+
+      {/* 湿度 */}
+      <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">湿度</p>
+            <p className="mt-2 text-2xl text-blue-600 dark:text-blue-400 font-semibold">
+              {latestData.humidity}%
+            </p>
+            {humidityTrend && (
+              <p className={`text-xs mt-1 ${humidityTrend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
+                {humidityTrend === 'up' ? '↑' : '↓'} {Math.abs(latestData.humidity - (previousData?.humidity || 0)).toFixed(0)}%
+              </p>
+            )}
+          </div>
+          <Droplets className="w-10 h-10 text-blue-600 dark:text-blue-400 opacity-50" />
+        </div>
+      </Card>
+
+      {/* 风速 */}
+      <Card className="p-4 bg-cyan-50 dark:bg-cyan-950 border-cyan-200 dark:border-cyan-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">风速</p>
+            <p className="mt-2 text-2xl text-cyan-600 dark:text-cyan-400 font-semibold">
+              {latestData.windSpeed} m/s
+            </p>
+            {windTrend && (
+              <p className={`text-xs mt-1 ${windTrend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
+                {windTrend === 'up' ? '↑' : '↓'} {Math.abs(latestData.windSpeed - (previousData?.windSpeed || 0)).toFixed(1)} m/s
+              </p>
+            )}
+          </div>
+          <Wind className="w-10 h-10 text-cyan-600 dark:text-cyan-400 opacity-50" />
+        </div>
+      </Card>
+
+      {/* 降雨量 */}
+      <Card className="p-4 bg-indigo-50 dark:bg-indigo-950 border-indigo-200 dark:border-indigo-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">降雨量</p>
+            <p className="mt-2 text-2xl text-indigo-600 dark:text-indigo-400 font-semibold">
+              {latestData.rainfall} mm
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              {weatherData.length > 0 ? '今日累计' : '暂无数据'}
+            </p>
+          </div>
+          <CloudRain className="w-10 h-10 text-indigo-600 dark:text-indigo-400 opacity-50" />
+        </div>
+      </Card>
+
+      {/* 光照强度 */}
+      <Card className="p-4 bg-yellow-50 dark:bg-yellow-950 border-yellow-200 dark:border-yellow-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">光照强度</p>
+            <p className="mt-2 text-2xl text-yellow-600 dark:text-yellow-400 font-semibold">
+              {latestData.sunlight}
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">W/m²</p>
+          </div>
+          <Sun className="w-10 h-10 text-yellow-600 dark:text-yellow-400 opacity-50" />
+        </div>
+      </Card>
+
+      {/* 气压 */}
+      <Card className="p-4 bg-purple-50 dark:bg-purple-950 border-purple-200 dark:border-purple-800">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-xs text-muted-foreground">气压</p>
+            <p className="mt-2 text-2xl text-purple-600 dark:text-purple-400 font-semibold">
+              {latestData.pressure}
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">hPa</p>
+          </div>
+          <Activity className="w-10 h-10 text-purple-600 dark:text-purple-400 opacity-50" />
+        </div>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/UsageGuide.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/UsageGuide.tsx
new file mode 100644
index 0000000..08371da
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/UsageGuide.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Zap } from 'lucide-react';
+
+export default function UsageGuide() {
+  return (
+    <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+      <div className="flex gap-2">
+        <Zap className="w-5 h-5 text-blue-600 flex-shrink-0" />
+        <div className="text-sm text-blue-800 dark:text-blue-200">
+          <p className="mb-2 font-medium">气象监测功能说明：</p>
+          <ul className="space-y-1 text-xs">
+            <li>• <strong>API接口</strong>: 支持对接多种气象API（如中国气象局、和风天气等）</li>
+            <li>• <strong>实时监控</strong>: 自动获取并更新气象站数据（每15分钟自动刷新）</li>
+            <li>• <strong>数据可视化</strong>: 多种图表展示气象数据变化趋势</li>
+            <li>• <strong>天气预报</strong>: 对接天气预报API，提供未来7天预报</li>
+            <li>• <strong>灾害预警</strong>: 智能识别低温冻害（≤3°C）、大风（≥10m/s）、暴雨（≥50mm）、高温（≥35°C）</li>
+            <li>• <strong>历史数据</strong>: 完整的历史气象数据记录和查询功能</li>
+            <li>• <strong>统计分析</strong>: 自动计算气象统计指标，提供农业建议</li>
+            <li>• <strong>数据导出</strong>: 支持导出CSV格式的气象数据</li>
+          </ul>
+        </div>
+      </div>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAlerts.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAlerts.tsx
new file mode 100644
index 0000000..a7edff9
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAlerts.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { AlertTriangle } from 'lucide-react';
+import { WeatherDataState, WeatherDataAction, getAlertColor } from './weatherDataReducer';
+
+interface WeatherAlertsProps {
+  state: WeatherDataState;
+  dispatch: React.Dispatch<WeatherDataAction>;
+}
+
+export default function WeatherAlerts({ state, dispatch }: WeatherAlertsProps) {
+  const unacknowledgedAlerts = state.weatherAlerts.filter(
+    alert => !state.acknowledgedAlerts.includes(alert.id)
+  );
+
+  const handleAcknowledgeAlert = (alertId: string) => {
+    dispatch({ type: 'ACKNOWLEDGE_ALERT', payload: alertId });
+  };
+
+  const handleAcknowledgeAll = () => {
+    dispatch({ type: 'ACKNOWLEDGE_ALL_ALERTS' });
+  };
+
+  if (unacknowledgedAlerts.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-medium text-orange-800 dark:text-orange-200">
+          天气预警 ({unacknowledgedAlerts.length})
+        </h3>
+        {unacknowledgedAlerts.length > 1 && (
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleAcknowledgeAll}
+            className="text-xs"
+          >
+            全部知晓
+          </Button>
+        )}
+      </div>
+
+      {unacknowledgedAlerts.map((alert) => (
+        <Card
+          key={alert.id}
+          className="p-4 border-l-4 border-l-orange-500 bg-orange-50 dark:bg-orange-950 border-orange-200 dark:border-orange-800"
+        >
+          <div className="flex items-start gap-4">
+            <AlertTriangle className="w-6 h-6 text-orange-600 flex-shrink-0 mt-0.5" />
+            <div className="flex-1">
+              <div className="flex items-center gap-3 mb-2">
+                <Badge className={`${getAlertColor(alert.level)} text-white font-light`}>
+                  {alert.level}
+                </Badge>
+                <Badge variant="outline" className="font-light">{alert.type}</Badge>
+                <span className="text-xs text-muted-foreground">{alert.time}</span>
+              </div>
+              <p className="text-sm mb-2 text-orange-800 dark:text-orange-200">{alert.message}</p>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <span>影响地块:</span>
+                {alert.affectedFields.map((field, index) => (
+                  <Badge key={index} variant="outline" className="font-light">
+                    {field}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+            <Button
+              size="sm"
+              className="bg-green-600 hover:bg-green-700"
+              onClick={() => handleAcknowledgeAlert(alert.id)}
+            >
+              知晓
+            </Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAnalysis.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAnalysis.tsx
new file mode 100644
index 0000000..36e65e7
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherAnalysis.tsx
@@ -0,0 +1,227 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { WeatherStatistics, WeatherData } from './weatherDataReducer';
+
+interface WeatherAnalysisProps {
+  statistics: WeatherStatistics | null;
+  weatherData: WeatherData[];
+}
+
+export default function WeatherAnalysis({ statistics, weatherData }: WeatherAnalysisProps) {
+  if (!statistics) {
+    return (
+      <Card className="p-8 text-center">
+        <div className="text-muted-foreground">
+          <p>暂无统计数据</p>
+          <p className="text-sm mt-1">请等待数据加载完成</p>
+        </div>
+      </Card>
+    );
+  }
+
+  const getTemperatureLevel = (temp: number) => {
+    if (temp < 0) return { label: '严寒', color: 'text-blue-700' };
+    if (temp < 10) return { label: '寒冷', color: 'text-blue-600' };
+    if (temp < 20) return { label: '凉爽', color: 'text-green-600' };
+    if (temp < 30) return { label: '温暖', color: 'text-orange-500' };
+    return { label: '炎热', color: 'text-red-600' };
+  };
+
+  const getRainfallLevel = (rainfall: number) => {
+    if (rainfall === 0) return { label: '无雨', color: 'text-gray-500' };
+    if (rainfall < 10) return { label: '小雨', color: 'text-blue-400' };
+    if (rainfall < 25) return { label: '中雨', color: 'text-blue-500' };
+    if (rainfall < 50) return { label: '大雨', color: 'text-blue-600' };
+    return { label: '暴雨', color: 'text-blue-700' };
+  };
+
+  const getWindLevel = (speed: number) => {
+    if (speed < 1.6) return { label: '软风', color: 'text-green-500' };
+    if (speed < 3.4) return { label: '轻风', color: 'text-green-600' };
+    if (speed < 5.5) return { label: '微风', color: 'text-yellow-600' };
+    if (speed < 8.0) return { label: '和风', color: 'text-orange-500' };
+    if (speed < 10.8) return { label: '清风', color: 'text-orange-600' };
+    return { label: '强风', color: 'text-red-600' };
+  };
+
+  const avgTemp = statistics.temperature.avg;
+  const avgHumidity = statistics.other.avgHumidity;
+  const totalRainfall = statistics.precipitation.total;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {/* 温度统计 */}
+        <Card className="p-6">
+          <h3 className="mb-4">温度统计</h3>
+          <div className="space-y-3 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">最高温度:</span>
+              <span className="text-red-600 font-medium">{statistics.temperature.max}°C</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">最低温度:</span>
+              <span className="text-blue-600 font-medium">{statistics.temperature.min}°C</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">平均温度:</span>
+              <span className="font-medium">{statistics.temperature.avg}°C</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">温差:</span>
+              <span className="font-medium">{statistics.temperature.range}°C</span>
+            </div>
+            <div className="flex justify-between items-center pt-2 border-t">
+              <span className="text-muted-foreground">温度等级:</span>
+              <Badge variant="outline" className={getTemperatureLevel(avgTemp).color}>
+                {getTemperatureLevel(avgTemp).label}
+              </Badge>
+            </div>
+          </div>
+        </Card>
+
+        {/* 降水统计 */}
+        <Card className="p-6">
+          <h3 className="mb-4">降水统计</h3>
+          <div className="space-y-3 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">累计降雨:</span>
+              <span className="text-blue-600 font-medium">{statistics.precipitation.total} mm</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">最大降雨:</span>
+              <span className="font-medium">{statistics.precipitation.maxHourly} mm/3h</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">降雨时段:</span>
+              <span className="font-medium">{statistics.precipitation.timeRange}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">降雨天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.rainfall > 0).length} 天</span>
+            </div>
+            <div className="flex justify-between items-center pt-2 border-t">
+              <span className="text-muted-foreground">降雨强度:</span>
+              <Badge variant="outline" className={getRainfallLevel(totalRainfall).color}>
+                {getRainfallLevel(totalRainfall).label}
+              </Badge>
+            </div>
+          </div>
+        </Card>
+
+        {/* 风力统计 */}
+        <Card className="p-6">
+          <h3 className="mb-4">风力统计</h3>
+          <div className="space-y-3 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">最大风速:</span>
+              <span className="text-cyan-600 font-medium">{statistics.wind.maxSpeed} m/s</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">平均风速:</span>
+              <span className="font-medium">{statistics.wind.avgSpeed} m/s</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">风力等级:</span>
+              <span className="font-medium">{statistics.wind.level}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">主导风向:</span>
+              <span className="font-medium">{statistics.wind.direction}</span>
+            </div>
+            <div className="flex justify-between items-center pt-2 border-t">
+              <span className="text-muted-foreground">风力状态:</span>
+              <Badge variant="outline" className={getWindLevel(statistics.wind.avgSpeed).color}>
+                {getWindLevel(statistics.wind.avgSpeed).label}
+              </Badge>
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* 综合气象条件评价 */}
+      <Card className="p-6">
+        <h3 className="mb-4">气象条件综合评价</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="p-4 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg">
+            <h4 className="text-green-900 dark:text-green-100 mb-2 font-medium">有利条件</h4>
+            <ul className="text-sm text-green-800 dark:text-green-200 space-y-1">
+              <li>• 温度适宜，{avgTemp >= 15 && avgTemp <= 25 ? '利于作物生长' : '温度条件一般'}</li>
+              <li>• {statistics.other.totalSunlight > 1000 ? '光照充足，光合作用强' : '光照条件适中'}</li>
+              <li>• {totalRainfall > 0 && totalRainfall < 50 ? '适量降雨，补充土壤水分' : totalRainfall === 0 ? '天气干燥，需要灌溉' : '降雨较多，注意排水'}</li>
+              <li>• {avgHumidity >= 40 && avgHumidity <= 70 ? '湿度适中，有利于作物发育' : '湿度条件需要关注'}</li>
+            </ul>
+          </div>
+          <div className="p-4 bg-orange-50 dark:bg-orange-950 border border-orange-200 dark:border-orange-800 rounded-lg">
+            <h4 className="text-orange-900 dark:text-orange-100 mb-2 font-medium">注意事项</h4>
+            <ul className="text-sm text-orange-800 dark:text-orange-200 space-y-1">
+              <li>• {statistics.temperature.range > 15 ? '昼夜温差较大，注意保温措施' : '温差适中，作物适应性好'}</li>
+              <li>• {statistics.wind.maxSpeed > 5 ? '风力较大，加固农业设施' : '风力条件良好'}</li>
+              <li>• {statistics.other.avgPressure < 1000 ? '气压偏低，关注天气变化' : '气压稳定，天气状况良好'}</li>
+              <li>• 密切关注未来天气变化趋势</li>
+            </ul>
+          </div>
+        </div>
+      </Card>
+
+      {/* 农业生产建议 */}
+      <Card className="p-6">
+        <h3 className="mb-4">农业生产建议</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <h4 className="text-blue-900 dark:text-blue-100 mb-2 font-medium">播种建议</h4>
+            <p className="text-sm text-blue-800 dark:text-blue-200">
+              {avgTemp >= 15 && avgTemp <= 25 && totalRainfall < 30 ?
+                '当前气象条件适宜播种，建议抓住有利时机进行播种作业' :
+                '气象条件一般，建议等待更适宜的天气条件'
+              }
+            </p>
+          </div>
+
+          <div className="p-4 bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 rounded-lg">
+            <h4 className="text-green-900 dark:text-green-100 mb-2 font-medium">施肥建议</h4>
+            <p className="text-sm text-green-800 dark:text-green-200">
+              {avgHumidity >= 50 && avgHumidity <= 70 ?
+                '湿度条件适宜，有利于肥料吸收和利用' :
+                '湿度条件需要调节，建议结合灌溉进行施肥'
+              }
+            </p>
+          </div>
+
+          <div className="p-4 bg-purple-50 dark:bg-purple-950 border border-purple-200 dark:border-purple-800 rounded-lg">
+            <h4 className="text-purple-900 dark:text-purple-100 mb-2 font-medium">病虫害防治</h4>
+            <p className="text-sm text-purple-800 dark:text-purple-200">
+              {statistics.wind.avgSpeed < 3 ?
+                '风速较小，有利于喷药作业，建议进行病虫害防治' :
+                '风力较大，不适合喷药作业，建议等待风力减小'
+              }
+            </p>
+          </div>
+        </div>
+
+        {/* 气象风险等级 */}
+        <div className="mt-4 p-4 bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg">
+          <h4 className="text-gray-900 dark:text-gray-100 mb-2 font-medium">气象风险等级</h4>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">综合风险:</span>
+              <Badge
+                variant={statistics.wind.maxSpeed > 8 || statistics.precipitation.total > 50 ? 'destructive' :
+                       statistics.wind.maxSpeed > 5 || statistics.precipitation.total > 25 ? 'default' : 'secondary'}
+                className="font-light"
+              >
+                {statistics.wind.maxSpeed > 8 || statistics.precipitation.total > 50 ? '高风险' :
+                 statistics.wind.maxSpeed > 5 || statistics.precipitation.total > 25 ? '中等风险' : '低风险'}
+              </Badge>
+            </div>
+            <div className="text-sm text-muted-foreground">
+              建议密切关注天气变化，做好防范措施
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherCharts.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherCharts.tsx
new file mode 100644
index 0000000..e2e979a
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherCharts.tsx
@@ -0,0 +1,227 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from 'recharts';
+import { WeatherData } from './weatherDataReducer';
+
+interface WeatherChartsProps {
+  weatherData: WeatherData[];
+  timeRange: '24h' | '7d' | '30d';
+}
+
+export default function WeatherCharts({ weatherData, timeRange }: WeatherChartsProps) {
+  // 根据时间范围调整图表高度
+  const chartHeight = timeRange === '24h' ? 280 : 220;
+
+  return (
+    <div className="space-y-4">
+      {/* 温度变化曲线 */}
+      <Card className="p-6">
+        <h3 className="mb-4">温度变化曲线</h3>
+        <ResponsiveContainer width="100%" height={chartHeight}>
+          <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+            <XAxis
+              dataKey="time"
+              tick={{ fontSize: 12, fill: '#6b7280' }}
+              label={{
+                value: timeRange === '24h' ? '时间' : '日期',
+                position: 'insideBottom',
+                offset: -5,
+                style: { fontSize: 12, fill: '#6b7280' }
+              }}
+            />
+            <YAxis
+              tick={{ fontSize: 12, fill: '#6b7280' }}
+              label={{
+                value: '温度 (°C)',
+                angle: -90,
+                position: 'insideLeft',
+                style: { fontSize: 12, fill: '#6b7280' }
+              }}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#fff',
+                border: '1px solid #e5e7eb',
+                borderRadius: '6px'
+              }}
+              formatter={(value: number) => [`${value}°C`, '温度']}
+            />
+            <Line
+              type="monotone"
+              dataKey="temperature"
+              stroke="#dc2626"
+              strokeWidth={2}
+              dot={{ fill: '#dc2626', r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </Card>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        {/* 湿度变化曲线 */}
+        <Card className="p-6">
+          <h3 className="mb-4">湿度变化曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                label={{
+                  value: '湿度 (%)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' }
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#fff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value}%`, '湿度']}
+              />
+              <Line
+                type="monotone"
+                dataKey="humidity"
+                stroke="#2563eb"
+                strokeWidth={2}
+                dot={{ fill: '#2563eb', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+
+        {/* 风速变化曲线 */}
+        <Card className="p-6">
+          <h3 className="mb-4">风速变化曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                label={{
+                  value: '风速 (m/s)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' }
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#fff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value} m/s`, '风速']}
+              />
+              <Line
+                type="monotone"
+                dataKey="windSpeed"
+                stroke="#06b6d4"
+                strokeWidth={2}
+                dot={{ fill: '#06b6d4', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+
+        {/* 降雨量统计 */}
+        <Card className="p-6">
+          <h3 className="mb-4">降雨量统计</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <BarChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                label={{
+                  value: '降雨量 (mm)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' }
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#fff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value} mm`, '降雨量']}
+              />
+              <Bar
+                dataKey="rainfall"
+                fill="#6366f1"
+                radius={[4, 4, 0, 0]}
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </Card>
+
+        {/* 光照强度曲线 */}
+        <Card className="p-6">
+          <h3 className="mb-4">光照强度曲线</h3>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={weatherData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
+              <XAxis
+                dataKey="time"
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+              />
+              <YAxis
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                label={{
+                  value: '光照 (W/m²)',
+                  angle: -90,
+                  position: 'insideLeft',
+                  style: { fontSize: 12, fill: '#6b7280' }
+                }}
+              />
+              <Tooltip
+                contentStyle={{
+                  backgroundColor: '#fff',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '6px'
+                }}
+                formatter={(value: number) => [`${value} W/m²`, '光照强度']}
+              />
+              <Line
+                type="monotone"
+                dataKey="sunlight"
+                stroke="#eab308"
+                strokeWidth={2}
+                dot={{ fill: '#eab308', r: 3 }}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Card>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherContent.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherContent.tsx
new file mode 100644
index 0000000..1439599
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherContent.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { RefreshCw } from 'lucide-react';
+import { WeatherDataState, WeatherDataAction } from './weatherDataReducer';
+import WeatherAlerts from './WeatherAlerts';
+import RealtimeWeatherCards from './RealtimeWeatherCards';
+import ControlPanel from './ControlPanel';
+import WeatherCharts from './WeatherCharts';
+import WeatherForecast from './WeatherForecast';
+import WeatherHistory from './WeatherHistory';
+import WeatherAnalysis from './WeatherAnalysis';
+import UsageGuide from './UsageGuide';
+
+interface WeatherContentProps {
+  state: WeatherDataState;
+  dispatch: React.Dispatch<WeatherDataAction>;
+}
+
+export default function WeatherContent({ state, dispatch }: WeatherContentProps) {
+  const handleRefreshData = async () => {
+    if (!state.weatherStation.enabled) {
+      return;
+    }
+
+    dispatch({ type: 'SET_REFRESHING', payload: true });
+
+    try {
+      // 模拟API调用
+      await new Promise(resolve => setTimeout(resolve, 1500));
+
+      // 生成新的测试数据
+      const newData = state.weatherData.map(d => ({
+        ...d,
+        temperature: d.temperature + (Math.random() - 0.5) * 2,
+        humidity: Math.max(20, Math.min(95, d.humidity + (Math.random() - 0.5) * 5)),
+        windSpeed: Math.max(0, d.windSpeed + (Math.random() - 0.5) * 1),
+        rainfall: Math.max(0, d.rainfall + Math.random() * 2),
+        sunlight: Math.max(0, d.sunlight + (Math.random() - 0.5) * 50),
+        pressure: d.pressure + (Math.random() - 0.5) * 2,
+      }));
+
+      dispatch({ type: 'UPDATE_WEATHER_DATA', payload: newData });
+      dispatch({ type: 'SET_LAST_UPDATE_TIME', payload: new Date().toLocaleString('zh-CN') });
+    } catch (error) {
+      console.error('Failed to refresh weather data:', error);
+    } finally {
+      dispatch({ type: 'SET_REFRESHING', payload: false });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 操作按钮区域 */}
+      <div className="flex items-center justify-between">
+        <div>
+        <h2 className="text-xl text-green-800 dark:text-green-200">气象监测</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          实时气象数据、历史数据分析与灾害天气预警
+        </p>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={handleRefreshData}
+            disabled={state.isRefreshing}
+          >
+            <RefreshCw className={`w-4 h-4 mr-2 ${state.isRefreshing ? 'animate-spin' : ''}`} />
+            {state.isRefreshing ? '刷新中...' : '刷新数据'}
+          </Button>
+        </div>
+      </div>
+
+      {/* 天气预警 */}
+      <WeatherAlerts state={state} dispatch={dispatch} />
+
+      {/* 实时气象数据卡片 */}
+      <RealtimeWeatherCards weatherData={state.weatherData} />
+
+      {/* 控制面板 */}
+      <ControlPanel state={state} dispatch={dispatch} />
+
+      {/* 主要内容区域 */}
+      <Tabs value={state.activeTab} onValueChange={(value) => dispatch({ type: 'SET_ACTIVE_TAB', payload: value })}>
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="charts">数据曲线</TabsTrigger>
+          <TabsTrigger value="forecast">天气预报</TabsTrigger>
+          <TabsTrigger value="history">历史数据</TabsTrigger>
+          <TabsTrigger value="analysis">数据分析</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="charts" className="space-y-4">
+          <WeatherCharts
+            weatherData={state.weatherData}
+            timeRange={state.filters.timeRange}
+          />
+        </TabsContent>
+
+        <TabsContent value="forecast" className="space-y-4">
+          <WeatherForecast
+            weatherForecast={state.weatherForecast}
+          />
+        </TabsContent>
+
+        <TabsContent value="history" className="space-y-4">
+          <WeatherHistory
+            weatherData={state.weatherData}
+            lastUpdateTime={state.lastUpdateTime}
+          />
+        </TabsContent>
+
+        <TabsContent value="analysis" className="space-y-4">
+          <WeatherAnalysis
+            statistics={state.statistics}
+            weatherData={state.weatherData}
+          />
+        </TabsContent>
+      </Tabs>
+
+      {/* 使用说明 */}
+      <UsageGuide />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherForecast.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherForecast.tsx
new file mode 100644
index 0000000..2648dbb
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherForecast.tsx
@@ -0,0 +1,160 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { WeatherForecast } from './weatherDataReducer';
+import {
+  Sun,
+  Cloud,
+  CloudRain,
+  Wind,
+} from 'lucide-react';
+
+interface WeatherForecastProps {
+  weatherForecast: WeatherForecast[];
+}
+
+export default function WeatherForecast({ weatherForecast }: WeatherForecastProps) {
+  const getWeatherIcon = (icon: string) => {
+    switch (icon) {
+      case 'sun':
+        return <Sun className="w-8 h-8" />;
+      case 'cloud':
+        return <Cloud className="w-8 h-8" />;
+      case 'rain':
+        return <CloudRain className="w-8 h-8" />;
+      case 'wind':
+        return <Wind className="w-8 h-8" />;
+      default:
+        return <Cloud className="w-8 h-8" />;
+    }
+  };
+
+  const getIconColor = (weather: string) => {
+    switch (weather) {
+      case '晴':
+        return 'text-yellow-500';
+      case '多云':
+        return 'text-gray-500';
+      case '阴':
+        return 'text-gray-600';
+      case '小雨':
+      case '中雨':
+      case '大雨':
+      case '暴雨':
+        return 'text-blue-500';
+      case '大风':
+        return 'text-cyan-500';
+      default:
+        return 'text-gray-500';
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 7天天气预报卡片 */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
+        {weatherForecast.map((forecast, index) => (
+          <Card
+            key={index}
+            className="p-4 text-center hover:bg-muted/50 transition-colors cursor-pointer"
+          >
+            <p className="text-sm font-medium mb-2">{forecast.day}</p>
+            <div className={`flex justify-center mb-2 ${getIconColor(forecast.weather)}`}>
+              {getWeatherIcon(forecast.icon)}
+            </div>
+            <p className="text-xs text-muted-foreground mb-1">{forecast.weather}</p>
+            <p className="text-sm font-medium">{forecast.tempRange}</p>
+            {forecast.description && (
+              <p className="text-xs text-muted-foreground mt-2 line-clamp-2">
+                {forecast.description}
+              </p>
+            )}
+          </Card>
+        ))}
+      </div>
+
+      {/* 趋势分析 */}
+      <Card className="p-6">
+        <h3 className="mb-4">未来7天趋势分析</h3>
+        <div className="space-y-4">
+          {/* 温度趋势图 */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div>
+              <h4 className="text-sm font-medium mb-3">温度变化趋势</h4>
+              <div className="relative h-32 border rounded-lg p-4 bg-gradient-to-b from-red-50 to-blue-50">
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold text-red-600">18°C</div>
+                    <div className="text-sm text-muted-foreground">平均温度</div>
+                    <div className="text-xs text-green-600 mt-1">↑ 3°C vs 昨日</div>
+                  </div>
+                </div>
+                {/* 简化的趋势线 */}
+                <svg className="absolute inset-0 w-full h-full" style={{ pointerEvents: 'none' }}>
+                  <polyline
+                    points="10,80 50,60 90,40 130,30 170,35 210,25 250,20"
+                    fill="none"
+                    stroke="#dc2626"
+                    strokeWidth="2"
+                    opacity="0.6"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <div>
+              <h4 className="text-sm font-medium mb-3">降水概率分析</h4>
+              <div className="space-y-2">
+                {[
+                  { day: '明天', probability: 20 },
+                  { day: '后天', probability: 80 },
+                  { day: '周四', probability: 10 },
+                  { day: '周五', probability: 30 },
+                ].map((item, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <span className="text-xs w-12">{item.day}</span>
+                    <div className="flex-1 h-4 bg-muted rounded-full overflow-hidden">
+                      <div
+                        className={`h-full ${
+                          item.probability > 60 ? 'bg-blue-500' :
+                          item.probability > 30 ? 'bg-blue-400' : 'bg-green-400'
+                        }`}
+                        style={{ width: `${item.probability}%` }}
+                      />
+                    </div>
+                    <span className="text-xs w-10 text-right">{item.probability}%</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* 综合天气分析 */}
+          <div className="p-4 bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg">
+            <h4 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3">天气综合分析</h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-800 dark:text-blue-200">
+              <div>
+                <p><strong>温度趋势：</strong>本周气温整体呈上升趋势，周末最高温度可达28°C</p>
+                <p><strong>降水情况：</strong>周三有明显降水，其他时间以晴好天气为主</p>
+              </div>
+              <div>
+                <p><strong>风力条件：</strong>周二风力较大，需注意防范</p>
+                <p><strong>农业建议：</strong>适宜进行田间作业，注意周三排水防涝</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 重要提醒 */}
+          <div className="p-4 bg-amber-50 dark:bg-amber-950 border border-amber-200 dark:border-amber-800 rounded-lg">
+            <h4 className="text-sm font-medium text-amber-900 dark:text-amber-100 mb-2">重要天气提醒</h4>
+            <ul className="text-sm text-amber-800 dark:text-amber-200 space-y-1">
+              <li>• 周二有大风天气，请加固农业设施</li>
+              <li>• 周三有降雨，注意提前做好排水准备</li>
+              <li>• 周末温度较高，注意作物防暑降温</li>
+            </ul>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherHistory.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherHistory.tsx
new file mode 100644
index 0000000..a777c47
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/WeatherHistory.tsx
@@ -0,0 +1,243 @@
+'use client';
+
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { WeatherData } from './weatherDataReducer';
+import { Download, Search, Calendar } from 'lucide-react';
+
+interface WeatherHistoryProps {
+  weatherData: WeatherData[];
+  lastUpdateTime: string;
+}
+
+export default function WeatherHistory({ weatherData, lastUpdateTime }: WeatherHistoryProps) {
+  const handleExportData = () => {
+    // 生成CSV数据
+    const headers = ['时间', '温度(°C)', '湿度(%)', '风速(m/s)', '降雨量(mm)', '光照(W/m²)', '气压(hPa)'];
+    const rows = weatherData.map(data => [
+      data.time,
+      data.temperature,
+      data.humidity,
+      data.windSpeed,
+      data.rainfall,
+      data.sunlight,
+      data.pressure,
+    ]);
+
+    const csvContent = [
+      headers.join(','),
+      ...rows.map(row => row.join(',')),
+    ].join('\n');
+
+    // 创建下载链接
+    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `气象数据_${new Date().toLocaleDateString()}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card className="p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold">历史气象数据查询</h3>
+          <div className="flex gap-2">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder="搜索时间点..."
+                className="pl-10 w-48"
+              />
+            </div>
+            <Button variant="outline" size="sm" onClick={handleExportData}>
+              <Download className="w-4 h-4 mr-2" />
+              导出数据
+            </Button>
+          </div>
+        </div>
+
+        {/* 数据概览 */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6 p-4 bg-muted rounded-lg">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">{weatherData.length}</div>
+            <div className="text-xs text-muted-foreground">数据点</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {Math.max(...weatherData.map(d => d.temperature))}°C
+            </div>
+            <div className="text-xs text-muted-foreground">最高温度</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-cyan-600">
+              {weatherData.reduce((sum, d) => sum + d.rainfall, 0)}mm
+            </div>
+            <div className="text-xs text-muted-foreground">总降雨量</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-purple-600">
+              {Math.round(weatherData.reduce((sum, d) => sum + d.windSpeed, 0) / weatherData.length)}m/s
+            </div>
+            <div className="text-xs text-muted-foreground">平均风速</div>
+          </div>
+        </div>
+
+        {/* 数据表格 */}
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-muted">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium">时间</th>
+                <th className="px-4 py-3 text-center text-xs font-medium">温度(°C)</th>
+                <th className="px-4 py-3 text-center text-xs font-medium">湿度(%)</th>
+                <th className="px-4 py-3 text-center text-xs font-medium">风速(m/s)</th>
+                <th className="px-4 py-3 text-center text-xs font-medium">降雨量(mm)</th>
+                <th className="px-4 py-3 text-center text-xs font-medium">光照(W/m²)</th>
+                <th className="px-4 py-3 text-center text-xs font-medium">气压(hPa)</th>
+              </tr>
+            </thead>
+            <tbody>
+              {weatherData.map((data, index) => (
+                <tr
+                  key={index}
+                  className="border-t hover:bg-muted/50 transition-colors"
+                >
+                  <td className="px-4 py-3 text-sm">
+                    <div className="flex items-center gap-2">
+                      <Calendar className="w-4 h-4 text-muted-foreground" />
+                      {data.time}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <Badge
+                      variant={data.temperature > 25 ? 'destructive' : data.temperature < 15 ? 'secondary' : 'outline'}
+                      className="font-light"
+                    >
+                      {data.temperature}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <Badge
+                      variant={data.humidity > 70 ? 'outline' : 'secondary'}
+                      className="font-light"
+                    >
+                      {data.humidity}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <Badge
+                      variant={data.windSpeed > 5 ? 'destructive' : 'outline'}
+                      className="font-light"
+                    >
+                      {data.windSpeed}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    {data.rainfall > 0 ? (
+                      <Badge variant="outline" className="font-light bg-blue-50 text-blue-700 border-blue-200">
+                        {data.rainfall}
+                      </Badge>
+                    ) : (
+                      <span className="text-muted-foreground">-</span>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <Badge
+                      variant={data.sunlight > 500 ? 'outline' : 'secondary'}
+                      className="font-light"
+                    >
+                      {data.sunlight}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-3 text-center text-sm">
+                    {data.pressure}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {weatherData.length === 0 && (
+          <div className="text-center py-8 text-muted-foreground">
+            <Calendar className="w-12 h-12 mx-auto mb-4 opacity-50" />
+            <p>暂无历史数据</p>
+            <p className="text-sm mt-1">请等待气象数据更新</p>
+          </div>
+        )}
+
+        {/* 数据更新信息 */}
+        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
+          <div className="flex items-center justify-between">
+            <span>数据来源：{weatherData.length > 0 ? '自动气象站' : '暂无数据'}</span>
+            <span>最后更新：{lastUpdateTime || '未更新'}</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* 数据统计卡片 */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card className="p-4">
+          <h4 className="font-medium mb-3">温度分布</h4>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">高温天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.temperature > 30).length} 天</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">低温天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.temperature < 10).length} 天</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">适宜天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.temperature >= 15 && d.temperature <= 25).length} 天</span>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <h4 className="font-medium mb-3">降水统计</h4>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">降雨天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.rainfall > 0).length} 天</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">最大降雨:</span>
+              <span className="font-medium">{Math.max(...weatherData.map(d => d.rainfall))} mm</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">降雨强度:</span>
+              <span className="font-medium">小雨</span>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-4">
+          <h4 className="font-medium mb-3">风力条件</h4>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">大风天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.windSpeed > 5).length} 天</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">静风天数:</span>
+              <span className="font-medium">{weatherData.filter(d => d.windSpeed < 1).length} 天</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-muted-foreground">主导风向:</span>
+              <span className="font-medium">东南风</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/components/weatherDataReducer.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/components/weatherDataReducer.tsx
new file mode 100644
index 0000000..07b395c
--- /dev/null
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/components/weatherDataReducer.tsx
@@ -0,0 +1,479 @@
+'use client';
+
+import { toast } from 'sonner';
+
+// 气象数据接口
+export interface WeatherData {
+  time: string;
+  temperature: number;
+  humidity: number;
+  windSpeed: number;
+  rainfall: number;
+  sunlight: number;
+  pressure: number;
+}
+
+// 天气预警接口
+export interface WeatherAlert {
+  id: string;
+  type: '低温冻害' | '大风' | '暴雨' | '高温';
+  level: '预警' | '警报' | '紧急';
+  message: string;
+  time: string;
+  affectedFields: string[];
+}
+
+// 天气预报接口
+export interface WeatherForecast {
+  day: string;
+  weather: string;
+  tempRange: string;
+  icon: string;
+  description?: string;
+}
+
+// 气象站配置接口
+export interface WeatherStationConfig {
+  enabled: boolean;
+  apiEndpoint: string;
+  apiKey: string;
+  latitude: number;
+  longitude: number;
+  stationName: string;
+  updateInterval: number; // 分钟
+}
+
+// 筛选条件接口
+export interface WeatherFilters {
+  selectedField: string;
+  timeRange: '24h' | '7d' | '30d';
+}
+
+// 统计分析结果接口
+export interface WeatherStatistics {
+  temperature: {
+    max: number;
+    min: number;
+    avg: number;
+    range: number;
+  };
+  precipitation: {
+    total: number;
+    maxHourly: number;
+    timeRange: string;
+    intensity: string;
+  };
+  wind: {
+    maxSpeed: number;
+    avgSpeed: number;
+    level: string;
+    direction: string;
+  };
+  other: {
+    avgHumidity: number;
+    totalSunlight: number;
+    avgPressure: number;
+  };
+}
+
+// 状态接口
+export interface WeatherDataState {
+  weatherData: WeatherData[];
+  weatherAlerts: WeatherAlert[];
+  weatherForecast: WeatherForecast[];
+  weatherStation: WeatherStationConfig;
+  filters: WeatherFilters;
+  statistics: WeatherStatistics | null;
+  activeTab: string;
+  acknowledgedAlerts: string[];
+  isRefreshing: boolean;
+  lastUpdateTime: string;
+  loading: boolean;
+}
+
+// Action类型
+export type WeatherDataAction =
+  | { type: 'SET_WEATHER_DATA'; payload: WeatherData[] }
+  | { type: 'SET_WEATHER_ALERTS'; payload: WeatherAlert[] }
+  | { type: 'SET_WEATHER_FORECAST'; payload: WeatherForecast[] }
+  | { type: 'SET_WEATHER_STATION'; payload: WeatherStationConfig }
+  | { type: 'SET_FILTERS'; payload: Partial<WeatherFilters> }
+  | { type: 'SET_STATISTICS'; payload: WeatherStatistics | null }
+  | { type: 'SET_ACTIVE_TAB'; payload: string }
+  | { type: 'ACKNOWLEDGE_ALERT'; payload: string }
+  | { type: 'ACKNOWLEDGE_ALL_ALERTS' }
+  | { type: 'SET_REFRESHING'; payload: boolean }
+  | { type: 'SET_LAST_UPDATE_TIME'; payload: string }
+  | { type: 'SET_LOADING'; payload: boolean }
+  | { type: 'ADD_WEATHER_ALERT'; payload: WeatherAlert }
+  | { type: 'REMOVE_WEATHER_ALERT'; payload: string }
+  | { type: 'UPDATE_WEATHER_DATA'; payload: WeatherData[] }
+  | { type: 'LOAD_FROM_STORAGE' }
+  | { type: 'SAVE_TO_STORAGE' };
+
+// 初始状态
+export const initialWeatherDataState: WeatherDataState = {
+  weatherData: [],
+  weatherAlerts: [],
+  weatherForecast: [],
+  weatherStation: {
+    enabled: true,
+    apiEndpoint: 'https://api.weather.example.com/data',
+    apiKey: 'YOUR_API_KEY_HERE',
+    latitude: 39.9042,
+    longitude: 116.4074,
+    stationName: '智慧农场气象站',
+    updateInterval: 15,
+  },
+  filters: {
+    selectedField: 'field-1',
+    timeRange: '24h',
+  },
+  statistics: null,
+  activeTab: 'charts',
+  acknowledgedAlerts: [],
+  isRefreshing: false,
+  lastUpdateTime: '',
+  loading: false,
+};
+
+// 生成测试数据
+const generateTestData = (timeRange: '24h' | '7d' | '30d'): WeatherData[] => {
+  if (timeRange === '24h') {
+    // 24小时数据 - 每3小时一个数据点
+    return [
+      { time: '00:00', temperature: 12, humidity: 75, windSpeed: 2.5, rainfall: 0, sunlight: 0, pressure: 1013 },
+      { time: '03:00', temperature: 10, humidity: 80, windSpeed: 2.0, rainfall: 0, sunlight: 0, pressure: 1012 },
+      { time: '06:00', temperature: 9, humidity: 85, windSpeed: 1.8, rainfall: 0, sunlight: 50, pressure: 1012 },
+      { time: '09:00', temperature: 15, humidity: 70, windSpeed: 3.2, rainfall: 0, sunlight: 450, pressure: 1013 },
+      { time: '12:00', temperature: 22, humidity: 55, windSpeed: 4.5, rainfall: 0, sunlight: 850, pressure: 1014 },
+      { time: '15:00', temperature: 25, humidity: 48, windSpeed: 5.2, rainfall: 0, sunlight: 680, pressure: 1013 },
+      { time: '18:00', temperature: 20, humidity: 60, windSpeed: 3.8, rainfall: 2, sunlight: 150, pressure: 1012 },
+      { time: '21:00', temperature: 16, humidity: 68, windSpeed: 3.0, rainfall: 5, sunlight: 0, pressure: 1011 },
+    ];
+  } else if (timeRange === '7d') {
+    // 7天数据 - 每天一个数据点
+    return [
+      { time: '10-12', temperature: 18, humidity: 68, windSpeed: 3.2, rainfall: 2, sunlight: 520, pressure: 1012 },
+      { time: '10-13', temperature: 20, humidity: 62, windSpeed: 4.1, rainfall: 0, sunlight: 680, pressure: 1013 },
+      { time: '10-14', temperature: 22, humidity: 58, windSpeed: 3.8, rainfall: 5, sunlight: 720, pressure: 1014 },
+      { time: '10-15', temperature: 19, humidity: 72, windSpeed: 5.5, rainfall: 12, sunlight: 450, pressure: 1011 },
+      { time: '10-16', temperature: 16, humidity: 78, windSpeed: 4.8, rainfall: 8, sunlight: 380, pressure: 1010 },
+      { time: '10-17', temperature: 21, humidity: 65, windSpeed: 3.5, rainfall: 0, sunlight: 750, pressure: 1013 },
+      { time: '10-18', temperature: 23, humidity: 60, windSpeed: 3.0, rainfall: 0, sunlight: 800, pressure: 1015 },
+    ];
+  } else {
+    // 30天数据 - 每5天一个数据点
+    return [
+      { time: '09-19', temperature: 15, humidity: 70, windSpeed: 3.5, rainfall: 15, sunlight: 480, pressure: 1011 },
+      { time: '09-24', temperature: 17, humidity: 68, windSpeed: 4.0, rainfall: 8, sunlight: 550, pressure: 1012 },
+      { time: '09-29', temperature: 19, humidity: 65, windSpeed: 3.8, rainfall: 5, sunlight: 620, pressure: 1013 },
+      { time: '10-04', temperature: 21, humidity: 62, windSpeed: 4.2, rainfall: 3, sunlight: 680, pressure: 1014 },
+      { time: '10-09', temperature: 20, humidity: 66, windSpeed: 3.9, rainfall: 10, sunlight: 600, pressure: 1012 },
+      { time: '10-14', temperature: 22, humidity: 58, windSpeed: 3.5, rainfall: 2, sunlight: 720, pressure: 1015 },
+      { time: '10-18', temperature: 23, humidity: 60, windSpeed: 3.0, rainfall: 0, sunlight: 800, pressure: 1015 },
+    ];
+  }
+};
+
+// 生成测试预警数据
+const generateTestAlerts = (): WeatherAlert[] => [
+  {
+    id: 'alert-1',
+    type: '大风',
+    level: '预警',
+    message: '预计明日下午将出现6-7级大风，请做好防范措施',
+    time: '2024-10-15 14:30',
+    affectedFields: ['东区1号地', '西区2号地'],
+  },
+  {
+    id: 'alert-2',
+    type: '低温冻害',
+    level: '警报',
+    message: '预计后天凌晨最低温度将降至2℃，注意防冻',
+    time: '2024-10-15 10:20',
+    affectedFields: ['南区3号地'],
+  },
+];
+
+// 生成测试预报数据
+const generateTestForecast = (): WeatherForecast[] => [
+  { day: '今天', weather: '多云', tempRange: '12-25°C', icon: 'cloud', description: '多云天气，温度适宜' },
+  { day: '明天', weather: '大风', tempRange: '10-22°C', icon: 'wind', description: '风力较大，注意防范' },
+  { day: '后天', weather: '小雨', tempRange: '8-18°C', icon: 'rain', description: '有小雨，携带雨具' },
+  { day: '周四', weather: '晴', tempRange: '12-26°C', icon: 'sun', description: '晴朗天气，光照充足' },
+  { day: '周五', weather: '多云', tempRange: '14-27°C', icon: 'cloud', description: '多云，温度上升' },
+  { day: '周六', weather: '晴', tempRange: '15-28°C', icon: 'sun', description: '晴天，适宜户外活动' },
+  { day: '周日', weather: '多云', tempRange: '13-25°C', icon: 'cloud', description: '多云，天气稳定' },
+];
+
+// 计算统计数据
+const calculateStatistics = (data: WeatherData[]): WeatherStatistics => {
+  if (data.length === 0) {
+    return {
+      temperature: { max: 0, min: 0, avg: 0, range: 0 },
+      precipitation: { total: 0, maxHourly: 0, timeRange: '', intensity: '无' },
+      wind: { maxSpeed: 0, avgSpeed: 0, level: '无风', direction: '无' },
+      other: { avgHumidity: 0, totalSunlight: 0, avgPressure: 0 },
+    };
+  }
+
+  const temperatures = data.map(d => d.temperature);
+  const maxTemp = Math.max(...temperatures);
+  const minTemp = Math.min(...temperatures);
+  const avgTemp = temperatures.reduce((sum, t) => sum + t, 0) / temperatures.length;
+
+  const totalRainfall = data.reduce((sum, d) => sum + d.rainfall, 0);
+  const maxRainfall = Math.max(...data.map(d => d.rainfall));
+
+  const windSpeeds = data.map(d => d.windSpeed);
+  const maxWindSpeed = Math.max(...windSpeeds);
+  const avgWindSpeed = windSpeeds.reduce((sum, w) => sum + w, 0) / windSpeeds.length;
+
+  const avgHumidity = data.reduce((sum, d) => sum + d.humidity, 0) / data.length;
+  const totalSunlight = data.reduce((sum, d) => sum + d.sunlight, 0);
+  const avgPressure = data.reduce((sum, d) => sum + d.pressure, 0) / data.length;
+
+  return {
+    temperature: {
+      max: maxTemp,
+      min: minTemp,
+      avg: Math.round(avgTemp * 10) / 10,
+      range: maxTemp - minTemp,
+    },
+    precipitation: {
+      total: totalRainfall,
+      maxHourly: maxRainfall,
+      timeRange: '18:00-21:00',
+      intensity: totalRainfall > 50 ? '暴雨' : totalRainfall > 25 ? '大雨' : totalRainfall > 10 ? '中雨' : totalRainfall > 0 ? '小雨' : '无',
+    },
+    wind: {
+      maxSpeed: Math.round(maxWindSpeed * 10) / 10,
+      avgSpeed: Math.round(avgWindSpeed * 10) / 10,
+      level: maxWindSpeed > 10 ? '5-6级' : maxWindSpeed > 5 ? '3-4级' : '1-2级',
+      direction: '东南风',
+    },
+    other: {
+      avgHumidity: Math.round(avgHumidity),
+      totalSunlight,
+      avgPressure: Math.round(avgPressure),
+    },
+  };
+};
+
+// 检测灾害天气
+const checkWeatherAlerts = (data: WeatherData[]): WeatherAlert[] => {
+  const alerts: WeatherAlert[] = [];
+
+  data.forEach((d) => {
+    // 低温冻害预警（温度低于3°C）
+    if (d.temperature <= 3) {
+      alerts.push({
+        id: `alert-freeze-${d.time}`,
+        type: '低温冻害',
+        level: '警报',
+        message: `预计${d.time}温度将降至${d.temperature}°C，请做好防冻措施`,
+        time: new Date().toLocaleString('zh-CN'),
+        affectedFields: ['东区1号地', '西区2号地', '南区3号地'],
+      });
+    }
+
+    // 大风预警（风速大于10m/s）
+    if (d.windSpeed >= 10) {
+      alerts.push({
+        id: `alert-wind-${d.time}`,
+        type: '大风',
+        level: '预警',
+        message: `预计${d.time}风速将达到${d.windSpeed}m/s，请加固设施`,
+        time: new Date().toLocaleString('zh-CN'),
+        affectedFields: ['东区1号地', '西区2号地'],
+      });
+    }
+
+    // 暴雨预警（3小时降雨量大于50mm）
+    if (d.rainfall >= 50) {
+      alerts.push({
+        id: `alert-rain-${d.time}`,
+        type: '暴雨',
+        level: '紧急',
+        message: `预计${d.time}降雨量将达到${d.rainfall}mm，请注意排涝`,
+        time: new Date().toLocaleString('zh-CN'),
+        affectedFields: ['南区3号地'],
+      });
+    }
+
+    // 高温预警（温度高于35°C）
+    if (d.temperature >= 35) {
+      alerts.push({
+        id: `alert-heat-${d.time}`,
+        type: '高温',
+        level: '预警',
+        message: `预计${d.time}温度将达到${d.temperature}°C，注意防暑降温`,
+        time: new Date().toLocaleString('zh-CN'),
+        affectedFields: ['东区1号地'],
+      });
+    }
+  });
+
+  return alerts;
+};
+
+// Reducer函数
+export function weatherDataReducer(state: WeatherDataState, action: WeatherDataAction): WeatherDataState {
+  switch (action.type) {
+    case 'SET_WEATHER_DATA':
+      const statistics = calculateStatistics(action.payload);
+      const newAlerts = checkWeatherAlerts(action.payload);
+      return {
+        ...state,
+        weatherData: action.payload,
+        statistics,
+        weatherAlerts: [...state.weatherAlerts, ...newAlerts],
+      };
+
+    case 'SET_WEATHER_ALERTS':
+      return { ...state, weatherAlerts: action.payload };
+
+    case 'SET_WEATHER_FORECAST':
+      return { ...state, weatherForecast: action.payload };
+
+    case 'SET_WEATHER_STATION':
+      return { ...state, weatherStation: action.payload };
+
+    case 'SET_FILTERS':
+      return {
+        ...state,
+        filters: { ...state.filters, ...action.payload },
+        // 重新生成对应时间范围的数据
+        weatherData: generateTestData(action.payload.timeRange || state.filters.timeRange),
+      };
+
+    case 'SET_STATISTICS':
+      return { ...state, statistics: action.payload };
+
+    case 'SET_ACTIVE_TAB':
+      return { ...state, activeTab: action.payload };
+
+    case 'ACKNOWLEDGE_ALERT':
+      return {
+        ...state,
+        acknowledgedAlerts: [...state.acknowledgedAlerts, action.payload],
+      };
+
+    case 'ACKNOWLEDGE_ALL_ALERTS':
+      const allAlertIds = state.weatherAlerts.map(alert => alert.id);
+      return {
+        ...state,
+        acknowledgedAlerts: allAlertIds,
+      };
+
+    case 'SET_REFRESHING':
+      return { ...state, isRefreshing: action.payload };
+
+    case 'SET_LAST_UPDATE_TIME':
+      return { ...state, lastUpdateTime: action.payload };
+
+    case 'SET_LOADING':
+      return { ...state, loading: action.payload };
+
+    case 'ADD_WEATHER_ALERT':
+      return {
+        ...state,
+        weatherAlerts: [action.payload, ...state.weatherAlerts],
+      };
+
+    case 'REMOVE_WEATHER_ALERT':
+      return {
+        ...state,
+        weatherAlerts: state.weatherAlerts.filter(alert => alert.id !== action.payload),
+      };
+
+    case 'UPDATE_WEATHER_DATA':
+      const updatedStatistics = calculateStatistics(action.payload);
+      return {
+        ...state,
+        weatherData: action.payload,
+        statistics: updatedStatistics,
+      };
+
+    case 'LOAD_FROM_STORAGE':
+      try {
+        const stored = localStorage.getItem('weatherData');
+        if (stored) {
+          const parsedData = JSON.parse(stored);
+          return {
+            ...state,
+            ...parsedData,
+            weatherData: parsedData.weatherData || generateTestData('24h'),
+            weatherAlerts: parsedData.weatherAlerts || generateTestAlerts(),
+            weatherForecast: parsedData.weatherForecast || generateTestForecast(),
+          };
+        } else {
+          // 首次加载，初始化测试数据
+          const initialData = {
+            weatherData: generateTestData('24h'),
+            weatherAlerts: generateTestAlerts(),
+            weatherForecast: generateTestForecast(),
+            lastUpdateTime: new Date().toLocaleString('zh-CN'),
+          };
+          localStorage.setItem('weatherData', JSON.stringify(initialData));
+          return {
+            ...state,
+            ...initialData,
+          };
+        }
+      } catch (error) {
+        console.error('Failed to load weather data from storage:', error);
+        return state;
+      }
+
+    case 'SAVE_TO_STORAGE':
+      try {
+        const dataToSave = {
+          weatherStation: state.weatherStation,
+          filters: state.filters,
+          weatherData: state.weatherData,
+          weatherAlerts: state.weatherAlerts,
+          weatherForecast: state.weatherForecast,
+          lastUpdateTime: state.lastUpdateTime,
+        };
+        localStorage.setItem('weatherData', JSON.stringify(dataToSave));
+      } catch (error) {
+        console.error('Failed to save weather data to storage:', error);
+      }
+      return state;
+
+    default:
+      return state;
+  }
+}
+
+// 工具函数
+export const getAlertColor = (level: string) => {
+  switch (level) {
+    case '预警': return 'bg-yellow-500';
+    case '警报': return 'bg-orange-500';
+    case '紧急': return 'bg-red-500';
+    default: return 'bg-gray-500';
+  }
+};
+
+export const getWeatherIcon = (weather: string) => {
+  switch (weather) {
+    case '晴': return 'sun';
+    case '多云': return 'cloud';
+    case '阴': return 'cloud';
+    case '小雨': return 'rain';
+    case '中雨': return 'rain';
+    case '大雨': return 'rain';
+    case '暴雨': return 'rain';
+    case '大风': return 'wind';
+    default: return 'cloud';
+  }
+};
+
+export const formatTemperature = (temp: number) => `${temp}°C`;
+export const formatWindSpeed = (speed: number) => `${speed} m/s`;
+export const formatRainfall = (rainfall: number) => `${rainfall} mm`;
+export const formatSunlight = (sunlight: number) => `${sunlight} W/m²`;
+export const formatPressure = (pressure: number) => `${pressure} hPa`;
\ No newline at end of file
diff --git a/crop-x/src/app/(app)/land-information/monitoring/weather/page.tsx b/crop-x/src/app/(app)/land-information/monitoring/weather/page.tsx
index 7df0bf4..4a378ac 100644
--- a/crop-x/src/app/(app)/land-information/monitoring/weather/page.tsx
+++ b/crop-x/src/app/(app)/land-information/monitoring/weather/page.tsx
@@ -1,18 +1,27 @@
 'use client';
 
+import { useReducer, useEffect } from 'react';
 import { Card } from '@/components/ui/card';
+import { weatherDataReducer, initialWeatherDataState, WeatherDataState } from './components/weatherDataReducer';
+import WeatherContent from './components/WeatherContent';
 
 export default function WeatherPage() {
+  const [state, dispatch] = useReducer(weatherDataReducer, initialWeatherDataState);
+
+  useEffect(() => {
+    // 加载存储的数据
+    dispatch({ type: 'LOAD_FROM_STORAGE' });
+  }, []);
+
+  // 保存数据到localStorage
+  useEffect(() => {
+    dispatch({ type: 'SAVE_TO_STORAGE' });
+  }, [state.weatherData, state.weatherAlerts, state.filters]);
+
   return (
     <div className="space-y-6">
-      <Card className="p-6">
-        <h2 className="text-xl font-semibold">气象监测</h2>
-        <div className="p-3 bg-muted rounded-lg mt-3">
-          <p className="text-sm">
-            <strong>页面路径：</strong> /land-information/monitoring/weather
-          </p>
-        </div>
-      </Card>
+
+      <WeatherContent state={state} dispatch={dispatch} />
     </div>
   );
 }
\ No newline at end of file