fix: bug#4175

src/components/Player/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 import { isFunction } from 'lodash';
 
 export type PlayerProps = {
@@ -37,13 +37,12 @@ const EventsEnum = {
   snapInside: 'onSnapInside',
   customButtons: 'onCustomButtons',
 };
-export default (props: PlayerProps) => {
+const LivePlayer = forwardRef((props: PlayerProps, ref) => {
   const player = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     return () => {
       // 销毁播放器
-      console.log('销毁', props);
       if ('onDestroy' in props && isFunction(props.onDestroy)) {
         props.onDestroy();
       }
@@ -63,6 +62,10 @@ export default (props: PlayerProps) => {
     }
   };
 
+  useImperativeHandle(ref, () => ({
+    ...player.current,
+  }));
+
   return (
     // @ts-ignore: Unreachable code error
     <live-player
@@ -84,4 +87,6 @@ export default (props: PlayerProps) => {
       video-url={props.url || ''}
     />
   );
-};
+});
+
+export default LivePlayer;

src/components/ProTableCard/index.less

@@ -112,10 +112,12 @@
         top: 0;
         left: @card-content-padding-left + 10px;
         display: block;
-        width: 120px;
-        height: 4px;
+        width: 15%;
+        min-width: 64px;
+        height: 2px;
         background-image: url('/images/rectangle.png');
         background-repeat: no-repeat;
+        background-size: 100% 100%;
         content: ' ';
       }
 

src/pages/device/Product/Detail/Access/index.tsx

@@ -26,7 +26,7 @@ const Access = () => {
   const [access, setAccess] = useState<any>();
   const [providers, setProviders] = useState<any[]>([]);
   const [networkList, setNetworkList] = useState<any[]>([]);
-  const { permission } = usePermissions('device/Product');
+  const { permission } = usePermissions('link/AccessConfig');
 
   const MetworkTypeMapping = new Map();
   MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');

src/pages/device/Product/Detail/index.tsx

@@ -187,9 +187,7 @@ const ProductDetail = observer(() => {
       onBack={() => history.goBack()}
       extraContent={<Space size={24} />}
       onTabChange={(key) => {
-        if (permission.update) {
-          setMode(key);
-        }
+        setMode(key);
       }}
       tabList={list}
       tabActiveKey={mode}

src/pages/device/Product/index.tsx

@@ -151,19 +151,18 @@ const Product = observer(() => {
           defaultMessage: '下载',
         }),
       }}
+      onClick={async () => {
+        downloadObject(
+          record,
+          intl.formatMessage({
+            id: 'pages.device.product',
+            defaultMessage: '产品',
+          }),
+        );
+        message.success('操作成功');
+      }}
     >
-      <DownloadOutlined
-        onClick={async () => {
-          downloadObject(
-            record,
-            intl.formatMessage({
-              id: 'pages.device.product',
-              defaultMessage: '产品',
-            }),
-          );
-          message.success('操作成功');
-        }}
-      />
+      <DownloadOutlined />
     </PermissionButton>,
     <PermissionButton
       popConfirm={{
@@ -380,13 +379,14 @@ const Product = observer(() => {
                   data.state = 0;
                   if (Array.isArray(data)) {
                     message.error('请上传json格式文件');
-                    return;
+                    return false;
                   }
                   const res = await service.update(data);
                   if (res.status === 200) {
                     message.success('操作成功');
                     actionRef.current?.reload();
                   }
+                  return true;
                 } catch {
                   message.error('请上传json格式文件');
                 }
@@ -437,19 +437,18 @@ const Product = observer(() => {
                 type={'link'}
                 key={'download'}
                 style={{ padding: 0 }}
+                onClick={async () => {
+                  downloadObject(
+                    record,
+                    intl.formatMessage({
+                      id: 'pages.device.product',
+                      defaultMessage: '产品',
+                    }),
+                  );
+                  message.success('操作成功');
+                }}
               >
-                <DownloadOutlined
-                  onClick={async () => {
-                    downloadObject(
-                      record,
-                      intl.formatMessage({
-                        id: 'pages.device.product',
-                        defaultMessage: '产品',
-                      }),
-                    );
-                    message.success('操作成功');
-                  }}
-                />
+                <DownloadOutlined />
                 {intl.formatMessage({
                   id: 'pages.data.option.download',
                   defaultMessage: '下载',

src/pages/media/Device/Channel/index.tsx

@@ -129,6 +129,8 @@ export default () => {
           })}
         >
           <Button
+            type={'link'}
+            style={{ padding: 0 }}
             onClick={() => {
               setCurrent(record);
               setVisible(true);

src/pages/media/Device/Playback/index.tsx

@@ -1,7 +1,7 @@
 // 回放
 import { PageContainer } from '@ant-design/pro-layout';
 import LivePlayer from '@/components/Player';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Calendar, Empty, List, Select, Tooltip } from 'antd';
 import { useLocation } from 'umi';
 import Service from './service';
@@ -31,6 +31,7 @@ export default () => {
   const [cloudTime, setCloudTime] = useState<any>();
   const [playing, setPlaying] = useState(false);
   const location = useLocation();
+  const player = useRef<any>();
 
   const param = new URLSearchParams(location.search);
   const deviceId = param.get('id');
@@ -186,6 +187,7 @@ export default () => {
             url={url}
             className={'playback-media'}
             live={type === 'local'}
+            ref={player}
             onPlay={() => {
               setPlaying(true);
             }}
@@ -297,6 +299,10 @@ export default () => {
                                   );
                                 }
                               } else {
+                                console.log(player.current);
+                                if (player.current.pause) {
+                                  player.current.pause();
+                                }
                                 setPlayTime(0);
                               }
                             }}