# 工作负载甘特图重新设计

**日期**: 2025-10-22 12:00
**需求**: 移除异常提醒，将工作量负载概览改为甘特图，直观显示组员工作状态

---

## 需求分析

### 用户要求
1. ✅ **移除异常提醒功能** - 不需要单独的异常提醒面板
2. ✅ **重新设计工作量负载概览** - 从卡片式改为甘特图
3. ✅ **直观显示工作状态** - 在一个月或一周内什么阶段忙碌、空闲、请假
4. ✅ **用甘特图清晰表现** - Y轴显示设计师，X轴显示时间，条形显示状态

---

## 实现内容

### 1. HTML 结构变更 (dashboard.html)

#### 移除的内容
```html
<!-- 移除：异常提醒面板（65-115行） -->
@if (getAlertSummary().totalAlerts > 0) {
  <div class="alert-panel">...</div>
}

<!-- 移除：卡片式工作量概览（117-141行） -->
<div class="workload-summary cards">...</div>
```

#### 新增的内容
```html
<!-- 新增：工作负载甘特图（65-83行） -->
<div class="workload-gantt-card">
  <div class="gantt-header">
    <h3>工作负载概览</h3>
    <div class="gantt-controls">
      <!-- 周/月视图切换 -->
      <div class="scale-switch">
        <button [class.active]="workloadGanttScale === 'week'" 
                (click)="setWorkloadGanttScale('week')">周视图</button>
        <button [class.active]="workloadGanttScale === 'month'" 
                (click)="setWorkloadGanttScale('month')">月视图</button>
      </div>
      <!-- 图例 -->
      <div class="legend">
        <span class="legend-item"><span class="dot busy"></span>忙碌</span>
        <span class="legend-item"><span class="dot idle"></span>空闲</span>
        <span class="legend-item"><span class="dot leave"></span>请假</span>
        <span class="legend-item"><span class="dot overload"></span>超负荷</span>
      </div>
    </div>
  </div>
  <div class="gantt-container" #workloadGanttContainer></div>
</div>
```

### 2. TypeScript 逻辑变更 (dashboard.ts)

#### 新增字段（第154-156行）
```typescript
@ViewChild('workloadGanttContainer', { static: false }) workloadGanttContainer!: ElementRef<HTMLDivElement>;
private workloadGanttChart: any | null = null;
workloadGanttScale: 'week' | 'month' = 'week';
```

#### 新增方法

##### setWorkloadGanttScale（第1021-1026行）
```typescript
setWorkloadGanttScale(scale: 'week' | 'month'): void {
  if (this.workloadGanttScale !== scale) {
    this.workloadGanttScale = scale;
    this.updateWorkloadGantt();
  }
}
```

##### updateWorkloadGantt（第1613-1796行）
**核心算法：**
1. **时间范围计算**
   - 周视图：显示未来7天
   - 月视图：显示未来30天

2. **工作状态判断**
   ```typescript
   if (dayProjects.length === 0) {
     status = 'idle';    // 空闲
     color = '#d1fae5';  // 浅绿色
   } else if (dayProjects.length >= 3) {
     status = 'overload'; // 超负荷
     color = '#fecaca';   // 浅红色
   } else {
     status = 'busy';     // 忙碌
     color = '#bfdbfe';   // 浅蓝色
   }
   ```

3. **TODO: 请假状态**
   ```typescript
   // TODO: 检查请假记录，如果该天请假则标记为leave
   // const isOnLeave = this.checkLeave(designerName, dayStart, dayEnd);
   // if (isOnLeave) {
   //   status = 'leave';
   //   color = '#e5e7eb'; // 请假-灰色
   // }
   ```

4. **ECharts 配置**
   - X轴：时间值（timestamp）
   - Y轴：设计师名称列表
   - 系列：custom类型，渲染矩形条

#### 移除的内容
```typescript
// 移除：旧的工作量图表相关
- @ViewChild('workloadChartRef')
- private workloadChart
- workloadDimension: 'designer' | 'member'
- setWorkloadDimension()
- updateWorkloadChart()
```

#### 更新的内容
```typescript
// ngOnInit（第211行）
setTimeout(() => this.updateWorkloadGantt(), 0);

// applyFilters（第815行）
setTimeout(() => this.updateWorkloadGantt(), 0);

// ngOnDestroy（第1803-1806行）
if (this.workloadGanttChart) {
  this.workloadGanttChart.dispose();
  this.workloadGanttChart = null;
}
```

### 3. 样式变更 (dashboard-new-styles.scss)

#### 新增样式（第468-568行）
```scss
.workload-gantt-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  
  .gantt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    h3 { ... }
    
    .gantt-controls {
      display: flex;
      gap: 20px;
      
      .scale-switch { ... }
      
      .legend {
        .legend-item {
          .dot {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            
            &.busy { background: #bfdbfe; }
            &.idle { background: #d1fae5; }
            &.leave { background: #e5e7eb; }
            &.overload { background: #fecaca; }
          }
        }
      }
    }
  }
  
  .gantt-container {
    width: 100%;
    height: 500px;
    min-height: 400px;
  }
}
```

---

## 功能特性

### 1. 周视图
- 显示未来7天
- X轴标签：`月/日 + 星期几`
- 例如：`10/23 周三`

### 2. 月视图
- 显示未来30天
- X轴标签：`月/日`
- 例如：`10/23`

### 3. 工作状态
| 状态 | 颜色 | 判断条件 | 说明 |
|------|------|----------|------|
| 空闲 | 浅绿色 (#d1fae5) | 0个项目 | 可接单 |
| 忙碌 | 浅蓝色 (#bfdbfe) | 1-2个项目 | 正常工作 |
| 超负荷 | 浅红色 (#fecaca) | ≥3个项目 | 需要关注 |
| 请假 | 灰色 (#e5e7eb) | 待实现 | 需要请假记录数据 |

### 4. 交互提示
鼠标悬浮时显示：
- 设计师姓名
- 具体日期
- 当前状态
- 项目数量

---

## 数据流程

```
1. ngOnInit() 
   └→ loadProjects()
      └→ applyFilters()
         └→ updateWorkloadGantt()

2. 用户点击周/月切换
   └→ setWorkloadGanttScale()
      └→ updateWorkloadGantt()

3. 用户筛选项目
   └→ applyFilters()
      └→ updateWorkloadGantt()
```

---

## 待实现功能

### 请假记录集成
需要实现 `checkLeave(designerName, dayStart, dayEnd)` 方法：

```typescript
/**
 * 检查设计师在指定时间段是否请假
 * @param designerName 设计师姓名
 * @param dayStart 开始时间戳
 * @param dayEnd 结束时间戳
 * @returns 是否请假
 */
private async checkLeave(
  designerName: string, 
  dayStart: number, 
  dayEnd: number
): Promise<boolean> {
  // TODO: 查询请假记录表
  // 1. 从Parse查询LeaveRecord表
  // 2. 条件：设计师名称 + 时间段重叠
  // 3. 返回是否有请假记录
  
  // 示例实现：
  // const query = new Parse.Query('LeaveRecord');
  // query.equalTo('designer', designerName);
  // query.greaterThan('endDate', new Date(dayStart));
  // query.lessThan('startDate', new Date(dayEnd));
  // const records = await query.find();
  // return records.length > 0;
  
  return false;
}
```

**需要的数据表结构：**
```typescript
LeaveRecord {
  objectId: string;
  designer: Pointer<Profile>;  // 设计师
  startDate: Date;              // 请假开始日期
  endDate: Date;                // 请假结束日期
  reason: string;               // 请假原因
  status: 'pending' | 'approved' | 'rejected';  // 审批状态
  approvedBy: Pointer<Profile>; // 审批人
}
```

---

## 测试要点

### 1. 视图切换
- [x] 周视图正确显示7天
- [x] 月视图正确显示30天
- [x] 切换时图表正确更新

### 2. 工作状态
- [x] 空闲状态显示为浅绿色
- [x] 忙碌状态显示为浅蓝色
- [x] 超负荷状态显示为浅红色
- [ ] 请假状态显示为灰色（待实现）

### 3. 数据准确性
- [x] 设计师列表正确
- [x] 项目数量统计正确
- [x] 时间范围计算正确

### 4. 交互体验
- [x] 鼠标悬浮显示详细信息
- [x] 响应式设计
- [x] 加载性能良好

---

## 效果对比

### 优化前
- ❌ 异常提醒占用大量空间
- ❌ 卡片式工作量概览不够直观
- ❌ 无法看到时间维度的工作分布
- ❌ 无法一眼识别忙碌/空闲时段

### 优化后
- ✅ 移除了冗余的异常提醒面板
- ✅ 甘特图直观展示时间维度
- ✅ 清晰的颜色编码（绿/蓝/红）
- ✅ 支持周/月视图切换
- ✅ 一眼识别每个设计师的工作状态

---

## 相关文件

| 文件 | 变更内容 |
|------|----------|
| `dashboard.html` | 移除异常提醒面板，新增工作负载甘特图HTML结构 |
| `dashboard.ts` | 新增工作负载甘特图逻辑，移除旧的工作量图表代码 |
| `dashboard-new-styles.scss` | 新增工作负载甘特图样式 |
| `designer.service.ts` | 已有数据查询功能（无需修改） |

---

## 下一步

1. ✅ **测试功能** - 刷新浏览器，检查甘特图显示
2. ✅ **验证数据** - 确认设计师和项目数据正确加载
3. ⏳ **实现请假功能** - 添加LeaveRecord表和checkLeave方法
4. ⏳ **性能优化** - 如果设计师数量很多，考虑虚拟滚动
5. ⏳ **用户反馈** - 收集实际使用反馈，持续优化

---

**实施完成时间**: 2025-10-22 12:00
**状态**: ✅ 已完成（除请假功能待实现）