# 水肥控制页面 - 多设备支持与按钮移除更新

## 🎯 更新概述

对水肥控制页面进行了重大升级，实现了多水肥机设备支持，并移除了刷新数据和导出报告按钮，优化了用户界面。

## ✅ 已完成的更新

### 1. **移除顶部按钮** ❌

#### 移除前
```tsx
<div className="flex gap-2">
  <Button variant="outline">
    <RefreshCw className="w-4 h-4 mr-2" />
    刷新数据
  </Button>
  <Button variant="outline">
    <Download className="w-4 h-4 mr-2" />
    导出报告
  </Button>
</div>
```

#### 移除后
```tsx
<div className="flex items-center gap-4">
  <Label>选择水肥机</Label>
  <Select value={selectedMachineId} onValueChange={setSelectedMachineId}>
    <SelectTrigger className="w-[200px]">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      {machines.map((machine) => (
        <SelectItem key={machine.id} value={machine.id}>
          {machine.name}
        </SelectItem>
      ))}
    </SelectContent>
  </Select>
</div>
```

**移除的按钮：**
- ❌ 刷新数据按钮
- ❌ 导出报告按钮

**新增功能：**
- ✅ 水肥机设备选择器

### 2. **多水肥机设备支持** 🔄

#### 水肥机数据结构
```typescript
// 从单个水肥机改为多个水肥机数组
const [machines, setMachines] = useState<WaterFertilizerMachine[]>([
  {
    id: 'wf-001',
    name: '1号大棚水肥一体机',
    ecValue: 2.35,
    ecTarget: 2.5,
    phValue: 6.8,
    phTarget: 6.5,
    status: '运行中',
  },
  {
    id: 'wf-002',
    name: '2号大棚水肥一体机',
    ecValue: 2.18,
    ecTarget: 2.3,
    phValue: 6.5,
    phTarget: 6.4,
    status: '待机',
  },
  {
    id: 'wf-003',
    name: '3号田块水肥一体机',
    ecValue: 2.52,
    ecTarget: 2.6,
    phValue: 6.9,
    phTarget: 6.7,
    status: '运行中',
  },
  {
    id: 'wf-004',
    name: '4号田块水肥一体机',
    ecValue: 2.08,
    ecTarget: 2.2,
    phValue: 6.3,
    phTarget: 6.2,
    status: '已停止',
  },
]);
```

#### 设备状态管理
```typescript
// 选中的水肥机ID
const [selectedMachineId, setSelectedMachineId] = useState('wf-001');

// 获取当前选中的水肥机
const machine = machines.find(m => m.id === selectedMachineId) || machines[0];
```

### 3. **肥料桶数据按设备分组** 🧪

#### 数据结构升级
```typescript
// 所有肥料桶数据（包含machineId字段）
const [allTanks, setAllTanks] = useState<(FertilizerTank & { machineId: string })[]>([
  // 1号水肥机
  { id: 'tank-1-1', machineId: 'wf-001', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 15, ratio: 40, currentLevel: 320, flowRate: 8.5 },
  { id: 'tank-1-2', machineId: 'wf-001', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 12, ratio: 30, currentLevel: 180, flowRate: 6.2 },
  { id: 'tank-1-3', machineId: 'wf-001', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 18, ratio: 30, currentLevel: 425, flowRate: 6.8 },
  
  // 2号水肥机
  { id: 'tank-2-1', machineId: 'wf-002', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 16, ratio: 35, currentLevel: 285, flowRate: 7.2 },
  { id: 'tank-2-2', machineId: 'wf-002', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 14, ratio: 35, currentLevel: 215, flowRate: 5.8 },
  { id: 'tank-2-3', machineId: 'wf-002', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 17, ratio: 30, currentLevel: 380, flowRate: 6.5 },
  
  // 3号水肥机
  { id: 'tank-3-1', machineId: 'wf-003', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 14, ratio: 42, currentLevel: 295, flowRate: 8.8 },
  { id: 'tank-3-2', machineId: 'wf-003', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 13, ratio: 28, currentLevel: 165, flowRate: 5.5 },
  { id: 'tank-3-3', machineId: 'wf-003', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 19, ratio: 30, currentLevel: 445, flowRate: 7.2 },
  
  // 4号水肥机
  { id: 'tank-4-1', machineId: 'wf-004', tankNo: 'A', name: 'A肥料桶', fertilizer: '氮肥溶液', concentration: 15, ratio: 38, currentLevel: 310, flowRate: 0 },
  { id: 'tank-4-2', machineId: 'wf-004', tankNo: 'B', name: 'B肥料桶', fertilizer: '磷肥溶液', concentration: 12, ratio: 32, currentLevel: 195, flowRate: 0 },
  { id: 'tank-4-3', machineId: 'wf-004', tankNo: 'C', name: 'C肥料桶', fertilizer: '钾肥溶液', concentration: 18, ratio: 30, currentLevel: 405, flowRate: 0 },
]);

// 根据选中的水肥机筛选肥料桶
const tanks = allTanks.filter(tank => tank.machineId === selectedMachineId);
```

#### 每个水肥机配置
```
水肥机1（1号大棚）：
  - A桶：氮肥溶液，15%浓度，40%配比，320L液位，8.5L/h流量
  - B桶：磷肥溶液，12%浓度，30%配比，180L液位，6.2L/h流量
  - C桶：钾肥溶液，18%浓度，30%配比，425L液位，6.8L/h流量

水肥机2（2号大棚）：
  - A桶：氮肥溶液，16%浓度，35%配比，285L液位，7.2L/h流量
  - B桶：磷肥溶液，14%浓度，35%配比，215L液位，5.8L/h流量
  - C桶：钾肥溶液，17%浓度，30%配比，380L液位，6.5L/h流量

水肥机3（3号田块）：
  - A桶：氮肥溶液，14%浓度，42%配比，295L液位，8.8L/h流量
  - B桶：磷肥溶液，13%浓度，28%配比，165L液位，5.5L/h流量
  - C桶：钾肥溶液，19%浓度，30%配比，445L液位，7.2L/h流量

水肥机4（4号田块）：
  - A桶：氮肥溶液，15%浓度，38%配比，310L液位，0L/h流量（已停止）
  - B桶：磷肥溶液，12%浓度，32%配比，195L液位，0L/h流量（已停止）
  - C桶：钾肥溶液，18%浓度，30%配比，405L液位，0L/h流量（已停止）
```

### 4. **阀门数据按设备分组** 💧

#### 数据结构升级
```typescript
// 所有阀门数据（包含machineId字段）
const [allValves, setAllValves] = useState<(Valve & { machineId: string })[]>([
  // 1号水肥机的阀门
  { id: 'valve-1-1', machineId: 'wf-001', valveNo: 'V-01', fieldName: '1号大棚', location: '东区A01', status: '开启', batteryVoltage: 12.5, solarVoltage: 18.2, pressure: 2.8, flowRate: 25.6, totalVolume: 1450 },
  { id: 'valve-1-2', machineId: 'wf-001', valveNo: 'V-02', fieldName: '1号大棚-西侧', location: '东区A02', status: '关闭', batteryVoltage: 11.8, solarVoltage: 17.5, pressure: 0, flowRate: 0, totalVolume: 0 },
  
  // 2号水肥机的阀门
  { id: 'valve-2-1', machineId: 'wf-002', valveNo: 'V-03', fieldName: '2号大棚', location: '西区B01', status: '开启', batteryVoltage: 12.2, solarVoltage: 18.8, pressure: 2.6, flowRate: 23.2, totalVolume: 1280 },
  { id: 'valve-2-2', machineId: 'wf-002', valveNo: 'V-04', fieldName: '2号大棚-东侧', location: '西区B02', status: '关闭', batteryVoltage: 12.0, solarVoltage: 18.0, pressure: 0, flowRate: 0, totalVolume: 0 },
  
  // 3号水肥机的阀门
  { id: 'valve-3-1', machineId: 'wf-003', valveNo: 'V-05', fieldName: '3号田块', location: '南区C01', status: '开启', batteryVoltage: 12.8, solarVoltage: 19.2, pressure: 2.9, flowRate: 27.8, totalVolume: 1580 },
  { id: 'valve-3-2', machineId: 'wf-003', valveNo: 'V-06', fieldName: '3号田块-北侧', location: '南区C02', status: '开启', batteryVoltage: 12.3, solarVoltage: 18.5, pressure: 2.7, flowRate: 24.5, totalVolume: 1320 },
  
  // 4号水肥机的阀门
  { id: 'valve-4-1', machineId: 'wf-004', valveNo: 'V-07', fieldName: '4号田块', location: '北区D01', status: '故障', batteryVoltage: 10.5, solarVoltage: 15.2, pressure: 0, flowRate: 0, totalVolume: 0 },
  { id: 'valve-4-2', machineId: 'wf-004', valveNo: 'V-08', fieldName: '4号田块-南侧', location: '北区D02', status: '关闭', batteryVoltage: 11.5, solarVoltage: 17.0, pressure: 0, flowRate: 0, totalVolume: 0 },
]);

// 根据选中的水肥机筛选阀门
const valves = allValves.filter(valve => valve.machineId === selectedMachineId);
```

#### 每个水肥机的阀门配置
```
水肥机1（1号大棚）：
  - V-01：1号大棚，东区A01，开启状态
  - V-02：1号大棚-西侧，东区A02，关闭状态

水肥机2（2号大棚）：
  - V-03：2号大棚，西区B01，开启状态
  - V-04：2号大棚-东侧，西区B02，关闭状态

水肥机3（3号田块）：
  - V-05：3号田块，南区C01，开启状态
  - V-06：3号田块-北侧，南区C02，开启状态

水肥机4（4号田块）：
  - V-07：4号田块，北区D01，故障状态
  - V-08：4号田块-南侧，北区D02，关闭状态
```

### 5. **更新的处理函数** 🔧

#### 系统启停控制
```typescript
const handleSystemToggle = (enabled: boolean) => {
  setSystemEnabled(enabled);
  // 更新当前选中的水肥机状态
  setMachines(machines.map(m => 
    m.id === selectedMachineId 
      ? { ...m, status: enabled ? '运行中' : '已停止' }
      : m
  ));
  toast.success(`${machine.name} ${enabled ? '已启动' : '已停止'}`);
};
```

#### 肥料桶参数更新
```typescript
const handleTankUpdate = (tankId: string, field: keyof FertilizerTank, value: string | number) => {
  // 更新所有肥料桶数据中的指定桶
  setAllTanks(allTanks.map(t => t.id === tankId ? { ...t, [field]: value } : t));
};
```

#### 水肥机参数更新
```typescript
const handleMachineUpdate = (field: keyof WaterFertilizerMachine, value: number) => {
  // 更新当前选中的水肥机参数
  setMachines(machines.map(m => 
    m.id === selectedMachineId 
      ? { ...m, [field]: value }
      : m
  ));
};
```

#### 阀门开关控制
```typescript
const handleValveToggle = (valveId: string) => {
  const valve = allValves.find(v => v.id === valveId);
  if (!valve) return;

  if (valve.status === '故障') {
    toast.error('阀门故障，无法操作');
    return;
  }

  const newStatus: ValveStatus = valve.status === '开启' ? '关闭' : '开启';
  // 更新所有阀门数据中的指定阀门
  setAllValves(allValves.map(v => v.id === valveId ? { ...v, status: newStatus } : v));
  toast.success(`${valve.valveNo} 已${newStatus === '开启' ? '开启' : '关闭'}`);
};
```

### 6. **自动切换逻辑** 🔄

#### 切换水肥机时自动更新阀门选择
```typescript
// 切换水肥机时，更新选中的阀门为当前水肥机的第一个阀门
useEffect(() => {
  const currentMachineValves = allValves.filter(v => v.machineId === selectedMachineId);
  if (currentMachineValves.length > 0 && !currentMachineValves.find(v => v.id === selectedValveId)) {
    setSelectedValveId(currentMachineValves[0].id);
  }
}, [selectedMachineId, allValves, selectedValveId]);
```

**自动切换功能：**
- ✅ 切换水肥机时，自动选择该水肥机的第一个阀门
- ✅ 保证选中的阀门始终属于当前水肥机
- ✅ 避免跨设备选择阀门的错误

### 7. **UI界面更新** 🎨

#### 顶部区域布局
```
┌──────────────────────────────────────────────────────────────┐
│ 水肥控制                                     选择水肥机  [▼] │
│ 施肥参数配置、实时监测、阀门控制、历史数据分析              │
└──────────────────────────────────────────────────────────────┘
```

**变化对比：**
```
修改前：
┌──────────────────────────────────────────────────────────────┐
│ 水肥控制                    [刷新数据]  [导出报告]           │
└──────────────────────────────────────────────────────────────┘

修改后：
┌──────────────────────────────────────────────────────────────┐
│ 水肥控制                    选择水肥机  [▼ 1号大棚水肥一体机]│
└──────────────────────────────────────────────────────────────┘
```

#### 设备选择器
```tsx
<div className="flex items-center gap-4">
  <Label>选择水肥机</Label>
  <Select value={selectedMachineId} onValueChange={setSelectedMachineId}>
    <SelectTrigger className="w-[200px]">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="wf-001">1号大棚水肥一体机</SelectItem>
      <SelectItem value="wf-002">2号大棚水肥一体机</SelectItem>
      <SelectItem value="wf-003">3号田块水肥一体机</SelectItem>
      <SelectItem value="wf-004">4号田块水肥一体机</SelectItem>
    </SelectContent>
  </Select>
</div>
```

### 8. **统计卡片自动更新** 📊

所有统计卡片会根据选中的水肥机自动更新数据：

```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 系统状态        │ │ 当前EC值        │ │ 当前PH值        │ │ 开启阀门        │
│                 │ │                 │ │                 │ │                 │
│ 运行            │ │ 2.35            │ │ 6.8             │ │ 1               │
│ 1号大棚水肥一体机│ │ mS/cm(目标:2.5) │ │ pH(目标:6.5)    │ │ / 2 个阀门      │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └─────────────────┘
```

**动态数据：**
- ✅ 系统状态显示当前水肥机状态
- ✅ EC/PH值显示当前水肥机数据
- ✅ 阀门数量统计当前水肥机的阀门
- ✅ 所有数据随水肥机切换而变化

## 🎯 核心功能

### 1. **设备管理** 🔄

**功能清单：**
- ✅ 支持4台水肥机设备
- ✅ 设备选择器快速切换
- ✅ 每台设备独立配置
- ✅ 设备状态独立管理

**设备列表：**
```
1. 1号大棚水肥一体机 - 运行中
2. 2号大棚水肥一体机 - 待机
3. 3号田块水肥一体机 - 运行中
4. 4号田块水肥一体机 - 已停止
```

### 2. **数据隔离** 📊

**隔离机制：**
- ✅ 肥料桶数据按设备分组
- ✅ 阀门数据按设备分组
- ✅ 参数配置独立保存
- ✅ 运行状态独立控制

**数据结构：**
```
allTanks: 12个肥料桶（4台设备 × 3个桶）
allValves: 8个阀门（4台设备 × 2个阀门）
machines: 4台水肥机设备
```

### 3. **自动筛选** 🔍

**筛选逻辑：**
```typescript
// 根据选中的水肥机ID筛选数据
const tanks = allTanks.filter(tank => tank.machineId === selectedMachineId);
const valves = allValves.filter(valve => valve.machineId === selectedMachineId);
const machine = machines.find(m => m.id === selectedMachineId);
```

**筛选效果：**
- ✅ 只显示当前水肥机的肥料桶
- ✅ 只显示当前水肥机的阀门
- ✅ 只操作当前水肥机的参数
- ✅ 切换设备即时生效

### 4. **界面简化** 🎨

**移除的元素：**
- ❌ 刷新数据按钮（数据自动更新）
- ❌ 导出报告按钮（功能待后续集成）

**新增的元素：**
- ✅ 水肥机设备选择器
- ✅ 设备名称显示
- ✅ 设备状态指示

## 📊 数据统计

### 设备配置统计
```
总设备数：     4台
总肥料桶数：   12个（每台3个）
总阀门数：     8个（每台2个）
运行设备数：   2台
待机设备数：   1台
停止设备数：   1台
故障阀门数：   1个
```

### 每台设备详情
```
设备1（1号大棚）：
  - 状态：运行中
  - 肥料桶：3个（ABC桶）
  - 阀门：2个（1开1关）
  - EC值：2.35 mS/cm
  - PH值：6.8

设备2（2号大棚）：
  - 状态：待机
  - 肥料桶：3个（ABC桶）
  - 阀门：2个（1开1关）
  - EC值：2.18 mS/cm
  - PH值：6.5

设备3（3号田块）：
  - 状态：运行中
  - 肥料桶：3个（ABC桶）
  - 阀门：2个（全开）
  - EC值：2.52 mS/cm
  - PH值：6.9

设备4（4号田块）：
  - 状态：已停止
  - 肥料桶：3个（ABC桶）
  - 阀门：2个（1故障1关）
  - EC值：2.08 mS/cm
  - PH值：6.3
```

## 🔧 技术实现

### 1. **状态管理架构**

```typescript
// 全局设备数据
const [machines, setMachines] = useState<WaterFertilizerMachine[]>([...]);
const [allTanks, setAllTanks] = useState<(FertilizerTank & { machineId })[]>([...]);
const [allValves, setAllValves] = useState<(Valve & { machineId })[]>([...]);

// 当前选中设备
const [selectedMachineId, setSelectedMachineId] = useState('wf-001');

// 计算属性（自动筛选）
const machine = machines.find(m => m.id === selectedMachineId);
const tanks = allTanks.filter(t => t.machineId === selectedMachineId);
const valves = allValves.filter(v => v.machineId === selectedMachineId);
```

### 2. **数据关联设计**

```
machines (水肥机)
  └── machineId
       ├── allTanks (肥料桶)
       │    └── machineId: 'wf-001'
       └── allValves (阀门)
            └── machineId: 'wf-001'
```

### 3. **更新机制**

```typescript
// 更新流程
选择设备 → selectedMachineId变化 
       → useEffect触发 
       → 筛选tanks/valves 
       → UI自动更新
       → 阀门选择自动切换
```

## 🎉 总结

水肥控制页面多设备支持更新已全面完成！

### ✅ 完成的功能

**界面优化：**
- ✅ 移除刷新数据按钮
- ✅ 移除导出报告按钮
- ✅ 添加设备选择器
- ✅ 优化顶部布局

**多设备支持：**
- ✅ 4台水肥机设备
- ✅ 12个肥料桶（每台3个）
- ✅ 8个阀门（每台2个）
- ✅ 独立数据管理

**功能增强：**
- ✅ 设备快速切换
- ✅ 数据自动筛选
- ✅ 阀门自动切换
- ✅ 状态独立控制

### 📊 核心优势

- **数据隔离**：每台设备数据完全独立
- **操作安全**：避免跨设备误操作
- **界面简洁**：移除冗余按钮
- **扩展性强**：易于添加更多设备

现在用户可以通过顶部的设备选择器快速切换不同的水肥机设备，查看和控制每台设备的施肥参数、肥料桶状态、阀门控制等功能！🎉✨
