111

config/config.js

@@ -8,7 +8,8 @@ const { REACT_APP_ENV } = process.env;
 
 export default defineConfig({
   define: {
-    API_BASE: 'http://machine.njyunzhi.com',
+    // API_BASE: 'http://machine.njyunzhi.com',
+    API_BASE: 'http://192.168.89.147',
   },
   hash: true,
   history: {

config/proxy.js

@@ -11,7 +11,7 @@ export default {
     // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
     '/api/': {
       // 要代理的地址
-      target: 'http://127.0.0.1:7080',
+      target: 'http://192.168.89.147:7080',
       // target: 'http://192.168.89.76:7080',
       // target: 'http://machine.njyunzhi.com',
       // 配置了这个可以从 http 代理到 https

src/components/Bar/index copy.jsx

@@ -0,0 +1,64 @@
+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 colorList = opt.map(item => { return item.color })
+  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;'
+    },
+    color: colorList,
+    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/Bar/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import ECharts from '@/components/ECharts';
 
@@ -9,56 +9,132 @@ const labelOption = {
   distance: -20,
   fontSize: 16,
   rich: {
-    name: {}
-  }
+    name: {},
+  },
 };
 
 export default (props) => {
-  const { opt, title, h } = props
-  const titleList = opt.map(item => { return { name: item.title } })
-  const colorList = opt.map(item => { return item.color })
-  const seriesList = opt.map(item => {
-    return {
-      name: item.title,
-      type: 'bar',
-      label: labelOption,
-      emphasis: {
-        focus: 'series'
+  const { opt, optL, title, h } = props;
+  // console.log(optL);
+  // console.log(opt);
+  const dataL = [];
+  opt.forEach((it, ind) => {
+    optL.forEach((its) => {
+      if (its.name == it.name) {
+        dataL.push(its.value);
+        // dataL.push({
+        // name: it.name,
+        // value: its.value,
+        // });
+      }
+    });
+  });
+  const dataLs = useMemo(() => dataL, [dataL]);
+
+  // 亩
+  const dataX = opt.map((it) => it.name);
+  const dataVal = opt.map((it) => it.value);
+  // 台
+  const colors = ['#E94F05', '#5470C6', '#91CC75'];
+  const option = useMemo(
+    () => ({
+      color: colors,
+      title: {
+        text: title,
+        left: 'center',
       },
-      data: item.valueList
-    }
-  })
-  const defaultOpt = {
-    title: {
-      text: title,
-      left: 'center',
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+        },
+        extraCssText: 'width:auto;height:auto',
       },
-      extraCssText: 'height:100px;'
-    },
-    color: colorList,
-    legend: {
-      top: 'bottom',
-      data: titleList,
-    },
-    xAxis: [
-      {
+      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>;
+        data: dataX,
+        axisLabel: { interval: 0, rotate: 40 },
+        name: '合作社',
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '台',
+          position: 'left',
+          alignTicks: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: colors[0],
+            },
+          },
+          axisLabel: {
+            formatter: '{value} 台',
+          },
+        },
+        {
+          type: 'value',
+          name: '亩',
+          position: 'right',
+          alignTicks: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: colors[1],
+            },
+          },
+          axisLabel: {
+            formatter: '{value} 亩',
+          },
+        },
+        // {
+        //   type: 'value',
+        //   name: '流量',
+        //   position: 'right',
+        //   alignTicks: true,
+        //   axisLine: {
+        //     show: true,
+        //     lineStyle: {
+        //       color: colors[2],
+        //     },
+        //   },
+        // axisLabel: {
+        //   formatter: '{value} ',
+        // },
+        // },
+      ],
+      dataZoom: {
+        show: true,
+        start: 0,
+        end: 100,
+      },
+      grid: {
+        height: '55%',
+      },
+      series: [
+        {
+          name: '设备',
+          data: dataLs,
+          type: 'line',
+        },
+        {
+          name: '作业',
+          data: dataVal,
+          type: 'bar',
+          yAxisIndex: 1,
+        },
+        // {
+        //   data: dataVal,
+        //   type: 'bar',
+        //   yAxisIndex: 2,
+        // },
+      ],
+    }),
+    [dataLs, dataVal, dataX],
+  );
+  return (
+    <div style={{ height: h, width: '100%' }}>
+      <ECharts option={option} />
+    </div>
+  );
 };

src/components/BarPerson/index.jsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useMemo, useState } 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, optP, title, h } = props;
+  const dataL = [];
+  opt.forEach((it, ind) => {
+    optP.forEach((its) => {
+      if (its.name == it.name) {
+        dataL.push(its.value);
+        // dataL.push({
+        // name: it.name,
+        // value: its.value,
+        // });
+      }
+    });
+  });
+
+  const dataPerson = useMemo(() => dataL, [dataL]);
+
+  // 亩
+  const dataX = opt.map((it) => it.name);
+  const dataVal = opt.map((it) => it.value);
+  // 人
+  const colors = ['#E94F05', '#5470C6', '#91CC75'];
+
+  const option = useMemo(
+    () => ({
+      color: colors,
+      title: {
+        text: title,
+        left: 'center',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+        },
+        extraCssText: 'width:auto;height:auto',
+      },
+      xAxis: {
+        type: 'category',
+        data: dataX,
+        axisLabel: { interval: 0, rotate: 40 },
+        name: '合作社',
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '人',
+          position: 'left',
+          alignTicks: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: colors[0],
+            },
+          },
+          axisLabel: {
+            formatter: '{value} 人',
+          },
+        },
+        {
+          type: 'value',
+          name: '亩',
+          position: 'right',
+          alignTicks: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: colors[1],
+            },
+          },
+          axisLabel: {
+            formatter: '{value} 亩',
+          },
+        },
+        // {
+        //   type: 'value',
+        //   name: '流量',
+        //   position: 'right',
+        //   alignTicks: true,
+        //   axisLine: {
+        //     show: true,
+        //     lineStyle: {
+        //       color: colors[2],
+        //     },
+        //   },
+        // axisLabel: {
+        //   formatter: '{value} ',
+        // },
+        // },
+      ],
+      dataZoom: {
+        show: true,
+        start: 0,
+        end: 100,
+      },
+      grid: {
+        height: '55%',
+      },
+      series: [
+        {
+          name: '人',
+          data: dataPerson,
+          type: 'line',
+          showBackground: true,
+        },
+        {
+          name: '作业',
+          data: dataVal,
+          type: 'bar',
+          yAxisIndex: 1,
+          showBackground: true,
+          backgroundStyle: {
+            color: '#FFFF',
+          },
+        },
+        // {
+        //   data: dataVal,
+        //   type: 'bar',
+        //   yAxisIndex: 2,
+        //   showBackground: true,
+        //   backgroundStyle: {
+        //     color: '#EE6666',
+        //   },
+        // },
+      ],
+    }),
+    [dataPerson, dataVal, dataX],
+  );
+  return (
+    <div style={{ height: h, width: '100%' }}>
+      <ECharts option={option} />
+    </div>
+  );
+};

src/components/ECharts/index.jsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 import * as echarts from 'echarts/core';
 // 引入图表，图表后缀都为 Chart
-import { BarChart, PieChart } from 'echarts/charts';
+import { BarChart, PieChart, LineChart } from 'echarts/charts';
 // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
 import {
   TitleComponent,
@@ -15,6 +15,7 @@ import {
   TransformComponent,
   LegendComponent,
   ToolboxComponent,
+  DataZoomComponent,
 } from 'echarts/components';
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -35,6 +36,8 @@ echarts.use([
   SVGRenderer,
   LegendComponent,
   ToolboxComponent,
+  DataZoomComponent,
+  LineChart,
 ]);
 
 import Styles from './style.less';

src/components/WelcomeCard/index copy.jsx

@@ -0,0 +1,30 @@
+import up from '@/assets/welcome/up.png';
+import down from '@/assets/welcome/down.png';
+import './style.less';
+
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const WCard = (props) => {
+  const { value } = props;
+  //隔三位加一个逗号
+  function toThousands(num) {
+    return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+  }
+  const MyIcon = createFromIconfontCN({
+    scriptUrl: '//at.alicdn.com/t/font_2904679_h2r1om69sid.js', // 在 iconfont.cn 上生成
+  });
+  return (
+    <div className="wcard">
+      <MyIcon type={value.icon} className="wImg" style={{ color: value.color }} />
+      <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/index.jsx

@@ -1,13 +1,11 @@
-import up from '@/assets/welcome/up.png'
-import down from '@/assets/welcome/down.png'
-import './style.less'
-
+import up from '@/assets/welcome/up.png';
+import down from '@/assets/welcome/down.png';
+import './style.less';
 
 import { createFromIconfontCN } from '@ant-design/icons';
 
-
-const WCard = (props) => {
-  const { value } = props
+const WCard = ({ value }) => {
+  // const {  } = props;
   //隔三位加一个逗号
   function toThousands(num) {
     return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
@@ -16,14 +14,14 @@ const WCard = (props) => {
     scriptUrl: '//at.alicdn.com/t/font_2904679_h2r1om69sid.js', // 在 iconfont.cn 上生成
   });
   return (
-    <div className='wcard'>
-      <MyIcon type={value.icon} className='wImg' style={{ color: value.color }} />
-      <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 className="wcard">
+      <MyIcon type={value?.icon || ''} className="wImg" style={{ color: value?.color || '' }} />
+      <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
+  );
+};
+export default WCard;

src/components/WelcomeCard/style.less

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

src/pages/Welcome copy.jsx

@@ -0,0 +1,169 @@
+import React, { useState, useRef } from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import { Card, Row, Col } from 'antd';
+import { useIntl } from 'umi';
+import WCard from '@/components/WelcomeCard'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper';
+import 'swiper/css';
+import Bar from '@/components/Bar/index.jsx';
+import Pie from '@/components/Pie';
+import PieArea from '@/components/PieArea';
+import { history } from 'umi';
+import { getDispatchList } from '@/services/dispatch'
+import './Welcome.less'
+import { useEffect } from 'react';
+
+const Welcome = () => {
+  const intl = useIntl();
+  const topData = [
+    {
+      icon: 'icon-icon',
+      color: '#1cbbb4',
+      title: '注册用户',
+      value: 580239,
+      percentage: 32.6
+    },
+    {
+      icon: 'icon-show_gongsiguanli_fill',
+      color: '#8dc63f',
+      title: '合作社数',
+      value: 2017,
+      percentage: 5.6
+    },
+    {
+      icon: 'icon-tuolaji',
+      color: '#a5673f',
+      title: '农用机数',
+      value: 2000,
+      percentage: 42.6
+    },
+    {
+      icon: 'icon-dingdanguanli',
+      color: '#8799a3',
+      title: '订单数',
+      value: 2075994,
+      percentage: -1.6
+    },
+  ]
+  const centerData = [
+    {
+      title: '预约订单',
+      color: '#70d4d4',
+      keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      valueList: [320, 332, 301, 334, 390, 88, 320, 332, 301, 334, 390, 88]
+    },
+    {
+      title: '完成订单',
+      color: '#c3b6e6',
+      keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+      valueList: [220, 182, 191, 234, 290, 256, 220, 182, 191, 234, 290, 356]
+    }
+  ]
+
+  const [machineryStatus, setMachineryStatus] = useState([
+    {
+      color: '#70d4d4',
+      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 },
+  ]);
+  const [dispatchList, setDispatchList] = useState([])
+  const goDispatch = (val) => {
+    history.push(`../OrderManage/dispatch.jsx?id=${val.orderId}`);
+  }
+  useEffect(() => {
+    getDispatchList({ isWarn: true, pageSize: 500 }).then((res) => {
+      setDispatchList(res.records)
+    })
+  }, [])
+  return (
+    <PageContainer>
+      <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>
+
+        <Row justify='space-between'>
+          <Col span={16}>
+            <Card style={{ marginTop: '32px' }}>
+              <Bar h='500px' title='本年度预约订单数据概览' opt={centerData} />
+            </Card>
+          </Col>
+          <Col span={7} >
+            <Card title='待调度订单' style={{ marginTop: '32px', height: '548px' }} >
+              {
+                dispatchList.length <= 8 ?
+                  <div style={{ height: '448px', width: '100%' }}>
+                    {dispatchList.map(item =>
+                      <div style={{ height: '60px' }} key={item.orderId} onClick={() => goDispatch(item)} >
+                        {(item.personName || item.phone) + ' 于 ' + item.createDate + ' 下了一单请您尽快处理！'}
+                      </div>
+                    )}
+                  </div> :
+                  <Swiper
+                    height={60}
+                    style={{ height: '448px' }}
+                    autoplay={{
+                      delay: 1500,
+                      disableOnInteraction: false,
+                    }}
+                    loop
+                    loopAdditionalSlides={8}
+                    modules={[Autoplay]}
+                    direction="vertical"
+                  >
+                    {dispatchList.map((item) => (
+                      <SwiperSlide key={item.orderId} onClick={() => goDispatch(item)}>
+                        {(item.personName || item.phone) + ' 于 ' + item.createDate + ' 下了一单请您尽快处理！'}
+                      </SwiperSlide>
+                    ))}
+                  </Swiper>
+              }
+
+            </Card>
+          </Col>
+        </Row>
+        <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>
+  );
+};
+
+export default Welcome;

src/pages/Welcome.jsx

@@ -1,73 +1,111 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Row, Col } from 'antd';
 import { useIntl } from 'umi';
-import WCard from '@/components/WelcomeCard'
+import WCard from '@/components/WelcomeCard';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay } from 'swiper';
 import 'swiper/css';
 import Bar from '@/components/Bar/index.jsx';
+import BarPerson from '@/components/BarPerson/index.jsx';
 import Pie from '@/components/Pie';
 import PieArea from '@/components/PieArea';
 import { history } from 'umi';
-import { getDispatchList } from '@/services/dispatch'
-import './Welcome.less'
-import { useEffect } from 'react';
+import { getDispatchList } from '@/services/dispatch';
+import {
+  getSummary2,
+  getAreaTotalOrg,
+  getDeviceTotalOrg,
+  getAreaTotalPerson,
+  getDeviceTotalPerson,
+} from '@/services/welcome';
+import './Welcome.less';
 
 const Welcome = () => {
   const intl = useIntl();
-  const topData = [
-    {
-      icon: 'icon-icon',
-      color: '#1cbbb4',
-      title: '注册用户',
-      value: 580239,
-      percentage: 32.6
-    },
-    {
-      icon: 'icon-show_gongsiguanli_fill',
-      color: '#8dc63f',
-      title: '合作社数',
-      value: 2017,
-      percentage: 5.6
-    },
-    {
-      icon: 'icon-tuolaji',
-      color: '#a5673f',
-      title: '农用机数',
-      value: 2000,
-      percentage: 42.6
-    },
-    {
-      icon: 'icon-dingdanguanli',
-      color: '#8799a3',
-      title: '订单数',
-      value: 2075994,
-      percentage: -1.6
-    },
-  ]
+  const [topData, setTopData] = useState([
+    // {
+    //   icon: 'icon-show_gongsiguanli_fill',
+    //   color: '#8dc63f',
+    //   title: '合作社',
+    //   value: 2017 + '个',
+    //   // percentage: 5.6,
+    // },
+    // {
+    //   icon: 'icon-icon',
+    //   color: '#1cbbb4',
+    //   title: '人员',
+    //   value: 580239 + '个',
+    //   // percentage: 32.6,
+    // },
+    // {
+    //   icon: 'icon-tuolaji',
+    //   color: '#a5673f',
+    //   title: '设备',
+    //   value: 2000 + '台',
+    //   // percentage: 42.6,
+    // },
+    // {
+    //   icon: 'icon-dingdanguanli',
+    //   color: '#8799a3',
+    //   title: '作业',
+    //   value: 2075994 + '亩',
+    //   // percentage: -1.6,
+    // },
+  ]);
+
+  const [categoryData, setCategoryData] = useState([]);
+  const [lineData, setLineData] = useState([]);
+  const [personData, setPersonData] = useState([]);
+  const [persondData, setPersDonData] = useState([]);
   const centerData = [
     {
       title: '预约订单',
       color: '#70d4d4',
-      keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      valueList: [320, 332, 301, 334, 390, 88, 320, 332, 301, 334, 390, 88]
+      keyList: [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月',
+      ],
+      valueList: [320, 332, 301, 334, 390, 88, 320, 332, 301, 334, 390, 88],
     },
     {
       title: '完成订单',
       color: '#c3b6e6',
-      keyList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      valueList: [220, 182, 191, 234, 290, 256, 220, 182, 191, 234, 290, 356]
-    }
-  ]
+      keyList: [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月',
+      ],
+      valueList: [220, 182, 191, 234, 290, 256, 220, 182, 191, 234, 290, 356],
+    },
+  ];
 
   const [machineryStatus, setMachineryStatus] = useState([
     {
       color: '#70d4d4',
       keyList: ['预约', '作业', '闲置', '离线', '维修'],
       valueList: [350, 900, 650, 180, 380],
-    }
-  ])
+    },
+  ]);
 
   const [workData, setWorkData] = useState([
     { name: '收割机', value: 35 },
@@ -81,86 +119,180 @@ const Welcome = () => {
     { name: '农药机', value: 650 },
     { name: '其他', value: 180 },
   ]);
-  const [dispatchList, setDispatchList] = useState([])
+  const [dispatchList, setDispatchList] = useState([]);
   const goDispatch = (val) => {
     history.push(`../OrderManage/dispatch.jsx?id=${val.orderId}`);
-  }
+  };
   useEffect(() => {
     getDispatchList({ isWarn: true, pageSize: 500 }).then((res) => {
-      setDispatchList(res.records)
-    })
-  }, [])
+      setDispatchList(res.records);
+    });
+  }, []);
+  // 卡片展示
+  useEffect(() => {
+    getSummary2().then((res) => {
+      const data = res.map((it) => {
+        return {
+          title:
+            it.name == 'person'
+              ? '人员'
+              : it.name == 'org'
+              ? '合作社'
+              : it.name == 'device'
+              ? '设备'
+              : '作业',
+          value:
+            it.name == 'person'
+              ? it.value + '个'
+              : it.name == 'org'
+              ? it.value + '个'
+              : it.name == 'device'
+              ? it.value + '台'
+              : it.value + '亩',
+          icon:
+            it.name == 'person'
+              ? 'icon-icon'
+              : it.name == 'org'
+              ? 'icon-show_gongsiguanli_fill'
+              : it.name == 'device'
+              ? 'icon-tuolaji'
+              : 'icon-dingdanguanli',
+          color:
+            it.name == 'person'
+              ? '#1cbbb4'
+              : it.name == 'org'
+              ? '#8dc63f'
+              : it.name == 'device'
+              ? '#a5673f'
+              : '#8799a3',
+        };
+      });
+      setTopData(data);
+    });
+  }, []);
+  // 柱状图展示亩
+  useEffect(() => {
+    getAreaTotalOrg().then((res) => {
+      setCategoryData(res);
+    });
+  }, []);
+
+  // 柱状图展示设备
+  useEffect(() => {
+    getDeviceTotalOrg().then((res) => {
+      setLineData(res);
+    });
+  }, []);
+
+  // 柱状图 人员作业统计
+
+  useEffect(() => {
+    getAreaTotalPerson().then((res) => {
+      setPersonData(res);
+    });
+  }, []);
+
+  // 柱状图 人员设备统计
+
+  useEffect(() => {
+    getDeviceTotalPerson().then((res) => {
+      setPersDonData(res);
+    });
+  }, []);
+
   return (
     <PageContainer>
       <div className="welcome">
         <div className="head">
-          <Row justify='space-between'>
-            <Col flex='320px'>
+          <Row justify="space-between">
+            <Col flex="320px">
               <WCard value={topData[0]} />
             </Col>
-            <Col flex='320px'>
+            <Col flex="320px">
               <WCard value={topData[1]} />
             </Col>
-            <Col flex='320px'>
+            <Col flex="320px">
               <WCard value={topData[2]} />
             </Col>
-            <Col flex='320px'>
+            <Col flex="320px">
               <WCard value={topData[3]} />
             </Col>
           </Row>
         </div>
-
-        <Row justify='space-between'>
-          <Col span={16}>
+        <Row justify="space-between">
+          <Col span={24}>
             <Card style={{ marginTop: '32px' }}>
-              <Bar h='500px' title='本年度预约订单数据概览' opt={centerData} />
+              <Bar h="500px" title="合作社数据统计" opt={categoryData} optL={lineData} />
             </Card>
           </Col>
-          <Col span={7} >
-            <Card title='待调度订单' style={{ marginTop: '32px', height: '548px' }} >
-              {
-                dispatchList.length <= 8 ?
-                  <div style={{ height: '448px', width: '100%' }}>
-                    {dispatchList.map(item =>
-                      <div style={{ height: '60px' }} key={item.orderId} onClick={() => goDispatch(item)} >
-                        {(item.personName || item.phone) + ' 于 ' + item.createDate + ' 下了一单请您尽快处理！'}
-                      </div>
-                    )}
-                  </div> :
-                  <Swiper
-                    height={60}
-                    style={{ height: '448px' }}
-                    autoplay={{
-                      delay: 1500,
-                      disableOnInteraction: false,
-                    }}
-                    loop
-                    loopAdditionalSlides={8}
-                    modules={[Autoplay]}
-                    direction="vertical"
-                  >
-                    {dispatchList.map((item) => (
-                      <SwiperSlide key={item.orderId} onClick={() => goDispatch(item)}>
-                        {(item.personName || item.phone) + ' 于 ' + item.createDate + ' 下了一单请您尽快处理！'}
-                      </SwiperSlide>
-                    ))}
-                  </Swiper>
-              }
-
+        </Row>
+        <Row justify="space-between">
+          <Col span={24}>
+            <Card style={{ marginTop: '32px' }}>
+              <BarPerson h="500px" title="人员数据统计" opt={personData} optP={persondData} />
             </Card>
           </Col>
         </Row>
-        <div className='flex bottom'>
-          <Card className='flex-1 card'>
-            <Bar h='300px' title='农机状态统计' opt={machineryStatus} />
+        {/* <Row justify="space-between">
+          <Col span={16}>
+            <Card style={{ marginTop: '32px' }}>
+              <Bar h="500px" title="本年度预约订单数据概览" opt={centerData} />
+            </Card>
+          </Col>
+          <Col span={7}>
+            <Card title="待调度订单" style={{ marginTop: '32px', height: '548px' }}>
+              {dispatchList.length <= 8 ? (
+                <div style={{ height: '448px', width: '100%' }}>
+                  {dispatchList.map((item) => (
+                    <div
+                      style={{ height: '60px' }}
+                      key={item.orderId}
+                      onClick={() => goDispatch(item)}
+                    >
+                      {(item.personName || item.phone) +
+                        ' 于 ' +
+                        item.createDate +
+                        ' 下了一单请您尽快处理！'}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <Swiper
+                  height={60}
+                  style={{ height: '448px' }}
+                  autoplay={{
+                    delay: 1500,
+                    disableOnInteraction: false,
+                  }}
+                  loop
+                  loopAdditionalSlides={8}
+                  modules={[Autoplay]}
+                  direction="vertical"
+                >
+                  {dispatchList.map((item) => (
+                    <SwiperSlide key={item.orderId} onClick={() => goDispatch(item)}>
+                      {(item.personName || item.phone) +
+                        ' 于 ' +
+                        item.createDate +
+                        ' 下了一单请您尽快处理！'}
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+              )}
+            </Card>
+          </Col>
+        </Row> */}
+        {/* <div className="flex bottom">
+          <Card className="flex-1 card">
+            <Bar h="300px" title="农机状态统计" opt={machineryStatus} />
           </Card>
-          <Card className='flex-1 card'>
+          <Card className="flex-1 card">
             <PieArea opt={workAreaData} />
           </Card>
-          <Card className='flex-1 card'>
+          <Card className="flex-1 card">
             <Pie opt={workData} />
           </Card>
-        </div>
+        </div> */}
       </div>
     </PageContainer>
   );

src/services/welcome.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request';
+
+/*
+卡片数据展示*/
+export const getSummary2 = () => request('/summary2');
+
+/*
+柱状图数据展示 亩
+*/
+
+export const getAreaTotalOrg = () => request('/area-total-org');
+
+/*
+柱状图数据展示 设备
+*/
+export const getDeviceTotalOrg = () => request('/device-total-org');
+
+/*
+柱状图  人员作业统计
+*/
+
+export const getAreaTotalPerson = () => request('/area-total-person');
+/*
+柱状图 人员设备统计
+*/
+
+export const getDeviceTotalPerson = () => request('/device-total-person');