feats

src/components/ScreenBox/TitleBox/style.less

   // 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

-
-
-
-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: '预约',
       NongType: '维修',
       sum: 147,
     },
-
   ];
   const config = {
     data,
     },
     color: ({ name }) => {
       if (name == '预约') {
-
         return `l(270) 0:rgba(225,225,225,0.0) 1:#F5CC5C`;
-
-
       }
       if (name == '作业') {
-
         return `l(270) 0:rgba(225,225,225,0.0) 1:#44F68B`;
-
-
       }
       if (name == '闲置') {
-
         return `l(270) 0:rgba(225,225,225,0.0) 1:#51D4FF`;
-
-
       }
       if (name == '离线') {
-
         return `l(270) 0:rgba(225,225,225,0.0) 1:#B8B2A9`;
-
-
       }
       if (name == '维修') {
-
         return `l(270) 0:rgba(225,225,225,0.0) 1:#F55226`;
-
-
       }
     },
     /** 设置间距 */
   };
 
   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

-
-
-
-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: '收割机',
     {
       type: '其他',
       value: 70,
-    }
+    },
   ];
   const config = {
     color: ['#FB9900', '#355C9C', '#23E8AE', '#E63404'],
     ],
   };
   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

-
-
-
-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 = [
     {
       year: '收割机',
     // color: [' #FB9900', '#23E8AE', '#E63404'],
     color: ({ type, year }) => {
       if (year == '收割机') {
-
         return `l(0) 0:rgba(225,225,225,0.0) 1:#FB9900`;
-
-
       }
       if (year == '播种机') {
-
         return `l(0) 0:rgba(225,225,225,0.0) 1:#23E8AE`;
-
-
       }
       if (year == '农药机') {
-
         return `l(0) 0:rgba(225,225,225,0.0) 1:#E63404`;
-
-
       }
     },
     barStyle: {
     },
     legend: {
       position: 'top-left',
-
     },
     statistic: {
       style: {
         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/index.jsx

           </div>
           <div className={classNames(Styles['grail-container'], Styles['mg-tp-40'])}>
             <div className={Styles['grail-left']}>
-              <SquareBox>asdfasdf</SquareBox>
+              <DateCommponetsLeft />
+              <div className={Styles['mg-tp-40']}>{/* 占位 */}</div>
+              <DateCommponetsBottomLeft />
             </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={classNames(Styles['grail-footer'], Styles['mg-tp-40'])}></div>

src/pages/document.ejs

       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>