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

📋 问题描述

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

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

🔍 诊断步骤

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

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

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

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

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

应该看到以下日志序列：

// 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：切换到"项目负载"标签页

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

应该看到：

// 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

症状：

currentProjects: 0,
projectData: 0,

可能原因：

该员工确实没有项目
employeeService.getEmployeeWorkload() 返回的数据为空
数据库查询失败

诊断方法：

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

解决方案：

检查该员工是否真的有项目（在组长端检查）
检查 employeeService.getEmployeeWorkload() 的查询逻辑
检查数据库中的 Project 或 ProjectTeam 表

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

症状：

hasCalendarData: false,
calendarDays: 0,

可能原因：

buildCalendarData() 方法返回了 undefined
传入的 projects 数组为空
日历生成逻辑出错

诊断方法：

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

解决方案：

检查 buildCalendarData() 方法是否正确返回数据
添加调试日志到 buildCalendarData() 方法
检查 wl.ongoingProjects 是否有数据

问题 3：`surveyData` 为 `undefined`

症状：

hasSurveyData: false,
surveyCompleted: false,

可能原因：

该员工确实没有完成问卷
loadEmployeeSurvey() 方法查询失败
Profile 表或 SurveyLog 表不存在或无数据

诊断方法：

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

解决方案：

检查该员工是否真的完成了问卷（在组长端检查）
检查 loadEmployeeSurvey() 方法的查询逻辑
检查数据库中的 Profile 和 SurveyLog 表

问题 4：数据加载失败

症状：

❌ [Employees] 加载员工数据失败: Error: ...

可能原因：

网络请求失败
数据库连接失败
权限不足

解决方案：

检查网络请求（Network 标签页）
检查后端日志
检查用户权限

🔧 快速修复步骤

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

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

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() 方法：

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() 方法：

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 输入

🎯 预期结果

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

控制台日志

🚀 [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天无请假安排"（正常，因为没有加载请假数据）

🆘 如果问题仍然存在

请提供以下信息：

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

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

EMPLOYEE-PANEL-DEBUG-GUIDE.md 11 KB History Raw

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

📋 问题描述

🔍 诊断步骤

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

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

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

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

🐛 常见问题诊断

问题 1：currentProjects 为 0

问题 2：calendarData 为 undefined 或 null

问题 3：surveyData 为 undefined

问题 4：数据加载失败

🔧 快速修复步骤

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

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

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

📋 数据流检查清单

数据加载阶段

数据转换阶段

组件显示阶段

🎯 预期结果

控制台日志

面板显示

🆘 如果问题仍然存在

EMPLOYEE-PANEL-DEBUG-GUIDE.md 11 KB

History Raw

问题 1：`currentProjects` 为 0

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

问题 3：`surveyData` 为 `undefined`