项目负载时间轴甘特图优化

日期: 2025-10-22 14:00
需求: 优化"项目负载时间轴"甘特图，让组长清晰看到每个项目的负载情况

问题背景

用户指出之前优化错了图表：

上方图表: "工作量负载概览" - 显示设计师每日工作状态（忙碌/空闲/请假）
下方图表: "项目负载时间轴" - 显示每个项目的具体排期和负载情况

需求是优化下方的"项目负载时间轴"，让每个项目的负载情况更清晰。

优化内容

1. 还原上方图表标题

文件: dashboard.html 第65-69行

<!-- 工作量负载概览 -->
<div class="workload-gantt-card">
  <div class="gantt-header">
    <h3>工作量负载概览</h3>
    <p class="gantt-subtitle">设计师每日工作状态一目了然</p>

说明:

将之前误改的"项目负载时间图"还原为"工作量负载概览"
副标题改为"设计师每日工作状态一目了然"

2. 优化下方甘特图标题和说明

文件: dashboard.html 第89-91行

<div class="title">项目负载时间轴</div>
<div class="hint">
  👤 设计师按负载由高到低排列 | 🎨 每个条形代表一个项目 | 🔴超期 🟠临期 🟢正常
</div>

改进:

✅ 保留"项目负载时间轴"名称
✅ 增加emoji图标说明
✅ 明确"每个条形代表一个项目"

3. 增强Tooltip信息

文件: dashboard.ts 第1476-1545行

新增信息项：

项目名称 - 🎨 图标 + 加粗显示
紧急度徽章 - 🔥高紧急 / ⚡中紧急 / ✓正常
VIP标识 - ⭐ VIP（如果是VIP客户）
设计师信息 - 👤 名称 + 负载状态图标（🟢🟡🔴）
当前阶段 - 📋 阶段名称
项目周期 - 📅 开始~结束日期 + 总天数
剩余状态 - ⏱️ 剩余X天 / 今天截止 / 已超期X天（彩色显示）
点击提示 - 💡 点击条形可查看项目详情

Tooltip显示示例：

┌──────────────────────────────────────┐
│ 🎨 现代简约客厅设计方案              │
│ 🔥 高紧急  ⭐ VIP                    │
├──────────────────────────────────────┤
│ 👤 设计师：张三 🔴 超负荷            │
│ 📋 阶段：施工图深化                  │
│ 📅 周期：2025/10/20 ~ 2025/10/30 (10天) │
│ ⏱️ 状态：剩余3天                     │
├──────────────────────────────────────┤
│ 💡 点击条形可查看项目详情            │
└──────────────────────────────────────┘

4. 优化Y轴设计师标签

文件: dashboard.ts 第1562-1632行

新增功能：

负载状态图标
- 🔥 = 超负荷（5+项目）
- ⚡ = 忙碌（3-4项目）
- ○ = 空闲（0-2项目）
项目数量徽章（带彩色背景）
- 🔴 红色徽章 = 5+项目（超负荷）
- 🟠 橙色徽章 = 3-4项目（忙碌）
- 🟢 绿色徽章 = 1-2项目（轻负载）
- ⚪ 灰色徽章 = 0项目（空闲）
视觉效果
- 字体加粗（weight: 500）
- 字号增大（13px）
- 徽章背景色（红/橙/绿/灰）
- 圆角边框（borderRadius: 3）

Y轴显示示例：

🔥 张三 5  ← 红色徽章，超负荷
⚡ 李四 3  ← 橙色徽章，忙碌
⚡ 王五 3  ← 橙色徽章，忙碌
○ 赵六 1   ← 绿色徽章，轻负载
○ 孙七 0   ← 灰色徽章，空闲

5. 项目条形增强显示

文件: dashboard.ts 第1668-1777行

核心改进：

增加条形高度
- 从 0.5 * rowHeight 提升到 0.6 * rowHeight
- 最小高度从 10px 提升到 16px
- 让项目名称有足够空间显示
项目名称直接显示
- 条形宽度 ≥ 50px：显示"🔥 项目名称"
- 条形宽度 30-50px：仅显示紧急度图标（🔥⚡✓）
- 条形宽度 < 30px：仅显示彩色条形
紧急度图标集成
- 🔥 = 高紧急
- ⚡ = 中紧急
- ✓ = 正常
超负荷视觉强化
- 如果设计师处于超负荷状态，项目条形添加：
  - 阴影效果（shadowBlur: 8）
  - 红色阴影（rgba(220, 38, 38, 0.4)）
  - 阴影偏移（shadowOffsetY: 2）
文字样式优化
- 字号：12px（增大）
- 字重：600（加粗）
- 白色文字 + 黑色描边（lineWidth: 0.8）
- 文字阴影（textShadowBlur: 3）
- 左侧间距：8px

项目条形显示逻辑：

if (width >= 50) {
  // 显示：🔥 项目名称（截断过长部分）
  const fullText = `${urgencyIcon} ${displayName}`;
} else if (width >= 30) {
  // 仅显示：🔥
  const urgencyIcon = '🔥'; // 或 ⚡ 或 ✓
} else {
  // 仅显示彩色条形，无文字
}

6. 增加图表标题和图例

文件: dashboard.ts 第1546-1560行

新增图表标题：

title: {
  text: this.ganttScale === 'week' ? '本周项目排期' : '本月项目排期',
  subtext: '每个条形代表一个项目，颜色越深紧急度越高',
  left: 'center',
  top: 10,
  textStyle: { fontSize: 15, color: '#374151', fontWeight: 600 },
  subtextStyle: { fontSize: 12, color: '#6b7280' }
}

优化图例：

legend: {
  data: ['🔥 高紧急', '⚡ 中紧急', '✓ 正常', '🟢 可接单', '🟡 忙碌', '🔴 超负荷'],
  bottom: 10,
  itemGap: 20,
  textStyle: { fontSize: 12, color: '#6b7280' }
}

7. 优化布局空间

文件: dashboard.ts 第1560行

grid: { 
  left: 150,   // 增加左侧空间（原110px）
  right: 70,   // 增加右侧空间（原64px）
  top: 60,     // 增加顶部空间（原30px）
  bottom: 70   // 增加底部空间（原60px）
}

说明:

左侧150px：容纳设计师名称 + 图标 + 项目数徽章
顶部60px：容纳图表标题和副标题
底部70px：容纳图例说明

8. 增加甘特图容器高度

文件: dashboard.scss 第168-172行

.gantt-container {
  width: 100%;
  height: 600px; // 增加高度（原500px）
  min-height: 500px;
}

说明:

增加高度到600px，让更多项目可见
减少滚动需求，提升浏览体验

优化效果对比

优化前

问题	描述
❌ 项目名称不显示	无法知道是哪个项目
❌ 紧急度不明显	只有颜色区分
❌ 条形太细	不易识别
❌ Y轴信息简单	只有名称和圆点
❌ Tooltip信息少	缺少关键数据
❌ 无图表标题	不知道时间范围

优化后

改进	描述
✅ 项目名称直接显示	🔥 项目名称（如果空间足够）
✅ 紧急度图标清晰	🔥⚡✓ 三种图标
✅ 条形更粗	高度增加20%（0.5→0.6）
✅ Y轴彩色徽章	🔥张三 5（红色徽章）
✅ Tooltip信息丰富	8项关键信息
✅ 图表标题清晰	"本周/本月项目排期"

视觉效果示意

┌────────────────────────────────────────────────────────────────────┐
│                        本周项目排期                                 │
│              每个条形代表一个项目，颜色越深紧急度越高                │
├────────────────────────────────────────────────────────────────────┤
│                                                                    │
│  🔥 张三 5  ████████████████████████████████████████              │
│             🔥 现代简约客厅  🔥 轻奢卧室  ⚡ 北欧书房              │
│                                                                    │
│  ⚡ 李四 3  ████████████████████████░░░░░░░░░░░░                  │
│             ⚡ 工业风餐厅  ✓ 新中式茶室  ✓ 日式和室                │
│                                                                    │
│  ○ 王五 1   ████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░                 │
│             ✓ 美式田园客厅                                         │
│                                                                    │
│  ○ 赵六 0   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░               │
│             （空闲可接单）                                          │
│                                                                    │
├────────────────────────────────────────────────────────────────────┤
│ 图例：🔥高紧急  ⚡中紧急  ✓正常  🟢可接单  🟡忙碌  🔴超负荷      │
└────────────────────────────────────────────────────────────────────┘

颜色说明：
🔴 深红色 = 高紧急项目
🟠 橙色 = 中紧急项目
🟢 绿色 = 正常项目

使用场景

场景1：查看本周项目排期

操作: 打开页面，切换到"周视图"

效果:

看到标题"本周项目排期"
Y轴显示 🔥 张三 5，立即知道张三超负荷
看到张三的5个项目条形，每个都显示"🔥 项目名称"
条形颜色深浅表示紧急度：深红 > 橙 > 绿

场景2：查看项目详细信息

操作: 鼠标悬浮在任意项目条形上

效果:

弹出详细Tooltip
显示：项目名称、紧急度、VIP标识、设计师、阶段、周期、剩余天数
底部提示"💡 点击条形可查看项目详情"

场景3：识别超负荷设计师

操作: 查看Y轴左侧

效果:

看到 🔥 图标 + 红色徽章 = 超负荷
看到 ⚡ 图标 + 橙色徽章 = 忙碌
看到 ○ 图标 + 绿/灰徽章 = 可接单
超负荷设计师的项目条形带红色阴影效果

场景4：快速识别项目紧急度

操作: 查看项目条形

效果:

🔥 图标 + 深红色 = 高紧急
⚡ 图标 + 橙色 = 中紧急
✓ 图标 + 绿色 = 正常
条形上直接显示项目名称（如空间足够）

技术要点

1. 条形自适应文本显示

if (width >= 50) {
  // 显示完整：图标 + 项目名称
  return { type: 'group', children: [rect, text] };
} else if (width >= 30) {
  // 仅显示图标
  return { type: 'group', children: [rect, icon] };
} else {
  // 仅显示条形
  return rect;
}

2. Y轴Rich Text富文本

formatter: (val: string) => {
  const countDisplay = count >= 5 ? `{highCount|${count}}` : // 红色徽章
                      count >= 3 ? `{mediumCount|${count}}` : // 橙色徽章
                      count >= 1 ? `{lowCount|${count}}` : // 绿色徽章
                      `{idleCount|${count}}`; // 灰色徽章
  return `${statusIcon} {name|${text}} ${countDisplay}`;
}

3. 超负荷视觉强化

if (workloadStatus === 'overloaded') {
  rectStyle.shadowBlur = 8;
  rectStyle.shadowColor = 'rgba(220, 38, 38, 0.4)';
  rectStyle.shadowOffsetY = 2;
}

4. Tooltip动态内容

const remainingDays = Math.ceil((end.getTime() - now.getTime()) / DAY);
const remainingText = remainingDays > 0 ? `剩余${remainingDays}天` : 
                     remainingDays === 0 ? '今天截止' : 
                     `已超期${Math.abs(remainingDays)}天`;
const remainingColor = remainingDays > 7 ? '#16a34a' : // 绿色
                      remainingDays > 0 ? '#ea580c' : // 橙色
                      '#dc2626'; // 红色

文件变更清单

文件	变更内容	行数
`dashboard.html`	还原上方标题 + 优化下方说明	65-91
`dashboard.ts`	Tooltip增强 + Y轴徽章 + 条形显示 + 标题图例	1476-1777
`dashboard.scss`	增加容器高度	168-172

测试要点

视觉测试

上方图表标题显示"工作量负载概览"
下方图表标题显示"项目负载时间轴"
图表顶部显示"本周/本月项目排期"
Y轴显示图标 + 名称 + 彩色徽章
项目条形显示"🔥 项目名称"（如空间足够）
底部图例清晰显示

交互测试

悬浮项目条形显示详细Tooltip
Tooltip包含8项关键信息
剩余天数颜色正确（绿/橙/红）
超负荷设计师的项目条形有红色阴影
周/月视图切换正常
滚动条正常工作

数据测试

设计师按项目数从多到少排序
项目数量徽章颜色正确（红/橙/绿/灰）
紧急度图标正确（🔥⚡✓）
项目颜色正确（红/橙/绿）
VIP标识显示正确
负载状态图标正确（🔥⚡○）

优化总结

核心改进

✅ 项目名称直接可见 - 不用悬浮就能看到是哪个项目
✅ 紧急度一目了然 - 🔥⚡✓ 图标 + 颜色双重标识
✅ 负载状态清晰 - Y轴徽章（红/橙/绿/灰）+ 图标（🔥⚡○）
✅ 信息密度提升 - Tooltip显示8项关键数据
✅ 视觉层次分明 - 标题、图例、徽章、阴影
✅ 空间利用优化 - 增加高度（600px）+ 左侧空间（150px）

用户价值

组长打开页面后3秒内即可：

看到时间范围 - "本周/本月项目排期"
识别超负荷 - 🔥图标 + 红色徽章 + 红色阴影
看到项目名称 - 条形上直接显示
了解紧急度 - 图标 + 颜色
查看详细信息 - 悬浮Tooltip

实施完成时间: 2025-10-22 14:00
状态: ✅ 已完成并优化
测试状态: ✅ 无Lint错误

2025102214-project-gantt-optimization.md 14 KB Permalink Histórico Raw