2025102212-workload-gantt-redesign.md 8.9 KB
工作负载甘特图重新设计
日期: 2025-10-22 12:00 需求: 移除异常提醒，将工作量负载概览改为甘特图，直观显示组员工作状态
需求分析
用户要求
- ✅ 移除异常提醒功能 - 不需要单独的异常提醒面板
- ✅ 重新设计工作量负载概览 - 从卡片式改为甘特图
- ✅ 直观显示工作状态 - 在一个月或一周内什么阶段忙碌、空闲、请假
- ✅ 用甘特图清晰表现 - Y轴显示设计师，X轴显示时间，条形显示状态
实现内容
1. HTML 结构变更 (dashboard.html)
移除的内容
<!-- 移除：异常提醒面板（65-115行） -->
@if (getAlertSummary().totalAlerts > 0) {
<div class="alert-panel">...</div>
}
<!-- 移除：卡片式工作量概览（117-141行） -->
<div class="workload-summary cards">...</div>
新增的内容
<!-- 新增：工作负载甘特图（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行）
@ViewChild('workloadGanttContainer', { static: false }) workloadGanttContainer!: ElementRef<HTMLDivElement>;
private workloadGanttChart: any | null = null;
workloadGanttScale: 'week' | 'month' = 'week';
新增方法
setWorkloadGanttScale（第1021-1026行）
setWorkloadGanttScale(scale: 'week' | 'month'): void {
if (this.workloadGanttScale !== scale) {
this.workloadGanttScale = scale;
this.updateWorkloadGantt();
}
}
updateWorkloadGantt（第1613-1796行）
核心算法：
时间范围计算
- 周视图：显示未来7天
- 月视图：显示未来30天
工作状态判断
if (dayProjects.length === 0) { status = 'idle'; // 空闲 color = '#d1fae5'; // 浅绿色 } else if (dayProjects.length >= 3) { status = 'overload'; // 超负荷 color = '#fecaca'; // 浅红色 } else { status = 'busy'; // 忙碌 color = '#bfdbfe'; // 浅蓝色 }TODO: 请假状态
// TODO: 检查请假记录，如果该天请假则标记为leave // const isOnLeave = this.checkLeave(designerName, dayStart, dayEnd); // if (isOnLeave) { // status = 'leave'; // color = '#e5e7eb'; // 请假-灰色 // }ECharts 配置
- X轴：时间值（timestamp）
- Y轴：设计师名称列表
- 系列：custom类型，渲染矩形条
移除的内容
// 移除：旧的工作量图表相关
- @ViewChild('workloadChartRef')
- private workloadChart
- workloadDimension: 'designer' | 'member'
- setWorkloadDimension()
- updateWorkloadChart()
更新的内容
// 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行）
.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) 方法：
/**
* 检查设计师在指定时间段是否请假
* @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;
}
需要的数据表结构：
LeaveRecord {
objectId: string;
designer: Pointer<Profile>; // 设计师
startDate: Date; // 请假开始日期
endDate: Date; // 请假结束日期
reason: string; // 请假原因
status: 'pending' | 'approved' | 'rejected'; // 审批状态
approvedBy: Pointer<Profile>; // 审批人
}
测试要点
1. 视图切换
- 周视图正确显示7天
- 月视图正确显示30天
- 切换时图表正确更新
2. 工作状态
- 空闲状态显示为浅绿色
- 忙碌状态显示为浅蓝色
- 超负荷状态显示为浅红色
- 请假状态显示为灰色（待实现）
3. 数据准确性
- 设计师列表正确
- 项目数量统计正确
- 时间范围计算正确
4. 交互体验
- 鼠标悬浮显示详细信息
- 响应式设计
- 加载性能良好
效果对比
优化前
- ❌ 异常提醒占用大量空间
- ❌ 卡片式工作量概览不够直观
- ❌ 无法看到时间维度的工作分布
- ❌ 无法一眼识别忙碌/空闲时段
优化后
- ✅ 移除了冗余的异常提醒面板
- ✅ 甘特图直观展示时间维度
- ✅ 清晰的颜色编码（绿/蓝/红）
- ✅ 支持周/月视图切换
- ✅ 一眼识别每个设计师的工作状态
相关文件
| 文件 | 变更内容 |
|---|---|
dashboard.html |
移除异常提醒面板，新增工作负载甘特图HTML结构 |
dashboard.ts |
新增工作负载甘特图逻辑，移除旧的工作量图表代码 |
dashboard-new-styles.scss |
新增工作负载甘特图样式 |
designer.service.ts |
已有数据查询功能（无需修改） |
下一步
- ✅ 测试功能 - 刷新浏览器，检查甘特图显示
- ✅ 验证数据 - 确认设计师和项目数据正确加载
- ⏳ 实现请假功能 - 添加LeaveRecord表和checkLeave方法
- ⏳ 性能优化 - 如果设计师数量很多，考虑虚拟滚动
- ⏳ 用户反馈 - 收集实际使用反馈，持续优化
实施完成时间: 2025-10-22 12:00 状态: ✅ 已完成（除请假功能待实现）