每日发券统计看板 — 全栈模块技术总结功能概述在管理后台中新增「每日发券数量和金额」数据看板以柱状图 明细表格的形式按日期维度聚合展示平台发券的总张数和总金额帮助运营人员直观掌握发券趋势。该模块采用前后端分离架构后端提供一条 RESTful 聚合查询接口前端基于 Vue 3 ECharts 渲染交互式图表。整体架构┌─────────────────────────────────────────────────────┐│ 前端 (Vue 3 ECharts Ant Design Vue) ││ ┌─────────────┐ ┌──────────────────────────────┐ ││ │ ECharts │ │ 明细表格 (最新日期在上) │ ││ │ 双Y轴柱状图 │ │ 共享数据源排序方向独立 │ ││ └─────────────┘ └──────────────────────────────┘ ││ ▲ ││ │ POST /admin/mall/ticket/ ││ │ dailyTicketStatistics │└───────────┼─────────────────────────────────────────┘│ JSON: { code, msg, data: [...] }┌───────────┼─────────────────────────────────────────┐│ 后端 (Spring Boot MyBatis-Plus) ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ││ │Controller│→│ Service │→│ Mapper │ ││ │ 无参接口 │ │ 纯透传 │ │ XML SQL │ ││ └──────────┘ └──────────┘ └──────────┘ ││ │ ││ ▼ ││ MySQL cn_ticket 表 ││ GROUP BY DATE(create_time) │└─────────────────────────────────────────────────────┘后端实现技术栈Spring Boot 3.x MyBatis-Plus MySQL Lombok调用链路SysAdminTicketController → ICnTicketService → CnTicketServiceImpl → CnTicketMapper → CnTicketMapper.xml核心 SQLSELECT DATE(create_time) AS date,COUNT(*) AS ticketCount,COALESCE(SUM(amount), 0) AS ticketAmountFROM cn_ticketWHERE del_flag 0GROUP BY DATE(create_time)ORDER BY DATE(create_time) ASCSQL 设计要点DATE(create_time) 将 datetime 截断到日期粒度实现按天分组COUNT(*) 统计当天发券张数COALESCE(SUM(amount), 0) 汇总当天券面额总和用 COALESCE 避免某个日期无数据时返回 NULLdel_flag 0 过滤软删除的券记录确保统计口径准确ORDER BY DATE(create_time) ASC 保证结果集按时间正序返回接口设计项目 说明请求方式 POST路径 /admin/mall/ticket/dailyTicketStatistics入参 无返回 AjaxResultListDailyTicketStatisticsDtoDTO 结构Datapublic class DailyTicketStatisticsDto {private String date; // 日期 (yyyy-MM-dd)private Long ticketCount; // 当日发券数量private BigDecimal ticketAmount; // 当日发券总金额}设计上采用了极简的无参接口——因为业务场景是对全量历史数据的全貌展示暂不需要按时间范围筛选。Controller 不传任何参数Service 层做纯透传getBaseMapper().dailyTicketStatistics()将计算逻辑完全下沉到 SQL 层一锤定音的结果集映射链路清晰无歧义。前端实现技术栈Vue 3 Composition API ECharts 5 Ant Design Vue图表ECharts 双 Y 轴柱状图使用 ECharts 绘制的核心配置双 Y 轴左侧 Y 轴展示发券数量张右侧 Y 轴展示发券金额元解决数量和金额量纲不同的问题X 轴日期字符串数组从前端排序后的数组中取出标签旋转 40° 防止重叠渐变柱状图蓝色渐变#3b82f6 → #60a5fa代表发券数量绿色渐变#10b981 → #34d399代表发券金额柱顶带数值标签交互能力内置 dataZoom 滑块缩放区域 鼠标滚轮缩放toolbox 提供图表保存为图片和重置功能窗口 resize 自动适配明细表格最新日期在上表格与图表共享同一个数据源 chartData但排序方向独立——使用 Vue 的 computed 生成一个倒序副本 tableData图表保持时间正序从左到右符合时间轴直觉表格则从最新日期往下排列。这一层排序完全在前端完成无需后端冗余处理const tableData computed(() [...chartData.value].sort((a, b) (b.date || ).localeCompare(a.date || )))样式设计整体采用毛玻璃卡片式布局backdrop-filter: blur 大圆角 border-radius: 32px表格头部 position: sticky 实现滚动时固定表头响应式适配移动端自动缩小图表高度和字号技术亮点总结维度 亮点 落地方式数据聚合 计算下推到 SQL GROUP BY DATE() 聚合函数数据库承担计算负载软删除兼容 统计口径过滤 WHERE del_flag 0 统一过滤已删除券NULL 安全 金额空值兜底 COALESCE(SUM(amount), 0) 避免空日期显示异常双 Y 轴图表 不同量纲同图展示 ECharts 双 yAxis 配置数量和金额各自独立刻度图表与表格排序解耦 同一数据源不同视觉语义 Vue computed 生成表格倒序副本图表保持正序响应式与交互 良好的操作体验 dataZoom 缩放、图表导出、窗口自适应 resize无参接口 极简 API 设计 全量统计无需参数降低调用复杂度更多可优化方向增加日期范围筛选在上方增加日期选择器支持按时间段查看统计缓存层对全量历史统计结果做 Redis 缓存设定每日凌晨刷新同比/环比在图表中叠加去年同期对比折线导出 Excel明细表格增加导出功能 7月14日每日发券数量和金额
每日发券统计看板 — 全栈模块技术总结功能概述在管理后台中新增「每日发券数量和金额」数据看板以柱状图 明细表格的形式按日期维度聚合展示平台发券的总张数和总金额帮助运营人员直观掌握发券趋势。该模块采用前后端分离架构后端提供一条 RESTful 聚合查询接口前端基于 Vue 3 ECharts 渲染交互式图表。整体架构┌─────────────────────────────────────────────────────┐│ 前端 (Vue 3 ECharts Ant Design Vue) ││ ┌─────────────┐ ┌──────────────────────────────┐ ││ │ ECharts │ │ 明细表格 (最新日期在上) │ ││ │ 双Y轴柱状图 │ │ 共享数据源排序方向独立 │ ││ └─────────────┘ └──────────────────────────────┘ ││ ▲ ││ │ POST /admin/mall/ticket/ ││ │ dailyTicketStatistics │└───────────┼─────────────────────────────────────────┘│ JSON: { code, msg, data: [...] }┌───────────┼─────────────────────────────────────────┐│ 后端 (Spring Boot MyBatis-Plus) ││ ┌──────────┐ ┌──────────┐ ┌──────────┐ ││ │Controller│→│ Service │→│ Mapper │ ││ │ 无参接口 │ │ 纯透传 │ │ XML SQL │ ││ └──────────┘ └──────────┘ └──────────┘ ││ │ ││ ▼ ││ MySQL cn_ticket 表 ││ GROUP BY DATE(create_time) │└─────────────────────────────────────────────────────┘后端实现技术栈Spring Boot 3.x MyBatis-Plus MySQL Lombok调用链路SysAdminTicketController → ICnTicketService → CnTicketServiceImpl → CnTicketMapper → CnTicketMapper.xml核心 SQLSELECT DATE(create_time) AS date,COUNT(*) AS ticketCount,COALESCE(SUM(amount), 0) AS ticketAmountFROM cn_ticketWHERE del_flag 0GROUP BY DATE(create_time)ORDER BY DATE(create_time) ASCSQL 设计要点DATE(create_time) 将 datetime 截断到日期粒度实现按天分组COUNT(*) 统计当天发券张数COALESCE(SUM(amount), 0) 汇总当天券面额总和用 COALESCE 避免某个日期无数据时返回 NULLdel_flag 0 过滤软删除的券记录确保统计口径准确ORDER BY DATE(create_time) ASC 保证结果集按时间正序返回接口设计项目 说明请求方式 POST路径 /admin/mall/ticket/dailyTicketStatistics入参 无返回 AjaxResultListDailyTicketStatisticsDtoDTO 结构Datapublic class DailyTicketStatisticsDto {private String date; // 日期 (yyyy-MM-dd)private Long ticketCount; // 当日发券数量private BigDecimal ticketAmount; // 当日发券总金额}设计上采用了极简的无参接口——因为业务场景是对全量历史数据的全貌展示暂不需要按时间范围筛选。Controller 不传任何参数Service 层做纯透传getBaseMapper().dailyTicketStatistics()将计算逻辑完全下沉到 SQL 层一锤定音的结果集映射链路清晰无歧义。前端实现技术栈Vue 3 Composition API ECharts 5 Ant Design Vue图表ECharts 双 Y 轴柱状图使用 ECharts 绘制的核心配置双 Y 轴左侧 Y 轴展示发券数量张右侧 Y 轴展示发券金额元解决数量和金额量纲不同的问题X 轴日期字符串数组从前端排序后的数组中取出标签旋转 40° 防止重叠渐变柱状图蓝色渐变#3b82f6 → #60a5fa代表发券数量绿色渐变#10b981 → #34d399代表发券金额柱顶带数值标签交互能力内置 dataZoom 滑块缩放区域 鼠标滚轮缩放toolbox 提供图表保存为图片和重置功能窗口 resize 自动适配明细表格最新日期在上表格与图表共享同一个数据源 chartData但排序方向独立——使用 Vue 的 computed 生成一个倒序副本 tableData图表保持时间正序从左到右符合时间轴直觉表格则从最新日期往下排列。这一层排序完全在前端完成无需后端冗余处理const tableData computed(() [...chartData.value].sort((a, b) (b.date || ).localeCompare(a.date || )))样式设计整体采用毛玻璃卡片式布局backdrop-filter: blur 大圆角 border-radius: 32px表格头部 position: sticky 实现滚动时固定表头响应式适配移动端自动缩小图表高度和字号技术亮点总结维度 亮点 落地方式数据聚合 计算下推到 SQL GROUP BY DATE() 聚合函数数据库承担计算负载软删除兼容 统计口径过滤 WHERE del_flag 0 统一过滤已删除券NULL 安全 金额空值兜底 COALESCE(SUM(amount), 0) 避免空日期显示异常双 Y 轴图表 不同量纲同图展示 ECharts 双 yAxis 配置数量和金额各自独立刻度图表与表格排序解耦 同一数据源不同视觉语义 Vue computed 生成表格倒序副本图表保持正序响应式与交互 良好的操作体验 dataZoom 缩放、图表导出、窗口自适应 resize无参接口 极简 API 设计 全量统计无需参数降低调用复杂度更多可优化方向增加日期范围筛选在上方增加日期选择器支持按时间段查看统计缓存层对全量历史统计结果做 Redis 缓存设定每日凌晨刷新同比/环比在图表中叠加去年同期对比折线导出 Excel明细表格增加导出功能