Merge branch 'master' of http://git.ycjcjy.com/nanyang/machinery-admin

src/components/ScreenBox/ScreenHeader/index.jsx

@@ -0,0 +1,11 @@
+import Styles from './style.less';
+
+export default () => {
+  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>
+  );
+};

src/components/ScreenBox/ScreenHeader/style.less

@@ -0,0 +1,12 @@
+.screen-header-box {
+  display: flex;
+
+  .screen-header-left,
+  .screen-header-right {
+    flex: 1;
+  }
+
+  .screen-header-content {
+    flex: 6;
+  }
+}

src/components/ScreenBox/SquareBox/index.jsx

@@ -5,13 +5,13 @@ export default (props) => {
 
 
   return (
-    <div className="win">
+    <div className="SquareBox-box">
       <div className="border_corner border_corner_left_top" />
       <div className="border_corner border_corner_right_top" />
       <div className="border_corner border_corner_left_bottom" />
       <div className="border_corner border_corner_right_bottom" />
       {/* 内容 */}
-      <div className="main">
+      <div className="SquareBox-body">
         {props.children}
       </div>
     </div>

src/components/ScreenBox/SquareBox/style.less

@@ -1,12 +1,10 @@
-.win {
+.SquareBox-box {
   position: relative;
-  display: inline-block;
-  margin: 20px;
 }
-.main {
+.SquareBox-body {
+  padding: 20px;
   color: #fff;
-  border: 1px solid rgba(61, 129, 240, 0.5);
-  border-radius: 4px;
+  border: 2px solid rgba(61, 129, 240, 0.5);
 }
 .border_corner {
   position: absolute;

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,45 @@
+
+
+
+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 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  >
+      <TitleBox value='农机类型统计' />
+      <SquareBox>
+        <Bar  {...config} />
+      </SquareBox>
+    </div>
+  )
+}

src/pages/MonitoringScreen/index.jsx

@@ -6,7 +6,10 @@ 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';
+import SquareBox from '@/components/ScreenBox/SquareBox';
+import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 
 export default (props) => {
   const { style, isFullScreen, onFullScreen } = useFullScreen();
@@ -24,11 +27,19 @@ export default (props) => {
         style={style}
       >
         <div className={Styles['grail-layout']}>
-          <div className={Styles['grail-header']}></div>
+          <div className={Styles['grail-header']}>
+            <ScreenHeader weather="多云 21-28 °C" />
+          </div>
           <div className={Styles['grail-container']}>
-            <div className={Styles['grail-left']}></div>
-            <div className={Styles['grail-content']}></div>
-            <div className={Styles['grail-right']}></div>
+            <div className={Styles['grail-left']}>
+              <SquareBox>asdfasdf</SquareBox>
+            </div>
+            <div className={Styles['grail-content']}>
+              <DateCommponets />
+            </div>
+            <div className={Styles['grail-right']}>
+              <SquareBox>asdfasdf</SquareBox>
+            </div>
           </div>
           <div className={Styles['grail-footer']}></div>
         </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>
   )
-}
+}