machinery-admin/src/pages/MonitoringScreen/index.jsx

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { history, Link } from 'umi';
import classNames from 'classnames';
// import { getPersonList, exportPersonList } from '@/services/person';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { FullscreenOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
import GeoMap from '@/components/GeoMap';
import { useFullScreen } from './hook';
import DateCommponetsLeft from './DateCommponetsLeft';
import DateCommponetsBottomRight from './DateCommponetsBottomRight';
import DateCommponetsBottomLeft from './DateCommponetsBottomLeft';

import Styles from './style.less';
import StatisCard from '@/components/ScreenBox/StatisCard';
export default (props) => {
  const screenRef = useRef();
  const [height, setHeight] = useState('auto');
  const { isFullScreen, toggleFullScreen } = useFullScreen(screenRef);

  useEffect(() => {
    const container = document.querySelector('main.ant-layout-content');
    const header = container.querySelector('.ant-pro-page-container-warp');

    setHeight(`${container.offsetHeight - header.offsetHeight}px`);
  }, []);

  return (
    <PageHeaderWrapper
      extra={
        <Button icon={<FullscreenOutlined />} onClick={toggleFullScreen}>
          全屏
        </Button>
      }
    >
      <div
        className={classNames(Styles['screen-page'], Styles['pd-lr-40'], {
          [Styles['full-screen']]: isFullScreen,
        })}
        style={{ height }}
        ref={screenRef}
      >
        <div className={Styles['grail-layout']}>
          <div className={Styles['grail-header']}>
            <ScreenHeader weather="多云 21-28 °C" />
          </div>
          <div className={classNames(Styles['grail-container'], Styles['pd-tp-40'])}>
            <div className={Styles['grail-left']}>
              <DateCommponetsLeft />
            </div>
            <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
              <div className={Styles['statis-container']}>
                <StatisCard color="#23E8AE" icon="icon1" value={2346} title="农机总数（台）" />
                <StatisCard color="#0BDAFF" icon="icon2" value={528} title="农机使用数（台）" />
                <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数（台）" />
                <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数（台）" />
              </div>
              <GeoMap></GeoMap>
            </div>
            <div className={Styles['grail-right']}>
              <DateCommponetsBottomRight />
            </div>
          </div>
          <div className={classNames(Styles['grail-footer'], Styles['pd-tp-40'])}></div>
        </div>
      </div>
    </PageHeaderWrapper>
  );
};