feats

src/pages/MonitoringScreen/index.jsx

@@ -7,21 +7,21 @@ import { FullscreenOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 import GeoMap from '@/components/GeoMap';
+import StatisCard from '@/components/ScreenBox/StatisCard';
+import SquareBox from '@/components/ScreenBox/SquareBox';
 import { useFullScreen } from './hook';
 import MachineryType from './components/MachineryType';
 import MachineryStatus from './components/MachineryStatus';
-import DateCommponetsBottomRight from './DateCommponetsBottomRight';
-import DateCommponetsBottomLeft from './DateCommponetsBottomLeft';
 
-import Styles from './style.less';
-import StatisCard from '@/components/ScreenBox/StatisCard';
 import WorkArea from './components/WorkArea';
 import List from './components/List';
 import ColorFont from './components/ColorFont';
 import WorkData from './components/WorkData';
+import Styles from './style.less';
+
 export default (props) => {
   const screenRef = useRef();
-  const [height, setHeight] = useState('1080px');
+  const [height, setHeight] = useState('700px');
   const { isFullScreen, toggleFullScreen } = useFullScreen(screenRef);
 
   const [machineryTypeData, setMachineryTypeData] = useState([
@@ -71,7 +71,7 @@ export default (props) => {
           <div className={Styles['grail-header']}>
             <ScreenHeader weather="多云 21-28 °C" />
           </div>
-          <div className={classNames(Styles['grail-container'], Styles['pd-tp-40'])}>
+          <div className={classNames(Styles['grail-container'], Styles['pd-tp-30'])}>
             <div className={Styles['grail-left']}>
               <div className="flex flex-column full-height">
                 <div className="flex-0" style={{ height: '250px' }}>
@@ -102,43 +102,45 @@ export default (props) => {
               </div>
             </div>
           </div>
-          <div className={classNames(Styles['grail-footer'], Styles['pd-tp-40'])}>
-            <div className="flex">
-              <div className="flex-1">
-                <List title="预约订单">
-                  <div>
-                    <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
-                    <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
-                    <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
-                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                    接到了此订单！正在赶往目的地！
-                  </div>
-                </List>
-              </div>
-              <div className={classNames('flex-0', Styles['footer-middle'])} />
-              <div className="flex-1">
-                <List title="作业订单" color="green">
-                  <div>
-                    <ColorFont color="#44F68B">[收割机001]</ColorFont>
-                    32s前接到了一个订单，距离目的地还有3.2公里，请农户耐心等待！
-                  </div>
-                  <div>
-                    <ColorFont color="#44F68B">[播种机008]</ColorFont>{' '}
-                    2分钟前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
-                  </div>
-                  <div>
-                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                    2个小时前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
-                  </div>
-                </List>
+          <div className={classNames(Styles['grail-footer'], Styles['pd-tp-30'])}>
+            <SquareBox>
+              <div className="flex">
+                <div className="flex-1">
+                  <List title="预约订单">
+                    <div>
+                      <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
+                      <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
+                    </div>
+                    <div>
+                      <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
+                      <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
+                    </div>
+                    <div>
+                      <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
+                      <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
+                      接到了此订单！正在赶往目的地！
+                    </div>
+                  </List>
+                </div>
+                <div className={classNames('flex-0', Styles['footer-middle'])} />
+                <div className="flex-1">
+                  <List title="作业订单" color="green">
+                    <div>
+                      <ColorFont color="#44F68B">[收割机001]</ColorFont>
+                      32s前接到了一个订单，距离目的地还有3.2公里，请农户耐心等待！
+                    </div>
+                    <div>
+                      <ColorFont color="#44F68B">[播种机008]</ColorFont>{' '}
+                      2分钟前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
+                    </div>
+                    <div>
+                      <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
+                      2个小时前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
+                    </div>
+                  </List>
+                </div>
               </div>
-            </div>
+            </SquareBox>
           </div>
         </div>
       </div>

src/pages/MonitoringScreen/style.less

@@ -2,6 +2,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  overflow-y: auto;
 
   background-color: #021222;
   background-image: url('~@/assets/images/screen/bg.png');
@@ -73,6 +74,6 @@
   padding-left: 40px;
 }
 
-.pd-tp-40 {
-  padding-top: 40px;
+.pd-tp-30 {
+  padding-top: 30px;
 }