生产管理系统前端 - 地块对比分析，地块适宜性评价开发

crop-x/src/app/(app)/land-information/comparison/chart/page.tsx

@@ -1,18 +1,158 @@
 'use client';
 
+import { useEffect } from 'react';
 import { Card } from '@/components/ui/card';
+import { toast } from 'sonner';
+import { FieldSelector } from './components/FieldSelector';
+import { ChartRadarAnalysis } from './components/RadarChart';
+import { YieldComparison } from './components/YieldComparison';
+import { NutrientComparison } from './components/NutrientComparison';
+import { MapComparison } from './components/MapComparison';
+import { useChartAnalysis, FieldData } from './components/chartAnalysisReducer';
+
+// 模拟地块数据
+const mockFieldsData: FieldData[] = [
+  {
+    id: 'field-1',
+    name: '东区1号地',
+    area: 50.5,
+    location: '东经120.15°, 北纬30.25°',
+    soilType: '壤土',
+    ph: 6.5,
+    organicMatter: 32,
+    nitrogen: 1.8,
+    phosphorus: 1.2,
+    potassium: 18,
+    soilDepth: 85,
+    slope: 3,
+    currentCrop: '水稻',
+    yield: 750,
+    suitabilityScore: 87,
+    suitabilityGrade: '高度适宜',
+    irrigation: '喷灌',
+    drainage: '良好',
+  },
+  {
+    id: 'field-2',
+    name: '西区2号地',
+    area: 45.2,
+    location: '东经120.12°, 北纬30.28°',
+    soilType: '粘土',
+    ph: 7.8,
+    organicMatter: 22,
+    nitrogen: 1.3,
+    phosphorus: 0.9,
+    potassium: 14,
+    soilDepth: 55,
+    slope: 5,
+    currentCrop: '玉米',
+    yield: 650,
+    suitabilityScore: 72,
+    suitabilityGrade: '一般适宜',
+    irrigation: '滴灌',
+    drainage: '中等',
+  },
+  {
+    id: 'field-3',
+    name: '南区3号地',
+    area: 38.8,
+    location: '东经120.18°, 北纬30.22°',
+    soilType: '砂土',
+    ph: 8.5,
+    organicMatter: 15,
+    nitrogen: 0.8,
+    phosphorus: 0.6,
+    potassium: 10,
+    soilDepth: 42,
+    slope: 8,
+    currentCrop: '小麦',
+    yield: 480,
+    suitabilityScore: 58,
+    suitabilityGrade: '不适宜',
+    irrigation: '漫灌',
+    drainage: '较差',
+  },
+  {
+    id: 'field-4',
+    name: '北区4号地',
+    area: 55.0,
+    location: '东经120.20°, 北纬30.30°',
+    soilType: '壤土',
+    ph: 6.8,
+    organicMatter: 28,
+    nitrogen: 1.6,
+    phosphorus: 1.0,
+    potassium: 16,
+    soilDepth: 75,
+    slope: 2,
+    currentCrop: '大豆',
+    yield: 380,
+    suitabilityScore: 82,
+    suitabilityGrade: '高度适宜',
+    irrigation: '喷灌',
+    drainage: '良好',
+  },
+];
 
 export default function ChartPage() {
+  const { setFields, state } = useChartAnalysis();
+
+  // 初始化数据
+  useEffect(() => {
+    // 直接使用模拟数据，确保数据可用
+    setFields(mockFieldsData);
+    localStorage.setItem('chart-analysis-fields', JSON.stringify(mockFieldsData));
+  }, [setFields]);
+
+  // 如果数据还没有加载，显示loading状态
+  if (state.fields.length === 0) {
+    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>
+        <Card className="p-6 bg-card">
+          <div className="text-center py-8">
+            <p>正在加载数据...</p>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   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/comparison/chart
+      <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>
+
+      {/* 地块选择器 */}
+      <FieldSelector fields={state.fields} />
+
+      {/* 图表分析区域 */}
+      <div className="space-y-4">
+        {/* 雷达图 */}
+        <ChartRadarAnalysis />
+
+        {/* 产量与有机质对比 */}
+        <YieldComparison />
+
+        {/* 养分对比 */}
+        <NutrientComparison />
+
+        {/* 地图对比 */}
+        <MapComparison />
+      </div>
     </div>
   );
 }