feats

src/components/GeoMap/VideoModel.jsx

@@ -1,13 +1,24 @@
 import { Modal, Button } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 export default (props) => {
   const { width = 600, height = 480, 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 handleCancel = () => {
     toggleVisible(false);
   };
 
+  useEffect(() => {
+    // 隐藏的时候取消视频播放
+    if (!visible) {
+      setURL(undefined);
+    }
+  }, [visible]);
+
   return (
     <Modal
       width={width}
@@ -16,15 +27,7 @@ export default (props) => {
       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 style={{ display: 'block' }} width={width} height={height} controls src={url}>
         您的浏览器不支持 video 。
       </video>
     </Modal>

src/pages/MonitoringScreen/components/MachineryStatus.jsx

@@ -66,6 +66,16 @@ const defaultOpt = {
     {
       type: 'bar',
       barMaxWidth: 18,
+      itemStyle: {
+        borderRadius: 10,
+      },
+      label: {
+        show: true,
+        color: '#fff',
+        textBorderWidth: 0,
+        position: 'top',
+        // align: 'right',
+      },
     },
   ],
 };

src/pages/MonitoringScreen/components/MachineryType.jsx

@@ -65,6 +65,9 @@ const defaultOpt = {
     {
       type: 'bar',
       barMaxWidth: 16,
+      itemStyle: {
+        borderRadius: 10,
+      },
       encode: {
         x: 'value',
         y: 'key',
@@ -76,7 +79,7 @@ const defaultOpt = {
         position: 'right',
         // align: 'right',
       },
-      showBackground: true,
+      // showBackground: true,
     },
   ],
 };