首页仪表盘图表功能设计

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. 实现任务

后端

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