# 🔍 员工信息面板数据显示问题诊断指南

## 📋 问题描述

根据用户截图，员工信息面板已经成功复用了 `@employee-detail-panel` 组件，但存在以下问题：

1. ✅ **组件成功加载**：面板正确显示了"负载概况"、"日程规划"、"红色标记说明"、"能力问卷"等区块
2. ❌ **数据显示不完整**：
   - "当前负责项目数"可能显示为 0
   - "核心项目"列表可能为空
   - "日程规划"（日历）可能没有标记项目
   - "能力问卷"可能显示为"未完成"
   - "未来7天无请假安排"（正常，因为我们没有加载请假数据）

---

## 🔍 诊断步骤

### 步骤 1：打开浏览器控制台

1. 访问 `http://localhost:4200/admin/employees`
2. 按 `F12` 打开开发者工具
3. 切换到 "Console" 标签页

### 步骤 2：点击员工并查看日志

1. 点击列表中的 "徐福静" 员工（根据截图）
2. 查看控制台输出的日志

### 步骤 3：验证数据加载流程

应该看到以下日志序列：

```javascript
// 1️⃣ 开始打开面板
🚀 [Employees] 开始打开员工信息面板: 徐福静 (xxxxxxxx)

// 2️⃣ 预加载数据
🔄 [Employees] 预加载员工 xxxxxxxx 的完整数据...

// 3️⃣ 项目数据加载完成
✅ [Employees] 项目数据加载完成: {
  currentProjects: 3,          // ⭐ 检查这个值
  ongoingProjects: 3,
  项目列表: ["项目A", "项目B", "项目C"]
}

// 4️⃣ 日历数据生成完成
📅 [Employees] 日历数据生成完成: {
  days: 42,                     // ⭐ 应该是 42（6行×7列）
  有项目的天数: 15              // ⭐ 检查这个值
}

// 5️⃣ 问卷数据加载完成
📝 [Employees] 问卷数据加载完成: {
  completed: true,              // ⭐ 检查这个值
  answers: 12
}

// 6️⃣ 完整数据准备完成
🎯 [Employees] 完整数据准备完成，打开面板: {
  currentProjects: 3,           // ⭐ 检查这个值
  projectData: 3,               // ⭐ 检查这个值
  calendarData: '✅',
  surveyData: '✅'
}

// 7️⃣ 面板已显示
✅ [Employees] 面板已显示
```

### 步骤 4：切换到"项目负载"标签页

1. 点击面板顶部的"项目负载"标签
2. 查看控制台输出的数据转换日志

应该看到：

```javascript
// 8️⃣ 开始转换数据
🔍 [employeeDetailForTeamLeader] 开始转换: {
  有employee: true,
  activeTab: 'workload',
  visible: true
}

// 9️⃣ 转换完成
✅ [employeeDetailForTeamLeader] 转换完成: {
  name: '徐福静',
  currentProjects: 3,           // ⭐ 关键：检查这个值
  projectDataLength: 3,         // ⭐ 关键：检查这个值
  projectNamesLength: 3,
  hasCalendarData: true,        // ⭐ 关键：应该是 true
  calendarDays: 42,             // ⭐ 关键：应该是 42
  hasSurveyData: true,          // ⭐ 关键：如果有问卷应该是 true
  surveyCompleted: true,
  leaveRecordsLength: 0         // ⭐ 正常：我们没有加载请假数据
}

// 🔟 完整数据结构
📦 [employeeDetailForTeamLeader] 完整数据结构: {
  employee: { /* EmployeeFullInfo 对象 */ },
  result: { /* EmployeeDetail 对象 */ }
}
```

---

## 🐛 常见问题诊断

### 问题 1：`currentProjects` 为 0

**症状：**
```javascript
currentProjects: 0,
projectData: 0,
```

**可能原因：**
1. 该员工确实没有项目
2. `employeeService.getEmployeeWorkload()` 返回的数据为空
3. 数据库查询失败

**诊断方法：**
```javascript
// 查看项目数据加载日志
✅ [Employees] 项目数据加载完成: {
  currentProjects: 0,          // ❌ 如果是 0，说明查询结果为空
  ongoingProjects: 0,
  项目列表: []                 // ❌ 如果是空数组，说明没有项目
}
```

**解决方案：**
1. 检查该员工是否真的有项目（在组长端检查）
2. 检查 `employeeService.getEmployeeWorkload()` 的查询逻辑
3. 检查数据库中的 `Project` 或 `ProjectTeam` 表

### 问题 2：`calendarData` 为 `undefined` 或 `null`

**症状：**
```javascript
hasCalendarData: false,
calendarDays: 0,
```

**可能原因：**
1. `buildCalendarData()` 方法返回了 `undefined`
2. 传入的 `projects` 数组为空
3. 日历生成逻辑出错

**诊断方法：**
```javascript
// 查看日历数据生成日志
📅 [Employees] 日历数据生成完成: {
  days: 0,                      // ❌ 如果是 0，说明日历生成失败
  有项目的天数: 0
}
```

**解决方案：**
1. 检查 `buildCalendarData()` 方法是否正确返回数据
2. 添加调试日志到 `buildCalendarData()` 方法
3. 检查 `wl.ongoingProjects` 是否有数据

### 问题 3：`surveyData` 为 `undefined`

**症状：**
```javascript
hasSurveyData: false,
surveyCompleted: false,
```

**可能原因：**
1. 该员工确实没有完成问卷
2. `loadEmployeeSurvey()` 方法查询失败
3. `Profile` 表或 `SurveyLog` 表不存在或无数据

**诊断方法：**
```javascript
// 查看问卷数据加载日志
📝 [Employees] 问卷数据加载完成: {
  completed: false,             // ❌ 如果是 false，说明没有完成问卷
  answers: 0
}
```

**解决方案：**
1. 检查该员工是否真的完成了问卷（在组长端检查）
2. 检查 `loadEmployeeSurvey()` 方法的查询逻辑
3. 检查数据库中的 `Profile` 和 `SurveyLog` 表

### 问题 4：数据加载失败

**症状：**
```javascript
❌ [Employees] 加载员工数据失败: Error: ...
```

**可能原因：**
1. 网络请求失败
2. 数据库连接失败
3. 权限不足

**解决方案：**
1. 检查网络请求（Network 标签页）
2. 检查后端日志
3. 检查用户权限

---

## 🔧 快速修复步骤

### 修复 1：确保数据正确加载

检查 `employees.ts` 的 `viewEmployee()` 方法：

```typescript
async viewEmployee(emp: Employee) {
  // ... 其他代码 ...
  
  if (emp.roleName === '组员' || emp.roleName === '组长') {
    try {
      // 1️⃣ 加载项目数据
      const wl = await this.employeeService.getEmployeeWorkload(emp.id);
      
      // ⭐ 添加调试日志
      console.log(`🔍 [DEBUG] getEmployeeWorkload 返回:`, wl);
      console.log(`🔍 [DEBUG] currentProjects:`, wl.currentProjects);
      console.log(`🔍 [DEBUG] ongoingProjects:`, wl.ongoingProjects);
      
      // ... 其他代码 ...
    } catch (err) {
      console.error(`❌ [Employees] 加载员工数据失败:`, err);
      // ⭐ 详细输出错误信息
      console.error(`❌ [DEBUG] 错误详情:`, {
        message: err.message,
        stack: err.stack
      });
    }
  }
}
```

### 修复 2：检查日历数据生成

检查 `buildCalendarData()` 方法：

```typescript
private buildCalendarData(projects: Array<any>): { currentMonth: Date; days: any[] } {
  // ⭐ 添加调试日志
  console.log(`🔍 [buildCalendarData] 输入项目数量:`, projects.length);
  console.log(`🔍 [buildCalendarData] 项目列表:`, projects.map(p => ({
    id: p.id,
    name: p.name,
    createdAt: p.createdAt,
    deadline: p.deadline
  })));
  
  // ... 日历生成逻辑 ...
  
  const result = {
    currentMonth: now,
    days: days
  };
  
  // ⭐ 添加调试日志
  console.log(`🔍 [buildCalendarData] 输出日历数据:`, {
    totalDays: result.days.length,
    daysWithProjects: result.days.filter(d => d.projectCount > 0).length,
    sampleDay: result.days.find(d => d.projectCount > 0) // 输出一个有项目的日期作为样本
  });
  
  return result;
}
```

### 修复 3：检查问卷数据加载

检查 `loadEmployeeSurvey()` 方法：

```typescript
private async loadEmployeeSurvey(employeeId: string, employeeName: string) {
  try {
    // ⭐ 添加调试日志
    console.log(`🔍 [loadEmployeeSurvey] 开始查询:`, {
      employeeId,
      employeeName
    });
    
    // ... 查询 Profile ...
    
    const profile = profileResults[0];
    const surveyCompleted = profile.get('surveyCompleted') || false;
    
    // ⭐ 添加调试日志
    console.log(`🔍 [loadEmployeeSurvey] Profile 查询结果:`, {
      profileId: profile.id,
      surveyCompleted: surveyCompleted
    });
    
    if (surveyCompleted) {
      // ... 查询 SurveyLog ...
      
      // ⭐ 添加调试日志
      console.log(`🔍 [loadEmployeeSurvey] SurveyLog 查询结果:`, {
        count: surveyResults.length,
        survey: surveyResults[0]
      });
    }
    
    // ... 其他代码 ...
  } catch (error) {
    // ⭐ 详细输出错误信息
    console.error(`❌ [loadEmployeeSurvey] 查询失败:`, {
      employeeId,
      employeeName,
      error: error.message,
      stack: error.stack
    });
  }
}
```

---

## 📋 数据流检查清单

使用以下清单逐项检查数据流：

### 数据加载阶段

- [ ] `viewEmployee()` 方法被正确调用
- [ ] `emp.roleName` 是 '组员' 或 '组长'
- [ ] `employeeService.getEmployeeWorkload()` 返回了数据
- [ ] `wl.currentProjects` 大于 0
- [ ] `wl.ongoingProjects` 数组不为空
- [ ] `buildCalendarData()` 返回了正确的日历数据
- [ ] `loadEmployeeSurvey()` 返回了问卷数据（如果有）

### 数据转换阶段

- [ ] `this.selectedEmployeeForPanel` 被正确赋值
- [ ] `selectedEmployeeForPanel.currentProjects` 大于 0
- [ ] `selectedEmployeeForPanel.projectData` 数组不为空
- [ ] `selectedEmployeeForPanel.calendarData` 不为 `undefined`
- [ ] `selectedEmployeeForPanel.calendarData.days` 数组长度为 42
- [ ] `selectedEmployeeForPanel.surveyData` 不为 `undefined`（如果有问卷）

### 组件显示阶段

- [ ] `employeeDetailForTeamLeader` getter 返回了数据
- [ ] `employeeDetailForTeamLeader.currentProjects` 大于 0
- [ ] `employeeDetailForTeamLeader.projectData` 数组不为空
- [ ] `employeeDetailForTeamLeader.calendarData` 不为 `undefined`
- [ ] `app-employee-detail-panel` 组件接收到了 `employeeDetail` 输入

---

## 🎯 预期结果

如果一切正常，应该看到：

### 控制台日志

```javascript
🚀 [Employees] 开始打开员工信息面板: 徐福静 (xxxxxxxx)
🔄 [Employees] 预加载员工 xxxxxxxx 的完整数据...
✅ [Employees] 项目数据加载完成: { currentProjects: 3, ongoingProjects: 3, ... }
📅 [Employees] 日历数据生成完成: { days: 42, 有项目的天数: 15 }
📝 [Employees] 问卷数据加载完成: { completed: true, answers: 12 }
🎯 [Employees] 完整数据准备完成，打开面板: { currentProjects: 3, projectData: 3, ... }
✅ [Employees] 面板已显示
🔍 [employeeDetailForTeamLeader] 开始转换: { 有employee: true, ... }
✅ [employeeDetailForTeamLeader] 转换完成: { name: '徐福静', currentProjects: 3, ... }
📦 [employeeDetailForTeamLeader] 完整数据结构: { ... }
```

### 面板显示

- ✅ "当前负责项目数"显示为实际项目数（如 3 个）
- ✅ "核心项目"列表显示项目名称（最多 3 个）
- ✅ 日历上有项目的日期显示蓝色标记
- ✅ "能力问卷"显示"已完成问卷"（如果已完成）
- ✅ "未来7天无请假安排"（正常，因为没有加载请假数据）

---

## 🆘 如果问题仍然存在

请提供以下信息：

1. **完整的控制台日志**（从点击员工到显示面板的所有日志）
2. **截图**（显示面板和控制台）
3. **员工信息**：
   - 员工姓名
   - 员工角色（组员/组长）
   - 该员工在组长端是否有项目
4. **错误信息**（如果有红色错误日志）

---

**📌 建议：按照此指南逐步诊断，找出数据流中断的具体位置！**