feat(API管理): 对接接口

src/components/DashBoard/echarts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import * as echarts from 'echarts/core';
 import type { ECharts, EChartsOption } from 'echarts';
 import {
@@ -57,11 +57,13 @@ export default (props: EchartsProps) => {
   const chartsRef = useRef<any>(null);
 
   const initEcharts = (dom: HTMLDivElement) => {
-    chartsRef.current = echarts.init(dom);
-    if (props.options) {
-      chartsRef.current.setOption(props.options);
-    } else {
-      chartsRef.current.setOption(DefaultOptions);
+    if (!chartsRef.current) {
+      chartsRef.current = echarts.init(dom);
+      if (props.options) {
+        chartsRef.current.setOption(props.options);
+      } else {
+        chartsRef.current.setOption(DefaultOptions);
+      }
     }
   };
 
@@ -72,12 +74,6 @@ export default (props: EchartsProps) => {
     }
   };
 
-  const updateOptions = useCallback(() => {
-    if (chartsRef.current && props.options) {
-      chartsRef.current.setOption(props.options);
-    }
-  }, [props.options]);
-
   useEffect(() => {
     (window as Window).addEventListener('resize', updateSize);
 
@@ -87,8 +83,10 @@ export default (props: EchartsProps) => {
   }, []);
 
   useEffect(() => {
-    updateOptions();
-  }, [props.options, chartsRef.current]);
+    if (chartsRef.current && props.options) {
+      chartsRef.current.setOption(props.options);
+    }
+  }, [props.options]);
 
   return (
     <div

src/pages/home/index.tsx

@@ -24,7 +24,7 @@ const Home = () => {
         if (resp.result.length == 0) {
           setCurrent('init');
         } else {
-          setCurrent(resp.result[0]?.content);
+          // setCurrent(resp.result[0]?.content);
         }
       }
     });

src/pages/media/Home/index.tsx

@@ -1,5 +1,5 @@
 import { PageContainer } from '@ant-design/pro-layout';
-import { Card, Col, message, Row, Tooltip, Typography } from 'antd';
+import { Col, message, Row, Tooltip } from 'antd';
 import { PermissionButton } from '@/components';
 import { getMenuPathByCode } from '@/utils/menu';
 import useHistory from '@/hooks/route/useHistory';
@@ -9,6 +9,8 @@ import Service from './service';
 import { useState } from 'react';
 import DeviceModal from './deviceModal';
 import './index.less';
+import { Body, Guide, Statistics } from '@/pages/home/components';
+import Steps from '@/pages/home/components/Steps';
 
 const permissionTip = '暂无权限，请联系管理员';
 
@@ -19,7 +21,6 @@ export default () => {
   const deviceUrl = getMenuPathByCode('media/Device');
   const channelUrl = getMenuPathByCode('media/Device/Channel');
   const splitScreenUrl = getMenuPathByCode('media/SplitScreen');
-  const cascadeUrl = getMenuPathByCode('media/Cascade');
 
   const [visible, setVisible] = useState(false);
 
@@ -54,14 +55,6 @@ export default () => {
     }
   };
 
-  const jumpCascade = () => {
-    if (cascadeUrl) {
-      history.push(cascadeUrl);
-    } else {
-      message.warning(permissionTip);
-    }
-  };
-
   const jumpChannel = () => {
     if (channelUrl) {
       setVisible(true);
@@ -70,6 +63,31 @@ export default () => {
     }
   };
 
+  const guideList = [
+    {
+      key: 'EQUIPMENT',
+      name: '添加视频设备',
+      english: 'ADD VIDEO EQUIPMENT',
+      auth: !!devicePermission.add,
+      url: deviceUrl,
+      param: { save: true },
+    },
+    {
+      key: 'SCREEN',
+      name: '分屏展示',
+      english: 'SPLIT SCREEN DISPLAY',
+      auth: !!splitScreenUrl,
+      url: splitScreenUrl,
+    },
+    {
+      key: 'CASCADE',
+      name: '国标级联',
+      english: 'GB CASCADE',
+      auth: !!channelUrl,
+      url: channelUrl,
+    },
+  ];
+
   return (
     <PageContainer>
       <DeviceModal
@@ -79,72 +97,78 @@ export default () => {
           setVisible(false);
         }}
       />
-      <Card className={'media-home'}>
-        <Row gutter={[12, 12]}>
-          <Col span={14}>
-            <div className={'media-home-top'}>
-              <Typography.Title level={5}>视频中心引导</Typography.Title>
-              <div className={'media-guide'}>
-                <div onClick={addDevice}>添加视频设备</div>
-                <div onClick={jumpSplitScreen}>分屏展示</div>
-                <div onClick={jumpCascade}>国标级联</div>
-              </div>
-            </div>
-          </Col>
-          <Col span={10}>
-            <div className={'media-home-top'}>
-              <Typography.Title level={5}>
-                基础统计
-                <PermissionButton
-                  isPermission={!!dashBoardUrl}
+      <Row gutter={24}>
+        <Col span={14}>
+          <Guide title={'视频中心引导'} data={guideList} />
+        </Col>
+        <Col span={10}>
+          <Statistics
+            title={'基础统计'}
+            data={[
+              {
+                name: '设备数量',
+                value: deviceTotal,
+                children: require('/public/images/home/top-1.png'),
+              },
+              {
+                name: '通道数量',
+                value: channelTotal || 0,
+                children: require('/public/images/home/top-2.png'),
+              },
+            ]}
+            extra={
+              <div style={{ fontSize: 14, fontWeight: 400 }}>
+                <a
                   onClick={() => {
-                    history.push(dashBoardUrl);
+                    if (!!dashBoardUrl) {
+                      history.push(`${dashBoardUrl}`);
+                    } else {
+                      message.warning('暂无权限，请联系管理员');
+                    }
                   }}
-                  type={'link'}
                 >
                   详情
-                </PermissionButton>
-              </Typography.Title>
-              <div className={'media-statistics'}>
-                <div>
-                  设备数量
-                  {deviceTotal}
-                </div>
-                <div>
-                  通道数量
-                  {channelTotal}
-                </div>
-              </div>
-            </div>
-          </Col>
-          <Col span={24}>
-            <Typography.Title level={5}>平台架构图</Typography.Title>
-            <div className={'media-home-content'}></div>
-          </Col>
-          <Col span={24}>
-            <Typography.Title level={5}>
-              <span style={{ paddingRight: 12 }}>视频设备管理推荐步骤</span>
-              <Tooltip title={'请根据业务需要对下述步骤进行选择性操作'}>
-                <QuestionCircleOutlined />
-              </Tooltip>
-            </Typography.Title>
-            <div className={'media-home-steps'}>
-              <div onClick={addDevice}>
-                添加视频设备
-                <div>根据视频设备的传输协议，在已创建的产品下添加对应的设备</div>
-              </div>
-              <div onClick={jumpChannel}>
-                查看通道
-                <div>查看设备下的通道数据，可以进行直播、录制等操作</div>
-              </div>
-              <div onClick={jumpSplitScreen}>
-                分屏展示
-                <div>对多个通道的视频流数据进行分屏展示</div>
+                </a>
               </div>
-            </div>
-          </Col>
-        </Row>
-      </Card>
+            }
+          />
+        </Col>
+        <Col span={24}>
+          <Body title={'平台架构图'} english={'PLATFORM ARCHITECTURE DIAGRAM'} />
+        </Col>
+        <Col span={24}>
+          <Steps
+            title={
+              <span>
+                设备接入推荐步骤
+                <Tooltip title={'不同的设备因为通信协议的不用，存在接入步骤的差异'}>
+                  <QuestionCircleOutlined style={{ paddingLeft: 12 }} />
+                </Tooltip>
+              </span>
+            }
+            data={[
+              {
+                title: '添加视频设备',
+                content: '根据视频设备的传输协议，在已创建的产品下添加对应的设备。',
+                onClick: addDevice,
+                url: require('/public/images/home/bottom-6.png'),
+              },
+              {
+                title: '查看通道',
+                content: '查看设备下的通道数据，可以进行直播、录制等操作。',
+                onClick: jumpChannel,
+                url: require('/public/images/home/bottom-7.png'),
+              },
+              {
+                title: '分屏展示',
+                content: '对多个通道的视频流数据进行分屏展示。',
+                onClick: jumpSplitScreen,
+                url: require('/public/images/home/bottom-8.png'),
+              },
+            ]}
+          />
+        </Col>
+      </Row>
     </PageContainer>
   );
 };

src/pages/system/Platforms/Api/base.tsx

@@ -68,6 +68,11 @@ export default observer((props: ApiPageProps) => {
     const code = param.get('code');
 
     if (props.isOpenGranted === false) {
+      service.apiOperations().then((resp: any) => {
+        if (resp.status === 200) {
+          setGrantKeys(resp.result);
+        }
+      });
     } else {
       service.getApiGranted(code!).then((resp: any) => {
         if (resp.status === 200) {

src/pages/system/Platforms/Api/basePage.tsx

@@ -7,7 +7,7 @@ import { ApiModel } from '@/pages/system/Platforms/Api/base';
 interface TableProps {
   data: any;
   operations: string[];
-  // 是否只暂时已授权的接口
+  // 是否只展示已授权的接口
   isShowGranted?: boolean;
   //
   isOpenGranted?: boolean;
@@ -99,13 +99,21 @@ export default (props: TableProps) => {
     grantCache.current = addGrant;
 
     setLoading(true);
-    const resp = await service.addApiGrant(code!, { operations: addOperations });
-    const resp2 = await service.removeApiGrant(code!, { operations: removeOperations });
-    setLoading(false);
-    if (resp.status === 200 || resp2.status === 200) {
-      message.success('操作成功');
+    if (props.isOpenGranted === false) {
+      const resp = await service.apiOperationsAdd(addGrant);
+      const resp2 = removeGrant.length ? await service.apiOperationsRemove(removeGrant) : {};
+      if (resp.status === 200 || resp2.status === 200) {
+        message.success('操作成功');
+      }
+    } else {
+      const resp = await service.addApiGrant(code!, { operations: addOperations });
+      const resp2 = await service.removeApiGrant(code!, { operations: removeOperations });
+      if (resp.status === 200 || resp2.status === 200) {
+        message.success('操作成功');
+      }
     }
-  }, [selectKeys, location, dataSource]);
+    setLoading(false);
+  }, [selectKeys, location, dataSource, props.isOpenGranted]);
 
   return (
     <div className={'platforms-api-table'}>

src/pages/system/Platforms/Setting/index.tsx

@@ -4,7 +4,7 @@ import ApiPage from '../Api/base';
 export default () => {
   return (
     <PageContainer>
-      <div>配置系统支持API赋权的范围</div>
+      <div style={{ padding: 24, background: '#fff' }}>配置系统支持API赋权的范围</div>
       <ApiPage showDebugger={true} isOpenGranted={false} />
     </PageContainer>
   );

src/pages/system/Platforms/service.ts

@@ -68,6 +68,24 @@ class Service extends BaseService<platformsType> {
     request(`/${SystemConst.API_BASE}/api-client/operations`, { method: 'GET' });
 
   /**
+   * 新增可授权的接口ID
+   */
+  apiOperationsAdd = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/api-client/operations/_batch`, {
+      method: 'PATCH',
+      data: data || [],
+    });
+
+  /**
+   * 删除可授权的接口ID
+   */
+  apiOperationsRemove = (data?: any) =>
+    request(`/${SystemConst.API_BASE}/api-client/operations/_batch`, {
+      method: 'DELETE',
+      data: data || [],
+    });
+
+  /**
    * 获取可授权的接口ID
    */
   getSdk = () => request(`${this.uri}/sdk`, { method: 'GET' });