# 智能灌溉 - 实时监测数据页面更新

## 🎯 更新概述

将实时监测数据页面从单一数据源改造为**多设备监控模式**，支持同时监控多台水肥机的运行状态和实时数据。

## ✅ 已完成的功能

### 1. **设备状态卡片** 📊

#### 卡片布局
```
┌─────────────────────────────────────────────────────┐
│ [1号大棚] [2号田块] [3号田块] [4号温室]  (响应式网格)│
└─────────────────────────────────────────────────────┘
```

#### 每个卡片显示
```
┌──────────────────────────────┐
│ 1号大棚水肥一体机     [运行中]│
│ 1号温室大棚                   │
│                              │
│ 💧 水压      2.8 bar         │
│ 🌊 瞬时流量   25.6 L/min     │
│ 💦 近2h累计   2,850 L        │
└──────────────────────────────┘
```

#### 状态标识
- 🟢 **运行中** - 绿色背景，设备正在工作
- 🔵 **待机** - 蓝色背景，设备处于待机状态
- ⚫ **离线** - 灰色背景，设备离线

#### 实时指标
| 指标 | 图标 | 单位 | 说明 |
|------|------|------|------|
| 水压 | 💧 Gauge | bar | 当前工作水压 |
| 瞬时流量 | 🌊 Waves | L/min | 当前流量 |
| 近2h累计 | 💦 Droplets | L | 近2小时累计用水量 |

### 2. **水压变化趋势图** 📈

#### 特性
- ✅ **多设备对比** - 同时显示4台设备的水压曲线
- ✅ **颜色区分** - 每台设备使用不同颜色
- ✅ **实时更新** - 显示最近2小时数据
- ✅ **图例显示** - 底部显示设备名称和颜色对应关系

#### 设备颜色映射
```typescript
设备1 (1号大棚) → 蓝色 #3b82f6
设备2 (2号田块) → 绿色 #10b981
设备3 (3号田块) → 橙色 #f59e0b
设备4 (4号温室) → 紫色 #8b5cf6
```

#### Y轴标注
```
水压 (bar)
```

### 3. **流量变化趋势图** 📊

#### 特性
- ✅ **多设备流量对比** - 同时显示4台设备
- ✅ **连续曲线** - 平滑的折线图展示
- ✅ **相同颜色体系** - 与水压图保持一致
- ✅ **待机设备处理** - 待机设备显示为0流量

#### Y轴标注
```
流量 (L/min)
```

### 4. **累计水量趋势图** 💧

#### 特性
- ✅ **累计数据展示** - 显示近2小时的累计用水量
- ✅ **上升趋势** - 运行中设备呈现累计上升
- ✅ **设备对比** - 清晰对比各设备用水量
- ✅ **数据格式化** - 数值使用千分位分隔符

#### Y轴标注
```
累计水量 (L)
```

## 🔧 技术实现

### 数据结构

#### 设备实时状态
```typescript
interface DeviceRealtimeStatus {
  deviceId: string;          // 设备ID
  deviceName: string;        // 设备名称
  fieldName: string;         // 地块名称
  status: '运行中' | '待机' | '离线';  // 状态
  currentPressure: number;   // 当前水压
  currentFlowRate: number;   // 瞬时流量
  accumulatedVolume2h: number; // 近2小时累计
}
```

#### 多设备时序数据
```typescript
interface MultiDeviceRealtimeData {
  time: string;              // 时间点
  [key: string]: number | string; // 动态设备数据
  // 例如:
  // 'dev-001-pressure': 2.8
  // 'dev-001-flowRate': 25.6
  // 'dev-001-volume': 2850
}
```

### 数据模拟

#### 设备状态数据
```typescript
const deviceRealtimeStatus = [
  {
    deviceId: 'dev-001',
    deviceName: '1号大棚水肥一体机',
    fieldName: '1号温室大棚',
    status: '运行中',
    currentPressure: 2.8,
    currentFlowRate: 25.6,
    accumulatedVolume2h: 2850,
  },
  // ... 其他设备
];
```

#### 时序数据生成
```typescript
// 生成近2小时数据，每5分钟一个点
for (let i = 120; i >= 0; i -= 5) {
  const dataPoint = {
    time: '14:30',
    'dev-001-pressure': 2.6 + Math.random() * 0.4,
    'dev-001-flowRate': 24 + Math.random() * 4,
    'dev-001-volume': 500 + (120 - i) * 23,
    // ... 其他设备
  };
}
```

## 📐 响应式设计

### 卡片网格布局
```css
grid-cols-1         /* 移动端：1列 */
md:grid-cols-2      /* 平板：2列 */
lg:grid-cols-4      /* 桌面：4列 */
```

### 图表高度
- **设备卡片**: 自适应高度
- **趋势图表**: 固定350px高度
- **容器宽度**: 100% 响应式

## 🎨 视觉设计

### 颜色体系

#### 状态颜色
```css
运行中: bg-green-100 text-green-700
待机:   bg-blue-100 text-blue-700
离线:   bg-gray-100 text-gray-700
```

#### 指标卡片背景
```css
水压:   bg-blue-50   (蓝色)
流量:   bg-purple-50 (紫色)
累计:   bg-orange-50 (橙色)
```

#### 设备曲线颜色
```css
设备1: #3b82f6  (蓝色)
设备2: #10b981  (绿色)
设备3: #f59e0b  (橙色)
设备4: #8b5cf6  (紫色)
```

### 图标使用
```typescript
水压:     <Gauge />    // 仪表盘
流量:     <Waves />    // 波浪
累计:     <Droplets /> // 水滴
```

## 📊 数据展示对比

### 修改前 ❌
```
单一数据源
├─ 水压趋势图（1条线）
├─ 流量趋势图（1条线）
└─ 累计水量图（1条线）
```

### 修改后 ✅
```
多设备监控
├─ 设备状态卡片（4个）
│  ├─ 设备名称 + 状态
│  ├─ 实时水压
│  ├─ 瞬时流量
│  └─ 近2h累计
├─ 水压趋势图（4条线）
├─ 流量趋势图（4条线）
└─ 累计水量图（4条线）
```

## 🔄 实时更新机制

### 当前实现
- 静态数据模拟
- 完整的2小时历史数据
- 5分钟采样间隔

### 未来扩展（可选）
```typescript
// 实时数据轮询
useEffect(() => {
  const interval = setInterval(() => {
    // 调用API获取最新数据
    fetchRealtimeData();
  }, 30000); // 每30秒更新
  
  return () => clearInterval(interval);
}, []);
```

## 💡 使用场景

### 场景1：多设备运行对比
**情况**: 1号和3号设备同时运行
- ✅ 卡片显示两台设备状态为"运行中"
- ✅ 图表显示两条活跃曲线
- ✅ 其他设备显示待机状态（0值）

### 场景2：设备异常发现
**情况**: 1号设备水压突然下降
- ✅ 水压趋势图显示1号设备曲线下降
- ✅ 卡片实时显示当前低水压值
- ✅ 与其他正常设备对比清晰可见

### 场景3：用水量统计
**情况**: 查看各设备近2小时用水量
- ✅ 卡片直接显示累计值
- ✅ 累计水量图显示增长趋势
- ✅ 一目了然设备用水情况

## 📱 界面布局示例

### 完整页面结构
```
┌─────────────────────────────────────────────────────┐
│ 智能灌溉 > 实时监测数据                              │
├─────────────────────────────────────────────────────┤
│                                                      │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐                   │
│ │设备1│ │设备2│ │设备3│ │设备4│  ← 状态卡片        │
│ └─────┘ └─────┘ └─────┘ └─────┘                   │
│                                                      │
│ ┌──────────────────────────────────────────────┐   │
│ │ 水压变化趋势（最近2小时）    [实时更新中]    │   │
│ │ ━━━ 设备1  ━━━ 设备2  ━━━ 设备3  ━━━ 设备4│   │
│ │                                              │   │
│ │         📈 多设备水压对比图表                │   │
│ │                                              │   │
│ └──────────────────────────────────────────────┘   │
│                                                      │
│ ┌──────────────────────────────────────────────┐   │
│ │ 流量变化趋势（最近2小时）    [实时更新中]    │   │
│ │ ━━━ 设备1  ━━━ 设备2  ━━━ 设备3  ━━━ 设备4│   │
│ │                                              │   │
│ │         📈 多设备流量对比图表                │   │
│ │                                              │   │
│ └──────────────────────────────────────────────┘   │
│                                                      │
│ ┌──────────────────────────────────────────────┐   │
│ │ 累计水量趋势（最近2小时）    [实时更新中]    │   │
│ │ ━━━ 设备1  ━━━ 设备2  ━━━ 设备3  ━━━ 设备4│   │
│ │                                              │   │
│ │         📈 多设备累计水量对比图表            │   │
│ │                                              │   │
│ └──────────────────────────────────────────────┘   │
│                                                      │
└─────────────────────────────────────────────────────┘
```

## 🎯 核心价值

### 对操作员
✅ **一屏掌控** - 无需切换，所有设备状态一目了然  
✅ **快速定位** - 异常设备立即发现  
✅ **对比分析** - 设备运行情况直观对比

### 对管理者
✅ **效率监控** - 各设备工作效率对比  
✅ **资源优化** - 识别高效/低效设备  
✅ **决策支持** - 基于数据的设备调度决策

### 对维护人员
✅ **健康状态** - 设备运行参数实时监控  
✅ **趋势分析** - 参数变化趋势预警  
✅ **故障预判** - 异常波动及时发现

## 📝 数据说明

### 当前模拟数据

#### 设备1（1号大棚）
- 状态: 运行中
- 水压: 2.6-3.0 bar（波动）
- 流量: 24-28 L/min（波动）
- 累计: 持续增长

#### 设备2（2号田块）
- 状态: 待机
- 水压: 0 bar
- 流量: 0 L/min
- 累计: 0 L

#### 设备3（3号田块）
- 状态: 运行中
- 水压: 3.0-3.4 bar（波动）
- 流量: 26-31 L/min（波动）
- 累计: 持续增长

#### 设备4（4号温室）
- 状态: 待机
- 水压: 0 bar
- 流量: 0 L/min
- 累计: 0 L

## 🚀 下一步优化建议

### 功能增强
1. **设备筛选** - 支持选择显示特定设备
2. **时间范围切换** - 支持1小时/2小时/4小时切换
3. **报警阈值** - 超过阈值高亮显示
4. **导出功能** - 导出监测数据报表

### 交互优化
1. **图表缩放** - 支持图表区域放大查看
2. **数据点提示** - 鼠标悬停显示详细数据
3. **设备快捷跳转** - 点击卡片查看设备详情
4. **实时刷新提示** - 显示最后更新时间

### 性能优化
1. **数据分页** - 长时间数据按需加载
2. **图表懒加载** - 滚动到视口再渲染
3. **数据压缩** - 历史数据采样压缩
4. **缓存策略** - 合理使用本地缓存

## ✅ 测试要点

### 功能测试
- [ ] 4个设备卡片正常显示
- [ ] 运行中设备数据实时更新
- [ ] 待机设备显示0值
- [ ] 三个趋势图正常渲染
- [ ] 图例与设备名称对应正确
- [ ] 颜色区分清晰

### 视觉测试
- [ ] 响应式布局正常（手机/平板/桌面）
- [ ] 卡片间距合理
- [ ] 图表高度适中
- [ ] 颜色搭配协调
- [ ] 字体大小合适

### 性能测试
- [ ] 页面加载速度
- [ ] 图表渲染流畅
- [ ] 数据量大时不卡顿
- [ ] 内存占用合理

## 🎉 总结

实时监测数据页面已成功改造为**多设备监控模式**，实现了：
- ✅ 4个设备状态卡片展示
- ✅ 3个多设备对比趋势图
- ✅ 完整的2小时历史数据
- ✅ 清晰的视觉设计和颜色体系
- ✅ 响应式布局支持

现在可以同时监控多台水肥机的实时运行状态，通过直观的卡片和图表快速发现异常、对比效率、分析趋势！🎊
