feats

config/config.js

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

config/routes.js

@@ -22,7 +22,7 @@ export default [
     path: '/welcome',
     name: '工作台',
     icon: 'smile',
-    component: './Welcome',
+    component: './welcome',
   },
   {
     path: '/MonitoringScreen',

src/pages/Machinery/OperationStatistics/components/search/index.jsx

@@ -73,6 +73,9 @@ export default (props) => {
         <FormItem name="deviceKind" label="设备类型">
           <Select options={options} allowClear />
         </FormItem>
+        <FormItem name="town" label="乡镇">
+          <Input placeholder="请输入" allowClear />
+        </FormItem>
         <FormItem name="jobDate" label="作业时间">
           <RangePicker />
         </FormItem>

src/pages/Machinery/OperationStatistics/index.jsx

@@ -49,11 +49,13 @@ export default (props) => {
       dataIndex: 'jobArea',
       key: 'jobArea',
     },
+    {
+      title: '乡镇',
+      dataIndex: 'town',
+    },
     {
       title: '位置',
       dataIndex: 'address',
-      search: false,
-      // key: 'orgName',
     },
     {
       title: '作业时间',

src/pages/Welcome copy.jsx

@@ -1,169 +0,0 @@
-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/Welcome copy.jsx

@@ -0,0 +1,204 @@
+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 '@/pages/welcome/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/components/Bar/index.jsx → src/pages/welcome/components/Bar/index.jsx

@@ -13,8 +13,9 @@ const labelOption = {
   },
 };
 
+const colors = ['#E94F05', '#5470C6', '#91CC75'];
 export default (props) => {
-  const { opt, optL, title, h } = props;
+  const { opt, optL, height } = props;
   // console.log(optL);
   // console.log(opt);
   const dataL = [];
@@ -35,14 +36,9 @@ export default (props) => {
   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: {
@@ -78,11 +74,11 @@ export default (props) => {
           },
         },
       ],
-      dataZoom: {
-        show: true,
-        start: 0,
-        end: 100,
-      },
+      // dataZoom: {
+      //   show: true,
+      //   start: 0,
+      //   end: 100,
+      // },
       grid: {
         height: '55%',
       },
@@ -103,7 +99,7 @@ export default (props) => {
     [dataLs, dataVal, dataX],
   );
   return (
-    <div style={{ height: h, width: '100%' }}>
+    <div style={{ height, width: '100%' }}>
       <ECharts option={option} />
     </div>
   );

src/components/BarPerson/index.jsx → src/pages/welcome/components/BarPerson/index.jsx

@@ -15,7 +15,7 @@ const labelOption = {
 
 const colors = ['#E94F05', '#5470C6', '#91CC75'];
 export default (props) => {
-  const { opt, optP, title, h } = props;
+  const { opt, optP, height } = props;
   const dataL = [];
   opt.forEach((it, ind) => {
     optP.forEach((its) => {
@@ -38,10 +38,6 @@ export default (props) => {
   const option = useMemo(
     () => ({
       colors,
-      title: {
-        text: title,
-        left: 'center',
-      },
       tooltip: {
         trigger: 'axis',
         axisPointer: {
@@ -77,11 +73,11 @@ export default (props) => {
           },
         },
       ],
-      dataZoom: {
-        show: true,
-        start: 0,
-        end: 100,
-      },
+      // dataZoom: {
+      //   show: true,
+      //   start: 0,
+      //   end: 100,
+      // },
       series: [
         {
           name: '设备数量',
@@ -99,7 +95,7 @@ export default (props) => {
     [dataPerson, dataVal, dataX],
   );
   return (
-    <div style={{ height: h, width: '100%' }}>
+    <div style={{ height, width: '100%' }}>
       <ECharts option={option} />
     </div>
   );

src/pages/welcome/components/TownBar.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import ECharts from '@/components/ECharts';
+import { getAreaTotalTown } from '@/services/welcome';
+
+export default (props) => {
+  const [data, setData] = useState([]);
+
+  // 台
+  const option = useMemo(() => {
+    const colors = ['#E94F05', '#5470C6', '#91CC75'];
+    return {
+      color: colors,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+        },
+        extraCssText: 'width:auto;height:auto',
+      },
+      xAxis: {
+        type: 'category',
+        axisLabel: { interval: 0, rotate: 40 },
+        nameTextStyle: {
+          padding: [0, 20],
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          name: '作业面积(亩)',
+          alignTicks: true,
+          axisLine: {
+            show: true,
+          },
+        },
+      ],
+      dataset: {
+        dimensions: ['name', 'value'],
+        source: data,
+      },
+      series: [
+        {
+          name: '作业面积',
+          type: 'bar',
+        },
+      ],
+    };
+  }, [data]);
+
+  useEffect(() => {
+    getAreaTotalTown().then(setData);
+  }, []);
+
+  return (
+    <div style={{ height: props.height, width: '100%' }}>
+      <ECharts option={option} />
+    </div>
+  );
+};

src/components/WelcomeCard/style.less → src/pages/welcome/components/WelcomeCard/style.less

@@ -2,7 +2,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 320px;
+  // width: 320px;
+  width: '100%';
   padding: 16px 32px;
   background: #fff;
 

src/pages/Welcome.jsx → src/pages/welcome/index.jsx

@@ -1,17 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Row, Col } from 'antd';
+import { Card, Row, Col, Space } 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 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 {
   getSummary2,
   getAreaTotalOrg,
@@ -19,6 +9,10 @@ import {
   getAreaTotalPerson,
   getDeviceTotalPerson,
 } from '@/services/welcome';
+import WCard from './components/WelcomeCard';
+import Bar from './components/Bar/index.jsx';
+import BarPerson from './components/BarPerson/index.jsx';
+import TownBar from './components/TownBar';
 import './Welcome.less';
 
 const Welcome = () => {
@@ -107,34 +101,29 @@ const Welcome = () => {
       <div className="welcome">
         <div className="head">
           <Row justify="space-between">
-            <Col flex="320px">
+            <Col flex="1">
               <WCard value={topData[0]} />
             </Col>
-            <Col flex="320px">
+            <Col flex="1" style={{ marginLeft: '24px' }}>
               <WCard value={topData[1]} />
             </Col>
-            <Col flex="320px">
+            <Col flex="1" style={{ marginLeft: '24px' }}>
               <WCard value={topData[2]} />
             </Col>
-            <Col flex="320px">
+            <Col flex="1" style={{ marginLeft: '24px' }}>
               <WCard value={topData[3]} />
             </Col>
           </Row>
         </div>
-        <Row justify="space-between">
-          <Col span={24}>
-            <Card style={{ marginTop: '32px' }}>
-              <Bar h="500px" title="合作社数据统计" opt={categoryData} optL={lineData} />
-            </Card>
-          </Col>
-        </Row>
-        <Row justify="space-between">
-          <Col span={24}>
-            <Card style={{ marginTop: '32px' }}>
-              <BarPerson h="500px" title="人员数据统计" opt={personData} optP={persondData} />
-            </Card>
-          </Col>
-        </Row>
+        <Card title="各乡镇数据统计" style={{ marginTop: '24px' }}>
+          <TownBar height="500px" />
+        </Card>
+        <Card title="合作社数据统计" style={{ marginTop: '24px' }}>
+          <Bar height="500px" opt={categoryData} optL={lineData} />
+        </Card>
+        <Card title="人员数据统计" style={{ marginTop: '24px' }}>
+          <BarPerson height="500px" opt={personData} optP={persondData} />
+        </Card>
       </div>
     </PageContainer>
   );

src/services/welcome.js

@@ -25,3 +25,9 @@ export const getAreaTotalPerson = () => request('/area-total-person');
 */
 
 export const getDeviceTotalPerson = () => request('/device-total-person');
+
+/*
+柱状图 乡镇作业面积统计
+*/
+
+export const getAreaTotalTown = () => request('/area-total-town');