// 修复 OnDestroy 导入和使用 import { Component, OnInit, OnDestroy, signal, computed } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { ProjectService } from '../../../services/project.service'; import { Project, Task, CustomerFeedback } from '../../../models/project.model'; @Component({ selector: 'app-dashboard', standalone: true, imports: [CommonModule, FormsModule, RouterModule], templateUrl: './dashboard.html', styleUrls: ['./dashboard.scss', '../customer-service-styles.scss'] }) export class Dashboard implements OnInit, OnDestroy { // 数据看板统计 stats = { newConsultations: signal(12), pendingAssignments: signal(5), exceptionProjects: signal(2), todayRevenue: signal(28500) }; // 紧急待办列表 urgentTasks = signal([]); // 任务处理状态 taskProcessingState = signal<{[key: string]: {inProgress: boolean, progress: number}}>({}); // 项目动态流 projectUpdates = signal<(Project | CustomerFeedback)[]>([]); // 搜索关键词 searchTerm = signal(''); // 筛选后的项目更新 filteredUpdates = computed(() => { if (!this.searchTerm()) return this.projectUpdates(); return this.projectUpdates().filter(item => { if ('name' in item) { // 项目 return item.name.toLowerCase().includes(this.searchTerm().toLowerCase()) || item.customerName.toLowerCase().includes(this.searchTerm().toLowerCase()) || item.status.toLowerCase().includes(this.searchTerm().toLowerCase()); } else { // 反馈 return 'content' in item && item.content.toLowerCase().includes(this.searchTerm().toLowerCase()) || 'status' in item && item.status.toLowerCase().includes(this.searchTerm().toLowerCase()); } }); }); currentDate = new Date(); // 回到顶部按钮可见性信号 showBackToTopSignal = signal(false); constructor(private projectService: ProjectService) {} ngOnInit(): void { this.loadUrgentTasks(); this.loadProjectUpdates(); // 添加滚动事件监听 window.addEventListener('scroll', this.onScroll.bind(this)); } // 添加滚动事件处理方法 private onScroll(): void { this.showBackToTopSignal.set(window.scrollY > 300); } // 添加显示回到顶部按钮的计算属性 showBackToTop = computed(() => this.showBackToTopSignal()); // 清理事件监听器 ngOnDestroy(): void { window.removeEventListener('scroll', this.onScroll.bind(this)); } // 添加scrollToTop方法 scrollToTop(): void { window.scrollTo({ top: 0, behavior: 'smooth' }); } // 修改loadUrgentTasks方法,添加status属性 loadUrgentTasks(): void { // 从服务获取任务数据,筛选出紧急任务 this.projectService.getTasks().subscribe(tasks => { const filteredTasks = tasks.map(task => ({...task, status: task.isOverdue ? '已逾期' : task.isCompleted ? '已完成' : '进行中'})) .filter(task => task.isOverdue || task.deadline.toDateString() === new Date().toDateString()); this.urgentTasks.set(filteredTasks.sort((a, b) => { // 按紧急程度排序 if (a.isOverdue && !b.isOverdue) return -1; if (!a.isOverdue && b.isOverdue) return 1; return a.deadline.getTime() - b.deadline.getTime(); })); }); } loadProjectUpdates(): void { // 模拟项目更新数据 this.projectService.getProjects().subscribe(projects => { this.projectService.getCustomerFeedbacks().subscribe(feedbacks => { // 合并项目和反馈,按时间倒序排序 const updates: (Project | CustomerFeedback)[] = [ ...projects, ...feedbacks ].sort((a, b) => { const dateA = 'createdAt' in a ? a.createdAt : new Date(a['updatedAt'] || a['deadline']); const dateB = 'createdAt' in b ? b.createdAt : new Date(b['updatedAt'] || b['deadline']); return dateB.getTime() - dateA.getTime(); }).slice(0, 20); // 限制显示20条 this.projectUpdates.set(updates); }); }); } // 处理任务完成 markTaskAsCompleted(taskId: string): void { this.urgentTasks.set( this.urgentTasks().map(task => task.id === taskId ? { ...task, isCompleted: true, status: '已完成' } : task ) ); } // 处理派单操作 handleAssignment(taskId: string): void { // 标记任务为处理中 const task = this.urgentTasks().find(t => t.id === taskId); if (task) { // 初始化处理状态 this.taskProcessingState.update(state => ({ ...state, [task.id]: { inProgress: true, progress: 0 } })); // 模拟处理进度 let progress = 0; const interval = setInterval(() => { progress += 10; this.taskProcessingState.update(state => ({ ...state, [task.id]: { inProgress: progress < 100, progress } })); if (progress >= 100) { clearInterval(interval); // 处理完成后从列表中移除该任务 this.urgentTasks.set( this.urgentTasks().filter(t => t.id !== task.id) ); // 清除处理状态 this.taskProcessingState.update(state => { const newState = { ...state }; delete newState[task.id]; return newState; }); } }, 300); } // 更新统计数据 this.stats.pendingAssignments.set(this.stats.pendingAssignments() - 1); } // 添加新的紧急事项 addUrgentTask(): void { // 在实际应用中,这里可能会打开一个表单模态框 // 这里使用模拟数据直接添加 const newTask: Task = { id: `task-${Date.now()}`, projectId: `project-${Math.floor(Math.random() * 1000)}`, title: '新增紧急任务', projectName: '新项目', stage: '前期沟通', // 设置一个有效的ProjectStage值 deadline: new Date(), isOverdue: false, isCompleted: false, // Task接口中没有status属性,移除它 // 为了符合Task接口要求,添加required的stage字段 priority: 'high', // 模拟值 assignee: '当前用户', // 模拟值 description: '紧急任务描述' // 模拟值 }; this.urgentTasks.set([newTask, ...this.urgentTasks()]); this.stats.pendingAssignments.set(this.stats.pendingAssignments() + 1); } // 新咨询数图标点击处理 handleNewConsultationsClick(): void { console.log('点击查看新咨询详情'); // 在实际应用中,这里会跳转到新咨询列表页面或打开新咨询模态框 } // 待派单数图标点击处理 handlePendingAssignmentsClick(): void { console.log('点击查看待派单详情'); // 在实际应用中,这里会跳转到待派单列表页面或打开待派单模态框 } // 异常项目图标点击处理 handleExceptionProjectsClick(): void { console.log('点击查看异常项目详情'); // 在实际应用中,这里会跳转到异常项目列表页面或打开异常项目模态框 } // 今日成交额图标点击处理 handleTodayRevenueClick(): void { console.log('点击查看今日成交额详情'); // 在实际应用中,这里会跳转到今日成交额详情页面或打开今日成交额模态框 } // 格式化日期 formatDate(date: Date | string): string { if (!date) return ''; try { return new Date(date).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); } catch (error) { console.error('日期格式化错误:', error); return ''; } } // 添加安全获取客户名称的方法 getCustomerName(update: Project | CustomerFeedback): string { if ('customerName' in update && update.customerName) { return update.customerName; } else if ('projectId' in update) { // 查找相关项目获取客户名称 return '客户反馈'; } return '未知客户'; } // 优化的日期格式化方法 getFormattedDate(update: Project | CustomerFeedback): string { if (!update) return ''; if ('createdAt' in update && update.createdAt) { return this.formatDate(update.createdAt); } else if ('updatedAt' in update && update.updatedAt) { return this.formatDate(update.updatedAt); } else if ('deadline' in update && update.deadline) { return this.formatDate(update.deadline); } return ''; } // 添加获取状态的安全方法 getUpdateStatus(update: Project | CustomerFeedback): string { if ('status' in update && update.status) { return update.status; } return '已更新'; } // 添加getTaskStatus方法的正确实现 getTaskStatus(task: Task): string { if (!task) return '未知状态'; if (task.isCompleted) return '已完成'; if (task.isOverdue) return '已逾期'; return '进行中'; } // 添加getUpdateStatusClass方法的正确实现 getUpdateStatusClass(update: Project | CustomerFeedback): string { if (!update || !('status' in update) || !update.status) return ''; switch (update.status) { case '进行中': return 'status-active'; case '已完成': return 'status-completed'; case '已延期': case '已暂停': return 'status-warning'; case '已解决': return 'status-success'; case '待处理': case '处理中': return 'status-info'; default: return ''; } } }