# 物资归还 - 归还历史与资产台账 - 日期范围切换功能

## 更新内容

### ✅ 已完成的修改

1. **日期范围切换器**
   - 在"归还历史与资产台账"标签页顶部添加了时间范围选择器
   - 支持"按月"和"按年"两种模式切换
   - 采用Toggle按钮设计，切换流畅直观

2. **图表数据动态更新**
   - **归还趋势与损坏率图表**：根据选择的时间范围显示对应数据
   - **资产损耗趋势图表**：同步更新为对应时间维度的数据
   - 图表标题显示当前统计维度标识

3. **数据结构**
   - **按月数据**：显示最近5个月的统计（6月-10月）
   - **按年数据**：显示最近5年的统计（2020-2024）
   - 包含归还次数、损坏次数、维修需求等多维度数据

## 使用方法

### 切换时间范围

1. 进入"物资归还" → "归还历史与资产台账"标签页
2. 在页面顶部找到"数据统计报表"卡片
3. 点击"按月"或"按年"按钮进行切换
4. 所有相关图表将自动更新为对应时间维度的数据

### 界面布局

```
┌─────────────────────────────────────────────────┐
│ 📅 数据统计报表          [按月] [按年]          │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ 📊 归还趋势与损坏率 [按月统计]                  │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│   折线图（归还次数、损坏次数）                   │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ 📉 资产损耗趋势与维修成本预测 [按月统计]        │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│   [统计卡片] [统计卡片] [统计卡片]              │
│   折线图（损坏趋势、维修需求）                   │
└─────────────────────────────────────────────────┘
```

## 数据示例

### 按月统计数据（最近5个月）
- **6月**：归还28次，损坏2次，维修5次
- **7月**：归还35次，损坏3次，维修6次
- **8月**：归还32次，损坏1次，维修4次
- **9月**：归还40次，损坏4次，维修7次
- **10月**：归还38次，损坏2次，维修6次

### 按年统计数据（最近5年）
- **2020年**：归还285次，损坏18次，维修42次
- **2021年**：归还342次，损坏25次，维修51次
- **2022年**：归还398次，损坏21次，维修58次
- **2023年**：归还456次，损坏29次，维修67次
- **2024年**：归还412次，损坏23次，维修62次

## 技术实现

### 状态管理
```typescript
const [dateRange, setDateRange] = useState<'year' | 'month'>('month');
```

### 数据生成逻辑
```typescript
const returnTrendData = dateRange === 'year' 
  ? [年度数据数组]
  : [月度数据数组];
```

### 图表配置
- 所有趋势图表的 `XAxis` 使用 `dataKey="period"`
- 支持同一数据结构适配不同时间维度
- 图表标题动态显示当前统计维度

## 界面优化

1. **切换按钮设计**
   - 未选中：灰色文字，无背景
   - 选中：绿色文字，白色背景，阴影效果
   - 悬停：文字颜色加深

2. **图表标识**
   - 每个受影响的图表标题后添加徽章标识
   - 清晰标注"按年统计"或"按月统计"

3. **响应式更新**
   - 切换时间范围后，所有相关图表立即更新
   - 数据平滑过渡，用户体验流畅

## 扩展说明

### 可添加的功能
1. **自定义日期范围**：添加日期选择器，支持任意时间段查询
2. **季度视图**：增加按季度统计的选项
3. **数据对比**：支持同比、环比数据对比
4. **数据导出**：支持导出当前时间范围的统计报表
5. **趋势预测**：基于历史数据预测未来趋势

### 数据来源
当前使用模拟数据。在实际应用中，应该：
1. 从后端API获取真实的统计数据
2. 根据选择的时间范围动态查询
3. 支持数据缓存，提高查询效率

## 测试清单

- [x] 按月/按年切换功能正常
- [x] 图表数据根据选择动态更新
- [x] 图表标题显示正确的统计维度
- [x] 切换按钮样式正确
- [x] 所有图表使用统一的数据字段名
- [x] 页面布局保持整洁

## 相关文件

- `/components/asset/AssetReturn.tsx` - 主组件文件
- 状态变量：`dateRange`
- 数据变量：`returnTrendData`
- 图表组件：LineChart, BarChart

---

**更新时间**：2024-10-22  
**版本**：v1.0  
**状态**：✅ 已完成
