首页仪表盘图表功能设计

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 < 600
- 出库判断：TaskType >= 100 && TaskType < 200
- 库龄 = 当前时间 - 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. 实现任务

后端

创建 DashboardController
实现 Overview 接口
实现 DailyStats 接口
实现 WeeklyStats 接口
实现 MonthlyStats 接口
实现 StockAgeDistribution 接口
实现 StockByWarehouse 接口

前端

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

6. 预计文件变更

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

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

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