cavin/smart-crop-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

Browse Source
This commit is contained in:
peng
2025-10-23 10:57:14 +08:00
parent 83523dad64
commit 28229ce795
354 changed files with 147599 additions and 7892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

471
src/ROUTE_PLANNING_FIELD_INTEGRATION.md Normal file
View File

@@ -0,0 +1,471 @@
# ✅ 作业路线规划 - 地块选择功能集成
## 🎯 更新内容
根据需求，作业路线规划现在需要先选择地块管理系统中维护的地块，实现与地块管理系统的深度集成。
---
## 📦 新增功能
### 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. 保存并导出至农机系统
```
---
## 📋 新增状<E5A29E><E78AB6><EFBFBD>和数据
### 新增状态
```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
**状态**: ✅ **已集成地块选择功能**