生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
635
src/FUEL_TANK_CAPACITY_FEATURE.md
Normal file
635
src/FUEL_TANK_CAPACITY_FEATURE.md
Normal file
@@ -0,0 +1,635 @@
|
||||
# ✅ 农机档案管理 - 油箱大小字段新增
|
||||
|
||||
## 🎯 更新内容
|
||||
|
||||
**在农机档案管理的技术参数中新增"油箱大小"字段，涵盖新增、编辑和查看功能**
|
||||
|
||||
---
|
||||
|
||||
## 📝 更新详情
|
||||
|
||||
### 1️⃣ 类型定义更新 ✅
|
||||
|
||||
**文件**: `/types/machinery.ts`
|
||||
|
||||
**新增字段**:
|
||||
```typescript
|
||||
export interface MachineryRecord {
|
||||
// ... 其他字段
|
||||
|
||||
// 技术参数
|
||||
enginePower?: string; // 发动机功率
|
||||
weight?: string; // 整机重量
|
||||
workingWidth?: string; // 工作幅宽
|
||||
maxSpeed?: string; // 最大行驶速度
|
||||
fuelTankCapacity?: string; // 油箱大小（升） ⭐ 新增
|
||||
|
||||
// ... 其他字段
|
||||
}
|
||||
```
|
||||
|
||||
**字段说明**:
|
||||
- **字段名**: `fuelTankCapacity`
|
||||
- **类型**: `string`（可选）
|
||||
- **用途**: 存储农机油箱容量信息
|
||||
- **格式**: 例如 "200 L"、"150升"
|
||||
|
||||
---
|
||||
|
||||
### 2️⃣ 新增功能更新 ✅
|
||||
|
||||
**文件**: `/components/machinery/MachineryForm.tsx`
|
||||
|
||||
**表单新增**:
|
||||
```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`
|
||||
|
||||
**详情页展示**:
|
||||
```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 │
|
||||
└──────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 更新清单
|
||||
|
||||
### 类型定义
|
||||
- [x] ✅ MachineryRecord 接口新增 fuelTankCapacity 字段
|
||||
|
||||
### 新增功能
|
||||
- [x] ✅ MachineryForm 表单新增油箱大小输入框
|
||||
- [x] ✅ 输入框带提示文本
|
||||
- [x] ✅ 数据正确保存
|
||||
|
||||
### 编辑功能
|
||||
- [x] ✅ 编辑时正确加载油箱大小
|
||||
- [x] ✅ 修改后正确保存
|
||||
- [x] ✅ 表单验证正常
|
||||
|
||||
### 查看功能
|
||||
- [x] ✅ MachineryDetails 详情页显示油箱大小
|
||||
- [x] ✅ 未填写时显示"-"
|
||||
- [x] ✅ 已填写时显示实际值
|
||||
|
||||
---
|
||||
|
||||
## 📍 字段位置
|
||||
|
||||
### 在类型定义中的位置
|
||||
|
||||
```typescript
|
||||
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 L（15%）
|
||||
油箱容量：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
|
||||
**状态**: ✅ **油箱大小字段已完成**
|
||||
|
||||
**核心改进**: 农机档案技术参数新增油箱大小字段，支持新增、编辑和查看功能！
|
||||
Reference in New Issue
Block a user