wanshenmean
8 天以前 b044183d3f3eae7150371318a017160fcd67c715
Code/WMS/docs/superpowers/specs/2026-03-30-dashboard-chart-design.md
@@ -2,7 +2,9 @@
## 1. 概述
在 WMS 前端首页添加仪表盘图表,展示仓库的出入库统计和库存数据。数据基于任务完成时间(TaskInfo.ActualEndTime)进行统计。
在 WMS 前端首页添加仪表盘图表,展示仓库的出入库统计和库存数据。数据基于任务完成时间进行统计。
> **数据来源说明:** 已完成任务存储在历史表 `Dt_Task_Hty` 中,使用 `InsertTime`(任务完成后移入历史的时间)作为任务完成时间。
## 2. 页面布局
@@ -10,18 +12,21 @@
```
┌─────────────────────────────────────────────────┐
│         本月出入库趋势(折线+柱状组合图)          │
├────────────────────┬────────────────────────────┤
│   今日出入库对比     │     本周出入库对比           │
│   (柱状图)         │     (柱状图)               │
├────────────────────┼────────────────────────────┤
│   本月出入库对比     │     当前库存总量             │
│   (柱状图)         │     (数字卡片)             │
├────────────────────┼────────────────────────────┤
│   库存库龄分布       │     各仓库库存分布           │
│   (柱状图)         │     (柱状图)               │
└────────────────────┴────────────────────────────┘
│          本月出入库趋势(全宽,折线+柱状组合)      │
├─────────────────────┬───────────────────────────┤
│    今日出入库对比     │      本周出入库对比          │
│    (柱状图)         │      (柱状图)             │
├─────────────────────┼───────────────────────────┤
│    本月出入库对比     │      当前库存总量            │
│    (柱状图)         │      (数字卡片)            │
├─────────────────────┼───────────────────────────┤
│    库存库龄分布       │      各仓库库存分布          │
│    (柱状图)         │      (柱状图)              │
└─────────────────────┴───────────────────────────┘
```
> 第一行(本月趋势图):全宽显示
> 下方 2x2 网格:4个图表均匀分布
## 3. 后端接口设计
@@ -45,11 +50,17 @@
}
```
> 注:库存数量单位为"托盘数"或"电芯数",取决于实际业务统计口径。
### 3.2 每日统计接口
**GET** `/api/Dashboard/DailyStats?days=30`
返回近N天的每日出入库统计。
**参数:**
- `days`:天数,默认 30,最大 365
- 统计基于服务器本地时间,当日数据包含当日统计
**响应数据:**
```json
@@ -67,7 +78,10 @@
**GET** `/api/Dashboard/WeeklyStats?weeks=12`
返回近N周的每周出入库统计。
返回近N周的每周出入库统计。周从周一开始计算。
**参数:**
- `weeks`:周数,默认 12
**响应数据:**
```json
@@ -86,6 +100,9 @@
**GET** `/api/Dashboard/MonthlyStats?months=12`
返回近N月的每月出入库统计。
**参数:**
- `months`:月数,默认 12
**响应数据:**
```json
@@ -144,18 +161,20 @@
- `WIDESEA_WMSServer/Controllers/Dashboard/DashboardController.cs` - 仪表盘控制器
**数据来源:**
- `TaskInfo` 表:`ActualEndTime` 字段判断任务完成时间
- `TaskType`:1=入库任务,2=出库任务
- `StockInfo` 表:当前库存数据,`CreateTime` 作为入库时间计算库龄
- `Dt_Task_Hty` 表:已完成任务的历史表,使用 `InsertTime` 作为任务完成时间
- `TaskTypeEnum` 枚举:入库任务范围 500-600(如 `Inbound=510`),出库任务范围 100-200(如 `Outbound=100`)
- `Dt_StockInfo` 表:当前库存数据,使用 `CreateDate` 作为入库时间计算库龄
**统计数据逻辑:**
- 按 `ActualEndTime` 的日期/周/月分组统计任务数量
- 库龄 = 当前时间 - `CreateTime`
- 按 `InsertTime` 的日期/周/月分组统计任务数量
- 入库判断:`TaskType >= 500 && TaskType < 600`
- 出库判断:`TaskType >= 100 && TaskType < 200`
- 库龄 = 当前时间 - `CreateDate`
### 4.2 前端实现
**修改文件:**
- `WIDESEA_WMSClient/src/views/Home.vue` - 替换为空白的首页
- `WIDESEA_WMSClient/src/views/Home.vue` - 重写为空白的首页,添加仪表盘图表
**图表组件:**
- 复用 `src/views/charts/bigdata.vue` 中的 ECharts 使用模式