生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
450
src/COCKPIT_MACHINERY_SELECTOR.md
Normal file
450
src/COCKPIT_MACHINERY_SELECTOR.md
Normal file
@@ -0,0 +1,450 @@
|
||||
# 🚜 农业驾驶舱 - 农机切换功能
|
||||
|
||||
## ✅ 功能已添加
|
||||
|
||||
**农业驾驶舱新增农机切换下拉选择器，支持实时切换查看不同农机的驾驶舱数据**
|
||||
|
||||
---
|
||||
|
||||
## 🎯 功能特点
|
||||
|
||||
### 核心功能
|
||||
|
||||
1. **农机选择器** ✅
|
||||
- 右上角下拉选择框
|
||||
- 显示所有农机列表
|
||||
- 格式：农机名称 (型号)
|
||||
|
||||
2. **实时数据切换** ✅
|
||||
- 选择农机后立即更新数据
|
||||
- 基本信息动态显示
|
||||
- 状态标识自动适配
|
||||
|
||||
3. **默认选择** ✅
|
||||
- 页面加载时自动选择第一台农机
|
||||
- 无需手动操作即可查看数据
|
||||
|
||||
4. **农机信息展示** ✅
|
||||
- 农机名称
|
||||
- 型号
|
||||
- 设备编号
|
||||
- 当前状态（作业中/空闲/维修中等）
|
||||
|
||||
---
|
||||
|
||||
## 🎨 界面展示
|
||||
|
||||
### 驾驶舱顶部
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ 农业驾驶舱 选择农机: [下拉框 ▼] │
|
||||
│ 实时监控农机运行状态和作业数据 │
|
||||
├──────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 约翰迪尔8R拖拉机 [作业中] │
|
||||
│ John Deere 8R · 设备编号: JD8R-2024-001 │
|
||||
│ │
|
||||
│ 当前位置 │作业时长│已作业面积│作业效率 │
|
||||
│ 1号地块 │3.5小时 │25.8亩 │7.4亩/时 │
|
||||
│ │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 农机选择下拉框
|
||||
|
||||
```
|
||||
┌────────────────────────────────────┐
|
||||
│ 选择农机: │
|
||||
├────────────────────────────────────┤
|
||||
│ ○ 约翰迪尔8R拖拉机 (John Deere 8R) │
|
||||
│ ● 久保田M7-173 (Kubota M7) │
|
||||
│ ○ 雷沃欧豹M2104 (LOVOL M2104) │
|
||||
│ ○ 东方红LX2204 (Dongfanghong) │
|
||||
└────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 使用方法
|
||||
|
||||
### 步骤1: 进入农业驾驶舱
|
||||
|
||||
```
|
||||
路径: 农机管理 → 精准作业管理与支持 → 农业驾驶舱
|
||||
|
||||
或直接访问: /machinery/operation/cockpit
|
||||
```
|
||||
|
||||
### 步骤2: 选择要监控的农机
|
||||
|
||||
```
|
||||
操作：
|
||||
1. 查看右上角的"选择农机"下拉框
|
||||
2. 点击下拉框展开农机列表
|
||||
3. 选择要监控的农机
|
||||
```
|
||||
|
||||
### 步骤3: 查看农机数据
|
||||
|
||||
```
|
||||
自动更新：
|
||||
- 农机基本信息
|
||||
- 运行状态
|
||||
- 作业数据
|
||||
- 关键参数
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 数据结构
|
||||
|
||||
```typescript
|
||||
// 农机记录
|
||||
interface MachineryRecord {
|
||||
id: string;
|
||||
name: string;
|
||||
model: string;
|
||||
equipmentNumber?: string;
|
||||
status: string;
|
||||
currentField?: string;
|
||||
// ... 其他字段
|
||||
}
|
||||
```
|
||||
|
||||
### 状态管理
|
||||
|
||||
```typescript
|
||||
const [machinery, setMachinery] = useState<MachineryRecord[]>([]);
|
||||
const [selectedMachineryId, setSelectedMachineryId] = useState<string>('');
|
||||
const [selectedMachinery, setSelectedMachinery] = useState<MachineryRecord | null>(null);
|
||||
```
|
||||
|
||||
### 加载农机列表
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
// 从存储加载农机数据
|
||||
const machineryData = machineryStorage.getAllMachinery();
|
||||
setMachinery(machineryData);
|
||||
|
||||
// 默认选择第一台
|
||||
if (machineryData.length > 0) {
|
||||
setSelectedMachineryId(machineryData[0].id);
|
||||
setSelectedMachinery(machineryData[0]);
|
||||
}
|
||||
}, []);
|
||||
```
|
||||
|
||||
### 切换农机
|
||||
|
||||
```typescript
|
||||
const handleMachineryChange = (machineryId: string) => {
|
||||
setSelectedMachineryId(machineryId);
|
||||
const selected = machinery.find(m => m.id === machineryId);
|
||||
setSelectedMachinery(selected || null);
|
||||
};
|
||||
```
|
||||
|
||||
### 动态显示
|
||||
|
||||
```typescript
|
||||
// 农机名称和型号
|
||||
<h3>{selectedMachinery.name}</h3>
|
||||
<p>{selectedMachinery.model} · 设备编号: {selectedMachinery.equipmentNumber}</p>
|
||||
|
||||
// 状态标识（动态颜色）
|
||||
<Badge className={
|
||||
selectedMachinery.status === '作业中' ? 'bg-green-100 text-green-700' :
|
||||
selectedMachinery.status === '空闲' ? 'bg-blue-100 text-blue-700' :
|
||||
selectedMachinery.status === '维修中' ? 'bg-orange-100 text-orange-700' :
|
||||
'bg-gray-100 text-gray-700'
|
||||
}>
|
||||
{selectedMachinery.status}
|
||||
</Badge>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 状态颜色
|
||||
|
||||
### 农机状态标识
|
||||
|
||||
```
|
||||
作业中 → 🟢 绿色 (bg-green-100 text-green-700)
|
||||
空闲 → 🔵 蓝色 (bg-blue-100 text-blue-700)
|
||||
维修中 → 🟠 橙色 (bg-orange-100 text-orange-700)
|
||||
停用 → ⚫ 灰色 (bg-gray-100 text-gray-700)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 界面元素
|
||||
|
||||
### 1. 农机选择器
|
||||
|
||||
**位置**: 页面右上角
|
||||
|
||||
**样式**:
|
||||
```tsx
|
||||
<Select value={selectedMachineryId} onValueChange={handleMachineryChange}>
|
||||
<SelectTrigger className="w-64">
|
||||
<SelectValue placeholder="选择要监控的农机" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{machinery.map(m => (
|
||||
<SelectItem key={m.id} value={m.id}>
|
||||
{m.name} ({m.model})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 宽度固定 256px (w-64)
|
||||
- ✅ 显示农机名称和型号
|
||||
- ✅ 选择后立即生效
|
||||
|
||||
---
|
||||
|
||||
### 2. 农机基本信息卡片
|
||||
|
||||
**内容**:
|
||||
- 农机名称（大标题）
|
||||
- 型号 + 设备编号（小字）
|
||||
- 状态标识（右上角Badge）
|
||||
|
||||
**作业信息**（4列网格）:
|
||||
- 当前位置 🗺️
|
||||
- 作业时长 ⏱️
|
||||
- 已作业面积 📊
|
||||
- 作业效率 📈
|
||||
|
||||
---
|
||||
|
||||
## 💡 使用场景
|
||||
|
||||
### 场景1: 监控多台农机
|
||||
|
||||
```
|
||||
需求：
|
||||
同时监控多台农机的运行状态
|
||||
|
||||
操作：
|
||||
1. 进入农业驾驶舱
|
||||
2. 查看第一台农机数据
|
||||
3. 切换到第二台农机
|
||||
4. 对比两台农机的效率
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 场景2: 快速定位问题农机
|
||||
|
||||
```
|
||||
需求：
|
||||
某台农机出现异常，需要快速查看
|
||||
|
||||
操作：
|
||||
1. 打开农业驾驶舱
|
||||
2. 使用下拉框选择问题农机
|
||||
3. 查看详细的运行参数
|
||||
4. 分析问题原因
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 场景3: 作业效率对比
|
||||
|
||||
```
|
||||
需求：
|
||||
对比不同农机的作业效率
|
||||
|
||||
操作：
|
||||
1. 查看农机A的数据
|
||||
2. 记录关键指标
|
||||
3. 切换到农机B
|
||||
4. 对比作业效率数据
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 数据更新逻辑
|
||||
|
||||
### 切换农机时的更新
|
||||
|
||||
```
|
||||
用户选择农机
|
||||
↓
|
||||
更新 selectedMachineryId
|
||||
↓
|
||||
从列表中找到对应农机
|
||||
↓
|
||||
更新 selectedMachinery
|
||||
↓
|
||||
界面自动刷新显示新数据
|
||||
↓
|
||||
- 农机名称
|
||||
- 型号信息
|
||||
- 设备编号
|
||||
- 运行状态
|
||||
- 作业数据
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 示例数据
|
||||
|
||||
### 农机列表示例
|
||||
|
||||
```typescript
|
||||
[
|
||||
{
|
||||
id: 'machinery-1',
|
||||
name: '约翰迪尔8R拖拉机',
|
||||
model: 'John Deere 8R',
|
||||
equipmentNumber: 'JD8R-2024-001',
|
||||
status: '作业中',
|
||||
currentField: '1号地块'
|
||||
},
|
||||
{
|
||||
id: 'machinery-2',
|
||||
name: '久保田M7-173',
|
||||
model: 'Kubota M7-173',
|
||||
equipmentNumber: 'KB-M7-2024-002',
|
||||
status: '空闲',
|
||||
currentField: null
|
||||
},
|
||||
{
|
||||
id: 'machinery-3',
|
||||
name: '雷沃欧豹M2104',
|
||||
model: 'LOVOL M2104',
|
||||
equipmentNumber: 'LV-2104-003',
|
||||
status: '维修中',
|
||||
currentField: null
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 更新清单
|
||||
|
||||
### 界面更新
|
||||
- [x] ✅ 顶部添加农机选择器
|
||||
- [x] ✅ 选择器右对齐布局
|
||||
- [x] ✅ 标题改为"农业驾驶舱"
|
||||
|
||||
### 功能实现
|
||||
- [x] ✅ 加载农机列表
|
||||
- [x] ✅ 默认选择第一台
|
||||
- [x] ✅ 支持切换农机
|
||||
- [x] ✅ 数据实时更新
|
||||
|
||||
### 数据显示
|
||||
- [x] ✅ 动态显示农机名称
|
||||
- [x] ✅ 动态显示型号
|
||||
- [x] ✅ 动态显示设备编号
|
||||
- [x] ✅ 状态标识自适应颜色
|
||||
- [x] ✅ 当前位置显示
|
||||
|
||||
### 导入依赖
|
||||
- [x] ✅ Select 组件
|
||||
- [x] ✅ machineryStorage
|
||||
- [x] ✅ MachineryRecord 类型
|
||||
- [x] ✅ useEffect Hook
|
||||
|
||||
---
|
||||
|
||||
## 🎯 功能对比
|
||||
|
||||
| 功能项 | 更新前 | 更新后 |
|
||||
|--------|--------|--------|
|
||||
| **农机选择** | ❌ 固定单台 | ✅ 可切换 |
|
||||
| **农机信息** | ❌ 硬编码 | ✅ 动态加载 |
|
||||
| **状态标识** | ❌ 固定颜色 | ✅ 自适应 |
|
||||
| **设备编号** | ❌ 固定值 | ✅ 真实数据 |
|
||||
| **当前位置** | ❌ 固定文本 | ✅ 动态显示 |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 后续增强
|
||||
|
||||
### Phase 1: 数据刷新
|
||||
|
||||
**内容**:
|
||||
- 定时刷新选中农机数据
|
||||
- 实时更新运行参数
|
||||
- WebSocket 实时推送
|
||||
|
||||
---
|
||||
|
||||
### Phase 2: 筛选功能
|
||||
|
||||
**内容**:
|
||||
- 按状态筛选（作业中/空闲）
|
||||
- 按地块筛选
|
||||
- 按机手筛选
|
||||
|
||||
---
|
||||
|
||||
### Phase 3: 收藏功能
|
||||
|
||||
**内容**:
|
||||
- 收藏常用农机
|
||||
- 快速切换收藏列表
|
||||
- 自定义排序
|
||||
|
||||
---
|
||||
|
||||
### Phase 4: 对比模式
|
||||
|
||||
**内容**:
|
||||
- 双农机对比显示
|
||||
- 并排查看数据
|
||||
- 效率对比分析
|
||||
|
||||
---
|
||||
|
||||
## 📚 相关文档
|
||||
|
||||
- **农业驾驶舱**: `/components/machinery/operation/Cockpit.tsx`
|
||||
- **农机存储**: `/lib/machineryStorage.ts`
|
||||
- **农机类型**: `/types/machinery.ts`
|
||||
|
||||
---
|
||||
|
||||
## ✅ 总结
|
||||
|
||||
### 主要功能
|
||||
|
||||
1. ✅ **农机选择器** - 右上角下拉选择
|
||||
2. ✅ **实时切换** - 选择后立即更新
|
||||
3. ✅ **默认选择** - 自动选择第一台
|
||||
4. ✅ **动态显示** - 农机信息动态加载
|
||||
5. ✅ **状态适配** - 颜色自动适应
|
||||
|
||||
### 核心价值
|
||||
|
||||
- **灵活监控**: 可以查看任意农机
|
||||
- **快速切换**: 一键切换无需等待
|
||||
- **数据准确**: 显示真实农机信息
|
||||
- **直观展示**: 状态一目了然
|
||||
|
||||
### 用户体验
|
||||
|
||||
- ✅ 操作简单（下拉选择）
|
||||
- ✅ 响应迅速（即选即显）
|
||||
- ✅ 信息完整（名称/型号/编号）
|
||||
- ✅ 视觉清晰（状态颜色区分）
|
||||
|
||||
---
|
||||
|
||||
**更新时间**: 2025-10-17
|
||||
**版本**: v4.0
|
||||
**状态**: ✅ **农机切换功能已完成**
|
||||
|
||||
**核心改进**: 农业驾驶舱支持切换农机，灵活监控多台设备运行状态！
|
||||
Reference in New Issue
Block a user