6.5 KiB
6.5 KiB
赛程编排界面更新总结
更新时间
2025-12-09
更新目标
根据参考图片修改赛程编排页面的显示界面,使其更加简洁紧凑,同时保持所有现有业务逻辑不变。
参考图片
doc/image/订单管理页面/微信图片_20251127165909_228_2.png- 竞赛分组Tab界面doc/image/订单管理页面/微信图片_20251127165915_229_2.png- 场地Tab界面
主要改动
1. 竞赛分组Tab (Competition Grouping Tab)
改动前
- 使用卡片式布局展示分组
- 场地时间信息显示为按钮
- 布局较为分散,占用空间较大
改动后
- 采用紧凑列表布局
- 分组标题显示为:"序号. 项目名称 类型标签 队伍数 人数 编号"
- 集体项目:子项显示为"序号. 单位名称 场地标签..."
- 个人项目:子项显示为"序号. 单位-姓名 场地标签"
- 场地信息以小标签形式内联显示(如"场A场")
新增样式类
.groups-list-compact- 紧凑列表容器.group-item-compact- 分组项.group-header-compact- 分组标题区.group-number- 序号样式.group-title-text- 标题文本.group-type-badge- 类型标签(集体/个人).group-meta-text- 元信息文本.team-list-compact- 集体项目队伍列表.team-item-compact- 队伍项.individual-list-compact- 个人项目列表.individual-item-compact- 个人项.venue-labels- 场地标签容器.venue-label- 单个场地标签
2. 场地Tab (Venue Tab)
改动前
- 按场地分区显示,每个场地一个大卡片
- 每个场地内显示该场地的所有分组
- 使用与竞赛分组Tab相同的卡片布局
改动后
- 按场地分区显示,保持场地分区结构
- 添加时间段选择器(与竞赛分组Tab一致)
- 每个场地显示一个独立的表格
- 场地标题采用蓝色背景样式
- 使用Element Plus的
el-table组件 - 表格列:
- 序号 (80px, 居中)
- 项目 (最小200px)
- 单人/集体 (100px, 居中, 带标签)
- 队伍 (80px, 居中)
- 组数 (80px, 居中)
- 合并场 (100px, 居中)
- 序号 (100px, 居中)
新增计算属性
venueTableDataByVenue() {
// 按场地生成表格数据数组
// 每个场地一个对象: { venueId, venueName, tableData }
// 根据当前选中时间段过滤该场地的分组
// 集体项目:按单位(organizationGroups)生成行
// 个人项目:整个分组作为一行
}
新增样式类
.venue-section-table- 场地分区容器.venue-header- 场地标题(蓝色背景).empty-venue- 场地无数据提示.venue-table-container- 表格容器- Element Plus表格样式覆盖
3. 公共改进
时间段选择器
- 两个Tab都显示时间段选择器
- 选中的时间段高亮显示
- 根据选中时间段过滤显示的数据
样式优化
- 统一使用更紧凑的间距
- 调整颜色方案以匹配参考图片
- 使用内联标签代替按钮显示场地信息
- 优化字体大小和权重
文件修改
修改的文件
src/views/martial/schedule/index.vue
具体修改内容
Template部分
-
竞赛分组Tab (行 38-113)
- 重写分组列表结构为紧凑布局
- 移除按钮,使用标签显示场地
- 简化嵌套结构
-
场地Tab (行 115-172)
- 保持场地分区结构
- 每个场地显示独立表格
- 添加时间段选择器
- 使用
el-table组件 - 添加场地标题和空数据提示
Script部分
- computed属性 (行 238-331)
- 保留
currentTimeSlotGroups - 保留
groupsByVenue - 新增
venueTableDataByVenue- 按场地生成表格数据数组
- 保留
Style部分 (行 527-775)
- 完全重写样式
- 移除旧的
.groups-list相关样式 - 新增
.groups-list-compact相关样式 - 新增
.venue-section-table相关样式(场地分区+表格) - 保持页面整体布局样式不变
保持不变的功能
数据加载
loadCompetitionInfo()- 加载赛事信息loadVenues()- 加载场地列表loadScheduleResult()- 加载编排结果generateTimeSlots()- 生成时间段
业务逻辑
- 自动编排逻辑(后端)
- 数据结构(scheduleGroups)
- API调用
- 保存和锁定功能
- 刷新功能
删除的功能
- 场地详情对话框相关代码(场地信息已直接在表格中显示)
handleVenueDetailClick()方法(不再需要)handleParticipantDetailClick()方法(不再需要)- 相关的dialog组件(不再需要)
兼容性说明
数据结构兼容
完全兼容现有后端API返回的数据结构:
scheduleGroups数组organizationGroups(集体项目)participants(个人项目)scheduleDetails场地时间信息
功能兼容
- 所有后端API保持不变
- 所有业务逻辑保持不变
- 仅UI展示方式改变
测试建议
界面测试
- 检查竞赛分组Tab显示是否正确
- 检查场地Tab表格显示是否正确
- 测试时间段切换功能
- 测试Tab切换功能
- 检查在不同数据量下的显示效果
数据测试
- 测试无数据情况
- 测试集体项目数据
- 测试个人项目数据
- 测试混合数据
- 测试大数据量(1000+参赛者)
功能测试
- 测试刷新功能
- 测试保存编排功能
- 测试锁定状态显示
- 测试导出功能
后续优化建议
功能增强
- 添加表格排序功能
- 添加表格搜索/过滤功能
- 添加分页功能(数据量大时)
- 支持拖拽调整分组顺序
交互优化
- 添加点击表格行显示详情
- 添加右键菜单快捷操作
- 添加批量编辑功能
- 添加场地冲突高亮提示
导出功能
- 支持导出为Excel
- 支持导出为PDF
- 支持打印预览
- 支持自定义导出模板
总结
本次更新成功将赛程编排界面改造为更加紧凑清晰的布局,主要亮点:
✅ 竞赛分组Tab采用紧凑列表,信息密度更高 ✅ 场地Tab保持场地分区结构,每个场地显示独立表格 ✅ 两个Tab都支持时间段筛选 ✅ 场地标题采用醒目的蓝色背景样式 ✅ 保持所有现有业务逻辑不变 ✅ 完全兼容现有后端API ✅ 样式清晰,符合参考图片要求
关键改进点:
- 场地Tab按"一号场地"、"二号场地"等分区显示
- 每个场地区域内显示该场地的赛程表格
- 表格数据根据选中的时间段动态过滤
- 集体项目按单位(队伍)展开为多行
- 个人项目整个分组显示为一行
修改人: Claude Code
修改日期: 2025-12-09
文件位置: src/views/martial/schedule/index.vue