sl-sfy-safety/src/views/institute-safety/modules/safety-company-home/hooks/use-violation-notice-company.ts

// 报警消息实时提醒

import { getNewIssueList, updateReadIssueId } from '../apis';
import useViolationNoticeStore, { getPlace, emitter } from '../stores/use-violation-notice-store';
import { onUnmounted, onMounted } from 'vue';
import dayjs from 'dayjs';
import { push } from 'notivue';

const useViolationRealtimeCompany = () => {
  /** 消息队列，最新的排在最前面，最老的排在最后面 */
  // 报警消息最后返回数据的id
  const violationStore = useViolationNoticeStore();

  let apiTimer: number;
  let isFirstLoad = true;
  //弹出消息
  const showNotice = () => {
    const showItem = violationStore.getLastNotice();
    // 从数组最末尾弹出消息
    if (!showItem) return;

    // 只显示当天的时分秒
    const renderTime = dayjs(showItem.createdAt).format('HH:mm:ss');
    const renderPlace = getPlace([showItem.workshopName, showItem.workspaceName]);
    push.success({
      props: {
        thumbnail: showItem.pictures?.[0],
        title: showItem.title,
        message: `<div>
      <div>地点：${renderPlace}</div>
      <div>时间：${renderTime}</div>
      </div>`,
        onClick: () => {
          // 这里打开问题列表
        },
      },
      onAutoClear(item) {
        showNotice();
      },
      onManualClear(item) {
        showNotice();
      },
    });
  };

  emitter.on('showNotice', showNotice);

  const getViolationsRealtime = () => {
    getNewIssueList().then((res) => {
      if (!res || res?.length === 0) return;
      if (isFirstLoad) {
        // 如果第一次加载，只显示第一条
        violationStore.add([res[0]]);
        isFirstLoad = false;
      } else {
        violationStore.add(res);
      }
      // 在此次调用更新id接口
      updateReadIssueId(res[0].id);
    });
  };

  /** 轮询api */
  const pollingApi = () => {
    getViolationsRealtime();
    clearInterval(apiTimer);
    apiTimer = window.setInterval(() => {
      getViolationsRealtime();
    }, 5000);
  };

  onMounted(() => {
    violationStore.clear();
    pollingApi();
  });

  onUnmounted(() => {
    clearInterval(apiTimer);
    violationStore.clear();
  });
};

export default useViolationRealtimeCompany;