158 lines
3.9 KiB
TypeScript
158 lines
3.9 KiB
TypeScript
'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">
|
||
<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>
|
||
|
||
{/* 地块选择器 */}
|
||
<FieldSelector fields={state.fields} />
|
||
|
||
{/* 图表分析区域 */}
|
||
<div className="space-y-4">
|
||
{/* 雷达图 */}
|
||
<ChartRadarAnalysis />
|
||
|
||
{/* 产量与有机质对比 */}
|
||
<YieldComparison />
|
||
|
||
{/* 养分对比 */}
|
||
<NutrientComparison />
|
||
|
||
{/* 地图对比 */}
|
||
<MapComparison />
|
||
</div>
|
||
</div>
|
||
);
|
||
} |