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

## ✅ 功能已添加

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

---

## 🎯 功能特点

### 核心功能

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  
**状态**: ✅ **农机切换功能已完成**

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