BSFrame/src/Project/pages/DataMeter/Model/Other.tsx

import React, { useState, useEffect } from 'react';
import { Popover, Radio, Avatar, Tooltip, Empty, Table } from 'antd';
import style from '../index.less';
import moment from 'moment';
import { ChartBoxTitle } from './ChartBox';
import { useModel, useRequest } from '@umijs/max';
import { queryProjectFileList } from '@/Project/services/FileAdmin';
import { getDailyList } from '@/Project/services/DataMeter';

function Other(props: DataMeter.IModelsProps) {
  const { child, setActive, layout, projectId, subModule } = props;
  const [active, setSelfActive] = useState(
    layout.active || child.find((item) => item.show)?.key,
  );
  const [showTabs, setShowTabs] = useState(false);
  const [title, setTitle] = useState('');
  const { getProject } = useModel('project');
  const id = projectId || -1;

  const fileListRequest = useRequest(queryProjectFileList, {
    defaultParams: [
      {
        fileType: 29,
        projectId: id,
        deviceCode: -1,
      },
    ],
  });
  const dailyListRequest = useRequest(getDailyList, {
    defaultParams: [
      {
        projectId: id,
      },
    ],
  });

  const fileList = fileListRequest.data || [];
  const dailyList = dailyListRequest.data?.list || [];

  useEffect(() => {
    const current = child.find(
      (item: DataMeter.ILayoutChild) => item.key == active,
    );
    if (current) setTitle(current.title);
  }, [active]);

  const getTitle = (title: string) => {
    return (
      <Popover
        placement="topLeft"
        content={<div style={{ maxWidth: '2rem' }}>{title}</div>}
      >
        {title}
      </Popover>
    );
  };
  var content;

  switch (active) {
    case 1:
      if (fileList.length > 0) {
        content = (
          <>
            <table
              className={style.other}
              style={{ width: 'calc(100% - 16px)' }}
            >
              <thead>
                <tr>
                  <th
                    style={
                      subModule == 0
                        ? { width: '40%', paddingRight: '10px' }
                        : { width: '50%', paddingRight: '10px' }
                    }
                  >
                    文件名称
                  </th>
                  <th
                    style={
                      subModule == 0
                        ? { width: '20%', paddingRight: '10px' }
                        : { width: '50%', paddingRight: '10px' }
                    }
                  >
                    日期
                  </th>
                  {subModule == 0 && (
                    <th
                      style={
                        subModule == 0
                          ? { width: '40%', paddingRight: '10px' }
                          : { width: '50%', paddingRight: '10px' }
                      }
                    >
                      项目名称
                    </th>
                  )}
                </tr>
              </thead>
            </table>
            <div
              style={{
                overflowY: 'scroll',
                height: 'calc(100% - 24px)',
              }}
            >
              <table className={style.other}>
                <tbody>
                  {fileList.map((item: any) => (
                    <>
                      <tr className={style.messageContent} key={item.Id}>
                        <td
                          style={
                            subModule == 0
                              ? { width: '40%', paddingRight: '10px' }
                              : { width: '50%', paddingRight: '10px' }
                          }
                          className={style.alarmTitle}
                        >
                          {getTitle(item.Name)}
                        </td>
                        <td
                          style={
                            subModule == 0
                              ? { width: '20%', paddingRight: '10px' }
                              : { width: '50%', paddingRight: '10px' }
                          }
                        >
                          {moment(item.CreatedTime).format('YYYY-MM-DD')}
                        </td>
                        {subModule == 0 && (
                          <td
                            style={{ width: '40%', paddingRight: '10px' }}
                            className={style.alarmTitle}
                          >
                            {getTitle(getProject(item.ProjectId)?.Name || '无')}
                          </td>
                        )}
                      </tr>
                    </>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        );
      } else {
        content = <Empty />;
      }
      break;
    case 2:
      if (dailyList.length > 0) {
        content = (
          <>
            <table
              className={style.other}
              style={{ width: 'calc(100% - 16px)' }}
            >
              <thead>
                <tr>
                  <th
                    style={
                      subModule == 0
                        ? { width: '25%', paddingRight: '10px' }
                        : { width: '50%', paddingRight: '10px' }
                    }
                  >
                    创建人
                  </th>
                  <th
                    style={
                      subModule == 0
                        ? { width: '20%', paddingRight: '10px' }
                        : { width: '50%', paddingRight: '10px' }
                    }
                  >
                    日期
                  </th>
                  {subModule == 0 && (
                    <th style={{ width: '55%', paddingRight: '10px' }}>
                      项目名称
                    </th>
                  )}
                </tr>
              </thead>
            </table>
            <div
              style={{
                overflowY: 'scroll',
                height: 'calc(100% - 24px)',
              }}
            >
              <table className={style.other}>
                <tbody>
                  {dailyList.map((item: any) => (
                    <>
                      <tr className={style.messageContent} key={item.id}>
                        <td
                          style={
                            subModule == 0
                              ? { width: '25%', paddingRight: '10px' }
                              : { width: '50%', paddingRight: '10px' }
                          }
                          className={style.alarmTitle}
                        >
                          {getTitle(item.CreatorUser.CName)}
                        </td>
                        <td
                          style={
                            subModule == 0
                              ? { width: '20%', paddingRight: '10px' }
                              : { width: '50%', paddingRight: '10px' }
                          }
                        >
                          {moment(item.ReportDate).format('YYYY-MM-DD')}
                        </td>
                        {subModule == 0 && (
                          <td
                            style={{ width: '55%', paddingRight: '10px' }}
                            className={style.alarmTitle}
                          >
                            {getTitle(getProject(item.ProjectId)?.Name || '无')}
                          </td>
                        )}
                      </tr>
                    </>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        );
      } else {
        content = <Empty />;
      }
      break;
  }

  return (
    <div className={style.modelBox}>
      <ChartBoxTitle
        title={title}
        showTabs={showTabs}
        setShowTabs={setShowTabs}
        width={layout.w}
      ></ChartBoxTitle>
      {showTabs && (
        <ul className={style.tabsList}>
          {(child || [])
            .filter((item: DataMeter.ILayoutChild) => item.show)
            .map((item: DataMeter.ILayoutChild, index: number) => (
              <li
                key={index}
                className={`${active == item.key ? style.active : ''}`}
                onClick={() => {
                  setActive(item.key);
                  setSelfActive(item.key);
                }}
              >
                {item.title}
              </li>
            ))}
        </ul>
      )}
      <div
        style={{
          paddingTop: '10px',
          paddingLeft: '14px',
          flex: 1,
          height: 0,
        }}
      >
        {content}
      </div>
    </div>
  );
}

export default Other;