【Codex】我的工作用户统计数据可视化

用户统计把教师、学生、账号配置、分班情况和学生画像数据整合到一张看板中,用来核对教育管理系统的用户底座。学生是否分班、教师是否配置学科、学生支持数据是否覆盖,都会影响后续教学和考试分析。

本文按照 Demo 的写法,把用户统计拆成后端聚合、前端看板、数据联动和 Codex 生成标准。所有能力都来自 UserStatsViewSetUserStats/index.vue,不补写源码里没有的功能。

文章目录

设计与需求

用户统计不是单纯统计用户数量。UserStatsViewSet.build_overview_data 同时读取学生、教师、分班、性别、入学成绩、小三科和学生画像相关模型,前端将这些数据分成用户结构、学生分布和学生数据模块三组统计区域。
验收阶段
展示阶段
设计阶段
输入阶段
业务数据
统计口径
菜单入口
后端聚合
接口返回
前端看板
指标卡
矩阵树图
明细表格
数据一致
布局稳定
权限可见

这张图表达的是统计类模块从业务数据到页面展示的转换关系。Codex 处理这类需求时,不能只生成一个空页面或普通 CRUD,需要把统计口径、接口返回结构、前端矩阵展示和菜单权限一起纳入设计。

需求层描述 设计层转换 Codex 代码生成方向
管理端需要看到用户规模 将学生和教师数量统一进入 summaryuser_composition 生成用户类型占比、用户配置明细和顶部指标
学生需要核对分班状态 按行政班、分班信息、性别、入学成绩、小三科拆分 生成学生分布矩阵、分班明细和入学成绩表
教师需要核对学科配置 解析教师类型、教师账号和 name_subject 多值学科 生成教师统计 Tab、学科分布和类型分布
学生画像需要看覆盖率 汇总生活画像、生活日常、支持周报、健康事件、出勤行为、入学评估 生成学生数据模块卡片、覆盖学生数和指标明细
用户统计需要稳定刷新 使用缓存 Key mywork.user.overview 返回聚合结果 生成可缓存的 overview 接口并进入统一刷新计划

用户统计的真实统计对象分成用户基础结构、学生分布和学生扩展数据覆盖三类。

统计对象 代码口径 页面呈现
用户结构 StudentManageTeacherManage 统计学生数、教师数、账号数 用户类型占比、学生/教师 Tab、用户配置明细
学生分布 学生性别、行政班、分数段、小三科字段聚合 性别矩阵树图、入学成绩表、行政班表、小三科表
教师配置 教师账号、教师类型、教师学科多值解析 教师类型分布、教师学科分布、教师统计表
学生生活画像 StudentProfileLife 统计住校、通勤、学习空间、设备干扰等 学生数据模块卡片和覆盖率
学生日常与支持 StudentLifeDailyStudentSupportWeekly 统计睡眠、压力、家庭支持、归属感等 模块指标、平均值、异常标记数量
健康、出勤、入学评估 StudentHealthEventStudentAttendanceBehaviorStudentAdmissionAssessment 健康事件、出勤行为、入学评估覆盖和风险指标

可以直接使用下面的Prompt进行模块功能的设计

text 复制代码
请基于 ManageBak-ExamEdu 项目设计并实现【用户统计】统计模块。

模块前端入口为:server_vue3/src/views/system/MyWork/UserStats/index.vue
后端接口入口为:server_backend/modules/MyWork/views_app/UserStats.py
接口地址为:/api/MyWork/UserStats/overview/
菜单路径为:/system/MyWork/UserStats

请先读取上述前端页面、后端 ViewSet、路由注册、统计缓存工具、共享样式文件和菜单同步脚本,再设计模块。不要只按模块名称联想功能,必须以真实源码中的统计口径为准。

模块需要覆盖这些统计对象:用户结构、学生分布、教师配置、学生生活画像、学生生活日常、学生支持周报、学生健康事件、学生出勤行为、学生入学评估。

请输出完整模块设计方案,包括业务定位、后端聚合口径、接口返回结构、前端页面结构、指标卡设计、矩阵树图与明细表格关系、菜单权限、缓存策略、验收标准。设计确认后,再按照当前项目技术栈生成或补齐项目代码。

后端设计

后端入口是 server_backend/modules/MyWork/views_app/UserStats.py。文件中既有基础分布函数,也有 _student_module_stats 这样的学生扩展模块聚合函数,overview action 返回完整用户统计数据。

后端设计项 真实代码依据 Codex 生成方向
ViewSet 入口 UserStatsViewSet,文件 server_backend/modules/MyWork/views_app/UserStats.py 保持统计接口集中在 ViewSet action 内,避免把聚合逻辑散落到前端
接口方法 overview` action 调用 `build_overview_data 生成 GET 统计接口,返回可直接驱动页面的结构化数据
数据模型 StudentManage、TeacherManage、StudentProfileLife、StudentLifeDaily、StudentSupportWeekly、StudentHealthEvent、StudentAttendanceBehavior、StudentAdmissionAssessment 按真实模型字段聚合,不在接口里编造不存在的维度
统计构建 build_overview_data` 组装 `summary`、`cards`、用户分布和 `student_module_stats 把 summary、cards、detail 或 dimensions 拆清楚,便于前端复用
缓存策略 get_or_build_stats_payload("mywork.user.overview", "用户统计", ...) 使用统计缓存减少重复聚合开销,并保留刷新入口
路由注册 server_backend/modules/MyWork/urls.py 通过 DRF router 暴露 /api/.../ 接口,不新增孤立 URL
菜单入口 server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py 中的 /system/MyWork/UserStats 让统计页面进入"我的工作/数据统计"入口并同步角色权限

用户统计后端需要特别注意多值字段和空值归类。_json_values 用于解析教师学科、小三科等字段,_field_distribution_class_gender_distribution_score_band_gender_distribution 用于生成可展示分布,避免前端直接处理模型细节。

可以直接使用下面的Prompt进行后端代码的设计

text 复制代码
请为【用户统计】补齐后端统计接口。

读取并遵循:
1. `server_backend/modules/MyWork/views_app/UserStats.py`
2. `server_backend/modules/MyWork/urls.py`
3. `server_backend/modules/MyWork/utils.py`
4. `server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py`

后端接口地址:/api/MyWork/UserStats/overview/
缓存 Key:mywork.user.overview
涉及模型:StudentManage、TeacherManage、StudentProfileLife、StudentLifeDaily、StudentSupportWeekly、StudentHealthEvent、StudentAttendanceBehavior、StudentAdmissionAssessment

实现要求:
- 统计口径必须来自真实模型字段,不能凭页面名称补字段。
- 返回结构需要覆盖页面顶部 summary、模块 cards、明细 detail 或 dimensions。
- 百分比统一按 `value / total` 计算,total 为 0 时返回 0。
- 空值要归入"未填写、未设置、未分类"等明确标签。
- 接口只承担统计聚合,不把前端展示样式写进后端。
- 保持 `get_or_build_stats_payload` 缓存调用,支持统一刷新统计渲染缓存。
- 路由继续使用已有 DRF router 注册方式,避免新增重复路径。

完成后给出字段口径、返回结构示例、缓存 Key 和接口验收点。

前端设计

前端入口是 server_vue3/src/views/system/MyWork/UserStats/index.vue。页面通过 /api/MyWork/UserStats/overview/ 拉取数据,使用用户结构、学生分布、学生数据模块三个 dashboard 展示统计结果。

前端设计项 真实代码依据 Codex 生成方向
页面入口 server_vue3/src/views/system/MyWork/UserStats/index.vue 保持统计页单文件入口,必要时只抽取真正复用的展示组件
接口调用 request({ url: '/api/MyWork/UserStats/overview/', method: 'get' }) 页面加载时拉取统计数据,失败时保留空态和 loading 状态
共享样式 server_vue3/src/theme/stats-dashboard.scss 使用 stats-dashboard-standardstats-module-headerstats-kpi-strip 统一看板骨架
顶部 Hero 页面标题、说明和三枚核心指标 让用户进入页面后立即看到模块规模、记录量和完成率
模块 Frame Header、描述、指标卡、Body 每个统计对象独立成块,避免图表和表格混在一层
明细展示 矩阵树图、Element Plus Tab、统计表格、进度条、学生模块卡片 同一批接口数据同时支撑概览图和可核对表格
交互状态 activeUserTab、activeStudentTab、userCompositionRows、genderRows、scoreRows、classRows、minorSubjectRows、studentModuleStats Tab、矩阵、表格高度和空态要跟随接口数据稳定变化

页面通过 activeUserTabactiveStudentTab 控制学生和教师、入学统计和班级统计等区域切换。userTreemapRowsgenderTreemapRowsstudentModuleStats 等 computed 状态把后端数据变成矩阵树图、进度条和表格。

可以直接使用下面的Prompt进行前端代码的设计

text 复制代码
请为【用户统计】实现或补齐前端统计看板。

读取并遵循:
1. `server_vue3/src/views/system/MyWork/UserStats/index.vue`
2. `server_vue3/src/theme/stats-dashboard.scss`
3. `docs/sop/server/04.统计看板表格化改造SOP.md`
4. 后端接口 `/api/MyWork/UserStats/overview/` 的真实返回结构

页面要求:
- 使用 `stats-dashboard-standard` 作为统计页根容器。
- 顶部 Hero 展示标题、说明和三项核心指标。
- 每个统计对象使用 `stats-module-header` 组织标题、描述和 KPI。
- 图形展示只做概览,必须提供可核对的明细表格或矩阵。
- Tab、矩阵树图、明细表格要消费同一份数据,避免前后口径不一致。
- loading、空数据、接口异常、移动端布局都要有稳定状态。
- 不改后端字段名称,不在前端伪造不存在的统计维度。

完成后给出页面区域、接口字段映射、交互状态和构建验证结果。

扩展功能

【用户统计】不是普通管理页,它的扩展能力集中在数据统计、统计维度联动、缓存刷新和菜单权限。源码没有 LLM、OCR、导入导出或审批流入口,因此文档只描述真实存在的统计能力。

扩展功能 主要用途 落地重点
数据统计 把多个业务表聚合成 summary、cards、detail 或 dimensions 后端统一计算数量、完成率、启用率和字段覆盖率
数据联动 让 Tab、矩阵树图、指标卡、表格共用一套接口数据 前端 computed 状态只做格式化,不改变业务口径
统计缓存与菜单入口 降低统计接口重复聚合成本,并让页面进入数据统计菜单 使用 get_or_build_stats_payload 与菜单同步脚本维护入口

数据统计

用户统计的数据统计能力覆盖基础人数、分布占比和学生扩展模块覆盖率。后端把学生、教师和学生画像相关模型聚合到一个接口,前端可以在同一页面检查用户账号、分班、学科、生活画像和出勤健康数据。
结果阶段
处理阶段
输入阶段
业务模型
字段口径
空值规则
数量聚合
占比计算
结构组装
概览指标
分布数据
明细矩阵
口径校验

可以直接使用下面的Prompt进行数据统计功能设计

text 复制代码
请为【用户统计】设计数据统计能力。

统计对象:用户结构、学生分布、教师配置、学生生活画像、学生生活日常、学生支持周报、学生健康事件、学生出勤行为、学生入学评估
后端入口:server_backend/modules/MyWork/views_app/UserStats.py
接口地址:/api/MyWork/UserStats/overview/

要求:
- 明确每个统计对象对应的模型、过滤条件、计数字段和完成率字段。
- 统一输出 summary、cards、detail 或 dimensions,不让前端重新推导业务口径。
- 所有 rate 字段返回 0 到 1 的小数,前端再格式化为百分比。
- 分布数据要同时能驱动矩阵树图、图例和明细表格。
- 空值必须归并为可读标签,例如未填写、未设置、未分类、待初始化。
- 给出接口返回示例和异常数据处理规则。

数据联动

用户统计的联动集中在学生/教师 Tab、学生分布 Tab 和学生模块卡片之间。切换 Tab 时,表格行和顶部说明同步变化;矩阵树图显示同一批用户结构或性别数据的占比,明细表格用于核对具体分布。
结果阶段
处理阶段
输入阶段
接口数据
当前 Tab
统计维度
computed 转换
图表数据
表格行列
指标同步
图表同步
表格同步
一致校验

可以直接使用下面的Prompt进行数据联动设计

text 复制代码
请为【用户统计】补齐前端数据联动。

前端入口:server_vue3/src/views/system/MyWork/UserStats/index.vue
联动状态:activeUserTab、activeStudentTab、userCompositionRows、genderRows、scoreRows、classRows、minorSubjectRows、studentModuleStats
展示组件:矩阵树图、Element Plus Tab、统计表格、进度条、学生模块卡片

要求:
- Tab 当前值、指标卡、矩阵树图和明细表格必须来自同一份接口数据。
- computed 只做排序、分组、百分比格式化和空值兜底,不改变后端统计结论。
- 切换 Tab 后标题、描述、指标、图表、表格同步更新。
- 接口为空时展示 el-empty,不出现 NaN、undefined 或布局塌陷。
- 表格高度、滚动区域和移动端布局保持稳定。

统计缓存与菜单入口

用户统计使用缓存 Key mywork.user.overview,在 refresh_all_stats_render_cache 的计划中刷新。菜单入口由 sync_mywork_statistics_menu.py 写入 /system/MyWork/UserStats,组件指向 system/MyWork/UserStats/index

入口类型 真实文件 说明
接口缓存 server_backend/modules/MyWork/utils.py get_or_build_stats_payload 读取或构建统计结果
刷新计划 server_backend/modules/MyWork/utils.py _refresh_plans 覆盖配置、用户、教学、考试、内容统计
菜单同步 server_backend/dvadmin/system/management/commands/sync_mywork_statistics_menu.py 维护 /system/MyWork/UserStats、组件 system/MyWork/UserStats/index 和角色权限
共享样式 server_vue3/src/theme/stats-dashboard.scss 统一 Hero、Header Frame、KPI、滚动容器样式

可以直接使用下面的Prompt进行统计缓存与菜单入口设计

text 复制代码
请为【用户统计】检查统计缓存和菜单入口。

缓存 Key:mywork.user.overview
菜单路径:/system/MyWork/UserStats
组件路径:system/MyWork/UserStats/index
前端页面:server_vue3/src/views/system/MyWork/UserStats/index.vue

要求:
- 统计接口必须接入 `get_or_build_stats_payload`。
- 统一刷新计划需要包含该模块缓存 Key。
- 菜单同步脚本需要写入正确的 web_path、component、component_name、icon、image、sort 和 cache 配置。
- 菜单权限要同步到已有角色权限表,避免页面有路由但角色不可见。
- 交付时列出缓存 Key、菜单路径和接口地址。

Codex开发标准

使用 Codex 开发统计看板时,输入不能只写"做一个统计页面"。更稳的方式是把统计口径、接口字段、页面结构、共享样式、缓存策略和验收清单一次性交给 Codex,让代码生成围绕真实工程边界展开。
验收交付
Codex开发
模块设计
输入约束
源码路径
接口口径
SOP规范
后端聚合
前端布局
缓存菜单
生成代码
补齐状态
统一样式
构建通过
口径一致
页面稳定

SOP 标准

SOP 项 执行标准 对【用户统计】的要求
文档规范 参考 _Demo/_教程撰写.md 的固定结构 标题、开头、TOC、设计、后端、前端、扩展、Codex 标准、总结齐全
统计页规范 参考 docs/sop/server/04.统计看板表格化改造SOP.md 页面使用 Header Frame、指标卡、矩阵树图、明细表格
源码真实性 只写真实代码存在的接口、模型和页面状态 不写 LLM、OCR、导入导出、审批流等不存在能力
样式复用 共享样式统一进入 stats-dashboard.scss 单页只处理必要差异,不复制一套统计页框架
接口稳定 后端给前端结构化统计结果 前端不重新计算复杂业务口径

可以直接使用下面的Prompt进行SOP撰写

text 复制代码
请按照 `_Demo/_教程撰写.md` 和 `docs/sop/server/04.统计看板表格化改造SOP.md`,为【用户统计】整理开发 SOP。

SOP 需要覆盖:源码读取顺序、后端统计口径、前端页面结构、共享样式使用、缓存 Key、菜单同步、构建验证、页面验收清单。

文档只写真实存在的文件、接口和模型。涉及流程时使用 Mermaid,涉及口径映射和验收标准时使用 Markdown 表格。

PDD 标准

验收项 验收标准 失败风险
接口可用 /api/MyWork/UserStats/overview/ 返回 summary、模块数据和明细数据 页面无数据或字段 undefined
统计口径 后端统计与模型字段一致,rate 计算稳定 图表、表格、指标卡口径不一致
页面结构 Hero、模块 Header、KPI、图表、表格层次清晰 统计页像普通列表或内容拥挤
数据联动 Tab 切换后图表和表格同步 用户看到不同区域数据互相冲突
缓存入口 缓存 Key 能被统一刷新计划覆盖 数据更新后页面仍长期显示旧统计
菜单权限 /system/MyWork/UserStats 可见且组件路径正确 卡片能看到但进入页面失败
构建验证 前端构建通过,无类型和模板错误 代码合入后影响管理后台构建

可以直接使用下面的Prompt进行PDD 验收

text 复制代码
请为【用户统计】输出 PDD 验收清单。

需要检查:
1. 后端接口 `/api/MyWork/UserStats/overview/` 的返回结构和字段口径。
2. 前端页面 `server_vue3/src/views/system/MyWork/UserStats/index.vue` 的 Hero、Header Frame、指标卡、矩阵树图、表格、Tab、空态和 loading。
3. 共享样式 `stats-dashboard.scss` 是否被正确使用。
4. 缓存 Key `mywork.user.overview` 是否进入统一刷新计划。
5. 菜单路径 `/system/MyWork/UserStats` 和组件 `system/MyWork/UserStats/index` 是否能通过菜单同步脚本落库。
6. `npm run build` 是否通过。

输出结果用表格列出验收项、检查方法、通过标准和风险说明。

总结

用户统计文档的核心是用户数据底座验收。后端把学生、教师、分班、学科和学生画像模型整理成统一接口,前端用统计看板结构展示用户规模、学生分布和模块覆盖率。

Codex 处理这类统计页时,真正要生成的不只是一个 Vue 页面,而是一条从业务模型、统计接口、缓存刷新、菜单权限到前端可视化的完整链路。只要输入中把真实源码路径、接口地址和统计口径交代清楚,生成出来的代码就更容易接入 ManageBak-ExamEdu 的现有工程结构。

相关推荐
财经资讯数据_灵砚智能2 小时前
基于全球经济类多源新闻的NLP情感分析与数据可视化(日间)2026年5月17日
大数据·人工智能·python·信息可视化·自然语言处理
Mr数据杨2 小时前
【Codex】我的工作教学统计数据可视化
信息可视化
吃好睡好便好17 小时前
在Matlab中绘制三维等高线图
开发语言·python·学习·算法·matlab·信息可视化
吃好睡好便好21 小时前
Matlab中三种三维图的对比
开发语言·人工智能·学习·算法·matlab·信息可视化
Elastic 中国社区官方博客1 天前
Elastic 开源社区行为准则
大数据·elasticsearch·搜索引擎·信息可视化·全文检索
码界筑梦坊1 天前
119-基于Python的各类企业排行数据可视化分析系统
开发语言·python·信息可视化·数据分析·毕业设计·echarts·fastapi
财经资讯数据_灵砚智能1 天前
基于全球经济类多源新闻的NLP情感分析与数据可视化(日间)2026年5月16日
大数据·人工智能·python·信息可视化·自然语言处理
BY组态1 天前
Ricon组态系统:告别传统组态软件的痛点,开启Web可视化新时代
物联网·信息可视化·iot·web组态·组态
AI玫瑰助手2 天前
Python流程控制:break与continue语句的区别与应用
开发语言·python·信息可视化