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

crop-x/temp_file.tsx

@@ -0,0 +1,415 @@
+/**
+ * 多因子综合评价组件
+ * 提供地块适宜性评价、权重配置、批量分析和作物推荐功能
+ */
+
+'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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger } from '@/components/ui/dialog';
+import { Progress } from '@/components/ui/progress';
+import { Slider } from '@/components/ui/slider';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Leaf,
+  TrendingUp,
+  Award,
+  AlertTriangle,
+  CheckCircle2,
+  Play,
+  Settings,
+  Download,
+  Eye,
+  Calculator,
+  Database,
+  RefreshCw,
+  Zap,
+  Target,
+  Droplet,
+  Cloud,
+  Sun,
+  ThermometerSun,
+  BookOpen,
+  Beaker,
+  Info,
+  BarChart3,
+  Filter
+} from 'lucide-react';
+import { toast } from 'sonner';
+
+import {
+  EvaluationFactor,
+  SuitabilityResult,
+  FactorWeight,
+  BatchProgress,
+  getGradeColor,
+  getScoreColor,
+  getSuitabilityLevelColor,
+  formatDate,
+  MOCK_FIELDS
+} from './multiFactorTypes';
+import {
+  MultiFactorService
+} from './multiFactorService';
+import {
+  matchCropsForField,
+  cropKnowledgeBase
+} from './cropKnowledgeBase';
+
+export function MultiFactorEvaluation() {
+  const [selectedField, setSelectedField] = useState('field-1');
+  const [showWeightConfig, setShowWeightConfig] = useState(false);
+  const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
+  const [batchProgress, setBatchProgress] = useState<BatchProgress>({
+    total: 0,
+    processed: 0,
+    highSuitability: 0,
+    mediumSuitability: 0,
+    lowSuitability: 0,
+    currentField: '',
+  });
+  const [isBatchRunning, setIsBatchRunning] = useState(false);
+    const [batchAnalysisResults, setBatchAnalysisResults] = useState<SuitabilityResult[]>([]);
+
+  // 评价因子权重配置
+  const [factorWeights, setFactorWeights] = useState<FactorWeight[]>([
+    { id: 'ph', name: 'pH值', weight: 20, unit: '' },
+    { id: 'organic', name: '有机质含量', weight: 25, unit: 'g/kg' },
+    { id: 'depth', name: '土层厚度', weight: 20, unit: 'cm' },
+    { id: 'nitrogen', name: '全氮', weight: 10, unit: 'g/kg' },
+    { id: 'phosphorus', name: '全磷', weight: 10, unit: 'g/kg' },
+    { id: 'potassium', name: '全钾', weight: 10, unit: 'g/kg' },
+    { id: 'drainage', name: '排水性', weight: 5, unit: '' },
+  ]);
+
+  // 模拟适宜性评价结果
+  const [evaluationResults, setEvaluationResults] = useState<SuitabilityResult[]>(
+    MultiFactorService.generateMockEvaluationData()
+  );
+
+  // 获取当前选中的地块结果
+  const currentResult =
+    evaluationResults.find(r => r.fieldId === selectedField) ||
+    batchAnalysisResults.find(r => r.fieldId === selectedField) ||
+    evaluationResults[0];
+
+  // 批量分析处理函数
+  const handleRunBatchAnalysis = async () => {
+    const validation = MultiFactorService.validateWeights(factorWeights);
+    if (!validation.isValid) {
+      toast.error(`权重总和必须为100%才能进行批量分析（当前：${validation.totalWeight}%）`);
+      return;
+    }
+
+    setIsBatchRunning(true);
+    setBatchProgress({
+      total: 68,
+      processed: 0,
+      highSuitability: 0,
+      mediumSuitability: 0,
+      lowSuitability: 0,
+      currentField: '',
+    });
+    setBatchAnalysisResults([]);
+
+    toast.success('开始批量分析，正在读取地块数据...');
+
+    try {
+      const results = await MultiFactorService.runBatchAnalysis(
+        factorWeights,
+        (progress) => {
+          setBatchProgress(progress);
+        }
+      );
+
+      setBatchAnalysisResults(results);
+      setIsBatchRunning(false);
+      toast.success(`批量分析完成！已为${results.length}个地块生成适宜性评价结果`);
+    } catch (error) {
+      setIsBatchRunning(false);
+      toast.error('批量分析失败');
+    }
+  };
+
+  const handleUpdateWeight = (id: string, newWeight: number) => {
+    setFactorWeights(prev =>
+      MultiFactorService.updateWeight(prev, id, newWeight)
+    );
+  };
+
+  const handleResetWeights = () => {
+    setFactorWeights(MultiFactorService.resetWeights());
+    toast.success('权重已恢复默认值');
+  };
+
+  const handleApplyPreset = (preset: 'grain' | 'economic' | 'default') => {
+    setFactorWeights(MultiFactorService.getWeightPreset(preset));
+    const presetName = preset === 'grain' ? '粮食作物' : preset === 'economic' ? '经济作物' : '默认';
+    toast.success(`已应用${presetName}权重方案`);
+  };
+
+  const totalWeight = factorWeights.reduce((sum, f) => sum + f.weight, 0);
+
+  // 执行地块适宜性评价
+  const handleEvaluateField = () => {
+    const validation = MultiFactorService.validateWeights(factorWeights);
+    if (!validation.isValid) {
+      toast.error(`权重总和必须为100%才能进行评价（当前：${validation.totalWeight}%）`);
+      return;
+    }
+
+    try {
+      const result = MultiFactorService.generateEvaluationResult(selectedField, factorWeights);
+      setEvaluationResults(prev =>
+        prev.map(r => r.fieldId === selectedField ? result : r)
+      );
+      toast.success('评价完成！已应用当前权重配置计算综合得分');
+    } catch (error) {
+      toast.error('评价失败');
+    }
+  };
+
+  const exportResults = () => {
+    const resultsToExport = batchAnalysisResults.length > 0 ? batchAnalysisResults : evaluationResults;
+    toast.success('正在导出评价结果...');
+    // 模拟导出功能
+    setTimeout(() => {
+      toast.success(`已导出${resultsToExport.length}个地块的评价结果`);
+    }, 2000);
+  };
+
+  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={() => setShowKnowledgeBase(true)}>
+            <BookOpen className="w-4 h-4 mr-2" />
+            作物知识库
+          </Button>
+          <Button variant="outline" onClick={() => setShowWeightConfig(true)}>
+            <Settings className="w-4 h-4 mr-2" />
+            权重配置
+          </Button>
+        </div>
+      </div>
+
+      {/* 多因子综合评价 */}
+      <div className="space-y-4">
+          <Card className="p-4 bg-card">
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <label className="text-xs text-muted-foreground mb-2 block">选择地块</label>
+                <Select value={selectedField} onValueChange={setSelectedField}>
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {evaluationResults.map((result) => (
+                      <SelectItem key={result.fieldId} value={result.fieldId}>
+                        {result.fieldName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex gap-2 items-end">
+                <Button
+                  className="bg-green-600 hover:bg-green-700"
+                  onClick={handleEvaluateField}
+                >
+                  <Play className="w-4 h-4 mr-2" />
+                  开始评价
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* 评价结果总览 */}
+          <div className="grid grid-cols-4 gap-4">
+            <Card className="p-6 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900">
+              <div className="text-center">
+                <Award className="w-12 h-12 text-green-600 dark:text-green-400 mx-auto mb-3" />
+                <p className="text-xs text-muted-foreground mb-2">综合评分</p>
+                <p
+                  className="text-4xl mb-2"
+                  style={{ color: getGradeColor(currentResult.grade) }}
+                >
+                  {currentResult.totalScore}
+                </p>
+                <Badge
+                  className="text-white font-light"
+                  style={{ backgroundColor: getGradeColor(currentResult.grade) }}
+                >
+                  {currentResult.grade}
+                </Badge>
+              </div>
+            </Card>
+
+            <Card className="p-6 bg-card">
+              <div className="text-center">
+                <CheckCircle2 className="w-12 h-12 text-blue-600 dark:text-blue-400 mx-auto mb-3" />
+                <p className="text-xs text-muted-foreground mb-2">优秀因子</p>
+                <p className="text-4xl text-blue-600 dark:text-blue-400 mb-2">
+                  {currentResult.factors.filter(f => f.score >= 80).length}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  / {currentResult.factors.length} 项
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-6 bg-card">
+              <div className="text-center">
+                <AlertTriangle className="w-12 h-12 text-yellow-600 dark:text-yellow-400 mx-auto mb-3" />
+                <p className="text-xs text-muted-foreground mb-2">待改善因子</p>
+                <p className="text-4xl text-yellow-600 dark:text-yellow-400 mb-2">
+                  {currentResult.factors.filter(f => f.score < 70).length}
+                </p>
+                <p className="text-xs text-muted-foreground">需要优化</p>
+              </div>
+            </Card>
+
+            <Card className="p-6 bg-card">
+              <div className="text-center">
+                <TrendingUp className="w-12 h-12 text-purple-600 dark:text-purple-400 mx-auto mb-3" />
+                <p className="text-xs text-muted-foreground mb-2">评价时间</p>
+                <p className="text-sm text-purple-600 dark:text-purple-400 mb-2">
+                  {formatDate(currentResult.timestamp)}
+                </p>
+                <p className="text-xs text-muted-foreground">最近更新</p>
+              </div>
+            </Card>
+          </div>
+
+          {/* 因子详细评分 */}
+          <Card className="p-6 bg-card">
+            <h3 className="mb-4">评价因子详细分析</h3>
+            <div className="space-y-4">
+              {currentResult.factors.map((factor) => (
+                <div key={factor.id} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <span className="text-sm font-medium">{factor.name}</span>
+                      <Badge variant="outline" className="text-xs font-light">
+                        权重: {factor.weight}%
+                      </Badge>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <span className="text-sm text-muted-foreground">
+                        实际值: {factor.value.toFixed(1)}{factor.unit}
+                      </span>
+                      <span className="text-sm text-muted-foreground">
+                        最佳范围: {factor.optimalRange[0]}-{factor.optimalRange[1]}{factor.unit}
+                      </span>
+                      <span
+                        className="text-sm font-medium"
+                        style={{ color: getScoreColor(factor.score) }}
+                      >
+                        {factor.score}分
+                      </span>
+                    </div>
+                  </div>
+                  <div className="relative">
+                    <Progress value={factor.score} className="h-2" />
+                    <div className="absolute top-0 left-0 h-2 w-full flex items-center">
+                      <div
+                        className="absolute h-3 w-1 bg-blue-500"
+                        style={{
+                          left: `${((factor.optimalRange[0] - 0) / (factor.optimalRange[1] * 1.5)) * 100}%`
+                        }}
+                      />
+                      <div
+                        className="absolute h-3 w-1 bg-blue-500"
+                        style={{
+                          left: `${((factor.optimalRange[1] - 0) / (factor.optimalRange[1] * 1.5)) * 100}%`
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </Card>
+
+          {/* 加权计算说明 */}
+          <Card className="p-6 bg-card">
+            <h3 className="mb-4">层次分析法(AHP)加权计算</h3>
+            <div className="space-y-4">
+              <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
+                <p className="text-sm text-blue-900 dark:text-blue-100 mb-2">计算公式：</p>
+                <code className="text-xs text-blue-800 dark:text-blue-200 block mb-2">
+                  总分 = Σ(因子得分 × 因子权重)
+                </code>
+                <p className="text-xs text-blue-800 dark:text-blue-200">
+                  = ({currentResult.factors.map((f, i) =>
+                    `${f.score} × ${f.weight}%${i < currentResult.factors.length - 1 ? ' + ' : ''}`
+                  ).join('')})
+                </p>
+                <p className="text-xs text-blue-800 dark:text-blue-200 mt-2">
+                  = {currentResult.totalScore}分
+                </p>
+              </div>
+
+              <div className="grid grid-cols-3 gap-4">
+                <div className="p-4 bg-green-50 dark:bg-green-950 rounded-lg">
+                  <h4 className="text-green-900 dark:text-green-100 mb-2">高度适宜 (≥80分)</h4>
+                  <ul className="text-sm text-green-800 dark:text-green-200 space-y-1">
+                    <li>• 土壤条件优秀</li>
+                    <li>• 适合多种作物</li>
+                    <li>• 预期产量高</li>
+                  </ul>
+                </div>
+                <div className="p-4 bg-yellow-50 dark:bg-yellow-950 rounded-lg">
+                  <h4 className="text-yellow-900 dark:text-yellow-100 mb-2">一般适宜 (60-79分)</h4>
+                  <ul className="text-sm text-yellow-800 dark:text-yellow-200 space-y-1">
+                    <li>• 部分因子需改善</li>
+                    <li>• 可种植耐性作物</li>
+                    <li>• 需适当改良</li>
+                  </ul>
+                </div>
+                <div className="p-4 bg-red-50 dark:bg-red-950 rounded-lg">
+                  <h4 className="text-red-900 dark:text-red-100 mb-2">不适宜 (&lt;60分)</h4>
+                  <ul className="text-sm text-red-800 dark:text-red-200 space-y-1">
+                    <li>• 土壤条件较差</li>
+                    <li>• 需大幅改良</li>
+                    <li>• 风险较高</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* 多因子综合评价功能说明 */}
+          <Card className="p-4 bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800">
+            <div className="flex items-start gap-2">
+              <Zap className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
+              <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>: 整合pH值、有机质含量、土层厚度、全氮、全磷、全钾、排水性等7项关键土壤指标</li>
+                  <li>• <strong>层次分析法(AHP)</strong>: 采用层次分析法构建加权评分体系，公式：总分 = Σ(因子得分 × 因子权重)</li>
+                  <li>• <strong>单因子评分</strong>: 根据实际值与最佳范围的接近程度计算各因子得分（0-100分），范围内得分85-100分</li>
+                  <li>• <strong>自定义权重</strong>: 支持手动调整各指标权重，提供粮食作物和经济作物两种预设方案</li>
+                  <li>• <strong>综合得分</strong>: 输出0-100分的适宜性评分，自动计算加权总分</li>
+                  <li>• <strong>三级分级</strong>: 高度适宜（≥80分）、一般适宜（60-79分）、不适宜（&lt;60分）</li>
+                  <li>• <strong>可视化展示</strong>: 提供进度条、颜色标识等多维度可视化，直观展示各因子评分与最佳范围对比</li>
+                  <li>• <strong>改善建议</strong>: 自动识别待改善因子，为土壤改良提供决策依据</li>
+                </ul>
+              </div>
+            </div>
+          </Card>
+            <Card className="p-4 bg-card">
+            <div className="flex items-center gap-4">