生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
418
src/ROUTE_PLANNING_FIELD_CHANGE.md
Normal file
418
src/ROUTE_PLANNING_FIELD_CHANGE.md
Normal file
@@ -0,0 +1,418 @@
|
||||
# ✅ 作业路线规划 - 地块二次修改功能
|
||||
|
||||
## 🎯 新增功能
|
||||
|
||||
**选中路线后，可以在规划地图区域重新选择地块**
|
||||
|
||||
---
|
||||
|
||||
## 📦 功能说明
|
||||
|
||||
### 功能概述
|
||||
|
||||
- ✅ 选中已有路线后，可以更换关联的地块
|
||||
- ✅ 更换地块后，边界自动重新加载
|
||||
- ✅ 路线名称自动更新为新地块名称
|
||||
- ✅ 保留障碍物和作业参数设置
|
||||
|
||||
---
|
||||
|
||||
## 🎨 界面展示
|
||||
|
||||
### 地块信息卡片 - 已关联地块时
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ 📍 关联地块 │
|
||||
├────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ✓ 当前: 东一地块 │
|
||||
│ 地块边界已加载 │
|
||||
│ │
|
||||
│ [更换地块 ▼] │
|
||||
│ ├─ 当前: 东一地块 (禁用) │
|
||||
│ ├─ 📍 西二地块 (80亩 · 西区) │
|
||||
│ ├─ 📍 南三地块 (35亩 · 南区) │
|
||||
│ └─ 📍 北四地块 (60亩 · 北区) │
|
||||
│ │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 地块信息卡片 - 未关联地块时
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ 📍 关联地块 │
|
||||
├────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ⚠️ 该路线未关联地块，请选择地块 │
|
||||
│ │
|
||||
│ [选择地块 ▼] │
|
||||
│ ├─ 请选择地块 │
|
||||
│ ├─ 📍 东一地块 (50亩 · 东区) │
|
||||
│ ├─ 📍 西二地块 (80亩 · 西区) │
|
||||
│ ├─ 📍 南三地块 (35亩 · 南区) │
|
||||
│ └─ 📍 北四地块 (60亩 · 北区) │
|
||||
│ │
|
||||
└────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 使用方法
|
||||
|
||||
### 方法1: 更换已有地块
|
||||
|
||||
```
|
||||
1. 在路线列表中选中一条路线
|
||||
↓
|
||||
2. 在地图区域看到"关联地块"卡片
|
||||
↓
|
||||
3. 当前地块显示为: ✓ 当前: XXX地块
|
||||
↓
|
||||
4. 点击下方的"更换地块"下拉框
|
||||
↓
|
||||
5. 选择新的地块
|
||||
↓
|
||||
6. 系统自动:
|
||||
- 加载新地块边界
|
||||
- 更新路线名称
|
||||
- 清除原有的作业路线（保留障碍物）
|
||||
- 标记为未保存状态
|
||||
↓
|
||||
7. 点击"保存路线"按钮保存更改
|
||||
```
|
||||
|
||||
### 方法2: 为未关联地块的路线添加地块
|
||||
|
||||
```
|
||||
1. 选中一条未关联地块的路线
|
||||
↓
|
||||
2. 卡片显示: ⚠️ 该路线未关联地块，请选择地块
|
||||
↓
|
||||
3. 从下拉框选择地块
|
||||
↓
|
||||
4. 地块边界自动加载
|
||||
↓
|
||||
5. 保存路线
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 功能特性
|
||||
|
||||
### 1. 智能下拉选择
|
||||
|
||||
- ✅ 显示当前关联的地块（禁用状态）
|
||||
- ✅ 只显示其他可选的地块
|
||||
- ✅ 显示地块详细信息（面积、位置）
|
||||
- ✅ 图标标识（📍）
|
||||
|
||||
### 2. 自动更新
|
||||
|
||||
更换地块后，系统自动更新：
|
||||
|
||||
| 项目 | 更新说明 |
|
||||
|------|----------|
|
||||
| 地块边界 | ✅ 自动加载新地块的边界坐标 |
|
||||
| 路线名称 | ✅ 更新为"{新地块名称}作业路线" |
|
||||
| 地块ID | ✅ 更新为新地块的ID |
|
||||
| 地块名称 | ✅ 更新为新地块的名称 |
|
||||
| 作业路线 | ⚠️ 清除（需要重新生成） |
|
||||
| 障碍物 | ✅ 保留 |
|
||||
| 作业参数 | ✅ 保留 |
|
||||
|
||||
### 3. 即时反馈
|
||||
|
||||
- ✅ Toast提示："已更换地块：XXX，边界已重新加载"
|
||||
- ✅ 徽章显示更新为新地块名称
|
||||
- ✅ 地图立即显示新边界
|
||||
- ✅ "未保存"标识自动显示
|
||||
|
||||
---
|
||||
|
||||
## 🎨 界面细节
|
||||
|
||||
### 地块选择下拉框
|
||||
|
||||
#### 已关联地块时
|
||||
|
||||
```tsx
|
||||
<Select value={selectedRoute.fieldId || 'none'} onValueChange={...}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="更换地块" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none" disabled>
|
||||
当前: 东一地块
|
||||
</SelectItem>
|
||||
{/* 显示其他地块（过滤掉当前地块） */}
|
||||
<SelectItem value="field-2">
|
||||
📍 西二地块 (80亩 · 西区)
|
||||
</SelectItem>
|
||||
<SelectItem value="field-3">
|
||||
📍 南三地块 (35亩 · 南区)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
#### 未关联地块时
|
||||
|
||||
```tsx
|
||||
<Select value="none" onValueChange={...}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="选择地块" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">请选择地块</SelectItem>
|
||||
{/* 显示所有活跃地块 */}
|
||||
<SelectItem value="field-1">
|
||||
📍 东一地块 (50亩 · 东区)
|
||||
</SelectItem>
|
||||
<SelectItem value="field-2">
|
||||
📍 西二地块 (80亩 · 西区)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 更换地块逻辑
|
||||
|
||||
```typescript
|
||||
onValueChange={(value) => {
|
||||
if (value && value !== 'none') {
|
||||
// 查找选中的地块
|
||||
const field = fields.find(f => f.id === value);
|
||||
if (field) {
|
||||
// 转换地块坐标为画布坐标
|
||||
const fieldBoundary = field.coordinates.map(coord => ({
|
||||
lng: coord.lng * 10 + 100,
|
||||
lat: coord.lat * 10 + 100,
|
||||
}));
|
||||
|
||||
// 更新路线信息
|
||||
const updatedRoute = {
|
||||
...selectedRoute,
|
||||
fieldId: value,
|
||||
fieldName: field.name,
|
||||
fieldBoundary,
|
||||
name: `${field.name}作业路线`,
|
||||
};
|
||||
|
||||
// 更新路线数组
|
||||
const updatedRoutes = routes.map(r =>
|
||||
r.id === selectedRoute.id ? updatedRoute : r
|
||||
);
|
||||
|
||||
// 更新状态
|
||||
setRoutes(updatedRoutes);
|
||||
setSelectedRoute(updatedRoute);
|
||||
setHasUnsavedChanges(true);
|
||||
|
||||
// 提示用户
|
||||
toast.success(`已更换地块：${field.name}，边界已重新加载`);
|
||||
}
|
||||
}
|
||||
}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 使用场景
|
||||
|
||||
### 场景1: 地块划分调整
|
||||
|
||||
```
|
||||
原地块: 东区大地块 (100亩)
|
||||
调整后: 拆分为东区1号地块 (50亩) 和东区2号地块 (50亩)
|
||||
|
||||
操作:
|
||||
1. 选中"东区大地块作业路线"
|
||||
2. 更换为"东区1号地块"
|
||||
3. 重新生成作业路线
|
||||
4. 保存
|
||||
```
|
||||
|
||||
### 场景2: 地块信息录错
|
||||
|
||||
```
|
||||
原地块: 西区地块 (错误)
|
||||
正确地块: 东区地块
|
||||
|
||||
操作:
|
||||
1. 选中路线
|
||||
2. 从下拉框选择正确的地块
|
||||
3. 系统自动更新边界和名称
|
||||
4. 保存
|
||||
```
|
||||
|
||||
### 场景3: 临时调整
|
||||
|
||||
```
|
||||
原计划: 东区地块作业
|
||||
临时调整: 改为西区地块作业
|
||||
|
||||
操作:
|
||||
1. 选中东区路线
|
||||
2. 更换为西区地块
|
||||
3. 查看作业路线是否需要调整
|
||||
4. 重新生成路线
|
||||
5. 保存
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
### 1. 更换地块的影响
|
||||
|
||||
```
|
||||
✅ 保留的内容:
|
||||
- 障碍物标注
|
||||
- 作业参数设置
|
||||
- 路线创建时间
|
||||
|
||||
⚠️ 清除的内容:
|
||||
- 原有的作业路线
|
||||
- 路线统计数据
|
||||
|
||||
🔄 自动更新的内容:
|
||||
- 地块边界
|
||||
- 路线名称
|
||||
- 地块关联信息
|
||||
```
|
||||
|
||||
### 2. 保存提醒
|
||||
|
||||
- ⚠️ 更换地块后会标记为"未保存"状态
|
||||
- ⚠️ 必须点击"保存路线"才能保存更改
|
||||
- ⚠️ 切<><E58887><EFBFBD>到其他路线前会提示保存
|
||||
|
||||
### 3. 数据一致性
|
||||
|
||||
- ⚠️ 更换地块会清除作业路线
|
||||
- ⚠️ 需要重新生成作业路线
|
||||
- ⚠️ 建议更换地块后立即重新规划
|
||||
|
||||
---
|
||||
|
||||
## ✅ 功能验证
|
||||
|
||||
### 测试场景
|
||||
|
||||
#### 场景1: 正常更换地块
|
||||
|
||||
```
|
||||
✅ 选中已有路线
|
||||
✅ 下拉框显示当前地块（禁用）
|
||||
✅ 下拉框显示其他可选地块
|
||||
✅ 选择新地块后边界自动加载
|
||||
✅ 路线名称自动更新
|
||||
✅ Toast提示成功
|
||||
✅ 显示"未保存"标识
|
||||
✅ 保存成功
|
||||
```
|
||||
|
||||
#### 场景2: 为未关联地块的路线添加地块
|
||||
|
||||
```
|
||||
✅ 选中未关联地块的路线
|
||||
✅ 卡片显示警告提示
|
||||
✅ 下拉框显示所有可选地块
|
||||
✅ 选择地块后边界加载
|
||||
✅ 路线名称更新
|
||||
✅ 保存成功
|
||||
```
|
||||
|
||||
#### 场景3: 更换地块后重新规划
|
||||
|
||||
```
|
||||
✅ 更换地块
|
||||
✅ 边界正确显示
|
||||
✅ 设置作业参数
|
||||
✅ 生成作业路线
|
||||
✅ 路线正确显示
|
||||
✅ 保存成功
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 优势对比
|
||||
|
||||
### 更新前 vs 更新后
|
||||
|
||||
| 功能 | 更新前 | 更新后 |
|
||||
|------|--------|--------|
|
||||
| 地块修改 | ❌ 不支持 | ✅ 支持二次修改 |
|
||||
| 修改方式 | - | ✅ 下拉选择 |
|
||||
| 修改时机 | - | ✅ 随时可修改 |
|
||||
| 边界更新 | - | ✅ 自动重新加载 |
|
||||
| 名称更新 | - | ✅ 自动更新 |
|
||||
| 即时反馈 | - | ✅ Toast提示 |
|
||||
|
||||
---
|
||||
|
||||
## 📝 完整工作流程
|
||||
|
||||
### 标准流程（含地块修改）
|
||||
|
||||
```
|
||||
1. 创建路线
|
||||
↓
|
||||
2. 选择地块
|
||||
↓
|
||||
3. 地块边界自动加载
|
||||
↓
|
||||
4. （可选）发现地块选错
|
||||
↓
|
||||
5. 从下拉框重新选择地块
|
||||
↓
|
||||
6. 边界自动重新加载
|
||||
↓
|
||||
7. 标注障碍物
|
||||
↓
|
||||
8. 设置作业参数
|
||||
↓
|
||||
9. 生成作业路线
|
||||
↓
|
||||
10. 保存路线
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
### ✅ 新增功能
|
||||
|
||||
1. ✅ 支持选中路线后更换地块
|
||||
2. ✅ 智能下拉选择器
|
||||
3. ✅ 自动边界重新加载
|
||||
4. ✅ 自动路线名称更新
|
||||
5. ✅ 即时反馈和提示
|
||||
|
||||
### 🎯 核心价值
|
||||
|
||||
- **灵活性**: 支持随时修改地块关联
|
||||
- **便捷性**: 下拉选择，操作简单
|
||||
- **智能性**: 自动更新边界和名称
|
||||
- **安全性**: 未保存提醒，防止误操作
|
||||
|
||||
### 📊 影响范围
|
||||
|
||||
- ✅ 已有路线：可以更换地块
|
||||
- ✅ 新建路线：仍然必须选择地块
|
||||
- ✅ 数据一致性：更换后需重新生成路线
|
||||
- ✅ 用户体验：更灵活，更友好
|
||||
|
||||
---
|
||||
|
||||
**更新时间**: 2025-10-17
|
||||
**版本**: v2.1
|
||||
**状态**: ✅ **地块二次修改功能已完成**
|
||||
|
||||
**提示**: 选中路线后，在地图区域的"关联地块"卡片中可以重新选择地块。
|
||||
Reference in New Issue
Block a user