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

## 1. 概述

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

> **数据来源说明：** 已完成任务存储在历史表 `Dt_Task_Hty` 中，使用 `InsertTime`（任务完成后移入历史的时间）作为任务完成时间。

## 2. 页面布局

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

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

> 第一行（本月趋势图）：全宽显示
> 下方 2x2 网格：4个图表均匀分布

## 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天的每日出入库统计。

**参数：**
- `days`：天数，默认 30，最大 365
- 统计基于服务器本地时间，当日数据包含当日统计

**响应数据：**
```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周的每周出入库统计。周从周一开始计算。

**参数：**
- `weeks`：周数，默认 12

**响应数据：**
```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月的每月出入库统计。

**参数：**
- `months`：月数，默认 12

**响应数据：**
```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` - 仪表盘控制器

**数据来源：**
- `Dt_Task_Hty` 表：已完成任务的历史表，使用 `InsertTime` 作为任务完成时间
- `TaskTypeEnum` 枚举：入库任务范围 500-600（如 `Inbound=510`），出库任务范围 100-200（如 `Outbound=100`）
- `Dt_StockInfo` 表：当前库存数据，使用 `CreateDate` 作为入库时间计算库龄

**统计数据逻辑：**
- 按 `InsertTime` 的日期/周/月分组统计任务数量
- 入库判断：`TaskType >= 500 && TaskType < 700`
- 出库判断：`TaskType >= 100 && TaskType < 300`
- 库龄 = 当前时间 - `CreateDate`

### 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 使用示例