smart-crop-ui/src/COCKPIT_MACHINERY_SELECTOR.md

🚜 农业驾驶舱 - 农机切换功能

✅ 功能已添加

农业驾驶舱新增农机切换下拉选择器，支持实时切换查看不同农机的驾驶舱数据

---

🎯 功能特点

核心功能

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: 查看农机数据

自动更新：
- 农机基本信息
- 运行状态
- 作业数据
- 关键参数

---

🔧 技术实现

数据结构

// 农机记录
interface MachineryRecord {
  id: string;
  name: string;
  model: string;
  equipmentNumber?: string;
  status: string;
  currentField?: string;
  // ... 其他字段
}

状态管理

const [machinery, setMachinery] = useState<MachineryRecord[]>([]);
const [selectedMachineryId, setSelectedMachineryId] = useState<string>('');
const [selectedMachinery, setSelectedMachinery] = useState<MachineryRecord | null>(null);

加载农机列表

useEffect(() => {
  // 从存储加载农机数据
  const machineryData = machineryStorage.getAllMachinery();
  setMachinery(machineryData);
  
  // 默认选择第一台
  if (machineryData.length > 0) {
    setSelectedMachineryId(machineryData[0].id);
    setSelectedMachinery(machineryData[0]);
  }
}, []);

切换农机

const handleMachineryChange = (machineryId: string) => {
  setSelectedMachineryId(machineryId);
  const selected = machinery.find(m => m.id === machineryId);
  setSelectedMachinery(selected || null);
};

动态显示

// 农机名称和型号
<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. 农机选择器

位置: 页面右上角

样式:

<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
    ↓
界面自动刷新显示新数据
    ↓
- 农机名称
- 型号信息
- 设备编号
- 运行状态
- 作业数据

---

📝 示例数据

农机列表示例

[
  {
    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
  }
]

---

✅ 更新清单

界面更新

• ✅ 顶部添加农机选择器
• ✅ 选择器右对齐布局
• ✅ 标题改为"农业驾驶舱"

功能实现

• ✅ 加载农机列表
• ✅ 默认选择第一台
• ✅ 支持切换农机
• ✅ 数据实时更新

数据显示

• ✅ 动态显示农机名称
• ✅ 动态显示型号
• ✅ 动态显示设备编号
• ✅ 状态标识自适应颜色
• ✅ 当前位置显示

导入依赖

• ✅ Select 组件
• ✅ machineryStorage
• ✅ MachineryRecord 类型
• ✅ 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
状态: ✅ 农机切换功能已完成

核心改进: 农业驾驶舱支持切换农机，灵活监控多台设备运行状态！