feats

config/routes.js

@@ -32,6 +32,14 @@ export default [
     component: './MonitoringScreen',
     access: 'screen',
   },
+  {
+    path: '/MonitoringScreen2',
+    layout: false,
+    name: '数据大屏2',
+    icon: 'DesktopOutlined',
+    component: './MonitoringScreen2',
+    access: 'screen',
+  },
   {
     path: '/ContentManagementSystem',
     name: 'CMS管理',

src/components/AMap/loader.js

@@ -1,7 +1,6 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 
 const WEB_KEY = '7c02d93b855ab284c12911c231aa2233';
-// const SERVER_KEY = 'a30b66a26ea1890fd656cf11cb2647fb';
 
 export default (plugins, uiPlugins) => {
   window._AMapSecurityConfig = {

src/components/AMap/service.js

@@ -0,0 +1,24 @@
+const key = 'a30b66a26ea1890fd656cf11cb2647fb';
+
+export function regeo(conf = {}) {
+  const defCfg = {
+    key,
+    radius: 1000,
+    extensions: 'base',
+    batch: true,
+    roadlevel: 0,
+  };
+
+  const options = { ...defCfg, ...conf };
+  const queryStr = Object.keys(options)
+    .map((k) => `${k}=${options[k]}`)
+    .join('&');
+  const url = `//restapi.amap.com/v3/geocode/regeo?${queryStr}`;
+
+  return new Promise((resolve, reject) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then(resolve)
+      .catch(reject);
+  });
+}

src/pages/MonitoringScreen2/components/DeviceList.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Table, Badge } from 'antd';
+import { getMachineryList } from '@/services/machinery';
+import { regeo } from '@/components/AMap/service';
+
+export default (props) => {
+  const columns = [
+    {
+      title: '农机',
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: '状态',
+      key: 'onlineStatus',
+      dataIndex: 'onlineStatus',
+      render: (t) =>
+        t == 1 ? <Badge status="processing" text="在线" /> : <Badge status="default" text="下线" />,
+    },
+    {
+      title: '位置',
+      dataIndex: 'loc',
+    },
+  ];
+
+  const [loading, setLoading] = React.useState(false);
+  const [data, setData] = React.useState([]);
+  const [page, setPage] = React.useState(1);
+
+  const queryData = React.useCallback((pageNum = 1) => {
+    const filter = {
+      pageNum,
+      pageSize: 10, // 因为高德接口限制, 一次最大只能请求 20 个地址
+      isBound: true,
+    };
+
+    setLoading(true);
+    getMachineryList(filter)
+      .then((res) => {
+        const { current, records } = res;
+
+        setPage(current);
+
+        const locIds = [];
+        const locList = [];
+        const list = records || [];
+
+        for (let item of list) {
+          if (item.onlineStatus === 1 && item.location) {
+            locIds.push(item.machineryId);
+            locList.push(item.location);
+          }
+        }
+
+        if (locList.length > 0) {
+          // 高德接口, 请求地址的描述
+          regeo({ location: locList.join('|') })
+            .then((regs) => {
+              if (regs.status === '1') {
+                regs.regeocodes.forEach((addrs, inx) => {
+                  const addr = addrs['formatted_address'];
+                  const machine = list.filter((x) => x.machineryId === locIds[inx])[0];
+                  machine.loc = addr;
+                });
+              }
+
+              setData(list);
+              setPage(current);
+              setLoading(false);
+            })
+            .catch((er) => {
+              console.error(er);
+
+              setData(list);
+              setPage(current);
+              setLoading(false);
+            });
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    queryData(page);
+  }, [page, queryData]);
+
+  return <Table columns={columns} dataSource={data} />;
+};

src/pages/MonitoringScreen2/components/map/geoData.js

@@ -0,0 +1,740 @@
+export default {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      properties: {
+        adcode: 411381,
+        name: '邓州市',
+        center: [112.092716, 32.681642],
+        centroid: [112.050009, 32.680192],
+        childrenNum: 0,
+        level: 'district',
+        acroutes: [100000, 410000, 411300],
+        parent: {
+          adcode: 411300,
+        },
+      },
+      geometry: {
+        type: 'MultiPolygon',
+        coordinates: [
+          [
+            [
+              [112.348727, 32.808115],
+              [112.348381, 32.809917],
+              [112.347113, 32.811663],
+              [112.345471, 32.811496],
+              [112.3454, 32.81227],
+              [112.343637, 32.812257],
+              [112.343347, 32.813248],
+              [112.342568, 32.813143],
+              [112.342314, 32.818839],
+              [112.334647, 32.823594],
+              [112.326682, 32.83202],
+              [112.324721, 32.838878],
+              [112.324842, 32.844493],
+              [112.330491, 32.846275],
+              [112.331121, 32.848051],
+              [112.330257, 32.850069],
+              [112.325783, 32.85153],
+              [112.323829, 32.852582],
+              [112.323164, 32.853851],
+              [112.322803, 32.857471],
+              [112.320849, 32.858802],
+              [112.317366, 32.858313],
+              [112.313274, 32.857477],
+              [112.309671, 32.857335],
+              [112.306131, 32.857873],
+              [112.302358, 32.860367],
+              [112.301423, 32.861921],
+              [112.301246, 32.863988],
+              [112.301515, 32.869439],
+              [112.299392, 32.869093],
+              [112.292518, 32.868858],
+              [112.288093, 32.869124],
+              [112.286061, 32.869767],
+              [112.283845, 32.872366],
+              [112.283053, 32.874204],
+              [112.282961, 32.877824],
+              [112.281969, 32.879556],
+              [112.279796, 32.880484],
+              [112.27775, 32.880045],
+              [112.276249, 32.879086],
+              [112.275966, 32.878281],
+              [112.27654, 32.875107],
+              [112.269397, 32.875627],
+              [112.258799, 32.87442],
+              [112.252555, 32.870949],
+              [112.243359, 32.864248],
+              [112.233327, 32.859841],
+              [112.216493, 32.859761],
+              [112.202943, 32.85489],
+              [112.18419, 32.856636],
+              [112.17985, 32.85731],
+              [112.171978, 32.856586],
+              [112.166591, 32.851982],
+              [112.157657, 32.849419],
+              [112.149749, 32.852817],
+              [112.145063, 32.860813],
+              [112.146599, 32.870442],
+              [112.140624, 32.86973],
+              [112.130061, 32.866463],
+              [112.126026, 32.86663],
+              [112.124766, 32.865788],
+              [112.124058, 32.863994],
+              [112.121495, 32.863338],
+              [112.118338, 32.863066],
+              [112.11545, 32.863449],
+              [112.114197, 32.863938],
+              [112.113106, 32.8659],
+              [112.111145, 32.872385],
+              [112.106891, 32.877502],
+              [112.105149, 32.881152],
+              [112.103408, 32.882569],
+              [112.101716, 32.885625],
+              [112.1003, 32.887259],
+              [112.099592, 32.887203],
+              [112.096541, 32.885403],
+              [112.090382, 32.885186],
+              [112.084287, 32.885242],
+              [112.084336, 32.88453],
+              [112.079812, 32.884153],
+              [112.07943, 32.885297],
+              [112.074036, 32.885242],
+              [112.074036, 32.882625],
+              [112.069731, 32.881919],
+              [112.068266, 32.882408],
+              [112.060281, 32.883194],
+              [112.058022, 32.881957],
+              [112.052408, 32.87968],
+              [112.0525, 32.877626],
+              [112.051085, 32.876481],
+              [112.049938, 32.874959],
+              [112.050681, 32.871073],
+              [112.048295, 32.869446],
+              [112.045711, 32.869347],
+              [112.045888, 32.872651],
+              [112.042575, 32.874278],
+              [112.041867, 32.874006],
+              [112.033471, 32.865956],
+              [112.031156, 32.866302],
+              [112.032657, 32.868536],
+              [112.032048, 32.870887],
+              [112.036126, 32.872577],
+              [112.034682, 32.874693],
+              [112.039828, 32.878677],
+              [112.039489, 32.880094],
+              [112.039375, 32.882965],
+              [112.039878, 32.885198],
+              [112.040848, 32.886405],
+              [112.042101, 32.889325],
+              [112.042044, 32.891162],
+              [112.041039, 32.89214],
+              [112.037698, 32.893068],
+              [112.036622, 32.893655],
+              [112.034307, 32.894014],
+              [112.032268, 32.89488],
+              [112.030654, 32.897175],
+              [112.030342, 32.899984],
+              [112.031107, 32.901648],
+              [112.032622, 32.903126],
+              [112.032431, 32.904227],
+              [112.03122, 32.906349],
+              [112.029493, 32.911006],
+              [112.028346, 32.912447],
+              [112.024459, 32.9139],
+              [112.021521, 32.913103],
+              [112.019879, 32.910579],
+              [112.014102, 32.91001],
+              [112.013493, 32.912255],
+              [112.012276, 32.912305],
+              [112.010492, 32.907351],
+              [112.00897, 32.905006],
+              [112.007667, 32.904437],
+              [112.005968, 32.904493],
+              [112.003589, 32.905483],
+              [112.00143, 32.907728],
+              [112.000099, 32.908148],
+              [111.996609, 32.906992],
+              [111.995505, 32.907573],
+              [111.995108, 32.91006],
+              [111.993416, 32.909491],
+              [111.991512, 32.913492],
+              [111.994556, 32.914408],
+              [111.994124, 32.915607],
+              [111.992121, 32.91664],
+              [111.983123, 32.913536],
+              [111.980029, 32.91985],
+              [111.990507, 32.921446],
+              [111.991399, 32.922738],
+              [111.993721, 32.924989],
+              [111.99411, 32.932638],
+              [111.996503, 32.938389],
+              [111.997275, 32.94344],
+              [111.995278, 32.950519],
+              [111.991632, 32.958957],
+              [111.987222, 32.962808],
+              [111.983385, 32.964372],
+              [111.980603, 32.967549],
+              [111.971839, 32.969292],
+              [111.965531, 32.972432],
+              [111.956441, 32.977605],
+              [111.945737, 32.983001],
+              [111.934757, 32.98771],
+              [111.923515, 32.992418],
+              [111.91039, 32.995051],
+              [111.907396, 32.99594],
+              [111.905605, 32.995434],
+              [111.904514, 32.997145],
+              [111.897414, 32.994952],
+              [111.898745, 32.993802],
+              [111.899637, 32.994284],
+              [111.901116, 32.990138],
+              [111.899672, 32.989798],
+              [111.896274, 32.987648],
+              [111.895396, 32.985547],
+              [111.896897, 32.98368],
+              [111.900352, 32.980312],
+              [111.902405, 32.977593],
+              [111.904734, 32.975331],
+              [111.906072, 32.973681],
+              [111.906943, 32.97179],
+              [111.907289, 32.968835],
+              [111.907806, 32.967413],
+              [111.90942, 32.965745],
+              [111.91102, 32.964725],
+              [111.910192, 32.95973],
+              [111.909519, 32.95845],
+              [111.907608, 32.956528],
+              [111.905208, 32.954587],
+              [111.9013, 32.951836],
+              [111.897923, 32.951193],
+              [111.893195, 32.951521],
+              [111.886462, 32.953184],
+              [111.884395, 32.953511],
+              [111.875001, 32.94893],
+              [111.861458, 32.945623],
+              [111.849027, 32.939347],
+              [111.842294, 32.933795],
+              [111.834507, 32.926869],
+              [111.824801, 32.921297],
+              [111.818033, 32.918724],
+              [111.811591, 32.913177],
+              [111.809538, 32.903992],
+              [111.809623, 32.897348],
+              [111.808781, 32.894769],
+              [111.807032, 32.890698],
+              [111.805291, 32.87817],
+              [111.798905, 32.876722],
+              [111.793666, 32.878479],
+              [111.794027, 32.876172],
+              [111.795896, 32.872892],
+              [111.796753, 32.868814],
+              [111.798912, 32.857273],
+              [111.798502, 32.851425],
+              [111.799047, 32.845415],
+              [111.805022, 32.839491],
+              [111.806912, 32.838006],
+              [111.811662, 32.83553],
+              [111.813757, 32.833982],
+              [111.816752, 32.827216],
+              [111.819272, 32.82365],
+              [111.823237, 32.821978],
+              [111.825722, 32.821285],
+              [111.827187, 32.819941],
+              [111.832886, 32.817093],
+              [111.833091, 32.815217],
+              [111.827753, 32.813917],
+              [111.827767, 32.813081],
+              [111.831052, 32.810406],
+              [111.834026, 32.80848],
+              [111.838599, 32.797662],
+              [111.840022, 32.792175],
+              [111.840907, 32.786223],
+              [111.841098, 32.771791],
+              [111.84073, 32.757808],
+              [111.842754, 32.75883],
+              [111.842761, 32.757957],
+              [111.843731, 32.758068],
+              [111.843979, 32.755094],
+              [111.845168, 32.751953],
+              [111.841077, 32.748929],
+              [111.838436, 32.747963],
+              [111.837955, 32.747318],
+              [111.835583, 32.746414],
+              [111.835293, 32.745645],
+              [111.834082, 32.745465],
+              [111.83404, 32.743817],
+              [111.832206, 32.743421],
+              [111.831909, 32.742503],
+              [111.82759, 32.742491],
+              [111.82752, 32.741109],
+              [111.82512, 32.741016],
+              [111.825573, 32.736877],
+              [111.826982, 32.737267],
+              [111.849112, 32.719839],
+              [111.870378, 32.710696],
+              [111.87917, 32.69033],
+              [111.879999, 32.688173],
+              [111.879121, 32.685661],
+              [111.880714, 32.683349],
+              [111.878753, 32.680633],
+              [111.873825, 32.67796],
+              [111.868148, 32.678053],
+              [111.862435, 32.677228],
+              [111.856156, 32.674357],
+              [111.851448, 32.669166],
+              [111.847059, 32.667175],
+              [111.840836, 32.666592],
+              [111.837041, 32.665966],
+              [111.830762, 32.663783],
+              [111.818748, 32.661767],
+              [111.815846, 32.663107],
+              [111.81317, 32.66743],
+              [111.808193, 32.670214],
+              [111.807436, 32.670332],
+              [111.80282, 32.666865],
+              [111.799068, 32.662363],
+              [111.796328, 32.657959],
+              [111.794417, 32.657345],
+              [111.788003, 32.658294],
+              [111.777306, 32.659044],
+              [111.770758, 32.660986],
+              [111.761321, 32.661271],
+              [111.755509, 32.662257],
+              [111.745308, 32.663845],
+              [111.729351, 32.665966],
+              [111.724254, 32.66627],
+              [111.722618, 32.664217],
+              [111.721096, 32.660204],
+              [111.720261, 32.645522],
+              [111.720176, 32.642085],
+              [111.714782, 32.637227],
+              [111.710017, 32.634665],
+              [111.705055, 32.634156],
+              [111.69978, 32.6375],
+              [111.691922, 32.641756],
+              [111.68405, 32.643326],
+              [111.672426, 32.642029],
+              [111.656582, 32.638505],
+              [111.653531, 32.638456],
+              [111.649631, 32.63456],
+              [111.643316, 32.627716],
+              [111.640803, 32.617341],
+              [111.641709, 32.611632],
+              [111.646402, 32.606189],
+              [111.65506, 32.608815],
+              [111.658522, 32.614586],
+              [111.662734, 32.610689],
+              [111.673006, 32.614977],
+              [111.682988, 32.61],
+              [111.692121, 32.605929],
+              [111.699157, 32.60794],
+              [111.704311, 32.606897],
+              [111.713571, 32.606549],
+              [111.724501, 32.600349],
+              [111.729237, 32.594006],
+              [111.740324, 32.589264],
+              [111.747375, 32.577599],
+              [111.757519, 32.570143],
+              [111.766807, 32.565188],
+              [111.775501, 32.562978],
+              [111.785058, 32.557333],
+              [111.789709, 32.553477],
+              [111.803117, 32.54305],
+              [111.809135, 32.536697],
+              [111.818862, 32.537125],
+              [111.821785, 32.535833],
+              [111.823768, 32.538076],
+              [111.827038, 32.538076],
+              [111.827208, 32.532566],
+              [111.828242, 32.531274],
+              [111.858272, 32.528697],
+              [111.862145, 32.524392],
+              [111.862746, 32.513632],
+              [111.870236, 32.50632],
+              [111.889924, 32.503164],
+              [111.898554, 32.504151],
+              [111.915324, 32.50773],
+              [111.925582, 32.511942],
+              [111.932322, 32.51521],
+              [111.941525, 32.516906],
+              [111.948668, 32.516981],
+              [111.950509, 32.516428],
+              [111.952866, 32.514819],
+              [111.953333, 32.513266],
+              [111.956441, 32.512278],
+              [111.957177, 32.511122],
+              [111.958154, 32.506941],
+              [111.96146, 32.504182],
+              [111.962579, 32.500268],
+              [111.963846, 32.498311],
+              [111.966805, 32.494924],
+              [111.968065, 32.492103],
+              [111.970111, 32.485224],
+              [111.970295, 32.482813],
+              [111.970961, 32.481775],
+              [111.973658, 32.479817],
+              [111.97426, 32.478207],
+              [111.974345, 32.473447],
+              [111.975555, 32.471899],
+              [111.977382, 32.471141],
+              [111.983003, 32.469811],
+              [111.99285, 32.467337],
+              [111.991739, 32.46403],
+              [111.988914, 32.462743],
+              [111.988192, 32.461985],
+              [111.98805, 32.460704],
+              [111.989346, 32.460487],
+              [111.989091, 32.459262],
+              [111.990287, 32.458448],
+              [111.990429, 32.457484],
+              [111.99457, 32.458174],
+              [111.998514, 32.459436],
+              [112.000071, 32.459542],
+              [112.00211, 32.45902],
+              [112.004729, 32.456371],
+              [112.005911, 32.452355],
+              [112.007051, 32.451031],
+              [112.00977, 32.451479],
+              [112.011929, 32.45049],
+              [112.014371, 32.450316],
+              [112.017741, 32.452324],
+              [112.019086, 32.453667],
+              [112.023107, 32.457049],
+              [112.027121, 32.459971],
+              [112.031142, 32.461767],
+              [112.033818, 32.463334],
+              [112.036508, 32.466715],
+              [112.038122, 32.470096],
+              [112.043467, 32.471433],
+              [112.047984, 32.473739],
+              [112.049902, 32.473273],
+              [112.05403, 32.471712],
+              [112.05735, 32.471576],
+              [112.059247, 32.472079],
+              [112.064018, 32.474242],
+              [112.064479, 32.47303],
+              [112.064592, 32.470849],
+              [112.065116, 32.469015],
+              [112.066638, 32.465341],
+              [112.068917, 32.462575],
+              [112.069781, 32.461021],
+              [112.069838, 32.459989],
+              [112.068847, 32.455638],
+              [112.068889, 32.453456],
+              [112.067919, 32.45128],
+              [112.066461, 32.447046],
+              [112.065958, 32.44464],
+              [112.066418, 32.442296],
+              [112.067409, 32.440617],
+              [112.070185, 32.439921],
+              [112.072478, 32.43905],
+              [112.075168, 32.436911],
+              [112.076719, 32.436439],
+              [112.081646, 32.43578],
+              [112.083614, 32.436228],
+              [112.086042, 32.435295],
+              [112.086771, 32.433852],
+              [112.086672, 32.430706],
+              [112.085235, 32.42968],
+              [112.0836, 32.427796],
+              [112.081342, 32.425694],
+              [112.080442, 32.423635],
+              [112.080839, 32.422485],
+              [112.0844, 32.419705],
+              [112.087168, 32.419288],
+              [112.09143, 32.419388],
+              [112.09366, 32.418909],
+              [112.094934, 32.418038],
+              [112.099231, 32.415824],
+              [112.105333, 32.410774],
+              [112.108448, 32.404759],
+              [112.115039, 32.401413],
+              [112.121644, 32.399136],
+              [112.124405, 32.398757],
+              [112.127046, 32.400946],
+              [112.128171, 32.403067],
+              [112.130245, 32.403111],
+              [112.131895, 32.399864],
+              [112.13273, 32.396586],
+              [112.13467, 32.39439],
+              [112.135654, 32.392312],
+              [112.137396, 32.390583],
+              [112.140291, 32.389749],
+              [112.14216, 32.388362],
+              [112.142946, 32.386234],
+              [112.145544, 32.383235],
+              [112.14708, 32.38219],
+              [112.152446, 32.379614],
+              [112.155795, 32.377461],
+              [112.156871, 32.377101],
+              [112.159787, 32.378227],
+              [112.160736, 32.379017],
+              [112.161777, 32.381468],
+              [112.163072, 32.383347],
+              [112.16446, 32.384411],
+              [112.164092, 32.385624],
+              [112.161614, 32.387024],
+              [112.161111, 32.387939],
+              [112.159922, 32.388499],
+              [112.159745, 32.386949],
+              [112.159115, 32.386452],
+              [112.153444, 32.385301],
+              [112.151908, 32.384312],
+              [112.150634, 32.384181],
+              [112.149919, 32.385046],
+              [112.149487, 32.387024],
+              [112.153331, 32.388343],
+              [112.155151, 32.389376],
+              [112.155349, 32.390104],
+              [112.154032, 32.392368],
+              [112.154032, 32.393743],
+              [112.154747, 32.3949],
+              [112.156382, 32.396132],
+              [112.157579, 32.395528],
+              [112.156043, 32.391634],
+              [112.157465, 32.391696],
+              [112.158542, 32.391105],
+              [112.159724, 32.392629],
+              [112.161373, 32.39345],
+              [112.159724, 32.394377],
+              [112.159858, 32.395671],
+              [112.161713, 32.399292],
+              [112.161437, 32.400107],
+              [112.159306, 32.401649],
+              [112.158067, 32.401811],
+              [112.15675, 32.401189],
+              [112.155653, 32.401288],
+              [112.154867, 32.402501],
+              [112.152616, 32.40112],
+              [112.150931, 32.401058],
+              [112.148723, 32.40173],
+              [112.146924, 32.402682],
+              [112.14616, 32.40545],
+              [112.144418, 32.406053],
+              [112.143625, 32.407011],
+              [112.145693, 32.407446],
+              [112.145877, 32.408628],
+              [112.149232, 32.410451],
+              [112.150216, 32.411638],
+              [112.1512, 32.41124],
+              [112.153402, 32.411483],
+              [112.154584, 32.410992],
+              [112.156531, 32.409437],
+              [112.159731, 32.410892],
+              [112.160255, 32.410444],
+              [112.160007, 32.408746],
+              [112.161394, 32.408703],
+              [112.163313, 32.409698],
+              [112.164665, 32.41129],
+              [112.169146, 32.40971],
+              [112.169118, 32.408149],
+              [112.170222, 32.406644],
+              [112.171893, 32.406656],
+              [112.173486, 32.408529],
+              [112.174343, 32.407409],
+              [112.172481, 32.405898],
+              [112.172573, 32.401295],
+              [112.171468, 32.399852],
+              [112.172169, 32.398352],
+              [112.173005, 32.398035],
+              [112.17527, 32.398446],
+              [112.177507, 32.398327],
+              [112.177514, 32.397444],
+              [112.176403, 32.3963],
+              [112.176757, 32.395354],
+              [112.17801, 32.395068],
+              [112.179036, 32.392859],
+              [112.178824, 32.392125],
+              [112.176714, 32.391174],
+              [112.175256, 32.391292],
+              [112.175079, 32.389239],
+              [112.174265, 32.388163],
+              [112.172382, 32.387783],
+              [112.172764, 32.38517],
+              [112.174704, 32.385817],
+              [112.181344, 32.387111],
+              [112.183737, 32.388455],
+              [112.188791, 32.389768],
+              [112.191446, 32.389749],
+              [112.194235, 32.391435],
+              [112.205895, 32.392978],
+              [112.208437, 32.391877],
+              [112.213732, 32.390035],
+              [112.216365, 32.38866],
+              [112.220344, 32.387509],
+              [112.22273, 32.387043],
+              [112.225356, 32.386097],
+              [112.226892, 32.386153],
+              [112.22685, 32.387472],
+              [112.228414, 32.387447],
+              [112.229172, 32.39238],
+              [112.228967, 32.393755],
+              [112.228004, 32.395777],
+              [112.224818, 32.400996],
+              [112.223742, 32.402234],
+              [112.228138, 32.403273],
+              [112.227119, 32.405524],
+              [112.235529, 32.407913],
+              [112.234842, 32.409673],
+              [112.237618, 32.409605],
+              [112.237554, 32.41088],
+              [112.244414, 32.411439],
+              [112.244789, 32.408429],
+              [112.248654, 32.409088],
+              [112.24859, 32.40976],
+              [112.255939, 32.409387],
+              [112.258325, 32.409617],
+              [112.256725, 32.41417],
+              [112.257808, 32.415041],
+              [112.258105, 32.416807],
+              [112.257779, 32.419655],
+              [112.262169, 32.419817],
+              [112.262204, 32.42501],
+              [112.265956, 32.425613],
+              [112.266352, 32.427541],
+              [112.273899, 32.432403],
+              [112.282281, 32.435432],
+              [112.289028, 32.438684],
+              [112.295477, 32.446741],
+              [112.293728, 32.448756],
+              [112.293664, 32.45118],
+              [112.292751, 32.453878],
+              [112.292808, 32.459529],
+              [112.291774, 32.459256],
+              [112.291201, 32.462308],
+              [112.28975, 32.462936],
+              [112.289205, 32.469767],
+              [112.290281, 32.470289],
+              [112.289842, 32.471078],
+              [112.290727, 32.471526],
+              [112.28999, 32.473005],
+              [112.289849, 32.474596],
+              [112.288348, 32.475255],
+              [112.287937, 32.476107],
+              [112.28781, 32.478437],
+              [112.287045, 32.479525],
+              [112.282798, 32.479718],
+              [112.282776, 32.481992],
+              [112.286599, 32.482123],
+              [112.286649, 32.484143],
+              [112.285537, 32.484404],
+              [112.285629, 32.486193],
+              [112.284985, 32.489704],
+              [112.285254, 32.495757],
+              [112.28604, 32.501113],
+              [112.288893, 32.50074],
+              [112.289523, 32.505872],
+              [112.28529, 32.507059],
+              [112.284171, 32.508494],
+              [112.280837, 32.518323],
+              [112.282125, 32.525889],
+              [112.284539, 32.530715],
+              [112.287774, 32.534399],
+              [112.290981, 32.541287],
+              [112.293601, 32.553446],
+              [112.29651, 32.565151],
+              [112.299427, 32.573868],
+              [112.300185, 32.580014],
+              [112.300942, 32.581696],
+              [112.302018, 32.582801],
+              [112.303781, 32.582392],
+              [112.303866, 32.583391],
+              [112.301388, 32.58372],
+              [112.298365, 32.584887],
+              [112.294889, 32.585421],
+              [112.293537, 32.586085],
+              [112.289516, 32.586855],
+              [112.287428, 32.587041],
+              [112.287173, 32.588723],
+              [112.278989, 32.590257],
+              [112.280072, 32.594136],
+              [112.276823, 32.594695],
+              [112.272427, 32.595949],
+              [112.273396, 32.599083],
+              [112.274359, 32.601255],
+              [112.264434, 32.603781],
+              [112.265333, 32.606773],
+              [112.261206, 32.607561],
+              [112.255365, 32.609112],
+              [112.254707, 32.609981],
+              [112.254686, 32.611638],
+              [112.255316, 32.614009],
+              [112.255238, 32.617254],
+              [112.253277, 32.617534],
+              [112.249709, 32.618551],
+              [112.249957, 32.619513],
+              [112.251104, 32.619426],
+              [112.251635, 32.62104],
+              [112.253199, 32.620953],
+              [112.253298, 32.622523],
+              [112.252059, 32.622585],
+              [112.252166, 32.623733],
+              [112.24898, 32.624086],
+              [112.248661, 32.622758],
+              [112.247989, 32.623149],
+              [112.249072, 32.626475],
+              [112.248817, 32.627139],
+              [112.249497, 32.628926],
+              [112.253157, 32.627753],
+              [112.253688, 32.628039],
+              [112.253879, 32.631011],
+              [112.256137, 32.631737],
+              [112.257744, 32.633449],
+              [112.264165, 32.638232],
+              [112.265248, 32.640273],
+              [112.265128, 32.642283],
+              [112.276334, 32.644945],
+              [112.279527, 32.644839],
+              [112.283222, 32.645007],
+              [112.284072, 32.647867],
+              [112.281481, 32.648394],
+              [112.280816, 32.647947],
+              [112.280327, 32.648934],
+              [112.274232, 32.652041],
+              [112.274465, 32.655062],
+              [112.274805, 32.655242],
+              [112.277955, 32.654076],
+              [112.2794, 32.656129],
+              [112.280851, 32.657121],
+              [112.283258, 32.656942],
+              [112.283258, 32.656464],
+              [112.292886, 32.657946],
+              [112.294967, 32.661345],
+              [112.296291, 32.667994],
+              [112.301105, 32.677191],
+              [112.304361, 32.680192],
+              [112.308418, 32.682282],
+              [112.313557, 32.685748],
+              [112.315179, 32.688284],
+              [112.315971, 32.691955],
+              [112.314018, 32.69813],
+              [112.311002, 32.702457],
+              [112.312857, 32.708427],
+              [112.318258, 32.713963],
+              [112.323688, 32.716976],
+              [112.327468, 32.720211],
+              [112.328247, 32.726403],
+              [112.327419, 32.729149],
+              [112.31566, 32.735024],
+              [112.315051, 32.742578],
+              [112.315554, 32.74831],
+              [112.318265, 32.753372],
+              [112.321762, 32.757288],
+              [112.327157, 32.764202],
+              [112.333627, 32.773866],
+              [112.33876, 32.781002],
+              [112.343078, 32.787908],
+              [112.345478, 32.794113],
+              [112.345974, 32.802362],
+              [112.3454, 32.805793],
+              [112.34848, 32.806195],
+              [112.348727, 32.808115],
+            ],
+          ],
+        ],
+      },
+    },
+  ],
+};

src/pages/MonitoringScreen2/components/map/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Styles from '@/components/GeoMap/style.less';
+import Map from './map';
+
+export default (props) => {
+  return (
+    <div className={Styles['geo-map-container']}>
+      {/* 占位图片 */}
+      <div className={Styles['geo-map-header']}>
+        <div />
+        <div />
+        <div />
+      </div>
+
+      <div className={Styles['geo-map-body']}>
+        <Map />
+      </div>
+
+      {/* 占位图片 */}
+      <div className={Styles['geo-map-footer']}>
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+};

src/pages/MonitoringScreen2/components/map/map.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import loader from '@/components/AMap/loader';
+import geoData from './geoData';
+
+const dzData = geoData.features[0].geometry.coordinates[0][0];
+
+const plugins = ['AMap.ToolBar'];
+export default (props) => {
+  const { style, className } = props;
+  const containerRef = React.useRef();
+  const mapRef = React.useRef();
+  const mapInstRef = React.useRef();
+
+  React.useEffect(() => {
+    loader(plugins)
+      .then((AMap) => {
+        const mapInst = new AMap.Map(containerRef.current, {
+          mapStyle: 'amap://styles/light',
+          layers: [
+            // 卫星
+            new AMap.TileLayer.Satellite(),
+            // 路网
+            // new AMap.TileLayer.RoadNet(),
+          ],
+          zoom: 10,
+          resizeEnable: true,
+          center: [112.092716, 32.681642],
+        });
+
+        // 缩放按钮
+        mapInst.addControl(new AMap.ToolBar());
+
+        // 绘制边线
+        const dengzhou = new AMap.Polygon({
+          path: dzData,
+          fillColor: '#ccebc5',
+          strokeOpacity: 1,
+          fillOpacity: 0,
+          strokeColor: '#ff0000', // '#2b8cbe',
+          strokeWeight: 2,
+          strokeStyle: 'dashed',
+          strokeDasharray: [5, 5],
+        });
+        mapInst.add(dengzhou);
+
+        //
+        mapRef.current = AMap;
+        mapInstRef.current = mapInst;
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+
+  return <div style={style} className={className} ref={containerRef}></div>;
+};

src/pages/MonitoringScreen2/index.jsx

@@ -1,5 +1,5 @@
 import getWeather from '@/components/AMap/weather';
-import GeoMap from '@/components/GeoMap';
+// import GeoMap from '@/components/GeoMap';
 import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 import SquareBox from '@/components/ScreenBox/SquareBox';
 import StatisCard from '@/components/ScreenBox/StatisCard';
@@ -18,11 +18,13 @@ import {
 import MachineryStatus from './components/MachineryStatus';
 import MachineryType from './components/MachineryType';
 import { useParticlesJs } from './hook';
+import Map from './components/map';
 
 import ColorFont from './components/ColorFont';
 import List from './components/List';
 import WorkArea from './components/WorkArea';
 import WorkData from './components/WorkData';
+import DeviceList from './components/DeviceList';
 import Styles from './style.less';
 
 export default (props) => {
@@ -169,16 +171,6 @@ export default (props) => {
           <ScreenHeader weather={weather} />
         </div>
         <div className={classNames(Styles['grail-container'], Styles['mg-tp-30'])}>
-          <div className={Styles['grail-left']}>
-            <div className="flex flex-column full-height">
-              <div className="flex-0" style={{ minHeight: '37%' }}>
-                <MachineryType source={machineryTypeData} />
-              </div>
-              <div className="flex-1" style={{ marginTop: '30px' }}>
-                <MachineryStatus source={machineryStatusData} />
-              </div>
-            </div>
-          </div>
           <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
             <div className={Styles['statis-container']}>
               <StatisCard
@@ -206,50 +198,12 @@ export default (props) => {
                 title="总服务数"
               />
             </div>
-            <GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} />
-          </div>
-          <div className={Styles['grail-right']}>
-            <div className="flex flex-column full-height">
-              <div className="flex-0" style={{ minHeight: '46%' }}>
-                <WorkData source={workData} />
-              </div>
-              <div className="flex-1" style={{ marginTop: '30px' }}>
-                <WorkArea source={workAreaData} />
-              </div>
-            </div>
+            {/* <GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} /> */}
+            <Map />
           </div>
         </div>
-        <div className={classNames(Styles['grail-footer'], Styles['mg-tp-30'])}>
-          <SquareBox>
-            <div className="flex" style={{ padding: '20px 0' }}>
-              <div className="flex-1">
-                <List title="预约订单">
-                  {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">
-                  {acceptList?.map((item) => {
-                    return (
-                      <div key={item.messageId}>
-                        <ColorFont color="#44F68B">[{item.acceptTime}]</ColorFont>{' '}
-                        <ColorFont color="#F5CC5C">{item.acceptPerson}</ColorFont> 接到了一个订单。
-                      </div>
-                    );
-                  })}
-                </List>
-              </div>
-            </div>
-          </SquareBox>
+        <div>
+          <DeviceList />
         </div>
       </div>
     </div>