feats

src/global.less

@@ -88,3 +88,9 @@ ol {
   background: transparent;
   border: none;
 }
+
+.amap-icon img,
+.amap-marker-content img {
+  width: 25px;
+  height: 34px;
+}

src/pages/MonitoringScreen2/components/Banner.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import StatisCard from '@/components/ScreenBox/StatisCard';
+import { getBasic } from '@/services/monitoringScreen';
+
+export default (props) => {
+  const [basic, setBasic] = React.useState();
+
+  React.useEffect(() => {
+    //顶部基本数据
+    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);
+      });
+  }, []);
+
+  return (
+    <>
+      <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="总服务数" />
+    </>
+  );
+};

src/pages/MonitoringScreen2/components/BasicChart.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import SquareBox from '@/components/ScreenBox/SquareBox';
-import TitleBox from '@/components/ScreenBox/TitleBox';
-import ECharts from '@/components/ECharts';
-
-export default (props) => {
-  return (
-    <div style={{ height: '100%' }}>
-      <TitleBox value={props.title} />
-      <SquareBox style={{ height: 'calc(100% - 48px)', minHeight: '100px' }}>
-        <ECharts option={props.option} />
-      </SquareBox>
-    </div>
-  );
-};

src/pages/MonitoringScreen2/components/ColorFont.jsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default (props) => {
-  return <font color={props.color}>{props.children}</font>;
-};

src/pages/MonitoringScreen2/components/DeviceType.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import RadioGroup from '@/components/ScreenBox/Radio/RadioGroup';
+
+export default (props) => {
+  const list = [
+    { id: '', name: '全部' },
+    { id: 'shensong', name: '深松' },
+    { id: 'feifang', name: '飞防' },
+  ];
+
+  const [value, setValue] = React.useState('');
+
+  const onChange = (val) => {
+    setValue(val);
+    props.onChange(val);
+  };
+
+  return <RadioGroup value={value} list={list} onChange={onChange} />;
+};

src/pages/MonitoringScreen2/components/List/Item.jsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Styles from './style.less';
-
-export default (props) => {
-  const classList = classNames(Styles['screen-item'], {
-    [Styles['yellow-item']]: props.color !== 'green',
-    [Styles['green-item']]: props.color === 'green',
-  });
-
-  return (
-    <div className={classList}>
-      <div />
-      <div>{props.children}</div>
-    </div>
-  );
-};

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

@@ -1,66 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay } from 'swiper';
-import 'swiper/css';
-import classNames from 'classnames';
-import Item from './Item';
-import Styles from './style.less';
-
-export default (props) => {
-  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']}>
-      <div className={classList}>
-        <div>{title}</div>
-      </div>
-      <Swiper
-        height={48}
-        onSwiper={(swiper) => {
-          swiperRef.current = swiper;
-          initAutoPlay(swiper);
-        }}
-        className={Styles['list-body']}
-        //因为loop只能在组件初始化时改变所以加一个不让它创建初始化的属性就可以了
-        init={false}
-        autoplay={{
-          delay: 2500,
-          disableOnInteraction: false,
-        }}
-        loop={enable}
-        loopAdditionalSlides={2}
-        modules={[Autoplay]}
-        direction="vertical"
-      >
-        {React.Children.map(children, (child) => (
-          <SwiperSlide>
-            <Item color={color}>{child}</Item>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    </div>
-  );
-};

src/pages/MonitoringScreen2/components/List/style.less

@@ -1,97 +0,0 @@
-.screen-list {
-  .list-title {
-    position: relative;
-    padding: 0 20px;
-
-    & > div {
-      height: 28px;
-      color: #ffffff;
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 28px;
-
-      background: linear-gradient(0deg, #ffcf84 0%, #fb9900 93.84765625%);
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    &::before {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 10px;
-      height: 10px;
-      background: linear-gradient(0deg, #ffcf84, #fb9900);
-      transform: translateY(-50%);
-      content: ' ';
-    }
-  }
-
-  .yellow-title {
-    &::before {
-      background: linear-gradient(0deg, #ffcf84, #fb9900);
-    }
-  }
-
-  .green-title {
-    & > div {
-      background: linear-gradient(0deg, #9fffc5 0%, #44f68b 93.84765625%);
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    &::before {
-      background: linear-gradient(0deg, #9fffc5, #44f68b);
-    }
-  }
-
-  .screen-item {
-    position: relative;
-    padding: 0 20px;
-
-    & > div {
-      height: 48px;
-      color: #fff;
-      font-size: 16px;
-      line-height: 48px;
-
-      &:first-child {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(0deg, rgba(61, 129, 240, 0.24), rgba(61, 129, 240, 0));
-        opacity: 0.5;
-      }
-    }
-
-    &::before {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      width: 4px;
-      height: 8px;
-      background: #fb9900;
-      transform: translateY(-40%);
-      content: ' ';
-    }
-  }
-
-  .yellow-item {
-    &::before {
-      background: #fb9900;
-    }
-  }
-
-  .green-item {
-    &::before {
-      background: #25e1aa;
-    }
-  }
-
-  .list-body {
-    width: 100%;
-    height: 144px;
-  }
-}

src/pages/MonitoringScreen2/components/MachineryInfo.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Col, Row } from 'antd';
+
+export default React.forwardRef((props, ref) => {
+  const { data = {} } = props;
+  console.log(data);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        background: 'rgba(0,0,0,0.8)',
+        color: '#fff',
+        padding: '1em',
+        borderRadius: '4px',
+        width: '320px',
+      }}
+    >
+      <div style={{ textAlign: 'right' }}>X</div>
+      <Row gutter={16}>
+        <Col span={8}>农机名称</Col>
+        <Col span={16}>{data.machineryName || ''}</Col>
+      </Row>
+      <Row gutter={16}>
+        <Col span={8}>设备编号</Col>
+        <Col span={16}>{data.deviceNo || ''}</Col>
+      </Row>
+      <Row gutter={16}>
+        <Col span={8}>设备类型</Col>
+        <Col span={16}>{data.deviceType === 'shensong' ? '深松' : '飞防'}</Col>
+      </Row>
+      <Row gutter={16}>
+        <Col span={8}>当前状态</Col>
+        <Col span={16}>{data.onlineStatus === 1 ? '在线' : '下线'}</Col>
+      </Row>
+      <Row gutter={16}>
+        <Col span={8}>位置信息</Col>
+        <Col span={16}>{data.loc || ''}</Col>
+      </Row>
+    </div>
+  );
+});

src/pages/MonitoringScreen2/components/MachineryStatus.jsx

@@ -1,94 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import * as echarts from 'echarts/core';
-import deepCopy from '@/utils/deepCopy';
-import { hex2Rgb } from '@/utils/color';
-
-import { colorArr } from '@/components/ScreenBox/utils';
-import BasicChart from './BasicChart';
-
-const colorList = colorArr.map((x) => {
-  const rgb = hex2Rgb(x);
-  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-    {
-      offset: 0,
-      color: x, // 0% 处的颜色
-    },
-    {
-      offset: 0.2,
-      color: x, // 20% 处的颜色
-    },
-    {
-      offset: 1,
-      color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`, // 100% 处的颜色
-    },
-  ]);
-});
-
-const defaultOpt = {
-  tooltip: {
-    extraCssText: 'width:160px;height:40px;',
-  },
-  grid: {
-    top: 40,
-    right: 20,
-    bottom: 20,
-    left: 20,
-    containLabel: true,
-  },
-  xAxis: {
-    type: 'category',
-    splitLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      color: '#fff',
-    },
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: {
-      lineStyle: {
-        color: ['rgba(255, 255, 255, 0.1)'],
-        type: 'dashed',
-      },
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      color: '#fff',
-    },
-  },
-  series: [
-    {
-      type: 'bar',
-      barMaxWidth: 18,
-      itemStyle: {
-        borderRadius: 10,
-      },
-      label: {
-        show: true,
-        color: '#fff',
-        textBorderWidth: 0,
-        position: 'top',
-        // align: 'right',
-      },
-    },
-  ],
-};
-
-export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.xAxis.data = props.source.map((x) => x.name);
-  option.series[0].data = props.source.map((x, i) => ({
-    value: x.value,
-    itemStyle: {
-      color: colorList[i % 6],
-    },
-  }));
-
-  return <BasicChart title="农机状态统计" option={option} />;
-};

src/pages/MonitoringScreen2/components/MachineryType.jsx

@@ -1,105 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import * as echarts from 'echarts/core';
-import deepCopy from '@/utils/deepCopy';
-import { hex2Rgb } from '@/utils/color';
-import { colorArr } from '@/components/ScreenBox/utils';
-import BasicChart from './BasicChart';
-
-const colorList = colorArr.map((x) => {
-  const rgb = hex2Rgb(x);
-  return new echarts.graphic.LinearGradient(0, 1, 1, 1, [
-    {
-      offset: 0,
-      color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`, // 0% 处的颜色
-    },
-    {
-      offset: 0.8,
-      color: x, // 80% 处的颜色
-    },
-    {
-      offset: 1,
-      color: x, // 100% 处的颜色
-    },
-  ]);
-});
-
-const defaultOpt = {
-  tooltip: {
-    extraCssText: 'width:160px;height:40px;',
-  },
-  legend: {},
-  grid: {
-    top: 20,
-    right: 40,
-    bottom: 20,
-    left: 10,
-    containLabel: true,
-  },
-  xAxis: {
-    type: 'value',
-    splitLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      show: false,
-    },
-  },
-  yAxis: {
-    type: 'category',
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      color: '#fff',
-      width: 40,
-      overflow: 'truncate',
-    },
-  },
-  series: [
-    {
-      type: 'bar',
-      barMaxWidth: 16,
-      itemStyle: {
-        borderRadius: 10,
-      },
-      encode: {
-        x: 'value',
-        y: 'key',
-      },
-      label: {
-        show: true,
-        color: '#fff',
-        textBorderWidth: 0,
-        position: 'right',
-        // align: 'right',
-      },
-      // showBackground: true,
-    },
-  ],
-};
-
-export default (props) => {
-  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/MonitoringScreen2/components/WorkArea.jsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import deepCopy from '@/utils/deepCopy';
-import { colorArr } from '@/components/ScreenBox/utils';
-import BasicChart from './BasicChart';
-
-const defaultOpt = {
-  // tooltip: {
-  //   trigger: 'item',
-  //   formatter: '{b} : {c} ({d}%)',
-  // },
-  color: colorArr,
-  legend: {
-    orient: 'vertical',
-    left: 'right',
-    bottom: '5%',
-    textStyle: { color: '#fff' },
-  },
-  toolbox: {},
-  series: [
-    {
-      type: 'pie',
-      radius: ['40%', '55%'],
-      center: ['40%', '50%'],
-      selectedMode: 'single',
-      avoidLabelOverlap: false,
-      label: {
-        color: '#fff',
-        formatter: '{b} \n{d}%',
-      },
-      // labelLine: {
-      //   length: 10,
-      //   length2: 36,
-      // },
-    },
-  ],
-};
-
-export default (props) => {
-  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/MonitoringScreen2/components/WorkData.jsx

@@ -1,59 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import deepCopy from '@/utils/deepCopy';
-import { colorArr } from '@/components/ScreenBox/utils';
-import BasicChart from './BasicChart';
-
-const defaultOpt = {
-  // tooltip: {
-  //   trigger: 'item',
-  //   formatter: '{b} : {c} ({d}%)',
-  // },
-  color: colorArr,
-  legend: {
-    orient: 'vertical',
-    left: 'left',
-    top: '5%',
-    textStyle: { color: '#fff' },
-  },
-  series: [
-    {
-      type: 'pie',
-      radius: ['45%', '65%'],
-      itemStyle: {
-        borderRadius: 4,
-        borderColor: '#041B38',
-        borderWidth: 2,
-      },
-      label: {
-        show: false,
-        position: 'center',
-        formatter: '{b}\n{d}%',
-      },
-      emphasis: {
-        label: {
-          color: '#25E1AA',
-          show: true,
-          fontSize: '18',
-        },
-      },
-      labelLine: {
-        show: false,
-      },
-    },
-  ],
-};
-
-export default (props) => {
-  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/MonitoringScreen2/components/machinery.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { transform } from './map/coordinate';
+
+export default function makeMachinery(machines, markers, map, AMap, onClick) {
+  if (!map) return;
+  if (!machines || !machines.length) return;
+
+  // 清除原记录
+  if (markers.length > 0) {
+    for (let i in markers) {
+      const marker = markers[i];
+      marker.setMap(null);
+      delete markers[i];
+    }
+  }
+
+  for (let item of machines) {
+    if (!item.location) continue;
+    if (item.location.indexOf('0.0') > -1) continue;
+
+    const position = transform(item.location);
+
+    const marker = new AMap.Marker({
+      map,
+      position,
+      icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
+      offset: new AMap.Pixel(-13, -30),
+    });
+
+    marker.on('click', () => onClick(item, position));
+    markers.push(marker);
+  }
+
+  // 第一个参数为空，表明用图上所有覆盖物 setFitview
+  // 第二个参数为false, 非立即执行
+  // 第三个参数设置上左下右的空白
+  map.setFitView(null, false, [150, 60, 100, 60]);
+}

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

@@ -0,0 +1,54 @@
+
+/**  
+ * 单点坐标纠偏
+ */
+const pi = 3.14159265358979324;
+const a = 6378245.0;
+const ee = 0.00669342162296594323;
+const x_pi = 3.14159265358979324 * 3000.0 / 180.0;
+
+function outOfChina(lat, lon) {
+  if(lon < 72.004 || lon > 137.8347)
+      return true;
+  if(lat < 0.8293 || lat > 55.8271)
+      return true;
+  return false;
+};
+
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
+  ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
+  return ret;
+};
+
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
+  ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
+  ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
+  ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
+  return ret;
+};
+
+// wgs84 转 gcj02
+export function transform (location) {
+  const [wgLon, wgLat] = location.split(',').map(x => x - 0);
+  const latlng = [];
+  if(outOfChina(wgLat, wgLon)) {
+    latlng[0] = wgLon;
+    latlng[1] = wgLat;
+    return latlng;
+  }
+  let dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
+  let dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
+  const radLat = wgLat / 180.0 * pi;
+  let magic = Math.sin(radLat);
+  magic = 1 - ee * magic * magic;
+  const sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
+  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
+  latlng[0] = wgLon + dLon;
+  latlng[1] = wgLat + dLat;
+  return latlng;
+};

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

@@ -5,7 +5,7 @@ import Map from './map';
 export default (props) => {
   return (
     <div className={Styles['geo-map-container']}>
-      <Map style={{ height: '100%' }} />
+      <Map style={{ height: '100%' }} {...props} />
       {props.children}
     </div>
   );

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

@@ -6,21 +6,19 @@ const dzData = geoData.features[0].geometry.coordinates[0][0];
 
 const plugins = ['AMap.ToolBar'];
 export default (props) => {
-  const { style, className } = props;
+  const { style, className, onReady } = 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',
+        const map = new AMap.Map(containerRef.current, {
+          mapStyle: 'amap://styles/d8278c296329ee0867aa26718e23bb80',
           layers: [
             // 卫星
             new AMap.TileLayer.Satellite(),
             // 路网
-            // new AMap.TileLayer.RoadNet(),
+            new AMap.TileLayer.RoadNet(),
           ],
           zoom: 10,
           resizeEnable: true,
@@ -28,7 +26,7 @@ export default (props) => {
         });
 
         // 缩放按钮
-        mapInst.addControl(new AMap.ToolBar());
+        map.addControl(new AMap.ToolBar());
 
         // 绘制边线
         const dengzhou = new AMap.Polygon({
@@ -41,11 +39,9 @@ export default (props) => {
           strokeStyle: 'dashed',
           strokeDasharray: [5, 5],
         });
-        mapInst.add(dengzhou);
+        map.add(dengzhou);
 
-        //
-        mapRef.current = AMap;
-        mapInstRef.current = mapInst;
+        onReady(map, AMap);
       })
       .catch((err) => {
         console.log(err.message);

src/pages/MonitoringScreen2/index.jsx

@@ -1,149 +1,116 @@
 import getWeather from '@/components/AMap/weather';
 // import GeoMap from '@/components/GeoMap';
 import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
-import SquareBox from '@/components/ScreenBox/SquareBox';
-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 { getDeviceMachineryList } from '@/services/monitoringScreen';
+import { regeo } from '@/components/AMap/service';
 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 Banner from './components/Banner';
 import DeviceList from './components/DeviceList';
+import DeviceType from './components/DeviceType';
+import makeMachinery from './components/machinery';
+import MachineryInfo from './components/MachineryInfo';
 import Styles from './style.less';
 
 export default (props) => {
   const screenRef = useRef();
+  const mapRef = useRef();
+  const aMapRef = useRef();
+  const [mapReady, setMapReady] = useState(false);
   const [weather, setWeather] = useState('暂无天气信息');
+  const [machines, setMachines] = useState([]);
+  const machineMarkers = useRef([]);
+  const [deviceType, setDeviceType] = useState();
+  const [curMachine, setCurMachine] = useState();
+  const curPos = useRef();
+  const infoWinRef = useRef();
 
-  const [basic, setBasic] = useState();
-
-  const [machineryTypeData, setMachineryTypeData] = useState([]);
+  const onMapReady = (map, AMap) => {
+    mapRef.current = map;
+    aMapRef.current = AMap;
+    setMapReady(true);
+  };
 
-  const [machineryStatusData, setMachineryStatusData] = useState([
-    { name: '预约', value: 350 },
-    { name: '作业', value: 900 },
-    { name: '闲置', value: 650 },
-    { name: '离线', value: 180 },
-    { name: '维修', value: 380 },
-  ]);
-
-  const [workData, setWorkData] = useState([]);
+  useEffect(() => {
+    if (mapReady) {
+      makeMachinery(
+        machines,
+        machineMarkers.current,
+        mapRef.current,
+        aMapRef.current,
+        (machine, position) => {
+          // 创建信息窗体
+          setCurMachine(machine);
+          curPos.current = position;
+        },
+      );
+    }
+  }, [mapReady, machines]);
 
-  const [workAreaData, setWorkAreaData] = useState([]);
+  useEffect(() => {
+    if (mapReady) {
+      const map = mapRef.current;
+      const AMap = aMapRef.current;
 
-  const [machineTypeList, setMachineTypeList] = useState([{ id: 't0', name: '合作社' }]);
+      if (curMachine) {
+        const infoWindow = new AMap.InfoWindow({
+          isCustom: true, //使用自定义窗体
+          content: infoWinRef.current,
+          offset: new AMap.Pixel(16, -45),
+        });
 
-  const [orgList, setOrgList] = useState();
+        infoWindow.on('close', () => {
+          map.clearInfoWindow();
+        });
 
-  const [machineList, setMachineList] = useState([]);
-  const [appointList, setAppointList] = useState();
-  const [acceptList, setAcceptList] = useState();
+        infoWindow.open(map, curPos.current);
+      } else {
+        map.clearInfoWindow();
+      }
+    }
+  }, [curMachine, mapReady]);
 
   useEffect(() => {
-    //顶部基本数据
-    getBasic()
-      .then((res) => {
-        var data = {};
-        for (let i = 0; i < res.length; i++) {
-          const element = res[i];
-          data[element.name] = element.value;
+    const params = deviceType ? { deviceType } : undefined;
+    getDeviceMachineryList(params).then((res) => {
+      const locIds = [];
+      const locList = [];
+      const list = res || [];
+
+      for (let item of list) {
+        if (item.location && item.location.indexOf('0.0') === -1) {
+          locIds.push(item.machineryId);
+          locList.push(item.location);
         }
-        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);
-      });
+      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 addressComponent = addrs.addressComponent;
+                const machine = list.filter((x) => x.machineryId === locIds[inx])[0];
+                machine.loc = addr.replace(addressComponent.province, ''); // 去掉省
+              });
+            }
+
+            setMachines(list);
+          })
+          .catch((er) => {
+            console.error(er);
 
+            setMachines(list);
+          });
+      }
+    });
+  }, [deviceType]);
+
+  useEffect(() => {
     getWeather()
       .then((res) => {
         if (res && res.length) {
@@ -172,44 +139,27 @@ export default (props) => {
         </div>
         <div className={classNames(Styles['grail-container'], Styles['mg-tp-30'])}>
           <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
-            <div className={Styles['statis-container']}>
-              <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} /> */}
-            <Map>
+            {/* <div className={Styles['statis-container']}>
+              <Banner />
+            </div> */}
+            <Map onReady={onMapReady}>
               <div
                 className={Styles['map-addon']}
-                style={{ right: '20px', bottom: '100px', width: '600px' }}
+                style={{
+                  top: '60px',
+                  left: '60px',
+                  width: '120px',
+                }}
               >
-                <DeviceList />
+                <DeviceType onChange={setDeviceType} />
               </div>
             </Map>
           </div>
         </div>
       </div>
+      <div style={{ position: 'absolute', zIndex: -1 }}>
+        <MachineryInfo data={curMachine} ref={infoWinRef} />
+      </div>
     </div>
   );
 };

src/pages/MonitoringScreen2/style.less

@@ -90,4 +90,7 @@
 .map-addon {
   position: absolute;
   z-index: 20;
+  padding: 1em;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 6px;
 }

src/services/monitoringScreen.js

@@ -57,3 +57,11 @@ export const getTypeBasic = (params) => request('/screen-data/machinery/all', {
  * @returns
  */
 export const getMessageList = (params) => request('/screen-data/message', { params });
+
+/**
+ *  获取绑定设备农机
+ * @param {*} params
+ * @returns
+ */
+export const getDeviceMachineryList = (params) =>
+  request('/screen-data/machinery-device', { params });