feats

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

config/defaultSettings.js

@@ -7,12 +7,12 @@ const Settings = {
   fixedHeader: false,
   fixSiderbar: true,
   colorWeak: false,
-  title: '南阳智慧农机系统',
+  title: '邓州市源盛农机数据可视化平台',
   pwa: false,
   menu: {
     locale: false,
   },
-  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+  logo: './logo2.png',
   // iconfontUrl: '//at.alicdn.com/t/font_3221810_t3g0tvsigf.js',
 };
 export default Settings;

config/proxy.js

@@ -1,40 +1,40 @@
-/**
- * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
- * -------------------------------
- * The agent cannot take effect in the production environment
- * so there is no configuration of the production environment
- * For details, please see
- * https://pro.ant.design/docs/deploy
- */
-export default {
-  dev: {
-    // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
-    '/api/': {
-      // 要代理的地址
-      // target: 'http://192.168.89.147:7080',
-      // target: 'http://192.168.89.25:7080',
-      target: 'http://machine.njyunzhi.com',
-      // 配置了这个可以从 http 代理到 https
-      // 依赖 origin 的功能可能需要这个，比如 cookie
-      changeOrigin: true,
-    },
-  },
-  test: {
-    '/api/': {
-      target: 'https://proapi.azurewebsites.net',
-      changeOrigin: true,
-      pathRewrite: {
-        '^': '',
-      },
-    },
-  },
-  pre: {
-    '/api/': {
-      target: 'your pre url',
-      changeOrigin: true,
-      pathRewrite: {
-        '^': '',
-      },
-    },
-  },
-};
+/**
+ * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
+ * -------------------------------
+ * The agent cannot take effect in the production environment
+ * so there is no configuration of the production environment
+ * For details, please see
+ * https://pro.ant.design/docs/deploy
+ */
+export default {
+  dev: {
+    // 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://machine.njyunzhi.com',
+      // 配置了这个可以从 http 代理到 https
+      // 依赖 origin 的功能可能需要这个，比如 cookie
+      changeOrigin: true,
+    },
+  },
+  test: {
+    '/api/': {
+      target: 'https://proapi.azurewebsites.net',
+      changeOrigin: true,
+      pathRewrite: {
+        '^': '',
+      },
+    },
+  },
+  pre: {
+    '/api/': {
+      target: 'your pre url',
+      changeOrigin: true,
+      pathRewrite: {
+        '^': '',
+      },
+    },
+  },
+};

config/routes.js

@@ -73,14 +73,14 @@ export default [
   },
   {
     path: '/customer',
-    name: '客户管理',
+    name: '农户管理',
     icon: 'IdcardOutlined',
     access: 'customer',
     component: '../layouts/BasicLayout',
     routes: [
       {
         path: '/customer/index.jsx',
-        name: '客户列表',
+        name: '农户列表',
         access: 'customerList',
         icon: 'smile',
         component: './customer',
@@ -124,24 +124,17 @@ export default [
         component: './Machinery/Machinery/Edit',
         hideInMenu: true,
       },
-      // {
-      //   path: '/Machinery/GPS',
-      //   name: '设备管理',
-      //   access: 'device',
-      //   component: './Machinery/GPS',
-      // },
-      // {
-      //   path: '/Machinery/GPS/edit.jsx',
-      //   name: '设备编辑',
-      //   component: './Machinery/GPS/edit.jsx',
-      //   hideInMenu: true,
-      // },
-      // {
-      //   path: '/Machinery/GIS',
-      //   name: '农机GIS',
-      //   access: 'gis',
-      //   component: './Machinery/GIS',
-      // },
+      {
+        path: '/Machinery/GIS',
+        name: '农机GIS',
+        component: './Machinery/GIS',
+      },
+      {
+        path: '/Machinery/GIS/detail.jsx',
+        name: 'GIS详情',
+        component: './Machinery/GIS/detail.jsx',
+        hideInMenu: true,
+      },
     ],
   },
   {
@@ -204,12 +197,6 @@ export default [
         access: 'st-work',
         component: './JobStatistics/Job',
       },
-      // {
-      //   path: '/JobStatistics/RevenueExpenditure',
-      //   name: '收支统计',
-      //   access: 'st-finance',
-      //   component: './JobStatistics/RevenueExpenditure',
-      // },
     ],
   },
   {
@@ -293,6 +280,24 @@ export default [
         access: 'setting',
         component: './SystemManagement/BasicParameters',
       },
+      {
+        path: '/SystemManagement/Subsoiler',
+        name: '深松机',
+        access: 'setting',
+        component: './SystemManagement/Subsoiler',
+      },
+      {
+        path: '/SystemManagement/Sensing',
+        name: '传感设备列表',
+        access: 'setting',
+        component: './SystemManagement/Sensing',
+      },
+      {
+        path: '/SystemManagement/Classification',
+        name: '分类管理',
+        access: 'setting',
+        component: './SystemManagement/Classification',
+      },
     ],
   },
 

src/components/AMap/weather.js

@@ -1,18 +1,27 @@
 const SERVER_KEY = 'a30b66a26ea1890fd656cf11cb2647fb';
 
-export default function getWeather(city) {
-  const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=${SERVER_KEY}&city=${city}&extensions=all`;
-
-  return fetch(url)
+export default function getWeather() {
+  // 先获取当前位置
+  return fetch(`https://restapi.amap.com/v3/ip?key=${SERVER_KEY}`)
     .then((res) => res.json())
     .then((res) => {
-      if (res.info === 'OK') {
-        return res.forecasts;
+      if (res.adcode) {
+        const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=${SERVER_KEY}&city=${res.adcode}&extensions=all`;
+
+        return fetch(url)
+          .then((res) => res.json())
+          .then((res) => {
+            if (res.info === 'OK') {
+              return res.forecasts;
+            } else {
+              return Promise.reject(res.info);
+            }
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       } else {
         return Promise.reject(res.info);
       }
-    })
-    .catch((err) => {
-      console.log(err.message);
     });
 }

src/components/CooperativeSearch/index.jsx

@@ -4,7 +4,7 @@ import { getCooperativeList, getCooperativeDetail } from '@/services/cooperative
 
 const Option = Select.Option;
 export default (props) => {
-  const { value, onChange, ...otherProps } = props;
+  const { value, onChange, disabled, ...otherProps } = props;
 
   const [list, setList] = useState([]);
 
@@ -42,6 +42,7 @@ export default (props) => {
       onSearch={handleSearch}
       onChange={onChange}
       notFoundContent={null}
+      disabled={disabled}
       {...otherProps}
     >
       {list.map((item) => {

src/components/ECharts/index.jsx

@@ -42,10 +42,8 @@ import Styles from './style.less';
 export default forwardRef((props, ref) => {
   const domRef = useRef();
   const echartsRef = useRef();
-
   useEffect(() => {
     echartsRef.current = echarts.init(domRef.current);
-
     const handleResize = () => {
       echartsRef.current.resize();
     };
@@ -57,7 +55,6 @@ export default forwardRef((props, ref) => {
       echartsRef.current.dispose();
     };
   }, []);
-
   useEffect(() => {
     if (echartsRef.current) {
       echartsRef.current.setOption(props.option);

src/components/GISMap/index.jsx

@@ -0,0 +1,31 @@
+import { useRef } from "react";
+import useMap from './map';
+import { useMarker, startAnimation, pauseAnimation, resumeAnimation, stopAnimation } from './marker';
+import './style.less';
+
+export default (props) => {
+  const { lineArr } = props
+  const container = useRef()
+  //生成地图
+  const { amapRef, map } = useMap(container);
+  //生成marker
+  useMarker(amapRef, map, lineArr);
+
+  return (
+    <>
+      <div ref={container} id="container" style={{ height: '700px', position: 'relative' }} >
+        <div className="input-card">
+          <h4>轨迹回放控制</h4>
+          <div className="input-item">
+            <input type="button" className="btn" value="开始动画" id="start" onClick={startAnimation} />
+            <input type="button" className="btn" value="暂停动画" id="pause" onClick={pauseAnimation} />
+          </div>
+          <div className="input-item">
+            <input type="button" className="btn" value="继续动画" id="resume" onClick={resumeAnimation} />
+            <input type="button" className="btn" value="停止动画" id="stop" onClick={stopAnimation} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/GISMap/map.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef, useState } from 'react';
+import loader from '@/components/AMap/loader';
+
+const plugins = ['AMap.MoveAnimation'];
+export default (containerRef) => {
+  const amapRef = useRef();
+  const [map, setMap] = useState();
+
+  useEffect(() => {
+    loader(plugins)
+      .then((AMap) => {
+        amapRef.current = AMap;
+
+        const mapInst = new AMap.Map(containerRef.current, {
+          zoom: 17,
+          resizeEnable: true,
+          center: [112.093131, 32.692095],
+        });
+
+        //
+        setMap(mapInst);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [containerRef]);
+
+  return { amapRef, map };
+};

src/components/GISMap/marker.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+
+let marker, lineArr;
+export function useMarker(amapRef, map, lujing) {
+  useMemo(() => {
+    if (!amapRef.current) return;
+    marker = new amapRef.current.Marker({
+      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
+      offset: new amapRef.current.Pixel(-13, -26),
+    });
+  }, [map]);
+
+  useEffect(() => {
+    if (!amapRef.current || !marker || !lujing || lujing.length == 0) {
+      return;
+    }
+    lineArr = lujing;
+    //https://lbs.amap.com/api/jsapi-v2/documentation#marker
+    // 动态添加地图和marker的定位
+    marker.setPosition(lineArr[0]);
+    marker.setMap(map);
+    var polyline = new amapRef.current.Polyline({
+      map: map,
+      path: lineArr,
+      showDir: true,
+      strokeColor: '#28F', //线颜色
+      // strokeOpacity: 1,     //线透明度
+      strokeWeight: 6, //线宽
+      // strokeStyle: "solid"  //线样式
+    });
+
+    var passedPolyline = new amapRef.current.Polyline({
+      map: map,
+      strokeColor: '#AF5', //线颜色
+      strokeWeight: 6, //线宽
+    });
+    //给marker添加监控
+    marker.on('moving', function (e) {
+      passedPolyline.setPath(e.passedPath);
+      //marker运动时将marker置位地图中心
+      map.setCenter(e.target.getPosition(), true);
+    });
+    //地图跟随marker移动
+    map.setFitView();
+  }, [map, lujing]);
+}
+export function startAnimation() {
+  if (marker) {
+    marker.moveAlong(lineArr, {
+      // 每一段的时长
+      duration: 500, //可根据实际采集时间间隔设置
+      // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+      autoRotation: true,
+    });
+  }
+}
+export function pauseAnimation() {
+  if (marker) {
+    marker.pauseMove();
+  }
+}
+export function resumeAnimation() {
+  if (marker) {
+    marker.resumeMove();
+  }
+}
+export function stopAnimation() {
+  if (marker) {
+    marker.stopMove();
+  }
+}

src/components/GISMap/style.less

@@ -0,0 +1,92 @@
+html {
+  font-size: 12px;
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: absolute;
+  z-index: 9;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: .5rem
+}
+
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+
+.input-item:last-child {
+  margin-bottom: 0;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  font-size: 1rem;
+  margin-right: 1.2rem;
+  width: 9rem;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor:pointer;
+}
+
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7;
+  text-decoration: none
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+.input-card .btn:last-child{
+  margin-right: 0;
+}

src/components/GeoMap/CarsMarker.js

@@ -2,6 +2,7 @@ import markerImg from '@/assets/images/screen/map-marker.png';
 import carsImg from '@/assets/images/screen/map-cars.png';
 import videoStartImg from '@/assets/images/screen/map-video-start.png';
 import videoStopImg from '@/assets/images/screen/map-video-stop.png';
+import { useRef } from 'react';
 
 export default function getCarsMarker(AMap, map, opts = {}) {
   const marker = new AMap.Marker({
@@ -11,43 +12,33 @@ export default function getCarsMarker(AMap, map, opts = {}) {
     ...opts,
   });
 
-  //
-  const { machineryId, name, orgName } = opts?.extData;
+  const { machineryId, name, orgName, thumb } = opts?.extData;
 
   marker.setLabel({
     direction: 'top',
-    offset: new AMap.Pixel(0, 0),
+    //偏移单位是px
+    offset: new AMap.Pixel(-88, -180),
     content: `
     <div class="SquareBox-box-carsMarker" onclick="openVideo('${machineryId}')">
-    <div class="border_corner-carsMarker border_corner_left_top-left" ></div>
-    <div class="border_corner-carsMarker border_corner_right_top-right" ></div>
-    <div class="border_corner-carsMarker border_corner_left_bottom-left" ></div>
-    <div class="border_corner-carsMarker border_corner_right_bottom-right" ></div>
-    <div class="SquareBox-body-carsMarker">
-    <div>
-    <div>
-    </div>
-    <div>
-      <div  class="map-top-border">
-        <img class="map-top-cars borderBox" src="${carsImg}" alt="" />
-        <img class="map-top-start borderBox" src="${videoStartImg}" alt="" />
-        <img class="map-top-stop borderBox" src="${videoStopImg}" alt="" />
-      </div>
-
-
-      <div  class="map-button-border">
-      
+      <div class="border_corner-carsMarker border_corner_left_top-left" ></div>
+      <div class="border_corner-carsMarker border_corner_right_top-right" ></div>
+      <div class="border_corner-carsMarker border_corner_left_bottom-left" ></div>
+      <div class="border_corner-carsMarker border_corner_right_bottom-right" ></div>
+      <div class="SquareBox-body-carsMarker">
+        <div  class="map-top-border">
+          <div style="width:100%;text-align:center">
+            <img  class="map-top-cars borderBox" src="${thumb}" alt="" />
+          </div>
+          <img class="map-top-start borderBox" src="${videoStartImg}" alt="" />
+          <img class="map-top-stop borderBox" src="${videoStopImg}" alt="" />
+        </div>
+        <div  class="map-button-border">      
         <div class="carsName">名称：${name}</div>
         <div class="map-button-border-carsRural carsName">
         <div >归属：${orgName}</div>
         <span> \>> </span>
-        </div>
-  
-      </div>
-
-
-    </div>
-  </div> `,
+      </div>   
+    </div> `,
   });
 
   return marker;

src/components/GeoMap/RuralMarker.js

@@ -9,7 +9,7 @@ export default function getRuralMarker(AMap, map, opts = {}) {
   });
 
   // 合作社数据
-  const { name, address, machineNum, phone } = opts?.extData;
+  const { name, address, machineryNum, phone } = opts?.extData;
 
   marker.setLabel({
     direction: 'top',
@@ -18,7 +18,7 @@ export default function getRuralMarker(AMap, map, opts = {}) {
     <div class='geo-map-rural-box' >
       <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>名 称</span>：${name}</div>
       <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${address}</div>
-      <div class="borderBox">农机数量：${machineNum} 辆</div>
+      <div class="borderBox">农机数量：${machineryNum} 辆</div>
       <div class="borderBox">联系电话：${phone}</div>
     </div>`,
   });

src/components/GeoMap/marker.js

@@ -18,19 +18,18 @@ export function useMarker(amapRef, map, list) {
         });
       });
     }
-  }, [map, list]);
+  }, [map, list, amapRef]);
 
   return markerListRef;
 }
 
 export function useMarkerVisible(map, markerListRef, typeId) {
   useEffect(() => {
-    console.log(typeId, markerListRef.current);
     if (!map || !markerListRef.current) return;
 
     markerListRef.current.forEach((marker) => {
       const item = marker.getExtData();
       marker.setMap(item.typeId === typeId ? map : null);
     });
-  }, [map, typeId]);
+  }, [map, markerListRef, typeId]);
 }

src/components/ScreenBox/ScreenHeader/style.less

@@ -42,7 +42,8 @@
     justify-content: center;
 
     & > img {
-      height: 50%;
+      width: 48%;
+      height: 48%;
     }
   }
 

src/components/Upload/UploadImage.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { message } from 'antd';
 import Upload from './Upload';
 
 function beforeUpload(file) {
-  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'||file.type==='image/gif';
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
   if (!isJpgOrPng) {
     message.error('请上传 JPG , PNG或GIF 图片!');
   }

src/pages/JobStatistics/RevenueExpenditure/index.jsx

@@ -1,3 +0,0 @@
-export default (props) => {
-  return <div>收支统计</div>;
-};

src/pages/Machinery/GIS/components/WorkListModel.jsx

@@ -0,0 +1,91 @@
+import {
+  Button,
+  Modal,
+  DatePicker,
+} from 'antd';
+import { useState, useRef } from 'react';
+import PageTable from '@/components/PageTable';
+import moment from 'moment';
+import { history } from 'umi';
+import { getJobList } from '@/services/job'
+
+const formatterTime = (val) => {
+  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
+};
+const { RangePicker } = DatePicker;
+export default (props) => {
+  const { editModal, onCancel, machineryId } = props
+  const actionRef = useRef();
+
+  const [start, setStartDate] = useState()
+  const [end, setEndDate] = useState()
+  const handelChange = (date, dateStrings) => {
+    setStartDate(dateStrings[0])
+    setEndDate(dateStrings[1])
+  }
+  const Reset = () => {
+    setStartDate()
+    setEndDate()
+    actionRef.current.reload();
+  }
+  const goDetail = (id) => {
+    history.push(`./GIS/detail.jsx?id=` + id);
+  }
+
+  const columns = [
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      search: false
+    },
+    {
+      title: '农机手',
+      dataIndex: 'workerName',
+      key: 'workerName',
+      search: false
+    },
+    {
+      title: '作业时间',
+      dataIndex: 'endDate',
+      key: 'endDate',
+      render: (t, render) => formatterTime(render.startDate) + ' ~ ' + formatterTime(render.endDate),
+      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelChange} />
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button
+          style={{ padding: 0 }}
+          type="link"
+          key={1}
+          onClick={() => goDetail(record.jobId)}
+        >
+          查看GIS
+        </Button>
+      ],
+    }
+  ]
+  return (
+    <Modal
+      forceRender
+      width='1024px'
+      title='农机GIS列表'
+      visible={editModal}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      footer={null}
+    >
+      <PageTable
+        request={getJobList}
+        actionRef={actionRef}
+        columns={columns}
+        rowKey="jobId"
+        options={false}
+        params={{ machineryId: machineryId, start, end }}
+        onReset={Reset}
+      />
+    </Modal>
+  )
+}

src/pages/Machinery/GIS/detail.jsx

@@ -0,0 +1,60 @@
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Card, Button, Descriptions } from 'antd';
+import { useEffect, useState } from 'react';
+import { getJobDetail, getJobGISDetail } from '@/services/job'
+import moment from 'moment';
+import { history } from 'umi';
+import getCoordinate from '@/utils/mapTogcj02'
+import GISMap from '@/components/GISMap';
+
+const goBack = () => {
+  history.goBack();
+};
+const formatterTime = (val) => {
+  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
+};
+export default (props) => {
+  const { location } = props;
+  const { id } = location.query;
+  const [workInfo, setWorkInfo] = useState()
+  const [nlocationList, setNewLocationList] = useState()
+  useEffect(() => {
+    if (id) {
+      getJobDetail(id).then((res) => {
+        setWorkInfo(res)
+        getJobGISDetail({ jobId: id }).then((gisRes => {
+          let list, newlocation
+          list = gisRes.map(item => {
+            newlocation = getCoordinate(item.lng, item.lat);
+            return [newlocation.longitude, newlocation.latitude]
+          })
+          setNewLocationList(list)
+        })).catch(err => {
+          console.log(err.message);
+        })
+      }).catch(err => {
+        console.log(err.message);
+      })
+    }
+  }, [id])
+  return (
+    <PageHeaderWrapper extra={[<Button key={id} type="default" onClick={() => goBack()}>
+      返回
+    </Button>]}>
+      <Card title='作业详情'>
+        <Descriptions labelStyle={{ justifyContent: 'flex-end', minWidth: '5em' }} >
+          <Descriptions.Item label="订单号">{workInfo?.orderNo}</Descriptions.Item>
+          <Descriptions.Item label="合作社">{workInfo?.orgName}</Descriptions.Item>
+          <Descriptions.Item label="农机">{workInfo?.machineryName}</Descriptions.Item>
+          <Descriptions.Item label="农机手">{workInfo?.workerName}</Descriptions.Item>
+          <Descriptions.Item label="作业面积">{workInfo?.area}亩</Descriptions.Item>
+          <Descriptions.Item label="作业时间">{formatterTime(workInfo?.startDate)}~{formatterTime(workInfo?.endDate)}</Descriptions.Item>
+          <Descriptions.Item label="作业地址">{workInfo?.address}</Descriptions.Item>
+        </Descriptions>
+      </Card>
+      <Card style={{ minHeight: '700px', marginTop: '32px' }}>
+        <GISMap lineArr={nlocationList} />
+      </Card>
+    </PageHeaderWrapper>
+  );
+};

src/pages/Machinery/GIS/index.jsx

@@ -1,3 +1,154 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Button, Select } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import PageTable from '@/components/PageTable';
+import { getMachineryList } from '@/services/machinery';
+import { getMachineryTypeList } from '@/services/machineryType';
+import { getCooperativeList } from '@/services/cooperative';
+import WorkListModel from './components/WorkListModel';
+
+const { Option } = Select;
+
 export default (props) => {
-  return <div>农机GIS</div>;
+  const actionRef = useRef();
+  const [machineryTypeList, setMachineryTypeList] = useState([]);
+  const [cooperativeList, setCooperativeList] = useState([]);
+  const [editModal, setEditModal] = useState(false);
+  const [machineryId, setMachineryId] = useState();
+
+
+  const showList = (val) => {
+    setMachineryId(val.machineryId)
+    setEditModal(true)
+  }
+  const onCancel = () => {
+    setEditModal(false)
+  }
+  useEffect(() => {
+    getCooperativeList({ pageSize: 999 }).then((res) => {
+      setCooperativeList(res.records);
+    }).catch((err) => {
+      console.log(err.message)
+    });
+    getMachineryTypeList({ pageSize: 999 }).then((res) => {
+      setMachineryTypeList(res.records);
+    }).catch((err) => {
+      console.log(err.message)
+    });
+  }, []);
+  const columns = [
+    {
+      title: '合作社',
+      dataIndex: 'orgId',
+      key: 'orgId',
+      hideInTable: true,
+      renderFormItem: (item, field, form) => {
+        return (
+          <Select>
+            {cooperativeList.map((item) => (
+              <Option value={item.orgId} key={item.orgId}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        )
+      }
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '合作社',
+      dataIndex: 'orgName',
+      key: 'orgName',
+      search: false
+    },
+    {
+      title: '农机类型',
+      dataIndex: 'typeId',
+      key: 'typeId',
+      renderFormItem: (item, field, form) => {
+        return (
+          <Select>
+            {machineryTypeList.map((item) => (
+              <Option value={item.typeId} key={item.typeId}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        );
+      },
+      hideInTable: true,
+    },
+    {
+      title: '农机类型',
+      dataIndex: 'typeName',
+      key: 'typeName',
+      search: false,
+    },
+    {
+      title: '区域',
+      dataIndex: 'regionName',
+      key: 'regionName',
+      search: false,
+    },
+    {
+      title: '农机单价',
+      dataIndex: 'price',
+      key: 'price',
+      render: (t) => t / 100,
+      search: false,
+    },
+    {
+      title: '主图',
+      dataIndex: 'thumb',
+      key: 'thumb',
+      width: 150,
+      render: (t) => <img width={110} src={t} alt="" />,
+      search: false,
+    },
+    {
+      title: '工作状态',
+      dataIndex: 'jobStatus',
+      key: 'jobStatus',
+      search: false,
+      render: (_, record) => {
+        return record.jobStatus == 1 ? '使用中' : '空闲中';
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      search: false,
+      render: (_, record) => {
+        return record.status === 1 ? '正常' : '维修中';
+      },
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      render: (_, record) => [
+        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => showList(record)}>
+          农机GIS
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        request={getMachineryList}
+        actionRef={actionRef}
+        columns={columns}
+        rowKey="machineryId"
+        options={false}
+        scroll={{ x: 1000 }}
+      />
+      <WorkListModel editModal={editModal} onCancel={onCancel} machineryId={machineryId} />
+    </PageHeaderWrapper>
+  );
 };

src/pages/Machinery/GPS/edit.jsx

@@ -1,59 +0,0 @@
-import { Input, Card, Select, Button, message } from 'antd';
-import { useEffect, useState } from 'react';
-import { Form } from 'antd';
-import { history } from 'umi';
-import ProCard from '@ant-design/pro-card';
-
-const { Option } = Select;
-const goBack = () => {
-  history.goBack();
-};
-const FormItem = Form.Item;
-export default (props) => {
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-
-  const formItemLayout = {
-    //布局
-    labelCol: { span: 6 },
-    wrapperCol: { span: 14 },
-  };
-
-  const Submit = (values) => {
-    setLoading(false);
-  };
-
-  return (
-    <Card>
-      <ProCard tabs={{ type: 'card' }} style={{ marginTop: '16px' }}>
-        <ProCard.TabPane key={1} tab="设备管理">
-          <Form {...formItemLayout} onFinish={Submit} form={form}>
-            <FormItem
-              label="设备ID"
-              name="shopName"
-              rules={[{ required: true, message: '请输入' }]}
-            >
-              <Input placeholder="请输入" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem label="设备号" name="title" rules={[{ required: true, message: '请输入' }]}>
-              <Input placeholder="请输入" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem label=" " colon={false}>
-              <Button type="default" onClick={() => goBack()}>
-                返回
-              </Button>
-              <Button
-                type="primary"
-                loading={loading}
-                htmlType="Submit"
-                style={{ marginLeft: '4em' }}
-              >
-                保存
-              </Button>
-            </FormItem>
-          </Form>
-        </ProCard.TabPane>
-      </ProCard>
-    </Card>
-  );
-};

src/pages/Machinery/GPS/index.jsx

@@ -1,99 +0,0 @@
-import { history, Link } from 'umi';
-import { useRef } from 'react';
-import { Button, message, Popconfirm } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import ProTable, { TableDropdown } from '@ant-design/pro-table';
-
-export default (props) => {
-  const dataSource = [
-    {
-      id: 9,
-      key: '1',
-      name: '胡彦斌',
-      age: 32,
-      status: 1,
-      zz: '西湖区湖底公园1号',
-    },
-  ];
-
-  // 测试内容👆-------------------------
-
-  const actionRef = useRef();
-  const gotoDetail = (id) => {
-    history.push(`./GPS/edit.jsx`);
-  };
-
-  const handleDelete = (e) => {
-    deleteNote(e.noteId).then((res) => {
-      message.success('删除成功');
-      actionRef.current.reload();
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  };
-
-  const actions = () => [
-    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>
-      新增
-    </Button>,
-  ];
-  const columns = [
-    {
-      title: 'ID',
-      key: 'zz',
-      dataIndex: 'zz',
-    },
-    {
-      title: '设备号',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      // initialValue: 'all',
-      key: 'status',
-      valueEnum: {
-        0: { text: '已启用', status: 'Success' },
-        1: { text: '已禁用', status: 'Error' },
-      },
-    },
-
-    {
-      title: '操作',
-      valueType: 'option',
-      key: 'option',
-      ellipsis: true,
-      width: 200,
-      render: (_, record) => [
-        <Link key={2} to={`./GPS/edit.jsx`}>
-          编辑
-        </Link>,
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record)}
-          okText="确定"
-          cancelText="取消"
-        >
-          <a href="#">删除</a>
-        </Popconfirm>,
-      ],
-    },
-  ];
-
-  return (
-    <PageHeaderWrapper>
-      {/* <ProTable
-        dataSource={dataSource}
-        columns={columns}
-        // request={getNoteList} 请求
-        // rowKey="noteId"
-        options={false}
-        toolBarRender={actions}
-        actionRef={actionRef}
-      /> */}
-    </PageHeaderWrapper>
-  );
-};

src/pages/Machinery/Machinery/Edit/components/BasicInfo.jsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import { history } from 'umi';
+import { Form, Input, DatePicker, Select, Button, message } from 'antd';
+import moment from 'moment';
+import ExtendContent from '@/components/ExtendContent';
+import { UploadImage, UploadImageList } from '@/components/Upload';
+import Money from '@/components/Money';
+import { addMachinery, updateMachinery, getMachineryDetail } from '@/services/machinery';
+import { getMachineryTypeList } from '@/services/machineryType';
+import { getRegionList } from '@/services/region';
+import { getCooperativeList } from '@/services/cooperative';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+
+const goBack = () => {
+  history.goBack();
+};
+
+export default (props) => {
+  const { id, onSuccess } = props;
+
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [imageList, setImageList] = useState([]);
+  //农机类型列表
+  const [machineryTypeList, setMachineryTypeList] = useState([]);
+  //区域列表
+  const [regionList, setRegionList] = useState([]);
+  //合作社列表
+  const [cooperativeList, setCooperativeList] = useState([]);
+
+  const onSubmit = (data) => {
+    var newData = { ...data };
+    if (data.buyDate) {
+      newData = { ...data, buyDate: data.buyDate.format('YYYY-MM-DD HH:mm:ss') };
+    }
+    setLoading(true);
+    if (id) {
+      updateMachinery(id, newData)
+        .then(() => {
+          setLoading(false);
+          message.success('数据更新成功');
+          goBack();
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    } else {
+      addMachinery(newData)
+        .then((res) => {
+          setLoading(false);
+          message.success('数据保存成功');
+          history.replace(`./Edit?id=${res.machineryId}`);
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    }
+  };
+
+  const imageInput = (image) => {
+    return {
+      uid: image.imageId,
+      url: image.url,
+    };
+  };
+
+  const imageOutput = (image) => {
+    return {
+      imageId: image?.raw?.imageId,
+      targetId: id,
+      url: image.url,
+    };
+  };
+
+  useEffect(() => {
+    getMachineryTypeList({ pageSize: 500 })
+      .then((res) => {
+        setMachineryTypeList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    getRegionList({ pageSize: 500 })
+      .then((res) => {
+        setRegionList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    getCooperativeList({ pageSize: 500 })
+      .then((res) => {
+        setCooperativeList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (id) {
+      //编辑时获取基本信息内容
+      getMachineryDetail(id)
+        .then((res) => {
+          form.setFieldsValue({
+            ...res,
+            buyDate: res.buyDate ? moment(res.buyDate, 'YYYY-MM-DD') : null,
+          });
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+  }, [id]);
+
+  return (
+    <Form {...formItemLayout} onFinish={onSubmit} form={form}>
+      <FormItem label="农机名" name="name" rules={[{ required: true, message: '请输入农机名' }]}>
+        <Input placeholder="请输入农机名" style={{ width: '350px' }} />
+      </FormItem>
+      <FormItem
+        label="农机类型"
+        name="typeId"
+        rules={[{ required: true, message: '请选择农机类型' }]}
+      >
+        <Select style={{ width: '350px' }}>
+          {machineryTypeList.map((item) => (
+            <Option value={item.typeId} key={item.typeId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem label="主图" name="thumb" rules={[{ required: true, message: '请选择主图' }]}>
+        <UploadImage />
+      </FormItem>
+      <FormItem label="农机banner图集" name="images">
+        <UploadImageList
+          value={imageList}
+          onChange={setImageList}
+          input={imageInput}
+          output={imageOutput}
+        />
+      </FormItem>
+      <FormItem label="区域" name="regionId" rules={[{ required: true, message: '请选择区域' }]}>
+        <Select style={{ width: '350px' }}>
+          {regionList.map((item) => (
+            <Option value={item.regionId} key={item.regionId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem
+        label="归属合作社"
+        name="orgId"
+        rules={[{ required: true, message: '请选择归属合作社' }]}
+      >
+        <Select style={{ width: '350px' }}>
+          {cooperativeList.map((item) => (
+            <Option value={item.orgId} key={item.orgId}>
+              {item.name}
+            </Option>
+          ))}
+        </Select>
+      </FormItem>
+      <FormItem label="单价" name="price" rules={[{ required: true, message: '请输入价格' }]}>
+        <Money style={{ width: '350px' }} />
+      </FormItem>
+      <FormItem label="购买时间" name="buyDate">
+        <DatePicker format="YYYY-MM-DD" style={{ width: '350px' }} />
+      </FormItem>
+      <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
+        <Select placeholder="请选择农机状态" style={{ width: '350px' }}>
+          <Option value={1}>正常</Option>
+          <Option value={0}>维修</Option>
+        </Select>
+      </FormItem>
+      {id && (
+        <FormItem label="详细信息" colon={false}>
+          <ExtendContent targetType="machinery" targetId={id} onCancel={goBack} />
+        </FormItem>
+      )}
+      <FormItem label=" " colon={false}>
+        <Button type="default" onClick={goBack}>
+          返回
+        </Button>
+        <Button type="primary" loading={loading} htmlType="submit" style={{ marginLeft: '4em' }}>
+          保存
+        </Button>
+      </FormItem>
+    </Form>
+  );
+};

src/pages/Machinery/Machinery/Edit/components/DeviceInfo.jsx

@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+import { history } from 'umi';
+import { Form, Drawer, Select, InputNumber, message, Button } from 'antd';
+import { getDeviceDetail, addDevice } from '@/services/device';
+import DeviceList from './DeviceList';
+import { useMemo } from 'react';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+
+const goBack = () => {
+  history.goBack();
+};
+
+export default (props) => {
+  const { machineryId } = props;
+
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [deviceDetail, setDeviceDetail] = useState();
+  const [hatcId, setHatcId] = useState();
+
+  const onSubmit = (data) => {
+    if (!deviceDetail || !deviceDetail.deviceNo) {
+      message.error('请先绑定设备');
+      return;
+    }
+
+    const apiConfig = JSON.stringify({
+      ...data,
+      deviceId: hatcId,
+    });
+
+    // 表单的提交, 实际上是把 form 内容 + 其余字段 融合一起提交
+    setLoading(true);
+    addDevice({ ...deviceDetail, machineryId, apiConfig })
+      .then((res) => {
+        message.success('保存成功！');
+        setLoading(false);
+        goBack();
+      })
+      .catch((err) => {
+        setLoading(false);
+        console.log(err.message);
+      });
+  };
+
+  const handleCheck = (terminalId, hatcDevice) => {
+    setHatcId(hatcDevice.deviceId);
+    setDeviceDetail({
+      ...(deviceDetail || {}),
+      deviceNo: terminalId,
+      deviceType: hatcDevice.productKey,
+    });
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    if (machineryId) {
+      //获取设备信息内容
+      getDeviceDetail(machineryId).then((res) => {
+        if (!res) return;
+
+        setDeviceDetail(res);
+        const apiConfig = JSON.parse(res.apiConfig) || {};
+
+        // 表单内容只是整个数据的一个 JSON 字段
+        form.setFieldsValue({
+          netType: apiConfig.netType,
+          channel: apiConfig.channel,
+        });
+      });
+    }
+  }, [machineryId, form]);
+
+  const deviceName = useMemo(() => {
+    if (!deviceDetail) return '未绑定';
+
+    return `${deviceDetail.deviceType}-${deviceDetail.deviceNo}`;
+  }, [deviceDetail]);
+
+  return (
+    <>
+      <Form {...formItemLayout} onFinish={onSubmit} form={form}>
+        <FormItem label="设备">
+          <Button type="link" onClick={() => setVisible(true)}>
+            {deviceName}
+          </Button>
+        </FormItem>
+        <FormItem
+          label="通道号"
+          name="channel"
+          rules={[{ required: true, message: '请输入通道号' }]}
+        >
+          <InputNumber min={1} placeholder="请输入通道号" style={{ width: '350px' }} />
+        </FormItem>
+        <FormItem
+          label="网络类型"
+          name="netType"
+          rules={[{ required: true, message: '请选择网络类型' }]}
+        >
+          <Select placeholder="请选择网络类型" style={{ width: '350px' }}>
+            <Option value={0}>内网</Option>
+            <Option value={1}>电信</Option>
+            <Option value={2}>移动</Option>
+            <Option value={3}>联通</Option>
+          </Select>
+        </FormItem>
+        <FormItem label=" " colon={false}>
+          <Button type="default" onClick={goBack}>
+            返回
+          </Button>
+          <Button type="primary" loading={loading} htmlType="submit" style={{ marginLeft: '4em' }}>
+            保存
+          </Button>
+        </FormItem>
+      </Form>
+      <Drawer
+        title="设备列表"
+        width={500}
+        closable={false}
+        onClose={() => setVisible(false)}
+        visible={visible}
+        destroyOnClose
+      >
+        <DeviceList value={deviceDetail && deviceDetail.deviceNo} onChange={handleCheck} />
+      </Drawer>
+    </>
+  );
+};

src/pages/Machinery/Machinery/Edit/components/DeviceList.jsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from 'react';
+import { Button, Card, Descriptions, Input, List } from 'antd';
+import { getHatcDeviceList } from '@/services/device';
+import selectedImg from '@/assets/selectedImg.png';
+
+const { Search } = Input;
+
+// 列表是海康设备
+// props 传过来的是映射ID
+
+export default (props) => {
+  const { value, onChange } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [hatcDeviceList, setHatcDeviceList] = useState([]); // 所有数据
+  const [list, setList] = useState([]); // 页面展示数据
+  const [checked, setChecked] = useState();
+
+  // 搜索
+  const onSearch = (val) => {
+    if (val == '' || val === undefined || val === null) {
+      setList(hatcDeviceList);
+    } else {
+      setList(hatcDeviceList.filter((x) => x.terminalId.toLowerCase().includes(val.toLowerCase())));
+    }
+  };
+
+  //选中设备
+  const handleSelect = (item) => {
+    setChecked(item);
+  };
+
+  // 提交
+  const handleSubmit = () => {
+    onChange(checked.terminalId, checked);
+  };
+
+  // 过滤列表
+  useEffect(() => {
+    setLoading(true);
+    getHatcDeviceList({ pageSize: 500 })
+      .then((res) => {
+        setHatcDeviceList(res.records);
+        setList(res.records);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!hatcDeviceList || !hatcDeviceList.length) return;
+    if (!value) return;
+
+    if (!checked || value !== checked.terminalId) {
+      const target = hatcDeviceList.filter((x) => x.terminalId === value)[0];
+      setChecked(target);
+    }
+  }, [value, checked, hatcDeviceList]);
+
+  return (
+    <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
+      <Search
+        placeholder="请输入终端ID"
+        allowClear
+        enterButton="搜索"
+        size="middle"
+        onSearch={onSearch}
+        style={{ padding: '24px' }}
+      />
+      <List
+        split={false}
+        style={{ padding: '12px 0', flex: 1, overflowY: 'auto', background: 'rgb(240,242,245)' }}
+      >
+        {list.map((item) => (
+          <List.Item key={item.deviceId} onClick={() => handleSelect(item)}>
+            <Card className="listCard" hoverable>
+              <Descriptions
+                labelStyle={{ width: '72px', display: 'inline-block', textAlign: 'end' }}
+              >
+                <Descriptions.Item span={3} label="型号名称">
+                  {item.modelName}
+                </Descriptions.Item>
+                <Descriptions.Item span={3} label="协议">
+                  {item.protocol}
+                </Descriptions.Item>
+                <Descriptions.Item span={3} label="终端ID">
+                  {item.terminalId}
+                </Descriptions.Item>
+                <Descriptions.Item span={3} label="通道列表">
+                  {item.deviceChannelList}
+                </Descriptions.Item>
+              </Descriptions>
+              {checked && checked.deviceId === item.deviceId && <img src={selectedImg} />}
+            </Card>
+          </List.Item>
+        ))}
+      </List>
+      <div style={{ padding: '24px' }}>
+        <Button
+          type="primary"
+          style={{ float: 'right' }}
+          loading={loading}
+          onClick={handleSubmit}
+          disabled={!checked}
+        >
+          确定
+        </Button>
+      </div>
+    </div>
+  );
+};

src/pages/Machinery/Machinery/Edit/index.jsx

@@ -1,386 +1,21 @@
-import { useState, useEffect } from 'react';
-import { history } from 'umi';
-import { Form, Input, Drawer, DatePicker, Select, InputNumber, message, Button, List, Card, Descriptions } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import moment from 'moment';
-import ExtendContent from '@/components/ExtendContent';
-import { UploadImage, UploadImageList } from '@/components/Upload';
-import Money from '@/components/Money';
-import { addMachinery, updateMachinery, getMachineryDetail } from '@/services/machinery';
-import { getMachineryTypeList } from '@/services/machineryType';
-import { getRegionList } from '@/services/region';
-import { getDeviceList, getdeviceDetail, getTerminalDeviceList, addDevice } from '@/services/device';
-import { getCooperativeList } from '@/services/cooperative';
-import selectedImg from '@/assets/selectedImg.png'
-import './style.less'
+import BasicInfo from './components/BasicInfo';
+import DeviceInfo from './components/DeviceInfo';
+import './style.less';
 
-const { Option } = Select;
-const { Search } = Input;
-const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
-
-const goBack = () => {
-  history.goBack();
-};
-const FormItem = Form.Item;
 export default (props) => {
   const { location } = props;
   const { id } = location.query;
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState(false);
-  const [imageList, setImageList] = useState([]);
-  //农机类型列表
-  const [machineryTypeList, setMachineryTypeList] = useState([]);
-  //区域列表
-  const [regionList, setRegionList] = useState([]);
-  //合作社列表
-  const [cooperativeList, setCooperativeList] = useState([]);
-
-  const Submit = (data) => {
-    var newData = { ...data }
-    if (data.buyDate) {
-      newData = { ...data, buyDate: data.buyDate.format('YYYY-MM-DD HH:mm:ss') };
-    }
-    setLoading(true);
-    if (id) {
-      updateMachinery(id, newData)
-        .then(() => {
-          setLoading(false);
-          message.success('数据更新成功');
-          goBack();
-        })
-        .catch((err) => {
-          setLoading(false);
-          message.error(err.message || err);
-        });
-    } else {
-      addMachinery(newData)
-        .then((res) => {
-          setLoading(false);
-          message.success('数据保存成功');
-          history.replace(`./Edit?id=${res.machineryId}`)
-        })
-        .catch((err) => {
-          setLoading(false);
-          message.error(err.message || err);
-        });
-    }
-  };
-
-  const imageInput = (image) => {
-    return {
-      uid: image.imageId,
-      url: image.url,
-    };
-  };
-
-  const imageOutput = (image) => {
-    return {
-      imageId: image?.raw?.imageId,
-      targetId: id,
-      url: image.url,
-    };
-  };
-
-
-  //设备信息
-  const [deviceForm] = Form.useForm();
-  const [visible, setVisible] = useState(false);
-  const [terminalId, setTerminalId] = useState();
-  //设备列表
-  const [deviceList, setDeviceList] = useState([]);
-  const [device, setDevice] = useState();
-  const [bind, setBind] = useState(false);
-  const [deviceLoading, setDeviceLoading] = useState(false);
-  const [deviceDetail, setDeviceDetail] = useState();
-
-  //弹出设备列表抽屉
-  const changeCamera = () => {
-    if (device != null) {
-      getTerminalDeviceList(device.deviceId).then((res) => {
-        setDeviceList([res]);
-        setVisible(true);
-      })
-    } else {
-      setVisible(true);
-    }
-
-  }
-  const handleClose = () => {
-    setVisible(false);
-  }
-  const onSearch = (val) => {
-    if (val == '') {
-      getDeviceList({ pageSize: 500 }).then((res) => {
-        setDeviceList(res.records);
-      })
-    } else {
-      setTerminalId(val)
-    }
-  }
-  //选中设备
-  const handleSelect = (item) => {
-    setDevice(item);
-  }
-  const handleOk = () => {
-    if (device != null) {
-      setBind(true)
-    }
-    handleClose();
-  }
-  const submitDevice = (data) => {
-    if (!bind) {
-      message.info('请绑定摄像头');
-      return;
-    }
-    let obj = {
-      deviceId: device.deviceId,
-      channel: data.channel,
-      netType: data.netType
-    }
-    let config = JSON.stringify(obj);
-    setDeviceLoading(true);
-    addDevice({ ...deviceDetail, machineryId: id, apiConfig: config }).then((res) => {
-      message.success('保存成功！');
-      setDeviceLoading(false);
-      goBack();
-    }).catch((err) => {
-      setDeviceLoading(false);
-      console.log(err.message);
-    })
-  }
-  useEffect(() => {
-    getDeviceList({ terminalId: terminalId, pageSize: 500 }).then((res) => {
-      setDeviceList(res.records);
-    })
-  }, [terminalId])
-
-  useEffect(() => {
-    getMachineryTypeList({ pageSize: 500 }).then((res) => {
-      setMachineryTypeList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-    getRegionList({ pageSize: 500 }).then((res) => {
-      setRegionList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-    getCooperativeList({ pageSize: 500 }).then((res) => {
-      setCooperativeList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  }, [])
-
-
-  useEffect(() => {
-    if (id) {
-      //编辑时获取基本信息内容
-      getMachineryDetail(id).then((res) => {
-        form.setFieldsValue({ ...res, buyDate: res.buyDate ? moment(res.buyDate, 'YYYY-MM-DD') : null });
-      }).catch((err) => {
-        console.log(err.message)
-      });
-      //获取设备信息内容
-      getdeviceDetail(id).then((res) => {
-        setDeviceDetail(res);
-        if (res) {
-          //json字符串转普通对象
-          let confit = JSON.parse(res.apiConfig)
-          deviceForm.setFieldsValue(confit);
-          if (res && res.deviceId != null) {
-            //获取绑定设备详情
-            getTerminalDeviceList(confit.deviceId).then((res) => {
-              setDevice(res);
-              setBind(true)
-            })
-          }
-        }
-      })
-    }
-  }, [id]);
 
   return (
     <PageHeaderWrapper>
       <ProCard tabs={{ type: 'card' }} style={{ minHeight: '700px' }}>
         <ProCard.TabPane key={1} tab="基本信息">
-          <Form {...formItemLayout} onFinish={Submit} form={form}>
-            <FormItem
-              label="农机名"
-              name="name"
-              rules={[{ required: true, message: '请输入农机名' }]}
-            >
-              <Input placeholder="请输入农机名" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem
-              label="农机类型"
-              name="typeId"
-              rules={[{ required: true, message: '请选择农机类型' }]}
-            >
-              <Select style={{ width: '350px' }}>
-                {machineryTypeList.map((item) => (
-                  <Option value={item.typeId} key={item.typeId}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-            <FormItem label="主图" name="thumb" rules={[{ required: true, message: '请选择主图' }]}>
-              <UploadImage />
-            </FormItem>
-            <FormItem label="农机banner图集" name="images">
-              <UploadImageList
-                value={imageList}
-                onChange={setImageList}
-                input={imageInput}
-                output={imageOutput}
-              />
-            </FormItem>
-            <FormItem
-              label="区域"
-              name="regionId"
-              rules={[{ required: true, message: '请选择区域' }]}
-            >
-              <Select style={{ width: '350px' }}>
-                {regionList.map((item) => (
-                  <Option value={item.regionId} key={item.regionId}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-            <FormItem
-              label="归属合作社"
-              name="orgId"
-              rules={[{ required: true, message: '请选择归属合作社' }]}
-            >
-              <Select style={{ width: '350px' }}>
-                {cooperativeList.map((item) => (
-                  <Option value={item.orgId} key={item.orgId}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>
-            </FormItem>
-            <FormItem label="单价" name="price" rules={[{ required: true, message: '请输入价格' }]}>
-              <Money style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem label="购买时间" name="buyDate">
-              <DatePicker format="YYYY-MM-DD" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
-              <Select placeholder="请选择农机状态" style={{ width: '350px' }}>
-                <Option value={1}>正常</Option>
-                <Option value={0}>维修</Option>
-              </Select>
-            </FormItem>
-            {id && (
-              <FormItem label="详细信息" colon={false}>
-                <ExtendContent targetType="machinery" targetId={id} onCancel={goBack} />
-              </FormItem>
-            )}
-            <FormItem label=" " colon={false}>
-              <Button type="default" onClick={goBack}>
-                返回
-              </Button>
-              <Button
-                type="primary"
-                loading={loading}
-                htmlType="submit"
-                style={{ marginLeft: '4em' }}
-              >
-                保存
-              </Button>
-            </FormItem>
-          </Form>
+          <BasicInfo id={id} />
         </ProCard.TabPane>
         <ProCard.TabPane key={2} disabled={!id} tab="设备信息">
-          <Form {...formItemLayout} onFinish={submitDevice} form={deviceForm}>
-            <FormItem label='摄像头'  >
-              <Button type='link' onClick={changeCamera}>{bind ? '已绑定' : '未绑定'}</Button>
-            </FormItem>
-            <FormItem
-              label="通道号"
-              name='channel'
-              rules={[{ required: true, message: '请输入通道号' }]}
-            >
-              <InputNumber min={1} placeholder="请输入通道号" style={{ width: '350px' }} />
-            </FormItem>
-            <FormItem
-              label="网络类型"
-              name='netType'
-              rules={[{ required: true, message: '请选择网络类型' }]}
-            >
-              <Select placeholder="请选择网络类型" style={{ width: '350px' }}>
-                <Option value={0}>内网</Option>
-                <Option value={1}>电信</Option>
-                <Option value={2}>移动</Option>
-                <Option value={3}>联通</Option>
-              </Select>
-            </FormItem>
-            <FormItem label=" " colon={false}>
-              <Button type="default" onClick={goBack}>
-                返回
-              </Button>
-              <Button
-                type="primary"
-                loading={deviceLoading}
-                htmlType="submit"
-                style={{ marginLeft: '4em' }}
-              >
-                保存
-              </Button>
-            </FormItem>
-          </Form>
-          <Drawer
-            title="摄像头列表"
-            width={500}
-            closable={false}
-            onClose={handleClose}
-            visible={visible}
-          >
-            <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
-              <Search
-                placeholder="请输入终端ID"
-                allowClear
-                enterButton="搜索"
-                size="middle"
-                onSearch={onSearch}
-                style={{ padding: '24px' }}
-              />
-              <List split={false} style={{ padding: '12px 0', flex: 1, overflowY: 'auto', background: 'rgb(240,242,245)' }}>
-                {
-                  deviceList.map(item =>
-                    <List.Item key={item.deviceId} onClick={() => handleSelect(item)}>
-                      <Card className='listCard' hoverable>
-                        <Descriptions labelStyle={{ width: '72px', display: 'inline-block', textAlign: 'end' }} >
-                          <Descriptions.Item span={3} label='型号名称'>{item.modelName}</Descriptions.Item>
-                          <Descriptions.Item span={3} label='协议'>{item.protocol}</Descriptions.Item>
-                          <Descriptions.Item span={3} label='终端ID'>{item.terminalId}</Descriptions.Item>
-                          <Descriptions.Item span={3} label='通道列表'>{item.deviceChannelList}</Descriptions.Item>
-                        </Descriptions>
-                        {
-                          device && item.deviceId == device.deviceId && <img src={selectedImg} />
-                        }
-                      </Card>
-                    </List.Item>
-                  )
-                }
-
-              </List>
-              <div style={{ padding: '24px' }}>
-                <Button
-                  type="primary"
-                  style={{ float: 'right' }}
-                  loading={loading}
-                  onClick={handleOk}
-                >
-                  确定
-                </Button>
-              </div>
-            </div>
-          </Drawer>
+          <DeviceInfo machineryId={id} />
         </ProCard.TabPane>
       </ProCard>
     </PageHeaderWrapper>

src/pages/Machinery/MachineryType/index.jsx

@@ -41,7 +41,7 @@ export default (props) => {
             actionRef.current.reload();
           })
           .catch((err) => {
-            console.log(err.message)
+            console.log(err.message);
           });
       },
     });
@@ -53,12 +53,14 @@ export default (props) => {
   };
 
   const handleDelete = (val) => {
-    deleteMachineryType(val).then(() => {
-      message.success('删除成功');
-      actionRef.current.reload();
-    }).catch((err) => {
-      console.log(err.message)
-    });
+    deleteMachineryType(val)
+      .then(() => {
+        message.success('删除成功');
+        actionRef.current.reload();
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   };
 
   const Submit = (data) => {
@@ -159,9 +161,19 @@ export default (props) => {
         footer={null}
       >
         <Form {...formItemLayout} onFinish={Submit} form={form}>
-          <FormItem label="分类名" name="name">
+          <FormItem label="分类名" name="name" rules={[{ required: true, message: '请选择' }]}>
             <Input placeholder="请输入分类名" />
           </FormItem>
+          <FormItem
+            label="是否大屏展示"
+            name="screenStatis"
+            rules={[{ required: true, message: '请选择' }]}
+          >
+            <Select placeholder="请选择是否大屏展示">
+              <Option value={0}>否</Option>
+              <Option value={1}>是</Option>
+            </Select>
+          </FormItem>
           <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
             <Select placeholder="请选择是否发布">
               <Option value={1}>发布</Option>

src/pages/Machinery/Org/RuralMarker.js

@@ -0,0 +1,27 @@
+import ruralMarkerImg from '@/assets/images/screen/map-rural.png';
+
+export default function getRuralMarker(AMap, map, opts = {}) {
+  const marker = new AMap.Marker({
+    icon: ruralMarkerImg,
+    anchor: 'top-center',
+    offset: new AMap.Pixel(0, 0),
+    ...opts,
+  });
+
+  // 合作社数据
+  const { name, address, machineryNum, phone } = opts?.extData;
+
+  marker.setLabel({
+    direction: 'top',
+    offset: new AMap.Pixel(0, 0),
+    content: `
+    <div class='geo-map-rural-box' >
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>名 称</span>：${name}</div>
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${address}</div>
+      <div class="borderBox">农机数量：${machineryNum || 0} 辆</div>
+      <div class="borderBox">联系电话：${phone}</div>
+    </div>`,
+  });
+
+  return marker;
+}

src/pages/Machinery/Org/index.jsx

@@ -225,20 +225,9 @@ export default (props) => {
                   ))}
                 </Select>
               </FormItem>
-              {/* <FormItem
-                label="身份"
-                name="role"
-                rules={[{ required: true, message: '请选择身份' }]}
-              >
-                <Select placeholder="请选择身份" style={{ width: '350px' }}>
-                  <Option value="合作社" key="合作社" />
-                  <Option value="个体户" key="个体户" />
-                </Select>
-              </FormItem> */}
               <FormItem label="员工数">{listForm?.workerNum || 0}</FormItem>
               <FormItem label="农机数">{listForm?.machineryNum || 0}</FormItem>
               <FormItem label="订单完成数">{listForm?.orderNum || 0}</FormItem>
-              <FormItem label="评分">{listForm?.score || 0}</FormItem>
               <FormItem label=" " colon={false}>
                 <Button type="primary" loading={loading} htmlType="submit">
                   保存

src/pages/Machinery/Person/components/OrgTree.jsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Card,
+  Tree,
+} from 'antd';
+import { getCooperativeList } from '@/services/cooperative';
+
+export default (props) => {
+  const { setOrgId, setCooperativeList } = props
+  const [data, setData] = useState([]);
+
+  // 动态生成树
+  const handelNode = (item) => {
+    let node = (
+      <div
+        key={item.orgId}
+        style={{
+          justifyContent: 'space-between',
+          display: 'flex',
+          padding: '8px 0',
+        }}
+      >
+        <span>{item.title}</span>
+      </div>
+    );
+    return node;
+  };
+  const onSelect = (checkedKeys, info) => {
+    if (info.selected) {
+      setOrgId(info.node.key);
+    } else {
+      setOrgId();
+    }
+  };
+  useEffect(() => {
+    getCooperativeList({ pageSize: 500 })
+      .then((res) => {
+        setCooperativeList(res.records);
+        const list = res.records?.map((item) => {
+          return { title: item.name, key: item.orgId };
+        });
+        setData(list);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [])
+  return (
+    <Card title="合作社列表">
+      <Tree
+        onSelect={onSelect}
+        className="treeClass"
+        titleRender={(data) => handelNode(data)}
+        treeData={data}
+      />
+    </Card>
+  )
+}

src/pages/Machinery/Person/components/RoleModel.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  message,
+  List,
+  Checkbox,
+} from 'antd';
+import { getRoleList } from '@/services/role';
+import { addUserUserRole, deleteUserRole } from '@/services/userRole';
+export default (props) => {
+
+  const { rUserId, setRUserId, currentCheckbox, setCurrentCheckbox, editRoleModal, setEditRoleModal } = props
+  const [roleList, setRoleList] = useState([]);
+  const [rLoading, setRLoading] = useState(false);
+
+  //授权弹窗点击取消按钮
+  const onRoleCancel = () => {
+    setRUserId();
+    setCurrentCheckbox();
+    setEditRoleModal(false);
+  };
+  //授权角色弹窗点击保存按钮
+  const handelOk = () => {
+    if (!currentCheckbox) {
+      message.info('请选择角色');
+      return;
+    }
+    setRLoading(true);
+    if (currentCheckbox.length === 0) {
+      deleteUserRole(rUserId)
+        .then(() => {
+          message.success('取消授权角色成功');
+          setRLoading(false);
+          onRoleCancel();
+        })
+        .catch((err) => {
+          console.log(err.message);
+          setRLoading(false);
+        });
+    } else {
+      addUserUserRole(
+        rUserId,
+        currentCheckbox.map((item) => {
+          return { userId: rUserId, roleId: item };
+        }),
+      )
+        .then(() => {
+          message.success('授权角色成功');
+          setRLoading(false);
+          onRoleCancel();
+        })
+        .catch((err) => {
+          console.log(err.message);
+          setRLoading(false);
+        });
+    }
+  };
+  const handleCheckboxChange = (list) => {
+    setCurrentCheckbox(list);
+  };
+  useEffect(() => {
+    //获取角色列表数据
+    getRoleList({ pageSize: 999 })
+      .then((res) => {
+        setRoleList(res.records);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+  return (
+    <Modal
+      forceRender
+      title="授权角色"
+      visible={editRoleModal}
+      onCancel={onRoleCancel}
+      keyboard={false}
+      maskClosable={false}
+      destroyOnClose={true}
+      onOk={handelOk}
+      confirmLoading={rLoading}
+    >
+      <Checkbox.Group
+        style={{ width: '100%' }}
+        value={currentCheckbox}
+        onChange={handleCheckboxChange}
+      >
+        <List
+          dataSource={roleList}
+          renderItem={(item) => (
+            <List.Item>
+              <Checkbox value={item.roleId}>{item.name}</Checkbox>
+            </List.Item>
+          )}
+        />
+      </Checkbox.Group>
+    </Modal>
+
+  )
+}

src/pages/Machinery/Person/components/UserModal.jsx

@@ -0,0 +1,161 @@
+import {
+  Button,
+  Modal,
+  Form,
+  Input,
+  message,
+  Radio,
+  Select,
+} from 'antd';
+import { useEffect, useState } from 'react';
+import Search from '@/components/CooperativeSearch';
+import {
+  addUser,
+  updateUser,
+  getDefaultPassword
+} from '@/services/user';
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+export default (props) => {
+  const { editModal, onCancel, actionRef, form, orgId, userId } = props
+  const [loading, setLoading] = useState(false);
+  const [password, setPassWord] = useState('');
+
+  // 编辑弹窗的表单提交
+  const Submit = (values) => {
+    const newData = { ...values };
+    if (!newData.sex && newData.sex !== 0) {
+      newData.sex = 1;
+    }
+    setLoading(true);
+    if (!/^1[0-9]{10}$/.test(newData.phone)) {
+      message.warning('请输入正确的十一位手机号');
+      setLoading(false);
+      return false;
+    }
+    if (
+      !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
+        newData.idCard,
+      )
+    ) {
+      message.warning('请输入正确的身份证号');
+      setLoading(false);
+      return false;
+    }
+
+    if (userId) {
+      updateUser(userId, newData)
+        .then(() => {
+          setLoading(false);
+          message.success(`修改成功`);
+          onCancel();
+          actionRef.current.reload();
+        })
+        .catch((err) => {
+          setLoading(false);
+          console.log(err.message);
+        });
+    } else {
+      addUser(newData)
+        .then(() => {
+          setLoading(false);
+          message.success(`保存成功`);
+          onCancel();
+          actionRef.current.reload();
+        })
+        .catch((err) => {
+          setLoading(false);
+          message.error(err.message || err);
+        });
+    }
+  };
+  // 弹窗表单中合作社搜索框改变事件目前没用
+  const handelChange = () => { };
+  useEffect(() => {
+    //获取账号默认密码
+    getDefaultPassword()
+      .then((res) => {
+        setPassWord(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [])
+  return (
+    <Modal
+      forceRender
+      title={userId ? '人员编辑' : '人员新增'}
+      visible={editModal}
+      onCancel={onCancel}
+      keyboard={false}
+      maskClosable={false}
+      destroyOnClose={true}
+      footer={null}
+    >
+      <Form {...formItemLayout} onFinish={Submit} form={form}>
+        <FormItem label="用户名" name="userName" rules={[{ required: true, message: '请输入' }]}>
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem label="性别" name="sex" rules={[{ required: true, message: '请选择' }]}>
+          <Radio.Group>
+            <Radio value={1}>男</Radio>
+            <Radio value={0}>女</Radio>
+          </Radio.Group>
+        </FormItem>
+        <FormItem label="手机号" name="phone" rules={[{ required: true, message: '请输入' }]}>
+          <Input maxLength="11" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="身份证" name="idCard" rules={[{ required: true, message: '请输入' }]}>
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem
+          label="登录账号"
+          name="loginName"
+          rules={[{ required: true, message: '请输入登录账号' }]}
+        >
+          <Input placeholder="请输入" />
+        </FormItem>
+        <FormItem label=" " colon={false} style={{ height: '4px', marginTop: '-28px' }}>
+          <span style={{ opacity: '0.7' }}>默认密码{password}</span>
+        </FormItem>
+        <FormItem label="所属合作社" name="orgId" rules={[{ required: true, message: '请输入' }]}>
+          <Search placeholder="请输入合作社" disabled={orgId && !userId ? true : false} onChange={handelChange} />
+        </FormItem>
+        {userId && (
+          <FormItem
+            label="合作社管理员"
+            name="isOrgManager"
+            rules={[{ required: true, message: '请选择' }]}
+          >
+            <Select placeholder="请选择是否启用">
+              <Option value={false}>否</Option>
+              <Option value={true}>是</Option>
+            </Select>
+          </FormItem>
+        )}
+        <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
+          <Select placeholder="请选择是否启用">
+            <Option value={1}>启用</Option>
+            <Option value={0}>禁用</Option>
+          </Select>
+        </FormItem>
+        <FormItem label=" " colon={false}>
+          <Button type="default" onClick={onCancel}>
+            取消
+          </Button>
+          <Button
+            type="primary"
+            loading={loading}
+            htmlType="Submit"
+            style={{ marginLeft: '4em' }}
+          >
+            确认
+          </Button>
+        </FormItem>
+      </Form>
+    </Modal>
+
+  )
+}

src/pages/Machinery/Person/index.jsx

@@ -4,138 +4,56 @@ import {
   Popconfirm,
   Modal,
   Form,
-  Input,
   message,
-  Radio,
-  Select,
-  List,
   Row,
   Col,
-  Card,
-  Tree,
-  Checkbox,
 } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
-import { getCooperativeList } from '@/services/cooperative';
 import {
   getUserList,
-  addUser,
   deleteUser,
   updateUser,
-  getDefaultPassword,
   getUserDetail,
 } from '@/services/user';
-import { getRoleList } from '@/services/role';
-import { getUserRoleList, addUserUserRole, deleteUserRole } from '@/services/userRole';
+import { getUserRoleList } from '@/services/userRole';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import PageTable from '@/components/PageTable';
 import moment from 'moment';
-import Search from '@/components/CooperativeSearch';
 import './index.less';
+import OrgTree from './components/OrgTree';
+import UserModal from './components/UserModal';
+import RoleModel from './components/RoleModel';
 
-const FormItem = Form.Item;
-const { Option } = Select;
 const formatterTime = (val) => {
   return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
 };
 export default (props) => {
   //编辑弹窗
-  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
   const [form] = Form.useForm();
   const [editModal, setEditModal] = useState(false);
-  const [loading, setLoading] = useState(false);
   const [userId, setuserId] = useState();
-  const [password, setPassWord] = useState('');
   const [cooperativeList, setCooperativeList] = useState([]);
 
   const [editRoleModal, setEditRoleModal] = useState(false);
-  const [rLoading, setRLoading] = useState(false);
   const [rUserId, setRUserId] = useState();
-  const [roleList, setRoleList] = useState([]);
   const [currentCheckbox, setCurrentCheckbox] = useState();
   //列表数据
   const actionRef = useRef();
-  const [data, setData] = useState([]);
   const [orgId, setOrgId] = useState();
 
-  // 动态生成树
-  const handelNode = (item) => {
-    let node = (
-      <div
-        key={item.orgId}
-        style={{
-          justifyContent: 'space-between',
-          display: 'flex',
-          padding: '8px 0',
-        }}
-      >
-        <span>{item.title}</span>
-      </div>
-    );
-    return node;
-  };
-  const onSelect = (checkedKeys, info) => {
-    if (info.selected) {
-      setOrgId(info.node.key);
-    } else {
-      setOrgId();
-    }
-  };
-  // 编辑弹窗的表单提交
-  const Submit = (values) => {
-    const newData = { ...values };
-    if (!newData.sex && newData.sex !== 0) {
-      newData.sex = 1;
-    }
-    setLoading(true);
-    if (!/^1[0-9]{10}$/.test(newData.phone)) {
-      message.warning('请输入正确的十一位手机号');
-      setLoading(false);
-      return false;
-    }
-    if (!/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(newData.idCard)) {
-      message.warning('请输入正确的身份证号');
-      setLoading(false);
-      return false;
-    }
-
-    if (userId) {
-      updateUser(userId, newData).then(() => {
-        setLoading(false);
-        message.success(`修改成功`);
-        onCancel();
-        actionRef.current.reload();
-      }).catch((err) => {
-        setLoading(false);
-        console.log(err.message)
-      });
-    } else {
-      addUser(newData)
-        .then(() => {
-          setLoading(false);
-          message.success(`保存成功`);
-          onCancel();
-          actionRef.current.reload();
-        })
-        .catch((err) => {
-          setLoading(false);
-          message.error(err.message || err);
-        });
-    }
-
-  };
   //表单点击取消按钮
   const onCancel = () => {
     setuserId();
     form.resetFields();
     setEditModal(false);
   };
-  // 弹窗表单中合作社搜索框改变事件目前没用
-  const handelChange = () => { };
 
   // 列表点击编辑按钮
   const handleEdit = (val) => {
     setuserId(val.userId);
+    if (!userId && orgId) {
+      form.setFieldsValue({ orgId: orgId })
+    }
     setEditModal(true);
   };
   //列表点击删除按钮
@@ -146,7 +64,7 @@ export default (props) => {
         actionRef.current.reload();
       })
       .catch((err) => {
-        console.log(err.message)
+        console.log(err.message);
       });
   };
   //列表切换人员状态方法
@@ -165,119 +83,66 @@ export default (props) => {
             actionRef.current.reload();
           })
           .catch((err) => {
-            console.log(err.message)
+            console.log(err.message);
           });
       },
     });
   };
-
+  //点击授权角色方法
   const handleRole = (val) => {
     setRUserId(val.userId);
-    getUserRoleList({ user_id: val.userId }).then((res) => {
-      if (res.length !== 0) {
-        setCurrentCheckbox(res.map((item) => item.roleId));
-      }
-    }).catch((err) => {
-      console.log(err.message)
-    });
+    getUserRoleList({ user_id: val.userId })
+      .then((res) => {
+        if (res.length !== 0) {
+          setCurrentCheckbox(res.map((item) => item.roleId));
+        }
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
     setEditRoleModal(true);
   };
-  //授权弹窗点击取消按钮
-  const onRoleCancel = () => {
-    setRUserId();
-    setCurrentCheckbox();
-    form.resetFields();
-    setEditRoleModal(false);
-  };
-  const handelOk = () => {
-    if (!currentCheckbox) {
-      message.info('请选择角色');
-      return;
-    }
-    setRLoading(true);
-    if (currentCheckbox.length === 0) {
-      deleteUserRole(rUserId)
-        .then(() => {
-          message.success('取消授权角色成功');
-          setRLoading(false);
-          onRoleCancel();
-        })
-        .catch((err) => {
-          console.log(err.message)
-          setRLoading(false);
-        });
-    } else {
-      addUserUserRole(
-        rUserId,
-        currentCheckbox.map((item) => {
-          return { userId: rUserId, roleId: item };
-        }),
-      )
-        .then(() => {
-          message.success('授权角色成功');
-          setRLoading(false);
-          onRoleCancel();
+
+  //监控
+  useEffect(() => {
+    if (userId) {
+      getUserDetail(userId)
+        .then((res) => {
+          if (res.orgId === '-1') {
+            form.setFieldsValue({ ...res, orgId: cooperativeList[0].orgId });
+          } else {
+            form.setFieldsValue(res);
+          }
         })
         .catch((err) => {
-          console.log(err.message)
-          setRLoading(false);
+          console.log(err.message);
         });
-    }
-  };
-  const handleCheckboxChange = (list) => {
-    setCurrentCheckbox(list);
-  };
-  useEffect(() => {
-    //获取账号默认密码
-    getDefaultPassword().then((res) => {
-      setPassWord(res);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-    //获取合作社列表数据
-    getCooperativeList({ pageSize: 999 }).then((res) => {
-      setCooperativeList(res.records);
-      const list = res.records?.map((item) => {
-        return { title: item.name, key: item.orgId };
-      });
-      setData(list);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-    //获取角色列表数据
-    getRoleList({ pageSize: 999 }).then((res) => {
-      setRoleList(res.records);
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  }, []);
-  useEffect(() => {
-    if (userId) {
-      getUserDetail(userId).then((res) => {
-        if (res.orgId === '-1') {
-          form.setFieldsValue({ ...res, orgId: cooperativeList[0].orgId });
-        } else {
-          form.setFieldsValue(res);
-        }
-      }).catch((err) => {
-        console.log(err.message)
-      });
     } else {
-      form.resetFields();
+      if (orgId) {
+        form.setFieldsValue({ orgId: orgId })
+      } else {
+        form.resetFields();
+      }
     }
-  }, [userId]);
+  }, [orgId, userId]);
 
   const actions = () => [
-    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
+    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={handleEdit}>
       新增
     </Button>,
   ];
   const columns = [
     {
-      title: '用户名',
+      title: '姓名',
       dataIndex: 'userName',
       key: 'userName',
     },
+    {
+      title: '昵称',
+      dataIndex: 'nickName',
+      key: 'nickName',
+      search: false,
+    },
     {
       title: '性别',
       dataIndex: 'sex',
@@ -355,14 +220,7 @@ export default (props) => {
     <PageHeaderWrapper>
       <Row gutter={16}>
         <Col span={6}>
-          <Card title="合作社列表">
-            <Tree
-              onSelect={onSelect}
-              className="treeClass"
-              titleRender={(data) => handelNode(data)}
-              treeData={data}
-            />
-          </Card>
+          <OrgTree setOrgId={setOrgId} setCooperativeList={setCooperativeList} />
         </Col>
         <Col span={18}>
           <PageTable
@@ -378,96 +236,8 @@ export default (props) => {
           />
         </Col>
       </Row>
-      <Modal
-        forceRender
-        title={userId ? '人员编辑' : '人员新增'}
-        visible={editModal}
-        onCancel={onCancel}
-        keyboard={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        footer={null}
-      >
-        <Form {...formItemLayout} onFinish={Submit} form={form}>
-          <FormItem label="用户名" name="userName" rules={[{ required: true, message: '请输入' }]}>
-            <Input placeholder="请输入" />
-          </FormItem>
-          <FormItem label="性别" name="sex">
-            <Radio.Group>
-              <Radio value={1}>男</Radio>
-              <Radio value={0}>女</Radio>
-            </Radio.Group>
-          </FormItem>
-          <FormItem label="手机号" name="phone" rules={[{ required: true, message: '请输入' }]}>
-            <Input maxLength="11" placeholder="请输入" />
-          </FormItem>
-          <FormItem label="身份证" name="idCard" rules={[{ required: true, message: '请输入' }]}>
-            <Input placeholder="请输入" />
-          </FormItem>
-          <FormItem label="登录账号" name="loginName" rules={[{ required: true, message: '请输入登录账号' }]}>
-            <Input placeholder="请输入" />
-          </FormItem>
-          <FormItem label=" " colon={false} style={{ height: '4px', marginTop: '-28px' }}>
-            <span style={{ opacity: '0.7' }}>默认密码{password}</span>
-          </FormItem>
-          <FormItem label="所属合作社" name="orgId" rules={[{ required: true, message: '请输入' }]}>
-            <Search placeholder="请输入合作社" onChange={handelChange} />
-          </FormItem>
-          {
-            userId && <FormItem label="合作社管理员" name="isOrgManager" rules={[{ required: true, message: '请选择' }]}>
-              <Select placeholder="请选择是否启用">
-                <Option value={false}>否</Option>
-                <Option value={true}>是</Option>
-              </Select>
-            </FormItem>
-          }
-          <FormItem label="状态" name="status" rules={[{ required: true, message: '请选择' }]}>
-            <Select placeholder="请选择是否启用">
-              <Option value={1}>启用</Option>
-              <Option value={0}>禁用</Option>
-            </Select>
-          </FormItem>
-          <FormItem label=" " colon={false}>
-            <Button type="default" onClick={onCancel}>
-              取消
-            </Button>
-            <Button
-              type="primary"
-              loading={loading}
-              htmlType="Submit"
-              style={{ marginLeft: '4em' }}
-            >
-              确认
-            </Button>
-          </FormItem>
-        </Form>
-      </Modal>
-      <Modal
-        forceRender
-        title="授权角色"
-        visible={editRoleModal}
-        onCancel={onRoleCancel}
-        keyboard={false}
-        maskClosable={false}
-        destroyOnClose={true}
-        onOk={handelOk}
-        confirmLoading={rLoading}
-      >
-        <Checkbox.Group
-          style={{ width: '100%' }}
-          value={currentCheckbox}
-          onChange={handleCheckboxChange}
-        >
-          <List
-            dataSource={roleList}
-            renderItem={(item) => (
-              <List.Item>
-                <Checkbox value={item.roleId}>{item.name}</Checkbox>
-              </List.Item>
-            )}
-          />
-        </Checkbox.Group>
-      </Modal>
+      <UserModal editModal={editModal} onCancel={onCancel} actionRef={actionRef} form={form} orgId={orgId} userId={userId} />
+      <RoleModel rUserId={rUserId} setRUserId={setRUserId} currentCheckbox={currentCheckbox} setCurrentCheckbox={setCurrentCheckbox} editRoleModal={editRoleModal} setEditRoleModal={setEditRoleModal} />
     </PageHeaderWrapper>
   );
 };

src/pages/MonitoringScreen/components/List/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Autoplay } from 'swiper';
 import 'swiper/css';
@@ -7,14 +7,30 @@ import Item from './Item';
 import Styles from './style.less';
 
 export default (props) => {
-  // 每次加载 4 个
-  const tm = 4;
   const { title, color, children } = props;
-
+  const swiperRef = useRef();
   const classList = classNames(Styles['list-title'], {
     [Styles['yellow-title']]: color !== 'green',
     [Styles['green-title']]: color === 'green',
   });
+  const initAutoPlay = useCallback(
+    (swiper) => {
+      if (!children?.length || children?.length <= 3) {
+        swiper.autoplay.stop();
+      } else {
+        swiper.autoplay.start();
+      }
+    },
+    [children?.length],
+  );
+
+  useEffect(() => {
+    if (swiperRef.current) {
+      initAutoPlay(swiperRef.current);
+    }
+  }, [children?.length, initAutoPlay]);
+
+  const enable = children?.length && children?.length > 3;
 
   return (
     <div className={Styles['screen-list']}>
@@ -23,12 +39,18 @@ export default (props) => {
       </div>
       <Swiper
         height={48}
+        onSwiper={(swiper) => {
+          swiperRef.current = swiper;
+          initAutoPlay(swiper);
+        }}
         className={Styles['list-body']}
+        //因为loop只能在组件初始化时改变所以加一个不让它创建初始化的属性就可以了
+        init={false}
         autoplay={{
           delay: 2500,
           disableOnInteraction: false,
         }}
-        loop
+        loop={enable}
         loopAdditionalSlides={2}
         modules={[Autoplay]}
         direction="vertical"

src/pages/MonitoringScreen/components/MachineryType.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import * as echarts from 'echarts/core';
 import deepCopy from '@/utils/deepCopy';
 import { hex2Rgb } from '@/utils/color';
@@ -85,14 +85,21 @@ const defaultOpt = {
 };
 
 export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.yAxis.data = props.source.map((x) => x.name);
-  option.series[0].data = props.source.map((x, i) => ({
-    value: x.value,
-    itemStyle: {
-      color: colorList[i % 3],
-    },
-  }));
+  const option2 = useMemo(() => deepCopy(defaultOpt), []);
+
+  const [option, setOption] = useState(option2);
+
+  useEffect(() => {
+    var option3 = { ...option2 };
+    option3.yAxis.data = props.source.map((x) => x.name);
+    option3.series[0].data = props.source.map((x, i) => ({
+      value: x.value,
+      itemStyle: {
+        color: colorList[i % 3],
+      },
+    }));
+    setOption(option3);
+  }, [props.source]);
 
   return <BasicChart title="农机类型统计" option={option} />;
 };

src/pages/MonitoringScreen/components/WorkArea.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import deepCopy from '@/utils/deepCopy';
 import { colorArr } from '@/components/ScreenBox/utils';
 import BasicChart from './BasicChart';
@@ -36,9 +36,17 @@ const defaultOpt = {
 };
 
 export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.series[0].data = props.source;
-  (option.series[0].data[0] || {}).selected = true; // 设置第一个是选中状态
+  const option2 = useMemo(() => deepCopy(defaultOpt), []);
+
+  const [option, setOption] = useState(option2);
+
+  useEffect(() => {
+    var option3 = { ...option2 };
+    option3.series[0].data = props.source;
+    // 设置第一个是选中状态
+    (option3.series[0].data[0] || {}).selected = true;
+    setOption(option3);
+  }, [props.source]);
 
   return <BasicChart title="农机作业量面积统计" option={option} />;
 };

src/pages/MonitoringScreen/components/WorkData.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import deepCopy from '@/utils/deepCopy';
 import { colorArr } from '@/components/ScreenBox/utils';
 import BasicChart from './BasicChart';
@@ -44,8 +44,16 @@ const defaultOpt = {
 };
 
 export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.series[0].data = props.source;
+  const option2 = useMemo(() => deepCopy(defaultOpt), []);
+
+  const [option, setOption] = useState(option2);
+
+  useEffect(() => {
+    var option3 = { ...option2 };
+    option3.series[0].data = props.source;
+    // 设置第一个是选中状态
+    setOption(option3);
+  }, [props.source]);
 
   return <BasicChart title="农机作业数统计" option={option} />;
 };

src/pages/MonitoringScreen/index.jsx

@@ -1,18 +1,27 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { history, Link } from 'umi';
-import classNames from 'classnames';
-import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
+import getWeather from '@/components/AMap/weather';
 import GeoMap from '@/components/GeoMap';
-import StatisCard from '@/components/ScreenBox/StatisCard';
+import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 import SquareBox from '@/components/ScreenBox/SquareBox';
-import getWeather from '@/components/AMap/weather';
-import { useParticlesJs } from './hook';
-import MachineryType from './components/MachineryType';
+import StatisCard from '@/components/ScreenBox/StatisCard';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import {
+  getBasic,
+  getOrgDetail,
+  getTypeList,
+  getAreaDetail,
+  getMachineryBar,
+  getWorkNumPie,
+  getTypeBasic,
+  getMessageList,
+} from '@/services/monitoringScreen';
 import MachineryStatus from './components/MachineryStatus';
+import MachineryType from './components/MachineryType';
+import { useParticlesJs } from './hook';
 
-import WorkArea from './components/WorkArea';
-import List from './components/List';
 import ColorFont from './components/ColorFont';
+import List from './components/List';
+import WorkArea from './components/WorkArea';
 import WorkData from './components/WorkData';
 import Styles from './style.less';
 
@@ -20,11 +29,9 @@ export default (props) => {
   const screenRef = useRef();
   const [weather, setWeather] = useState('暂无天气信息');
 
-  const [machineryTypeData, setMachineryTypeData] = useState([
-    { name: '收割机', value: 200 },
-    { name: '播种机', value: 100 },
-    { name: '农药机', value: 50 },
-  ]);
+  const [basic, setBasic] = useState();
+
+  const [machineryTypeData, setMachineryTypeData] = useState([]);
 
   const [machineryStatusData, setMachineryStatusData] = useState([
     { name: '预约', value: 350 },
@@ -34,109 +41,115 @@ export default (props) => {
     { name: '维修', value: 380 },
   ]);
 
-  const [workData, setWorkData] = useState([
-    { name: '收割机', value: 35 },
-    { name: '播种机', value: 35 },
-    { name: '农药机', value: 30 },
-    { name: '其他', value: 180 },
-  ]);
+  const [workData, setWorkData] = useState([]);
 
-  const [workAreaData, setWorkAreaData] = useState([
-    { name: '收割机', value: 350 },
-    { name: '播种机', value: 900 },
-    { name: '农药机', value: 650 },
-    { name: '其他', value: 180 },
-  ]);
+  const [workAreaData, setWorkAreaData] = useState([]);
 
-  const [machineTypeList, setMachineTypeList] = useState([
-    { id: 't0', name: '合作社' },
-    { id: 't1', name: '收割机' },
-    { id: 't2', name: '播种机' },
-    { id: 't3', name: '农药机' },
-  ]);
+  const [machineTypeList, setMachineTypeList] = useState([{ id: 't0', name: '合作社' }]);
 
-  const [orgList, setOrgList] = useState([
-    {
-      orgId: 1,
-      name: '合作社1',
-      address: '合作社地址1',
-      phone: '13823838438',
-      machineNum: 12,
-      lnglat: [112.039556, 32.775169],
-    },
-    {
-      orgId: 2,
-      name: '合作社2',
-      address: '合作社地址2',
-      phone: '13823838438',
-      machineNum: 68,
-      lnglat: [112.181692, 32.759002],
-    },
-    {
-      orgId: 3,
-      name: '合作社3',
-      address: '合作社地址3',
-      phone: '13823838438',
-      machineNum: 3,
-      lnglat: [111.958532, 32.631875],
-    },
-    {
-      orgId: 4,
-      name: '合作社4',
-      address: '合作社地址4',
-      phone: '13823838438',
-      machineNum: 42,
-      lnglat: [112.164526, 32.603536],
-    },
-  ]);
+  const [orgList, setOrgList] = useState();
 
-  const [machineList, setMachineList] = useState([
-    {
-      machineryId: 'm1',
-      name: '农机1',
-      typeId: 't1',
-      orgName: '合作社1',
-      lnglat: [111.867906, 32.799276],
-    },
-    {
-      machineryId: 'm2',
-      name: '农机2',
-      typeId: 't2',
-      orgName: '合作社1',
-      lnglat: [112.087632, 32.66527],
-    },
-    {
-      machineryId: 'm3',
-      name: '农机3',
-      typeId: 't1',
-      orgName: '合作社2',
-      lnglat: [112.237321, 32.631737],
-    },
-    {
-      machineryId: 'm4',
-      name: '农机4',
-      typeId: 't3',
-      orgName: '合作社2',
-      lnglat: [112.002488, 32.563476],
-    },
-    {
-      machineryId: 'm5',
-      name: '农机5',
-      typeId: 't3',
-      orgName: '合作社3',
-      lnglat: [112.105485, 32.791195],
-    },
-  ]);
+  const [machineList, setMachineList] = useState([]);
+  const [appointList, setAppointList] = useState();
+  const [acceptList, setAcceptList] = useState();
 
   useEffect(() => {
-    getWeather('邓州市')
+    //顶部基本数据
+    getBasic()
+      .then((res) => {
+        var data = {};
+        for (let i = 0; i < res.length; i++) {
+          const element = res[i];
+          data[element.name] = element.value;
+        }
+        setBasic(data);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //地图上合作社的marker
+    getOrgDetail()
+      .then((res) => {
+        res.forEach((item) => {
+          item.lnglat = [item['lng'] - 0, item['lat'] - 0];
+          item.machineryNum = item.machineryNum - 0;
+        });
+        setOrgList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //获取地图上所有农机markers
+    getTypeBasic()
+      .then((res) => {
+        res.forEach((item) => {
+          item.lnglat = [item.location.split(',')[0] - 0, item.location.split(',')[1] - 0];
+        });
+        setMachineList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //获取地图左侧选择的农机列表
+    getTypeList()
+      .then((res) => {
+        let data = [].concat(machineTypeList);
+        res.forEach((item) => {
+          data.push({ id: item.typeId, name: item.name });
+        });
+        setMachineTypeList(data);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //作业面积统计
+    getAreaDetail()
+      .then((res) => {
+        setWorkAreaData([].concat(res));
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //农机类型统计
+    getMachineryBar()
+      .then((res) => {
+        setMachineryTypeData(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //农机作业数统计
+    getWorkNumPie()
+      .then((res) => {
+        setWorkData(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+
+    getMessageList({ messageType: 'appoint' })
+      .then((res) => {
+        setAppointList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    getMessageList({ messageType: 'accept' })
+      .then((res) => {
+        setAcceptList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+
+    getWeather()
       .then((res) => {
         if (res && res.length) {
-          const { casts } = res[0];
+          const { casts, city } = res[0];
           const { dayweather, nighttemp, daytemp } = casts[0];
           const [min, max] =
             parseInt(nighttemp) > parseInt(daytemp) ? [daytemp, nighttemp] : [nighttemp, daytemp];
-          setWeather(`${dayweather} ${min}-${max} °C`);
+          setWeather(`${city} ${dayweather} ${min}-${max} °C`);
         } else {
           setWeather('暂无天气信息');
         }
@@ -168,10 +181,30 @@ export default (props) => {
           </div>
           <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
             <div className={Styles['statis-container']}>
-              <StatisCard color="#23E8AE" icon="icon1" value={2346} title="农机总数（台）" />
-              <StatisCard color="#0BDAFF" icon="icon2" value={528} title="农机使用数（台）" />
-              <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数（台）" />
-              <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数（台）" />
+              <StatisCard
+                color="#23E8AE"
+                icon="icon1"
+                value={basic?.totalMachineryNum}
+                title="农机总数（台）"
+              />
+              <StatisCard
+                color="#0BDAFF"
+                icon="icon2"
+                value={basic?.totalMachineryUsed}
+                title="农机使用数（台）"
+              />
+              <StatisCard
+                color="#F5CC5C"
+                icon="icon3"
+                value={basic?.totalOrderNum}
+                title="总预约数"
+              />
+              <StatisCard
+                color="#C579FF"
+                icon="icon4"
+                value={basic?.totalServiceNum}
+                title="总服务数"
+              />
             </div>
             <GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} />
           </div>
@@ -191,49 +224,28 @@ export default (props) => {
             <div className="flex" style={{ padding: '20px 0' }}>
               <div className="flex-1">
                 <List title="预约订单">
-                  <div>
-                    <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
-                    <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
-                    <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
-                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                    接到了此订单！正在赶往目的地！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
-                    <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
-                    <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
-                  </div>
-                  <div>
-                    <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
-                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                    接到了此订单！正在赶往目的地！
-                  </div>
+                  {appointList?.map((item) => {
+                    return (
+                      <div key={item.messageId}>
+                        <ColorFont color="#44F68B">[{item.appointTime}]</ColorFont>{' '}
+                        <ColorFont color="#F5CC5C">{item.appointPerson}</ColorFont> 预约了一台
+                        {item.appointMachineryType}。
+                      </div>
+                    );
+                  })}
                 </List>
               </div>
               <div className={classNames('flex-0', Styles['footer-middle'])} />
               <div className="flex-1">
                 <List title="作业订单" color="green">
-                  <div>
-                    <ColorFont color="#44F68B">[收割机001]</ColorFont>
-                    32s前接到了一个订单，距离目的地还有3.2公里，请农户耐心等待！
-                  </div>
-                  <div>
-                    <ColorFont color="#44F68B">[播种机008]</ColorFont>{' '}
-                    2分钟前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
-                  </div>
-                  <div>
-                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                    2个小时前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
-                  </div>
+                  {acceptList?.map((item) => {
+                    return (
+                      <div key={item.messageId}>
+                        <ColorFont color="#44F68B">[{item.acceptTime}]</ColorFont>{' '}
+                        <ColorFont color="#F5CC5C">{item.acceptPerson}</ColorFont> 接到了一个订单。
+                      </div>
+                    );
+                  })}
                 </List>
               </div>
             </div>

src/pages/OrderManage/JobWarning/detail.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Form, Button } from 'antd';
 import ProCard from '@ant-design/pro-card';
-import { getOrderDetail } from '@/services/order'
+import { getOrderDetail } from '@/services/order';
 import { history } from 'umi';
 
 const FormItem = Form.Item;
@@ -15,44 +15,28 @@ export default (props) => {
   const [dispatch, setDispatch] = useState();
 
   useEffect(() => {
-    getOrderDetail(id).then((res) => {
-      setDispatch(res)
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  }, [id])
+    getOrderDetail(id)
+      .then((res) => {
+        setDispatch(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, [id]);
   return (
     <Card>
       <ProCard tabs={{ type: 'card' }}>
         <ProCard.TabPane key={1} tab="订单详情">
           <Form {...formItemLayout}>
-            <FormItem label="订单号">
-              {dispatch?.orderNo}
-            </FormItem>
-            <FormItem label="客户姓名">
-              {dispatch?.personName}
-            </FormItem>
-            <FormItem label="联系电话">
-              {dispatch?.phone}
-            </FormItem>
-            <FormItem label="预约地址">
-              {dispatch?.address}
-            </FormItem>
-            <FormItem label="预约时间">
-              {dispatch?.appointmentDate}
-            </FormItem>
-            <FormItem label="合作社名">
-              {dispatch?.orgName}
-            </FormItem>
-            <FormItem label="农机类型">
-              {dispatch?.typeName}
-            </FormItem>
-            <FormItem label="农机">
-              {dispatch?.machineryName}
-            </FormItem>
-            <FormItem label="农机手">
-              {dispatch?.workName}
-            </FormItem>
+            <FormItem label="订单号">{dispatch?.orderNo}</FormItem>
+            <FormItem label="农户姓名">{dispatch?.personName}</FormItem>
+            <FormItem label="联系电话">{dispatch?.phone}</FormItem>
+            <FormItem label="预约地址">{dispatch?.address}</FormItem>
+            <FormItem label="预约时间">{dispatch?.appointmentDate}</FormItem>
+            <FormItem label="合作社名">{dispatch?.orgName}</FormItem>
+            <FormItem label="农机类型">{dispatch?.typeName}</FormItem>
+            <FormItem label="农机">{dispatch?.machineryName}</FormItem>
+            <FormItem label="农机手">{dispatch?.workName}</FormItem>
             <FormItem label=" " colon={false}>
               <Button type="default" onClick={() => goBack()}>
                 返回

src/pages/OrderManage/dispatch.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Card, Form, Button, Select, message, Modal } from 'antd';
 import ProCard from '@ant-design/pro-card';
-import { getOrderDetail } from '@/services/order'
+import { getOrderDetail } from '@/services/order';
 import { getMachineryList, getduty } from '@/services/machinery';
 import { history } from 'umi';
 import { getUserList } from '@/services/user';
@@ -18,116 +18,123 @@ export default (props) => {
   const { id } = location.query;
   const [dispatch, setDispatch] = useState();
   const [loading, setLoading] = useState(false);
-  const [dispatchId, setDispatchId] = useState()
+  const [dispatchId, setDispatchId] = useState();
   const [machineryList, setMachineryList] = useState([]);
-  const [userList, setUserList] = useState([])
+  const [userList, setUserList] = useState([]);
 
   const [cancelLoading, setCancelLoading] = useState(false);
 
   const submit = () => {
     if (!dispatch.machineryId) {
       message.warning('请选择调度的农机');
-      return
+      return;
     }
     if (!dispatch.workerId) {
       message.warning('请选择农机手');
-      return
+      return;
     }
-    setLoading(true)
-    addDispatch(dispatch).then(res => {
-      message.success('调度成功');
-      setLoading(false);
-      goBack()
-    }).catch((err) => {
-      setLoading(false);
-      message.error(err.message || err);
-    });
+    setLoading(true);
+    addDispatch(dispatch)
+      .then((res) => {
+        message.success('调度成功');
+        setLoading(false);
+        goBack();
+      })
+      .catch((err) => {
+        setLoading(false);
+        message.error(err.message || err);
+      });
   };
   const changeMachinery = (e) => {
-    getduty(e, { date: dispatch.appointmentDate.substr(0, 10) }).then((res => {
-      if (res.length != 0) {
-        message.info('该农机当天已有' + res.length + '条调度信息');
-      }
-      setDispatch({ ...dispatch, machineryId: e })
-    })).catch((err) => {
-      console.log(err.message)
-    });
-  }
+    getduty(e, { date: dispatch.appointmentDate.substr(0, 10) })
+      .then((res) => {
+        if (res.length != 0) {
+          message.info('该农机当天已有' + res.length + '条调度信息');
+        }
+        setDispatch({ ...dispatch, machineryId: e });
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  };
   const changeUser = (e) => {
-    setDispatch({ ...dispatch, workerId: e })
-  }
+    setDispatch({ ...dispatch, workerId: e });
+  };
   const onCancel = () => {
     Modal.confirm({
       title: '确认取消？',
       okText: '确认',
       cancelText: '取消',
       onOk() {
-        setCancelLoading(true)
-        cancelDispatch(dispatchId).then(() => {
-          setCancelLoading(false)
-          setDispatchId()
-          setDispatch({ ...dispatch, machineryId: null, workerId: null })
-          message.success('取消成功');
-        }).catch((err) => {
-          setCancelLoading(false);
-          message.error(err.message || err);
-        });
+        setCancelLoading(true);
+        cancelDispatch(dispatchId)
+          .then(() => {
+            setCancelLoading(false);
+            setDispatchId();
+            setDispatch({ ...dispatch, machineryId: null, workerId: null });
+            message.success('取消成功');
+          })
+          .catch((err) => {
+            setCancelLoading(false);
+            message.error(err.message || err);
+          });
       },
     });
-  }
+  };
   useEffect(() => {
-
-    getOrderDetail(id).then((res) => {
-      res.machineryId = null
-      res.typeId = res.machineryType
-      setDispatch(res)
-      getMachineryList({ orgId: res.orgId, status: 1, typeId: res.typeId, pageSize: 999 }).then((res2) => {
-        setMachineryList(res2.records)
-      }).catch((err) => {
-        console.log(err.message)
+    getOrderDetail(id)
+      .then((res) => {
+        res.machineryId = null;
+        res.typeId = res.machineryType;
+        setDispatch(res);
+        getMachineryList({ orgId: res.orgId, status: 1, typeId: res.typeId, pageSize: 999 })
+          .then((res2) => {
+            setMachineryList(res2.records);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
+        getUserList({ org_id: res.orgId, pageSize: 999 })
+          .then((res3) => {
+            setUserList(res3.records);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
+        if (res.dispatchStatus == 1) {
+          getdispatchId(id)
+            .then((res4) => {
+              setDispatchId(res4.dispatchId);
+              setDispatch({ ...res, machineryId: res4.machineryId, workerId: res4.workerId });
+            })
+            .catch((err) => {
+              console.log(err.message);
+            });
+        }
+      })
+      .catch((err) => {
+        console.log(err.message);
       });
-      getUserList({ org_id: res.orgId, pageSize: 999 }).then(res3 => {
-        setUserList(res3.records)
-      }).catch((err) => {
-        console.log(err.message)
-      });
-      if (res.dispatchStatus == 1) {
-        getdispatchId(id).then(res4 => {
-          setDispatchId(res4.dispatchId)
-          setDispatch({ ...res, machineryId: res4.machineryId, workerId: res4.workerId })
-        }).catch((err) => {
-          console.log(err.message)
-        });
-      }
-    }).catch((err) => {
-      console.log(err.message)
-    });
-  }, [id])
+  }, [id]);
   return (
     <Card>
       <ProCard tabs={{ type: 'card' }}>
         <ProCard.TabPane key={1} tab="订单调度">
           <Form {...formItemLayout}>
-            <FormItem label="客户姓名">
-              {dispatch?.personName}
-            </FormItem>
-            <FormItem label="联系电话">
-              {dispatch?.phone}
-            </FormItem>
-            <FormItem label="预约地址">
-              {dispatch?.address}
-            </FormItem>
-            <FormItem label="预约时间">
-              {dispatch?.appointmentDate}
-            </FormItem>
-            <FormItem label="合作社名">
-              {dispatch?.orgName}
-            </FormItem>
-            <FormItem label="农机类型">
-              {dispatch?.typeName}
-            </FormItem>
+            <FormItem label="农户姓名">{dispatch?.personName}</FormItem>
+            <FormItem label="联系电话">{dispatch?.phone}</FormItem>
+            <FormItem label="预约地址">{dispatch?.address}</FormItem>
+            <FormItem label="预约时间">{dispatch?.appointmentDate}</FormItem>
+            <FormItem label="合作社名">{dispatch?.orgName}</FormItem>
+            <FormItem label="农机类型">{dispatch?.typeName}</FormItem>
             <FormItem label="农机">
-              <Select placeholder="请选择" value={dispatch?.machineryId} onChange={changeMachinery} allowClear style={{ width: '350px' }}>
+              <Select
+                placeholder="请选择"
+                value={dispatch?.machineryId}
+                onChange={changeMachinery}
+                allowClear
+                style={{ width: '350px' }}
+              >
                 {machineryList.map((item) => (
                   <Option value={item.machineryId} key={item.machineryId}>
                     {item.name}
@@ -136,7 +143,13 @@ export default (props) => {
               </Select>
             </FormItem>
             <FormItem label="农机手">
-              <Select placeholder="请选择" value={dispatch?.workerId} onChange={changeUser} allowClear style={{ width: '350px' }}>
+              <Select
+                placeholder="请选择"
+                value={dispatch?.workerId}
+                onChange={changeUser}
+                allowClear
+                style={{ width: '350px' }}
+              >
                 {userList.map((item) => (
                   <Option value={item.userId} key={item.userId}>
                     {item.userName}
@@ -148,15 +161,20 @@ export default (props) => {
               <Button type="default" onClick={() => goBack()}>
                 返回
               </Button>
-              {
-                dispatchId ?
-                  <Button loading={cancelLoading} onClick={onCancel} style={{ marginLeft: '4em' }}>
-                    取消调度
-                  </Button> :
-                  <Button type="primary" loading={loading} onClick={submit} style={{ marginLeft: '4em' }}>
-                    保存
-                  </Button>
-              }
+              {dispatchId ? (
+                <Button loading={cancelLoading} onClick={onCancel} style={{ marginLeft: '4em' }}>
+                  取消调度
+                </Button>
+              ) : (
+                <Button
+                  type="primary"
+                  loading={loading}
+                  onClick={submit}
+                  style={{ marginLeft: '4em' }}
+                >
+                  保存
+                </Button>
+              )}
             </FormItem>
           </Form>
         </ProCard.TabPane>

src/pages/PlatformMessageManagement/MessageManageList/index.jsx

@@ -1,126 +1,39 @@
-import { history, Link } from 'umi';
-import { useRef, useState, useEffect } from 'react';
-import { Button, Popconfirm, message, Tooltip } from 'antd';
-import { PlusOutlined, QuestionCircleOutlined, DownOutlined } from '@ant-design/icons';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import ProTable from '@ant-design/pro-table';
+import PageTable from '@/components/PageTable';
+import { getWorkMassageList } from '@/services/workMessage'
 
 export default (props) => {
-  const dataSource = [
-    {
-      id: 2121329,
-      title: '这是是一个标题标题',
-      name: '胡彦斌',
-      pushPerson: '农机手',
-      status: 'APP内消息中心推送',
-    },
-  ];
-  const gotoDetail = (id) => {
-    history.push(`./MessageEdit`);
-  };
-
-  const actions = () => [
-    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => gotoDetail()}>
-      新增商户
-    </Button>,
-  ];
   const columns = [
     {
-      title: '消息ID',
-
-      key: 'id',
-      dataIndex: 'id',
-      search: false,
-
-      render: (t, record) => (
-        <Link key={1} to={`./edit?id=${record.shopId}`}>
-          {record.shopName}
-        </Link>
-      ),
-    },
-
-    {
-      title: '消息标题',
-      key: 'title',
-      dataIndex: 'title',
-      render: (t, record) => (
-        <Link key={1} to={`./package?shopId=${record.shopId}`}>
-          {record?.packageNum}
-        </Link>
-      ),
+      title: '订单号',
+      key: 'orderNo',
+      dataIndex: 'orderNo',
     },
-
     {
-      title: '推送对象',
-      key: 'pushPerson',
+      title: '消息',
+      key: 'messageType',
+      dataIndex: 'messageType',
       search: false,
-      dataIndex: 'pushPerson',
-      render: (t, record) => (record.pushPerson === 1 ? '农机手' : '农户'),
-    },
-
-    {
-      title: '推送方式',
-      key: 'status',
-      dataIndex: 'status',
-      // render: (t, record) => record.status === 1 ? '发布' : '未发布',
-      formItemProps: { label: '推送方式' },
-      valueType: 'select',
-      valueEnum: {
-        0: { text: '通知栏推送' },
-        1: { text: 'APP内消息中心推送' },
-        2: { text: '短信推送' },
+      render: (t, record) => {
+        console.log(t);
+        if (t === 'appoint') {
+          return record.appointTime + ' ' + record.appointPerson + ' 预约了一台' + record.appointMachineryType + '。'
+        }
+        else {
+          return record.acceptTime + ' ' + record.acceptPerson + ' 接到了一个订单。'
+        }
       },
-    },
-
-    {
-      title: (
-        <>
-          创建时间
-          <Tooltip placement="top">
-            <QuestionCircleOutlined style={{ marginLeft: 4 }} />
-          </Tooltip>
-        </>
-      ),
-      width: 140,
-      key: 'createdAt',
-      dataIndex: 'createdAt',
-      valueType: 'date',
-      // render: (t) => formatterTime(t),
-      sorter: (a, b) => a.createdAt - b.createdAt,
-    },
-
-    {
-      title: '操作',
-      valueType: 'option',
-      width: '300px',
-      render: (_, record) => [
-        <Link key={2} to={`./MessageEdit`}>
-          编辑
-        </Link>,
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record.noticeId)}
-          okText="确定"
-          cancelText="取消"
-        >
-          <a href="#">删除</a>
-        </Popconfirm>,
-      ],
-    },
+    }
   ];
 
   return (
     <PageHeaderWrapper>
-      {/* <ProTable
-        dataSource={dataSource}
+      <PageTable
+        request={getWorkMassageList}
         columns={columns}
-        // request={getList}
-        rowKey="id"
+        rowKey="messageId"
         options={false}
-        toolBarRender={actions}
-        scroll={{ x: 1000 }}
-      /> */}
+      />
     </PageHeaderWrapper>
   );
 };

src/pages/SystemManagement/Classification/index.jsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, Popconfirm, Modal, Form, Input, message } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import PageTable from '@/components/PageTable';
+
+export default (props) => {
+  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+  const [form] = Form.useForm();
+  const [editModal, setEditModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [regionId, setRegionId] = useState();
+  const actionRef = useRef();
+
+  const dataSource = [
+    {
+      key: '1',
+      name: '监控记录仪',
+      createDate: '2022-06-05',
+      status: '',
+    },
+    {
+      key: '2',
+      name: '深松传感器',
+      createDate: '2022-03-27',
+      status: '',
+    },
+    {
+      key: '3',
+      name: '无人机设备',
+      createDate: '2022-03-13',
+      status: '',
+    },
+    {
+      key: '4',
+      name: '',
+      createDate: '2022-03-13',
+      status: '',
+    },
+    {
+      key: '5',
+      name: '',
+      createDate: '2022-03-13',
+      status: '',
+    },
+  ];
+
+  const columns = [
+    {
+      title: '分类名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      search: false,
+      width: 340,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      search: false,
+    },
+  ];
+
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        columns={columns}
+        dataSource={dataSource}
+        actionRef={actionRef}
+        options={false}
+        // toolBarRender={actions}
+        scroll={{ x: 1000 }}
+      />
+    </PageHeaderWrapper>
+  );
+};

src/pages/SystemManagement/Sensing/index.jsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Button, Popconfirm, Modal, Form, Input, message } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import moment from 'moment';
+import PageTable from '@/components/PageTable';
+
+const formatterTime = (val) => {
+  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
+};
+const FormItem = Form.Item;
+
+export default (props) => {
+  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+  const [form] = Form.useForm();
+  const [editModal, setEditModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [regionId, setRegionId] = useState();
+  const actionRef = useRef();
+
+  // const Submit = (values) => {
+  //   setLoading(true);
+  //   if (regionId) {
+  //     updateRegion(regionId, values).then(() => {
+  //       setLoading(false);
+  //       message.success(`修改成功`);
+  //       onCancel();
+  //       actionRef.current.reload();
+  //     }).catch((err) => {
+  //       setLoading(false);
+  //       console.log(err.message)
+  //     });
+  //   } else {
+  //     addRegion(values)
+  //       .then(() => {
+  //         setLoading(false);
+  //         message.success(`保存成功`);
+  //         onCancel();
+  //         actionRef.current.reload();
+  //       })
+  //       .catch((err) => {
+  //         setLoading(false);
+  //         message.error(err.message || err);
+  //       });
+  //   }
+  // };
+  // const handelEdit = (val) => {
+  //   setRegionId(val.regionId);
+  //   form.setFieldsValue(val);
+  //   setEditModal(true);
+  // };
+  // const onCancel = () => {
+  //   setRegionId();
+  //   form.resetFields();
+  //   setEditModal(false);
+  // };
+  // const handleDelete = (id) => {
+  //   deleteRegion(id)
+  //     .then(() => {
+  //       message.success('删除成功');
+  //       actionRef.current.reload();
+  //     })
+  //     .catch((err) => {
+  //       console.log(err.message)
+  //     });
+  // };
+  // useEffect(() => {
+  //   if (regionId) {
+  //   } else {
+  //     form.resetFields();
+  //   }
+  // }, [regionId]);
+  // const actions = () => [
+  //   <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setEditModal(true)}>
+  //     新增
+  //   </Button>,
+  // ];
+  const columns = [
+    {
+      title: '行号',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '设备编号',
+      dataIndex: 'name',
+      key: 'name',
+      search: false,
+    },
+    {
+      title: '设备类型',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '在线状态',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: formatterTime,
+      search: false,
+      width: 240,
+    },
+    {
+      title: '绑定农机',
+      dataIndex: 'name',
+      key: 'name',
+      search: false,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 160,
+      render: (_, record) => [
+        <Button type="link" style={{ padding: 0 }} key={1} onClick={() => handelEdit(record)}>
+          编辑
+        </Button>,
+        <Popconfirm
+          key={2}
+          title="您是否确认删除 ?"
+          onConfirm={() => handleDelete(record.regionId)}
+          okText="确定"
+          cancelText="取消"
+        >
+          <Button style={{ padding: 0 }} type="link">
+            删除
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ];
+
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        columns={columns}
+        actionRef={actionRef}
+        rowKey="regionId"
+        options={false}
+        // toolBarRender={actions}
+        scroll={{ x: 1000 }}
+      />
+      {/* <Modal
+        forceRender
+        title={regionId ? '区域编辑' : '区域新增'}
+        visible={editModal}
+        onCancel={onCancel}
+        keyboard={false}
+        maskClosable={false}
+        destroyOnClose={true}
+        footer={null}
+      >
+        <Form {...formItemLayout} onFinish={Submit} form={form}>
+          <FormItem label="区域名" name="name" rules={[{ required: true, message: '请输入' }]}>
+            <Input placeholder="请输入" />
+          </FormItem>
+          <FormItem label=" " colon={false}>
+            <Button type="default" onClick={onCancel}>
+              取消
+            </Button>
+            <Button
+              type="primary"
+              loading={loading}
+              htmlType="Submit"
+              style={{ marginLeft: '4em' }}
+            >
+              确认
+            </Button>
+          </FormItem>
+        </Form>
+      </Modal> */}
+    </PageHeaderWrapper>
+  );
+};

src/pages/SystemManagement/Subsoiler/index.jsx

@@ -0,0 +1,24 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Descriptions, Form, Card } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+
+export default (props) => {
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <Descriptions title="深松机平台参数" column={1}>
+          <Descriptions.Item label="接口域名">inter-query.huidatech.cn</Descriptions.Item>
+          <Descriptions.Item label="账号密码">njsyzkj0641</Descriptions.Item>
+          <Descriptions.Item label="密码">dTX7o3</Descriptions.Item>
+          <Descriptions.Item label="厂家ID">njsyzkj_hd_20221014155214766</Descriptions.Item>
+          <Descriptions.Item label="推送GUID">401cf971587342619ffcf7bbad1ef92d</Descriptions.Item>
+          <Descriptions.Item label="大写缩写">njsyzkj</Descriptions.Item>
+          <Descriptions.Item label="公司名称">南京市云致科技服务有限公司</Descriptions.Item>
+          <Descriptions />
+          <Descriptions>参数由平台配置，请勿修改，如需修改,请联系技术</Descriptions>
+        </Descriptions>
+      </Card>
+    </PageHeaderWrapper >
+  );
+};

src/pages/customer/index.jsx

@@ -3,69 +3,46 @@ import { DatePicker } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import moment from 'moment';
 import PageTable from '@/components/PageTable';
-import { getUserList } from '@/services/user'
+import { getPersonList } from '@/services/person';
 
 const formatterTime = (val) => {
   return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
 };
-const { RangePicker } = DatePicker;
 
 export default (props) => {
-  const [start, setStartDate] = useState()
-  const [end, setEndDate] = useState()
-
-  const handelChange = (date, dateStrings) => {
-    setStartDate(dateStrings[0])
-    setEndDate(dateStrings[1])
-  }
   const ref = useRef();
+
   const Reset = () => {
-    setStartDate()
-    setEndDate()
     ref.current.reload();
-  }
+  };
 
   const columns = [
     {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
+      title: '昵称',
+      dataIndex: 'nickName',
+      key: 'nickName',
     },
     {
       title: '头像',
       dataIndex: 'avatar',
       key: 'avatar',
-      search: false
+      render: (src) =>
+        src != '-' && (
+          <img src={src} alt="" style={{ width: '64px', height: '64px', borderRadius: '4px' }} />
+        ),
+      search: false,
     },
     {
       title: '手机号',
       dataIndex: 'phone',
       key: 'phone',
     },
-    {
-      title: '身份',
-      dataIndex: 'type',
-      key: 'type',
-      dataIndex: 'position',
-      render: (_, record) => {
-        return record.position === 'farmer'
-          ? '农户'
-          : record.position === 'worker'
-            ? '农机手' : ''
-      },
-      valueType: 'select',
-      valueEnum: {
-        'farmer': { text: '农户' },
-        'worker': { text: '农机手' },
-      },
-    },
-
     {
       title: '注册时间',
       dataIndex: 'createDate',
       key: 'createDate',
       render: (t, render) => formatterTime(render.createDate),
-      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelChange} />
+      search: false,
     },
   ];
 
@@ -73,11 +50,11 @@ export default (props) => {
     <PageHeaderWrapper>
       <PageTable
         actionRef={ref}
-        request={getUserList}
+        request={getPersonList}
         // expfunc={exportPersonList}
         columns={columns}
-        rowKey="userId"
-        params={{ start, end }}
+        rowKey="personId"
+        params={{ identity: 'farmer' }}
         onReset={Reset}
         options={false}
       />

src/pages/document.ejs

@@ -1,238 +1,228 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="theme-color" content="#1890ff" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="keywords"
-      content="antd,umi,umijs,ant design,Scaffolding, layout, Ant Design, project, Pro, admin, console, homepage, out-of-the-box, middle and back office, solution, component library"
-    />
-    <meta
-      name="description"
-      content="
-    An out-of-box UI solution for enterprise applications as a React boilerplate."
-    />
-    <meta
-      name="description"
-      content="
-      Out-of-the-box mid-stage front-end/design solution."
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-    />
-    <title>Ant Design Pro</title>
-    <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
-    <script src="./js/particles.min.js"></script>
-    <script src="./js/jsWebControl-1.0.0.min.js"></script>
-  </head>
-  <body>
-    <noscript>
-      <div class="noscript-container">
-        Hi there! Please
-        <div class="noscript-enableJS">
-          <a href="https://www.enablejavascript.io/en" target="_blank" rel="noopener noreferrer">
-            <b>enable Javascript</b>
-          </a>
-        </div>
-        in your browser to use Ant Design, Out-of-the-box mid-stage front/design solution!
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="theme-color" content="#1890ff" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="keywords"
+    content="antd,umi,umijs,ant design,Scaffolding, layout, Ant Design, project, Pro, admin, console, homepage, out-of-the-box, middle and back office, solution, component library" />
+  <meta name="description" content="
+    An out-of-box UI solution for enterprise applications as a React boilerplate." />
+  <meta name="description" content="
+      Out-of-the-box mid-stage front-end/design solution." />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+  <title>邓州农机数据可视化平台</title>
+  <link rel="icon" href="./logo.png" type="image/x-icon" />
+  <script src="./js/particles.min.js"></script>
+  <script src="./js/jsWebControl-1.0.0.min.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <div class="noscript-container">
+      Hi there! Please
+      <div class="noscript-enableJS">
+        <a href="https://www.enablejavascript.io/en" target="_blank" rel="noopener noreferrer">
+          <b>enable Javascript</b>
+        </a>
       </div>
-    </noscript>
-    <div id="root">
-      <style>
-        html,
-        body,
-        #root {
-          height: 100%;
-          margin: 0;
-          padding: 0;
-        }
-        #root {
-          background-repeat: no-repeat;
-          background-size: 100% auto;
-        }
-        .noscript-container {
-          display: flex;
-          align-content: center;
-          justify-content: center;
-          margin-top: 90px;
-          font-size: 20px;
-          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
-            Geneva, Verdana, sans-serif;
-        }
-        .noscript-enableJS {
-          padding-right: 3px;
-          padding-left: 3px;
-        }
-        .page-loading-warp {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          padding: 98px;
-        }
-        .ant-spin {
-          position: absolute;
-          display: none;
-          -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-          margin: 0;
-          padding: 0;
-          color: rgba(0, 0, 0, 0.65);
-          color: #1890ff;
-          font-size: 14px;
-          font-variant: tabular-nums;
-          line-height: 1.5;
-          text-align: center;
-          list-style: none;
-          opacity: 0;
-          -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
-            -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
-          -webkit-font-feature-settings: 'tnum';
-          font-feature-settings: 'tnum';
-        }
+      in your browser to use Ant Design, Out-of-the-box mid-stage front/design solution!
+    </div>
+  </noscript>
+  <div id="root">
+    <style>
+      html,
+      body,
+      #root {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
 
-        .ant-spin-spinning {
-          position: static;
-          display: inline-block;
-          opacity: 1;
-        }
+      #root {
+        background-repeat: no-repeat;
+        background-size: 100% auto;
+      }
 
-        .ant-spin-dot {
-          position: relative;
-          display: inline-block;
-          width: 20px;
-          height: 20px;
-          font-size: 20px;
-        }
+      .noscript-container {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        margin-top: 90px;
+        font-size: 20px;
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',
+          Geneva, Verdana, sans-serif;
+      }
 
-        .ant-spin-dot-item {
-          position: absolute;
-          display: block;
-          width: 9px;
-          height: 9px;
-          background-color: #1890ff;
-          border-radius: 100%;
-          -webkit-transform: scale(0.75);
-          -ms-transform: scale(0.75);
-          transform: scale(0.75);
-          -webkit-transform-origin: 50% 50%;
-          -ms-transform-origin: 50% 50%;
-          transform-origin: 50% 50%;
-          opacity: 0.3;
-          -webkit-animation: antspinmove 1s infinite linear alternate;
-          animation: antSpinMove 1s infinite linear alternate;
-        }
+      .noscript-enableJS {
+        padding-right: 3px;
+        padding-left: 3px;
+      }
 
-        .ant-spin-dot-item:nth-child(1) {
-          top: 0;
-          left: 0;
-        }
+      .page-loading-warp {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 98px;
+      }
 
-        .ant-spin-dot-item:nth-child(2) {
-          top: 0;
-          right: 0;
-          -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s;
-        }
+      .ant-spin {
+        position: absolute;
+        display: none;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        color: rgba(0, 0, 0, 0.65);
+        color: #1890ff;
+        font-size: 14px;
+        font-variant: tabular-nums;
+        line-height: 1.5;
+        text-align: center;
+        list-style: none;
+        opacity: 0;
+        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
+          -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+        -webkit-font-feature-settings: 'tnum';
+        font-feature-settings: 'tnum';
+      }
 
-        .ant-spin-dot-item:nth-child(3) {
-          right: 0;
-          bottom: 0;
-          -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s;
-        }
+      .ant-spin-spinning {
+        position: static;
+        display: inline-block;
+        opacity: 1;
+      }
 
-        .ant-spin-dot-item:nth-child(4) {
-          bottom: 0;
-          left: 0;
-          -webkit-animation-delay: 1.2s;
-          animation-delay: 1.2s;
-        }
+      .ant-spin-dot {
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        font-size: 20px;
+      }
 
-        .ant-spin-dot-spin {
-          -webkit-transform: rotate(45deg);
-          -ms-transform: rotate(45deg);
-          transform: rotate(45deg);
-          -webkit-animation: antrotate 1.2s infinite linear;
-          animation: antRotate 1.2s infinite linear;
-        }
+      .ant-spin-dot-item {
+        position: absolute;
+        display: block;
+        width: 9px;
+        height: 9px;
+        background-color: #1890ff;
+        border-radius: 100%;
+        -webkit-transform: scale(0.75);
+        -ms-transform: scale(0.75);
+        transform: scale(0.75);
+        -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
+        transform-origin: 50% 50%;
+        opacity: 0.3;
+        -webkit-animation: antspinmove 1s infinite linear alternate;
+        animation: antSpinMove 1s infinite linear alternate;
+      }
 
-        .ant-spin-lg .ant-spin-dot {
-          width: 32px;
-          height: 32px;
-          font-size: 32px;
-        }
+      .ant-spin-dot-item:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
 
-        .ant-spin-lg .ant-spin-dot i {
-          width: 14px;
-          height: 14px;
-        }
+      .ant-spin-dot-item:nth-child(2) {
+        top: 0;
+        right: 0;
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+      }
 
-        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-          .ant-spin-blur {
-            background: #fff;
-            opacity: 0.5;
-          }
-        }
+      .ant-spin-dot-item:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+      }
+
+      .ant-spin-dot-item:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+      }
 
-        @-webkit-keyframes antSpinMove {
-          to {
-            opacity: 1;
-          }
+      .ant-spin-dot-spin {
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+        -webkit-animation: antrotate 1.2s infinite linear;
+        animation: antRotate 1.2s infinite linear;
+      }
+
+      .ant-spin-lg .ant-spin-dot {
+        width: 32px;
+        height: 32px;
+        font-size: 32px;
+      }
+
+      .ant-spin-lg .ant-spin-dot i {
+        width: 14px;
+        height: 14px;
+      }
+
+      @media all and (-ms-high-contrast: none),
+      (-ms-high-contrast: active) {
+        .ant-spin-blur {
+          background: #fff;
+          opacity: 0.5;
         }
+      }
 
-        @keyframes antSpinMove {
-          to {
-            opacity: 1;
-          }
+      @-webkit-keyframes antSpinMove {
+        to {
+          opacity: 1;
         }
+      }
 
-        @-webkit-keyframes antRotate {
-          to {
-            -webkit-transform: rotate(405deg);
-            transform: rotate(405deg);
-          }
+      @keyframes antSpinMove {
+        to {
+          opacity: 1;
         }
+      }
 
-        @keyframes antRotate {
-          to {
-            -webkit-transform: rotate(405deg);
-            transform: rotate(405deg);
-          }
+      @-webkit-keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
         }
-      </style>
-      <div
-        style="
+      }
+
+      @keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
+        }
+      }
+    </style>
+    <div style="
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           height: 100%;
           min-height: 420px;
-        "
-      >
-        <img src="<%= context.config.publicPath +'pro_icon.svg'%>" alt="logo" width="256" />
-        <div class="page-loading-warp">
-          <div class="ant-spin ant-spin-lg ant-spin-spinning">
-            <span class="ant-spin-dot ant-spin-dot-spin"
-              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
-              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
-            ></span>
-          </div>
-        </div>
-        <div style="display: flex; align-items: center; justify-content: center">
-          <img
-            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-            width="32"
-            style="margin-right: 8px"
-          />
-          Ant Design
+        ">
+      <img src="./logo.png" alt="logo" width="256" />
+      <div class="page-loading-warp">
+        <div class="ant-spin ant-spin-lg ant-spin-spinning">
+          <span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i
+              class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
         </div>
       </div>
+      <div style="display: flex; align-items: center; justify-content: center">
+        <img src="./logo.png" width="32" style="margin-right: 8px" />
+        南京云致
+      </div>
     </div>
-  </body>
-</html>
+  </div>
+</body>
+
+</html>

src/services/device.js

@@ -5,7 +5,7 @@ import request from '@/utils/request';
  * @param {*} params
  * @returns
  */
-export const getDeviceList = (params) => request('/hatc-device', { params });
+export const getHatcDeviceList = (params) => request('/hatc-device', { params });
 
 /**
  * 通过设备号查询相关设备列表  选好了点击绑定时根据当前选择的设备id查询
@@ -21,7 +21,7 @@ export const getTerminalDeviceList = (id) => request(`/hatc-device/${id}`);
  * @param {*} params
  * @returns
  */
-export const getdeviceDetail = (id) => request(`/machinery/${id}/device`);
+export const getDeviceDetail = (id) => request(`/machinery/${id}/device`);
 
 //  新增修改设备信息
 /**

src/services/job.js

@@ -1,8 +1,22 @@
 import request from '@/utils/request';
 
 /**
- * 查询农机列表
+ * 查询作业列表
  * @param {*} params
  * @returns
  */
 export const getJobList = (params) => request('/work-job', { params });
+
+/**
+ * 查询作业详情
+ * @param {*} params
+ * @returns
+ */
+export const getJobDetail = (id) => request(`/work-job/${id}`);
+
+/**
+ * 查询作业GIS
+ * @param {*} params
+ * @returns
+ */
+export const getJobGISDetail = (params) => request(`/machinery-gps`, { params });

src/services/monitoringScreen.js

@@ -0,0 +1,59 @@
+import request from '@/utils/request';
+
+/**
+ * 基本数据统计
+ * @param {*} params
+ * @returns
+ */
+export const getBasic = (params) => request('/screen-data/basic', { params });
+
+/**
+ * 所有合作社
+ * @param {*} params
+ * @returns
+ */
+export const getOrgDetail = (params) => request('/screen-data/org', { params });
+
+/**
+ *  农机类型列表
+ * @param {*} params
+ * @returns
+ */
+export const getTypeList = (params) => request('/screen-data/machinery-type', { params });
+
+/**
+ *  农机作业面积统计
+ * @param {*} params
+ * @returns
+ */
+export const getAreaDetail = (params) => request('/screen-data/machinery-type/area', { params });
+
+/**
+ *  农机类型统计（左上角柱状图）
+ * @param {*} params
+ * @returns
+ */
+export const getMachineryBar = (params) =>
+  request('/screen-data/machinery-type/machinery', { params });
+
+/**
+ *  农机作业数统计
+ * @param {*} params
+ * @returns
+ */
+export const getWorkNumPie = (params) =>
+  request('/screen-data/machinery-type/work-job', { params });
+
+/**
+ *  依据类型查询农机
+ * @param {*} params
+ * @returns
+ */
+export const getTypeBasic = (params) => request('/screen-data/machinery/all', { params });
+
+/**
+ *  获取消息通知列表
+ * @param {*} params
+ * @returns
+ */
+export const getMessageList = (params) => request('/screen-data/message', { params });

src/services/person.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+
+/**
+ * 查询用户列表
+ * @param {*} params
+ * @returns
+ */
+export const getPersonList = (params) => request('/person', { params });

src/services/workMessage.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+
+/**
+ * 查询消息列表
+ * @param {*} params
+ * @returns
+ */
+export const getWorkMassageList = (params) => request('/work-message', { params });

src/utils/mapTogcj02.js

@@ -0,0 +1,66 @@
+//纬度转换
+function transformLatitude(x, y) {
+  let num = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  num += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
+  num += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0;
+  num +=
+    ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0;
+  return num;
+}
+//经度转换
+function transformLongitude(x, y) {
+  let num = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  num += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
+  num += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0;
+  num +=
+    ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0;
+  return num;
+}
+// 坐标转换
+function calculation(longitude, latitude) {
+  let a = 6378245.0; // 卫星椭球坐标投影到平面地图坐标系的投影因子。
+  let ee = 0.00669342162296594323; // 椭球的偏心率。
+  let lat = transformLatitude(longitude - 105.0, latitude - 35.0);
+  let lng = transformLongitude(longitude - 105.0, latitude - 35.0);
+  let radLat = (latitude / 180.0) * Math.PI;
+  let magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  let sqrtMagic = Math.sqrt(magic);
+  lat = (lat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * Math.PI);
+  lng = (lng * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * Math.PI);
+  return {
+    longitude: lng,
+    latitude: lat,
+  };
+}
+// 判断是否为国外坐标
+function isOutOfChina(longitude, latitude) {
+  if (longitude < 72.004 || longitude > 137.8347) {
+    return true;
+  }
+  if (latitude < 0.8293 || latitude > 55.8271) {
+    return true;
+  }
+  return false;
+}
+// GPS坐标 转 高德坐标
+function getCoordinate(long, lat) {
+  let longitude = Number(long);
+  let latitude = Number(lat);
+  if (isOutOfChina(longitude, latitude)) {
+    //国外
+    return {
+      longitude: longitude,
+      latitude: latitude,
+    };
+  } else {
+    //国内
+    let obj = calculation(longitude, latitude);
+    return {
+      longitude: longitude + obj.longitude,
+      latitude: latitude + obj.latitude,
+    };
+  }
+}
+
+export default getCoordinate;