16 KiB
16 KiB
🗺️ 作业数据记录 - 轨迹回看功能
✅ 功能已添加
作业数据记录中，每条记录新增"查看轨迹"按钮，点击可查看该条记录的详细作业轨迹
🎯 功能特点
核心功能
-
查看轨迹按钮 ✅
- 每条作业记录都有独立的"查看轨迹"按钮
- 点击按钮弹出轨迹详情对话框
- 大屏幕显示，方便查看细节
-
地图轨迹显示 ✅
- 高德地图集成
- 绿色线条显示作业路径
- 灰色虚线显示空转路径
- 起点/终点标记
-
作业信息展示 ✅
- 开始/结束时间
- 作业时长
- 质量评估
-
面积统计 ✅
- 计划面积
- 实际面积
- 覆盖率进度条
-
轨迹统计 ✅
- 总轨迹点数
- 作业点数（绿色）
- 空转点数（灰色）
-
操作功能 ✅
- 导出轨迹（预留）
- 轨迹回放（预留）
🎨 界面展示
作业记录列表（新增操作列）
┌─────────────────────────────────────────────────────────────────────┐
│ 作业数据记录 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 农机 │地块 │作业类型│计划│实际│覆盖率│时长│质量│ 操作 ✅ │
│ ────────┼──────┼────────┼────┼────┼──────┼────┼────┼────────── │
│ 约翰迪尔│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. 查看轨迹按钮
位置: 作业记录表格的"操作"列
样式:
<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. 操作按钮
按钮列表:
- 关闭 - 关闭对话框
- 导出轨迹 - 导出GPX/KML（预留）
- 轨迹回放 - 动画回放（预留）
🔧 技术实现
数据结构
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; // ✅ 是否作业中
}
轨迹生成算法
往返式作业模式:
// 生成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:
// 创建地图
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: 约翰迪尔拖拉机
{
"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: 久保田收割机
{
"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点
}
✅ 更新清单
界面更新
- ✅ 表格新增"操作"列
- ✅ 添加"查看轨迹"按钮
- ✅ 创建轨迹查看对话框
- ✅ 地图区域（500px）
数据更新
- ✅ OperationRecord 接口扩展
- ✅ 添加 trajectory 字段
- ✅ 添加 fieldCenter 字段
- ✅ 生成模拟轨迹数据
功能实现
- ✅ 查看轨迹功能
- ✅ 地图轨迹绘制
- ✅ 作业/空转路径区分
- ✅ 起终点标记
- ✅ 自动适配视野
统计信息
- ✅ 作业信息展示
- ✅ 面积统计
- ✅ 轨迹统计
预留功能
- ⚠️ 导出轨迹（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
✅ 总结
主要功能
- ✅ 查看轨迹按钮 - 每条记录都有
- ✅ 轨迹对话框 - 大屏幕展示
- ✅ 地图显示 - 高德地图集成
- ✅ 路径区分 - 作业/空转分色
- ✅ 统计信息 - 3类统计数据
- ✅ 操作按钮 - 关闭/导出/回放
核心价值
- 快速查看: 一键打开轨迹详情
- 直观展示: 地图可视化路径
- 详细信息: 完整的统计数据
- 便于分析: 质量评估参考
用户体验
- ✅ 操作简单（一键查看）
- ✅ 界面清晰（大屏展示）
- ✅ 信息完整（多维统计）
- ✅ 响应迅速（即点即开）
更新时间: 2025-10-17
版本: v3.0
状态: ✅ 轨迹回看功能已完成
核心改进: 每条作业记录都可以单独查看详细轨迹，直观评估作业质量！