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

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

---

## 问题背景

用户指出之前优化错了图表：
- **上方图表**: "工作量负载概览" - 显示设计师每日工作状态（忙碌/空闲/请假）
- **下方图表**: "项目负载时间轴" - 显示每个项目的具体排期和负载情况

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

---

## 优化内容

### 1. 还原上方图表标题

**文件**: `dashboard.html` 第65-69行

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

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

---

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

**文件**: `dashboard.html` 第89-91行

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

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

---

### 3. 增强Tooltip信息

**文件**: `dashboard.ts` 第1476-1545行

#### 新增信息项：

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

#### Tooltip显示示例：

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

---

### 4. 优化Y轴设计师标签

**文件**: `dashboard.ts` 第1562-1632行

#### 新增功能：

1. **负载状态图标**
   - `🔥` = 超负荷（5+项目）
   - `⚡` = 忙碌（3-4项目）
   - `○` = 空闲（0-2项目）

2. **项目数量徽章**（带彩色背景）
   - 🔴 红色徽章 = 5+项目（超负荷）
   - 🟠 橙色徽章 = 3-4项目（忙碌）
   - 🟢 绿色徽章 = 1-2项目（轻负载）
   - ⚪ 灰色徽章 = 0项目（空闲）

3. **视觉效果**
   - 字体加粗（weight: 500）
   - 字号增大（13px）
   - 徽章背景色（红/橙/绿/灰）
   - 圆角边框（borderRadius: 3）

#### Y轴显示示例：

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

---

### 5. 项目条形增强显示

**文件**: `dashboard.ts` 第1668-1777行

#### 核心改进：

1. **增加条形高度**
   - 从 `0.5 * rowHeight` 提升到 `0.6 * rowHeight`
   - 最小高度从 10px 提升到 16px
   - 让项目名称有足够空间显示

2. **项目名称直接显示**
   - 条形宽度 ≥ 50px：显示"🔥 项目名称"
   - 条形宽度 30-50px：仅显示紧急度图标（🔥⚡✓）
   - 条形宽度 < 30px：仅显示彩色条形

3. **紧急度图标集成**
   - 🔥 = 高紧急
   - ⚡ = 中紧急
   - ✓ = 正常

4. **超负荷视觉强化**
   - 如果设计师处于超负荷状态，项目条形添加：
     - 阴影效果（shadowBlur: 8）
     - 红色阴影（rgba(220, 38, 38, 0.4)）
     - 阴影偏移（shadowOffsetY: 2）

5. **文字样式优化**
   - 字号：12px（增大）
   - 字重：600（加粗）
   - 白色文字 + 黑色描边（lineWidth: 0.8）
   - 文字阴影（textShadowBlur: 3）
   - 左侧间距：8px

#### 项目条形显示逻辑：

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

---

### 6. 增加图表标题和图例

**文件**: `dashboard.ts` 第1546-1560行

#### 新增图表标题：

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

#### 优化图例：

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

---

### 7. 优化布局空间

**文件**: `dashboard.ts` 第1560行

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

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

---

### 8. 增加甘特图容器高度

**文件**: `dashboard.scss` 第168-172行

```scss
.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. 条形自适应文本显示

```typescript
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富文本

```typescript
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. 超负荷视觉强化

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

### 4. Tooltip动态内容

```typescript
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标识显示正确
- [ ] 负载状态图标正确（🔥⚡○）

---

## 优化总结

### 核心改进

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

### 用户价值

组长打开页面后3秒内即可：
1. **看到时间范围** - "本周/本月项目排期"
2. **识别超负荷** - 🔥图标 + 红色徽章 + 红色阴影
3. **看到项目名称** - 条形上直接显示
4. **了解紧急度** - 图标 + 颜色
5. **查看详细信息** - 悬浮Tooltip

---

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