Merge branch 'master' of http://git.ycjcjy.com/nanyang/machinery-admin

src/components/ECharts/index.jsx

@@ -39,10 +39,14 @@ echarts.use([
 
 import Styles from './style.less';
 
+
+
+
 export default forwardRef((props, ref) => {
   const domRef = useRef();
   const echartsRef = useRef();
 
+
   useEffect(() => {
     echartsRef.current = echarts.init(domRef.current);
 

src/components/GeoMap/CarsMarker.js

@@ -0,0 +1,81 @@
+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';
+
+
+
+export default (AMap, map, opts = {}) => {
+  const marker = new AMap.Marker({
+    map,
+    icon: markerImg,
+    anchor: 'top-center',
+    offset: new AMap.Pixel(0, 0),
+    ...opts,
+  });
+
+  let show = false;
+
+  // 
+  const { carsName, carsRural } = opts?.extData;
+
+  marker.setLabel({
+    direction: 'top',
+    offset: new AMap.Pixel(0, 0),
+    content: `
+    <div class="SquareBox-box-carsMarker" onclick="openVideo()">
+    <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="carsName">名称：${carsName}</div>
+        <div class="map-button-border-carsRural carsName">
+        <div >归属：${carsRural}</div>
+        <span> \>> </span>
+        </div>
+  
+      </div>
+
+
+    </div>
+  </div> `,
+  });
+
+
+  // marker.on('click', () => {
+  //   if (show) {
+  //     marker.setLabel({ content: '' });
+  //     show = false;
+  //     return;
+  //   }
+
+
+  //   if (!content) {
+  //     marker.setLabel({ content: '' });
+  //   } else {
+  //     marker.setLabel({
+  //       direction: 'top',
+  //       offset: new AMap.Pixel(0, 0),
+  //       content: `<div class='geo-map-marker-label' ><div class='geo-map-marker-label-text'>${ruralName}</div></div>`,
+  //     });
+  //   }
+
+  //   show = true;
+  // });
+
+  return marker;
+};

src/components/GeoMap/RuralMarker.js

@@ -0,0 +1,55 @@
+import ruralMarkerImg from '@/assets/images/screen/map-rural.png';
+
+
+
+
+export default (AMap, map, opts = {}) => {
+  const marker = new AMap.Marker({
+    map,
+    icon: ruralMarkerImg,
+    anchor: 'top-center',
+    offset: new AMap.Pixel(0, 0),
+    ...opts,
+  });
+
+  let show = false;
+
+  // 合作社数据
+  const { ruralName, ruralAddress, ruralNumber, ruralPhone, } = 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>：${ruralName}</div>
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${ruralAddress}</div>
+      <div class="borderBox">农机数量：${ruralNumber}</div>
+      <div class="borderBox">联系电话：${ruralPhone}</div>
+    </div>`,
+  });
+
+
+  // marker.on('click', () => {
+  //   if (show) {
+  //     marker.setLabel({ content: '' });
+  //     show = false;
+  //     return;
+  //   }
+
+
+  //   if (!content) {
+  //     marker.setLabel({ content: '' });
+  //   } else {
+  //     marker.setLabel({
+  //       direction: 'top',
+  //       offset: new AMap.Pixel(0, 0),
+  //       content: `<div class='geo-map-marker-label' ><div class='geo-map-marker-label-text'>${ruralName}</div></div>`,
+  //     });
+  //   }
+
+  //   show = true;
+  // });
+
+  return marker;
+};

src/components/GeoMap/index.jsx

@@ -1,16 +1,32 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { Modal, Button } from 'antd';
 import loader from '@/components/AMap/loader';
 import getMarker from './marker';
+import getRuralMarker from './RuralMarker';
+import getCarsMarker from './CarsMarker';
+
 import geoPolygon from './geoPolygon';
 import Styles from './style.less';
 
 const plugins = [];
 
+
+
 export default (props) => {
+
+
   const container = useRef();
   const amapRef = useRef();
   const [map, setMap] = useState();
 
+  const [isModalVisible, setIsModalVisible] = useState(false)
+
+  window.openVideo = function () {
+    console.log(' window.foo 全局方法');
+    setIsModalVisible(true)
+
+  }
+
   useEffect(() => {
     loader(plugins).then((AMap) => {
       amapRef.current = AMap;
@@ -38,6 +54,27 @@ export default (props) => {
       position: [112.092716, 32.681642],
       extData: { value: '68辆' },
     });
+
+
+    // 合作社图标定位
+    getRuralMarker(amapRef.current, map, {
+      position: [111.909659, 32.651123],
+      extData: {
+        ruralName: 'ABC合作社',
+        ruralAddress: '南阳市邓州市林扒镇',
+        ruralNumber: '9辆',
+        ruralPhone: '13613949434',
+      }
+    })
+
+    // 农机监控
+    getCarsMarker(amapRef.current, map, {
+      position: [112.115574, 32.65235],
+      extData: {
+        carsName: '播种机0001',
+        carsRural: 'ABC合作社',
+      }
+    })
   }, [map]);
 
   return (
@@ -59,6 +96,14 @@ export default (props) => {
         <div />
         <div />
       </div>
+      <Modal title="农机监控" footer={null} visible={isModalVisible} onCancel={() => setIsModalVisible(false)}>
+        <video width="320" height="240" controls src='https://www.runoob.com/try/demo_source/movie.mp4'>
+          <source src="movie.mp4" type="video/mp4" />
+          <source src="movie.ogg" type="video/ogg" />
+          您的浏览器不支持 video 。
+        </video>
+
+      </Modal>
     </div>
   );
 };

src/components/GeoMap/marker.js

@@ -1,5 +1,6 @@
 import markerImg from '@/assets/images/screen/map-marker.png';
 
+
 export default (AMap, map, opts = {}) => {
   const marker = new AMap.Marker({
     map,
@@ -12,6 +13,7 @@ export default (AMap, map, opts = {}) => {
   let show = false;
   const content = opts?.extData?.value;
 
+
   marker.on('click', () => {
     if (show) {
       marker.setLabel({ content: '' });
@@ -19,13 +21,14 @@ export default (AMap, map, opts = {}) => {
       return;
     }
 
+
     if (!content) {
       marker.setLabel({ content: '' });
     } else {
       marker.setLabel({
         direction: 'top',
         offset: new AMap.Pixel(0, 0),
-        content: `<div class='geo-map-marker-label'><div class='geo-map-marker-label-text'>${content}</div></div>`,
+        content: `<div class='geo-map-marker-label' ><div class='geo-map-marker-label-text'>${content}</div></div>`,
       });
     }
 

src/global.less

@@ -1,5 +1,4 @@
 @import '~antd/es/style/variable.less';
-
 html,
 body,
 #root {
@@ -94,3 +93,120 @@ ol {
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+// 合作社的样式----Start----
+
+.geo-map-rural-box {
+  padding: 18px;
+  font-weight: 800;
+  font-size: 12px;
+  background: rgba(3, 3, 3, 0.3);
+
+  border: 1px solid rgba(61, 129, 240, 0.5);
+  border-radius: 4px;
+}
+
+.borderBox {
+  background-image: linear-gradient(360deg, #fca790 0%, #e63404 93.84765625%);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.geo-map-rural-text-span {
+  word-spacing: 19px;
+}
+// 合作社的样式----End----
+
+// 农机监控----Start----
+.SquareBox-box-carsMarker {
+  position: relative;
+  // height: 100%;
+  background: rgba(3, 3, 3, 0.3);
+  border: 1px solid rgba(61, 129, 240, 0.5);
+  border-radius: 4px;
+}
+.SquareBox-body-carsMarker {
+  height: 100%;
+  padding: 11px;
+  color: #fff;
+  // background: rgba(8, 40, 90, 0.4);
+  background: rgba(3, 3, 3, 0.3);
+
+  border: 2px solid rgba(61, 129, 240, 0.5);
+}
+.border_corner-carsMarker {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: #67ffff;
+  border-radius: 50%;
+}
+.border_corner_left_top-left {
+  top: 0;
+  left: -2px;
+  border-right: none;
+  border-bottom: none;
+}
+.border_corner_right_top-right {
+  top: 0;
+  right: -2px;
+  border-bottom: none;
+  border-left: none;
+}
+.border_corner_left_bottom-left {
+  bottom: 0;
+  left: -2px;
+  border-top: none;
+  border-right: none;
+}
+.border_corner_right_bottom-right {
+  right: -2px;
+  bottom: 0;
+  border-top: none;
+  border-left: none;
+}
+// 合作社的样式----End----
+
+// 农机监控信息----Start----
+
+//上部
+.map-top-border {
+  width: 100%;
+}
+
+.map-top-cars {
+  width: 7vw;
+}
+
+.map-top-start {
+  position: absolute;
+  top: 6.8vh;
+  left: 3.4vw;
+  // position: relative;
+  // top: 0px;
+  // left: 60px;
+}
+.map-top-stop {
+  position: absolute;
+  right: 1vw;
+  bottom: 8vh;
+}
+
+//底部
+.map-button-border {
+  font-weight: 800;
+  font-size: 12px;
+}
+.carsName {
+  margin-top: 15px;
+  background-image: linear-gradient(360deg, #fca790 0%, #e63404 93.84765625%);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.map-button-border-carsRural {
+  display: flex;
+  justify-content: space-between;
+  > span {
+    font-weight: 800;
+  }
+}
+// 合作社的样式----End----