gt_client_pad/src/pages/SafetyManagement/index.js

import PageContent from '@/components/PageContent';
import TabsContent from '@/components/TabsContent';
import {
  queryGateList,
  queryGateOverView,
  queryMonitorList,
  queryMonitorOnlineCount,
} from '@/services/safety';
import { UnityAction } from '@/utils/utils';
import { useNavigate, useParams, useRequest } from '@umijs/max';
import { Button, Space } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
const img = require('@/assets/air-conditioner.png');
const chartIcon = require('@/assets/deviceManager/chartIcon.png');
const DeviceManager = () => {
  const { projectId } = useParams();
  const [tab, setTab] = useState('1');

  //门禁接口
  const { data, run, loading } = useRequest(
    () => queryGateList({ project_id: projectId }),
    {
      manual: true,
    },
  );
  const {
    data: dataOver,
    run: runOver,
    loading: loadingOver,
  } = useRequest(() => queryGateOverView({ project_id: projectId }), {
    manual: true,
  });

  //视频接口
  const {
    data: dataVList,
    run: runVideo,
    loading: loadingVList,
  } = useRequest(() => queryMonitorList(projectId));
  const {
    data: dataVOnline,
    run: runVOnLine,
    loading: loadingVOnline,
  } = useRequest(() => queryMonitorOnlineCount(projectId));

  useEffect(() => {
    if (data?.list && tab == '2')
      UnityAction.sendMsg('doorData', JSON.stringify(data?.list));
    if (dataVList?.list && tab == '1')
      UnityAction.sendMsg('camData', JSON.stringify(dataVList?.list));
  }, [data, dataVList]);

  const handleTabChange = (tab) => {
    setTab(tab);
    if (tab == '1') {
      runVideo();
      runVOnLine();
    } else {
      run();
      runOver();
    }
  };
  return (
    <PageContent>
      <TabsContent
        defaultActiveKey="1"
        onChange={handleTabChange}
        items={[
          {
            label: `视频监控`,
            key: '1',
            children: (
              <Video
                data={dataVList?.list}
                dataOnline={dataVOnline}
                loading={loadingVList}
                projectId={projectId}
              />
            ),
          },
          {
            label: `门禁`,
            key: '2',
            children: (
              <Door
                data={data?.list}
                dataOver={dataOver}
                loading={loading}
                projectId={projectId}
              />
            ),
          },
        ]}
      />
    </PageContent>
  );
};
const Video = ({ projectId, data, dataOnline, loading }) => {
  const renderRed = (item) => {
    return (
      <div className={styles.cardItem}>
        <div
          className={item.Online ? styles.onlinePoint : styles.outlinePoint}
        />
        <span className={styles.name}>{item.Name}</span>
      </div>
    );
  };
  return (
    <Space direction="vertical" size={16} className={styles.sparePart}>
      <div className={`card-box ${styles.titleContent}`}>
        <div className={styles.titleLeft}>
          <img className={styles.img} src={img} />
          <div className={styles.textCon}>
            <div className={styles.num}>{dataOnline?.total || 0}</div>
            <div>在库数量（个）</div>
          </div>
        </div>
        <div>
          <div className={styles.lTextCon1}>
            <div className={styles.onlinePoint} />
            <span>在线：{dataOnline?.online || 0}</span>
          </div>
          <div className={styles.lTextCon2}>
            <div className={styles.outlinePoint} />
            <span>离线：{dataOnline?.offline || 0}</span>
          </div>
        </div>
      </div>

      {data?.map((item, idx) => (
        <div key={`video_${idx}`} className="card-box">
          {renderRed(item)}
        </div>
      ))}
    </Space>
  );
};
const Door = ({ data, dataOver, loading, projectId }) => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(`/safety/detail/${projectId}`);
  };

  const renderRed = (item) => {
    return (
      <div className={styles.cardItem}>
        <div
          className={item?.status ? styles.onlinePoint : styles.outlinePoint}
        />
        <span className={styles.name}>{item?.name}</span>
      </div>
    );
  };
  return (
    <Space direction="vertical" size={16} className={styles.doorPart}>
      <div className={styles.titleContent}>
        <div className={`card-box ${styles.cardLeft}`}>
          <div className={styles.up}>
            <img className={styles.img} src={img} />
            <div className={styles.textCon}>
              <div className={styles.num}>{dataOver?.total}</div>
              <div>在库数量（个）</div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div
                style={{
                  backgroundColor: '#12ceb3',
                  width: '10px',
                  height: '10px',
                  borderRadius: '5px',
                  marginRight: '10px',
                }}
              />
              <span>在线：{dataOver?.online}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div
                style={{
                  backgroundColor: 'gray',
                  width: '10px',
                  height: '10px',
                  borderRadius: '5px',
                  marginRight: '10px',
                }}
              />
              <span>离线：{dataOver?.offline}</span>
            </div>
          </div>
        </div>
        <div className={`card-box ${styles.titleTwoContent}`}>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              height: '100%',
              justifyContent: 'space-around',
            }}
          >
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <div
                style={{
                  backgroundColor: '#4a90e2',
                  width: '10px',
                  height: '10px',
                  borderRadius: '5px',
                  marginRight: '10px',
                }}
              />
              <span>今日进厂人数：{2}</span>
            </div>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <div
                style={{
                  backgroundColor: '#f5a623',
                  width: '10px',
                  height: '10px',
                  borderRadius: '5px',
                  marginRight: '10px',
                }}
              />
              <span>今日出厂人数：{2}</span>
            </div>
            <Button onClick={handleClick}>门禁日志</Button>
          </div>
        </div>
      </div>
      <Space direction="vertical" className={styles.sparePart}>
        {data?.map((item, idx) => (
          <div
            key={`door_${idx}`}
            className="card-box"
            style={{ padding: '10px' }}
          >
            {renderRed(item)}
          </div>
        ))}
      </Space>
    </Space>
  );
};

export default DeviceManager;