# 首页仪表盘图表功能设计

## 1. 概述

在 WMS 前端首页添加仪表盘图表，展示仓库的出入库统计和库存数据。数据基于任务完成时间（TaskInfo.ActualEndTime）进行统计。

## 2. 页面布局

采用混合布局：顶部大图展示趋势，下方网格展示对比和详情。

```
┌─────────────────────────────────────────────────┐
│         本月出入库趋势（折线+柱状组合图）          │
├────────────────────┬────────────────────────────┤
│   今日出入库对比     │     本周出入库对比           │
│   （柱状图）         │     （柱状图）               │
├────────────────────┼────────────────────────────┤
│   本月出入库对比     │     当前库存总量             │
│   （柱状图）         │     （数字卡片）             │
├────────────────────┼────────────────────────────┤
│   库存库龄分布       │     各仓库库存分布           │
│   （柱状图）         │     （柱状图）               │
└────────────────────┴────────────────────────────┘
```

## 3. 后端接口设计

### 3.1 总览接口

**GET** `/api/Dashboard/Overview`

返回首页加载时需要的所有汇总数字，一次调用获取关键指标。

**响应数据：**
```json
{
  "Status": true,
  "Data": {
    "TodayInbound": 120,
    "TodayOutbound": 95,
    "MonthInbound": 3500,
    "MonthOutbound": 3200,
    "TotalStock": 45000
  }
}
```

### 3.2 每日统计接口

**GET** `/api/Dashboard/DailyStats?days=30`

返回近N天的每日出入库统计。

**响应数据：**
```json
{
  "Status": true,
  "Data": [
    { "Date": "2026-03-01", "Inbound": 120, "Outbound": 95 },
    { "Date": "2026-03-02", "Inbound": 150, "Outbound": 130 },
    ...
  ]
}
```

### 3.3 每周统计接口

**GET** `/api/Dashboard/WeeklyStats?weeks=12`

返回近N周的每周出入库统计。

**响应数据：**
```json
{
  "Status": true,
  "Data": [
    { "Week": "2026-W09", "Inbound": 850, "Outbound": 780 },
    { "Week": "2026-W10", "Inbound": 920, "Outbound": 870 },
    ...
  ]
}
```

### 3.4 每月统计接口

**GET** `/api/Dashboard/MonthlyStats?months=12`

返回近N月的每月出入库统计。

**响应数据：**
```json
{
  "Status": true,
  "Data": [
    { "Month": "2025-04", "Inbound": 3500, "Outbound": 3200 },
    { "Month": "2025-05", "Inbound": 3800, "Outbound": 3600 },
    ...
  ]
}
```

### 3.5 库存库龄分布接口

**GET** `/api/Dashboard/StockAgeDistribution`

返回库存库龄分布数据。

**响应数据：**
```json
{
  "Status": true,
  "Data": [
    { "Range": "7天内", "Count": 12000 },
    { "Range": "7-30天", "Count": 18000 },
    { "Range": "30-90天", "Count": 10000 },
    { "Range": "90天以上", "Count": 5000 }
  ]
}
```

### 3.6 各仓库库存分布接口

**GET** `/api/Dashboard/StockByWarehouse`

返回各仓库的库存数量分布。

**响应数据：**
```json
{
  "Status": true,
  "Data": [
    { "Warehouse": "仓库A", "Count": 15000 },
    { "Warehouse": "仓库B", "Count": 12000 },
    { "Warehouse": "仓库C", "Count": 18000 }
  ]
}
```

## 4. 技术实现

### 4.1 后端实现

**新增文件：**
- `WIDESEA_WMSServer/Controllers/Dashboard/DashboardController.cs` - 仪表盘控制器

**数据来源：**
- `TaskInfo` 表：`ActualEndTime` 字段判断任务完成时间
- `TaskType`：1=入库任务，2=出库任务
- `StockInfo` 表：当前库存数据，`CreateTime` 作为入库时间计算库龄

**统计数据逻辑：**
- 按 `ActualEndTime` 的日期/周/月分组统计任务数量
- 库龄 = 当前时间 - `CreateTime`

### 4.2 前端实现

**修改文件：**
- `WIDESEA_WMSClient/src/views/Home.vue` - 替换为空白的首页

**图表组件：**
- 复用 `src/views/charts/bigdata.vue` 中的 ECharts 使用模式
- 使用 ECharts 5.0.2

**页面结构：**
```
Home.vue
├── 本月趋势图（折线+柱状组合）
├── 今日/本周/本月出入库对比（柱状图）
├── 当前库存总量（数字卡片）
├── 库存库龄分布（柱状图）
└── 各仓库库存分布（柱状图）
```

**API 调用：**
- 首页加载时调用 Overview 接口获取汇总数据
- 各图表组件 mounted 时调用对应接口获取详细数据

## 5. 实现任务

### 后端
1. 创建 DashboardController
2. 实现 Overview 接口
3. 实现 DailyStats 接口
4. 实现 WeeklyStats 接口
5. 实现 MonthlyStats 接口
6. 实现 StockAgeDistribution 接口
7. 实现 StockByWarehouse 接口

### 前端
1. 重写 Home.vue，使用 ECharts 实现仪表盘布局
2. 实现 Overview 接口调用
3. 实现各图表组件
4. 调整图表样式和响应式布局

## 6. 预计文件变更

**新增：**
- `WIDESEA_WMSServer/Controllers/Dashboard/DashboardController.cs`

**修改：**
- `WIDESEA_WMSClient/src/views/Home.vue`

**参考：**
- `WIDESEA_WMSClient/src/views/charts/bigdata.vue` - ECharts 使用示例