=Antv

src/components/ScreenBox/TitleBox/style.less

@@ -4,6 +4,7 @@
   align-items: center;
   padding: 11px 11px 9px 11px;
   border-radius: 4px;
+
   box-shadow: 0px 0px 10px 0px #3d81f0 inset;
 
   .TitleBox-ListBox {

src/pages/MonitoringScreen/DateCommponets.jsx

@@ -1,45 +0,0 @@
-
-
-
-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/DateCommponetsBottomLeft.jsx

@@ -0,0 +1,121 @@
+
+
+
+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: 18,
+    },
+    {
+      name: '作业',
+      NongType: '作业.',
+      sum: 28,
+    },
+    {
+      name: '闲置',
+      NongType: '闲置.',
+      sum: 100,
+    },
+    {
+      name: '离线',
+      NongType: '离线',
+      sum: 181,
+    },
+    {
+      name: '维修',
+      NongType: '维修',
+      sum: 147,
+    },
+
+  ];
+  const config = {
+    data,
+    isGroup: true,
+    xField: 'NongType',
+    yField: 'sum',
+    seriesField: 'name',
+    color: ['#F5CC5C', '#44F68B', '#51D4FF', '#B8B2A9', '#F55226'],
+    minColumnWidth: 26,
+    columnStyle: {
+      // fill: 'l(270) 0:rgba(225,225,225,0.0) 1:#FB9900',
+    },
+    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`;
+
+
+      }
+    },
+    /** 设置间距 */
+    // marginRatio: 0.1,
+    label: {
+      // 'top', 'middle', 'bottom'
+      // 可配置附加的布局方法
+      layout: [
+        // 柱形图数据标签位置自动调整
+        {
+          // type: 'interval-adjust-position',
+        }, // 数据标签防遮挡
+        {
+          // type: 'interval-hide-overlap',
+        }, // 数据标签文颜色自动调整
+        {
+          // type: 'adjust-color',
+        },
+      ],
+    },
+  };
+
+  return (
+    <div style={{ width: '100vw' }}>
+      <div style={style.bgd} >
+        <TitleBox value='农机状态统计' />
+        <SquareBox>
+          <Column  {...config} />
+        </SquareBox>
+      </div>
+
+    </div>
+
+  )
+}

src/pages/MonitoringScreen/DateCommponetsBottomRight.jsx

@@ -0,0 +1,85 @@
+
+
+
+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: '收割机',
+      value: 27,
+    },
+    {
+      type: '播种机',
+      value: 25,
+    },
+    {
+      type: '农药机',
+      value: 18,
+    },
+    {
+      type: '其他',
+      value: 70,
+    }
+  ];
+  const config = {
+    color: ['#FB9900', '#355C9C', '#23E8AE', '#E63404'],
+    pieStyle: {
+      strokeOpacity: 0,
+      lineWidth: 0,
+    },
+    statistic: {
+      title: false,
+      content: {
+        style: {
+          whiteSpace: 'pre-wrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        },
+        content: ' ',
+      },
+    },
+    appendPadding: 10,
+    data,
+    angleField: 'value',
+    colorField: 'type',
+    innerRadius: 0.8,
+    radius: 0.75,
+    label: {
+      type: 'spider',
+      labelHeight: 28,
+      content: '{name}\n{percentage}',
+    },
+    interactions: [
+      {
+        type: 'element-selected',
+      },
+      {
+        type: 'element-active',
+      },
+    ],
+  };
+  return (
+    <div style={{ width: '100vw' }}>
+      <div style={style.bgd} >
+        <TitleBox value='农机类型统计' />
+        <SquareBox>
+          <Pie  {...config} />
+        </SquareBox>
+      </div>
+
+    </div>
+
+  )
+}

src/pages/MonitoringScreen/DateCommponetsLeft.jsx

@@ -0,0 +1,92 @@
+
+
+
+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: '收割机',
+      value: 200,
+    },
+    {
+      year: '播种机',
+      value: 150,
+    },
+    {
+      year: '农药机',
+      value: 50,
+    },
+  ];
+
+  const config = {
+    maxBarWidth: 20,
+    data,
+    xField: 'value',
+    yField: 'year',
+    seriesField: '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: {
+      // fill: `l(0) 0:rgba(225,225,225,0.0) 1:#FB9900`,
+    },
+    legend: {
+      position: 'top-left',
+
+    },
+    statistic: {
+      style: {
+        // fill: '#FB9900',
+        // fill: '#23E8AE',
+        // fill: '#E63404',
+        fontSize: 10,
+        fontWeight: 60,
+        textAlign: 'center',
+        textBaseline: 'middle',
+      }
+    }
+  };
+
+  return (
+    <div style={{ width: '100vw' }}>
+      <div style={style.bgd} >
+        <TitleBox value='农机类型统计' />
+        <SquareBox>
+          <Bar  {...config} />
+        </SquareBox>
+      </div>
+
+    </div>
+
+  )
+}

src/pages/MonitoringScreen/index.jsx

@@ -6,7 +6,9 @@ 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 DateCommponetsLeft from './DateCommponetsLeft';
+import DateCommponetsBottomRight from './DateCommponetsBottomRight';
+import DateCommponetsBottomLeft from './DateCommponetsBottomLeft';
 import Styles from './style.less';
 import SquareBox from '@/components/ScreenBox/SquareBox';
 
@@ -29,13 +31,15 @@ export default (props) => {
       >
         <div className={Styles['grail-layout']}>
           <div className={Styles['grail-header']}>
-            <SquareBox>asdfasdf</SquareBox>
+            {/* <SquareBox>asdfasdf</SquareBox> */}
           </div>
           <div className={Styles['grail-container']}>
             <div className={Styles['grail-left']}></div>
-            <div className={Styles['grail-content']}>
+            <div className={Styles['grail-content']} >
 
-              <DateCommponets />
+              <DateCommponetsLeft />
+              <DateCommponetsBottomRight />
+              <DateCommponetsBottomLeft />
             </div>
             <div className={Styles['grail-right']}></div>
           </div>