docs: 添加首页仪表盘图表功能设计

wanshenmean

2026-03-30 8f3d4ce067d4b39b05849f086188af6ce5d564b3

docs: 添加首页仪表盘图表功能设计

- 混合布局：顶部趋势图 + 下方网格对比图
- 后端6个Dashboard API接口
- 基于任务完成时间统计出入库数据

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

 Code/WMS/docs/superpowers/specs/2026-03-30-dashboard-chart-design.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,204 @@
# é¦–页仪表盘图表功能设计

## 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 ä½¿ç”¨ç¤ºä¾‹