生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
430
src/ROUTE_PLANNING_FIELD_SELECTOR_UPDATE.md
Normal file
430
src/ROUTE_PLANNING_FIELD_SELECTOR_UPDATE.md
Normal file
@@ -0,0 +1,430 @@
|
||||
# ✅ 作业路线规划 - 地块选择器优化
|
||||
|
||||
## 🎯 更新说明
|
||||
|
||||
根据用户反馈，优化了作业路线规划的地块选择流程：
|
||||
- ✅ **在地图绘制区域顶部添加地块选择卡片**
|
||||
- ✅ **创建路线后，在绘制边界前先提示选择地块**
|
||||
- ✅ **选择地块后自动加载边界，禁用手动绘制按钮**
|
||||
|
||||
---
|
||||
|
||||
## 📦 更新内容
|
||||
|
||||
### 1️⃣ **地块选择卡片（新增）**
|
||||
|
||||
在地图区域的顶部新增了醒目的地块选择卡片：
|
||||
|
||||
#### 未选择地块时
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────┐
|
||||
│ 📍 关联地块 │
|
||||
├────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 💡 建议先选择地块，系统将自动加载地块边界， │
|
||||
│ 无需手动绘制 │
|
||||
│ │
|
||||
│ [选择地块 ▼] 或手动绘制边界 │
|
||||
│ • 手动绘制（不选择地块） │
|
||||
│ • 📍 东一地块 (50亩 · 东区) │
|
||||
│ • 📍 西二地块 (80亩 · 西区) │
|
||||
│ • 📍 南三地块 (35亩 · 南区) │
|
||||
│ │
|
||||
└────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 已选择地块时
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────┐
|
||||
│ 📍 关联地块 │
|
||||
├────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ✓ 已选择: 东一地块 │
|
||||
│ 地块边界已自动加载 │
|
||||
│ │
|
||||
└────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2️⃣ **绘制边界按钮状态优化**
|
||||
|
||||
#### 选择地块后
|
||||
|
||||
- ✅ "绘制边界"按钮变为"✓ 边界已加载"
|
||||
- ✅ 按钮禁用（灰色）
|
||||
- ✅ 鼠标悬停显示提示"已关联地块，边界已自动加载"
|
||||
|
||||
#### 未选择地块时
|
||||
|
||||
- ✅ "绘制边界"按钮可点击
|
||||
- ✅ 允许手动绘制边界
|
||||
|
||||
---
|
||||
|
||||
### 3️⃣ **工作流程优化**
|
||||
|
||||
#### 新的推荐流程
|
||||
|
||||
```
|
||||
1. 点击"新建规划"
|
||||
↓
|
||||
2. 在"选择地块"对话框中选择地块
|
||||
↓
|
||||
3. 系统创建路线并自动加载地块边界
|
||||
↓
|
||||
4. 在地图上显示地块边界
|
||||
↓
|
||||
5. （可选）标注障碍物
|
||||
↓
|
||||
6. 设置作业参数
|
||||
↓
|
||||
7. 生成作业路线
|
||||
↓
|
||||
8. 保存并导出
|
||||
```
|
||||
|
||||
#### 备选流程（不选择地块）
|
||||
|
||||
```
|
||||
1. 点击"新建规划"
|
||||
↓
|
||||
2. 选择"不选择（手动绘制边界）"
|
||||
↓
|
||||
3. 在地图区域看到地块选择卡片提示
|
||||
↓
|
||||
4. 可以：
|
||||
- 在下拉框选择地块（自动加载边界）
|
||||
- 或点击"绘制边界"手动绘制
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 界面展示
|
||||
|
||||
### 完整界面布局
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────┐
|
||||
│ 作业路线规划 [新建规划] │
|
||||
├──────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────┐ ┌────────────────────────┐ ┌──────────────┐ │
|
||||
│ │ 路线列表│ │ 地图区域 │ │ 作业参数 │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ ○ 路线1 │ │ ┌──────────────────┐ │ │ 行距: 3m │ │
|
||||
│ │ ○ 路线2 │ │ │📍 关联地块 │ │ │ 方向: 0° │ │
|
||||
│ │ │ │ │💡 建议先选择地块 │ │ │ 幅宽: 2.5m │ │
|
||||
│ │ │ │ │[选择地块 ▼] │ │ │ │ │
|
||||
│ │ │ │ └──────────────────┘ │ │ [生成路线] │ │
|
||||
│ │ │ │ │ │ [保存路线] │ │
|
||||
│ │ │ │ ┌──────────────────┐ │ │ [导出路线] │ │
|
||||
│ │ │ │ │ 规划地图 │ │ │ │ │
|
||||
│ │ │ │ │ ┌────────────┐ │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ │ Canvas │ │ │ │ │ │
|
||||
│ │ │ │ │ │ │ │ │ │ │ │
|
||||
│ │ │ │ │ └────────────┘ │ │ │ │ │
|
||||
│ │ │ │ └──────────────────┘ │ │ │ │
|
||||
│ └─────────┘ └────────────────────────┘ └──────────────┘ │
|
||||
└──────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 地块选择卡片详细展示
|
||||
|
||||
#### 卡片样式特点
|
||||
|
||||
- 🎨 **渐变背景**: 蓝绿渐变 (`from-blue-50 to-green-50`)
|
||||
- 📍 **图标标识**: MapPin 图标
|
||||
- 💡 **智能提示**: 引导用户先选择地块
|
||||
- ✓ **状态反馈**: 清晰的已选择/未选择状态
|
||||
|
||||
#### 下拉选择器
|
||||
|
||||
```
|
||||
[选择地块 ▼]
|
||||
├─ 手动绘制（不选择地块）
|
||||
├─ 📍 东一地块 (50亩 · 东区)
|
||||
├─ 📍 西二地块 (80亩 · 西区)
|
||||
├─ 📍 南三地块 (35亩 · 南区)
|
||||
└─ 📍 北四地块 (60亩 · 北区)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 地块选择卡片代码
|
||||
|
||||
```tsx
|
||||
{selectedRoute && (
|
||||
<Card className="p-4 bg-gradient-to-r from-blue-50 to-green-50 border-blue-200">
|
||||
<div>
|
||||
<h4 className="mb-3 text-blue-900 flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
关联地块
|
||||
</h4>
|
||||
{selectedRoute.fieldName ? (
|
||||
// 已选择地块
|
||||
<div className="space-y-2">
|
||||
<Badge variant="outline" className="bg-white text-green-700">
|
||||
✓ 已选择: {selectedRoute.fieldName}
|
||||
</Badge>
|
||||
<span className="text-sm text-green-700">
|
||||
地块边界已自动加载
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
// 未选择地块
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm text-blue-700">
|
||||
💡 建议先选择地块，系统将自动加载地块边界，无需手动绘制
|
||||
</p>
|
||||
<Select
|
||||
value="none"
|
||||
onValueChange={(value) => {
|
||||
// 选择地块后自动加载边界
|
||||
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}作业路线`,
|
||||
};
|
||||
// 保存更新
|
||||
setSelectedRoute(updatedRoute);
|
||||
setHasUnsavedChanges(true);
|
||||
toast.success(`已关联地块：${field.name}，边界已自动加载`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-64 bg-white">
|
||||
<SelectValue placeholder="选择地块" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">手动绘制（不选择地块）</SelectItem>
|
||||
{fields.map(field => (
|
||||
<SelectItem key={field.id} value={field.id}>
|
||||
📍 {field.name} ({field.area}亩 · {field.location})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
```
|
||||
|
||||
### 绘制边界按钮优化
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
size="sm"
|
||||
variant={drawMode === 'boundary' ? 'default' : 'outline'}
|
||||
onClick={() => {
|
||||
if (!selectedRoute) {
|
||||
toast.error('请先选择或创建一个路线规划');
|
||||
return;
|
||||
}
|
||||
if (selectedRoute.fieldName) {
|
||||
toast.info('已关联地块，边界已自动加载');
|
||||
return;
|
||||
}
|
||||
setDrawMode(drawMode === 'boundary' ? 'none' : 'boundary');
|
||||
setCurrentDrawing([]);
|
||||
}}
|
||||
disabled={!!selectedRoute?.fieldName}
|
||||
title={selectedRoute?.fieldName ? '已关联地块，边界已自动加载' : ''}
|
||||
>
|
||||
<Square className="w-4 h-4 mr-1" />
|
||||
{selectedRoute?.fieldName ? '✓ 边界已加载' : '绘制边界'}
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 用户体验优化
|
||||
|
||||
### 更新前 vs 更新后
|
||||
|
||||
| 方面 | 更新前 | 更新后 |
|
||||
|------|--------|--------|
|
||||
| 地块选择位置 | 仅在创建时的对话框 | 创建时对话框 + 地图区域顶部 |
|
||||
| 选择提示 | 不明显 | 醒目的卡片提示 |
|
||||
| 选择时机 | 仅创建时 | 创建时 + 随时可选择 |
|
||||
| 视觉反馈 | 普通 | 渐变背景、图标、状态标识 |
|
||||
| 按钮状态 | 无变化 | 自动禁用并显示已加载 |
|
||||
| 用户引导 | 较弱 | 强引导（💡 提示） |
|
||||
|
||||
---
|
||||
|
||||
## 💡 用户使用指南
|
||||
|
||||
### 推荐使用方式
|
||||
|
||||
#### 方式1: 创建时选择地块 ✅ 推荐
|
||||
|
||||
```
|
||||
1. 点击"新建规划"
|
||||
2. 在对话框中选择地块
|
||||
3. 边界自动加载
|
||||
4. 直接设置参数生成路线
|
||||
```
|
||||
|
||||
**优点**:
|
||||
- ✓ 一步到位
|
||||
- ✓ 自动命名
|
||||
- ✓ 省时省力
|
||||
|
||||
#### 方式2: 创建后选择地块
|
||||
|
||||
```
|
||||
1. 点击"新建规划"
|
||||
2. 选择"不选择（手动绘制边界）"
|
||||
3. 在地图区域看到地块选择卡片
|
||||
4. 从下拉框选择地块
|
||||
5. 边界自动加载
|
||||
```
|
||||
|
||||
**优点**:
|
||||
- ✓ 可以先看看地图
|
||||
- ✓ 随时可以选择地块
|
||||
|
||||
#### 方式3: 手动绘制边界
|
||||
|
||||
```
|
||||
1. 点击"新建规划"
|
||||
2. 选择"不选择（手动绘制边界）"
|
||||
3. 不使用地块选择卡片
|
||||
4. 点击"绘制边界"按钮
|
||||
5. 在地图上手动绘制
|
||||
```
|
||||
|
||||
**适用场景**:
|
||||
- 地块未在系统中录入
|
||||
- 临时作业区域
|
||||
- 需要特殊边界处理
|
||||
|
||||
---
|
||||
|
||||
## ✅ 功能验证
|
||||
|
||||
### 测试场景
|
||||
|
||||
#### 场景1: 创建时选择地块
|
||||
```
|
||||
✅ 创建路线时选择地块
|
||||
✅ 边界自动加载到地图
|
||||
✅ 路线名称自动命名
|
||||
✅ 地块卡片显示"已选择"状态
|
||||
✅ "绘制边界"按钮变为"✓ 边界已加载"且禁用
|
||||
```
|
||||
|
||||
#### 场景2: 创建后在卡片中选择地块
|
||||
```
|
||||
✅ 创建路线时不选择地块
|
||||
✅ 地图区域显示地块选择卡片
|
||||
✅ 卡片显示醒目的提示信息
|
||||
✅ 从下拉框选择地块
|
||||
✅ 边界自动加载
|
||||
✅ 路线名称自动更新
|
||||
✅ 卡片状态变为"已选择"
|
||||
✅ "绘制边界"按钮禁用
|
||||
```
|
||||
|
||||
#### 场景3: 手动绘制边界
|
||||
```
|
||||
✅ 不选择地块
|
||||
✅ 地块卡片仍然显示
|
||||
✅ "绘制边界"按钮可用
|
||||
✅ 点击后可以手动绘制
|
||||
✅ 绘制完成后正常工作
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 优化要点
|
||||
|
||||
### 1. 视觉引导
|
||||
|
||||
- ✅ 渐变背景色（蓝绿）吸引注意
|
||||
- ✅ 图标标识（📍）增强识别
|
||||
- ✅ 智能提示（💡）引导操作
|
||||
- ✅ 状态徽章（✓）清晰反馈
|
||||
|
||||
### 2. 交互优化
|
||||
|
||||
- ✅ 选择地块后立即生效
|
||||
- ✅ 自动加载边界
|
||||
- ✅ 自动更新路线名称
|
||||
- ✅ 按钮状态自动更新
|
||||
- ✅ Toast提示操作结果
|
||||
|
||||
### 3. 用户体验
|
||||
|
||||
- ✅ 位置醒目（地图区域顶部）
|
||||
- ✅ 操作便捷（一个下拉框）
|
||||
- ✅ 引导明确（提示文字）
|
||||
- ✅ 反馈及时（即时更新）
|
||||
|
||||
---
|
||||
|
||||
## 📝 注意事项
|
||||
|
||||
### 1. 选择地块的时机
|
||||
|
||||
- 建议在创建路线时就选择地块
|
||||
- 也可以创建后再选择
|
||||
- 选择后会自动加载边界并更新路线
|
||||
|
||||
### 2. 手动绘制与地块选择
|
||||
|
||||
- 两者是互斥的
|
||||
- 选择地块后无法手动绘制边界
|
||||
- 想要手动绘制请不要选择地块
|
||||
|
||||
### 3. 地块数据
|
||||
|
||||
- 只显示状态为"活跃"的地块
|
||||
- 需要先在地块管理系统中维护地块
|
||||
- 地块坐标会自动转换为画布坐标
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
### ✅ 更新完成
|
||||
|
||||
1. ✅ 地块选择卡片已添加到地图区域顶部
|
||||
2. ✅ 未选择地块时显示醒目提示
|
||||
3. ✅ 已选择地块时显示状态标识
|
||||
4. ✅ "绘制边界"按钮自动禁用
|
||||
5. ✅ 完整的用户引导流程
|
||||
|
||||
### 🎯 核心价值
|
||||
|
||||
- **提高效率**: 不需要在创建和地图之间切换
|
||||
- **降低门槛**: 醒目的提示引导用户操作
|
||||
- **增强体验**: 即时的视觉反馈和状态提示
|
||||
- **灵活选择**: 支持创建时选择或创建后选择
|
||||
|
||||
### 📊 状态
|
||||
|
||||
✅ **功能完整，用户体验优化完成！**
|
||||
|
||||
---
|
||||
|
||||
**更新时间**: 2025-10-17
|
||||
**版本**: v1.3
|
||||
**状态**: ✅ **已优化地块选择流程**
|
||||
Reference in New Issue
Block a user