feats

src/pages/MonitoringScreen/hook.js

@@ -1,49 +1,49 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import useResize from '@/utils/hooks/useResize';
 
-export function useFullScreen() {
-  const [style, setStyle] = useState({});
+export function useFullScreen(elRef) {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const fullScreenRef = useRef();
   fullScreenRef.current = isFullScreen;
 
-  const calcStyle = useCallback(() => {
-    const container = document.querySelector('main.ant-layout-content');
-    const header = container.querySelector('.ant-pro-page-container-warp');
-    const height = container.offsetHeight - header.offsetHeight;
-
-    setStyle({
-      width: '100%',
-      height: `${height}px`,
-    });
-  }, []);
-
-  const onFullScreen = useCallback((e) => {
-    document.documentElement.requestFullscreen();
-    setIsFullScreen(true);
-  }, []);
-
-  useResize((w, h) => {
-    if (fullScreenRef.current) {
-      calcStyle();
-    } else {
-      setStyle({
-        width: `${w}px`,
-        height: `${h}px`,
+  const toggleFullScreen = useCallback((e) => {
+    if (!document.fullscreenElement) {
+      elRef.current.requestFullscreen().then(() => {
+        setIsFullScreen(true);
       });
     }
+  }, []);
+
+  // useResize((w, h) => {
+  //   if (fullScreenRef.current) {
+  //     calcStyle();
+  //   } else {
+  //     setStyle({
+  //       width: `${w}px`,
+  //       height: `${h}px`,
+  //     });
+  //   }
 
-    setIsFullScreen(!fullScreenRef.current);
-  });
+  //   setIsFullScreen(!fullScreenRef.current);
+  // });
 
   useEffect(() => {
-    calcStyle();
+    console.log('-----fullscreenchange------>', elRef.current);
+    const handleFullScreenChange = (e) => {
+      console.log(
+        '-----handleFullScreenChange------>',
+        document.fullscreenElement,
+        fullScreenRef.current,
+      );
+      setIsFullScreen(document.fullscreenElement === fullScreenRef.current);
+    };
+
+    elRef.current.onfullscreenchange = handleFullScreenChange;
+
+    // elRef.current.addEventListener('fullscreenchange', handleFullScreenChange);
 
-    //
-    window.addEventListener('onFullScreenChange', (e) => {
-      console.log('-------onFullScreenChange----->', e);
-    });
+    return elRef.current.removeEventListener('fullscreenchange', handleFullScreenChange);
   }, []);
 
-  return { style, isFullScreen, onFullScreen };
+  return { isFullScreen, toggleFullScreen };
 }

src/pages/MonitoringScreen/index.jsx

@@ -14,12 +14,21 @@ import SquareBox from '@/components/ScreenBox/SquareBox';
 import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 
 export default (props) => {
-  const { style, isFullScreen, onFullScreen } = useFullScreen();
+  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={onFullScreen}>
+        <Button icon={<FullscreenOutlined />} onClick={toggleFullScreen}>
           全屏
         </Button>
       }
@@ -28,7 +37,8 @@ export default (props) => {
         className={classNames(Styles['screen-page'], Styles['pd-lr-40'], {
           [Styles['full-screen']]: isFullScreen,
         })}
-        style={style}
+        style={{ height }}
+        ref={screenRef}
       >
         <div className={Styles['grail-layout']}>
           <div className={Styles['grail-header']}>
@@ -39,7 +49,7 @@ export default (props) => {
               <SquareBox>asdfasdf</SquareBox>
             </div>
             <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
-              <DateCommponets />
+              <DateCommponetsLeft />
             </div>
             <div className={Styles['grail-right']}>
               <SquareBox>asdfasdf</SquareBox>