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

src/components/GeoMap/VideoModel.jsx

@@ -1,12 +1,12 @@
 import { Modal, Button } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 export default (props) => {
-  const { width = 600, height = 480, machineryRef, visible, toggleVisible } = props;
+  const { width = 600, machineryRef, visible, toggleVisible } = props;
 
-  const [url, setURL] = useState(
-    'https://yz-offical.oss-cn-shanghai.aliyuncs.com/%E7%9C%81%E5%8F%98%E7%94%B5%E5%9F%B9%E8%AE%AD%E5%9F%BA%E5%9C%B0%E8%A7%86%E9%A2%91%20A%20copy.mov',
-  );
+  const [url, setURL] = useState();
+
+  const TitleHolder = useMemo(() => <div>这是标题占位</div>, []);
 
   const handleCancel = () => {
     toggleVisible(false);
@@ -16,18 +16,23 @@ export default (props) => {
     // 隐藏的时候取消视频播放
     if (!visible) {
       setURL(undefined);
+    } else {
+      setURL(
+        'https://yz-offical.oss-cn-shanghai.aliyuncs.com/%E7%9C%81%E5%8F%98%E7%94%B5%E5%9F%B9%E8%AE%AD%E5%9F%BA%E5%9C%B0%E8%A7%86%E9%A2%91%20A%20copy.mov',
+      );
     }
   }, [visible]);
 
   return (
     <Modal
-      width={width}
+      wrapClassName="geo-map-modal"
+      title={TitleHolder}
+      width={width + 4}
       footer={null}
       visible={visible}
       onCancel={handleCancel}
-      bodyStyle={{ padding: 0 }}
     >
-      <video style={{ display: 'block' }} width={width} height={height} controls src={url}>
+      <video style={{ display: 'block' }} width={width} controls src={url}>
         您的浏览器不支持 video 。
       </video>
     </Modal>

src/components/GeoMap/global.less

@@ -0,0 +1,155 @@
+.geo-map-modal {
+  .ant-modal-header,
+  .ant-modal-content {
+    background: transparent;
+  }
+
+  .ant-modal-header {
+    color: rgba(0, 0, 0, 0);
+  }
+
+  .ant-modal-body {
+    padding: 0;
+    border: 2px solid #0bdaff;
+  }
+
+  .ant-modal-close {
+    top: 8px;
+    right: -16px;
+  }
+
+  .ant-modal-close-x {
+    color: #0bdaff;
+    font-size: 24px;
+  }
+}
+
+.geo-map-marker-label {
+  display: inline-block;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.geo-map-marker-label-text {
+  font-size: 24px;
+  line-height: 24px;
+  background-image: linear-gradient(180deg, #fca790 0%, #e63404 93.84765625%);
+  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----

src/components/GeoMap/index.jsx

@@ -5,6 +5,7 @@ import { useMarker, useMarkerVisible } from './marker';
 import Styles from './style.less';
 import RadioGroup from '../ScreenBox/Radio/RadioGroup';
 import VideoModel from './VideoModel';
+import './global.less';
 
 export default (props) => {
   const { machineTypeList, orgList, machineList } = props;

src/global.less

@@ -88,133 +88,3 @@ ol {
   background: transparent;
   border: none;
 }
-
-.geo-map-marker-label {
-  display: inline-block;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.4);
-}
-
-.geo-map-marker-label-text {
-  font-size: 24px;
-  line-height: 24px;
-  background-image: linear-gradient(180deg, #fca790 0%, #e63404 93.84765625%);
-  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----