231 lines
6.5 KiB
Markdown
231 lines
6.5 KiB
Markdown
# 赛程编排界面更新总结
|
|
|
|
## 更新时间
|
|
2025-12-09
|
|
|
|
## 更新目标
|
|
根据参考图片修改赛程编排页面的显示界面,使其更加简洁紧凑,同时保持所有现有业务逻辑不变。
|
|
|
|
## 参考图片
|
|
1. `doc/image/订单管理页面/微信图片_20251127165909_228_2.png` - 竞赛分组Tab界面
|
|
2. `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, 居中)
|
|
|
|
#### 新增计算属性
|
|
```javascript
|
|
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部分
|
|
1. **竞赛分组Tab** (行 38-113)
|
|
- 重写分组列表结构为紧凑布局
|
|
- 移除按钮,使用标签显示场地
|
|
- 简化嵌套结构
|
|
|
|
2. **场地Tab** (行 115-172)
|
|
- 保持场地分区结构
|
|
- 每个场地显示独立表格
|
|
- 添加时间段选择器
|
|
- 使用`el-table`组件
|
|
- 添加场地标题和空数据提示
|
|
|
|
#### Script部分
|
|
1. **computed属性** (行 238-331)
|
|
- 保留`currentTimeSlotGroups`
|
|
- 保留`groupsByVenue`
|
|
- 新增`venueTableDataByVenue` - 按场地生成表格数据数组
|
|
|
|
#### Style部分 (行 527-775)
|
|
1. 完全重写样式
|
|
2. 移除旧的`.groups-list`相关样式
|
|
3. 新增`.groups-list-compact`相关样式
|
|
4. 新增`.venue-section-table`相关样式(场地分区+表格)
|
|
5. 保持页面整体布局样式不变
|
|
|
|
## 保持不变的功能
|
|
|
|
### 数据加载
|
|
- `loadCompetitionInfo()` - 加载赛事信息
|
|
- `loadVenues()` - 加载场地列表
|
|
- `loadScheduleResult()` - 加载编排结果
|
|
- `generateTimeSlots()` - 生成时间段
|
|
|
|
### 业务逻辑
|
|
- 自动编排逻辑(后端)
|
|
- 数据结构(scheduleGroups)
|
|
- API调用
|
|
- 保存和锁定功能
|
|
- 刷新功能
|
|
|
|
### 删除的功能
|
|
- 场地详情对话框相关代码(场地信息已直接在表格中显示)
|
|
- `handleVenueDetailClick()` 方法(不再需要)
|
|
- `handleParticipantDetailClick()` 方法(不再需要)
|
|
- 相关的dialog组件(不再需要)
|
|
|
|
## 兼容性说明
|
|
|
|
### 数据结构兼容
|
|
完全兼容现有后端API返回的数据结构:
|
|
- `scheduleGroups` 数组
|
|
- `organizationGroups` (集体项目)
|
|
- `participants` (个人项目)
|
|
- `scheduleDetails` 场地时间信息
|
|
|
|
### 功能兼容
|
|
- 所有后端API保持不变
|
|
- 所有业务逻辑保持不变
|
|
- 仅UI展示方式改变
|
|
|
|
## 测试建议
|
|
|
|
### 界面测试
|
|
1. 检查竞赛分组Tab显示是否正确
|
|
2. 检查场地Tab表格显示是否正确
|
|
3. 测试时间段切换功能
|
|
4. 测试Tab切换功能
|
|
5. 检查在不同数据量下的显示效果
|
|
|
|
### 数据测试
|
|
1. 测试无数据情况
|
|
2. 测试集体项目数据
|
|
3. 测试个人项目数据
|
|
4. 测试混合数据
|
|
5. 测试大数据量(1000+参赛者)
|
|
|
|
### 功能测试
|
|
1. 测试刷新功能
|
|
2. 测试保存编排功能
|
|
3. 测试锁定状态显示
|
|
4. 测试导出功能
|
|
|
|
## 后续优化建议
|
|
|
|
### 功能增强
|
|
1. 添加表格排序功能
|
|
2. 添加表格搜索/过滤功能
|
|
3. 添加分页功能(数据量大时)
|
|
4. 支持拖拽调整分组顺序
|
|
|
|
### 交互优化
|
|
1. 添加点击表格行显示详情
|
|
2. 添加右键菜单快捷操作
|
|
3. 添加批量编辑功能
|
|
4. 添加场地冲突高亮提示
|
|
|
|
### 导出功能
|
|
1. 支持导出为Excel
|
|
2. 支持导出为PDF
|
|
3. 支持打印预览
|
|
4. 支持自定义导出模板
|
|
|
|
## 总结
|
|
|
|
本次更新成功将赛程编排界面改造为更加紧凑清晰的布局,主要亮点:
|
|
|
|
✅ 竞赛分组Tab采用紧凑列表,信息密度更高
|
|
✅ 场地Tab保持场地分区结构,每个场地显示独立表格
|
|
✅ 两个Tab都支持时间段筛选
|
|
✅ 场地标题采用醒目的蓝色背景样式
|
|
✅ 保持所有现有业务逻辑不变
|
|
✅ 完全兼容现有后端API
|
|
✅ 样式清晰,符合参考图片要求
|
|
|
|
**关键改进点:**
|
|
- 场地Tab按"一号场地"、"二号场地"等分区显示
|
|
- 每个场地区域内显示该场地的赛程表格
|
|
- 表格数据根据选中的时间段动态过滤
|
|
- 集体项目按单位(队伍)展开为多行
|
|
- 个人项目整个分组显示为一行
|
|
|
|
---
|
|
|
|
**修改人**: Claude Code
|
|
**修改日期**: 2025-12-09
|
|
**文件位置**: `src/views/martial/schedule/index.vue`
|