masd

src/components/ScreenBox/ScreenHeader/index.jsx

@@ -1,11 +1,20 @@
+import titleImg from '@/assets/images/screen/header-title.png';
 import Styles from './style.less';
 
-export default () => {
+export default (props) => {
   return (
     <div className={Styles['screen-header-box']}>
-      <div className={Styles['screen-header-left']}></div>
-      <div className={Styles['screen-header-content']}></div>
-      <div className={Styles['screen-header-right']}></div>
+      <div className={Styles['screen-header-left']}>
+        <div>数据概览</div>
+      </div>
+      <div className={Styles['screen-header-left']}>{/* 只负责占位 */}</div>
+      <div className={Styles['screen-header-content']}>
+        <img src={titleImg} alt="" />
+      </div>
+      <div className={Styles['screen-header-right']}>{/* 只负责占位 */}</div>
+      <div className={Styles['screen-header-right']}>
+        <div>{props.weather}</div>
+      </div>
     </div>
   );
 };

src/components/ScreenBox/ScreenHeader/style.less

@@ -1,12 +1,52 @@
 .screen-header-box {
   display: flex;
+  align-items: stretch;
+  height: 5%;
+  min-height: 60px;
+
+  padding-right: 1.5em;
+  padding-left: 1.5em;
+  color: #fff;
+  font-size: 12px;
+  background-image: url('~@/assets/images/screen/header-bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 
   .screen-header-left,
   .screen-header-right {
+    display: grid;
     flex: 1;
+    letter-spacing: 2px;
+    text-align: left;
+    place-items: center;
+
+    & > div {
+      width: 100%;
+    }
+  }
+
+  .screen-header-right {
+    text-align: right;
   }
 
   .screen-header-content {
+    display: flex;
     flex: 6;
+    align-items: center;
+    justify-content: center;
+
+    & > img {
+      height: 50%;
+    }
+  }
+
+  .attchment {
+    color: #fff;
+    font-size: 12px;
+    line-height: 2em;
+
+    &.attchment-right {
+      text-align: right;
+    }
   }
 }

src/components/ScreenBox/TitleBox/style.less

@@ -2,9 +2,9 @@
   // width: 163px;
   display: inline-block;
   align-items: center;
+  margin-bottom: 10px;
   padding: 11px 11px 9px 11px;
   border-radius: 4px;
-
   box-shadow: 0px 0px 10px 0px #3d81f0 inset;
 
   .TitleBox-ListBox {

src/pages/MonitoringScreen/DateCommponetsBottomLeft.jsx

@@ -1,20 +1,9 @@
-
-
-
-import SquareBox from '@/components/ScreenBox/SquareBox'
-import TitleBox from '@/components/ScreenBox/TitleBox'
+import SquareBox from '@/components/ScreenBox/SquareBox';
+import TitleBox from '@/components/ScreenBox/TitleBox';
 import { Column } from '@ant-design/plots';
 // import ba from './a.png'
 
 export default (props) => {
-
-
-  const style = {
-    bgd: {
-      width: '25vw',
-      display: 'inline-block',
-    }
-  }
   const data = [
     {
       name: '预约',
@@ -41,7 +30,6 @@ export default (props) => {
       NongType: '维修',
       sum: 147,
     },
-
   ];
   const config = {
     data,
@@ -82,15 +70,11 @@ export default (props) => {
   };
 
   return (
-    <div style={{ width: '100vw' }}>
-      <div style={style.bgd} >
-        <TitleBox value='农机状态统计' />
-        <SquareBox>
-          <Column  {...config} />
-        </SquareBox>
-      </div>
-
+    <div>
+      <TitleBox value="农机状态统计" />
+      <SquareBox>
+        <Column {...config} />
+      </SquareBox>
     </div>
-
-  )
-}
+  );
+};

src/pages/MonitoringScreen/DateCommponetsBottomRight.jsx

@@ -1,20 +1,9 @@
-
-
-
-import SquareBox from '@/components/ScreenBox/SquareBox'
-import TitleBox from '@/components/ScreenBox/TitleBox'
+import SquareBox from '@/components/ScreenBox/SquareBox';
+import TitleBox from '@/components/ScreenBox/TitleBox';
 import { Pie, G2 } from '@ant-design/plots';
 // import ba from './a.png'
 
 export default (props) => {
-
-  const G = G2.getEngine('canvas');
-  const style = {
-    bgd: {
-      width: '30vw',
-      display: 'inline-block',
-    }
-  }
   const data = [
     {
       type: '收割机',
@@ -31,7 +20,7 @@ export default (props) => {
     {
       type: '其他',
       value: 70,
-    }
+    },
   ];
   const config = {
     color: ['#FB9900', '#355C9C', '#23E8AE', '#E63404'],
@@ -74,15 +63,11 @@ export default (props) => {
     ],
   };
   return (
-    <div style={{ width: '100vw' }}>
-      <div style={style.bgd} >
-        <TitleBox value='农机类型统计' />
-        <SquareBox>
-          <Pie  {...config} />
-        </SquareBox>
-      </div>
-
+    <div>
+      <TitleBox value="农机类型统计" />
+      <SquareBox>
+        <Pie {...config} />
+      </SquareBox>
     </div>
-
-  )
-}
+  );
+};

src/pages/MonitoringScreen/DateCommponetsLeft.jsx

@@ -1,19 +1,8 @@
-
-
-
-import SquareBox from '@/components/ScreenBox/SquareBox'
-import TitleBox from '@/components/ScreenBox/TitleBox'
+import SquareBox from '@/components/ScreenBox/SquareBox';
+import TitleBox from '@/components/ScreenBox/TitleBox';
 import { Bar } from '@ant-design/plots';
 
 export default (props) => {
-
-
-  const style = {
-    bgd: {
-      width: '25vw',
-      display: 'inline-block',
-    }
-  }
   const data = [
     {
       key: '收割机',
@@ -38,7 +27,6 @@ export default (props) => {
     color: ['l(0) 0:rgba(225,225,225,0.0) 1:#FB9900', 'l(0) 0:rgba(225,225,225,0.0) 1:#23E8AE', 'l(0) 0:rgba(225,225,225,0.0) 1:#E63404'],
     legend: {
       position: 'top-left',
-
     },
     statistic: {
       style: {
@@ -46,20 +34,16 @@ export default (props) => {
         fontWeight: 60,
         textAlign: 'center',
         textBaseline: 'middle',
-      }
-    }
+      },
+    },
   };
 
   return (
-    <div style={{ width: '100vw' }}>
-      <div style={style.bgd} >
-        <TitleBox value='农机类型统计' />
-        <SquareBox>
-          <Bar  {...config} />
-        </SquareBox>
-      </div>
-
+    <div>
+      <TitleBox value="农机类型统计" />
+      <SquareBox>
+        <Bar {...config} />
+      </SquareBox>
     </div>
-
-  )
-}
+  );
+};

src/pages/MonitoringScreen/hook.js

@@ -1,43 +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();
-  }, []);
-
-  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);
+
+    return elRef.current.removeEventListener('fullscreenchange', handleFullScreenChange);
   }, []);
 
-  return { style, isFullScreen, onFullScreen };
+  return { isFullScreen, toggleFullScreen };
 }

src/pages/MonitoringScreen/index.jsx

@@ -14,38 +14,50 @@ 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>
       }
     >
       <div
-        className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
-        style={style}
+        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={Styles['grail-container']}>
+          <div className={classNames(Styles['grail-container'], Styles['mg-tp-40'])}>
             <div className={Styles['grail-left']}>
-              <SquareBox>asdfasdf</SquareBox>
-            </div>
-            <div className={Styles['grail-content']}>
               <DateCommponetsLeft />
+              <div className={Styles['mg-tp-40']}>{/* 占位 */}</div>
               <DateCommponetsBottomLeft />
-              <DateCommponetsBottomRight />
+            </div>
+            <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
+              <DateCommponetsLeft />
             </div>
             <div className={Styles['grail-right']}>
-              <SquareBox>asdfasdf</SquareBox>
+              <DateCommponetsBottomRight />
             </div>
           </div>
-          <div className={Styles['grail-footer']}></div>
+          <div className={classNames(Styles['grail-footer'], Styles['mg-tp-40'])}></div>
         </div>
       </div>
     </PageHeaderWrapper>

src/pages/MonitoringScreen/style.less

@@ -39,10 +39,11 @@
   }
 }
 
-.demo {
-  font-size: 3em;
-  font-family: 'hyzlsJ';
-  background-image: linear-gradient(#3bd6e8, #0c49c6);
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
+.pd-lr-40 {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.mg-tp-40 {
+  margin-top: 40px;
 }

src/pages/document.ejs

@@ -23,7 +23,6 @@
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
     />
     <title>Ant Design Pro</title>
-    <link rel="stylesheet" href="./css/hyzlsJ-embed.css" />
     <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
   </head>
   <body>