feat: 视频组件接入云台控制接口

packages/base-components/VmsVideo/src/App.jsx

@@ -155,7 +155,7 @@ class App extends React.Component {
     return (
       <div className={style.containerOut}>
         {<div className={style.container} key={VideoInfo.id} ref={`myVideo` + VideoInfo.id}>
-          {isShowControl && <CloudPlate onClose={() => this.closeCloudPlate()} />}
+          {isShowControl && <CloudPlate videoInfo={VideoInfo} onClose={() => this.closeCloudPlate()} />}
         </div>}
 
       </div>

packages/base-components/VmsVideo/src/apis/index.js

@@ -23,3 +23,12 @@ export function newPlayback(params) {
     params,
   });
 }
+
+// 云台控制
+export function controlSlim(data) {
+  return request({
+    url: `${baseURI}${CommonPath}/pandavms/camera/control/slim`,
+    method: REQUEST_METHOD_POST,
+    data,
+  });
+}
\ No newline at end of file

packages/base-components/VmsVideo/src/components/CloudPlate.js

 import React from 'react';
 import { PlusOutlined, MinusOutlined, CloseOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
+import { notification } from 'antd';
+import { controlSlim } from '../apis/index';
 import styles from './CloudPlate.less';
 
 const CloudPlate = (props) => {
-  const { onClose } = props;
+  const { onClose, videoInfo } = props;
   const dotCount = 8; // 点的数量
   const radius = 55; // 圆的半径
 
@@ -18,17 +20,28 @@ const CloudPlate = (props) => {
     return { top, left };
   };
 
-  // 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下
+  // 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-变倍+，9-变倍-，10-焦距+，11-焦距-，12-光圈+，13-光圈-
   // 3-右，7-右下，1-下，5-左下，2-左，4-左上，0-上，6-右上
   const directionList = [3, 7, 1, 5, 2, 4, 0, 6];
 
-  const handleControl = (num) => {
-    // if(!videoList.length) return false;
-    // ezvizPtzMove({
-    //   id: videoList[curVideoInd - 1].vmS_DeviceID,
-    //   direction: num,
-    //   siteCode: window.globalConfig.userInfo.LocalSite || window.globalConfig.userInfo.site,
-    // }).then((data) => {}).catch((err) => {})
+  // 触发控制接口
+  const handleControl = async (num) => {
+    var formData = new FormData();
+    const data = {
+      id: videoInfo.id,
+      direction: num,
+      'site-code': window?.globalConfig?.userInfo?.LocalSite || 'site_ir0904fx',
+    };
+    for (const key in data) {
+      formData.append(key, data[key]);
+    }
+    const res = await controlSlim(formData);
+    if (res.code !== 200) {
+      notification.error({
+        message: '操作失败',
+        description: res?.msg ?? '',
+      });
+    }
   };
   return (
     <div className={styles['cloud-plate']}>
@@ -105,7 +118,7 @@ const CloudPlate = (props) => {
             <div
               className={styles['opera-btn']}
               onClick={() => {
-                handleControl(10);
+                handleControl(12);
               }}
             >
               <PlusOutlined />
@@ -113,7 +126,7 @@ const CloudPlate = (props) => {
             <div
               className={styles['opera-btn']}
               onClick={() => {
-                handleControl(11);
+                handleControl(13);
               }}
             >
               <MinusOutlined />

packages/base-components/VmsVideo/src/demos/dmeo1.tsx

@@ -38,13 +38,13 @@ const Demo1 = (props) => {
   //};
 
   let VideoParam = {
-    id: 'B1C0D641-81B2-494C-ADAF-7240B9B69F47',
-    name: '登科华府_通道_4',
+    id: '30E1F9B0-78C2-4947-9C9A-43C86A6678D4',
+    name: '武汉测试',
     protocol: '萤石云HTTP-FLV',
     username: '6c44c8e92d1c4d75a9818756025df550',
-    password: '8b7dc88f9f4bf19c2b1aabfdd995244',
-    pandavmsHost: 'ws://192.168.10.182:7000/',
-    address: 'D36342925',
+    password: '78b7dc88f9f4bf19c2b1aabfdd995244',
+    pandavmsHost: 'ws://192.168.8.30:7000/',
+    address: 'C83178215',
   };
 
   /*{