.

config/routes.js

@@ -24,24 +24,6 @@ export default [
     icon: 'smile',
     component: './Welcome',
   },
-  {
-    path: '/admin',
-    name: 'admin',
-    icon: 'crown',
-    access: 'canAdmin',
-    component: './Admin',
-    routes: [
-      {
-        path: '/admin/sub-page',
-        name: 'sub-page',
-        icon: 'smile',
-        component: './Welcome',
-      },
-      {
-        component: './404',
-      },
-    ],
-  },
   {
     path: '/MonitoringScreen',
     layout: false,

src/components/Bar/index.jsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+
+import ECharts from '@/components/ECharts';
+
+const labelOption = {
+  show: true,
+  formatter: '{c}',
+  position: 'insideTop',
+  distance: -20,
+  fontSize: 16,
+  rich: {
+    name: {}
+  }
+};
+
+export default (props) => {
+  const { opt, title, h } = props
+  const titleList = opt.map(item => { return { name: item.title } })
+  const seriesList = opt.map(item => {
+    return {
+      name: item.title,
+      type: 'bar',
+      label: labelOption,
+      emphasis: {
+        focus: 'series'
+      },
+      data: item.valueList
+    }
+  })
+  const defaultOpt = {
+    title: {
+      text: title,
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      extraCssText: 'height:100px;'
+    },
+    legend: {
+      top: 'bottom',
+      data: titleList,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: { show: false },
+        data: opt[0].keyList
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value'
+      }
+    ],
+    series: seriesList
+  }
+  const option = useMemo(() => defaultOpt, []);
+  return <div style={{ height: h, width: '100%' }}> <ECharts option={option} /></div>;
+};

src/components/Pie/index.jsx

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+
+import ECharts from '@/components/ECharts';
+;
+export default (props) => {
+  const { opt } = props
+  const option = {
+    title: {
+      text: '农机作业数统计',
+      left: 'center'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      top: '5%'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['45%', '65%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: false,
+          position: 'center',
+          formatter: '{b}\n{d}%'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: '18',
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: opt
+      }
+    ]
+  }
+  return <div style={{ height: '300px', width: '100%' }}> <ECharts option={option} /></div>;
+}

src/components/PieArea/index.jsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react';
+import deepCopy from '@/utils/deepCopy';
+import ECharts from '@/components/ECharts';
+
+const defaultOpt = {
+  title: {
+    text: '农机作业量面积统计',
+    left: 'center'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'right',
+    bottom: '5%',
+  },
+  toolbox: {},
+  series: [
+    {
+      type: 'pie',
+      radius: ['40%', '55%'],
+      center: ['40%', '50%'],
+      selectedMode: 'single',
+      avoidLabelOverlap: false,
+      label: {
+        color: '#000',
+        formatter: '{b}\n{d}%'
+      },
+    }
+  ]
+}
+export default (props) => {
+  const { opt } = props
+  const option = useMemo(() => deepCopy(defaultOpt), []);
+  option.series[0].data = opt;
+  (option.series[0].data[0] || {}).selected = true;
+  return <div style={{ height: '300px', width: '100%' }}> <ECharts option={option} /></div>;
+}

src/components/WelcomeCard/index.jsx

@@ -0,0 +1,23 @@
+import { Card, Image } from "antd"
+import up from '@/assets/welcome/up.png'
+import down from '@/assets/welcome/down.png'
+import './style.less'
+
+const WCard = (props) => {
+  const { value } = props
+  //隔三位加一个逗号
+  function toThousands(num) {
+    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+  }
+  return (
+    <div className='wcard'>
+      <img src={value.icon} className='wImg' />
+      <div className='wright'>
+        <div className='title'>{value.title}</div>
+        <div className='value'>{toThousands(value.value)}</div>
+        <div className='percentage'><img className='wicon' src={value.percentage > 0 ? up : down} />同比上月&nbsp;&nbsp;{Math.abs(value.percentage)}%</div>
+      </div>
+    </div>
+  )
+}
+export default WCard

src/components/WelcomeCard/style.less

@@ -0,0 +1,28 @@
+.wcard{
+  display: flex;
+  align-items: center;
+  padding: 16px 32px;
+  background: #fff;
+  width: 320px;
+  .wImg{
+    width: 65px;
+    height: 65px;
+    margin-right: 64px;
+  }
+  .wright{
+    text-align: right;
+    .title{}
+    .value{
+      color:rgb(26, 182, 202);
+      font-size: 30px;
+      margin: 16px 0;
+    }
+    .percentage{
+      color: gray;
+      .wicon{
+        width: 20px;
+        height: 20px;
+      }
+    }    
+  }
+}

src/global.less

@@ -139,7 +139,6 @@ ol {
   color: #fff;
   // background: rgba(8, 40, 90, 0.4);
   background: rgba(3, 3, 3, 0.3);
-
   border: 2px solid rgba(61, 129, 240, 0.5);
 }
 .border_corner-carsMarker {

src/pages/Admin.jsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
-import { Card, Typography, Alert } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { useIntl } from 'umi';
-
-const Admin = () => {
-  const intl = useIntl();
-  return (
-    <PageHeaderWrapper
-      content={intl.formatMessage({
-        id: 'pages.admin.subPage.title',
-        defaultMessage: 'This page can only be viewed by admin',
-      })}
-    >
-      <Card>
-        <Alert
-          message={intl.formatMessage({
-            id: 'pages.welcome.alertMessage',
-            defaultMessage: 'Faster and stronger heavy-duty components have been released.',
-          })}
-          type="success"
-          showIcon
-          banner
-          style={{
-            margin: -12,
-            marginBottom: 48,
-          }}
-        />
-        <Typography.Title
-          level={2}
-          style={{
-            textAlign: 'center',
-          }}
-        >
-          <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
-        </Typography.Title>
-      </Card>
-      <p
-        style={{
-          textAlign: 'center',
-          marginTop: 24,
-        }}
-      >
-        Want to add more pages? Please refer to{' '}
-        <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
-          use block
-        </a>
-        。
-      </p>
-    </PageHeaderWrapper>
-  );
-};
-
-export default Admin;

src/pages/MonitoringScreen/components/WorkData.jsx

@@ -24,11 +24,6 @@ const defaultOpt = {
         borderColor: '#041B38',
         borderWidth: 2,
       },
-      // itemStyle: {
-      //   borderRadius: 10,
-      //   borderColor: '#fff',
-      //   borderWidth: 1,
-      // },
       label: {
         show: false,
         position: 'center',

src/pages/Welcome.jsx

@@ -1,64 +1,115 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Alert, Typography } from 'antd';
-import { useIntl, FormattedMessage } from 'umi';
-import styles from './Welcome.less';
-
-const CodePreview = ({ children }) => (
-  <pre className={styles.pre}>
-    <code>
-      66666
-      <Typography.Text copyable>{children}</Typography.Text>
-    </code>
-  </pre>
-);
+import { Card, Row, Col } from 'antd';
+import { useIntl } from 'umi';
+import WCard from '@/components/WelcomeCard'
+import userImg from '@/assets/welcome/user.png'
+import cooperative from '@/assets/welcome/cooperative.png'
+import machinery from '@/assets/welcome/machinery.png'
+import order from '@/assets/welcome/order.png'
+import Bar from '@/components/Bar/index.jsx';
+import WorkArea from './MonitoringScreen/components/WorkArea';
+import WorkData from './MonitoringScreen/components/WorkData';
+import MachineryStatus from './MonitoringScreen/components/MachineryStatus';
+import './Welcome.less'
+import Pie from '@/components/Pie';
+import PieArea from '@/components/PieArea';
 
 const Welcome = () => {
   const intl = useIntl();
+  const topData = [
+    {
+      icon: userImg,
+      title: '注册用户',
+      value: 580239,
+      percentage: 32.6
+    },
+    {
+      icon: cooperative,
+      title: '合作社数',
+      value: 2017,
+      percentage: 5.6
+    },
+    {
+      icon: machinery,
+      title: '农用机数',
+      value: 2000,
+      percentage: 42.6
+    },
+    {
+      icon: order,
+      title: '订单数',
+      value: 2075994,
+      percentage: -1.6
+    },
+  ]
+  const centerData = [
+    {
+      title: '预约订单',
+      keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      valueList: [320, 332, 301, 334, 390, 88, 320, 332, 301, 334, 390, 88]
+    },
+    {
+      title: '完成订单',
+      keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      valueList: [220, 182, 191, 234, 290, 256, 220, 182, 191, 234, 290, 356]
+    }
+  ]
+
+  const [machineryStatus, setMachineryStatus] = useState([
+    {
+      keyList: ['预约', '作业', '闲置', '离线', '维修'],
+      valueList: [350, 900, 650, 180, 380],
+    }
+  ])
+
+  const [workData, setWorkData] = useState([
+    { name: '收割机', value: 35 },
+    { name: '播种机', value: 35 },
+    { name: '农药机', value: 30 },
+    { name: '其他', value: 180 },
+  ]);
+  const [workAreaData, setWorkAreaData] = useState([
+    { name: '收割机', value: 350 },
+    { name: '播种机', value: 900 },
+    { name: '农药机', value: 650 },
+    { name: '其他', value: 180 },
+  ]);
   return (
     <PageContainer>
-      <Card>
-        <Alert
-          message={intl.formatMessage({
-            id: 'pages.welcome.alertMessage',
-            defaultMessage: 'Faster and stronger heavy-duty components have been released.',
-          })}
-          type="success"
-          showIcon
-          banner
-          style={{
-            margin: -12,
-            marginBottom: 24,
-          }}
-        />
-        <Typography.Text strong>
-          <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="Advanced Form" />{' '}
-          <a
-            href="https://procomponents.ant.design/components/table"
-            rel="noopener noreferrer"
-            target="__blank"
-          >
-            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
-          </a>
-        </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
-        <Typography.Text
-          strong
-          style={{
-            marginBottom: 12,
-          }}
-        >
-          <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="Advanced layout" />{' '}
-          <a
-            href="https://procomponents.ant.design/components/layout"
-            rel="noopener noreferrer"
-            target="__blank"
-          >
-            <FormattedMessage id="pages.welcome.link" defaultMessage="Welcome" />
-          </a>
-        </Typography.Text>
-        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
-      </Card>
+      <div className="welcome">
+        <div className="head">
+          <Row justify='space-between'>
+            <Col flex='320px'>
+              <WCard value={topData[0]} />
+            </Col>
+            <Col flex='320px'>
+              <WCard value={topData[1]} />
+            </Col>
+            <Col flex='320px'>
+              <WCard value={topData[2]} />
+            </Col>
+            <Col flex='320px'>
+              <WCard value={topData[3]} />
+            </Col>
+          </Row>
+        </div>
+        <Card style={{ marginTop: '32px' }}>
+          <Bar h='500px' title='本年度预约订单数据概览' opt={centerData} />
+        </Card>
+
+        <div className='flex bottom'>
+          <Card className='flex-1 card'>
+            <Bar h='300px' title='农机状态统计' opt={machineryStatus} />
+          </Card>
+          <Card className='flex-1 card'>
+            <PieArea opt={workAreaData} />
+          </Card>
+          <Card className='flex-1 card'>
+            <Pie opt={workData} />
+          </Card>
+        </div>
+      </div>
     </PageContainer>
   );
 };

src/pages/Welcome.less

@@ -1,8 +1,21 @@
-@import (reference) '~antd/es/style/themes/index';
-
-.pre {
-  margin: 12px 0;
-  padding: 12px 20px;
-  background: @input-bg;
-  box-shadow: @card-shadow;
+.welcome{
+  .apache{
+    margin-top: 32px;
+  }
+  .screen-page {
+    padding-bottom: 30px;  
+    background-image: url('~@/assets/images/screen/bg.png');  
+  }
+  
+  .pd-lr-40 {
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+  .bottom{
+    margin-top: 32px;
+    .card+.card{
+      margin-left: 32px;
+    }
+  }
+  
 }