gt_client_pad/src/pages/EqSelfInspection/components/Detail.js

import ModuleTitle from '@/components/ManagementPage/moduleTitle';
import { getDumuDetail } from '@/services/eqSelfInspection';
import { connect, useModel, useParams, useRequest } from '@umijs/max';
import { Affix, Checkbox, Col, Row, Spin, Table } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import styles from './PatrolReportDetail.less';
import DosingFlowCom from './Table/DosingFlowCom';
import Empty from './Table/Empty';
import LiquidLevelCom from './Table/LiquidLevelCom';
import MandateBtn from './Table/MandateBtn';
import PressureGaugeCom from './Table/PressureGaugeCom';
import ReportCom from './Table/ReportCom';
import ReportDumCom from './Table/ReportDumCom';
import WaterInCom from './Table/WaterInCom';
import WaterQualityCom from './Table/WaterQualityCom';

function Detail(props) {
  const { data, userList, projectId, dispatch, loading = false } = props;
  const { routeId } = useParams();
  const { queryMandate } = useModel('useMandate');

  const [select, setSelect] = useState();
  const [statusCheck, setStatusCheck] = useState([0, 1, 2]);

  const sendMessageToUnity = (select, data) => {
    setSelect(select);
    if (window.HightlightEquipment) {
      window.HightlightEquipment(data);
    }
  };

  const result = useMemo(() => {
    var resultArr = [];
    var tempResult = data?.PatrolResult;
    var tempArr = tempResult?.split(';');
    const getTextColor = (status) => {
      switch (status) {
        case '警告':
          return {
            color: '#FFE26D',
            className: styles.warn,
          };
        case '异常':
          return {
            color: '#FE5850',
            className: styles.error,
          };

        default:
          return {
            color: '#12CEB3',
            className: '',
          };
      }
    };
    if (tempArr?.length > 0) {
      tempArr?.forEach((item, index) => {
        var tempItem = item;
        var itemSplit = tempItem.split('：');
        if (itemSplit?.length > 1) {
          var label = '';
          var value = itemSplit[1];
          if (index === 0) label = '设备自检';
          else if (index === 1) label = '工艺自检';
          else {
            label = '安全自检';
            value =
              data?.secureStatus === 0
                ? itemSplit[1] !== '异常'
                  ? '正常'
                  : '异常'
                : '异常';
          }
          resultArr.push({
            ...getTextColor(value),
            label,
            value,
          });
        }
      });
    }
    return resultArr;
  }, [data]);

  useEffect(() => {
    queryMandate({
      project_id: projectId,
      id: routeId,
    });
    dispatch({
      type: 'eqSelfInspection/fetchUserList',
      payload: {
        projectId,
      },
    });
  }, []);

  return (
    <Spin spinning={loading}>
      <Affix>
        <div className={styles.card}>
          <Row>
            <Col span={24} className={styles.cardText}>
              自检时间：{data?.CreatedTime}
            </Col>
          </Row>
          <Row>
            <Col span={10} className={styles.cardText}>
              自检路线：{data?.RouteInfo?.Name}
            </Col>
            <Col span={8} className={styles.cardText}>
              工艺段：{data?.RouteInfo?.GroupID}
            </Col>
          </Row>
          <Row>
            {result.map((item, index) => (
              <Col
                span={index == 0 ? 10 : 7}
                className={styles.cardText}
                key={item.label}
              >
                {index == 0 && '自检结果：'}
                {item.label}-
                <span style={{ color: item.color }}>{item.value}</span>
              </Col>
            ))}
          </Row>
        </div>
      </Affix>

      <Checkbox.Group
        onChange={(check) => {
          // 未勾选则认为全部显示
          if (check.length == 0) {
            setStatusCheck([0, 1, 2]);
          } else {
            setStatusCheck(check);
          }
        }}
        style={{
          width: '70%',
          margin: '0 auto',
          display: 'flex',
          justifyContent: 'center',
          marginBottom: '0.3rem',
        }}
      >
        <Checkbox value={1}>异常数据</Checkbox>
        <Checkbox value={2} style={{ margin: '0 0.5rem' }}>
          警告数据
        </Checkbox>
        <Checkbox value={0}>正常数据</Checkbox>
      </Checkbox.Group>
      {/* 设备自检报告 */}
      <DeviceReport
        sendMessageToUnity={sendMessageToUnity}
        select={select}
        data={data}
        userList={userList}
        statusCheck={statusCheck}
      />

      {/* 工艺自检报告 */}

      <AalysisTable
        onClickItem={sendMessageToUnity}
        select={select}
        data={data}
        statusCheck={statusCheck}
      />
      {/* 安全自检报告 */}
      <SecureReport
        sendMessageToUnity={sendMessageToUnity}
        select={select}
        data={data}
        userList={userList}
        statusCheck={statusCheck}
      />
    </Spin>
  );
}

function DeviceReport(props) {
  const { data } = props;

  // 子集是否显示
  const [subStatus, setSubStatus] = useState([1, 1, 1, 1, 1, 1]);

  const subProps = { ...props, setSubStatus };

  // 子集全部隐藏的情况下，父级也隐藏
  const show = useMemo(() => {
    let total = subStatus.reduce((item, total) => total + item, 0);
    return total > 0;
  }, [subStatus]);

  const changeStatus = (type, status) => {
    setSubStatus((subStatus) => {
      let newSubStatus = [...subStatus];
      newSubStatus[type] = status;
      return newSubStatus;
    });
  };

  // if (!show) return null;

  return (
    <div style={{ display: show ? 'block' : 'none' }}>
      <ModuleTitle title="设备自检报告" />

      {/* 设备自检报告 */}
      <ReportCom
        {...subProps}
        allData={data?.extendWarningAllData}
        key="extend"
        type={'extend'}
        title={<div id="device">设备自检</div>}
        changeStatus={(status) => changeStatus(0, status)}
      ></ReportCom>

      {/* 液位校验 */}
      <LiquidLevelCom
        {...subProps}
        allData={data?.FluidLevelList}
        changeStatus={(status) => changeStatus(1, status)}
      />
      {/* 加药流量校验 */}
      <DosingFlowCom
        {...subProps}
        allData={data?.DrugFlowList}
        changeStatus={(status) => changeStatus(2, status)}
      />
      <WaterInCom
        {...subProps}
        allData={data?.WaterInCheckList}
        changeStatus={(status) => changeStatus(3, status)}
      />
      <PressureGaugeCom
        {...subProps}
        allData={data?.PressureCompareList}
        title="压力仪表校验"
        changeStatus={(status) => changeStatus(4, status)}
      />
      <WaterQualityCom
        {...subProps}
        allData={data?.WaterQualityCompareList}
        title="水质仪表校验"
        changeStatus={(status) => changeStatus(5, status)}
      />
    </div>
  );
}

function SecureReport(props) {
  const { data } = props;
  const [dumuList, setDumuList] = useState([]);
  // 子集是否显示
  const [subStatus, setSubStatus] = useState([1, 1, 1]);

  const subProps = { ...props, setSubStatus };

  // 子集全部隐藏的情况下，父级也隐藏
  const show = useMemo(() => {
    let total = subStatus.reduce((item, total) => total + item, 0);
    return total > 0;
  }, [subStatus]);

  const changeStatus = (type, status) => {
    setSubStatus((subStatus) => {
      let newSubStatus = [...subStatus];
      newSubStatus[type] = status;
      return newSubStatus;
    });
  };

  const { run: detailRun } = useRequest(getDumuDetail, {
    manual: true,
    fetchKey: (id) => id,
    onSuccess: (data) => {
      var item = dumuList?.find((child) => child.id === data.id);
      if (item) {
        item.url = base64ToImageUrl(data.event_bg);
      }
      setDumuList([...dumuList]);
    },
  });
  useEffect(() => {
    setDumuList(data?.dumuList);
    data?.dumuList?.forEach((item) => {
      detailRun(item.id);
    });
  }, [data?.dumuList]);

  // if (!show) return null;

  return (
    <div
      id="secure"
      className={styles.content}
      style={{ display: show ? 'block' : 'none' }}
    >
      <ModuleTitle title="安全自检报告" />
      {/* 环境异常 */}
      <ReportCom
        {...subProps}
        allData={data?.sensor}
        data={data?.sensorWaringData}
        key="sensor"
        type={'sensor'}
        title={'环境自检'}
        changeStatus={(status) => changeStatus(0, status)}
      ></ReportCom>

      {/* 安防检测异常 */}
      <ReportDumCom
        {...subProps}
        data={dumuList}
        title={'安防自检'}
        changeStatus={(status) => changeStatus(1, status)}
      />

      {/* 密闭空间检测异常 */}
      <ReportCom
        {...subProps}
        key="extend"
        type={'extend'}
        title={'密闭空间自检'}
        changeStatus={(status) => changeStatus(2, status)}
      ></ReportCom>
    </div>
  );
}

function AalysisTable(props) {
  const { data = {}, statusCheck } = props;
  const { FaultAnalysis } = data;
  const errorCount = data?.FaultAnalysis?.length || 0;
  const columns = [
    {
      title: '异常名称',
      width: '18%',
      dataIndex: 'device_name',
    },
    // {
    //   title: '位号',
    //   width: '15%',
    //   dataIndex: 'device_code',
    // },
    {
      title: '可能原因',
      width: '30%',
      render: (record) => record.reason,
    },
    {
      title: '解决方案',
      render: (record) => {
        if (record.fix_plan instanceof Array) {
          return (
            <div>
              {record.fix_plan.map((item, index) => (
                <div style={{ lineHeight: 1.8 }} key={index}>
                  {item.content}
                  <MandateBtn relationId={record.id} />
                </div>
              ))}
            </div>
          );
        } else {
          return record.fix_plan;
        }
      },
    },
  ];

  if (statusCheck.length != 3) {
    // 不显示异常数据时，隐藏次模块
    if (!statusCheck.includes(1)) return null;
    // 过滤异常并且此模块没有异常数据时，不显示此模块
    if (statusCheck.includes(1) && errorCount == 0) return null;
  }

  return (
    <div className={styles.content} id="technology">
      <div className={styles.tableStatus}>异常({errorCount})</div>
      <ModuleTitle title="工艺自检报告" />
      <Table
        columns={columns}
        dataSource={FaultAnalysis}
        rowKey="device_code"
        locale={{
          emptyText: <Empty />,
        }}
        pagination={false}
      />
    </div>
  );
}

function base64ToImageUrl(base64String) {
  const byteCharacters = atob(base64String);
  const byteArrays = [];

  for (let i = 0; i < byteCharacters.length; i++) {
    byteArrays.push(byteCharacters.charCodeAt(i));
  }

  const byteArray = new Uint8Array(byteArrays);
  const blob = new Blob([byteArray], { type: 'image/png' });
  const imageUrl = URL.createObjectURL(blob);

  return imageUrl;
}

export default connect(({ eqSelfInspection }) => ({
  userList: eqSelfInspection.userList,
  mandateInfo: eqSelfInspection.mandateInfo,
}))(Detail);