import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Router, RouterModule } from '@angular/router'; import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core'; import { ProjectService } from '../../../services/project.service'; import { DesignerService } from '../services/designer.service'; import { WxworkAuth } from 'fmode-ng/core'; import { ProjectIssueService, ProjectIssue, IssueStatus, IssuePriority, IssueType } from '../../../../modules/project/services/project-issue.service'; import { FmodeParse } from 'fmode-ng/parse'; // 项目阶段定义 interface ProjectStage { id: string; name: string; order: number; } interface ProjectPhase { name: string; percentage: number; startPercentage: number; isCompleted: boolean; isCurrent: boolean; } interface Project { id: string; name: string; type: 'soft' | 'hard'; memberType: 'vip' | 'normal'; designerName: string; status: string; expectedEndDate: Date; // TODO: 兼容旧字段,后续可移除 deadline: Date; // 真实截止时间字段 createdAt?: Date; // 真实开始时间字段(可选) isOverdue: boolean; overdueDays: number; dueSoon: boolean; urgency: 'high' | 'medium' | 'low'; phases: ProjectPhase[]; currentStage: string; // 新增:当前项目阶段 // 新增:质量评级 qualityRating?: 'excellent' | 'qualified' | 'unqualified' | 'pending'; lastCustomerFeedback?: string; // 预构建的搜索索引,减少重复 toLowerCase 与拼接 searchIndex?: string; } interface TodoTask { id: string; title: string; description: string; deadline: Date; priority: 'high' | 'medium' | 'low'; type: 'review' | 'assign' | 'performance'; targetId: string; } // 新增:从问题板块映射的待办任务 interface TodoTaskFromIssue { id: string; title: string; description?: string; priority: IssuePriority; type: IssueType; status: IssueStatus; projectId: string; projectName: string; relatedSpace?: string; relatedStage?: string; assigneeName?: string; creatorName?: string; createdAt: Date; updatedAt: Date; dueDate?: Date; tags?: string[]; } // 员工请假记录接口 interface LeaveRecord { id: string; employeeName: string; date: string; // YYYY-MM-DD 格式 isLeave: boolean; leaveType?: 'sick' | 'personal' | 'annual' | 'other'; // 请假类型 reason?: string; // 请假原因 } // 员工详情面板数据接口 interface EmployeeDetail { name: string; currentProjects: number; // 当前负责项目数 projectNames: string[]; // 项目名称列表(用于显示) projectData: Array<{ id: string; name: string }>; // 项目数据(包含ID和名称,用于跳转) leaveRecords: LeaveRecord[]; // 未来7天请假记录 redMarkExplanation: string; // 红色标记说明 calendarData?: EmployeeCalendarData; // 负载日历数据 // 新增:问卷相关 surveyCompleted?: boolean; // 是否完成问卷 surveyData?: any; // 问卷答案数据 profileId?: string; // Profile ID } // 员工日历数据接口 interface EmployeeCalendarData { currentMonth: Date; days: EmployeeCalendarDay[]; } // 日历日期数据 interface EmployeeCalendarDay { date: Date; projectCount: number; // 当天项目数量 projects: Array<{ id: string; name: string; deadline?: Date }>; // 项目列表 isToday: boolean; isCurrentMonth: boolean; } declare const echarts: any; @Component({ selector: 'app-dashboard', standalone: true, imports: [CommonModule, FormsModule, RouterModule], templateUrl: './dashboard.html', styleUrl: './dashboard.scss' }) export class Dashboard implements OnInit, OnDestroy { // 暴露 Array 给模板使用 Array = Array; projects: Project[] = []; filteredProjects: Project[] = []; todoTasks: TodoTask[] = []; urgentPinnedProjects: Project[] = []; showAlert: boolean = false; selectedProjectId: string = ''; // 新增:从问题板块加载的待办任务 todoTasksFromIssues: TodoTaskFromIssue[] = []; loadingTodoTasks: boolean = false; todoTaskError: string = ''; private todoTaskRefreshTimer: any; // 新增:当前用户信息 currentUser = { name: '组长', avatar: "data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%23CCFFCC'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='13.333333333333334' font-weight='bold' text-anchor='middle' fill='%23555555' dy='0.3em'%3E组长%3C/text%3E%3C/svg%3E", roleName: '组长' }; currentDate = new Date(); // 真实设计师数据(从fmode-ng获取) realDesigners: any[] = []; // 设计师工作量映射(从 ProjectTeam 表) designerWorkloadMap: Map = new Map(); // designerId/name -> projects[] // 智能推荐相关 showSmartMatch: boolean = false; selectedProject: any = null; recommendations: any[] = []; // 新增:关键词搜索 searchTerm: string = ''; searchSuggestions: Project[] = []; showSuggestions: boolean = false; private hideSuggestionsTimer: any; // 搜索性能与交互控制 private searchDebounceTimer: any; private readonly SEARCH_DEBOUNCE_MS = 200; // 防抖时长(毫秒) private readonly MIN_SEARCH_LEN = 2; // 最小触发建议长度 private readonly MAX_SUGGESTIONS = 8; // 建议最大条数 private isSearchFocused: boolean = false; // 是否处于输入聚焦态 // 新增:临期项目与筛选状态 selectedType: 'all' | 'soft' | 'hard' = 'all'; selectedUrgency: 'all' | 'high' | 'medium' | 'low' = 'all'; selectedStatus: 'all' | 'progress' | 'completed' | 'overdue' | 'pendingApproval' | 'pendingAssignment' | 'dueSoon' = 'all'; selectedDesigner: string = 'all'; selectedMemberType: 'all' | 'vip' | 'normal' = 'all'; // 新增:时间窗筛选 selectedTimeWindow: 'all' | 'today' | 'threeDays' | 'sevenDays' = 'all'; designers: string[] = []; // 新增:四大板块筛选 selectedCorePhase: 'all' | 'order' | 'requirements' | 'delivery' | 'aftercare' = 'all'; // 设计师画像(从fmode-ng动态获取,保留此字段作为兼容) designerProfiles: any[] = []; // 10个项目阶段 projectStages: ProjectStage[] = [ { id: 'pendingApproval', name: '待确认', order: 1 }, { id: 'pendingAssignment', name: '待分配', order: 2 }, { id: 'requirement', name: '需求沟通', order: 3 }, { id: 'planning', name: '方案规划', order: 4 }, { id: 'modeling', name: '建模阶段', order: 5 }, { id: 'rendering', name: '渲染阶段', order: 6 }, { id: 'postProduction', name: '后期处理', order: 7 }, { id: 'review', name: '方案评审', order: 8 }, { id: 'revision', name: '方案修改', order: 9 }, { id: 'delivery', name: '交付完成', order: 10 } ]; // 5大核心阶段(聚合展示) corePhases: ProjectStage[] = [ { id: 'order', name: '订单分配', order: 1 }, // 待确认、待分配 { id: 'requirements', name: '确认需求', order: 2 }, // 需求沟通、方案规划 { id: 'delivery', name: '交付执行', order: 3 }, // 建模、渲染、后期/评审/修改 { id: 'aftercare', name: '售后', order: 4 } // 交付完成 → 售后 ]; // 甘特视图开关与实例引用 showGanttView: boolean = false; private ganttChart: any | null = null; @ViewChild('ganttChartRef', { static: false }) ganttChartRef!: ElementRef; // 工作负载甘特图引用 @ViewChild('workloadGanttContainer', { static: false }) workloadGanttContainer!: ElementRef; private workloadGanttChart: any | null = null; workloadGanttScale: 'week' | 'month' = 'week'; // 甘特时间尺度:仅周/月 ganttScale: 'day' | 'week' | 'month' = 'week'; // 新增:甘特模式(项目 / 设计师排班) ganttMode: 'project' | 'designer' = 'project'; // 个人详情面板相关属性 showEmployeeDetailPanel: boolean = false; selectedEmployeeDetail: EmployeeDetail | null = null; refreshingSurvey: boolean = false; // 新增:刷新问卷状态 showFullSurvey: boolean = false; // 新增:是否显示完整问卷 // 日历项目列表弹窗 showCalendarProjectList: boolean = false; selectedDayProjects: Array<{ id: string; name: string; deadline?: Date }> = []; selectedDate: Date | null = null; // 当前员工日历相关数据(用于切换月份) private currentEmployeeName: string = ''; private currentEmployeeProjects: any[] = []; // 员工请假数据(模拟数据) private leaveRecords: LeaveRecord[] = [ { id: '1', employeeName: '张三', date: '2024-01-20', isLeave: true, leaveType: 'personal', reason: '事假' }, { id: '2', employeeName: '张三', date: '2024-01-21', isLeave: false }, { id: '3', employeeName: '张三', date: '2024-01-22', isLeave: false }, { id: '4', employeeName: '张三', date: '2024-01-23', isLeave: false }, { id: '5', employeeName: '张三', date: '2024-01-24', isLeave: false }, { id: '6', employeeName: '张三', date: '2024-01-25', isLeave: false }, { id: '7', employeeName: '张三', date: '2024-01-26', isLeave: false }, { id: '8', employeeName: '李四', date: '2024-01-20', isLeave: false }, { id: '9', employeeName: '李四', date: '2024-01-21', isLeave: true, leaveType: 'sick', reason: '病假' }, { id: '10', employeeName: '李四', date: '2024-01-22', isLeave: true, leaveType: 'sick', reason: '病假' }, { id: '11', employeeName: '李四', date: '2024-01-23', isLeave: false }, { id: '12', employeeName: '李四', date: '2024-01-24', isLeave: false }, { id: '13', employeeName: '李四', date: '2024-01-25', isLeave: false }, { id: '14', employeeName: '李四', date: '2024-01-26', isLeave: false }, { id: '15', employeeName: '王五', date: '2024-01-20', isLeave: false }, { id: '16', employeeName: '王五', date: '2024-01-21', isLeave: false }, { id: '17', employeeName: '王五', date: '2024-01-22', isLeave: false }, { id: '18', employeeName: '王五', date: '2024-01-23', isLeave: true, leaveType: 'annual', reason: '年假' }, { id: '19', employeeName: '王五', date: '2024-01-24', isLeave: false }, { id: '20', employeeName: '王五', date: '2024-01-25', isLeave: false }, { id: '21', employeeName: '王五', date: '2024-01-26', isLeave: false }, { id: '22', employeeName: '赵六', date: '2024-01-20', isLeave: false }, { id: '23', employeeName: '赵六', date: '2024-01-21', isLeave: false }, { id: '24', employeeName: '赵六', date: '2024-01-22', isLeave: false }, { id: '25', employeeName: '赵六', date: '2024-01-23', isLeave: false }, { id: '26', employeeName: '赵六', date: '2024-01-24', isLeave: false }, { id: '27', employeeName: '赵六', date: '2024-01-25', isLeave: false }, { id: '28', employeeName: '赵六', date: '2024-01-26', isLeave: false } ]; constructor( private projectService: ProjectService, private router: Router, private designerService: DesignerService, private issueService: ProjectIssueService ) {} async ngOnInit(): Promise { // 新增:加载用户Profile信息 await this.loadUserProfile(); await this.loadProjects(); await this.loadDesigners(); this.loadTodoTasks(); // 首次微任务后尝试初始化一次,确保容器已渲染 setTimeout(() => this.updateWorkloadGantt(), 0); // 新增:加载待办任务(从问题板块) await this.loadTodoTasksFromIssues(); // 启动自动刷新 this.startAutoRefresh(); } /** * 从fmode-ng加载真实设计师数据 */ async loadDesigners(): Promise { try { this.realDesigners = await this.designerService.getDesigners(); // 更新设计师列表(用于筛选下拉框) this.designers = this.realDesigners.map(d => d.name); // 同时更新designerProfiles以保持兼容性 this.designerProfiles = this.realDesigners.map(d => ({ id: d.id, name: d.name, skills: d.tags.expertise.styles || [], workload: 0, // 后续动态计算 avgRating: d.tags.history.avgRating || 0, experience: 0 // 暂无此字段 })); // 加载设计师的实际工作量 await this.loadDesignerWorkload(); } catch (error) { console.error('加载设计师数据失败:', error); } } /** * 🔧 从 ProjectTeam 表加载每个设计师的实际工作量 */ async loadDesignerWorkload(): Promise { try { const Parse = await import('fmode-ng/parse').then(m => m.FmodeParse.with('nova')); // 查询所有 ProjectTeam 记录 const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; // 先查询当前公司的所有项目 const projectQuery = new Parse.Query('Project'); projectQuery.equalTo('company', cid); projectQuery.notEqualTo('isDeleted', true); // 查询当前公司项目的 ProjectTeam const teamQuery = new Parse.Query('ProjectTeam'); teamQuery.matchesQuery('project', projectQuery); teamQuery.notEqualTo('isDeleted', true); teamQuery.include('project'); teamQuery.include('profile'); teamQuery.limit(1000); const teamRecords = await teamQuery.find(); // 如果 ProjectTeam 表为空,使用降级方案 if (teamRecords.length === 0) { await this.loadDesignerWorkloadFromProjects(); return; } // 构建设计师工作量映射 this.designerWorkloadMap.clear(); teamRecords.forEach((record: any) => { const profile = record.get('profile'); const project = record.get('project'); if (!profile || !project) { return; } const profileId = profile.id; const profileName = profile.get('name') || profile.get('user')?.get?.('name') || `设计师-${profileId.slice(-4)}`; // 提取项目信息 // 优先获取各个日期字段 const createdAtValue = project.get('createdAt'); const updatedAtValue = project.get('updatedAt'); const deadlineValue = project.get('deadline'); const deliveryDateValue = project.get('deliveryDate'); const expectedDeliveryDateValue = project.get('expectedDeliveryDate'); // 🔧 如果 get() 方法都返回假值,尝试从 createdAt/updatedAt 属性直接获取 // Parse 对象的 createdAt/updatedAt 是内置属性 let finalCreatedAt = createdAtValue || updatedAtValue; if (!finalCreatedAt && project.createdAt) { finalCreatedAt = project.createdAt; // Parse 内置属性 } if (!finalCreatedAt && project.updatedAt) { finalCreatedAt = project.updatedAt; // Parse 内置属性 } const projectData = { id: project.id, name: project.get('title') || '未命名项目', status: project.get('status') || '进行中', currentStage: project.get('currentStage') || '未知阶段', deadline: deadlineValue || deliveryDateValue || expectedDeliveryDateValue, createdAt: finalCreatedAt, designerName: profileName }; // 添加到映射 (by ID) if (!this.designerWorkloadMap.has(profileId)) { this.designerWorkloadMap.set(profileId, []); } this.designerWorkloadMap.get(profileId)!.push(projectData); // 同时建立 name -> projects 的映射(用于甘特图) if (!this.designerWorkloadMap.has(profileName)) { this.designerWorkloadMap.set(profileName, []); } this.designerWorkloadMap.get(profileName)!.push(projectData); }); } catch (error) { console.error('加载设计师工作量失败:', error); } } /** * 🔧 降级方案:从 Project.assignee 统计工作量 * 当 ProjectTeam 表为空时使用 */ async loadDesignerWorkloadFromProjects(): Promise { try { const Parse = await import('fmode-ng/parse').then(m => m.FmodeParse.with('nova')); const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; // 查询所有项目 const projectQuery = new Parse.Query('Project'); projectQuery.equalTo('company', cid); projectQuery.equalTo('isDeleted', false); projectQuery.include('assignee'); projectQuery.include('department'); projectQuery.limit(1000); const projects = await projectQuery.find(); // 构建设计师工作量映射 this.designerWorkloadMap.clear(); projects.forEach((project: any) => { const assignee = project.get('assignee'); if (!assignee) return; // 只统计组员角色的项目 const assigneeRole = assignee.get('roleName'); if (assigneeRole !== '组员') { return; } const assigneeName = assignee.get('name') || assignee.get('user')?.get?.('name') || `设计师-${assignee.id.slice(-4)}`; // 提取项目信息 // 优先获取各个日期字段 const createdAtValue = project.get('createdAt'); const updatedAtValue = project.get('updatedAt'); const deadlineValue = project.get('deadline'); const deliveryDateValue = project.get('deliveryDate'); const expectedDeliveryDateValue = project.get('expectedDeliveryDate'); // 🔧 如果 get() 方法都返回假值,尝试从 createdAt/updatedAt 属性直接获取 let finalCreatedAt = createdAtValue || updatedAtValue; if (!finalCreatedAt && project.createdAt) { finalCreatedAt = project.createdAt; } if (!finalCreatedAt && project.updatedAt) { finalCreatedAt = project.updatedAt; } const projectData = { id: project.id, name: project.get('title') || '未命名项目', status: project.get('status') || '进行中', currentStage: project.get('currentStage') || '未知阶段', deadline: deadlineValue || deliveryDateValue || expectedDeliveryDateValue, createdAt: finalCreatedAt, designerName: assigneeName }; // 添加到映射 if (!this.designerWorkloadMap.has(assigneeName)) { this.designerWorkloadMap.set(assigneeName, []); } this.designerWorkloadMap.get(assigneeName)!.push(projectData); }); } catch (error) { console.error('[降级方案] 加载工作量失败:', error); } } /** * 从fmode-ng加载真实项目数据 */ async loadProjects(): Promise { try { const realProjects = await this.designerService.getProjects(); // 如果有真实数据,使用真实数据 if (realProjects && realProjects.length > 0) { this.projects = realProjects; } else { // 如果没有真实数据,使用模拟数据 this.projects = this.getMockProjects(); } } catch (error) { console.error('加载项目数据失败:', error); this.projects = this.getMockProjects(); } // 应用筛选 this.applyFilters(); } /** * 构建搜索索引(如果需要) */ private buildSearchIndexes(): void { this.projects.forEach(p => { if (!p.searchIndex) { p.searchIndex = `${p.name}|${p.designerName}`.toLowerCase(); } }); } /** * 模拟项目数据(作为备用) */ private getMockProjects(): Project[] { return [ { id: 'proj-001', name: '现代风格客厅设计', type: 'soft', memberType: 'vip', designerName: '张三', status: '进行中', expectedEndDate: new Date(2023, 9, 15), deadline: new Date(2023, 9, 15), isOverdue: true, overdueDays: 2, dueSoon: false, urgency: 'high', currentStage: 'rendering', phases: [ { name: '建模', percentage: 15, startPercentage: 0, isCompleted: true, isCurrent: false }, { name: '渲染', percentage: 20, startPercentage: 15, isCompleted: false, isCurrent: true }, { name: '后期', percentage: 15, startPercentage: 35, isCompleted: false, isCurrent: false }, { name: '交付', percentage: 50, startPercentage: 50, isCompleted: false, isCurrent: false } ] }, { id: 'proj-002', name: '北欧风格卧室设计', type: 'soft', memberType: 'normal', designerName: '李四', status: '进行中', expectedEndDate: new Date(2023, 9, 20), deadline: new Date(2023, 9, 20), isOverdue: false, overdueDays: 0, dueSoon: false, urgency: 'medium', currentStage: 'postProduction', phases: [ { name: '建模', percentage: 15, startPercentage: 0, isCompleted: true, isCurrent: false }, { name: '渲染', percentage: 20, startPercentage: 15, isCompleted: true, isCurrent: false }, { name: '后期', percentage: 15, startPercentage: 35, isCompleted: false, isCurrent: true }, { name: '交付', percentage: 50, startPercentage: 50, isCompleted: false, isCurrent: false } ] }, { id: 'proj-003', name: '新中式餐厅设计', type: 'hard', memberType: 'normal', designerName: '王五', status: '进行中', expectedEndDate: new Date(2023, 9, 25), deadline: new Date(2023, 9, 25), isOverdue: false, overdueDays: 0, dueSoon: false, urgency: 'low', currentStage: 'modeling', phases: [ { name: '建模', percentage: 15, startPercentage: 0, isCompleted: false, isCurrent: true }, { name: '渲染', percentage: 20, startPercentage: 15, isCompleted: false, isCurrent: false }, { name: '后期', percentage: 15, startPercentage: 35, isCompleted: false, isCurrent: false }, { name: '交付', percentage: 50, startPercentage: 50, isCompleted: false, isCurrent: false } ] }, { id: 'proj-004', name: '工业风办公室设计', type: 'hard', memberType: 'normal', designerName: '赵六', status: '进行中', expectedEndDate: new Date(2023, 9, 10), deadline: new Date(2023, 9, 10), isOverdue: true, overdueDays: 7, dueSoon: false, urgency: 'high', currentStage: 'review', phases: [ { name: '建模', percentage: 15, startPercentage: 0, isCompleted: true, isCurrent: false }, { name: '渲染', percentage: 20, startPercentage: 15, isCompleted: true, isCurrent: false }, { name: '后期', percentage: 15, startPercentage: 35, isCompleted: false, isCurrent: false }, { name: '交付', percentage: 50, startPercentage: 50, isCompleted: false, isCurrent: false } ] }, // 添加更多不同阶段的项目 { id: 'proj-005', name: '现代简约厨房设计', type: 'soft', memberType: 'normal', designerName: '', status: '待分配', expectedEndDate: new Date(2023, 10, 5), deadline: new Date(2023, 10, 5), isOverdue: false, overdueDays: 0, dueSoon: false, urgency: 'medium', currentStage: 'pendingAssignment', phases: [] }, { id: 'proj-006', name: '日式风格书房设计', type: 'hard', memberType: 'normal', designerName: '', status: '待确认', expectedEndDate: new Date(2023, 10, 10), deadline: new Date(2023, 10, 10), isOverdue: false, overdueDays: 0, dueSoon: false, urgency: 'low', currentStage: 'pendingApproval', phases: [] }, { id: 'proj-007', name: '轻奢风格浴室设计', type: 'soft', memberType: 'normal', designerName: '钱七', status: '已完成', expectedEndDate: new Date(2023, 9, 5), deadline: new Date(2023, 9, 5), isOverdue: false, overdueDays: 0, dueSoon: false, urgency: 'medium', currentStage: 'delivery', phases: [] } ]; // ===== 追加生成示例数据:保证总量达到100条 ===== const stageIds = this.projectStages.map(s => s.id); const designers = ['张三','李四','王五','赵六','孙七','周八','吴九','陈十']; const statusMap: Record = { pendingApproval: '待确认', pendingAssignment: '待分配', requirement: '进行中', planning: '进行中', modeling: '进行中', rendering: '进行中', postProduction: '进行中', review: '进行中', revision: '进行中', delivery: '已完成' }; // 为有项目的设计师分配项目 const busyDesigners = ['张三', '王五', '吴九']; // 高负荷设计师 const moderateDesigners = ['孙七']; // 中等负荷设计师 const idleDesigners = ['李四', '赵六', '周八', '陈十']; // 空闲设计师 // 为忙碌的设计师分配更多项目 for (let i = 8; i <= 30; i++) { const designerIndex = (i - 8) % busyDesigners.length; const designerName = busyDesigners[designerIndex]; const stageIndex = (i - 1) % 7 + 3; // 主要在进行中的阶段 const currentStage = stageIds[stageIndex]; const type: 'soft' | 'hard' = i % 2 === 0 ? 'soft' : 'hard'; const urgency: 'high' | 'medium' | 'low' = i % 4 === 0 ? 'high' : (i % 3 === 0 ? 'medium' : 'low'); const isOverdue = i % 8 === 0; const overdueDays = isOverdue ? (i % 5) + 1 : 0; const status = statusMap[currentStage] || '进行中'; const expectedEndDate = new Date(); const daysOffset = isOverdue ? -(overdueDays + (i % 3)) : ((i % 15) + 5); expectedEndDate.setDate(expectedEndDate.getDate() + daysOffset); const daysToDeadline = Math.ceil((expectedEndDate.getTime() - Date.now()) / (1000 * 60 * 60 * 24)); const dueSoon = !isOverdue && daysToDeadline >= 0 && daysToDeadline <= 3; const memberType: 'vip' | 'normal' = i % 5 === 0 ? 'vip' : 'normal'; this.projects.push({ id: `proj-${String(i).padStart(3, '0')}`, name: `${designerName}负责的${type === 'soft' ? '软装' : '硬装'}项目 ${i}`, type, memberType, designerName, status, expectedEndDate, deadline: expectedEndDate, isOverdue, overdueDays, dueSoon, urgency, currentStage, phases: [] }); } // 为中等负荷设计师分配少量项目 for (let i = 31; i <= 35; i++) { const designerName = moderateDesigners[0]; const stageIndex = (i - 1) % 5 + 4; // 中间阶段 const currentStage = stageIds[stageIndex]; const type: 'soft' | 'hard' = i % 2 === 0 ? 'soft' : 'hard'; const urgency: 'high' | 'medium' | 'low' = 'medium'; const status = statusMap[currentStage] || '进行中'; const expectedEndDate = new Date(); expectedEndDate.setDate(expectedEndDate.getDate() + (i % 10) + 7); const memberType: 'vip' | 'normal' = 'normal'; this.projects.push({ id: `proj-${String(i).padStart(3, '0')}`, name: `${designerName}负责的${type === 'soft' ? '软装' : '硬装'}项目 ${i}`, type, memberType, designerName, status, expectedEndDate, deadline: expectedEndDate, isOverdue: false, overdueDays: 0, dueSoon: false, urgency, currentStage, phases: [] }); } // 空闲设计师不分配项目,或只分配很少的已完成项目 for (let i = 36; i <= 40; i++) { const designerIndex = (i - 36) % idleDesigners.length; const designerName = idleDesigners[designerIndex]; const currentStage = 'delivery'; // 已完成的项目 const type: 'soft' | 'hard' = i % 2 === 0 ? 'soft' : 'hard'; const urgency: 'high' | 'medium' | 'low' = 'low'; const status = '已完成'; const expectedEndDate = new Date(); expectedEndDate.setDate(expectedEndDate.getDate() - (i % 10) - 5); // 过去的日期 const memberType: 'vip' | 'normal' = 'normal'; this.projects.push({ id: `proj-${String(i).padStart(3, '0')}`, name: `${designerName}已完成的${type === 'soft' ? '软装' : '硬装'}项目 ${i}`, type, memberType, designerName, status, expectedEndDate, deadline: expectedEndDate, isOverdue: false, overdueDays: 0, dueSoon: false, urgency, currentStage, phases: [] }); } // ===== 示例数据生成结束 ===== // 统一补齐真实时间字段(deadline/createdAt),以真实字段贯通筛选与甘特 const DAY = 24 * 60 * 60 * 1000; this.projects = this.projects.map(p => { const deadline = p.deadline || p.expectedEndDate; const baseDays = p.type === 'hard' ? 30 : 14; const createdAt = p.createdAt || new Date(new Date(deadline).getTime() - baseDays * DAY); return { ...p, deadline, createdAt } as Project; }); // 筛选结果初始化为全部项目 this.filteredProjects = [...this.projects]; // 供筛选用的设计师列表 this.designers = Array.from(new Set(this.projects.map(p => p.designerName).filter(n => !!n))); // 显示超期提醒(使用 getter) if (this.overdueProjects.length > 0) { this.showAlert = true; } } loadTodoTasks(): void { // 模拟待办任务数据 this.todoTasks = [ { id: 'todo-001', title: '待评审效果图', description: '现代风格客厅设计项目需要进行效果图评审', deadline: new Date(2023, 9, 18, 15, 0), priority: 'high', type: 'review', targetId: 'proj-001' }, { id: 'todo-002', title: '待分配项目', description: '新中式厨房设计项目需要分配给合适的设计师', deadline: new Date(2023, 9, 19, 10, 0), priority: 'high', type: 'assign', targetId: 'proj-new' }, { id: 'todo-003', title: '待确认绩效', description: '9月份团队绩效需要进行审核确认', deadline: new Date(2023, 9, 22, 18, 0), priority: 'medium', type: 'performance', targetId: 'sep-2023' }, { id: 'todo-004', title: '待处理客户反馈', description: '北欧风格卧室设计项目有客户反馈需要处理', deadline: new Date(2023, 9, 20, 14, 0), priority: 'medium', type: 'review', targetId: 'proj-002' }, { id: 'todo-005', title: '团队会议', description: '每周团队进度沟通会议', deadline: new Date(2023, 9, 18, 10, 0), priority: 'low', type: 'performance', targetId: 'weekly-meeting' } ]; // 按优先级排序:紧急且重要 > 重要不紧急 > 紧急不重要 this.todoTasks.sort((a, b) => { const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 }; return priorityOrder[b.priority] - priorityOrder[a.priority]; }); } // 筛选项目类型 filterProjects(event: Event): void { const target = event.target as HTMLSelectElement; this.selectedType = (target && target.value ? target.value : 'all') as any; this.applyFilters(); } // 筛选紧急程度 filterByUrgency(event: Event): void { const target = event.target as HTMLSelectElement; this.selectedUrgency = (target && target.value ? target.value : 'all') as any; this.applyFilters(); } // 筛选项目状态 filterByStatus(status: string): void { // 点击同一状态时,切换回“全部”,以便恢复全量项目列表 const next = (this.selectedStatus === status) ? 'all' : (status && status.length ? status : 'all'); this.selectedStatus = next as any; this.applyFilters(); } // 处理状态筛选下拉框变化 onStatusChange(event: Event): void { const target = event.target as HTMLSelectElement; this.selectedStatus = (target && target.value ? target.value : 'all') as any; this.applyFilters(); } // 新增:设计师筛选下拉事件处理 onDesignerChange(event: Event): void { const target = event.target as HTMLSelectElement; this.selectedDesigner = (target && target.value ? target.value : 'all'); this.applyFilters(); } // 新增:会员类型筛选下拉事件处理 onMemberTypeChange(event: Event): void { const select = event.target as HTMLSelectElement; this.selectedMemberType = select.value as any; this.applyFilters(); } // 新增:四大板块改变 onCorePhaseChange(event: Event): void { const select = event.target as HTMLSelectElement; this.selectedCorePhase = select.value as any; this.applyFilters(); } // 时间窗快捷筛选(供UI按钮触发) filterByTimeWindow(timeWindow: 'all' | 'today' | 'threeDays' | 'sevenDays'): void { this.selectedTimeWindow = timeWindow; this.applyFilters(); } // 新增:搜索输入变化 onSearchChange(): void { if (this.searchDebounceTimer) clearTimeout(this.searchDebounceTimer); this.searchDebounceTimer = setTimeout(() => { this.updateSearchSuggestions(); this.applyFilters(); }, this.SEARCH_DEBOUNCE_MS); } // 新增:搜索框聚焦/失焦控制建议显隐 onSearchFocus(): void { if (this.hideSuggestionsTimer) clearTimeout(this.hideSuggestionsTimer); this.isSearchFocused = true; this.updateSearchSuggestions(); } onSearchBlur(): void { // 延迟隐藏以允许选择项的 mousedown 触发 this.isSearchFocused = false; this.hideSuggestionsTimer = setTimeout(() => { this.showSuggestions = false; }, 150); } // 新增:更新搜索建议(不叠加其它筛选,仅基于关键字) private updateSearchSuggestions(): void { const q = (this.searchTerm || '').trim().toLowerCase(); if (q.length < this.MIN_SEARCH_LEN) { this.searchSuggestions = []; this.showSuggestions = false; return; } const scored = this.projects .filter(p => (p.searchIndex || `${(p.name || '')}|${(p.designerName || '')}`.toLowerCase()).includes(q)) .map(p => { const dl = p.deadline || p.expectedEndDate; const dlTime = dl ? new Date(dl).getTime() : NaN; const daysToDl = Math.ceil(((isNaN(dlTime) ? 0 : dlTime) - Date.now()) / (1000 * 60 * 60 * 24)); const urgencyScore = p.urgency === 'high' ? 3 : p.urgency === 'medium' ? 2 : 1; const overdueScore = p.isOverdue ? 10 : 0; const score = overdueScore + (4 - urgencyScore) * 2 - (isNaN(daysToDl) ? 0 : daysToDl); return { p, score }; }) .sort((a, b) => b.score - a.score) .slice(0, this.MAX_SUGGESTIONS) .map(x => x.p); this.searchSuggestions = scored; this.showSuggestions = this.isSearchFocused && this.searchSuggestions.length > 0; } // 新增:选择建议项 selectSuggestion(project: Project): void { this.searchTerm = project.name; this.showSuggestions = false; this.viewProjectDetails(project.id); } // 统一筛选 private applyFilters(): void { let result = [...this.projects]; // 新增:关键词搜索(项目名 / 设计师名 / 含风格关键词的项目名) const q = (this.searchTerm || '').trim().toLowerCase(); if (q) { result = result.filter(p => (p.searchIndex || `${(p.name || '')}|${(p.designerName || '')}`.toLowerCase()).includes(q)); } // 类型筛选 if (this.selectedType !== 'all') { result = result.filter(p => p.type === this.selectedType); } // 紧急程度筛选 if (this.selectedUrgency !== 'all') { result = result.filter(p => p.urgency === this.selectedUrgency); } // 项目状态筛选 if (this.selectedStatus !== 'all') { if (this.selectedStatus === 'overdue') { result = result.filter(p => p.isOverdue); } else if (this.selectedStatus === 'dueSoon') { result = result.filter(p => p.dueSoon && !p.isOverdue); } else if (this.selectedStatus === 'pendingApproval') { result = result.filter(p => p.currentStage === 'pendingApproval'); } else if (this.selectedStatus === 'pendingAssignment') { result = result.filter(p => p.currentStage === 'pendingAssignment'); } else if (this.selectedStatus === 'progress') { const progressStages = ['requirement','planning','modeling','rendering','postProduction','review','revision']; result = result.filter(p => progressStages.includes(p.currentStage)); } else if (this.selectedStatus === 'completed') { result = result.filter(p => p.currentStage === 'delivery'); } } // 新增:四大板块筛选 if (this.selectedCorePhase !== 'all') { result = result.filter(p => this.mapStageToCorePhase(p.currentStage) === this.selectedCorePhase); } // 设计师筛选 if (this.selectedDesigner !== 'all') { result = result.filter(p => p.designerName === this.selectedDesigner); } // 会员类型筛选 if (this.selectedMemberType !== 'all') { result = result.filter(p => p.memberType === this.selectedMemberType); } // 新增:时间窗筛选 if (this.selectedTimeWindow !== 'all') { const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); result = result.filter(p => { const projectDeadline = new Date(p.deadline); const timeDiff = projectDeadline.getTime() - today.getTime(); const daysDiff = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)); switch (this.selectedTimeWindow) { case 'today': return daysDiff <= 1 && daysDiff >= 0; case 'threeDays': return daysDiff <= 3 && daysDiff >= 0; case 'sevenDays': return daysDiff <= 7 && daysDiff >= 0; default: return true; } }); } this.filteredProjects = result; // 新增:计算紧急任务固定区(超期 + 高紧急),与筛选联动 this.urgentPinnedProjects = this.filteredProjects .filter(p => p.isOverdue && p.urgency === 'high') .sort((a, b) => (b.overdueDays - a.overdueDays) || a.name.localeCompare(b.name, 'zh-Hans-CN')); // 当显示甘特卡片时,同步刷新甘特图 if (this.showGanttView) { this.updateGantt(); } // 同步刷新工作负载甘特图 setTimeout(() => this.updateWorkloadGantt(), 0); } /** * 计算项目加权值 */ calculateWorkloadWeight(project: any): number { return this.designerService.calculateProjectWeight(project); } /** * 获取设计师加权工作量 */ getDesignerWeightedWorkload(designerName: string): { weightedTotal: number; projectCount: number; overdueCount: number; loadRate: number; } { const designerProjects = this.filteredProjects.filter(p => p.designerName === designerName); const weightedTotal = designerProjects.reduce((sum, p) => sum + this.calculateWorkloadWeight(p), 0); const overdueCount = designerProjects.filter(p => p.isOverdue).length; // 从realDesigners获取设计师的单周处理量 const designer = this.realDesigners.find(d => d.name === designerName); const weeklyCapacity = designer?.tags?.capacity?.weeklyProjects || 3; const loadRate = weeklyCapacity > 0 ? (weightedTotal / weeklyCapacity) * 100 : 0; return { weightedTotal, projectCount: designerProjects.length, overdueCount, loadRate }; } /** * 工作量卡片数据(替代ECharts) */ get designerWorkloadCards(): Array<{ name: string; loadRate: number; weightedValue: number; projectCount: number; overdueCount: number; status: 'overload' | 'busy' | 'idle'; }> { const designers = Array.from(new Set(this.filteredProjects.map(p => p.designerName).filter(n => n && n !== '未分配'))); return designers.map(name => { const workload = this.getDesignerWeightedWorkload(name); let status: 'overload' | 'busy' | 'idle' = 'idle'; if (workload.loadRate > 80) status = 'overload'; else if (workload.loadRate > 50) status = 'busy'; return { name, loadRate: workload.loadRate, weightedValue: workload.weightedTotal, projectCount: workload.projectCount, overdueCount: workload.overdueCount, status }; }).sort((a, b) => b.loadRate - a.loadRate); // 按负载率降序 } /** * 获取超负荷设计师数量 */ get overloadedDesignersCount(): number { return this.designerWorkloadCards.filter(d => d.status === 'overload').length; } /** * 获取平均负载率 */ get averageWorkloadRate(): number { const cards = this.designerWorkloadCards; if (cards.length === 0) return 0; const sum = cards.reduce((acc, card) => acc + card.loadRate, 0); return sum / cards.length; } /** * 获取预警汇总数据 */ getAlertSummary(): { totalAlerts: number; overdueHighRisk: Project[]; overloadedDesigners: any[]; dueSoonProjects: Project[]; } { // 1. 超期高危项目(超期>=5天 或 高紧急度超期) const overdueHighRisk = this.filteredProjects .filter(p => p.isOverdue && (p.overdueDays >= 5 || p.urgency === 'high')) .sort((a, b) => b.overdueDays - a.overdueDays) .slice(0, 5); // 2. 超负荷设计师 const overloadedDesigners = this.designerWorkloadCards .filter(d => d.loadRate > 80) .sort((a, b) => b.loadRate - a.loadRate) .slice(0, 5); // 3. 即将到期项目(1-2天内) const now = new Date(); const dueSoonProjects = this.filteredProjects .filter(p => { if (p.isOverdue) return false; const daysLeft = Math.ceil((p.deadline.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)); return daysLeft >= 1 && daysLeft <= 2; }) .sort((a, b) => a.deadline.getTime() - b.deadline.getTime()) .slice(0, 5); const totalAlerts = overdueHighRisk.length + overloadedDesigners.length + dueSoonProjects.length; return { totalAlerts, overdueHighRisk, overloadedDesigners, dueSoonProjects }; } /** * 打开智能推荐弹窗 */ async openSmartMatch(project: any): Promise { this.selectedProject = project; this.showSmartMatch = true; try { this.recommendations = await this.designerService.getRecommendedDesigners(project, this.realDesigners); } catch (error) { console.error('智能推荐失败:', error); this.recommendations = []; } } /** * 关闭智能推荐弹窗 */ closeSmartMatch(): void { this.showSmartMatch = false; this.selectedProject = null; this.recommendations = []; } /** * 分配项目给设计师 */ async assignToDesigner(designerId: string): Promise { if (!this.selectedProject) return; try { const success = await this.designerService.assignProject(this.selectedProject.id, designerId); if (success) { this.closeSmartMatch(); await this.loadProjects(); // 重新加载项目数据 } } catch (error) { console.error('❌ 分配项目失败:', error); window?.fmode?.alert('分配失败,请重试'); } } /** * 获取紧急度标签 */ getUrgencyLabel(urgency: string): string { const labels: Record = { 'high': '高', 'medium': '中', 'low': '低' }; return labels[urgency] || '未知'; } // 切换项目看板/负载日历(甘特)视图 toggleView(): void { this.showGanttView = !this.showGanttView; if (this.showGanttView) { setTimeout(() => this.initOrUpdateGantt(), 0); } else { if (this.ganttChart) { this.ganttChart.dispose(); this.ganttChart = null; } } } // 设置甘特时间尺度 setGanttScale(scale: 'day' | 'week' | 'month'): void { if (this.ganttScale !== scale) { this.ganttScale = scale; this.updateGantt(); } } // 工作负载甘特图时间尺度切换 setWorkloadGanttScale(scale: 'week' | 'month'): void { if (this.workloadGanttScale !== scale) { this.workloadGanttScale = scale; this.updateWorkloadGantt(); } } // 新增:切换甘特模式 setGanttMode(mode: 'project' | 'designer'): void { if (this.ganttMode !== mode) { this.ganttMode = mode; this.updateGantt(); } } private initOrUpdateGantt(): void { if (!this.ganttChartRef) return; const el = this.ganttChartRef.nativeElement; if (!this.ganttChart) { this.ganttChart = echarts.init(el); // 添加点击事件监听器 this.ganttChart.on('click', (params: any) => { if (params.componentType === 'series' && params.seriesType === 'custom') { // 获取点击的员工名称(从y轴类目数据中获取) const yAxisData = this.ganttChart.getOption().yAxis[0].data; if (yAxisData && params.dataIndex !== undefined) { const employeeName = yAxisData[params.value[0]]; if (employeeName && employeeName !== '未分配') { this.onEmployeeClick(employeeName); } } } }); window.addEventListener('resize', () => { this.ganttChart && this.ganttChart.resize(); }); } this.updateGantt(); } private updateGantt(): void { if (!this.ganttChart) return; if (this.ganttMode === 'designer') { this.updateGanttDesigner(); return; } // 按紧急程度从上到下排序(高->中->低),同级按到期时间升序 const urgencyRank: Record<'high'|'medium'|'low', number> = { high: 0, medium: 1, low: 2 }; const projects = [...this.filteredProjects] .sort((a, b) => { const u = urgencyRank[a.urgency] - urgencyRank[b.urgency]; if (u !== 0) return u; // 二级排序:临期优先(到期更近)> 已分配人员 > VIP客户 > 其他 const endDiff = new Date(a.deadline).getTime() - new Date(b.deadline).getTime(); if (endDiff !== 0) return endDiff; const assignedA = !!a.designerName; const assignedB = !!b.designerName; if (assignedA !== assignedB) return assignedA ? -1 : 1; // 已分配在前 const vipA = a.memberType === 'vip'; const vipB = b.memberType === 'vip'; if (vipA !== vipB) return vipA ? -1 : 1; // VIP在前 return a.name.localeCompare(b.name, 'zh-CN'); }); const categories = projects.map(p => p.name); const urgencyMap: Record = Object.fromEntries(projects.map(p => [p.name, p.urgency])) as any; const colorByUrgency: Record<'high'|'medium'|'low', string> = { high: '#ef4444', medium: '#f59e0b', low: '#22c55e' } as const; const DAY = 24 * 60 * 60 * 1000; const data = projects.map((p, idx) => { const end = new Date(p.deadline).getTime(); const baseDays = p.type === 'hard' ? 30 : 14; const start = p.createdAt ? new Date(p.createdAt).getTime() : end - baseDays * DAY; const color = colorByUrgency[p.urgency] || '#60a5fa'; return { name: p.name, value: [idx, start, end, p.designerName, p.urgency, p.memberType, p.currentStage], itemStyle: { color } }; }); // 计算时间范围(仅周/月) const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const todayTs = today.getTime(); let xMin: number; let xMax: number; let xSplitNumber: number; let xLabelFormatter: (value: number) => string; if (this.ganttScale === 'week') { const day = today.getDay(); // 0=周日 const diffToMonday = (day === 0 ? 6 : day - 1); const startOfWeek = new Date(today.getTime() - diffToMonday * DAY); const endOfWeek = new Date(startOfWeek.getTime() + 7 * DAY - 1); xMin = startOfWeek.getTime(); xMax = endOfWeek.getTime(); xSplitNumber = 7; const WEEK_LABELS = ['周日','周一','周二','周三','周四','周五','周六']; xLabelFormatter = (val) => { const d = new Date(val); return WEEK_LABELS[d.getDay()]; }; } else { // month const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0, 23, 59, 59, 999); xMin = startOfMonth.getTime(); xMax = endOfMonth.getTime(); xSplitNumber = 4; xLabelFormatter = (val) => { const d = new Date(val); const weekOfMonth = Math.ceil(d.getDate() / 7); return `第${weekOfMonth}周`; }; } // 计算默认可视区,并尝试保留上一次的滚动/缩放位置 const total = categories.length; const visible = Math.min(total, 15); // 默认首屏展开15条 const defaultEndPercent = total > 0 ? Math.min(100, (visible / total) * 100) : 100; const prevOpt: any = (this.ganttChart as any).getOption ? (this.ganttChart as any).getOption() : null; const preservedStart = typeof prevOpt?.dataZoom?.[0]?.start === 'number' ? prevOpt.dataZoom[0].start : 0; const preservedEnd = typeof prevOpt?.dataZoom?.[0]?.end === 'number' ? prevOpt.dataZoom[0].end : defaultEndPercent; // 生成请假覆盖层数据 const leaveOverlayData = this.generateLeaveOverlayData(categories, xMin, xMax); const option = { backgroundColor: 'transparent', tooltip: { trigger: 'item', formatter: (params: any) => { const v = params.value; const start = new Date(v[1]); const end = new Date(v[2]); return `项目:${params.name}
负责人:${v[3] || '未分配'}
阶段:${v[6]}
起止:${start.toLocaleDateString()} ~ ${end.toLocaleDateString()}`; } }, grid: { left: 100, right: 64, top: 30, bottom: 30 }, xAxis: { type: 'time', min: xMin, max: xMax, splitNumber: xSplitNumber, axisLine: { lineStyle: { color: '#e5e7eb' } }, axisLabel: { color: '#6b7280', formatter: (value: number) => xLabelFormatter(value) }, splitLine: { lineStyle: { color: '#f1f5f9' } } }, yAxis: { type: 'category', data: categories, inverse: true, axisLabel: { color: '#374151', margin: 8, formatter: (val: string) => { const u = urgencyMap[val] || 'low'; const text = val.length > 16 ? val.slice(0, 16) + '…' : val; return `{${u}Dot|●} ${text}`; }, rich: { highDot: { color: '#ef4444' }, mediumDot: { color: '#f59e0b' }, lowDot: { color: '#22c55e' } } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e7eb' } } }, dataZoom: [ { type: 'slider', yAxisIndex: 0, orient: 'vertical', right: 6, width: 14, start: preservedStart, end: preservedEnd, zoomLock: false }, { type: 'inside', yAxisIndex: 0, zoomOnMouseWheel: true, moveOnMouseMove: true, moveOnMouseWheel: true } ], series: [ // 项目条形图系列 { type: 'custom', name: '项目进度', renderItem: (params: any, api: any) => { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); const height = Math.max(api.size([0, 1])[1] * 0.5, 8); const rectShape = echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: Math.max(end[0] - start[0], 2), height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); return rectShape ? { type: 'rect', shape: rectShape, style: api.style() } : undefined; }, encode: { x: [1, 2], y: 0 }, data, itemStyle: { borderRadius: 4 }, emphasis: { focus: 'self' }, markLine: { silent: true, symbol: 'none', lineStyle: { color: '#ef4444', type: 'dashed', width: 1 }, label: { formatter: '今日', color: '#ef4444', fontSize: 10, position: 'end' }, data: [ { xAxis: todayTs } ] } }, // 请假覆盖层系列 { type: 'custom', name: '请假/繁忙标记', renderItem: (params: any, api: any) => { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); const height = Math.max(api.size([0, 1])[1] * 0.8, 12); // 稍微高一点,覆盖项目条 const rectShape = echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: Math.max(end[0] - start[0], 2), height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); return rectShape ? { type: 'rect', shape: rectShape, style: api.style() } : undefined; }, encode: { x: [1, 2], y: 0 }, data: leaveOverlayData, itemStyle: { borderRadius: 4 }, emphasis: { focus: 'self' }, z: 10 // 确保覆盖层在项目条之上 } ] }; // 强制刷新,避免缓存导致坐标轴不更新 this.ganttChart.clear(); this.ganttChart.setOption(option, true); this.ganttChart.resize(); } // 新增:设计师排班甘特 private updateGanttDesigner(): void { if (!this.ganttChart) return; const DAY = 24 * 60 * 60 * 1000; const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const todayTs = today.getTime(); // 时间轴按当前周/月/日 let xMin: number; let xMax: number; let xSplitNumber: number; let xLabelFormatter: (value: number) => string; if (this.ganttScale === 'day') { // 日视图:显示今日24小时 const startOfDay = new Date(today.getTime()); const endOfDay = new Date(today.getTime() + DAY - 1); xMin = startOfDay.getTime(); xMax = endOfDay.getTime(); xSplitNumber = 24; xLabelFormatter = (val) => `${new Date(val).getHours()}:00`; } else if (this.ganttScale === 'week') { // 周视图:从今天开始显示未来7天的具体日期 const startOfWeek = new Date(today.getTime()); const endOfWeek = new Date(today.getTime() + 7 * DAY - 1); xMin = startOfWeek.getTime(); xMax = endOfWeek.getTime(); xSplitNumber = 7; xLabelFormatter = (val) => { const date = new Date(val); const month = date.getMonth() + 1; const day = date.getDate(); return `${month}月${day}日`; }; } else { // 月视图:从当前月份开始显示未来几个月 const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 3, 0, 23, 59, 59, 999); // 显示未来3个月 xMin = startOfMonth.getTime(); xMax = endOfMonth.getTime(); xSplitNumber = 3; xLabelFormatter = (val) => { const date = new Date(val); const year = date.getFullYear(); const month = date.getMonth() + 1; return `${year}年${month}月`; }; } // 仅统计已分配项目 const assigned = this.filteredProjects.filter(p => !!p.designerName); const designers = Array.from(new Set(assigned.map(p => p.designerName))); const byDesigner: Record = {} as any; designers.forEach(n => byDesigner[n] = [] as any); assigned.forEach(p => byDesigner[p.designerName].push(p)); const busyCountMap: Record = Object.fromEntries(designers.map(n => [n, byDesigner[n].length])); const sortedDesigners = designers.sort((a, b) => { const diff = (busyCountMap[b] || 0) - (busyCountMap[a] || 0); return diff !== 0 ? diff : a.localeCompare(b, 'zh-CN'); }); const categories = sortedDesigners; // 工作量等级(用于左侧小圆点颜色和负荷状态判断) const workloadLevelMap: Record = {} as any; const workloadStatusMap: Record = {} as any; categories.forEach(name => { const cnt = busyCountMap[name] || 0; if (cnt >= 5) { workloadLevelMap[name] = 'high'; workloadStatusMap[name] = 'overloaded'; // 不宜派单 } else if (cnt >= 3) { workloadLevelMap[name] = 'medium'; workloadStatusMap[name] = 'busy'; // 适度忙碌 } else { workloadLevelMap[name] = 'low'; workloadStatusMap[name] = 'available'; // 可接单 } }); // 条形颜色按项目紧急度,增强高负荷时段的视觉效果 const colorByUrgency: Record<'high'|'medium'|'low', string> = { high: '#dc2626', // 更深的红色,突出高紧急度 medium: '#ea580c', // 更深的橙色 low: '#16a34a' // 更深的绿色 } as const; const data = assigned.flatMap(p => { const end = new Date(p.deadline).getTime(); const baseDays = p.type === 'hard' ? 30 : 14; const start = p.createdAt ? new Date(p.createdAt).getTime() : end - baseDays * DAY; const yIndex = categories.indexOf(p.designerName); if (yIndex === -1) return [] as any[]; // 根据设计师工作负荷状态调整项目条的视觉效果 const workloadStatus = workloadStatusMap[p.designerName]; let color = colorByUrgency[p.urgency] || '#60a5fa'; let borderWidth = 1; let borderColor = 'transparent'; // 高负荷时段增强视觉效果 if (workloadStatus === 'overloaded') { borderWidth = 3; borderColor = '#991b1b'; // 深红色边框 // 对于超负荷状态,使用更深的红色调 if (p.urgency === 'high') { color = '#7f1d1d'; // 深红色 } else if (p.urgency === 'medium') { color = '#c2410c'; // 深橙色 } else { color = '#dc2626'; // 红色(即使是低紧急度也用红色表示超负荷) } } return [{ name: p.name, value: [yIndex, start, end, p.designerName, p.urgency, p.memberType, p.currentStage, workloadStatus], itemStyle: { color, borderWidth, borderColor, opacity: workloadStatus === 'overloaded' ? 0.9 : 1.0 } }]; }); // 生成空闲时段背景数据 - 只在真正空闲的时间段显示 const idleBackgroundData: any[] = []; categories.forEach((designerName, yIndex) => { const designerProjects = byDesigner[designerName] || []; const workloadStatus = workloadStatusMap[designerName]; // 获取该设计师的所有项目时间段 const projectTimeRanges = designerProjects.map(p => { const end = new Date(p.deadline).getTime(); const baseDays = p.type === 'hard' ? 30 : 14; const start = p.createdAt ? new Date(p.createdAt).getTime() : end - baseDays * DAY; return { start, end }; }).sort((a, b) => a.start - b.start); // 找出空闲时间段 const idleTimeRanges: { start: number; end: number }[] = []; if (projectTimeRanges.length === 0) { // 完全没有项目,整个时间轴都是空闲 idleTimeRanges.push({ start: xMin, end: xMax }); } else { // 检查项目之间的空隙 let currentTime = xMin; for (const range of projectTimeRanges) { if (currentTime < range.start) { // 在项目开始前有空闲时间 idleTimeRanges.push({ start: currentTime, end: range.start }); } currentTime = Math.max(currentTime, range.end); } // 检查最后一个项目后是否还有空闲时间 if (currentTime < xMax) { idleTimeRanges.push({ start: currentTime, end: xMax }); } } // 为每个空闲时间段创建背景数据 idleTimeRanges.forEach((idleRange, index) => { // 只有当空闲时间段足够长时才显示(至少1天) if (idleRange.end - idleRange.start >= DAY) { let backgroundColor = 'transparent'; if (workloadStatus === 'available') { backgroundColor = 'rgba(34, 197, 94, 0.15)'; // 淡绿色背景表示空闲可接单 } else if (workloadStatus === 'overloaded') { backgroundColor = 'rgba(239, 68, 68, 0.1)'; // 淡红色背景表示超负荷 } if (backgroundColor !== 'transparent') { idleBackgroundData.push({ name: `${designerName}-空闲${index + 1}`, value: [yIndex, idleRange.start, idleRange.end, designerName, 'background', workloadStatus], itemStyle: { color: backgroundColor, borderWidth: 0 } }); } } }); }); const prevOpt: any = (this.ganttChart as any).getOption ? (this.ganttChart as any).getOption() : null; const total = categories.length || 1; const visible = Math.min(total, 30); const defaultEndPercent = Math.min(100, (visible / total) * 100); const preservedStart = typeof prevOpt?.dataZoom?.[0]?.start === 'number' ? prevOpt.dataZoom[0].start : 0; const preservedEnd = typeof prevOpt?.dataZoom?.[0]?.end === 'number' ? prevOpt.dataZoom[0].end : defaultEndPercent; const option = { backgroundColor: 'transparent', tooltip: { trigger: 'item', backgroundColor: 'rgba(255, 255, 255, 0.95)', borderColor: '#e5e7eb', borderWidth: 1, padding: [12, 16], textStyle: { color: '#374151', fontSize: 13 }, formatter: (params: any) => { const v = params.value; if (v[4] === 'background') { const workloadStatus = v[5]; const statusText = workloadStatus === 'available' ? '空闲可接单' : workloadStatus === 'overloaded' ? '超负荷不宜派单' : '适度忙碌'; return `
👤 ${v[3]}
状态:${statusText}
`; } const start = new Date(v[1]); const end = new Date(v[2]); const urgency = v[4]; const memberType = v[5]; const currentStage = v[6]; const workloadStatus = v[7]; // 紧急度标识 const urgencyBadge = urgency === 'high' ? '🔥 高紧急' : urgency === 'medium' ? '⚡ 中紧急' : '✓ 正常'; // VIP标识 const vipBadge = memberType === 'vip' ? '⭐ VIP' : ''; // 负载状态 const statusIcon = workloadStatus === 'available' ? '🟢' : workloadStatus === 'overloaded' ? '🔴' : '🟡'; const statusText = workloadStatus === 'available' ? '可接单' : workloadStatus === 'overloaded' ? '超负荷' : '适度忙碌'; // 计算项目持续天数 const durationDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24)); // 剩余天数 const now = new Date(); const remainingDays = Math.ceil((end.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)); const remainingText = remainingDays > 0 ? `剩余${remainingDays}天` : remainingDays === 0 ? '今天截止' : `已超期${Math.abs(remainingDays)}天`; const remainingColor = remainingDays > 7 ? '#16a34a' : remainingDays > 0 ? '#ea580c' : '#dc2626'; return `
🎨 ${params.name}
${urgencyBadge}${vipBadge}
👤 设计师:${v[3]} ${statusIcon} ${statusText}
📋 阶段:${currentStage}
📅 周期:${start.toLocaleDateString()} ~ ${end.toLocaleDateString()} (${durationDays}天)
⏱️ 状态:${remainingText}
💡 点击条形可查看项目详情
`; } }, 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' } }, grid: { left: 150, right: 70, top: 60, bottom: 70 }, xAxis: { type: 'time', min: xMin, max: xMax, splitNumber: xSplitNumber, axisLine: { lineStyle: { color: '#e5e7eb' } }, axisLabel: { color: '#6b7280', formatter: (value: number) => xLabelFormatter(value) }, splitLine: { lineStyle: { color: '#f1f5f9' } } }, yAxis: { type: 'category', data: categories, inverse: true, axisLabel: { color: '#374151', margin: 10, fontSize: 13, fontWeight: 500, formatter: (val: string) => { const lvl = workloadLevelMap[val] || 'low'; const count = busyCountMap[val] || 0; const status = workloadStatusMap[val] || 'available'; const text = val.length > 6 ? val.slice(0, 6) + '…' : val; // 根据负载状态选择图标和颜色 const statusIcon = status === 'available' ? '○' : status === 'overloaded' ? '🔥' : '⚡'; // 项目数量的视觉强化 const countDisplay = count >= 5 ? `{highCount|${count}}` : count >= 3 ? `{mediumCount|${count}}` : count >= 1 ? `{lowCount|${count}}` : `{idleCount|${count}}`; return `${statusIcon} {name|${text}} ${countDisplay}`; }, rich: { name: { color: '#374151', fontSize: 13, fontWeight: 500, padding: [0, 4, 0, 2] }, highCount: { color: '#dc2626', fontSize: 12, fontWeight: 700, backgroundColor: '#fee2e2', padding: [2, 6], borderRadius: 3 }, mediumCount: { color: '#ea580c', fontSize: 12, fontWeight: 700, backgroundColor: '#ffedd5', padding: [2, 6], borderRadius: 3 }, lowCount: { color: '#16a34a', fontSize: 12, fontWeight: 600, backgroundColor: '#dcfce7', padding: [2, 6], borderRadius: 3 }, idleCount: { color: '#9ca3af', fontSize: 12, fontWeight: 500, backgroundColor: '#f3f4f6', padding: [2, 6], borderRadius: 3 } } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e7eb' } } }, dataZoom: [ { type: 'slider', yAxisIndex: 0, orient: 'vertical', right: 6, start: preservedStart, end: preservedEnd, zoomLock: false }, { type: 'inside', yAxisIndex: 0, zoomOnMouseWheel: true, moveOnMouseMove: true, moveOnMouseWheel: true } ], series: [ // 背景层 - 显示空闲时段 { type: 'custom', name: '工作负荷背景', renderItem: (params: any, api: any) => { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); const height = api.size([0, 1])[1] * 0.8; const rectShape = echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: Math.max(end[0] - start[0], 2), height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); return rectShape ? { type: 'rect', shape: rectShape, style: api.style() } : undefined; }, encode: { x: [1, 2], y: 0 }, data: idleBackgroundData, z: 1 }, // 项目条层 { type: 'custom', name: '项目进度', renderItem: (params: any, api: any) => { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); // 增加条形高度,让项目更明显 const height = Math.max(api.size([0, 1])[1] * 0.6, 16); const width = Math.max(end[0] - start[0], 2); const rectShape = echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width, height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); if (!rectShape) return undefined; // 获取项目数据 const urgency = api.value(4); const workloadStatus = api.value(7); // 基础矩形样式 const rectStyle = api.style(); // 根据负载状态添加额外的视觉效果 if (workloadStatus === 'overloaded') { rectStyle.shadowBlur = 8; rectStyle.shadowColor = 'rgba(220, 38, 38, 0.4)'; rectStyle.shadowOffsetY = 2; } const rect = { type: 'rect', shape: rectShape, style: rectStyle }; // 项目名称和紧急度标识 const projectName = params.name || ''; const minWidthForText = 50; // 降低最小宽度要求 if (width >= minWidthForText && projectName) { // 紧急度图标 const urgencyIcon = urgency === 'high' ? '🔥' : urgency === 'medium' ? '⚡' : '✓'; // 截断过长的项目名称 const maxChars = Math.floor(width / 9); // 估算能显示的字符数 const displayName = projectName.length > maxChars ? projectName.slice(0, maxChars - 2) + '…' : projectName; const fullText = `${urgencyIcon} ${displayName}`; // 返回组合图形:矩形 + 文本 return { type: 'group', children: [ rect, { type: 'text', style: { text: fullText, x: rectShape.x + 8, y: rectShape.y + rectShape.height / 2, textVerticalAlign: 'middle', fontSize: 12, fontWeight: 600, fill: '#ffffff', stroke: 'rgba(0, 0, 0, 0.4)', lineWidth: 0.8, textShadowColor: 'rgba(0, 0, 0, 0.5)', textShadowBlur: 3, textShadowOffsetX: 0, textShadowOffsetY: 1 } } ] }; } else if (width >= 30) { // 如果空间太小,只显示紧急度图标 const urgencyIcon = urgency === 'high' ? '🔥' : urgency === 'medium' ? '⚡' : '✓'; return { type: 'group', children: [ rect, { type: 'text', style: { text: urgencyIcon, x: rectShape.x + width / 2, y: rectShape.y + rectShape.height / 2, textAlign: 'center', textVerticalAlign: 'middle', fontSize: 12 } } ] }; } return rect; }, encode: { x: [1, 2], y: 0 }, data, itemStyle: { borderRadius: 4 }, emphasis: { focus: 'self', itemStyle: { borderWidth: 2, borderColor: '#374151', shadowBlur: 8, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, z: 2, markLine: { silent: true, symbol: 'none', lineStyle: { color: '#ef4444', type: 'dashed', width: 2 }, label: { formatter: '今日', color: '#ef4444', fontSize: 11, fontWeight: 600, position: 'end', backgroundColor: '#ffffff', padding: [2, 6], borderRadius: 3 }, data: [ { xAxis: todayTs } ] } } ] } as any; this.ganttChart.clear(); this.ganttChart.setOption(option, true); this.ganttChart.resize(); } /** * 工作负载甘特图:显示设计师在周/月内的工作状态 */ private updateWorkloadGantt(): void { if (!this.workloadGanttContainer?.nativeElement) { setTimeout(() => this.updateWorkloadGantt(), 100); return; } if (!this.workloadGanttChart) { this.workloadGanttChart = echarts.init(this.workloadGanttContainer.nativeElement); } const DAY = 24 * 60 * 60 * 1000; const now = new Date(); const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); const todayTs = today.getTime(); // 时间范围 let xMin: number; let xMax: number; let xSplitNumber: number; let xLabelFormatter: (value: number) => string; if (this.workloadGanttScale === 'week') { // 周视图:显示未来7天 xMin = todayTs; xMax = todayTs + 7 * DAY; xSplitNumber = 7; xLabelFormatter = (val: any) => { const date = new Date(val); const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; return `${date.getMonth() + 1}/${date.getDate()}\n${weekDays[date.getDay()]}`; }; } else { // 月视图:显示未来30天 xMin = todayTs; xMax = todayTs + 30 * DAY; xSplitNumber = 30; xLabelFormatter = (val: any) => { const date = new Date(val); return `${date.getMonth() + 1}/${date.getDate()}`; }; } // 获取所有真实设计师 let designers: string[] = []; if (this.realDesigners && this.realDesigners.length > 0) { designers = this.realDesigners.map(d => d.name); } else { // 降级:从已分配的项目中提取设计师 const assigned = this.filteredProjects.filter(p => p.designerName && p.designerName !== '未分配'); designers = Array.from(new Set(assigned.map(p => p.designerName))); } if (designers.length === 0) { // 没有设计师数据,显示空状态 const emptyOption = { title: { text: '暂无组员数据', subtext: '请先在系统中添加设计师(组员角色)', left: 'center', top: 'center', textStyle: { fontSize: 16, color: '#9ca3af' }, subtextStyle: { fontSize: 13, color: '#d1d5db' } } }; this.workloadGanttChart.setOption(emptyOption, true); return; } // 🔧 使用 ProjectTeam 表的数据(实际执行人) const workloadByDesigner: Record = {}; designers.forEach(name => { workloadByDesigner[name] = []; }); // 计算每个设计师的总负载(用于排序) const designerTotalLoad: Record = {}; designers.forEach(name => { const projects = this.designerWorkloadMap.get(name) || []; designerTotalLoad[name] = projects.length; }); // 按总负载从高到低排序设计师 const sortedDesigners = designers.sort((a, b) => { return designerTotalLoad[b] - designerTotalLoad[a]; }); // 为每个设计师生成时间段数据 sortedDesigners.forEach((designerName, yIndex) => { const designerProjects = this.designerWorkloadMap.get(designerName) || []; // 计算每一天的状态 const days = this.workloadGanttScale === 'week' ? 7 : 30; for (let i = 0; i < days; i++) { const dayStart = todayTs + i * DAY; const dayEnd = dayStart + DAY - 1; // 查找该天有哪些项目 const dayProjects = designerProjects.filter(p => { // 如果项目没有 deadline,则认为项目一直在进行中 if (!p.deadline) { return true; // 没有截止日期的项目始终显示 } const pEnd = new Date(p.deadline).getTime(); // 检查时间是否有效 if (isNaN(pEnd)) { return true; // 如果截止日期无效,认为项目在进行中 } // 🔧 修复:对于进行中的项目(状态不是"已完成"),即使过期也显示 // 这样可以在甘特图中看到超期的项目 const isCompleted = p.status === '已完成' || p.status === '已交付'; if (!isCompleted) { // 进行中的项目:只要截止日期还没到很久之前(比如30天前),就显示 const thirtyDaysAgo = todayTs - 30 * DAY; if (pEnd >= thirtyDaysAgo) { return true; // 30天内的项目都显示 } } // 已完成的项目:正常时间范围判断 const pStart = p.createdAt ? new Date(p.createdAt).getTime() : dayStart; return !(pEnd < dayStart || pStart > dayEnd); }); let status: 'idle' | 'busy' | 'overload' | 'leave' = 'idle'; let color = '#d1fae5'; // 空闲-浅绿色 const projectCount = dayProjects.length; // TODO: 检查请假记录,如果该天请假则标记为leave // const isOnLeave = this.checkLeave(designerName, dayStart, dayEnd); // if (isOnLeave) { // status = 'leave'; // color = '#e5e7eb'; // 请假-灰色 // } if (projectCount === 0) { status = 'idle'; color = '#d1fae5'; // 空闲-浅绿色(0个项目) } else if (projectCount >= 3) { status = 'overload'; color = '#fecaca'; // 超负荷-浅红色(≥3个项目) } else { status = 'busy'; color = '#bfdbfe'; // 忙碌-浅蓝色(1-2个项目) } workloadByDesigner[designerName].push({ name: `${designerName}-${i}`, value: [yIndex, dayStart, dayEnd, designerName, status, projectCount, dayProjects.map(p => p.name)], itemStyle: { color } }); } }); // 合并所有数据 const data = Object.values(workloadByDesigner).flat(); const option = { backgroundColor: '#fff', title: { text: this.workloadGanttScale === 'week' ? '未来7天工作状态' : '未来30天工作状态', subtext: '🟢空闲 🔵忙碌 🔴超负荷', left: 'center', textStyle: { fontSize: 14, color: '#374151', fontWeight: 600 }, subtextStyle: { fontSize: 12, color: '#6b7280' } }, tooltip: { formatter: (params: any) => { const [yIndex, start, end, name, status, projectCount, projectNames = []] = params.value; const startDate = new Date(start); const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; let statusText = ''; let statusColor = ''; let statusBadge = ''; if (status === 'leave') { statusText = '请假'; statusColor = '#6b7280'; statusBadge = '请假'; } else if (projectCount === 0) { statusText = '空闲'; statusColor = '#10b981'; statusBadge = '🟢 空闲'; } else if (projectCount >= 3) { statusText = '超负荷'; statusColor = '#dc2626'; statusBadge = '🔴 超负荷'; } else { statusText = '忙碌'; statusColor = '#3b82f6'; statusBadge = '🔵 忙碌'; } let projectListHtml = ''; if (projectNames && projectNames.length > 0) { projectListHtml = `
项目列表:
${projectNames.slice(0, 5).map((pName: string, idx: number) => `
${idx + 1}. ${pName.length > 20 ? pName.substring(0, 20) + '...' : pName}
` ).join('')} ${projectNames.length > 5 ? `
...及${projectNames.length - 5}个其他项目
` : ''}
`; } return `
${name} ${statusBadge}
📅 ${startDate.getMonth() + 1}月${startDate.getDate()}日 ${weekDays[startDate.getDay()]}
📊 项目数量: ${projectCount}个
${projectListHtml}
💡 点击查看设计师详细信息
`; } }, grid: { left: 100, right: 50, top: 60, bottom: 60 }, xAxis: { type: 'time', min: xMin, max: xMax, boundaryGap: false, axisLine: { lineStyle: { color: '#e5e7eb' } }, axisLabel: { color: '#6b7280', formatter: xLabelFormatter, interval: 0, rotate: this.workloadGanttScale === 'week' ? 0 : 45, showMinLabel: true, showMaxLabel: true }, axisTick: { alignWithLabel: true, interval: 0 }, splitLine: { show: true, lineStyle: { color: '#f1f5f9' } }, splitNumber: xSplitNumber, minInterval: DAY }, yAxis: { type: 'category', data: sortedDesigners, inverse: true, axisLabel: { color: '#374151', margin: 8, fontSize: 13, fontWeight: 500, formatter: (value: string) => { const totalProjects = designerTotalLoad[value] || 0; const icon = totalProjects >= 3 ? '🔥' : totalProjects >= 2 ? '⚡' : totalProjects >= 1 ? '✓' : '○'; return `${icon} ${value} (${totalProjects})`; } }, axisTick: { show: false }, axisLine: { lineStyle: { color: '#e5e7eb' } } }, series: [ { type: 'custom', name: '工作负载', renderItem: (params: any, api: any) => { const categoryIndex = api.value(0); const start = api.coord([api.value(1), categoryIndex]); const end = api.coord([api.value(2), categoryIndex]); const height = api.size([0, 1])[1] * 0.6; const rectShape = echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: Math.max(end[0] - start[0], 2), height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); return rectShape ? { type: 'rect', shape: rectShape, style: api.style() } : undefined; }, encode: { x: [1, 2], y: 0 }, data, z: 2 } ] } as any; this.workloadGanttChart.setOption(option, true); // 添加点击事件:点击设计师行时显示详情 this.workloadGanttChart.on('click', (params: any) => { if (params.componentType === 'series' && params.seriesType === 'custom') { const designerName = params.value[3]; // value[3]是设计师名称 if (designerName && designerName !== '未分配') { this.onEmployeeClick(designerName); } } }); } ngOnDestroy(): void { if (this.ganttChart) { this.ganttChart.dispose(); this.ganttChart = null; } if (this.workloadGanttChart) { this.workloadGanttChart.dispose(); this.workloadGanttChart = null; } // 清理待办任务自动刷新定时器 if (this.todoTaskRefreshTimer) { clearInterval(this.todoTaskRefreshTimer); } } // 选择单个项目 selectProject(): void { if (this.selectedProjectId) { const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; this.router.navigate(['/wxwork', cid, 'project', this.selectedProjectId]); } } // 获取特定阶段的项目 getProjectsByStage(stageId: string): Project[] { return this.filteredProjects.filter(project => project.currentStage === stageId); } // 新增:阶段到核心阶段的映射 private mapStageToCorePhase(stageId: string): 'order' | 'requirements' | 'delivery' | 'aftercare' { if (!stageId) return 'order'; // 空值默认为订单分配 // 标准化阶段名称(去除空格,转小写) const normalizedStage = stageId.trim().toLowerCase(); // 1. 订单分配阶段(英文ID + 中文名称) if (normalizedStage === 'order' || normalizedStage === 'pendingapproval' || normalizedStage === 'pendingassignment' || normalizedStage === '订单分配' || normalizedStage === '待审批' || normalizedStage === '待分配') { return 'order'; } // 2. 确认需求阶段(英文ID + 中文名称) if (normalizedStage === 'requirements' || normalizedStage === 'requirement' || normalizedStage === 'planning' || normalizedStage === '确认需求' || normalizedStage === '需求沟通' || normalizedStage === '方案规划') { return 'requirements'; } // 3. 交付执行阶段(英文ID + 中文名称) if (normalizedStage === 'delivery' || normalizedStage === 'modeling' || normalizedStage === 'rendering' || normalizedStage === 'postproduction' || normalizedStage === 'review' || normalizedStage === 'revision' || normalizedStage === '交付执行' || normalizedStage === '建模' || normalizedStage === '建模阶段' || normalizedStage === '渲染' || normalizedStage === '渲染阶段' || normalizedStage === '后期制作' || normalizedStage === '评审' || normalizedStage === '修改' || normalizedStage === '修订') { return 'delivery'; } // 4. 售后归档阶段(英文ID + 中文名称) if (normalizedStage === 'aftercare' || normalizedStage === 'completed' || normalizedStage === 'archived' || normalizedStage === '售后归档' || normalizedStage === '售后' || normalizedStage === '归档' || normalizedStage === '已完成' || normalizedStage === '已交付') { return 'aftercare'; } // 未匹配的阶段:默认为交付执行(因为大部分时间项目都在执行中) console.warn(`⚠️ 未识别的阶段: "${stageId}" → 默认归类为交付执行`); return 'delivery'; } // 新增:获取核心阶段的项目 getProjectsByCorePhase(coreId: string): Project[] { return this.filteredProjects.filter(p => this.mapStageToCorePhase(p.currentStage) === coreId); } // 新增:获取核心阶段的项目数量 getProjectCountByCorePhase(coreId: string): number { return this.getProjectsByCorePhase(coreId).length; } // 获取特定阶段的项目数量 getProjectCountByStage(stageId: string): number { return this.getProjectsByStage(stageId).length; } // 🔥 已延期项目 get overdueProjects(): Project[] { return this.projects.filter(p => p.isOverdue); } // ⏳ 临期项目(3天内) get dueSoonProjects(): Project[] { return this.projects.filter(p => p.dueSoon && !p.isOverdue); } // 📋 待审批项目(支持中文和英文阶段名称) get pendingApprovalProjects(): Project[] { return this.projects.filter(p => { const stage = (p.currentStage || '').trim(); const data = (p as any).data || {}; const approvalStatus = data.approvalStatus; // 1. 阶段为"订单分配"且审批状态为 pending // 2. 或者阶段为"待确认"/"待审批"(兼容旧数据) return (stage === '订单分配' && approvalStatus === 'pending') || stage === '待审批' || stage === '待确认'; }); } // 检查项目是否待审批 isPendingApproval(project: Project): boolean { const stage = (project.currentStage || '').trim(); const data = (project as any).data || {}; return stage === '订单分配' && data.approvalStatus === 'pending'; } // 🎯 待分配项目(支持中文和英文阶段名称) get pendingAssignmentProjects(): Project[] { return this.projects.filter(p => { const stage = (p.currentStage || '').trim().toLowerCase(); return stage === 'pendingassignment' || stage === '待分配' || stage === '订单分配'; }); } // 智能推荐设计师 private getRecommendedDesigner(projectType: 'soft' | 'hard') { if (!this.designerProfiles || !this.designerProfiles.length) return null; const scoreOf = (p: any) => { const workloadScore = 100 - (p.workload ?? 0); // 负载越低越好 const ratingScore = (p.avgRating ?? 0) * 10; // 评分越高越好 const expScore = (p.experience ?? 0) * 5; // 经验越高越好 return workloadScore * 0.5 + ratingScore * 0.3 + expScore * 0.2; }; const sorted = [...this.designerProfiles].sort((a, b) => scoreOf(b) - scoreOf(a)); return sorted[0] || null; } // 质量评审 reviewProjectQuality(projectId: string, rating: 'excellent' | 'qualified' | 'unqualified'): void { const project = this.projects.find(p => p.id === projectId); if (!project) return; project.qualityRating = rating; if (rating === 'unqualified') { // 不合格:回退到修改阶段 project.currentStage = 'revision'; } this.applyFilters(); window?.fmode?.alert('质量评审已提交'); } // 查看绩效预警(占位:跳转到团队管理) viewPerformanceDetails(): void { this.router.navigate(['/team-leader/team-management']); } // 打开负载日历(占位:跳转到团队管理) navigateToWorkloadCalendar(): void { this.router.navigate(['/team-leader/workload-calendar']); } // 查看项目详情 - 跳转到纯净的项目详情页(无管理端UI) viewProjectDetails(projectId: string): void { if (!projectId) { return; } // 获取公司ID const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; // 跳转到企微认证项目详情页(正确路由) this.router.navigate(['/wxwork', cid, 'project', projectId]); } // 快速分配项目(增强:加入智能推荐) async quickAssignProject(projectId: string): Promise { const project = this.projects.find(p => p.id === projectId); if (!project) { window?.fmode?.alert('未找到对应项目'); return; } const recommended = this.getRecommendedDesigner(project.type); if (recommended) { const reassigning = !!project.designerName; const message = `推荐设计师:${recommended.name}(工作负载:${recommended.workload}%,评分:${recommended.avgRating}分)` + (reassigning ? `\n\n该项目当前已由「${project.designerName}」负责,是否改为分配给「${recommended.name}」?` : '\n\n是否确认分配?'); const confirmAssign = await window?.fmode?.confirm(message); if (confirmAssign) { project.designerName = recommended.name; if (project.currentStage === 'pendingAssignment' || project.currentStage === 'pendingApproval') { project.currentStage = 'requirement'; } project.status = '进行中'; // 更新设计师筛选列表 this.designers = Array.from(new Set(this.projects.map(p => p.designerName).filter(n => !!n))); this.applyFilters(); window?.fmode?.alert(`项目已${reassigning ? '重新' : ''}分配给 ${recommended.name}`); return; } } // 无推荐或用户取消,跳转到详细分配页面 // 跳转到项目详情页 const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; this.router.navigate(['/wxwork', cid, 'project', projectId]); } // 导航到待办任务 navigateToTask(task: TodoTask): void { switch (task.type) { case 'review': this.router.navigate(['team-leader/quality-management', task.targetId]); break; case 'assign': this.router.navigate(['/team-leader/dashboard']); break; case 'performance': this.router.navigate(['team-leader/team-management']); break; } } // 获取优先级标签 getPriorityLabel(priority: 'high' | 'medium' | 'low'): string { const labels: Record<'high' | 'medium' | 'low', string> = { 'high': '紧急且重要', 'medium': '重要不紧急', 'low': '紧急不重要' }; return labels[priority]; } // 导航到团队管理 navigateToTeamManagement(): void { this.router.navigate(['/team-leader/team-management']); } // 导航到项目评审 navigateToProjectReview(): void { // 统一入口:跳转到项目列表/看板,而非旧评审页 this.router.navigate(['/team-leader/dashboard']); } // 导航到质量管理 navigateToQualityManagement(): void { this.router.navigate(['/team-leader/quality-management']); } // 打开工作量预估工具(已迁移) openWorkloadEstimator(): void { // 工具迁移至详情页:引导前往当前选中项目详情 const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; if (this.selectedProjectId) { this.router.navigate(['/wxwork', cid, 'project', this.selectedProjectId]); } else { this.router.navigate(['/wxwork', cid, 'team-leader']); } window?.fmode?.alert('工作量预估工具已迁移至项目详情页,您可以在建模阶段之前使用该工具进行工作量计算。'); } // 查看所有超期项目 viewAllOverdueProjects(): void { this.filterByStatus('overdue'); this.closeAlert(); } // 关闭提醒 closeAlert(): void { this.showAlert = false; } resetStatusFilter(): void { this.selectedStatus = 'all'; this.applyFilters(); } // 处理甘特图员工点击事件 async onEmployeeClick(employeeName: string): Promise { if (!employeeName || employeeName === '未分配') { return; } // 生成员工详情数据 this.selectedEmployeeDetail = await this.generateEmployeeDetail(employeeName); this.showEmployeeDetailPanel = true; } // 生成员工详情数据 private async generateEmployeeDetail(employeeName: string): Promise { // 从 ProjectTeam 表获取该员工负责的项目 const employeeProjects = this.designerWorkloadMap.get(employeeName) || []; const currentProjects = employeeProjects.length; // 保存完整的项目数据(最多显示3个) const projectData = employeeProjects.slice(0, 3).map(p => ({ id: p.id, name: p.name })); const projectNames = projectData.map(p => p.name); // 项目名称列表 // 获取该员工的请假记录(未来7天) const today = new Date(); const next7Days = Array.from({ length: 7 }, (_, i) => { const date = new Date(today); date.setDate(today.getDate() + i); return date.toISOString().split('T')[0]; // YYYY-MM-DD 格式 }); const employeeLeaveRecords = this.leaveRecords.filter(record => record.employeeName === employeeName && next7Days.includes(record.date) ); // 生成红色标记说明 const redMarkExplanation = this.generateRedMarkExplanation(employeeName, employeeLeaveRecords, currentProjects); // 保存当前员工信息和项目数据(用于切换月份) this.currentEmployeeName = employeeName; this.currentEmployeeProjects = employeeProjects; // 生成日历数据 const calendarData = this.generateEmployeeCalendar(employeeName, employeeProjects); // 新增:加载问卷数据 let surveyCompleted = false; let surveyData = null; let profileId = ''; try { const Parse = await import('fmode-ng/parse').then(m => m.FmodeParse.with('nova')); // 通过员工名字查找Profile(同时查询 realname 和 name 字段) const realnameQuery = new Parse.Query('Profile'); realnameQuery.equalTo('realname', employeeName); const nameQuery = new Parse.Query('Profile'); nameQuery.equalTo('name', employeeName); // 使用 or 查询 const profileQuery = Parse.Query.or(realnameQuery, nameQuery); profileQuery.limit(1); const profileResults = await profileQuery.find(); console.log(`🔍 查找员工 ${employeeName},找到 ${profileResults.length} 个结果`); if (profileResults.length > 0) { const profile = profileResults[0]; profileId = profile.id; surveyCompleted = profile.get('surveyCompleted') || false; console.log(`📋 Profile ID: ${profileId}, surveyCompleted: ${surveyCompleted}`); // 如果已完成问卷,加载问卷答案 if (surveyCompleted) { const surveyQuery = new Parse.Query('SurveyLog'); surveyQuery.equalTo('profile', profile.toPointer()); surveyQuery.equalTo('type', 'survey-profile'); surveyQuery.descending('createdAt'); surveyQuery.limit(1); const surveyResults = await surveyQuery.find(); console.log(`📝 找到 ${surveyResults.length} 条问卷记录`); if (surveyResults.length > 0) { const survey = surveyResults[0]; surveyData = { answers: survey.get('answers') || [], createdAt: survey.get('createdAt'), updatedAt: survey.get('updatedAt') }; console.log(`✅ 加载问卷数据成功,共 ${surveyData.answers.length} 道题`); } } } else { console.warn(`⚠️ 未找到员工 ${employeeName} 的 Profile`); } console.log(`📋 员工 ${employeeName} 问卷状态:`, surveyCompleted ? '已完成' : '未完成'); } catch (error) { console.error(`❌ 加载员工 ${employeeName} 问卷数据失败:`, error); } return { name: employeeName, currentProjects, projectNames, projectData, leaveRecords: employeeLeaveRecords, redMarkExplanation, calendarData, // 新增字段 surveyCompleted, surveyData, profileId }; } /** * 生成员工日历数据(支持指定月份) */ private generateEmployeeCalendar(employeeName: string, employeeProjects: any[], targetMonth?: Date): EmployeeCalendarData { const currentMonth = targetMonth || new Date(); const year = currentMonth.getFullYear(); const month = currentMonth.getMonth(); // 获取当月天数 const daysInMonth = new Date(year, month + 1, 0).getDate(); const days: EmployeeCalendarDay[] = []; const today = new Date(); today.setHours(0, 0, 0, 0); // 生成当月每一天的数据 for (let day = 1; day <= daysInMonth; day++) { const date = new Date(year, month, day); const dateStr = date.toISOString().split('T')[0]; // 找出该日期相关的项目(项目进行中且在当天范围内) const dayProjects = employeeProjects.filter(p => { // 处理 Parse Date 对象:检查是否有 toDate 方法 const getDate = (dateValue: any) => { if (!dateValue) return null; if (dateValue.toDate && typeof dateValue.toDate === 'function') { return dateValue.toDate(); // Parse Date对象 } if (dateValue instanceof Date) { return dateValue; } return new Date(dateValue); // 字符串或时间戳 }; const deadlineDate = getDate(p.deadline); const createdDate = p.createdAt ? getDate(p.createdAt) : null; // 如果项目既没有 deadline 也没有 createdAt,则跳过 if (!deadlineDate && !createdDate) { return false; } // 智能处理日期范围 let startDate: Date; let endDate: Date; if (deadlineDate && createdDate) { // 情况1:两个日期都有 startDate = createdDate; endDate = deadlineDate; } else if (deadlineDate) { // 情况2:只有deadline,往前推30天 startDate = new Date(deadlineDate.getTime() - 30 * 24 * 60 * 60 * 1000); endDate = deadlineDate; } else { // 情况3:只有createdAt,往后推30天 startDate = createdDate!; endDate = new Date(createdDate!.getTime() + 30 * 24 * 60 * 60 * 1000); } startDate.setHours(0, 0, 0, 0); endDate.setHours(0, 0, 0, 0); const inRange = date >= startDate && date <= endDate; return inRange; }).map(p => { const getDate = (dateValue: any) => { if (!dateValue) return undefined; if (dateValue.toDate && typeof dateValue.toDate === 'function') { return dateValue.toDate(); } if (dateValue instanceof Date) { return dateValue; } return new Date(dateValue); }; return { id: p.id, name: p.name, deadline: getDate(p.deadline) }; }); days.push({ date, projectCount: dayProjects.length, projects: dayProjects, isToday: date.getTime() === today.getTime(), isCurrentMonth: true }); } // 补齐前后的日期(保证从周日开始) const firstDay = new Date(year, month, 1); const firstDayOfWeek = firstDay.getDay(); // 0=周日 // 前置补齐(上个月的日期) for (let i = firstDayOfWeek - 1; i >= 0; i--) { const date = new Date(year, month, -i); days.unshift({ date, projectCount: 0, projects: [], isToday: false, isCurrentMonth: false }); } // 后置补齐(下个月的日期,保证总数是7的倍数) const remainder = days.length % 7; if (remainder !== 0) { const needed = 7 - remainder; for (let i = 1; i <= needed; i++) { const date = new Date(year, month + 1, i); days.push({ date, projectCount: 0, projects: [], isToday: false, isCurrentMonth: false }); } } return { currentMonth: new Date(year, month, 1), days }; } /** * 处理日历日期点击 */ onCalendarDayClick(day: EmployeeCalendarDay): void { if (!day.isCurrentMonth || day.projectCount === 0) { return; } this.selectedDate = day.date; this.selectedDayProjects = day.projects; this.showCalendarProjectList = true; } /** * 切换员工日历月份 * @param direction -1=上月, 1=下月 */ changeEmployeeCalendarMonth(direction: number): void { if (!this.selectedEmployeeDetail?.calendarData) { return; } const currentMonth = this.selectedEmployeeDetail.calendarData.currentMonth; const newMonth = new Date(currentMonth); newMonth.setMonth(newMonth.getMonth() + direction); // 重新生成日历数据 const newCalendarData = this.generateEmployeeCalendar( this.currentEmployeeName, this.currentEmployeeProjects, newMonth ); // 更新员工详情中的日历数据 this.selectedEmployeeDetail = { ...this.selectedEmployeeDetail, calendarData: newCalendarData }; } /** * 关闭项目列表弹窗 */ closeCalendarProjectList(): void { this.showCalendarProjectList = false; this.selectedDate = null; this.selectedDayProjects = []; } // 生成红色标记说明 private generateRedMarkExplanation(employeeName: string, leaveRecords: LeaveRecord[], projectCount: number): string { const explanations: string[] = []; // 检查请假情况 const leaveDays = leaveRecords.filter(record => record.isLeave); if (leaveDays.length > 0) { leaveDays.forEach(leave => { const date = new Date(leave.date); const dateStr = `${date.getMonth() + 1}月${date.getDate()}日`; explanations.push(`${dateStr}(${leave.reason || '请假'})`); }); } // 检查项目繁忙情况 if (projectCount >= 3) { const today = new Date(); const dateStr = `${today.getMonth() + 1}月${today.getDate()}日`; explanations.push(`${dateStr}(${projectCount}个项目繁忙)`); } if (explanations.length === 0) { return '当前无红色标记时段'; } return `甘特图中红色时段说明:${explanations.map((exp, index) => `${index + 1}${exp}`).join(';')}`; } // 关闭员工详情面板 closeEmployeeDetailPanel(): void { this.showEmployeeDetailPanel = false; this.selectedEmployeeDetail = null; this.showFullSurvey = false; // 重置问卷显示状态 } /** * 刷新员工问卷状态 */ async refreshEmployeeSurvey(): Promise { if (this.refreshingSurvey || !this.selectedEmployeeDetail) { return; } try { this.refreshingSurvey = true; console.log('🔄 刷新问卷状态...'); const employeeName = this.selectedEmployeeDetail.name; // 重新加载员工详情数据 const updatedDetail = await this.generateEmployeeDetail(employeeName); // 更新当前显示的员工详情 this.selectedEmployeeDetail = updatedDetail; console.log('✅ 问卷状态刷新成功'); } catch (error) { console.error('❌ 刷新问卷状态失败:', error); } finally { this.refreshingSurvey = false; } } /** * 切换问卷显示模式 */ toggleSurveyDisplay(): void { this.showFullSurvey = !this.showFullSurvey; } /** * 获取能力画像摘要 */ getCapabilitySummary(answers: any[]): any { const findAnswer = (questionId: string) => { const item = answers.find(a => a.questionId === questionId); return item?.answer; }; const formatArray = (value: any): string => { if (Array.isArray(value)) { return value.join('、'); } return value || '未填写'; }; return { styles: formatArray(findAnswer('q1_expertise_styles')), spaces: formatArray(findAnswer('q2_expertise_spaces')), advantages: formatArray(findAnswer('q3_technical_advantages')), difficulty: findAnswer('q5_project_difficulty') || '未填写', capacity: findAnswer('q7_weekly_capacity') || '未填写', urgent: findAnswer('q8_urgent_willingness') || '未填写', urgentLimit: findAnswer('q8_urgent_limit') || '', feedback: findAnswer('q9_progress_feedback') || '未填写', communication: formatArray(findAnswer('q12_communication_methods')) }; } // 从员工详情面板跳转到项目详情 navigateToProjectFromPanel(projectId: string): void { if (!projectId) { return; } // 关闭员工详情面板 this.closeEmployeeDetailPanel(); // 跳转到项目详情页(使用纯净的wxwork路由) const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; this.router.navigate(['/wxwork', cid, 'project', projectId, 'order']); } // 获取请假类型显示文本 getLeaveTypeText(leaveType?: string): string { const typeMap: Record = { 'sick': '病假', 'personal': '事假', 'annual': '年假', 'other': '其他' }; return typeMap[leaveType || ''] || '请假'; } // 生成请假覆盖层数据 private generateLeaveOverlayData(categories: string[], xMin: number, xMax: number): any[] { const DAY = 24 * 60 * 60 * 1000; const overlayData: any[] = []; categories.forEach((employeeName, yIndex) => { // 获取该员工在时间范围内的请假记录 const employeeLeaves = this.leaveRecords.filter(record => { if (record.employeeName !== employeeName || !record.isLeave) { return false; } const recordDate = new Date(record.date).getTime(); return recordDate >= xMin && recordDate <= xMax; }); // 为每个请假日期创建覆盖层 employeeLeaves.forEach(leave => { const leaveDate = new Date(leave.date); const startOfDay = new Date(leaveDate.getFullYear(), leaveDate.getMonth(), leaveDate.getDate()).getTime(); const endOfDay = startOfDay + DAY - 1; overlayData.push({ name: `${employeeName} - ${this.getLeaveTypeText(leave.leaveType)}`, value: [yIndex, startOfDay, endOfDay, employeeName, leave.leaveType, leave.reason], itemStyle: { color: 'rgba(239, 68, 68, 0.6)', // 半透明红色 borderColor: '#ef4444', borderWidth: 1 } }); }); // 检查项目繁忙情况,如果项目数>=3,也添加红色标记 const employeeProjects = this.designerWorkloadMap.get(employeeName) || []; if (employeeProjects.length >= 3) { // 在当前日期添加繁忙标记 const today = new Date(); const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime(); const endOfToday = startOfToday + DAY - 1; if (startOfToday >= xMin && startOfToday <= xMax) { overlayData.push({ name: `${employeeName} - 项目繁忙(${employeeProjects.length}个项目)`, value: [yIndex, startOfToday, endOfToday, employeeName, 'busy', `负责${employeeProjects.length}个项目`], itemStyle: { color: 'rgba(239, 68, 68, 0.4)', // 稍微透明的红色 borderColor: '#ef4444', borderWidth: 1, borderType: 'dashed' // 虚线边框区分请假和繁忙 } }); } } }); return overlayData; } /** * 加载用户Profile信息 */ async loadUserProfile(): Promise { try { const cid = localStorage.getItem("company"); if (!cid) { console.warn('未找到公司ID,使用默认用户信息'); return; } const wwAuth = new WxworkAuth({ cid }); const profile = await wwAuth.currentProfile(); if (profile) { const name = profile.get("name") || profile.get("mobile") || '组长'; const avatar = profile.get("avatar"); const roleName = profile.get("roleName") || '组长'; this.currentUser = { name, avatar: avatar || this.generateDefaultAvatar(name), roleName }; console.log('用户Profile加载成功:', this.currentUser); } } catch (error) { console.error('加载用户Profile失败:', error); // 保持默认值 } } /** * 生成默认头像(SVG格式) * @param name 用户名 * @returns Base64编码的SVG数据URL */ generateDefaultAvatar(name: string): string { const initial = name ? name.substring(0, 2).toUpperCase() : '组长'; const bgColor = '#CCFFCC'; const textColor = '#555555'; const svg = ` ${initial} `; return `data:image/svg+xml,${encodeURIComponent(svg)}`; } // ==================== 新增:待办任务相关方法 ==================== /** * 从问题板块加载待办任务 */ async loadTodoTasksFromIssues(): Promise { this.loadingTodoTasks = true; this.todoTaskError = ''; try { const Parse: any = FmodeParse.with('nova'); const query = new Parse.Query('ProjectIssue'); // 筛选条件:待处理 + 处理中 query.containedIn('status', ['待处理', '处理中']); query.notEqualTo('isDeleted', true); // 关联数据 query.include(['project', 'creator', 'assignee']); // 排序:更新时间倒序 query.descending('updatedAt'); // 限制数量 query.limit(50); const results = await query.find(); console.log(`📥 查询到 ${results.length} 条问题记录`); // 数据转换(异步处理以支持 fetch) const tasks = await Promise.all(results.map(async (obj: any) => { let project = obj.get('project'); const assignee = obj.get('assignee'); const creator = obj.get('creator'); const data = obj.get('data') || {}; let projectName = '未知项目'; let projectId = ''; // 如果 project 存在,尝试获取完整数据 if (project) { projectId = project.id; // 尝试从已加载的对象获取 name projectName = project.get('name'); // 如果 name 为空,使用 Parse.Query 查询项目 if (!projectName && projectId) { try { console.log(`🔄 查询项目数据: ${projectId}`); const projectQuery = new Parse.Query('Project'); const fetchedProject = await projectQuery.get(projectId); projectName = fetchedProject.get('name') || fetchedProject.get('title') || '未知项目'; console.log(`✅ 项目名称: ${projectName}`); } catch (error) { console.warn(`⚠️ 无法加载项目 ${projectId}:`, error); projectName = `项目-${projectId.slice(0, 6)}`; } } } else { console.warn('⚠️ 问题缺少关联项目:', { issueId: obj.id, title: obj.get('title') }); } return { id: obj.id, title: obj.get('title') || obj.get('description')?.slice(0, 40) || '未命名问题', description: obj.get('description'), priority: obj.get('priority') as IssuePriority || 'medium', type: obj.get('issueType') as IssueType || 'task', status: this.zh2enStatus(obj.get('status')) as IssueStatus, projectId, projectName, relatedSpace: obj.get('relatedSpace') || data.relatedSpace, relatedStage: obj.get('relatedStage') || data.relatedStage, assigneeName: assignee?.get('name') || assignee?.get('realname') || '未指派', creatorName: creator?.get('name') || creator?.get('realname') || '未知', createdAt: obj.createdAt || new Date(), updatedAt: obj.updatedAt || new Date(), dueDate: obj.get('dueDate'), tags: (data.tags || []) as string[] }; })); this.todoTasksFromIssues = tasks; // 排序:优先级 -> 时间 this.todoTasksFromIssues.sort((a, b) => { const priorityA = this.getPriorityOrder(a.priority); const priorityB = this.getPriorityOrder(b.priority); if (priorityA !== priorityB) { return priorityA - priorityB; } return +new Date(b.updatedAt) - +new Date(a.updatedAt); }); console.log(`✅ 加载待办任务成功,共 ${this.todoTasksFromIssues.length} 条`); } catch (error) { console.error('❌ 加载待办任务失败:', error); this.todoTaskError = '加载失败,请稍后重试'; } finally { this.loadingTodoTasks = false; } } /** * 启动自动刷新(每5分钟) */ startAutoRefresh(): void { this.todoTaskRefreshTimer = setInterval(() => { console.log('🔄 自动刷新待办任务...'); this.loadTodoTasksFromIssues(); }, 5 * 60 * 1000); // 5分钟 } /** * 手动刷新待办任务 */ refreshTodoTasks(): void { console.log('🔄 手动刷新待办任务...'); this.loadTodoTasksFromIssues(); } /** * 跳转到项目问题详情 */ navigateToIssue(task: TodoTaskFromIssue): void { const cid = localStorage.getItem('company') || 'cDL6R1hgSi'; // 跳转到项目详情页,并打开问题板块 this.router.navigate( ['/wxwork', cid, 'project', task.projectId, 'order'], { queryParams: { openIssues: 'true', highlightIssue: task.id } } ); } /** * 标记问题为已读 */ async markAsRead(task: TodoTaskFromIssue): Promise { try { // 方式1: 本地隐藏(不修改数据库) this.todoTasksFromIssues = this.todoTasksFromIssues.filter(t => t.id !== task.id); console.log(`✅ 标记问题为已读: ${task.title}`); } catch (error) { console.error('❌ 标记已读失败:', error); } } /** * 获取优先级配置 */ getPriorityConfig(priority: IssuePriority): { label: string; icon: string; color: string; order: number } { const config: Record = { urgent: { label: '紧急', icon: '🔴', color: '#dc2626', order: 0 }, critical: { label: '紧急', icon: '🔴', color: '#dc2626', order: 0 }, high: { label: '高', icon: '🟠', color: '#ea580c', order: 1 }, medium: { label: '中', icon: '🟡', color: '#ca8a04', order: 2 }, low: { label: '低', icon: '⚪', color: '#9ca3af', order: 3 } }; return config[priority] || config.medium; } getPriorityOrder(priority: IssuePriority): number { return this.getPriorityConfig(priority).order; } /** * 获取问题类型中文名 */ getIssueTypeLabel(type: IssueType): string { const map: Record = { bug: '问题', task: '任务', feedback: '反馈', risk: '风险', feature: '需求' }; return map[type] || '任务'; } /** * 格式化相对时间(精确到秒) */ formatRelativeTime(date: Date | string): string { if (!date) { return '未知时间'; } try { const targetDate = new Date(date); const now = new Date(); const diff = now.getTime() - targetDate.getTime(); const seconds = Math.floor(diff / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (seconds < 10) { return '刚刚'; } else if (seconds < 60) { return `${seconds}秒前`; } else if (minutes < 60) { return `${minutes}分钟前`; } else if (hours < 24) { return `${hours}小时前`; } else if (days < 7) { return `${days}天前`; } else { return targetDate.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }); } } catch (error) { console.error('❌ formatRelativeTime 错误:', error, 'date:', date); return '时间格式错误'; } } /** * 格式化精确时间(用于 tooltip) * 格式:YYYY-MM-DD HH:mm:ss */ formatExactTime(date: Date | string): string { if (!date) { return '未知时间'; } try { const d = new Date(date); const year = d.getFullYear(); const month = String(d.getMonth() + 1).padStart(2, '0'); const day = String(d.getDate()).padStart(2, '0'); const hours = String(d.getHours()).padStart(2, '0'); const minutes = String(d.getMinutes()).padStart(2, '0'); const seconds = String(d.getSeconds()).padStart(2, '0'); return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; } catch (error) { console.error('❌ formatExactTime 错误:', error, 'date:', date); return '时间格式错误'; } } /** * 状态映射(中文 -> 英文) */ private zh2enStatus(status: string): IssueStatus { const map: Record = { '待处理': 'open', '处理中': 'in_progress', '已解决': 'resolved', '已关闭': 'closed' }; return map[status] || 'open'; } }