# ✅ 作业路线规划 - 地块选择功能集成

## 🎯 更新内容

根据需求，作业路线规划现在需要先选择地块管理系统中维护的地块，实现与地块管理系统的深度集成。

---

## 📦 新增功能

### 1️⃣ **地块选择对话框**

在创建新路线规划时，系统会弹出地块选择对话框，用户可以：
- ✅ 选择已有地块作为规划基础
- ✅ 或选择"不选择"，手动绘制边界

**功能特点**:
- 自动加载地块管理系统中的所有地块
- 只显示状态为"活跃"的地块
- 显示地块的详细信息（面积、位置、土壤类型等）
- 实时预览选中地块的信息

---

### 2️⃣ **地块信息关联**

选择地块后，路线规划会自动关联地块信息：
- ✅ 地块ID (`fieldId`)
- ✅ 地块名称 (`fieldName`)
- ✅ 地块边界坐标（自动转换为路线边界）
- ✅ 路线名称自动命名为"{地块名称}作业路线"

---

### 3️⃣ **路线列表显示优化**

路线列表中新增地块信息显示：
- ✅ 显示关联的地块名称
- ✅ 地图图标标识
- ✅ 直观了解路线对应的地块

---

## 🎨 界面展示

### 地块选择对话框

```
┌─────────────────────────────────────────────┐
│  选择地块                                    │
│  从地块管理系统中选择一个地块作为作业路线    │
│  规划的基础                                  │
├─────────────────────────────────────────────┤
│                                             │
│  选择地块                                    │
│  [选择地块 ▼]                                │
│    ○ 不选择（手动绘制边界）                  │
│    ○ 东一地块 (50亩 · 东区)                 │
│    ○ 西二地块 (80亩 · 西区)                 │
│    ○ 南三地块 (35亩 · 南区)                 │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │  📍 地块信息                         │   │
│  ├─────────────────────────────────────┤   │
│  │  地块名称: 东一地块                  │   │
│  │  地块面积: 50 亩                     │   │
│  │  所在位置: 东区                      │   │
│  │  土壤类型: 壤土                      │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  [取消]  [✓ 确认创建]                       │
└─────────────────────────────────────────────┘
```

### 路线列表（带地块信息）

```
┌──────────────────────┐
│  路线列表            │
├──────────────────────┤
│ ✓ 东一地块作业路线   │
│   📍 东一地块        │  ← 新增地块名称显示
│   18行 · 3.6km       │
│   [草稿]             │
│                      │
│ □ 西二地块作业路线   │
│   📍 西二地块        │
│   24行 · 4.8km       │
│   [已审核]           │
└──────────────────────┘
```

---

## 🔧 技术实现

### 数据结构更新

#### RoutePlan 接口

```typescript
interface RoutePlan {
  id: string;
  name: string;
  fieldId?: string;              // 新增：关联地块ID
  fieldName?: string;            // 新增：关联地块名称
  fieldBoundary: RoutePoint[];
  obstacles: Obstacle[];
  workingLines: RoutePoint[][];
  params: RouteParams;
  stats: RouteStats;
  createdAt: string;
  status: 'draft' | 'approved' | 'exported';
}
```

### 核心功能实现

#### 1. 加载地块数据

```typescript
useEffect(() => {
  // 加载地块数据
  const fieldsData = localStorage.getItem('smart_agriculture_fields');
  if (fieldsData) {
    setFields(JSON.parse(fieldsData));
  }
}, []);
```

#### 2. 创建路线流程

```typescript
const createNewRoute = () => {
  // 打开地块选择对话框
  setShowFieldSelectDialog(true);
};

const confirmCreateRoute = () => {
  let fieldBoundary: RoutePoint[] = [];
  let fieldName = '';
  let fieldId: string | undefined;

  if (selectedFieldId && selectedFieldId !== 'none') {
    // 使用选中的地块边界
    const selectedField = fields.find(f => f.id === selectedFieldId);
    if (selectedField) {
      // 转换地块坐标到画布坐标系
      fieldBoundary = selectedField.coordinates.map(coord => ({
        lng: coord.lng * 10 + 100,
        lat: coord.lat * 10 + 100,
      }));
      fieldName = selectedField.name;
      fieldId = selectedField.id;
    }
  }

  const newRoute: RoutePlan = {
    id: `route-${Date.now()}`,
    name: fieldName ? `${fieldName}作业路线` : `路线规划${routes.length + 1}`,
    fieldId,
    fieldName,
    fieldBoundary,
    // ... 其他属性
  };

  setRoutes([...routes, newRoute]);
  setSelectedRoute(newRoute);
  setShowFieldSelectDialog(false);
};
```

#### 3. 坐标转换

```typescript
// 地块坐标（经纬度）→ Canvas坐标
const convertCoordinates = (geoCoords: GeoCoordinate[]) => {
  return geoCoords.map(coord => ({
    lng: coord.lng * 10 + 100,  // 缩放和平移
    lat: coord.lat * 10 + 100,
  }));
};
```

---

## 📊 完整工作流程

### 流程1: 基于地块创建路线

```
1. 点击"新建规划"
   ↓
2. 弹出"选择地块"对话框
   ↓
3. 从下拉列表选择地块
   → 显示地块信息预览
   ↓
4. 点击"确认创建"
   ↓
5. 系统自动：
   - 关联地块信息
   - 加载地块边界
   - 命名为"{地块名称}作业路线"
   ↓
6. 在地图上显示地块边界
   ↓
7. 设置作业参数
   ↓
8. 生成作业路线
   ↓
9. 保存路线规划
```

### 流程2: 手动绘制边界

```
1. 点击"新建规划"
   ↓
2. 弹出"选择地块"对话框
   ↓
3. 选择"不选择（手动绘制边界）"
   ↓
4. 点击"确认创建"
   ↓
5. 创建空白路线规划
   ↓
6. 点击"绘制边界"按钮
   ↓
7. 在地图上手动绘制边界
   ↓
8. 完成后设置参数生成路线
```

---

## 🎯 功能对比

### 更新前 vs 更新后

| 功能 | 更新前 | 更新后 |
|------|--------|--------|
| 地块选择 | ❌ 无 | ✅ 支持 |
| 地块关联 | ❌ 无 | ✅ 自动关联 |
| 边界导入 | ❌ 手动绘制 | ✅ 自动导入 |
| 路线命名 | 手动输入 | ✅ 自动命名 |
| 地块信息显示 | ❌ 无 | ✅ 显示地块名称 |
| 与地块系统集成 | ❌ 无 | ✅ 完全集成 |

---

## 💡 使用建议

### 1. 选择地块的优势

✅ **自动导入边界**
- 无需手动绘制
- 精确的地块边界
- 节省时间

✅ **数据关联**
- 路线与地块关联
- 便于追溯和管理
- 数据一致性

✅ **智能命名**
- 自动生成描述性名称
- 便于识别和查找

### 2. 手动绘制的场景

适用于以下情况：
- 🔹 地块尚未在系统中录入
- 🔹 临时作业区域
- 🔹 需要特殊边界处理

### 3. 最佳实践

```
推荐工作流:
1. 在地块管理系统中维护所有地块信息
2. 创建路线规划时选择对应地块
3. 系统自动导入边界和信息
4. 设置作业参数生成路线
5. 保存并导出至农机系统
```

---

## 📋 新增状���和数据

### 新增状态

```typescript
const [fields, setFields] = useState<Field[]>([]);           // 地块列表
const [selectedFieldId, setSelectedFieldId] = useState<string>('none');  // 选中的地块ID
const [showFieldSelectDialog, setShowFieldSelectDialog] = useState(false);  // 对话框显示
```

### 示例数据

```typescript
// 地块数据（从地块管理系统加载）
const fields = [
  {
    id: 'field-1',
    name: '东一地块',
    area: 50,
    location: '东区',
    soilType: 'loamy',
    coordinates: [
      { lng: 10, lat: 10 },
      { lng: 50, lat: 10 },
      { lng: 50, lat: 40 },
      { lng: 10, lat: 40 },
    ],
    status: 'active',
  },
];

// 路线规划数据（关联地块）
const route = {
  id: 'route-1',
  name: '东一地块作业路线',
  fieldId: 'field-1',        // 关联地块ID
  fieldName: '东一地块',      // 关联地块名称
  fieldBoundary: [...],       // 从地块坐标转换
};
```

---

## ✅ 功能验证

### 测试场景

#### 场景1: 选择地块创建路线
```
✅ 打开地块选择对话框
✅ 加载所有活跃地块
✅ 选择地块后显示详细信息
✅ 确认创建后自动关联
✅ 地块边界正确显示
✅ 路线名称自动生成
```

#### 场景2: 不选择地块
```
✅ 选择"不选择（手动绘制边界）"
✅ 创建空白路线
✅ 可以手动绘制边界
✅ 正常生成路线
```

#### 场景3: 路线列表显示
```
✅ 关联地块的路线显示地块名称
✅ 地图图标正确显示
✅ 未关联地块的路线不显示地块信息
```

---

## 🎨 UI优化

### 1. 地块选择器优化

- ✅ 地图图标标识
- ✅ 显示地块面积和位置
- ✅ 实时信息预览
- ✅ 清晰的提示文字

### 2. 路线列表优化

- ✅ 新增地块名称显示
- ✅ 地图图标标识
- ✅ 更直观的信息呈现

### 3. 提示信息

- ✅ 选择地块时的信息预览
- ✅ 不选择地块时的提示
- ✅ 创建成功的反馈

---

## 🔗 系统集成

### 与地块管理系统的关联

```
地块管理系统
    ↓
   地块数据
    ↓
路线规划系统
    ↓
  作业路线
    ↓
 下发至农机
```

### 数据流向

```
1. 地块管理系统录入/维护地块
   ↓
2. 路线规划选择地块
   ↓
3. 自动导入地块边界
   ↓
4. 生成作业路线
   ↓
5. 下发至农机执行
   ↓
6. 作业数据回传
   ↓
7. 关联到对应地块
```

---

## 📝 注意事项

### 1. 坐标系统

- 地块坐标：经纬度坐标（WGS84）
- Canvas坐标：像素坐标
- 需要进行坐标转换

### 2. 数据一致性

- 地块数据变更时，需考虑已关联的路线
- 建议保留历史地块信息

### 3. 用户体验

- 提供清晰的选择引导
- 支持两种创建方式
- 提供充分的信息预览

---

## 🎉 总结

### ✅ 完成内容

1. ✅ 新增地块选择对话框
2. ✅ 实现地块数据加载
3. ✅ 自动导入地块边界
4. ✅ 自动关联地块信息
5. ✅ 智能路线命名
6. ✅ 路线列表显示优化
7. ✅ 支持手动绘制备选方案

### 🎯 核心价值

- **提高效率**: 无需手动绘制边界
- **数据关联**: 路线与地块完整关联
- **便于管理**: 清晰的数据追溯
- **用户友好**: 直观的操作流程

### 📊 状态

✅ **功能完成，可正常使用**

---

**更新时间**: 2025-10-17  
**版本**: v1.2  
**状态**: ✅ **已集成地块选择功能**
