feat(merge): merge sc

src/components/Player/ScreenPlayer.tsx

@@ -16,7 +16,6 @@ type Player = {
   url?: string;
   channelId?: string;
   key: string;
-  updateTime?: number;
   show: boolean;
 };
 
@@ -44,9 +43,29 @@ const service = new Service();
 
 const DEFAULT_SAVE_CODE = 'screen-save';
 
+const useCallbackState = <T extends object>(olValue: T): [T, Function] => {
+  const cbRef = useRef<Function>();
+
+  const [players, setData] = useState<T>(olValue);
+
+  useEffect(() => {
+    if (cbRef.current) {
+      cbRef.current(players);
+    }
+  }, [players]);
+
+  return [
+    players,
+    function (value: T, callback?: Function) {
+      cbRef.current = callback;
+      setData(value);
+    },
+  ];
+};
+
 export default forwardRef((props: ScreenProps, ref) => {
   const [screen, setScreen] = useState(1);
-  const [players, setPlayers] = useState<Player[]>([]);
+  const [players, setPlayers] = useCallbackState<Player[]>([]);
   const [playerActive, setPlayerActive] = useState(0);
   const [historyList, setHistoryList] = useState<any>([]);
   const [visible, setVisible] = useState(false);
@@ -63,19 +82,50 @@ export default forwardRef((props: ScreenProps, ref) => {
 
   const historyForm = createForm();
 
+  const reloadPlayer = useCallback(
+    (id: string, channelId: string, url: string, index: number) => {
+      const olPlayers = [...players];
+      olPlayers[index] = {
+        id: '',
+        channelId: '',
+        url: '',
+        key: olPlayers[index].key,
+        show: true,
+      };
+      const newPlayer = {
+        id,
+        url,
+        channelId,
+        key: olPlayers[index].key,
+        show: true,
+      };
+      setPlayers([...olPlayers]);
+      setTimeout(() => {
+        olPlayers[index] = newPlayer;
+        setPlayers(olPlayers);
+      }, 1000);
+    },
+    [players],
+  );
+
   const replaceVideo = useCallback(
     (id: string, channelId: string, url: string) => {
       const olPlayers = [...players];
-      olPlayers[playerActive] = {
+      const newPlayer = {
         id,
         url,
         channelId,
         key: olPlayers[playerActive].key,
-        updateTime: new Date().getTime(),
         show: true,
       };
-      console.log(olPlayers[playerActive]);
-      setPlayers(olPlayers);
+
+      if (olPlayers[playerActive].url === url) {
+        // 刷新视频
+        reloadPlayer(id, channelId, url, playerActive);
+      } else {
+        olPlayers[playerActive] = newPlayer;
+        setPlayers(olPlayers);
+      }
       if (playerActive === screen - 1) {
         // 当前位置为分屏最后一位
         setPlayerActive(0);
@@ -212,8 +262,6 @@ export default forwardRef((props: ScreenProps, ref) => {
     </Menu>
   );
 
-  console.log(players);
-
   return (
     <div className={classNames('live-player-warp', props.className)}>
       <div className={'live-player-content'}>
@@ -311,7 +359,7 @@ export default forwardRef((props: ScreenProps, ref) => {
               return (
                 <div
                   key={item.key}
-                  className={classNames({
+                  className={classNames('player-screen-item', {
                     active: props.showScreen !== false && playerActive === index && !isFullscreen,
                     'full-screen': isFullscreen,
                   })}
@@ -320,7 +368,20 @@ export default forwardRef((props: ScreenProps, ref) => {
                     setPlayerActive(index);
                   }}
                 >
-                  <LivePlayer url={item.url} updateTime={item.updateTime} />
+                  <div
+                    className={'media-btn-refresh'}
+                    style={{ display: item.url ? 'block' : 'none' }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (item.url) {
+                        reloadPlayer(item.id!, item.channelId!, item.url!, index);
+                      }
+                    }}
+                  >
+                    {' '}
+                    刷新{' '}
+                  </div>
+                  <LivePlayer url={item.url} />
                 </div>
               );
             })}

src/components/Player/index.less

@@ -54,6 +54,30 @@
         .full-screen {
           border: 1px solid #fff;
         }
+
+        .player-screen-item {
+          position: relative;
+
+          .media-btn-refresh {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            z-index: 2;
+            padding: 2px 4px;
+            font-size: 12px;
+            background-color: #f0f0f0;
+            border-radius: 2px;
+            cursor: pointer;
+
+            &:hover {
+              background-color: #d9d9d9;
+            }
+
+            &:active {
+              background-color: #bfbfbf;
+            }
+          }
+        }
       }
     }
   }

src/components/Player/index.tsx

@@ -63,12 +63,6 @@ export default (props: PlayerProps) => {
     }
   };
 
-  useEffect(() => {
-    if (props.updateTime) {
-      console.log(props.updateTime);
-    }
-  }, [props.updateTime]);
-
   return (
     // @ts-ignore: Unreachable code error
     <live-player

src/pages/device/Instance/index.tsx

@@ -53,7 +53,7 @@ export const InstanceModel = model<{
   metadataItem: {},
   params: new Set<string>(['test']),
 });
-export const service = new Service('device/instance');
+export const service = new Service('device-instance');
 const Instance = () => {
   const actionRef = useRef<ActionType>();
   const [visible, setVisible] = useState<boolean>(false);

src/pages/device/Instance/service.ts

@@ -96,7 +96,7 @@ class Service extends BaseService<DeviceInstance> {
     });
 
   public setProperty = (deviceId: string, data: Record<string, unknown>) =>
-    request(`/${SystemConst.API_BASE}/device/instance/${deviceId}/property`, {
+    request(`/${SystemConst.API_BASE}/device-instance/${deviceId}/property`, {
       method: 'PUT',
       data,
     });
@@ -108,13 +108,13 @@ class Service extends BaseService<DeviceInstance> {
     });
 
   public getEventCount = (deviceId: string, eventId: string, params: Record<string, unknown>) =>
-    request(`/${SystemConst.API_BASE}/device/instance/${deviceId}/event/${eventId}`, {
+    request(`/${SystemConst.API_BASE}/device-instance/${deviceId}/event/${eventId}`, {
       method: 'POST',
       data: params,
     });
 
   public deleteMetadata = (deviceId: string) =>
-    request(`/${SystemConst.API_BASE}/device/instance/${deviceId}/metadata`, {
+    request(`/${SystemConst.API_BASE}/device-instance/${deviceId}/metadata`, {
       method: 'DELETE',
     });
 
@@ -201,7 +201,7 @@ class Service extends BaseService<DeviceInstance> {
     });
   // 读取属性
   public readProperties = (deviceId: string, data: any) =>
-    request(`/${SystemConst.API_BASE}/device/instance/${deviceId}/properties/_read`, {
+    request(`/${SystemConst.API_BASE}/device-instance/${deviceId}/properties/_read`, {
       method: 'POST',
       data,
     });

src/pages/link/AccessConfig/Detail/Access/index.tsx

@@ -18,7 +18,7 @@ import { service } from '@/pages/link/AccessConfig';
 import encodeQuery from '@/utils/encodeQuery';
 import { useHistory } from 'umi';
 import ReactMarkdown from 'react-markdown';
-import { getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
+import { getButtonPermission, getMenuPathByCode, MENUS_CODE } from '@/utils/menu';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 
 interface Props {
@@ -292,6 +292,7 @@ const Access = (props: Props) => {
               />
               <Button
                 type="primary"
+                disabled={getButtonPermission('link/Type', ['add'])}
                 onClick={() => {
                   const url = getMenuPathByCode(MENUS_CODE['link/Type/Detail']);
                   const tab: any = window.open(`${origin}/#${url}`);
@@ -350,7 +351,9 @@ const Access = (props: Props) => {
                 description={
                   <span>
                     暂无数据
-                    <a
+                    <Button
+                      type="link"
+                      disabled={getButtonPermission('link/Type', ['add'])}
                       onClick={() => {
                         const url = getMenuPathByCode(MENUS_CODE['link/Type/Detail']);
                         const tab: any = window.open(`${origin}/#${url}`);
@@ -362,7 +365,7 @@ const Access = (props: Props) => {
                       }}
                     >
                       创建接入方式
-                    </a>
+                    </Button>
                   </span>
                 }
               />
@@ -394,6 +397,7 @@ const Access = (props: Props) => {
               />
               <Button
                 type="primary"
+                disabled={getButtonPermission('link/Protocol', ['add'])}
                 onClick={() => {
                   const url = getMenuPathByCode(MENUS_CODE[`link/Protocol`]);
                   const tab: any = window.open(`${origin}/#${url}?save=true`);
@@ -436,7 +440,9 @@ const Access = (props: Props) => {
                 description={
                   <span>
                     暂无数据
-                    <a
+                    <Button
+                      type="link"
+                      disabled={getButtonPermission('link/Protocol', ['add'])}
                       onClick={() => {
                         const url = getMenuPathByCode(MENUS_CODE[`link/Protocol`]);
                         const tab: any = window.open(`${origin}/#${url}?save=true`);
@@ -448,7 +454,7 @@ const Access = (props: Props) => {
                       }}
                     >
                       去新增
-                    </a>
+                    </Button>
                   </span>
                 }
               />
@@ -479,6 +485,9 @@ const Access = (props: Props) => {
                   </Button>
                   <Button
                     type="primary"
+                    disabled={
+                      !props.data?.id ? getButtonPermission('link/AccessConfig', ['update']) : false
+                    }
                     onClick={async () => {
                       try {
                         const values = await form.validateFields();

src/pages/link/AccessConfig/Detail/Media/index.tsx

@@ -21,6 +21,7 @@ import SipComponent from '@/components/SipComponent';
 import TitleComponent from '@/components/TitleComponent';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { testIP } from '@/utils/util';
+import { getButtonPermission } from '@/utils/menu';
 
 type LocationType = {
   id?: string;
@@ -445,6 +446,9 @@ const Media = (props: Props) => {
               )}
               <Button
                 type="primary"
+                disabled={
+                  !!params.get('id') ? getButtonPermission('link/AccessConfig', ['update']) : false
+                }
                 onClick={async () => {
                   const values = await form.validateFields();
                   const param: any = {

src/pages/link/AccessConfig/index.tsx

@@ -68,7 +68,8 @@ const AccessConfig = () => {
       <Card>
         <SearchComponent
           field={columns}
-          enableSave={false}
+          // enableSave={false}
+          target={'access-config'}
           onSearch={(data: any) => {
             const dt = {
               pageSize: 10,
@@ -96,7 +97,6 @@ const AccessConfig = () => {
                   {...item}
                   actions={[
                     <Button
-                      disabled={getButtonPermission('link/AccessConfig', ['update'])}
                       key="edit"
                       type="link"
                       onClick={() => {

src/pages/media/Cascade/index.tsx

@@ -71,15 +71,15 @@ const Cascade = () => {
     <Button type={'link'} key={'share'} disabled={record.status.value === 'disabled'}>
       <Popconfirm
         key={'share'}
-        title="确认共享！"
+        title="确认推送！"
         onConfirm={() => {
           setCurrent(record);
           setVisible(true);
         }}
       >
-        <Tooltip title={'共享'}>
+        <Tooltip title={record.status.value === 'disabled' ? '禁用状态下不可推送' : '推送'}>
           <ShareAltOutlined />
-          共享
+          推送
         </Tooltip>
       </Popconfirm>
     </Button>,
@@ -258,14 +258,17 @@ const Cascade = () => {
             <LinkOutlined />
           </Button>
         </Tooltip>,
-        <Tooltip title={'共享'} key={'share'}>
+        <Tooltip
+          title={record.status.value === 'disabled' ? '禁用状态下不可推送' : '推送'}
+          key={'share'}
+        >
           <Button type="link" style={{ padding: 0 }} disabled={record.status.value === 'disabled'}>
             <Popconfirm
               onConfirm={() => {
                 setVisible(true);
                 setCurrent(record);
               }}
-              title={'确认共享'}
+              title={'确认推送'}
             >
               <ShareAltOutlined />
             </Popconfirm>

src/pages/rule-engine/Instance/index.tsx

@@ -49,6 +49,7 @@ const Instance = () => {
         key={'edit'}
       >
         <EditOutlined />
+        编辑
       </Tooltip>
     </Button>,
     // <Button key={'view'}
@@ -78,11 +79,11 @@ const Instance = () => {
       <Popconfirm
         key={'state'}
         title={intl.formatMessage({
-          id: `pages.data.option.${record.state.value !== 'stopped' ? 'disabled' : 'enabled'}.tips`,
+          id: `pages.data.option.${record.state.value !== 'disable' ? 'disabled' : 'enabled'}.tips`,
           defaultMessage: '确认禁用？',
         })}
         onConfirm={async () => {
-          if (record.state.value !== 'stopped') {
+          if (record.state.value !== 'disable') {
             await service.stopRule(record.id);
           } else {
             await service.startRule(record.id);
@@ -98,11 +99,21 @@ const Instance = () => {
       >
         <Tooltip
           title={intl.formatMessage({
-            id: `pages.data.option.${record.state.value !== 'stopped' ? 'disabled' : 'enabled'}`,
-            defaultMessage: record.state.value !== 'stopped' ? '禁用' : '启用',
+            id: `pages.data.option.${record.state.value !== 'disable' ? 'disabled' : 'enabled'}`,
+            defaultMessage: record.state.value !== 'disable' ? '禁用' : '启用',
           })}
         >
-          {record.state.value !== 'stopped' ? <StopOutlined /> : <CheckCircleOutlined />}
+          {record.state.value !== 'disable' ? (
+            <span>
+              <StopOutlined />
+              禁用
+            </span>
+          ) : (
+            <span>
+              <CheckCircleOutlined />
+              启用
+            </span>
+          )}
         </Tooltip>
       </Popconfirm>
     </Button>,
@@ -113,10 +124,10 @@ const Instance = () => {
       disabled={getButtonPermission('rule-engine/Instance', ['delete'])}
     >
       <Popconfirm
-        title={record.state.value === 'stopped' ? '确认删除' : '未停止不能删除'}
+        title={record.state.value === 'disable' ? '确认删除' : '未停止不能删除'}
         key={'delete'}
         onConfirm={async () => {
-          if (record.state.value === 'stopped') {
+          if (record.state.value === 'disable') {
             await service.remove(record.id);
             message.success(
               intl.formatMessage({
@@ -160,25 +171,20 @@ const Instance = () => {
           text={record.state?.text}
           statusNames={{
             started: StatusColorEnum.success,
-            stopped: StatusColorEnum.error,
-            disable: StatusColorEnum.processing,
+            disable: StatusColorEnum.error,
           }}
         />
       ),
       valueType: 'select',
       valueEnum: {
         started: {
-          text: '已启动',
+          text: '正常',
           status: 'started',
         },
         disable: {
-          text: '已禁用',
+          text: '禁用',
           status: 'disable',
         },
-        stopped: {
-          text: '已停止',
-          status: 'stopped',
-        },
       },
     },
     {
@@ -242,12 +248,12 @@ const Instance = () => {
             key={'state'}
             title={intl.formatMessage({
               id: `pages.data.option.${
-                record.state.value !== 'stopped' ? 'disabled' : 'enabled'
+                record.state.value !== 'disable' ? 'disabled' : 'enabled'
               }.tips`,
               defaultMessage: '确认禁用？',
             })}
             onConfirm={async () => {
-              if (record.state.value !== 'stopped') {
+              if (record.state.value !== 'disable') {
                 await service.stopRule(record.id);
               } else {
                 await service.startRule(record.id);
@@ -264,12 +270,12 @@ const Instance = () => {
             <Tooltip
               title={intl.formatMessage({
                 id: `pages.data.option.${
-                  record.state.value !== 'stopped' ? 'disabled' : 'enabled'
+                  record.state.value !== 'disable' ? 'disabled' : 'enabled'
                 }`,
-                defaultMessage: record.state.value !== 'stopped' ? '禁用' : '启用',
+                defaultMessage: record.state.value !== 'disable' ? '禁用' : '正常',
               })}
             >
-              {record.state.value !== 'stopped' ? <StopOutlined /> : <CheckCircleOutlined />}
+              {record.state.value !== 'disable' ? <StopOutlined /> : <CheckCircleOutlined />}
             </Tooltip>
           </Popconfirm>
         </Button>,
@@ -280,10 +286,10 @@ const Instance = () => {
           style={{ padding: 0 }}
         >
           <Popconfirm
-            title={record.state.value === 'stopped' ? '确认删除' : '未停止不能删除'}
+            title={record.state.value === 'disable' ? '确认删除' : '未禁用不能删除'}
             key={'delete'}
             onConfirm={async () => {
-              if (record.state.value === 'stopped') {
+              if (record.state.value === 'disable') {
                 await service.remove(record.id);
                 message.success(
                   intl.formatMessage({
@@ -293,7 +299,7 @@ const Instance = () => {
                 );
                 actionRef.current?.reload();
               } else {
-                message.error('未停止不能删除');
+                message.error('未禁用不能删除');
               }
             }}
           >

src/pages/system/Role/Detail/Permission/Allocate/index.tsx

@@ -23,7 +23,7 @@ const Allocate = (props: Props) => {
         const children = getDataList(item.children || []) || [];
         let check: number = 3;
         const blen = item.buttons?.length || 0;
-        const bblen = (item?.buttons || []).filter((i: any) => i.enabled).length || 0;
+        const bblen = (item?.buttons || []).filter((i: any) => i.granted).length || 0;
         const clen = children.length || 0;
         const cclen = (children || []).filter((i: any) => i.granted).length || 0;
         const cclen1 = (children || []).filter((i: any) => i.check === 1).length || 0;
@@ -66,6 +66,7 @@ const Allocate = (props: Props) => {
         ) || [];
       setAssetsList(deRepeat(_.flatten(_.map(list, 'assetAccesses') || []) || []) || []);
       if (!props.value?.check) {
+        // // 1: 全选 2: 只选了部分 3: 一个都没选
         const children = getDataList(props.value?.children || []) || [];
         let check: number = 3;
         const clen = children.length || 0;

src/pages/system/Role/Detail/Permission/index.less

@@ -1,11 +0,0 @@
-.title {
-  width: 100%;
-  margin-bottom: 10px;
-  font-weight: 600;
-}
-
-.title::before {
-  margin-right: 10px;
-  background-color: #2810ff;
-  content: '|';
-}

src/pages/system/Role/Detail/Permission/index.tsx

@@ -3,8 +3,8 @@ import Allocate from '@/pages/system/Role/Detail/Permission/Allocate';
 import { useEffect, useState } from 'react';
 import { history, useParams } from 'umi';
 import { service } from '@/pages/system/Role';
-import styles from './index.less';
 import { flattenArray } from '@/utils/util';
+import TitleComponent from '@/components/TitleComponent';
 
 const Permission = () => {
   const params = useParams<{ id: string }>();
@@ -68,10 +68,14 @@ const Permission = () => {
             name: values?.name,
             description: values?.description || '',
           });
-          const list = getDataList(flattenArray([...values.permission?.children]) || []) || [];
+          const list = (
+            getDataList(flattenArray([...values.permission?.children]) || []) || []
+          ).filter((item: any) => {
+            return item.granted || (item?.assetAccesses).filter((i: any) => i.granted).length > 0;
+          });
           service
             .saveGrantTree('role', params?.id, {
-              menus: list.filter((item: any) => item.granted) || [],
+              menus: list || [],
             })
             .subscribe((resp) => {
               if (resp.status === 200) {
@@ -82,7 +86,7 @@ const Permission = () => {
         }}
       >
         <Card>
-          <div className={styles.title}>基本信息</div>
+          <TitleComponent data={'基本信息'} />
           <Row>
             <Col span={14}>
               <Form.Item
@@ -101,7 +105,7 @@ const Permission = () => {
           </Row>
         </Card>
         <Card style={{ marginTop: 20 }}>
-          <div className={styles.title}>权限分配</div>
+          <TitleComponent data={'权限分配'} />
           <Form.Item name="permission" rules={[{ required: true }]}>
             <Allocate />
           </Form.Item>

src/pages/system/Role/index.tsx

@@ -85,6 +85,7 @@ const Role: React.FC = observer(() => {
       render: (text, record) => [
         <Button
           type="link"
+          key={'edit'}
           style={{ padding: 0 }}
           disabled={getButtonPermission('system/Role', ['update'])}
           onClick={() =>
@@ -96,7 +97,6 @@ const Role: React.FC = observer(() => {
               id: 'pages.data.option.edit',
               defaultMessage: '编辑',
             })}
-            key={'edit'}
           >
             <EditOutlined />
           </Tooltip>

src/pages/system/User/Save/index.tsx

@@ -134,7 +134,13 @@ const Save = (props: Props) => {
                 service
                   .validateField('username', value)
                   .then((resp) => {
-                    console.log(resp);
+                    if (resp.status === 200) {
+                      if (resp.result.passed) {
+                        resolve('');
+                      } else {
+                        resolve(resp.result.reason);
+                      }
+                    }
                     resolve('');
                   })
                   .catch(() => {