feats

src/components/GeoMap/VideoModel.jsx

@@ -0,0 +1,32 @@
+import { Modal, Button } from 'antd';
+import React from 'react';
+
+export default (props) => {
+  const { width = 600, height = 480, machineryRef, visible, toggleVisible } = props;
+
+  const handleCancel = () => {
+    toggleVisible(false);
+  };
+
+  return (
+    <Modal
+      width={width}
+      footer={null}
+      visible={visible}
+      onCancel={handleCancel}
+      bodyStyle={{ padding: 0 }}
+    >
+      <video
+        style={{ display: 'block' }}
+        width={width}
+        height={height}
+        controls
+        src="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"
+      >
+        <source src="movie.mp4" type="video/mp4" />
+        <source src="movie.ogg" type="video/ogg" />
+        您的浏览器不支持 video 。
+      </video>
+    </Modal>
+  );
+};

src/components/GeoMap/index.jsx

@@ -4,6 +4,7 @@ import useMap from './map';
 import { useMarker, useMarkerVisible } from './marker';
 import Styles from './style.less';
 import RadioGroup from '../ScreenBox/Radio/RadioGroup';
+import VideoModel from './VideoModel';
 
 export default (props) => {
   const { machineTypeList, orgList, machineList } = props;
@@ -80,23 +81,7 @@ 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>
+      <VideoModel visible={isModalVisible} toggleVisible={setIsModalVisible} />
     </div>
   );
 };