Files
smart-crop-ui/src/FUEL_TANK_CAPACITY_FEATURE.md

17 KiB
Raw Blame History

农机档案管理 - 油箱大小字段新增

🎯 更新内容

在农机档案管理的技术参数中新增"油箱大小"字段,涵盖新增、编辑和查看功能


📝 更新详情

1 类型定义更新

文件: /types/machinery.ts

新增字段:

export interface MachineryRecord {
  // ... 其他字段
  
  // 技术参数
  enginePower?: string;        // 发动机功率
  weight?: string;             // 整机重量
  workingWidth?: string;       // 工作幅宽
  maxSpeed?: string;           // 最大行驶速度
  fuelTankCapacity?: string;   // 油箱大小(升) ⭐ 新增
  
  // ... 其他字段
}

字段说明:

  • 字段名: fuelTankCapacity
  • 类型: string(可选)
  • 用途: 存储农机油箱容量信息
  • 格式: 例如 "200 L"、"150升"

2 新增功能更新

文件: /components/machinery/MachineryForm.tsx

表单新增:

<div>
  <Label htmlFor="fuelTankCapacity">油箱大小</Label>
  <Input
    id="fuelTankCapacity"
    value={formData.fuelTankCapacity || ''}
    onChange={(e) => setFormData({ ...formData, fuelTankCapacity: e.target.value })}
    placeholder="例如200 L"
  />
</div>

位置: 技术参数区域,最大行驶速度字段之后

表单布局:

技术参数
┌────────────────────┬────────────────────┐
│ 发动机功率         │ 整机重量           │
├────────────────────┼────────────────────┤
│ 工作幅宽           │ 最大行驶速度       │
├────────────────────┼────────────────────┤
│ 油箱大小 ⭐       │                    │
└────────────────────┴────────────────────┘

3 编辑功能更新

文件: /components/machinery/MachineryForm.tsx

编辑时加载:

  • 表单自动加载现有的 fuelTankCapacity
  • 用户可以修改油箱大小
  • 保存时更新到数据存储

编辑流程:

1. 点击"编辑"按钮
2. 表单加载现有数据(包括油箱大小)
3. 修改油箱大小字段
4. 点击"保存"
5. 数据更新成功

4 查看功能更新

文件: /components/machinery/MachineryDetails.tsx

详情页展示:

<div>
  <div className="text-sm text-muted-foreground">油箱大小</div>
  <div className="mt-1">{machinery.fuelTankCapacity || '-'}</div>
</div>

展示位置: 技术参数卡片,最大行驶速度之后

详情布局:

┌──────────────────────────────────────────┐
│  技术参数                                │
├──────────────────────────────────────────┤
│  发动机功率      整机重量                │
│  150 HP         3500 kg                  │
│                                          │
│  工作幅宽        最大行驶速度            │
│  2.5 m          40 km/h                  │
│                                          │
│  油箱大小 ⭐                             │
│  200 L                                   │
└──────────────────────────────────────────┘

🎨 界面展示

新增农机页面

┌────────────────────────────────────────────────────────┐
│  添加农机                                   [×]        │
├────────────────────────────────────────────────────────┤
│                                                        │
│  基本信息                                              │
│  ┌──────────────────┐  ┌──────────────────┐          │
│  │ 农机名称         │  │ 农机型号         │          │
│  └──────────────────┘  └──────────────────┘          │
│                                                        │
│  技术参数                                              │
│  ┌──────────────────┐  ┌──────────────────┐          │
│  │ 发动机功率       │  │ 整机重量         │          │
│  └──────────────────┘  └──────────────────┘          │
│  ┌──────────────────┐  ┌──────────────────┐          │
│  │ 工作幅宽         │  │ 最大行驶速度     │          │
│  └──────────────────┘  └──────────────────┘          │
│  ┌──────────────────┐                                 │
│  │ 油箱大小 ⭐      │                                 │
│  │ 例如200 L      │                                 │
│  └──────────────────┘                                 │
│                                                        │
│                           [取消]  [保存]              │
└────────────────────────────────────────────────────────┘

农机详情页面

┌────────────────────────────────────────────────────────┐
│  约翰迪尔8R拖拉机                      [编辑] [删除]   │
├────────────────────────────────────────────────────────┤
│                                                        │
│  📋 基本信息                                           │
│  ┌──────────────────────────────────────────────────┐ │
│  │  农机名称        农机型号       品牌              │ │
│  │  约翰迪尔8R      8R-2024       John Deere        │ │
│  └──────────────────────────────────────────────────┘ │
│                                                        │
│  🔧 技术参数                                           │
│  ┌──────────────────────────────────────────────────┐ │
│  │  发动机功率      整机重量                         │ │
│  │  150 HP         3500 kg                          │ │
│  │                                                  │ │
│  │  工作幅宽        最大行驶速度                     │ │
│  │  2.5 m          40 km/h                          │ │
│  │                                                  │ │
│  │  油箱大小 ⭐                                     │ │
│  │  200 L                                           │ │
│  └──────────────────────────────────────────────────┘ │
│                                                        │
└────────────────────────────────────────────────────────┘

💡 使用场景

场景1: 新增农机并填写油箱大小

步骤:
1. 进入农机档案管理
2. 点击"添加农机"按钮
3. 填写基本信息
4. 在技术参数中填写油箱大小200 L
5. 点击"保存"

结果:
✅ 农机创建成功
✅ 油箱大小已保存

场景2: 编辑现有农机的油箱大小

步骤:
1. 查看农机详情
2. 点击"编辑"按钮
3. 修改油箱大小200 L → 250 L
4. 点击"保存"

结果:
✅ 油箱大小更新成功
✅ 详情页显示新值250 L

场景3: 查看农机油箱大小

步骤:
1. 进入农机档案管理
2. 点击农机名称进入详情
3. 查看技术参数区域

显示:
油箱大小
200 L

📊 数据格式

推荐格式

正确示例:
✅ 200 L
✅ 150升
✅ 180 L
✅ 250 liters

说明:
- 数字 + 空格 + 单位
- 常用单位L、liters
- 支持中文单位:升

常见农机油箱容量参考

农机类型 典型油箱容量
大型拖拉机 200-300 L
中型拖拉机 100-200 L
小型拖拉机 50-100 L
联合收割机 150-250 L
播种机 80-150 L
植保机 60-120 L

🔄 完整操作流程

新增流程

┌──────────────────┐
│  进入农机档案     │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  点击"添加农机"  │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  填写基本信息     │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  填写技术参数     │
│  - 发动机功率    │
│  - 整机重量      │
│  - 工作幅宽      │
│  - 最大行驶速度  │
│  - 油箱大小 ⭐   │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  点击"保存"      │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  农机创建成功     │
│  (包含油箱信息) │
└──────────────────┘

编辑流程

┌──────────────────┐
│  查看农机详情     │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  点击"编辑"      │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  表单加载现有数据 │
│  (包含油箱大小) │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  修改油箱大小     │
│  200 L → 250 L   │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  点击"保存"      │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  更新成功         │
└──────────────────┘

查看流程

┌──────────────────┐
│  农机列表         │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  点击农机名称     │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  进入详情页       │
└────────┬─────────┘
         │
         ▼
┌──────────────────┐
│  查看技术参数     │
│                  │
│  油箱大小        │
│  200 L           │
└──────────────────┘

更新清单

类型定义

  • MachineryRecord 接口新增 fuelTankCapacity 字段

新增功能

  • MachineryForm 表单新增油箱大小输入框
  • 输入框带提示文本
  • 数据正确保存

编辑功能

  • 编辑时正确加载油箱大小
  • 修改后正确保存
  • 表单验证正常

查看功能

  • MachineryDetails 详情页显示油箱大小
  • 未填写时显示"-"
  • 已填写时显示实际值

📍 字段位置

在类型定义中的位置

export interface MachineryRecord {
  // 基本信息
  id: string;
  name: string;
  type: string;
  // ...
  
  // 技术参数
  enginePower?: string;        // 发动机功率
  weight?: string;             // 整机重量
  workingWidth?: string;       // 工作幅宽
  maxSpeed?: string;           // 最大行驶速度
  fuelTankCapacity?: string;   // 油箱大小 ⭐ 在这里
  
  // 分类与标签
  primaryCategory?: string;
  // ...
}

在表单中的位置

技术参数区域
├─ 第1行发动机功率 | 整机重量
├─ 第2行工作幅宽   | 最大行驶速度
└─ 第3行油箱大小 ⭐ | (空)

在详情页中的位置

技术参数卡片
├─ 发动机功率
├─ 整机重量
├─ 工作幅宽
├─ 最大行驶速度
└─ 油箱大小 ⭐

🎯 核心价值

1. 完善农机档案

技术参数更完整:
- ✅ 发动机功率
- ✅ 整机重量
- ✅ 工作幅宽
- ✅ 最大行驶速度
- ✅ 油箱大小 ⭐

支持更精细的管理决策

2. 支持燃料管理

应用场景:
- 计算续航里程
- 规划加油周期
- 分析油耗效率
- 优化作业安排

3. 数据完整性

建档时即可记录:
- 所有技术参数
- 包括油箱容量
- 便于后续查询
- 支持数据分析

📚 相关文件

文件 说明 修改内容
/types/machinery.ts 类型定义 新增 fuelTankCapacity 字段
/components/machinery/MachineryForm.tsx 表单组件 新增油箱大小输入框
/components/machinery/MachineryDetails.tsx 详情组件 新增油箱大小展示

💡 扩展建议

Phase 1: 单位标准化

添加单位选择器:

油箱大小
┌──────────┐  ┌─────┐
│ 200      │  │ L ▼ │
└──────────┘  └─────┘

单位选项:
- L
- 加仑
- liters

Phase 2: 油耗计算

基于油箱大小计算:

油箱容量200 L
平均油耗8 L/小时
续航时间25 小时
作业面积:约 187.5 亩(按 7.5 亩/小时)

Phase 3: 加油提醒

智能提醒:

当前油量30 L15%
油箱容量200 L
⚠️ 建议加油

剩余续航3.75 小时

📝 测试案例

测试1: 新增农机

输入:
- 农机名称约翰迪尔8R
- 油箱大小200 L

预期:
✅ 保存成功
✅ 详情页显示200 L

测试2: 编辑油箱大小

原值200 L
修改250 L

预期:
✅ 更新成功
✅ 详情页显示250 L

测试3: 未填写油箱大小

不填写油箱大小字段

预期:
✅ 保存成功
✅ 详情页显示:-

测试4: 各种格式

测试格式:
✅ 200 L
✅ 150升
✅ 180 L
✅ 250 liters

所有格式都能正常保存和显示

总结

更新范围

  1. 类型定义 - 新增 fuelTankCapacity 字段
  2. 新增功能 - 表单新增油箱大小输入
  3. 编辑功能 - 支持修改油箱大小
  4. 查看功能 - 详情页显示油箱大小

核心特点

  • 完整覆盖 - 新增、编辑、查看全部支持
  • 用户友好 - 带提示文本,易于理解
  • 格式灵活 - 支持多种单位格式
  • 向后兼容 - 可选字段,不影响现有数据

用户价值

  • 📝 完善档案 - 技术参数更完整
  • 🔍 便于查询 - 快速了解油箱信息
  • 📊 支持分析 - 可用于油耗计算和管理
  • 🎯 决策支持 - 辅助作业规划和调度

更新时间: 2025-10-17
版本: v1.0
状态: 油箱大小字段已完成

核心改进: 农机档案技术参数新增油箱大小字段,支持新增、编辑和查看功能!