gt_client_pad/src/pages/Home/index.js

import { queryConditionSnapshot, queryEnergy } from '@/services/SmartOps';
import { LoadingOutlined } from '@ant-design/icons';
import { connect, history, useParams, useRequest } from '@umijs/max';
import { useEffect } from 'react';
import CircleScore from '../Smart/components/CircleScore';
import styles from './index.less';

const HomePage = (props) => {
  const { projectId } = useParams();

  const { data } = useRequest(queryConditionSnapshot, {
    defaultParams: [{ project_id: projectId }],
  });
  return (
    <div className={styles.content}>
      <LeftContent data={data} />
      <RightContent data={data} />
    </div>
  );
};

const LeftContent = (props) => {
  const { data } = props;
  return (
    <div className={styles.left}>
      <SmartWork data={data} />
      <WaterAmt data={data} />
      <WaterQuality data={data} />
    </div>
  );
};
const RightContent = (props) => {
  const { data } = props;
  return (
    <div className={styles.right}>
      <SelfInspection />
      <Electric data={data} />
      <Medicine />
    </div>
  );
};

// 水厂工况
const SmartWork = (props) => {
  const { projectId } = useParams();
  const { data } = props;
  return (
    <Box
      title="水厂工况"
      onClick={() => history.push(`/smart/work/${projectId}`)}
    >
      <div className={styles.scoreBox}>
        <CircleScore>
          {data?.score}
          <div className={styles.grade}>{data?.grade}</div>
        </CircleScore>
        <div className={styles.scoreTitle}>
          当前运行{data?.grade}，可继续优化
        </div>
        <div className={styles.time}>{data?.clac_time}</div>
      </div>
    </Box>
  );
};

// 水量监测
const WaterAmt = (props) => {
  const { data } = props;
  const { projectId } = useParams();
  return (
    <Box
      title="水量监测"
      onClick={() => history.push(`/home/water-amt-mng/${projectId}`)}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.fwa}</div>
          <div className={styles.name}>进水量</div>
        </li>
        <li>
          <div className={styles.value}>{data?.dwa}</div>
          <div className={styles.name}>产水量</div>
        </li>
      </ul>
    </Box>
  );
};

// 水质监测
const WaterQuality = (props) => {
  const { data } = props;
  const { projectId } = useParams();
  return (
    <Box
      title="水质监测"
      onClick={() => history.push(`/home/water-quality-mng/${projectId}`)}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.dsan}</div>
          <div className={styles.name}>出水余氯</div>
        </li>
        <li>
          <div className={styles.value}>{data?.dtur}</div>
          <div className={styles.name}>出水浊度</div>
        </li>
      </ul>
    </Box>
  );
};

// 系统自检
const SelfInspection = connect(({ eqSelfInspection, loading }) => ({
  autoReport: eqSelfInspection.autoReport,
  loading: loading.models['eqSelfInspection'],
}))((props) => {
  const { autoReport, dispatch, loading } = props;
  const { projectId } = useParams();

  const renderStatus = () => {
    if (loading) return <LoadingOutlined />;
    if (autoReport.warningTotalNum) {
      return (
        <>
          系统自检发现
          <span style={{ color: '#FE5850' }}>{autoReport.warningTotalNum}</span>
          项异常
        </>
      );
    }
    return <span style={{ color: '#F5A623' }}>正常</span>;
  };

  useEffect(() => {
    dispatch({
      type: 'eqSelfInspection/getAutoPatrol',
      payload: {
        projectId,
      },
    });
  }, []);

  return (
    <Box
      title="系统自检"
      onClick={() =>
        history.push(`/self-inspection/detail/${projectId}/${autoReport?.Id}`)
      }
    >
      <div className={styles.insTag}>自检中</div>

      <div className={styles.insStatus}>{renderStatus()}</div>
      <div className={styles.time}>{autoReport.CreatedTime}</div>
    </Box>
  );
});

// 能耗监测
const Electric = (props) => {
  const { data } = props;
  const { projectId } = useParams();
  return (
    <Box
      title="能耗监测"
      onClick={() => history.push(`/home/energy/${projectId}`)}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.elec}</div>
          <div className={styles.name}>用电量</div>
        </li>
      </ul>
    </Box>
  );
};
// 药耗监测
const Medicine = () => {
  const { projectId } = useParams();

  const { data } = useRequest(queryEnergy, {
    defaultParams: [Number(projectId)],
  });
  return (
    <Box
      title="药耗监测"
      onClick={() => history.push(`/home/chem-cost/${projectId}`)}
    >
      <ul>
        <li>
          <div className={styles.value}>{data?.medicine}kg</div>
          <div className={styles.name}>总药耗</div>
        </li>
      </ul>
    </Box>
  );
};

const Box = ({ title, children, onClick }) => {
  return (
    <div className={styles.box} onClick={onClick}>
      <div className={styles.boxTitle}>{title}</div>
      {children}
    </div>
  );
};

export default HomePage;