HaniBlindBox/docs/后台管理系统-Statistics统计报表模块分析.md
2026-01-19 00:09:38 +08:00

20 KiB
Raw Blame History

HoneyBox 后台管理系统 - Statistics 统计报表模块分析

模块概述

Statistics 统计报表模块是后台管理系统的核心运营分析模块,提供全面的业务数据统计、利润分析、用户行为分析等功能。该模块共包含 10个功能页面,是运营决策的重要数据支撑。

源文件位置

server/php/app/admin/view/Statistics/
├── dataStand.html          # 数据看板(核心仪表盘)
├── profit.html             # 盒子利润统计
├── productsOverview.html   # 出货概览
├── lotteryUsers.html       # 抽奖用户列表
├── userLotteryDetail.html  # 用户抽奖详情
├── userstatistics.html     # 用户统计图表
├── orderList.html          # 支付订单列表
├── goodsList.html          # 出货列表
├── exchangeList.html       # 兑换列表
└── shipmentList.html       # 发货列表

页面功能详细分析

1. dataStand.html - 数据看板(核心仪表盘)

功能描述: 综合数据概览页面,是运营人员每日查看的核心页面,包含多个数据卡片区域,支持异步加载和手动刷新。

1.1 今日订单卡片

数据项 说明 数据来源
发起订单数 今日创建的订单总数 orders 表
支付订单数 今日支付成功的订单数 orders 表 status=1
消费人数 今日有消费的用户数 orders 表去重 user_id
订单总金额 今日订单总金额 orders.order_total
出货总金额 今日出货奖品总价值 order_goods.goodslist_price
优惠券抵扣 今日优惠券抵扣总额 orders.use_coupon
RMB支付 今日微信支付总额 orders.price
钻石支付 今日钻石支付总额 orders.use_money
UU币支付 今日UU币支付总额 orders.use_integral
达达券支付 今日达达券支付总额 orders.use_money2

1.2 今日货币信息卡片

数据项 说明
今日发放钻石 今日系统发放的钻石总量
今日消费钻石 今日用户消费的钻石总量
昨日发放钻石 昨日系统发放的钻石总量
昨日消费钻石 昨日用户消费的钻石总量
今日发放UU币 今日系统发放的UU币总量
今日消费UU币 今日用户消费的UU币总量
昨日发放UU币 昨日系统发放的UU币总量
昨日消费UU币 昨日用户消费的UU币总量
今日发放达达券 今日系统发放的达达券总量
今日消费达达券 今日用户消费的达达券总量
昨日发放达达券 昨日系统发放的达达券总量
昨日消费达达券 昨日用户消费的达达券总量

1.3 今日收入汇总卡片

数据项 计算公式/说明
订单收入RMB+钻石) orders.price + orders.use_money
RMB收入 orders.price 总和
钻石商城收入 钻石商城订单收入
其他收入 其他渠道收入
订单出货 今日出货奖品总价值
支出 今日系统支出总额
当天发货金额 今日申请发货的奖品总价值
当天用户剩余达达券 今日用户达达券余额总和
盒柜剩余价值 今日用户盒柜中奖品总价值
利润 收入 - 发货金额 - 用户剩余达达券 - 盒柜剩余

1.4 用户数据统计卡片

数据项 说明
绑定手机号人数 已绑定手机号的用户总数
抽奖人数 有抽奖记录的用户总数
用户剩余钻石 所有用户钻石余额总和
用户剩余UU币 所有用户UU币余额总和
用户剩余达达券 所有用户达达券余额总和
微信支付金额 历史微信支付总额
订单支付数量 历史支付成功订单总数
用户出货总金额 历史出货奖品总价值
用户盒柜剩余价值 所有用户盒柜中奖品总价值
用户已兑换的达达券 历史兑换达达券总额
用户已发货金额 历史已发货奖品总价值

1.5 技术实现要点

  • 异步加载:每个卡片区域独立异步加载,避免页面阻塞
  • 手动刷新:每个卡片都有独立的刷新按钮
  • 加载状态:显示 loading 动画,提升用户体验
  • 数据缓存:部分数据可考虑缓存优化

2. profit.html - 盒子利润统计

功能描述: 按盒子维度统计利润数据是运营分析的核心功能支持多条件筛选、异步加载详情、导出Excel。

2.1 搜索条件

字段 类型 说明
盒子ID 文本输入 精确匹配盒子ID
盒子名称 文本输入 模糊匹配盒子名称
盒子状态 下拉选择 上架/下架/售罄
盒子类型 下拉选择 动态加载盒子类型列表
时间范围 日期时间范围 筛选订单时间范围

2.2 统计摘要卡片

卡片 数据项 计算公式
总收入 totalIncome 微信支付 + 钻石支付
总出货价值 totalCost 奖品的采购价格总和
总利润 totalProfit 收入 - (出货价值 - 兑换成本)
总兑换/发货价值 totalReMoney / totalFhMoney 已兑换达达券 / 已申请发货金额

2.3 列表字段

字段 说明 异步加载
盒子ID 盒子唯一标识
盒子名称 盒子标题
盒子类型/状态 类型名称 + 上架状态
盒子单价 单次抽奖价格
抽奖次数 该盒子被抽奖的总次数
收入 微信支付 + 钻石支付
出货价值 奖品采购价格总和
已兑换达达券 用户兑换的达达券总额
已申请发货 申请发货的奖品总价值
单盒子利润 盒子单价 × 抽数 - 出货总额
单盒子利润比 (单价×抽数-出货) / (单价×抽数) × 100%
利润 收入 - (出货价值 - 兑换成本)
利润率 利润 / 收入 × 100%

2.4 操作按钮

操作 功能说明 弹窗/跳转
出货概览 查看该盒子的奖品出货统计 弹窗 productsOverview.html
抽奖用户 查看该盒子的抽奖用户列表 弹窗 lotteryUsers.html
导出Excel 导出当前筛选条件下的所有数据 文件下载

2.5 技术实现要点

  • 异步加载队列表格渲染后将每行数据加入加载队列控制并发请求数最大3个
  • 汇总数据独立加载统计摘要卡片通过独立API获取不依赖表格数据
  • 利润负值高亮:利润为负的行显示红色背景
  • 利润详情提示:鼠标悬停显示计算公式详情

3. productsOverview.html - 出货概览

功能描述: 查看单个盒子的奖品出货统计,分析各奖品的出货情况和概率偏差。

3.1 统计摘要

数据项 说明
总出货数量 该盒子所有奖品的出货总次数
总出货价值 该盒子所有奖品的出货总价值(兑换价格)
平均每次出货价值 总出货价值 / 总出货数量
盒子单价 该盒子的单次抽奖价格
平均出货价值倍率 平均出货价值 / 盒子单价
出货金额最多的奖品 出货总价值最高的奖品名称和金额
占总出货金额百分比 最高奖品出货金额 / 总出货价值 × 100%

3.2 列表字段

字段 说明
奖品ID 奖品唯一标识
奖品类型 奖品等级A/B/C/D/E等
奖品名称 奖品标题
奖品图片 奖品缩略图
出货数量 该奖品的出货次数
奖品单价 奖品售价
兑换金额 奖品回收价格
理论概率 配置的中奖概率
实际概率 实际出货次数 / 总出货次数 × 100%
概率偏差 实际概率 - 理论概率(正值绿色,负值红色)
总价值 出货数量 × 兑换金额

3.3 技术实现要点

  • 概率偏差分析:帮助运营人员发现概率配置问题
  • 数据分析卡片:自动分析出货金额最多的奖品
  • PHP服务端计算:统计数据在服务端计算完成后返回

4. lotteryUsers.html - 抽奖用户列表

功能描述: 查看某个盒子的所有抽奖用户,分析用户抽奖行为。

4.1 页面信息

  • 显示当前盒子名称(通过 boxInfo 返回)

4.2 列表字段

字段 说明 排序
用户ID 用户唯一标识
用户昵称 用户昵称
抽奖次数 该用户在此盒子的抽奖次数
出货价值 该用户获得奖品的总价值
微信支付 该用户微信支付总额
钻石支付 该用户钻石支付总额
总支付金额 微信支付 + 钻石支付

4.3 操作按钮

操作 功能说明
查看详情 查看该用户在此盒子的抽奖明细

4.4 技术实现要点

  • 分页加载默认每页20条
  • 排序支持:支持按抽奖次数、出货价值、支付金额排序
  • 弹窗打开:从 profit.html 以弹窗形式打开

5. userLotteryDetail.html - 用户抽奖详情

功能描述: 查看单个用户在某盒子的抽奖明细记录。

5.1 页面信息

  • 显示用户昵称(通过 userInfo 返回)
  • 显示盒子名称(通过 boxInfo 返回)

5.2 统计摘要

数据项 说明
抽奖次数 该用户在此盒子的抽奖总次数
出货价值 该用户获得奖品的总价值
总支付金额 该用户的总支付金额
微信支付 微信支付金额
钻石支付 钻石支付金额

5.3 列表字段

字段 说明
ID 记录ID
抽奖时间 抽奖时间(时间戳转换)
奖品名称 中奖奖品名称
奖品价值 奖品兑换价格
订单ID 关联订单ID
支付方式 微信支付/钻石支付
支付金额 本次支付金额
是否发货 已发货/未发货

6. userstatistics.html - 用户统计图表

功能描述: 用户数据和订单数据的图表展示,使用 ECharts 实现可视化。

6.1 图表区域

图表 数据系列 图表类型
用户数据 登录人数、注册人数 折线图
订单支付数据 RMB支付、钻石支付 折线图
其他数据(预留) 出货价值、发货价值、回收价值 折线图

6.2 图表功能

  • 时间轴X轴为时间轴支持日期格式化
  • 数据缩放:支持滑动条缩放和鼠标滚轮缩放
  • 默认显示默认显示最近50%的数据
  • 保存图片:支持将图表保存为图片

6.3 数据表格

字段分组 字段列表
日期 统计日期
用户信息 注册人数、登录人数
订单信息 订单数量、用户数量、RMB支付、钻石支付、UU币支付、达达券支付
钻石商城 支付总额

6.4 技术实现要点

  • ECharts 5.x:使用 ECharts 实现图表
  • 异步数据加载:通过 AJAX 获取统计数据
  • 表格分页支持分页显示默认50条/页
  • 默认倒序:按日期倒序排列,最新数据在前

7. orderList.html - 支付订单列表

功能描述: 查看所有支付订单的明细列表。

7.1 列表字段

字段 说明
序号 行号
订单ID 订单唯一标识
订单号 订单编号
用户ID 用户唯一标识
用户昵称 用户昵称
盒子ID 盒子唯一标识
盒子名称 盒子标题
订单总金额 订单原始金额
实际支付 折后实际支付金额
微信 微信支付金额
钻石 钻石支付金额
UU币 UU币支付金额
达达券 达达券支付金额
优惠券抵扣 优惠券抵扣金额
订单状态 已支付/未支付
下单时间 订单创建时间
支付时间 订单支付时间

7.2 技术实现要点

  • 宽表格表格宽度1800px支持横向滚动
  • 分页显示:支持分页
  • 状态标签:已支付显示绿色,未支付显示灰色

8. goodsList.html - 出货列表

功能描述: 查看所有出货记录(用户中奖记录)。

8.1 列表字段

字段 说明
ID 记录ID
订单ID 关联订单ID
用户ID 用户唯一标识
盒子ID 盒子唯一标识
盒子排序 盒子内序号
奖品ID 奖品唯一标识
奖品名称 奖品标题
奖品图片 奖品缩略图
奖品价值 奖品售价
兑换价值 奖品回收价格
奖品类型 现货/预售/货币/宝箱
状态 待选择/回收/选择发货/发布集市
添加时间 中奖时间

8.2 状态说明

状态值 显示 说明
0 待选择 用户尚未选择处理方式
1 回收 用户选择回收兑换达达券
2 选择发货 用户选择申请发货
3 发布集市 用户选择发布到集市交易

9. exchangeList.html - 兑换列表

功能描述: 查看所有兑换(回收)记录,即用户将奖品兑换为达达券的记录。

9.1 列表字段

字段 说明
序号 行号
ID 记录ID
订单ID 关联订单ID
用户ID 用户唯一标识
兑换单号 兑换记录编号
盒子ID 盒子唯一标识
奖品ID 奖品唯一标识
奖品名称 奖品标题
奖品图片 奖品缩略图
奖品价值 奖品售价
兑换价值 兑换获得的达达券金额
奖品类型 现货/预售/货币/宝箱
添加时间 中奖时间
选择时间 兑换操作时间

10. shipmentList.html - 发货列表

功能描述: 查看所有发货记录,即用户申请发货的奖品记录。

10.1 列表字段

字段 说明
ID 记录ID
订单ID 关联订单ID
用户ID 用户唯一标识
发货单号 发货记录编号
盒子ID 盒子唯一标识
奖品ID 奖品唯一标识
奖品名称 奖品标题
奖品图片 奖品缩略图
奖品价值 奖品售价
兑换价值 奖品回收价格
奖品类型 现货/预售/货币/宝箱
保险状态 是/否(是否购买保险)
添加时间 中奖时间
选择时间 申请发货时间

模块复杂度评估

页面 主要功能 复杂度 迁移优先级
dataStand.html 数据看板、多卡片、异步加载 P0
profit.html 盒子利润统计、异步加载、导出 P0
userstatistics.html ECharts图表、数据表格 P0
productsOverview.html 出货概览、概率分析 P1
lotteryUsers.html 抽奖用户列表 P1
userLotteryDetail.html 用户抽奖详情 P1
orderList.html 订单列表 P2
goodsList.html 出货列表 P2
exchangeList.html 兑换列表 P2
shipmentList.html 发货列表 P2

后端 API 设计建议

数据看板 API

GET /api/admin/statistics/today-order          # 今日订单数据
GET /api/admin/statistics/currency-info        # 今日货币信息
GET /api/admin/statistics/income-summary       # 今日收入汇总
GET /api/admin/statistics/user-stats           # 用户数据统计

盒子利润统计 API

GET /api/admin/statistics/profit               # 盒子利润列表(分页)
GET /api/admin/statistics/profit/summary       # 利润汇总数据
GET /api/admin/statistics/profit/{goodsId}     # 单个盒子详细统计
GET /api/admin/statistics/profit/export        # 导出Excel

出货概览 API

GET /api/admin/statistics/products-overview/{goodsId}  # 盒子出货概览

抽奖用户 API

GET /api/admin/statistics/lottery-users/{goodsId}           # 抽奖用户列表
GET /api/admin/statistics/lottery-users/{goodsId}/{userId}  # 用户抽奖详情
GET /api/admin/statistics/lottery-users/{goodsId}/{userId}/summary  # 用户抽奖汇总

用户统计图表 API

GET /api/admin/statistics/daily-statistics     # 每日统计数据

列表查询 API

GET /api/admin/statistics/orders               # 支付订单列表
GET /api/admin/statistics/goods                # 出货列表
GET /api/admin/statistics/exchanges            # 兑换列表
GET /api/admin/statistics/shipments            # 发货列表

数据库表依赖

主要数据表

表名 用途
orders 订单表,存储订单信息
order_goods 订单商品表,存储中奖记录
goods 盒子表,存储盒子信息
goodslist 奖品表,存储奖品信息
users 用户表,存储用户信息
user_money_log 用户余额流水表
user_integral_log 用户积分流水表
user_score_log 用户钻石流水表
send_order 发货订单表
send_order_goods 发货订单商品表

关键字段映射

PHP字段 说明 .NET建议字段
order_total 订单总金额 OrderTotal
order_zhe_total 折后金额 DiscountedTotal
price 微信支付金额 WechatPayment
use_money 钻石支付金额 DiamondPayment
use_integral UU币支付金额 UuCoinPayment
use_money2 达达券支付金额 DadaCouponPayment
use_coupon 优惠券抵扣 CouponDiscount
goodslist_price 奖品售价 PrizePrice
goodslist_money 奖品兑换价格 PrizeExchangePrice
real_pro 理论概率 TheoreticalProbability

前端技术要点

Vue 3 + Element Plus 实现建议

数据看板组件结构

views/business/statistics/
├── dashboard.vue              # 数据看板主页面
├── profit.vue                 # 盒子利润统计
├── user-statistics.vue        # 用户统计图表
├── components/
│   ├── TodayOrderCard.vue     # 今日订单卡片
│   ├── CurrencyInfoCard.vue   # 货币信息卡片
│   ├── IncomeSummaryCard.vue  # 收入汇总卡片
│   ├── UserStatsCard.vue      # 用户统计卡片
│   ├── ProfitTable.vue        # 利润统计表格
│   ├── ProfitSummary.vue      # 利润汇总卡片
│   ├── ProductsOverviewDialog.vue  # 出货概览弹窗
│   ├── LotteryUsersDialog.vue      # 抽奖用户弹窗
│   ├── UserLotteryDetailDialog.vue # 用户抽奖详情弹窗
│   └── StatisticsChart.vue    # 统计图表组件

图表库选择

  • ECharts 5.x:功能强大,与 PHP 版本保持一致
  • vue-echartsVue 3 封装版本,使用更方便

异步加载实现

// 利润表格异步加载示例
const loadingQueue = ref<GoodsItem[]>([])
const maxConcurrentRequests = 3

const processLoadingQueue = async () => {
  const batch = loadingQueue.value.splice(0, maxConcurrentRequests)
  await Promise.all(batch.map(item => loadBoxStatistics(item)))
  if (loadingQueue.value.length > 0) {
    processLoadingQueue()
  }
}

迁移计划建议

阶段1核心功能2周

  1. 数据看板 (dataStand.html)

    • 后端4个统计API
    • 前端4个卡片组件 + 主页面
  2. 盒子利润统计 (profit.html)

    • 后端利润列表API、汇总API、详情API、导出API
    • 前端:表格组件、汇总卡片、异步加载逻辑
  3. 用户统计图表 (userstatistics.html)

    • 后端每日统计API
    • 前端ECharts图表组件、数据表格

阶段2详情功能1周

  1. 出货概览 (productsOverview.html)
  2. 抽奖用户列表 (lotteryUsers.html)
  3. 用户抽奖详情 (userLotteryDetail.html)

阶段3列表功能1周

  1. 支付订单列表 (orderList.html)
  2. 出货列表 (goodsList.html)
  3. 兑换列表 (exchangeList.html)
  4. 发货列表 (shipmentList.html)

更新记录

日期 版本 更新内容
2026-01-18 v1.0 初始版本完成10个页面功能分析