cavin/smart-crop-ui

Fork 0

Files

peng 28229ce795 生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00

9.0 KiB

Raw Blame History

地块分类统计显示问题修复

✅ 已修复问题

问题描述：

在分类管理中新增土壤类型或种植模式后
虽然数据成功保存到 localStorage
但在"地块分类与标签"页面的统计卡片中不显示新增的分类
只显示已有地块使用的分类类型

根本原因：

统计逻辑只遍历现有地块的分类（fields.reduce()）
没有从 localStorage 加载所有定义的分类类型
导致新增但未被使用的分类不会显示

🎯 修复方案

1️⃣ 添加分类数据状态

const [soilTypes, setSoilTypes] = useState<SoilType[]>([]);
const [plantingModes, setPlantingModes] = useState<PlantingMode[]>([]);

2️⃣ 加载所有定义的分类

const loadData = () => {
  // 加载地块数据
  const fieldsData = localStorage.getItem('smart_agriculture_fields');
  if (fieldsData) {
    setFields(JSON.parse(fieldsData));
  }

  // 加载土壤类型 ✅ 新增
  const soilTypesData = localStorage.getItem('field_soil_types');
  if (soilTypesData) {
    setSoilTypes(JSON.parse(soilTypesData));
  }

  // 加载种植模式 ✅ 新增
  const plantingModesData = localStorage.getItem('field_planting_modes');
  if (plantingModesData) {
    setPlantingModes(JSON.parse(plantingModesData));
  }
};

3️⃣ 改进统计逻辑

修复前 ❌ - 只统计已使用的类型：

const soilTypeStats = fields.reduce((acc, f) => {
  acc[f.soilType] = (acc[f.soilType] || 0) + 1;
  return acc;
}, {} as Record<string, number>);

修复后 ✅ - 显示所有定义的类型：

const soilTypeStats = soilTypes.map(type => ({
  key: type.key,
  name: type.name,
  color: type.color,
  count: fields.filter(f => f.soilType === type.key).length,
}));

4️⃣ 更新渲染逻辑

修复前 ❌：

{Object.entries(soilTypeStats).map(([type, count]) => (
  <Card key={type}>
    <div className="text-2xl">{count}</div>
    <div>{soilTypeLabels[type] || type}</div>
  </Card>
))}

修复后 ✅ - 显示颜色和完整信息：

{soilTypeStats.map((stat) => (
  <Card key={stat.key}>
    <div
      className="w-3 h-3 rounded-full mx-auto mb-2"
      style={{ backgroundColor: stat.color }}
    />
    <div className="text-2xl">{stat.count}</div>
    <div>{stat.name}</div>
  </Card>
))}

📊 修复效果对比

修复前 ❌

土壤类型统计
┌──────┬──────┬──────┐
│  5   │  3   │  2   │
│ 沙土 │ 壤土 │ 粘土 │
└──────┴──────┴──────┘

❌ 只显示有地块使用的类型
❌ 新增的"红土"不显示
❌ 没有颜色标识

修复后 ✅

土壤类型统计
┌──────┬──────┬──────┬──────┐
│  🔴  │  🟢  │  🟡  │  🔴  │
│  5   │  3   │  2   │  0   │ ← 新增的类型也显示了！
│ 沙土 │ 壤土 │ 粘土 │ 红土 │
└──────┴──────┴──────┴──────┘

✅ 显示所有定义的类型
✅ 新增类型立即显示（数量为0）
✅ 显示自定义颜色标识
✅ 使用动态数据，不依赖硬编码

🧪 测试步骤

测试 1：新增土壤类型

进入 地块信息管理 → 分类与标签
查看当前显示的土壤类型统计
点击右上角 分类管理 按钮
切换到"土壤类型"标签页
点击 新增类型
填写信息：
- 类型标识：red-soil
- 类型名称：红土
- 描述：富含铁元素的红色土壤
- 选择红色 #ef4444
点击保存
✅ 预期结果：
- 成功提示
- 关闭对话框后，统计卡片中立即显示新的"红土"卡片
- 显示数量为 0（因为还没有地块使用）
- 显示红色圆点标识

测试 2：使用新分类

进入 地块档案管理
新增一个地块，选择"红土"作为土壤类型
保存地块
返回 分类与标签 页面
✅ 预期结果：
- "红土"的数量从 0 变为 1

测试 3：编辑分类

在分类管理中编辑"红土"
修改名称为"红壤"
修改颜色为 #dc2626
保存
✅ 预期结果：
- 统计卡片中的名称更新为"红壤"
- 颜色圆点更新为新颜色

测试 4：删除分类

删除一个未使用的土壤类型
✅ 预期结果：
- 该类型从统计卡片中消失

测试 5：种植模式

新增种植模式"梯田" 🏔️
✅ 预期结果：
- 种植模式统计中立即显示
- 显示 emoji 和数量 0

🎨 新功能特性

1. 动态颜色显示

每个土壤类型显示其自定义颜色：

<div
  className="w-3 h-3 rounded-full mx-auto mb-2"
  style={{ backgroundColor: stat.color }}
/>

2. 完整显示

显示所有定义的分类，不只是已使用的：

已使用的：显示实际数量
未使用的：显示 0

3. 实时同步

所有操作立即反映在统计中：

✅ 新增分类 → 立即显示
✅ 编辑分类 → 立即更新
✅ 删除分类 → 立即移除
✅ 使用分类 → 数量增加

4. 友好提示

当没有任何分类时，显示引导信息：

暂无土壤类型，请前往分类管理添加
暂无种植模式，请前往分类管理添加

📝 修改的文件

`/components/field/FieldClassification.tsx`

新增类型定义：

interface SoilType {
  id: string;
  name: string;
  key: string;
  color: string;
}

interface PlantingMode {
  id: string;
  name: string;
  key: string;
  emoji: string;
}

新增状态：

const [soilTypes, setSoilTypes] = useState<SoilType[]>([]);
const [plantingModes, setPlantingModes] = useState<PlantingMode[]>([]);

增强 loadData 函数：

✅ 加载土壤类型数据
✅ 加载种植模式数据

改进统计逻辑：

✅ 基于所有定义的分类
✅ 包含使用数量统计
✅ 保留颜色和 emoji 信息

优化渲染：

✅ 显示颜色圆点
✅ 显示 emoji
✅ 动态名称
✅ 友好提示

移除内容：

❌ 删除硬编码的 soilTypeLabels
❌ 删除硬编码的 plantingModeLabels
❌ 删除硬编码的 plantingModeEmojis

🔄 数据流

用户新增分类
    ↓
保存到 localStorage
    ↓
触发 'fieldClassificationUpdated' 事件
    ↓
父组件监听事件
    ↓
执行 loadData()
    ↓
加载 field_soil_types ───→ setSoilTypes()
加载 field_planting_modes ─→ setPlantingModes()
    ↓
重新计算统计数据
    ↓
soilTypes.map(type => ({
  key: type.key,
  name: type.name,
  color: type.color,
  count: fields.filter(...).length ← 统计使用数量
}))
    ↓
渲染所有分类卡片（包括数量为0的）
    ↓
完成！用户看到新分类

💡 设计优势

1. 完整性

显示系统中定义的所有分类，而不只是被使用的分类

2. 一致性

与分类管理中的定义保持一致：

颜色相同
名称相同
Emoji 相同

3. 直观性

数量为 0 的分类也显示，清晰表明"已定义但未使用"
颜色和 emoji 让分类更容易识别

4. 灵活性

完全动态，无硬编码
支持任意数量的自定义分类
实时响应所有变更

🎯 使用场景

场景 1：新系统初始化

1. 管理员定义土壤类型：沙土、壤土、粘土
2. 统计立即显示这3种类型，数量都是 0
3. 开始录入地块时，可以看到所有可选类型

场景 2：扩展分类体系

1. 发现需要新的土壤类型"盐碱土"
2. 在分类管理中添加
3. 统计中立即显示，提醒可以使用这个新类型

场景 3：数据清理

1. 查看统计，发现某个类型数量为 0
2. 说明该分类从未使用
3. 可以考虑删除或保留备用

⚠️ 注意事项

数据一致性：土壤类型和种植模式的定义来自分类管理
实时同步：通过事件机制保证数据实时更新
性能优化：使用 map 而不是多次 reduce，更高效
用户友好：空状态显示引导信息

🚀 后续优化建议

排序功能：按数量、名称或创建时间排序
筛选功能：只显示已使用/未使用的分类
趋势显示：显示数量变化趋势
批量操作：批量修改地块的分类

修复状态: ✅ 完成
测试状态: ✅ 已验证
日期: 2025-10-18
版本: v1.2

🎉 总结

通过这次修复：

✅ 解决了新增分类不显示的问题
✅ 实现了完整的分类统计显示
✅ 增加了颜色和 emoji 视觉识别
✅ 移除了硬编码，实现完全动态化
✅ 保持了实时同步机制
✅ 提升了用户体验

现在您可以：

新增任意分类，立即看到效果
查看所有定义的分类及其使用情况
通过颜色和 emoji 快速识别分类
了解哪些分类已使用、哪些未使用

9.0 KiB Raw Blame History Unescape Escape