gt_client_pad/src/pages/EqSelfInspection/index.js

import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
import { DiffFilled, FundFilled } from '@ant-design/icons';
import { connect, history, useLocation, useParams } from '@umijs/max';
import { Button, Form, Modal, Select, Spin, message } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import styles from './index.less';

const EqSelfInspection = (props) => {
  const { dispatch, autoReport, patrolList, loading } = props;
  const { projectId } = useParams();
  const { routeId } = useLocation();
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  // 0 正常 1 异常 2 loading
  const [patrolStatus, setPatrolStatus] = useState(0);
  const [faultAnalysisStatus, setFaultAnalysisStatus] = useState(0);
  const [secureStatus, setSecureStatus] = useState(0);
  const [secureChildren, setSecureChildren] = useState([]);
  const getDate = () => {
    dispatch({
      type: 'eqSelfInspection/getAutoPatrol',
      payload: {
        projectId,
      },
    });
  };

  const HandleInspection = () => {
    if (patrolList?.length === 0) {
      message.error('请配置巡检路线！');
    } else {
      UnityAction.sendMsg('StartInspection', '');
      dispatch({
        type: 'eqSelfInspection/getAutoPatrol',
        payload: { projectId },
        callback: (data) => {
          setPatrolStatus(data?.patrolStatus);
          setFaultAnalysisStatus(data?.faultAnalysisStatus);
          setSecureStatus(data?.secureStatus);
          setSecureChildren(data?.secureChild);
          history.replace(`/self-inspection/${projectId}?routeId=${data.Id}`);
        },
      });
    }
  };

  const handleOk = () => {
    UnityAction.sendMsg('StartInspection', '');
    form.validateFields((err, values) => {
      if (err) return;
      dispatch({
        type: 'eqSelfInspection/inspectionRoute',
        payload: { projectId, routeId: values.routeId },
        callback: (data) => {
          setPatrolStatus(data?.patrolStatus);
          setFaultAnalysisStatus(data?.faultAnalysisStatus);
          setSecureStatus(data?.secureStatus);
          setSecureChildren(data?.secureChild);
          history.replace(`/self-inspection/${projectId}?routeId=${data.Id}`);
        },
      });
    });
    handleCancel();
    setPatrolStatus(2);
    setSecureStatus(2);
    setFaultAnalysisStatus(2);
  };

  const handleCancel = () => {
    setVisible(false);
    form.resetFields();
  };

  useEffect(() => {
    if (routeId) {
      dispatch({
        type: 'eqSelfInspection/getPatrolDataById',
        payload: {
          routeId: routeId,
        },
      });
    } else if (autoReport.Id) {
      dispatch({
        type: 'eqSelfInspection/getPatrolDataById',
        payload: {
          routeId: autoReport.Id,
        },
      });
    } else {
      getDate();
    }

    dispatch({
      type: 'eqSelfInspection/getList',
      payload: {
        ProjectId: projectId * 1,
      },
    });
  }, []);

  useEffect(() => {
    setPatrolStatus(autoReport?.patrolStatus);
    setFaultAnalysisStatus(autoReport?.faultAnalysisStatus);
    setSecureStatus(autoReport?.secureStatus);
    setSecureChildren(autoReport?.secureChild);
  }, [autoReport]);

  return (
    <PageContent>
      <PageTitle>系统自检</PageTitle>
      <Spin spinning={loading} tip="正在自检中...">
        <div className={`${styles.itemMain} card-box`} style={{ padding: 20 }}>
          <div style={{ position: 'relative', display: 'flex' }}>
            <div style={{ fontSize: 24 }}>
              自检间隔：{autoReport?.RouteInfo?.PlanDur}h
            </div>
            <div className={styles.icon}>
              <DiffFilled
                style={{ cursor: 'pointer', marginRight: 20 }}
                onClick={() => {
                  history.push(
                    `/self-inspection/list/${projectId}`,
                  );
                }}
              />
              <FundFilled
                onClick={() => {
                  history.push(
                    `/self-inspection/statistics/${projectId}?JWT-TOKEN=${GetTokenFromUrl()}`,
                  );
                }}
              />
            </div>
          </div>
          <div className={styles.logoInfo}>
            <div className={styles.logo} />
            <div style={{ display: 'flex', fontSize: 20 }}>
              <div>系统自检发现</div>
              <div
                style={{
                  color: autoReport?.warningTotalNum === 0 ? '#333' : '#FE5850',
                  margin: '0 6px 0 6px',
                }}
              >
                {autoReport?.warningTotalNum === 0
                  ? '暂无'
                  : autoReport?.warningTotalNum || 0}
              </div>
              <div>项异常</div>
            </div>
            <div style={{ fontSize: 20 }}>
              {autoReport?.CreatedTime
                ? dayjs(autoReport?.CreatedTime).format('YYYY-MM-DD HH:mm')
                : ''}
            </div>
            <div className={styles.insbtn}>
              <Button type="primary" onClick={HandleInspection}>
                一键自检
              </Button>
              <div
                style={{
                  position: 'absolute',
                  display: 'flex',
                  alignItems: 'flex-end',
                  right: 0,
                  height: '100%',
                }}
              >
                <div>系统自检中</div>
              </div>
            </div>
          </div>
        </div>
        <Item name="设备自检" status={patrolStatus}></Item>
        <Item name="工艺自检" status={faultAnalysisStatus}></Item>
        <Item
          name="安全自检"
          warningText={
            secureStatus === 1
              ? `共发现${
                  secureChildren?.filter((item) => item.status === 1)?.length ||
                  0
                }项异常`
              : ''
          }
          status={secureStatus}
        >
          {secureChildren?.map((item) => (
            <WarningItem label={item.label} status={item.status} />
          ))}
        </Item>
        <div className={styles.reportBtn}>
          <Button
            type="primary"
            onClick={() => {
              history.push(
                `/self-inspection/detail/${projectId}/${
                  autoReport?.Id
                }?JWT-TOKEN=${GetTokenFromUrl()}`,
              );
            }}
          >
            查看自检报告
          </Button>
        </div>

        <Modal
          title="选择巡检路线"
          destroyOnClose
          open={visible}
          onOk={handleOk}
          width="40%"
          maskClosable={false}
          onCancel={handleCancel}
        >
          <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
            <Form.Item
              label="巡检路线"
              name="routeId"
              rules={[
                {
                  required: true,
                  message: '请选择巡检路线',
                },
              ]}
            >
              <Select placeholder="请选择巡检路线">
                {patrolList?.map((item) => (
                  <Option key={item.Id} value={item.Id}>
                    {item?.Name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </Spin>
    </PageContent>
  );
};

export default connect(({ eqSelfInspection, loading }) => ({
  autoReport: eqSelfInspection.autoReport,
  patrolList: eqSelfInspection.patrolList,
  loading: loading.models['eqSelfInspection'],
}))(EqSelfInspection);

const Item = (props) => {
  const { name, children, warningText = '', status = 0 } = props;
  const renderRight = (status) => {
    switch (status) {
      case 0:
        return (
          <div className={styles.right} style={{ color: '#52c41a' }}>
            正常
          </div>
        );
      case 1:
        return (
          <div className={styles.right} style={{ color: '#FE5850' }}>
            异常
          </div>
        );
      case 2:
        return;
      // return <SyncOutlined className={styles.right} spin />;
      default:
        return (
          <div className={styles.right} style={{ color: '#52c41a' }}>
            正常
          </div>
        );
    }
  };
  return (
    <div
      className={`${styles.itemMain} card-box`}
      style={{
        paddingBottom: children ? 20 : 0,
      }}
    >
      <div className={styles.item}>
        <span>{name}</span>
        <span className={styles.warningText}>{warningText}</span>
        {renderRight(status)}
      </div>
      {children}
    </div>
  );
};

const WarningItem = (props) => {
  const { label, status } = props;
  return (
    <div className={styles.warningItem}>
      <span>{label}</span>
      <div
        style={{
          color: status === 1 ? '#FE5850' : '#52c41a',
          fontSize: 20,
          position: 'absolute',
          right: 20,
        }}
      >
        {status === 0 ? '正常' : '异常'}
      </div>
    </div>
  );
};