运动会秩序手册

运动会秩序手册

面向中小学运动会的 报名表解析、自动分组与参与统计 工具集。纯前端实现，无需安装后端，用浏览器打开 HTML 即可使用。

---

功能介绍

系统由两个页面组成，数据通过浏览器 localStorage 串联：先在分组页上传报名表，再打开统计页查看分析结果。

一、运动会报名表分组系统（sport-new.html）

主入口页面，负责读取 Excel 报名表并生成分组秩序。

模块	说明
Excel 上传	支持 .xls / .xlsx，可拖放或点击选择；每个工作表对应一个年级
数据解析	自动识别班级、姓名、性别及报名项目；按班级前缀自动生成唯一号码牌
分组配置	按项目分别设置男子组、女子组「每组人数」（默认 8 人）
智能分组	按「年级 → 项目 → 性别」分组，采用班级轮询分配，尽量打散同班选手
结果展示	分组结果按年级、项目、性别分层展示，含人数与组数信息
结果导出	支持复制全部 / 单组复制；下载 TXT、Word（横向排版）；按项目性别下载 Excel 分组表
年级统计	页面内展示各年级参与人数等简要统计
跳转统计	一键打开「学生体育项目参与统计分析」页面

Excel 报名表格式要求：

• 每个 Sheet 名称为年级（如「七年级」「八年级」）
• 前三列固定为：班级、姓名、性别
• 第 4 列起为各比赛项目列名，有报名标记的单元格视为该生参与该项目

二、学生体育项目参与统计分析（sports-statistics.html）

从分组页写入的 localStorage 读取报名数据，提供可视化统计分析（需先在 sport-new.html 上传 Excel）。

模块	说明
数据总览	总学生数、总项目数、总参与次数、人均参与项目数等关键指标
年级分析	年级人数与参与对比、性别比例、各年级卡片、共有/独有项目、项目参与对比图
项目分析	参与人数排名、性别项目偏好、学生参与项目数量分布、热门/冷门项目 Top 5
班级分析	按年级切换，查看班级详细数据表及班级维度图表

---

文件夹目录介绍

sports-meeting-order-manual/          # 项目根目录
│
├── sport-new.html                    # 【主入口】运动会报名表分组系统
├── sports-statistics.html            # 学生体育项目参与统计分析页面
├── 运动会报名表.xlsx                 # 示例报名表，可用于测试上传与分组
├── 项目说明.md                       # 本说明文档
│
├── 演示材料/                         # 演示与说明素材
│   └── 演示视频.mp4                  # 系统操作演示视频
│
└── vue3-sport项目版本待开发.zip      # Vue3 重构版本（待开发，非当前可用版本）

文件说明

路径	类型	用途
sport-new.html	单页应用	上传报名表、配置分组、导出秩序手册，建议从此文件开始使用
sports-statistics.html	单页应用	报名数据的多维度统计与图表展示
运动会报名表.xlsx	示例数据	标准格式的运动会报名表样例
项目说明.md	文档	项目功能与目录说明
演示材料/演示视频.mp4	演示素材	完整操作流程录屏
vue3-sport项目版本待开发.zip	归档包	计划中的 Vue3 版本源码，当前未集成到主流程

技术依赖（CDN 引入，无需本地安装）

• UI：Tailwind CSS、Font Awesome
• 分组页：SheetJS（xlsx）、ExcelJS、JSZip、FileSaver.js
• 统计页：Chart.js

---

快速使用

1. 用浏览器打开 sport-new.html
2. 上传 运动会报名表.xlsx 或自有报名表（格式同上）
3. 调整各项目每组人数，点击「生成分组结果」
4. 按需复制或下载 TXT / Word / Excel
5. 点击「统计功能」或打开 sports-statistics.html 查看数据分析

统计页依赖同一浏览器下的 localStorage 数据；若清空浏览器缓存或未先上传报名表，统计页将无法展示内容。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/sports-meeting-order-manual