# 智能灌溉 - 历史监测数据页面更新

## 🎯 更新概述

将历史监测数据页面改造为**与实时监测数据页面一致的结构**，采用多设备监控模式，区别在于：
- ✅ **默认展示近7天数据**
- ✅ **支持自定义时间段查询**（7/15/30天 + 自定义）

## ✅ 已完成的功能

### 1. **时间范围选择器** 📅

#### 预设时间范围
```typescript
- 最近7天（默认）
- 最近15天
- 最近30天
- 自定义时间段
```

#### 自定义时间段
```
┌───────────────────────────────────────────────┐
│ 时间范围 [自定义时间段 ▼]                     │
│ 开始日期 [2024-10-01] 结束日期 [2024-10-24]   │
│ [查询] 按钮                                    │
└───────────────────────────────────────────────┘
```

**功能特性：**
- ✅ **日期选择器** - HTML5 date input
- ✅ **智能验证** - 结束日期必须大于开始日期
- ✅ **范围限制** - 最多查询90天数据
- ✅ **实时反馈** - 显示当前数据天数

#### 验证规则
```typescript
1. 日期不能为空
2. 结束日期 > 开始日期
3. 查询范围 ≤ 90天
4. 自动计算天数差
```

### 2. **设备统计卡片** 📊

#### 卡片布局
```
┌─────────────────────────────────────────────────────┐
│ [设备1] [设备2] [设备3] [设备4]  (响应式4列网格)    │
└─────────────────────────────────────────────────────┘
```

#### 每个卡片显示
```
┌──────────────────────────────┐
│ 1号大棚水肥一体机             │
│ 1号温室大棚                   │
│                              │
│ 💧 平均水压   2.65 bar       │
│ 🌊 平均流量   25.8 L/min     │
│ 💦 累计用水   18,500 L       │
│ 📅 运行天数   7 天            │
└──────────────────────────────┘
```

#### 统计指标
| 指标 | 图标 | 单位 | 说明 |
|------|------|------|------|
| 平均水压 | 💧 Gauge | bar | 时间段内平均水压 |
| 平均流量 | 🌊 Waves | L/min | 时间段内平均流量 |
| 累计用水 | 💦 Droplets | L | 时间段累计用水量 |
| 运行天数 | 📅 Calendar | 天 | 实际运行天数 |

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

#### 特性
- ✅ **多设备对比** - 4台设备水压曲线
- ✅ **历史数据** - 显示选定时间范围的数据
- ✅ **按日统计** - X轴显示日期（MM-DD格式）
- ✅ **颜色一致** - 与实时监测使用相同配色

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

#### X轴格式
```
10-18, 10-19, 10-20, ..., 10-24
```

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

#### 特性
- ✅ **多设备流量对比** - 4台设备流量曲线
- ✅ **日均值展示** - 每天的平均流量
- ✅ **待机识别** - 待机设备显示0值
- ✅ **平滑曲线** - 清晰展示变化趋势

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

### 5. **日累计水量趋势图** 💧

#### 特性
- ✅ **每日用水量** - 显示每天的累计用水量
- ✅ **设备对比** - 清晰对比各设备用水情况
- ✅ **数据格式化** - 使用千分位分隔符
- ✅ **趋势分析** - 识别用水高峰和低谷

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

## 🔧 技术实现

### 数据结构

#### 设备历史统计
```typescript
interface DeviceHistorySummary {
  deviceId: string;         // 设备ID
  deviceName: string;       // 设备名称
  fieldName: string;        // 地块名称
  avgPressure: number;      // 平均水压
  avgFlowRate: number;      // 平均流量
  totalVolume: number;      // 累计用水量
  runningDays: number;      // 运行天数
}
```

#### 多设备历史数据
```typescript
interface MultiDeviceRealtimeData {
  time: string;              // 日期 (MM-DD)
  [key: string]: number | string; // 动态设备数据
  // 例如:
  // 'dev-001-pressure': 2.65
  // 'dev-001-flowRate': 25.8
  // 'dev-001-volume': 2650
}
```

### 数据生成函数

```typescript
const generateMultiDeviceHistoryData = (days: number) => {
  const data = [];
  const now = new Date();
  
  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(now.getTime() - i * 24 * 60 * 60 * 1000);
    const dateStr = `${(date.getMonth() + 1)
      .toString()
      .padStart(2, '0')}-${date.getDate()
      .toString()
      .padStart(2, '0')}`;
    
    data.push({
      time: dateStr,
      // 设备1 - 每天运行
      'dev-001-pressure': 2.5 + Math.random() * 0.4,
      'dev-001-flowRate': 24 + Math.random() * 4,
      'dev-001-volume': Math.floor(2400 + Math.random() * 400),
      // 设备2 - 部分时间运行（每3天休息1天）
      'dev-002-pressure': i % 3 === 0 ? 0 : 2.3 + Math.random() * 0.4,
      // ... 其他设备
    });
  }
  return data;
};
```

### 时间范围处理

#### 预设范围
```typescript
const handleDateRangeChange = (value: string) => {
  setHistoryDateRange(value);
  if (value === 'custom') {
    setCustomDateRange(true);
  } else {
    setCustomDateRange(false);
    const days = parseInt(value);
    setMultiDeviceHistoryData(generateMultiDeviceHistoryData(days));
  }
};
```

#### 自定义查询
```typescript
const handleCustomDateQuery = () => {
  // 1. 验证日期
  if (!startDate || !endDate) {
    toast.error('请选择开始和结束日期');
    return;
  }
  
  // 2. 计算天数差
  const start = new Date(startDate);
  const end = new Date(endDate);
  const daysDiff = Math.ceil(
    (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)
  ) + 1;
  
  // 3. 验证范围
  if (daysDiff <= 0) {
    toast.error('结束日期必须大于开始日期');
    return;
  }
  
  if (daysDiff > 90) {
    toast.error('查询时间范围不能超过90天');
    return;
  }
  
  // 4. 生成数据
  setMultiDeviceHistoryData(generateMultiDeviceHistoryData(daysDiff));
  toast.success(`已加载${daysDiff}天的历史数据`);
};
```

## 📐 页面布局对比

### 修改前 ❌
```
历史监测数据
├─ 时间范围选择（3个预设）
├─ 平均水压趋势图（单条线）
├─ 平均流量趋势图（单条线）
└─ 日累计水量图（单条线）
```

### 修改后 ✅
```
历史监测数据
├─ 时间范围选择
│  ├─ 预设范围（7/15/30天）
│  └─ 自定义时间段（开始+结束日期）
├─ 设备统计卡片（4个）
│  ├─ 平均水压
│  ├─ 平均流量
│  ├─ 累计用水
│  └─ 运行天数
├─ 水压变化趋势图（4条线）
├─ 流量变化趋势图（4条线）
└─ 日累计水量图（4条线）
```

## 🎨 视觉设计

### 时间选择器布局
```
┌────────────────────────────────────────────────────────┐
│ 时间范围 [最近7天 ▼]              当前显示：7 天数据    │
└────────────────────────────────────────────────────────┘

自定义模式：
┌────────────────────────────────────────────────────────┐
│ 时间范围 [自定义时间段 ▼]                              │
│ 开始日期 [📅 2024-10-01]  结束日期 [📅 2024-10-24]   │
│ [查询]                           当前显示：7 天数据    │
└────────────────────────────────────────────────────────┘
```

### 统计卡片配色
```css
平均水压: bg-blue-50   (蓝色)
平均流量: bg-purple-50 (紫色)
累计用水: bg-orange-50 (橙色)
运行天数: bg-green-50  (绿色)
```

### 设备曲线颜色（与实时监测一致）
```css
设备1: #3b82f6  (蓝色)
设备2: #10b981  (绿色)
设备3: #f59e0b  (橙色)
设备4: #8b5cf6  (紫色)
```

## 💡 使用场景

### 场景1：查看近7天运行情况（默认）
**操作：** 进入历史监测数据页面
**结果：**
- ✅ 自动加载近7天数据
- ✅ 4个设备统计卡片显示7天汇总
- ✅ 3个趋势图显示7天变化

### 场景2：对比近30天数据
**操作：** 
1. 选择时间范围："最近30天"
2. 系统自动加载数据

**结果：**
- ✅ 统计卡片更新为30天汇总
- ✅ 趋势图显示30个数据点
- ✅ 清晰看到月度变化趋势

### 场景3：自定义查询特定时间段
**操作：**
1. 选择时间范围："自定义时间段"
2. 开始日期：2024-10-01
3. 结束日期：2024-10-15
4. 点击"查询"按钮

**结果：**
- ✅ 加载15天的历史数据
- ✅ 显示提示："已加载15天的历史数据"
- ✅ 统计和趋势图更新

### 场景4：错误处理
**情况1：** 未选择日期
- ❌ 提示："请选择开始和结束日期"

**情况2：** 结束日期早于开始日期
- ❌ 提示："结束日期必须大于开始日期"

**情况3：** 查询范围超过90天
- ❌ 提示："查询时间范围不能超过90天"

## 📊 数据模拟说明

### 设备运行模式
```
设备1 (1号大棚): 每天运行，数据连续
设备2 (2号田块): 每3天休息1天
设备3 (3号田块): 每天运行，数据连续
设备4 (4号温室): 每4天休息1天
```

### 数据范围
```
水压: 2.3-3.4 bar（随机波动）
流量: 22-31 L/min（随机波动）
日累计: 2000-3300 L（随机波动）
```

### 统计汇总（7天示例）
```
设备1:
- 平均水压: 2.65 bar
- 平均流量: 25.8 L/min
- 累计用水: 18,500 L
- 运行天数: 7 天

设备2:
- 平均水压: 2.45 bar
- 平均流量: 23.2 L/min
- 累计用水: 12,800 L
- 运行天数: 5 天（休息2天）

设备3:
- 平均水压: 3.15 bar
- 平均流量: 28.6 L/min
- 累计用水: 22,100 L
- 运行天数: 7 天

设备4:
- 平均水压: 2.85 bar
- 平均流量: 26.4 L/min
- 累计用水: 15,600 L
- 运行天数: 6 天（休息1天）
```

## 🔄 实时监测 vs 历史监测对比

### 相同点 ✅
1. **设备卡片布局** - 4列响应式网格
2. **图表结构** - 3个趋势图（水压/流量/累计）
3. **设备配色** - 使用相同的颜色映射
4. **图表高度** - 统一350px高度

### 不同点 🔀

| 维度 | 实时监测 | 历史监测 |
|------|---------|---------|
| **时间范围** | 最近2小时，固定 | 7/15/30天 + 自定义 |
| **数据粒度** | 5分钟/点 | 1天/点 |
| **卡片指标** | 当前值（瞬时） | 平均值（统计） |
| **累计字段** | 近2h累计 | 总累计 + 运行天数 |
| **X轴格式** | HH:MM（时间） | MM-DD（日期） |
| **更新方式** | 实时更新标识 | 历史数据标识 |
| **查询功能** | 无需查询 | 支持时间段查询 |

### 卡片指标对比

#### 实时监测卡片
```
设备名称 [运行中]
地块名称

💧 水压      2.8 bar       (当前值)
🌊 瞬时流量   25.6 L/min    (当前值)
💦 近2h累计   2,850 L       (2小时累计)
```

#### 历史监测卡片
```
设备名称
地块名称

💧 平均水压   2.65 bar      (时间段平均)
🌊 平均流量   25.8 L/min    (时间段平均)
💦 累计用水   18,500 L      (时间段累计)
📅 运行天数   7 天          (新增字段)
```

## 📱 响应式设计

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

### 时间选择器布局
```css
/* 移动端：垂直排列 */
flex-wrap gap-4

/* 桌面端：水平排列 */
时间范围 | 开始日期 | 结束日期 | 查询按钮 | 数据提示
```

## 🚀 下一步优化建议

### 功能增强
1. **数据导出** - 导出历史数据为Excel/CSV
2. **设备筛选** - 选择显示特定设备
3. **数据对比** - 同一设备不同时间段对比
4. **报警标记** - 在趋势图上标记异常点

### 交互优化
1. **快捷时间** - 添加"本周"、"本月"快捷选项
2. **数据缓存** - 缓存已查询的时间段
3. **加载状态** - 查询时显示加载动画
4. **数据下钻** - 点击日期查看当天详细数据

### 统计增强
1. **同比环比** - 显示与上周期对比
2. **峰谷分析** - 自动标记最高/最低值
3. **趋势预测** - 基于历史数据预测
4. **异常检测** - 自动识别异常数据点

## ✅ 测试要点

### 功能测试
- [ ] 默认加载7天数据
- [ ] 切换预设时间范围正常
- [ ] 自定义时间段查询正常
- [ ] 日期验证规则生效
- [ ] 数据天数显示正确
- [ ] 统计卡片数据正确
- [ ] 三个趋势图正常渲染
- [ ] 设备颜色区分清晰

### 边界测试
- [ ] 开始日期 = 结束日期（1天）
- [ ] 查询1天数据
- [ ] 查询90天数据（上限）
- [ ] 查询91天数据（应拒绝）
- [ ] 未选择日期时点击查询
- [ ] 结束日期早于开始日期

### 视觉测试
- [ ] 响应式布局正常（手机/平板/桌面）
- [ ] 时间选择器自适应
- [ ] 自定义模式显示/隐藏正常
- [ ] 卡片间距合理
- [ ] 图表高度适中
- [ ] 颜色搭配协调

### 性能测试
- [ ] 查询大数据量不卡顿（90天）
- [ ] 图表渲染流畅
- [ ] 数据切换响应快速

## 🎉 总结

历史监测数据页面已成功改造，实现了：
- ✅ **与实时监测一致的结构** - 卡片+趋势图
- ✅ **多设备监控** - 同时展示4台设备
- ✅ **灵活的时间查询** - 7/15/30天 + 自定义
- ✅ **完善的验证机制** - 日期验证和范围限制
- ✅ **清晰的统计汇总** - 4个关键指标
- ✅ **响应式设计** - 支持多种屏幕尺寸

现在可以方便地查询和分析任意时间段内多台水肥机的历史运行数据，通过统计卡片快速了解整体情况，通过趋势图深入分析变化规律！🎊
