张延森 3 years ago
parent
commit
b2b1ee4a7d

+ 13
- 10
src/components/GeoMap/VideoModel.jsx View File

1
 import { Modal, Button } from 'antd';
1
 import { Modal, Button } from 'antd';
2
-import React from 'react';
2
+import React, { useEffect, useState } from 'react';
3
 
3
 
4
 export default (props) => {
4
 export default (props) => {
5
   const { width = 600, height = 480, machineryRef, visible, toggleVisible } = props;
5
   const { width = 600, height = 480, machineryRef, visible, toggleVisible } = props;
6
 
6
 
7
+  const [url, setURL] = useState(
8
+    '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',
9
+  );
10
+
7
   const handleCancel = () => {
11
   const handleCancel = () => {
8
     toggleVisible(false);
12
     toggleVisible(false);
9
   };
13
   };
10
 
14
 
15
+  useEffect(() => {
16
+    // 隐藏的时候取消视频播放
17
+    if (!visible) {
18
+      setURL(undefined);
19
+    }
20
+  }, [visible]);
21
+
11
   return (
22
   return (
12
     <Modal
23
     <Modal
13
       width={width}
24
       width={width}
16
       onCancel={handleCancel}
27
       onCancel={handleCancel}
17
       bodyStyle={{ padding: 0 }}
28
       bodyStyle={{ padding: 0 }}
18
     >
29
     >
19
-      <video
20
-        style={{ display: 'block' }}
21
-        width={width}
22
-        height={height}
23
-        controls
24
-        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"
25
-      >
26
-        <source src="movie.mp4" type="video/mp4" />
27
-        <source src="movie.ogg" type="video/ogg" />
30
+      <video style={{ display: 'block' }} width={width} height={height} controls src={url}>
28
         您的浏览器不支持 video 。
31
         您的浏览器不支持 video 。
29
       </video>
32
       </video>
30
     </Modal>
33
     </Modal>

+ 10
- 0
src/pages/MonitoringScreen/components/MachineryStatus.jsx View File

66
     {
66
     {
67
       type: 'bar',
67
       type: 'bar',
68
       barMaxWidth: 18,
68
       barMaxWidth: 18,
69
+      itemStyle: {
70
+        borderRadius: 10,
71
+      },
72
+      label: {
73
+        show: true,
74
+        color: '#fff',
75
+        textBorderWidth: 0,
76
+        position: 'top',
77
+        // align: 'right',
78
+      },
69
     },
79
     },
70
   ],
80
   ],
71
 };
81
 };

+ 4
- 1
src/pages/MonitoringScreen/components/MachineryType.jsx View File

65
     {
65
     {
66
       type: 'bar',
66
       type: 'bar',
67
       barMaxWidth: 16,
67
       barMaxWidth: 16,
68
+      itemStyle: {
69
+        borderRadius: 10,
70
+      },
68
       encode: {
71
       encode: {
69
         x: 'value',
72
         x: 'value',
70
         y: 'key',
73
         y: 'key',
76
         position: 'right',
79
         position: 'right',
77
         // align: 'right',
80
         // align: 'right',
78
       },
81
       },
79
-      showBackground: true,
82
+      // showBackground: true,
80
     },
83
     },
81
   ],
84
   ],
82
 };
85
 };