auseft.platform.datav/src/app/layout/basic/widgets/notify.component.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { NoticeIconList, NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon';
import { add, formatDistanceToNow, parse } from 'date-fns';
import { NzI18nService } from 'ng-zorro-antd/i18n';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NoticeIconModule } from '@delon/abc/notice-icon';
//import { SignalRService } from 'src/app/core/utils/signalR.service';
import { _HttpClient } from '@delon/theme';

@Component({
  selector: 'header-notify',
  template: `
    <notice-icon
      [data]="data"
      [count]="count"
      [loading]="loading"
      btnClass="alain-default__nav-item"
      btnIconClass="alain-default__nav-item-icon"
      (select)="select($event)"
      (clear)="clear($event)"
      (popoverVisibleChange)="loadData()"
    ></notice-icon>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [NoticeIconModule]
})
export class HeaderNotifyComponent {
  data: NoticeItem[] = [
    {
      title: '通知',
      list: [],
      emptyText: '你已查看所有通知',
      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
      clearText: '清空通知'
    },
    {
      title: '消息',
      list: [],
      emptyText: '您已读完所有消息',
      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg',
      clearText: '清空消息'
    },
    {
      title: '待办',
      list: [],
      emptyText: '你已完成所有待办',
      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg',
      clearText: '清空待办'
    }
  ];
  count = 5;
  loading = false;

  constructor(
    private msg: NzMessageService,
    private nzI18n: NzI18nService,
    private cdr: ChangeDetectorRef,
    //private signalRService: SignalRService,
    private httpClient: _HttpClient
  ) {
    //this.signalRService.startConnection();

    // this.signalRService.getReceivedMessage().subscribe(data => {
    //   this.count++;
    //   this.cdr.detectChanges();
    // });
  }

  private updateNoticeData(notices: NoticeIconList[]): NoticeItem[] {
    const data = this.data.slice();
    data.forEach(i => (i.list = []));

    notices.forEach(item => {
      const newItem = { ...item } as NoticeIconList;
      if (typeof newItem.datetime === 'string') {
        newItem.datetime = parse(newItem.datetime, 'yyyy-MM-dd', new Date());
      }
      if (newItem.datetime) {
        newItem.datetime = formatDistanceToNow(newItem.datetime as Date, { locale: this.nzI18n.getDateLocale() });
      }
      if (newItem.extra && newItem['status']) {
        newItem['color'] = (
          {
            todo: undefined,
            processing: 'blue',
            urgent: 'red',
            doing: 'gold'
          } as { [key: string]: string | undefined }
        )[newItem['status']];
      }
      data.find(w => w.title === newItem['type'])!.list.push(newItem);
    });
    return data;
  }

  loadData(): void {
    if (this.loading) {
      return;
    }
    this.loading = true;
    this.httpClient.get('/api/main/msg-send-rec').subscribe(res => {
      const now = new Date();
      const noticeDatas = res.items.map((m: { id: any; }) => {
        return {
          id: m.id,
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
          title: '你收到了 14 份新周报',
          datetime: add(now, { days: 10 }),
          type: '通知'
        }
      });

      this.data = this.updateNoticeData(noticeDatas);
      this.loading = false;
      this.cdr.detectChanges();
    });

    // setTimeout(() => {
    //   const now = new Date();
    //   this.data = this.updateNoticeData([
    //     {
    //       id: '000000001',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
    //       title: '你收到了 14 份新周报',
    //       datetime: add(now, { days: 10 }),
    //       type: '通知'
    //     },
    //     {
    //       id: '000000002',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
    //       title: '你推荐的 曲妮妮 已通过第三轮面试',
    //       datetime: add(now, { days: -3 }),
    //       type: '通知'
    //     },
    //     {
    //       id: '000000003',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
    //       title: '这种模板可以区分多种通知类型',
    //       datetime: add(now, { months: -3 }),
    //       read: true,
    //       type: '通知'
    //     },
    //     {
    //       id: '000000004',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
    //       title: '左侧图标用于区分不同的类型',
    //       datetime: add(now, { years: -1 }),
    //       type: '通知'
    //     },
    //     {
    //       id: '000000005',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
    //       title: '内容不要超过两行字，超出时自动截断',
    //       datetime: '2017-08-07',
    //       type: '通知'
    //     },
    //     {
    //       id: '000000006',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    //       title: '曲丽丽 评论了你',
    //       description: '描述信息描述信息描述信息',
    //       datetime: '2017-08-07',
    //       type: '消息'
    //     },
    //     {
    //       id: '000000007',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    //       title: '朱偏右 回复了你',
    //       description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
    //       datetime: '2017-08-07',
    //       type: '消息'
    //     },
    //     {
    //       id: '000000008',
    //       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    //       title: '标题',
    //       description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
    //       datetime: '2017-08-07',
    //       type: '消息'
    //     },
    //     {
    //       id: '000000009',
    //       title: '任务名称',
    //       description: '任务需要在 2017-01-12 20:00 前启动',
    //       extra: '未开始',
    //       status: 'todo',
    //       type: '待办'
    //     },
    //     {
    //       id: '000000010',
    //       title: '第三方紧急代码变更',
    //       description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
    //       extra: '马上到期',
    //       status: 'urgent',
    //       type: '待办'
    //     },
    //     {
    //       id: '000000011',
    //       title: '信息安全考试',
    //       description: '指派竹尔于 2017-01-09 前完成更新并发布',
    //       extra: '已耗时 8 天',
    //       status: 'doing',
    //       type: '待办'
    //     },
    //     {
    //       id: '000000012',
    //       title: 'ABCD 版本发布',
    //       description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
    //       extra: '进行中',
    //       status: 'processing',
    //       type: '待办'
    //     }
    //   ]);

    //   this.loading = false;
    //   this.cdr.detectChanges();
    // }, 500);
  }

  clear(type: string): void {
    this.msg.success(`清空了 ${type}`);
  }

  select(res: NoticeIconSelect): void {
    this.msg.success(`点击了 ${res.title} 的 ${res.item.title}`);
  }
}