# 赛程编排界面更新总结

## 更新时间
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`