14 KiB
14 KiB
✅ 作业路线规划 - 地块选择器优化
🎯 更新说明
根据用户反馈，优化了作业路线规划的地块选择流程：
- ✅ 在地图绘制区域顶部添加地块选择卡片
- ✅ 创建路线后，在绘制边界前先提示选择地块
- ✅ 选择地块后自动加载边界，禁用手动绘制按钮
📦 更新内容
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亩 · 北区)
🔧 技术实现
地块选择卡片代码
{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>
)}
绘制边界按钮优化
<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. 地块数据
- 只显示状态为"活跃"的地块
- 需要先在地块管理系统中维护地块
- 地块坐标会自动转换为画布坐标
🎉 总结
✅ 更新完成
- ✅ 地块选择卡片已添加到地图区域顶部
- ✅ 未选择地块时显示醒目提示
- ✅ 已选择地块时显示状态标识
- ✅ "绘制边界"按钮自动禁用
- ✅ 完整的用户引导流程
🎯 核心价值
- 提高效率: 不需要在创建和地图之间切换
- 降低门槛: 醒目的提示引导用户操作
- 增强体验: 即时的视觉反馈和状态提示
- 灵活选择: 支持创建时选择或创建后选择
📊 状态
✅ 功能完整，用户体验优化完成！
更新时间: 2025-10-17
版本: v1.3
状态: ✅ 已优化地块选择流程