gt_client_pad/src/pages/MessageCenter/index.js

import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import { getNotificationList } from '@/services/message';
import { UnityAction } from '@/utils/utils';
import { useParams, useRequest } from '@umijs/max';
import { Button, Spin } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
import styles from './index.less';
const icon1 = require('@/assets/message/work.png');
const icon2 = require('@/assets/message/check.png');
const icon3 = require('@/assets/message/warning.png');

const MessageCenter = () => {
  const { projectId } = useParams();
  const [tab, setTab] = useState('2');
  //, msgType: 工况：11， 自检：12，  预警：13
  const { data, run, loading } = useRequest(() =>
    getNotificationList({ projectId, msgType: 11 }, { manual: true }),
  );

  const {
    data: dataWarning,
    run: runWarning,
    loading: loadingWarning,
  } = useRequest(() =>
    getNotificationList({ projectId, msgType: 13 }, { manual: true }),
  );

  const {
    data: dataSelf,
    run: runSelf,
    loading: loadingSelf,
  } = useRequest(() => getNotificationList({ projectId, msgType: 12 }));

  const handleTabsChange = (tab) => {
    setTab(tab);
    switch (tab) {
      case '1':
        run();
        break;
      case '2':
        runSelf();
        break;
      case '3':
        runWarning();
        break;
    }
  };

  const handleReadClick = () => {
    UnityAction.sendMsg('notiReadAll', '');
  };

  const handlerSeeClick = (item) => {
    if (tab === '1') {
      // if (item?.MandateId) {
      UnityAction.sendMsg('OpenTaskModal', `mandate_id=${item.MandateId}`);
      // }
    } else {
      UnityAction.sendMsg('notiZiJian', item.PatrolId);
    }
  };

  const renderItem = (item) => {
    const time = item?.CreatedOn
      ? dayjs(item.CreatedOn).format('YYYY-MM-DD HH:mm')
      : '';
    let icon = '';
    switch (tab) {
      case '1':
        icon = icon1;
        break;
      case '2':
        icon = icon2;
        break;
      case '3':
        icon = icon3;
        break;
    }
    return (
      <div className={`card-box ${styles.itemContent}`}>
        <div className={styles.left}>
          <img className={styles.img} src={icon} />
          <div>
            <div className={styles.text}>{item.MsgBody}</div>
            <div className={styles.time}>{time}</div>
          </div>
        </div>

        <div className={styles.right}>
          <div
            className={item?.ReadStatus ? styles.redPoint : styles.nonePoint}
          />
          <Button
            className={styles.btn}
            type="primary"
            onClick={() => handlerSeeClick(item)}
          >
            查看
          </Button>
        </div>
      </div>
    );
  };
  return (
    <PageContent tabs>
      <TabsContent
        center={false}
        defaultActiveKey="2"
        onChange={handleTabsChange}
        items={[
          {
            label: `系统自检`,
            key: '2',
            children: (
              <Spin spinning={loadingSelf}>
                {dataSelf?.list?.map((item) => renderItem(item))}
              </Spin>
            ),
          },
          {
            label: `预警数据`,
            key: '3',
            children: (
              <Spin spinning={loadingWarning}>
                {dataWarning?.list?.map((item) => renderItem(item))}
              </Spin>
            ),
          },
          {
            label: `水厂工况`,
            key: '1',
            children: (
              <Spin spinning={loading}>
                {data?.list?.map((item) => renderItem(item))}
              </Spin>
            ),
          },
        ]}
      />
      <div className={styles.allRead} onClick={handleReadClick}>
        全部已读
      </div>
    </PageContent>
  );
};
export default MessageCenter;