giyhu

src/components/ScreenBox/TitleBox/index.jsx

@@ -6,8 +6,8 @@ export default (props) => {
   const { value } = props
   return (
     <div className='TitleBox'>
-      <div className='TitleBox-ListBox' />
-      <span>{value}</span>
+      <span className='TitleBox-ListBox' />
+      <span className='TitleBox-ListBox-value'>{value}</span>
     </div>
   )
 }

src/components/ScreenBox/TitleBox/style.less

@@ -1,18 +1,19 @@
 .TitleBox {
-  display: flex;
+  // width: 163px;
+  display: inline-block;
   align-items: center;
-  width: 163px;
-  padding: 11px 9px 9px 11px;
+  padding: 11px 11px 9px 11px;
   border-radius: 4px;
   box-shadow: 0px 0px 10px 0px #3d81f0 inset;
 
   .TitleBox-ListBox {
+    display: inline-block;
     width: 13px;
     height: 13px;
     margin-right: 10px;
     background: linear-gradient(0deg, #0c49c6, #3bd6e8);
   }
-  > span {
+  .TitleBox-ListBox-value {
     color: transparent;
     font-weight: 800;
     font-size: 17px;

src/pages/MonitoringScreen/DateCommponets.jsx

@@ -0,0 +1,55 @@
+
+
+
+import SquareBox from '@/components/ScreenBox/SquareBox'
+import TitleBox from '@/components/ScreenBox/TitleBox'
+import { Bar } from '@ant-design/plots';
+// import ba from './a.png'
+
+export default (props) => {
+
+
+  const style = {
+    bgd: {
+      color: 'rgba(0,0,0,.25)',
+      height: '100vh',
+      // backgroundImage: `url(${ba})`,
+      backgroundSize: '100%,100%',
+      padding: '5em 10em'
+    }
+  }
+  const data = [
+    {
+      year: '收割机',
+      value: 200,
+    },
+    {
+      year: '播种机',
+      value: 150,
+    },
+    {
+      year: '农药机',
+      value: 50,
+    },
+  ];
+  const config = {
+    data,
+    xField: 'value',
+    yField: 'year',
+    seriesField: 'year',
+
+    legend: {
+      position: 'top-left',
+    },
+    color: [' #FB9900', '#23E8AE', '#E63404'],
+  };
+
+  return (
+    <div style={style.bgd} >
+      <TitleBox value='农机类型统计' />
+      <SquareBox>
+        <Bar  {...config} />
+      </SquareBox>
+    </div>
+  )
+}

src/pages/MonitoringScreen/index.jsx

@@ -6,6 +6,7 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { FullscreenOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import { useFullScreen } from './hook';
+import DateCommponets from './DateCommponets';
 import Styles from './style.less';
 
 export default (props) => {
@@ -19,6 +20,8 @@ export default (props) => {
         </Button>
       }
     >
+
+
       <div
         className={classNames(Styles['screen-page'], { [Styles['full-screen']]: isFullScreen })}
         style={style}
@@ -27,7 +30,10 @@ export default (props) => {
           <div className={Styles['grail-header']}></div>
           <div className={Styles['grail-container']}>
             <div className={Styles['grail-left']}></div>
-            <div className={Styles['grail-content']}></div>
+            <div className={Styles['grail-content']}>
+
+              <DateCommponets />
+            </div>
             <div className={Styles['grail-right']}></div>
           </div>
           <div className={Styles['grail-footer']}></div>

src/pages/SystemManagement/UserRights/index.jsx

@@ -1,54 +1,7 @@
 
-
-
-import SquareBox from '@/components/ScreenBox/SquareBox'
-import TitleBox from '@/components/ScreenBox/TitleBox'
-import { Bar } from '@ant-design/plots';
-// import ba from './a.png'
-
 export default (props) => {
 
-
-  const style = {
-    bgd: {
-      color: 'rgba(0,0,0,.25)',
-      height: '100vh',
-      // backgroundImage: `url(${ba})`,
-      backgroundSize: '100%,100%',
-      padding: '5em 10em'
-    }
-  }
-  const data = [
-    {
-      year: '收割机',
-      value: 200,
-    },
-    {
-      year: '播种机',
-      value: 150,
-    },
-    {
-      year: '农药机',
-      value: 50,
-    },
-  ];
-  const config = {
-    data,
-    xField: 'value',
-    yField: 'year',
-    seriesField: 'year',
-    legend: {
-      position: 'top-left',
-    },
-    color: [' #FB9900', '#23E8AE', '#E63404'],
-  };
-
   return (
-    <div style={style.bgd} >
-      <TitleBox value='农机类型统计' />
-      <SquareBox>
-        <Bar  {...config} />
-      </SquareBox>
-    </div>
+    <div>角色权限</div>
   )
-}
+}