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

643
src/OPERATION_RECORD_TRAJECTORY_VIEW.md Normal file
View File

@@ -0,0 +1,643 @@
# 🗺️ 作业数据记录 - 轨迹回看功能
## ✅ 功能已添加
**作业数据记录中，每条记录新增"查看轨迹"按钮，点击可查看该条记录的详细作业轨迹**
---
## 🎯 功能特点
### 核心功能
1. **查看轨迹按钮** ✅
- 每条作业记录都有独立的"查看轨迹"按钮
- 点击按钮弹出轨迹详情对话框
- 大屏幕显示，方便查看细节
2. **地图轨迹显示** ✅
- 高德地图集成
- 绿色线条显示作业路径
- 灰色虚线显示空转路径
- 起点/终点标记
3. **作业信息展示** ✅
- 开始/结束时间
- 作业时长
- 质量评估
4. **面积统计** ✅
- 计划面积
- 实际面积
- 覆盖率进度条
5. **轨迹统计** ✅
- 总轨迹点数
- 作业点数（绿色）
- 空转点数（灰色）
6. **操作功能** ✅
- 导出轨迹（预留）
- 轨迹回放（预留）
---
## 🎨 界面展示
### 作业记录列表（新增操作列）
```
┌─────────────────────────────────────────────────────────────────────┐
│ 作业数据记录 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 农机 │地块 │作业类型│计划│实际│覆盖率│时长│质量│ 操作 ✅ │
│ ────────┼──────┼────────┼────┼────┼──────┼────┼────┼────────── │
│ 约翰迪尔│1号地 │ 耕地 │50 │48.5│ 97% │7.5 │优秀│[🗺️查看轨迹] │
│ 久保田 │2号地 │ 收获 │80 │79.2│ 99% │11 │良好│[🗺️查看轨迹] │
│ │
└─────────────────────────────────────────────────────────────────────┘
```
---
### 轨迹查看对话框
```
┌───────────────────────────────────────────────────────────────────┐
│ 作业轨迹回看 [×] │
│ 约翰迪尔拖拉机 - 1号地块 - 耕地 │
├───────────────────────────────────────────────────────────────────┤
│ │
│ 作业信息 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 开始时间 │ 结束时间 │ 作业时长 │ 质量评估 │ │
│ │ 10-12 08:00 │ 10-12 15:30 │ 7.5小时 │ [优秀] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 面积统计 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 计划面积 │ 实际面积 │ 覆盖率 │ │
│ │ 50 亩 │ 48.5 亩 │ ████████████░ 97% │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 图例 │
│ ━━ 作业路径 ┈┈ 空转路径 📍起点 📍终点 │
│ │
│ 地图显示 │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📍 │ │
│ │ ━━━━━━━━━━━━━━━━━━━ │ │
│ │ ┃ ━ │ │
│ │ ┃ ┃ │ │
│ │ ━━━━━━━━━━━━━━━━━━━ │ │
│ │ ┃ ━ │ │
│ │ ┃ ┃ │ │
│ │ ━━━━━━━━━━━━━━━━━━━ │ │
│ │ 📍 │ │
│ │ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ 轨迹统计 │
│ ┌──────────┬──────────┬──────────┐ │
│ │轨迹点数 │作业点数 │空转点数 │ │
│ │ 375 │ 356 │ 19 │ │
│ └──────────┴──────────┴──────────┘ │
│ │
│ [关闭] [导出轨迹] [轨迹回放] │
└───────────────────────────────────────────────────────────────────┘
```
---
## 💡 使用指南
### 步骤1: 进入作业数据记录
```
路径: 农机管理 → 作业管理 → 数据记录
或直接访问: /machinery/operation/record
```
### 步骤2: 查看作业记录列表
```
查看所有历史作业记录：
- 约翰迪尔拖拉机 - 1号地块 - 耕地
- 久保田收割机 - 2号地块 - 收获
```
### 步骤3: 点击"查看轨迹"按钮
```
操作：
点击任意一条记录右侧的 "🗺️ 查看轨迹" 按钮
```
### 步骤4: 查看轨迹详情
```
轨迹对话框展示：
1. 作业基本信息（时间、时长、质量）
2. 面积统计（计划、实际、覆盖率）
3. 地图轨迹显示
4. 轨迹统计数据
5. 操作按钮
```
---
## 🎨 界面元素
### 1. 查看轨迹按钮
**位置**: 作业记录表格的"操作"列
**样式**:
```tsx
<Button variant="outline" size="sm">
<Map className="w-4 h-4" />
查看轨迹
</Button>
```
**特点**:
- ✅ 边框按钮样式
- ✅ 小尺寸适合表格
- ✅ 地图图标 + 文字
- ✅ Hover 时高亮
---
### 2. 作业信息卡片
**内容**:
- 开始时间: 10-12 08:00
- 结束时间: 10-12 15:30
- 作业时长: 7.5 小时
- 质量评估: [优秀]
**布局**: 4列网格，响应式
---
### 3. 面积统计卡片
**内容**:
- 计划面积: 50 亩（蓝色）
- 实际面积: 48.5 亩（绿色）
- 覆盖率: 进度条 + 百分比
**特点**:
- ✅ 清晰的对比
- ✅ 可视化进度条
---
### 4. 地图轨迹区域
**尺寸**: 500px 高度
**内容**:
- 高德地图底图
- 绿色作业路径
- 灰色空转路径
- 起点/终点标记
- 自动适配视野
**交互**:
- ✅ 支持缩放
- ✅ 支持拖拽
- ✅ 支持标记点击
---
### 5. 轨迹统计卡片
**内容**:
- 轨迹点数: 总数
- 作业点数: 绿色高亮
- 空转点数: 灰色显示
**布局**: 3列网格
---
### 6. 操作按钮
**按钮列表**:
1. **关闭** - 关闭对话框
2. **导出轨迹** - 导出GPX/KML（预留）
3. **轨迹回放** - 动画回放（预留）
---
## 🔧 技术实现
### 数据结构
```typescript
interface OperationRecord {
id: string;
machineryName: string;
fieldName: string;
operationType: string;
plannedArea: number;
actualArea: number;
coverage: number;
quality: string;
startTime: string;
endTime: string;
duration: number;
trajectory?: GPSPoint[]; // ✅ GPS轨迹数据
fieldCenter?: { // ✅ 地块中心点
lat: number;
lng: number;
};
}
interface GPSPoint {
lat: number;
lng: number;
timestamp: string;
speed: number;
workingStatus: boolean; // ✅ 是否作业中
}
```
---
### 轨迹生成算法
**往返式作业模式**:
```typescript
// 生成15行往返轨迹
const rows = 15;
const spacing = fieldSize.height / rows;
for (let i = 0; i < rows; i++) {
// 偶数行从左到右，奇数行从右到左
const direction = i % 2 === 0 ? 1 : -1;
// 每行25个点
for (let j = 0; j < 25; j++) {
// 计算点位置
points.push({
lat,
lng,
workingStatus: true, // 作业中
});
}
// 添加转弯点
points.push({
lat,
lng,
workingStatus: false, // 空转
});
}
```
**特点**:
- ✅ 模拟真实作业路径
- ✅ 区分作业和空转
- ✅ 375个轨迹点
- ✅ 95% 作业点，5% 空转点
---
### 地图绘制
**高德地图API**:
```typescript
// 创建地图
const map = new AMap.Map(mapRef.current, {
center: [lng, lat],
zoom: 15,
});
// 绘制作业路径（绿色）
const workingPolyline = new AMap.Polyline({
path: workingPath,
strokeColor: '#10b981',
strokeWeight: 4,
});
// 绘制空转路径（灰色虚线）
const idlePolyline = new AMap.Polyline({
path: idlePath,
strokeColor: '#9ca3af',
strokeWeight: 2,
strokeStyle: 'dashed',
});
// 添加起点/终点标记
const startMarker = new AMap.Marker({...});
const endMarker = new AMap.Marker({...});
```
---
## 📊 功能对比
| 功能项 | 更新前 | 更新后 |
|--------|--------|--------|
| **查看轨迹** | ❌ 无 | ✅ 每条记录都有 |
| **操作列** | ❌ 无 | ✅ 新增 |
| **地图显示** | ❌ 无 | ✅ 高德地图 |
| **轨迹路径** | ❌ 无 | ✅ 绿色/灰色 |
| **起终点标记** | ❌ 无 | ✅ 有 |
| **轨迹统计** | ❌ 无 | ✅ 3项统计 |
| **导出功能** | ❌ 无 | ⚠️ 预留 |
| **回放功能** | ❌ 无 | ⚠️ 预留 |
---
## 🎯 使用场景
### 场景1: 查看历史作业轨迹
```
需求：
查看昨天耕地作业的具体路径
操作：
1. 进入作业数据记录
2. 找到对应的记录行
3. 点击"查看轨迹"按钮
4. 查看地图上的详细路径
结果：
✅ 清晰看到作业路径
✅ 了解覆盖情况
✅ 发现遗漏区域
```
---
### 场景2: 评估作业质量
```
需求：
评估播种作业是否规范
操作：
1. 查看轨迹对话框
2. 观察路径直线度
3. 检查是否有重复
4. 查看覆盖率统计
结果：
✅ 直观评估质量
✅ 发现不规范操作
✅ 改进作业方法
```
---
### 场景3: 对比不同作业
```
需求：
对比两个司机的作业效率
操作：
1. 查看司机A的作业轨迹
2. 关闭对话框
3. 查看司机B的作业轨迹
4. 对比路径和覆盖率
结果：
✅ 发现效率差异
✅ 分析原因
✅ 培训改进
```
---
### 场景4: 导出轨迹数据（预留）
```
需求：
导出轨迹供第三方分析
操作：
1. 打开轨迹对话框
2. 点击"导出轨迹"按钮
3. 选择格式（GPX/KML）
4. 保存文件
结果：
⚠️ 功能预留，待实现
```
---
## 📝 模拟数据
### 记录1: 约翰迪尔拖拉机
```json
{
"id": "record-1",
"machineryName": "约翰迪尔拖拉机",
"fieldName": "1号地块",
"operationType": "耕地",
"plannedArea": 50,
"actualArea": 48.5,
"coverage": 97,
"quality": "优秀",
"startTime": "2024-10-12T08:00:00",
"endTime": "2024-10-12T15:30:00",
"duration": 7.5,
"fieldCenter": {
"lat": 30.2741,
"lng": 120.1551
},
"trajectory": [...] // 375个GPS点
}
```
---
### 记录2: 久保田收割机
```json
{
"id": "record-2",
"machineryName": "久保田收割机",
"fieldName": "2号地块",
"operationType": "收获",
"plannedArea": 80,
"actualArea": 79.2,
"coverage": 99,
"quality": "良好",
"startTime": "2024-10-11T07:00:00",
"endTime": "2024-10-11T18:00:00",
"duration": 11,
"fieldCenter": {
"lat": 30.2850,
"lng": 120.1700
},
"trajectory": [...] // 375个GPS点
}
```
---
## ✅ 更新清单
### 界面更新
- [x] ✅ 表格新增"操作"列
- [x] ✅ 添加"查看轨迹"按钮
- [x] ✅ 创建轨迹查看对话框
- [x] ✅ 地图区域（500px）
### 数据更新
- [x] ✅ OperationRecord 接口扩展
- [x] ✅ 添加 trajectory 字段
- [x] ✅ 添加 fieldCenter 字段
- [x] ✅ 生成模拟轨迹数据
### 功能实现
- [x] ✅ 查看轨迹功能
- [x] ✅ 地图轨迹绘制
- [x] ✅ 作业/空转路径区分
- [x] ✅ 起终点标记
- [x] ✅ 自动适配视野
### 统计信息
- [x] ✅ 作业信息展示
- [x] ✅ 面积统计
- [x] ✅ 轨迹统计
### 预留功能
- [ ] ⚠️ 导出轨迹（GPX/KML）
- [ ] ⚠️ 轨迹回放（动画）
---
## 🎉 功能亮点
### 1. 每条记录独立查看 ⭐⭐⭐⭐⭐
**价值**:
- ✅ 不需要切换页面
- ✅ 快速查看任意记录
- ✅ 操作简单直观
---
### 2. 完整轨迹可视化 ⭐⭐⭐⭐⭐
**价值**:
- ✅ 真实地图显示
- ✅ 作业/空转区分
- ✅ 起终点标记
- ✅ 自动适配视野
---
### 3. 详细统计信息 ⭐⭐⭐⭐
**价值**:
- ✅ 时间信息
- ✅ 面积对比
- ✅ 轨迹统计
- ✅ 质量评估
---
### 4. 大屏幕展示 ⭐⭐⭐⭐
**价值**:
- ✅ 5xl 宽度对话框
- ✅ 500px 高度地图
- ✅ 清晰查看细节
---
## 🚀 后续增强
### Phase 1: 导出功能
**内容**:
- 导出 GPX 格式
- 导出 KML 格式
- 导出轨迹图片
- 导出作业报告
---
### Phase 2: 回放功能
**内容**:
- 动画轨迹回放
- 播放控制（播放/暂停/快进）
- 倍速播放（1x/2x/4x/8x）
- 时间轴显示
---
### Phase 3: 质量分析
**内容**:
- 路径直线度分析
- 重复区域标注
- 遗漏区域标注
- 质量评分计算
---
### Phase 4: 对比功能
**内容**:
- 多条轨迹叠加显示
- 效率对比分析
- 质量对比分析
- 司机能力评估
---
## 📚 相关<E79BB8><E585B3>档
- **轨迹回放功能**: `/TRACK_PLAYBACK_ACCESS_GUIDE.md`
- **实时位置追踪**: `/REALTIME_LOCATION_TRACKING_COMPLETE.md`
- **作业记录评估**: `/OPERATION_RECORD_STATUS_SUMMARY.md`
---
## ✅ 总结
### 主要功能
1. ✅ **查看轨迹按钮** - 每条记录都有
2. ✅ **轨迹对话框** - 大屏幕展示
3. ✅ **地图显示** - 高德地图集成
4. ✅ **路径区分** - 作业/空转分色
5. ✅ **统计信息** - 3类统计数据
6. ✅ **操作按钮** - 关闭/导出/回放
### 核心价值
- **快速查看**: 一键打开轨迹详情
- **直观展示**: 地图可视化路径
- **详细信息**: 完整的统计数据
- **便于分析**: 质量评估参考
### 用户体验
- ✅ 操作简单（一键查看）
- ✅ 界面清晰（大屏展示）
- ✅ 信息完整（多维统计）
- ✅ 响应迅速（即点即开）
---
**更新时间**: 2025-10-17
**版本**: v3.0
**状态**: ✅ **轨迹回看功能已完成**
**核心改进**: 每条作业记录都可以单独查看详细轨迹，直观评估作业质量！