dashboard.ts 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807
  1. // 修复 OnDestroy 导入和使用
  2. import { Component, OnInit, OnDestroy, signal, computed } from '@angular/core';
  3. import { CommonModule } from '@angular/common';
  4. import { FormsModule } from '@angular/forms';
  5. import { RouterModule, Router, ActivatedRoute } from '@angular/router';
  6. import { ProjectService } from '../../../services/project.service';
  7. import { Project, Task, CustomerFeedback } from '../../../models/project.model';
  8. @Component({
  9. selector: 'app-dashboard',
  10. standalone: true,
  11. imports: [CommonModule, FormsModule, RouterModule],
  12. templateUrl: './dashboard.html',
  13. styleUrls: ['./dashboard.scss', '../customer-service-styles.scss'],
  14. providers: [ProjectService]
  15. })
  16. export class Dashboard implements OnInit, OnDestroy {
  17. // 数据看板统计
  18. stats = {
  19. newConsultations: signal(12),
  20. pendingAssignments: signal(5),
  21. exceptionProjects: signal(2),
  22. afterSalesCount: signal(15), // 售后服务数量
  23. // 新增核心指标
  24. conversionRateToday: signal(36), // 当日成交率(%)
  25. pendingComplaints: signal(3), // 待处理投诉数
  26. unRepliedConsultations: signal(7), // 未回复咨询数
  27. // 新客户触达统计
  28. newCustomerReachCount: signal(8), // 新客户待触达数量
  29. newCustomerConversionRate: signal(24), // 新客户转化率(%)
  30. // 老客户回访统计
  31. oldCustomerFollowUpCount: signal(6), // 老客户待回访数量
  32. oldCustomerRetentionRate: signal(78) // 老客户留存率(%)
  33. };
  34. // 新增:新客户触达/老客户回访列表(增强版本,包含客户标签和策略)
  35. newReachOutCustomers = signal<Array<{
  36. name: string;
  37. demandType: string;
  38. lastContactAt: Date;
  39. customerTag: 'value-sensitive' | 'price-sensitive';
  40. recommendedPhrase: string;
  41. caseStrategy: string;
  42. }>>([]);
  43. oldCustomerFollowUps = signal<Array<{
  44. name: string;
  45. demandType: string;
  46. lastContactAt: Date;
  47. customerTag: 'value-sensitive' | 'price-sensitive';
  48. recommendedPhrase: string;
  49. caseStrategy: string;
  50. }>>([]);
  51. urgentTasks = signal<Task[]>([]);
  52. // 任务处理状态
  53. taskProcessingState = signal<Partial<Record<string, { inProgress: boolean; progress: number }>>>({});
  54. // 新增:待跟进尾款项目列表
  55. pendingFinalPaymentProjects = signal<Array<{
  56. projectId: string;
  57. projectName: string;
  58. customerName: string;
  59. customerPhone: string;
  60. finalPaymentAmount: number;
  61. notificationTime: Date;
  62. status: 'pending_followup' | 'following_up' | 'payment_completed';
  63. largeImagesSent?: boolean;
  64. }>>([]);
  65. // 项目动态流
  66. projectUpdates = signal<(Project | CustomerFeedback)[]>([]);
  67. // 搜索关键词
  68. searchTerm = signal('');
  69. // 筛选后的项目更新
  70. filteredUpdates = computed(() => {
  71. if (!this.searchTerm()) return this.projectUpdates();
  72. return this.projectUpdates().filter(item => {
  73. if ('name' in item) {
  74. // 项目
  75. return item.name.toLowerCase().includes(this.searchTerm().toLowerCase()) ||
  76. item.customerName.toLowerCase().includes(this.searchTerm().toLowerCase()) ||
  77. item.status.toLowerCase().includes(this.searchTerm().toLowerCase());
  78. } else {
  79. // 反馈
  80. return 'content' in item && item.content.toLowerCase().includes(this.searchTerm().toLowerCase()) ||
  81. 'status' in item && item.status.toLowerCase().includes(this.searchTerm().toLowerCase());
  82. }
  83. });
  84. });
  85. currentDate = new Date();
  86. // 回到顶部按钮可见性信号
  87. showBackToTopSignal = signal(false);
  88. // 任务表单可见性
  89. isTaskFormVisible = signal(false);
  90. // 新任务数据
  91. newTask: Task = {
  92. id: '',
  93. projectId: '',
  94. projectName: '',
  95. title: '',
  96. stage: '需求沟通',
  97. deadline: new Date(),
  98. isOverdue: false,
  99. isCompleted: false,
  100. priority: 'high',
  101. assignee: '当前用户',
  102. description: ''
  103. };
  104. // 用于日期时间输入的属性
  105. deadlineInput = '';
  106. // 预设快捷时长选项
  107. timePresets = [
  108. { label: '1小时内', hours: 1 },
  109. { label: '3小时内', hours: 3 },
  110. { label: '6小时内', hours: 6 },
  111. { label: '12小时内', hours: 12 },
  112. { label: '24小时内', hours: 24 }
  113. ];
  114. // 选中的预设时长
  115. selectedPreset = '';
  116. // 自定义时间弹窗可见性
  117. isCustomTimeVisible = false;
  118. // 自定义选择的日期和时间
  119. customDate = new Date();
  120. customTime = '';
  121. // 错误提示信息
  122. deadlineError = '';
  123. // 提交按钮是否禁用
  124. isSubmitDisabled = false;
  125. // 下拉框可见性
  126. deadlineDropdownVisible = false;
  127. // 日期范围限制
  128. get todayDate(): string {
  129. return new Date().toISOString().split('T')[0];
  130. }
  131. get sevenDaysLaterDate(): string {
  132. const date = new Date();
  133. date.setDate(date.getDate() + 7);
  134. return date.toISOString().split('T')[0];
  135. }
  136. constructor(
  137. private projectService: ProjectService,
  138. private router: Router,
  139. private activatedRoute: ActivatedRoute
  140. ) {}
  141. ngOnInit(): void {
  142. this.loadUrgentTasks();
  143. this.loadProjectUpdates();
  144. this.loadCRMQueues(); // 新增:加载新客户触达与老客户回访队列
  145. this.loadPendingFinalPaymentProjects(); // 新增:加载待跟进尾款项目
  146. // 添加滚动事件监听
  147. window.addEventListener('scroll', this.onScroll.bind(this));
  148. }
  149. // 添加滚动事件处理方法
  150. private onScroll(): void {
  151. this.showBackToTopSignal.set(window.scrollY > 300);
  152. }
  153. // 添加显示回到顶部按钮的计算属性
  154. showBackToTop = computed(() => this.showBackToTopSignal());
  155. // 清理事件监听器
  156. ngOnDestroy(): void {
  157. window.removeEventListener('scroll', this.onScroll.bind(this));
  158. }
  159. // 添加scrollToTop方法
  160. scrollToTop(): void {
  161. window.scrollTo({
  162. top: 0,
  163. behavior: 'smooth'
  164. });
  165. }
  166. // 查看人员考勤
  167. viewAttendance(): void {
  168. this.router.navigate(['/hr/attendance']);
  169. }
  170. // 修改loadUrgentTasks方法,添加status属性
  171. loadUrgentTasks(): void {
  172. // 从服务获取任务数据,筛选出紧急任务
  173. this.projectService.getTasks().subscribe(tasks => {
  174. const filteredTasks = tasks.map(task => ({...task, status: task.isOverdue ? '已逾期' : task.isCompleted ? '已完成' : '进行中'}))
  175. .filter(task => task.isOverdue || task.deadline.toDateString() === new Date().toDateString());
  176. this.urgentTasks.set(filteredTasks.sort((a, b) => {
  177. // 按紧急程度排序
  178. if (a.isOverdue && !b.isOverdue) return -1;
  179. if (!a.isOverdue && b.isOverdue) return 1;
  180. return a.deadline.getTime() - b.deadline.getTime();
  181. }));
  182. });
  183. }
  184. // 加载新客户触达与老客户回访数据(示例数据,后续可接入接口)
  185. private loadCRMQueues(): void {
  186. const now = new Date();
  187. this.newReachOutCustomers.set([
  188. {
  189. name: '陈女士',
  190. demandType: '全屋定制',
  191. lastContactAt: new Date(now.getTime() - 2 * 60 * 60 * 1000),
  192. customerTag: 'value-sensitive',
  193. recommendedPhrase: '我们的全屋定制方案注重品质与设计的完美结合,为您打造独一无二的家居空间',
  194. caseStrategy: '推荐高端别墅案例,强调设计理念和材料品质'
  195. },
  196. {
  197. name: '赵先生',
  198. demandType: '厨房改造',
  199. lastContactAt: new Date(now.getTime() - 26 * 60 * 60 * 1000),
  200. customerTag: 'price-sensitive',
  201. recommendedPhrase: '我们的厨房改造方案性价比极高,在预算范围内实现最大化的功能提升',
  202. caseStrategy: '推荐经济实用案例,突出成本控制和实用功能'
  203. },
  204. {
  205. name: '吴先生',
  206. demandType: '客厅软装',
  207. lastContactAt: new Date(now.getTime() - 5 * 60 * 60 * 1000),
  208. customerTag: 'value-sensitive',
  209. recommendedPhrase: '我们的软装设计师将为您量身定制,打造有品味的生活空间',
  210. caseStrategy: '推荐精品软装案例,强调设计师专业度和美学价值'
  211. }
  212. ]);
  213. this.oldCustomerFollowUps.set([
  214. {
  215. name: '王女士',
  216. demandType: '别墅整装',
  217. lastContactAt: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
  218. customerTag: 'value-sensitive',
  219. recommendedPhrase: '感谢您对我们的信任,我们将继续为您提供高品质的服务体验',
  220. caseStrategy: '展示同档次别墅案例,强调服务品质和后续保障'
  221. },
  222. {
  223. name: '李先生',
  224. demandType: '卧室升级',
  225. lastContactAt: new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000),
  226. customerTag: 'price-sensitive',
  227. recommendedPhrase: '我们为老客户准备了特别优惠,让您以更实惠的价格享受升级服务',
  228. caseStrategy: '推荐性价比升级方案,提供老客户专属优惠'
  229. },
  230. {
  231. name: '孙女士',
  232. demandType: '卫生间翻新',
  233. lastContactAt: new Date(now.getTime() - 10 * 24 * 60 * 60 * 1000),
  234. customerTag: 'value-sensitive',
  235. recommendedPhrase: '基于您之前的项目经验,我们为您推荐更加精致的翻新方案',
  236. caseStrategy: '展示精品卫生间案例,强调细节工艺和材料升级'
  237. }
  238. ]);
  239. }
  240. // 查看全部咨询列表
  241. goToConsultationList(): void {
  242. this.router.navigate(['/customer-service/consultation-list']);
  243. }
  244. loadProjectUpdates(): void {
  245. // 模拟项目更新数据
  246. this.projectService.getProjects().subscribe(projects => {
  247. this.projectService.getCustomerFeedbacks().subscribe(feedbacks => {
  248. // 合并项目和反馈,按时间倒序排序
  249. const updates: (Project | CustomerFeedback)[] = [
  250. ...projects,
  251. ...feedbacks
  252. ].sort((a, b) => {
  253. const dateA = 'createdAt' in a ? a.createdAt : new Date(a['updatedAt'] || a['deadline']);
  254. const dateB = 'createdAt' in b ? b.createdAt : new Date(b['updatedAt'] || b['deadline']);
  255. return dateB.getTime() - dateA.getTime();
  256. }).slice(0, 20); // 限制显示20条
  257. this.projectUpdates.set(updates);
  258. });
  259. });
  260. }
  261. // 处理任务完成
  262. markTaskAsCompleted(taskId: string): void {
  263. this.urgentTasks.set(
  264. this.urgentTasks().map(task =>
  265. task.id === taskId ? { ...task, isCompleted: true, status: '已完成' } : task
  266. )
  267. );
  268. }
  269. // 处理派单操作
  270. handleAssignment(taskId: string): void {
  271. // 标记任务为处理中
  272. const task = this.urgentTasks().find(t => t.id === taskId);
  273. if (task) {
  274. // 初始化处理状态
  275. this.taskProcessingState.update(state => ({
  276. ...state,
  277. [task.id]: { inProgress: true, progress: 0 }
  278. }));
  279. // 模拟处理进度
  280. let progress = 0;
  281. const interval = setInterval(() => {
  282. progress += 10;
  283. this.taskProcessingState.update(state => ({
  284. ...state,
  285. [task.id]: { inProgress: progress < 100, progress }
  286. }));
  287. if (progress >= 100) {
  288. clearInterval(interval);
  289. // 处理完成后从列表中移除该任务
  290. this.urgentTasks.set(
  291. this.urgentTasks().filter(t => t.id !== task.id)
  292. );
  293. // 清除处理状态
  294. this.taskProcessingState.update(state => {
  295. const newState = { ...state };
  296. delete newState[task.id];
  297. return newState;
  298. });
  299. }
  300. }, 300);
  301. }
  302. // 更新统计数据
  303. this.stats.pendingAssignments.set(this.stats.pendingAssignments() - 1);
  304. }
  305. // 显示任务表单
  306. showTaskForm(): void {
  307. // 重置表单数据
  308. this.newTask = {
  309. id: '',
  310. projectId: '',
  311. projectName: '',
  312. title: '',
  313. stage: '需求沟通',
  314. deadline: new Date(),
  315. isOverdue: false,
  316. isCompleted: false,
  317. priority: 'high',
  318. assignee: '当前用户',
  319. description: ''
  320. };
  321. // 重置相关状态
  322. this.deadlineError = '';
  323. this.isSubmitDisabled = false;
  324. // 计算并设置默认预设时长
  325. this.setDefaultPreset();
  326. // 显示表单
  327. this.isTaskFormVisible.set(true);
  328. // 添加iOS风格的面板显示动画
  329. setTimeout(() => {
  330. document.querySelector('.ios-panel')?.classList.add('ios-panel-visible');
  331. }, 10);
  332. }
  333. // 设置默认预设时长
  334. private setDefaultPreset(): void {
  335. const now = new Date();
  336. const todayEnd = new Date(now);
  337. todayEnd.setHours(23, 59, 59, 999);
  338. // 检查3小时后是否超过当天24:00
  339. const threeHoursLater = new Date(now.getTime() + 3 * 60 * 60 * 1000);
  340. if (threeHoursLater <= todayEnd) {
  341. // 3小时后未超过当天24:00,默认选中3小时内
  342. this.selectedPreset = '3';
  343. this.updatePresetDeadline(3);
  344. } else {
  345. // 3小时后超过当天24:00,默认选中当天24:00前
  346. this.selectedPreset = 'today';
  347. this.deadlineInput = todayEnd.toISOString().slice(0, 16);
  348. this.newTask.deadline = todayEnd;
  349. }
  350. }
  351. // 处理预设时长选择
  352. handlePresetSelection(preset: string): void {
  353. this.selectedPreset = preset;
  354. this.deadlineError = '';
  355. if (preset === 'custom') {
  356. // 打开自定义时间选择器
  357. this.openCustomTimePicker();
  358. } else if (preset === 'today') {
  359. // 设置为当天24:00前
  360. const now = new Date();
  361. const todayEnd = new Date(now);
  362. todayEnd.setHours(23, 59, 59, 999);
  363. this.deadlineInput = todayEnd.toISOString().slice(0, 16);
  364. this.newTask.deadline = todayEnd;
  365. } else {
  366. // 计算预设时长的截止时间
  367. const hours = parseInt(preset);
  368. this.updatePresetDeadline(hours);
  369. }
  370. }
  371. // 更新预设时长的截止时间
  372. private updatePresetDeadline(hours: number): void {
  373. const now = new Date();
  374. const deadline = new Date(now.getTime() + hours * 60 * 60 * 1000);
  375. this.deadlineInput = deadline.toISOString().slice(0, 16);
  376. this.newTask.deadline = deadline;
  377. }
  378. // 打开自定义时间选择器
  379. openCustomTimePicker(): void {
  380. // 重置自定义时间
  381. this.customDate = new Date();
  382. const now = new Date();
  383. this.customTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
  384. // 显示自定义时间弹窗
  385. this.isCustomTimeVisible = true;
  386. // 添加iOS风格的弹窗动画
  387. setTimeout(() => {
  388. document.querySelector('.custom-time-modal')?.classList.add('modal-visible');
  389. }, 10);
  390. }
  391. // 关闭自定义时间选择器
  392. closeCustomTimePicker(): void {
  393. // 添加iOS风格的弹窗关闭动画
  394. const modal = document.querySelector('.custom-time-modal');
  395. if (modal) {
  396. modal.classList.remove('modal-visible');
  397. setTimeout(() => {
  398. this.isCustomTimeVisible = false;
  399. }, 300);
  400. } else {
  401. this.isCustomTimeVisible = false;
  402. }
  403. }
  404. // 处理自定义时间选择
  405. handleCustomTimeSelection(): void {
  406. const [hours, minutes] = this.customTime.split(':').map(Number);
  407. const selectedDateTime = new Date(this.customDate);
  408. selectedDateTime.setHours(hours, minutes, 0, 0);
  409. // 验证选择的时间是否有效
  410. if (this.validateDeadline(selectedDateTime)) {
  411. this.deadlineInput = selectedDateTime.toISOString().slice(0, 16);
  412. this.newTask.deadline = selectedDateTime;
  413. this.closeCustomTimePicker();
  414. }
  415. }
  416. // 验证截止时间是否有效
  417. validateDeadline(deadline: Date): boolean {
  418. const now = new Date();
  419. if (deadline < now) {
  420. this.deadlineError = '截止时间不能早于当前时间,请重新选择';
  421. this.isSubmitDisabled = true;
  422. return false;
  423. }
  424. this.deadlineError = '';
  425. this.isSubmitDisabled = false;
  426. return true;
  427. }
  428. // 获取显示的截止时间文本
  429. getDisplayDeadline(): string {
  430. if (!this.deadlineInput) return '';
  431. try {
  432. const date = new Date(this.deadlineInput);
  433. return date.toLocaleString('zh-CN', {
  434. year: 'numeric',
  435. month: '2-digit',
  436. day: '2-digit',
  437. hour: '2-digit',
  438. minute: '2-digit'
  439. });
  440. } catch (error) {
  441. return '';
  442. }
  443. }
  444. // 隐藏任务表单
  445. hideTaskForm(): void {
  446. // 添加iOS风格的面板隐藏动画
  447. const panel = document.querySelector('.ios-panel');
  448. if (panel) {
  449. panel.classList.remove('ios-panel-visible');
  450. setTimeout(() => {
  451. this.isTaskFormVisible.set(false);
  452. }, 300);
  453. } else {
  454. this.isTaskFormVisible.set(false);
  455. }
  456. }
  457. // 处理添加任务表单提交
  458. handleAddTaskSubmit(): void {
  459. // 验证表单数据
  460. if (!this.newTask.title.trim() || !this.newTask.projectName.trim() || !this.deadlineInput || this.isSubmitDisabled) {
  461. // 在实际应用中,这里应该显示错误提示
  462. alert('请填写必填字段(任务标题、项目名称、截止时间)');
  463. return;
  464. }
  465. // 创建新任务
  466. const taskToAdd: Task = {
  467. ...this.newTask,
  468. id: `task-${Date.now()}`,
  469. projectId: `project-${Math.floor(Math.random() * 1000)}`,
  470. deadline: new Date(this.deadlineInput),
  471. isOverdue: new Date(this.deadlineInput) < new Date()
  472. };
  473. // 添加到任务列表
  474. this.urgentTasks.set([taskToAdd, ...this.urgentTasks()]);
  475. // 更新统计数据
  476. this.stats.pendingAssignments.set(this.stats.pendingAssignments() + 1);
  477. // 隐藏表单
  478. this.hideTaskForm();
  479. }
  480. // 添加新的紧急事项
  481. addUrgentTask(): void {
  482. // 调用显示表单方法
  483. this.showTaskForm();
  484. }
  485. // 新咨询数图标点击处理
  486. handleNewConsultationsClick(): void {
  487. this.navigateToDetail('consultations');
  488. }
  489. // 待派单数图标点击处理
  490. handlePendingAssignmentsClick(): void {
  491. this.navigateToDetail('assignments');
  492. }
  493. // 异常项目图标点击处理
  494. handleExceptionProjectsClick(): void {
  495. this.navigateToDetail('exceptions');
  496. }
  497. handleAfterSalesClick(): void {
  498. this.router.navigate(['/customer-service/after-sales']);
  499. }
  500. // 导航到详情页
  501. private navigateToDetail(type: 'consultations' | 'assignments' | 'exceptions'): void {
  502. const routeMap = {
  503. consultations: '/customer-service/consultation-list',
  504. assignments: '/customer-service/assignment-list',
  505. exceptions: '/customer-service/exception-list'
  506. };
  507. console.log('导航到:', routeMap[type]);
  508. console.log('当前路由:', this.router.url);
  509. // 添加iOS风格页面过渡动画
  510. document.body.classList.add('ios-page-transition');
  511. setTimeout(() => {
  512. this.router.navigateByUrl(routeMap[type])
  513. .then(navResult => {
  514. console.log('导航结果:', navResult);
  515. if (!navResult) {
  516. console.error('导航失败,检查路由配置');
  517. }
  518. })
  519. .catch(err => {
  520. console.error('导航错误:', err);
  521. });
  522. setTimeout(() => {
  523. document.body.classList.remove('ios-page-transition');
  524. }, 300);
  525. }, 100);
  526. }
  527. // 格式化日期
  528. formatDate(date: Date | string): string {
  529. if (!date) return '';
  530. try {
  531. return new Date(date).toLocaleString('zh-CN', {
  532. month: '2-digit',
  533. day: '2-digit',
  534. hour: '2-digit',
  535. minute: '2-digit'
  536. });
  537. } catch (error) {
  538. console.error('日期格式化错误:', error);
  539. return '';
  540. }
  541. }
  542. // 添加安全获取客户名称的方法
  543. getCustomerName(update: Project | CustomerFeedback): string {
  544. if ('customerName' in update && update.customerName) {
  545. return update.customerName;
  546. } else if ('projectId' in update) {
  547. // 查找相关项目获取客户名称
  548. return '客户反馈';
  549. }
  550. return '未知客户';
  551. }
  552. // 优化的日期格式化方法
  553. getFormattedDate(update: Project | CustomerFeedback): string {
  554. if (!update) return '';
  555. if ('createdAt' in update && update.createdAt) {
  556. return this.formatDate(update.createdAt);
  557. } else if ('updatedAt' in update && update.updatedAt) {
  558. return this.formatDate(update.updatedAt);
  559. } else if ('deadline' in update && update.deadline) {
  560. return this.formatDate(update.deadline);
  561. }
  562. return '';
  563. }
  564. // 添加获取状态的安全方法
  565. getUpdateStatus(update: Project | CustomerFeedback): string {
  566. if ('status' in update && update.status) {
  567. return update.status;
  568. }
  569. return '已更新';
  570. }
  571. // 添加getTaskStatus方法的正确实现
  572. getTaskStatus(task: Task): string {
  573. if (!task) return '未知状态';
  574. if (task.isCompleted) return '已完成';
  575. if (task.isOverdue) return '已逾期';
  576. return '进行中';
  577. }
  578. // 添加getUpdateStatusClass方法的正确实现
  579. getUpdateStatusClass(update: Project | CustomerFeedback): string {
  580. if ('name' in update) {
  581. // 项目
  582. switch (update.status) {
  583. case '进行中': return 'status-active';
  584. case '已完成': return 'status-completed';
  585. case '已暂停': return 'status-paused';
  586. default: return 'status-pending';
  587. }
  588. } else {
  589. // 反馈
  590. switch (update.status) {
  591. case '已解决': return 'status-completed';
  592. case '处理中': return 'status-active';
  593. default: return 'status-pending';
  594. }
  595. }
  596. }
  597. // 新增:加载待跟进尾款项目
  598. loadPendingFinalPaymentProjects(): void {
  599. // 模拟数据,实际应该从API获取
  600. const mockProjects = [
  601. {
  602. projectId: 'P001',
  603. projectName: '现代简约客厅设计',
  604. customerName: '张女士',
  605. customerPhone: '138****8888',
  606. finalPaymentAmount: 15000,
  607. notificationTime: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2小时前
  608. status: 'pending_followup' as const,
  609. largeImagesSent: false
  610. },
  611. {
  612. projectId: 'P002',
  613. projectName: '北欧风格卧室装修',
  614. customerName: '李先生',
  615. customerPhone: '139****9999',
  616. finalPaymentAmount: 22000,
  617. notificationTime: new Date(Date.now() - 4 * 60 * 60 * 1000), // 4小时前
  618. status: 'following_up' as const,
  619. largeImagesSent: false
  620. },
  621. {
  622. projectId: 'P003',
  623. projectName: '工业风办公室设计',
  624. customerName: '王总',
  625. customerPhone: '137****7777',
  626. finalPaymentAmount: 35000,
  627. notificationTime: new Date(Date.now() - 6 * 60 * 60 * 1000), // 6小时前
  628. status: 'payment_completed' as const,
  629. largeImagesSent: false
  630. }
  631. ];
  632. this.pendingFinalPaymentProjects.set(mockProjects);
  633. }
  634. // 新增:格式化日期时间
  635. formatDateTime(date: Date): string {
  636. const now = new Date();
  637. const diffMs = now.getTime() - date.getTime();
  638. const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  639. const diffMinutes = Math.floor(diffMs / (1000 * 60));
  640. if (diffMinutes < 60) {
  641. return `${diffMinutes}分钟前`;
  642. } else if (diffHours < 24) {
  643. return `${diffHours}小时前`;
  644. } else {
  645. return date.toLocaleDateString('zh-CN', {
  646. month: 'short',
  647. day: 'numeric',
  648. hour: '2-digit',
  649. minute: '2-digit'
  650. });
  651. }
  652. }
  653. // 新增:获取支付状态文本
  654. getPaymentStatusText(status: string): string {
  655. switch (status) {
  656. case 'pending_followup': return '待跟进';
  657. case 'following_up': return '跟进中';
  658. case 'payment_completed': return '已支付';
  659. default: return '未知状态';
  660. }
  661. }
  662. // 新增:开始跟进尾款
  663. followUpFinalPayment(projectId: string): void {
  664. const projects = this.pendingFinalPaymentProjects();
  665. const updatedProjects = projects.map(project => {
  666. if (project.projectId === projectId) {
  667. return { ...project, status: 'following_up' as const };
  668. }
  669. return project;
  670. });
  671. this.pendingFinalPaymentProjects.set(updatedProjects);
  672. console.log(`开始跟进项目 ${projectId} 的尾款`);
  673. // 这里可以添加实际的跟进逻辑,比如发送消息、创建任务等
  674. }
  675. // 新增:一键发送大图
  676. sendLargeImages(projectId: string): void {
  677. const projects = this.pendingFinalPaymentProjects();
  678. const project = projects.find(p => p.projectId === projectId);
  679. if (!project) return;
  680. console.log(`正在为项目 ${projectId} 发送大图到企业微信...`);
  681. // 模拟发送过程
  682. setTimeout(() => {
  683. const updatedProjects = projects.map(p => {
  684. if (p.projectId === projectId) {
  685. return { ...p, largeImagesSent: true };
  686. }
  687. return p;
  688. });
  689. this.pendingFinalPaymentProjects.set(updatedProjects);
  690. console.log(`✅ 项目 ${projectId} 大图已成功发送到企业微信服务群`);
  691. console.log(`📱 已同步发送支付成功与大图交付通知`);
  692. alert(`🎉 大图发送成功!
  693. ✅ 已完成操作:
  694. • 大图已发送至企业微信服务群
  695. • 已通知客户支付成功
  696. • 已确认大图交付完成
  697. 项目:${project.projectName}
  698. 客户:${project.customerName}`);
  699. }, 2000);
  700. }
  701. }