Merge branch 'feat/ezviz-video-control' into 'main_dev'

feat: 新增萤石云视频控制

See merge request yunteng/thingskit-front!1413

@@ -102,3 +102,9 @@ export interface VideoChanneControlType {
   tbDeviceId?: string | number | object;
   channelId?: string | number | object;
 }
+
+export interface EzvizControlType {
+  entityId: string;
+  action: number;
+  controllingType: number;
+}

@@ -3,6 +3,7 @@ import {
   VideoChannelPlayAddressType,
   VideoChannelQueryParamsType,
   VideoChanneControlType,
+  EzvizControlType,
 } from './model/videoChannelModel';
 import { PaginationResult } from '/#/axios';
 import { defHttp } from '/@/utils/http/axios';
@@ -12,6 +13,7 @@ enum Api {
   GET_VIDEO_CONTROL_START = '/video/control/start',
   GET_VIDEO_CONTROL_STOP = '/video/control/stop',
   SET_VIDEO_CONTROL_CONTROL = '/video/control/control',
+  SET_EZVIZ_CONTROL = '/video/ezviz/controlling',
 }
 
 export const getVideoChannelList = (params: VideoChannelQueryParamsType) => {
@@ -43,3 +45,10 @@ export const setVideoControl = (tbDeviceId, channelId, params: VideoChanneContro
     params,
   });
 };
+
+export const setEzvizControl = (params: EzvizControlType) => {
+  return defHttp.get({
+    url: Api.SET_EZVIZ_CONTROL,
+    params,
+  });
+};

@@ -100,7 +100,6 @@
     AccessMode,
     PageMode,
     CameraPermission,
-    VideoPlatformEnum,
     accessModeConfig,
     getPlayUrl,
   } from './config.data';
@@ -199,14 +198,12 @@
       const handleViewVideo = (record: CameraRecord) => {
         const { videoPlatformDTO, params } = record;
         const { type } = videoPlatformDTO || {};
-
         openModal(true, {
           record: {
             id: record.id,
-            canControl:
-              [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode) &&
-              type !== VideoPlatformEnum.FLUORITE,
+            canControl: [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode),
             isGBT: record.accessMode === AccessMode.GBT28181,
+            videoPlatformType: type,
             channelId: params?.channelNo,
             tbDeviceId: params?.deviceId,
             getPlayUrl: async () => {

 import { h } from 'vue';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { Tag } from 'ant-design-vue';
+import { VideoPlatformEnum } from '/@/views/camera/manage/config.data';
 export type VideoCancelModalParamsType = {
   canControl?: boolean;
+  videoPlatformType: VideoPlatformEnum;
   isGBT?: boolean;
   tbDeviceId?: string;
   channelId?: string;
@@ -101,3 +103,25 @@ export const searchFormSchema: FormSchema[] | any = [
     },
   },
 ];
+
+export enum VideoControlEnum {
+  Up = 'UP',
+  Right = 'RIGHT',
+  Left = 'LEFT',
+  Down = 'DOWN',
+  ZoomIn = 'ZOOM_IN',
+  ZoomOut = 'ZOOM_OUT',
+}
+
+export enum EzvizVideoControlEnum {
+  UP,
+  DOWN,
+  LEFT,
+  RIGHT,
+  LEFT_UP,
+  LEFT_DOWN,
+  RIGHT_UP,
+  RIGHT_DOWN,
+  ZOOM_IN,
+  ZOOM_OUT,
+}

@@ -13,20 +13,14 @@
   } from '@ant-design/icons-vue';
   import { Button, Slider } from 'ant-design-vue';
   import { controlling } from '/@/api/camera/cameraManager';
-  import { setVideoControl } from '/@/api/device/videoChannel';
+  import { setEzvizControl, setVideoControl } from '/@/api/device/videoChannel';
   import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
-  import PresetPlayer from 'xgplayer';
+  import { EzvizVideoControlEnum, VideoCancelModalParamsType, VideoControlEnum } from './config';
+  import { VideoPlatformEnum } from '/@/views/camera/manage/config.data';
 
   const props = defineProps<{
     playUrl?: string;
-    options?: {
-      canControl?: boolean;
-      isGBT?: boolean;
-      tbDeviceId?: string;
-      channelId?: string;
-      id?: string;
-      playerProps?: Recordable;
-    };
+    options?: VideoCancelModalParamsType;
   }>();
 
   const playerRef = ref<InstanceType<typeof XGPlayer>>();
@@ -64,12 +58,24 @@
     });
   };
 
+  const handleEzvizControl = (actionType: string, start: boolean) => {
+    const { id } = props.options || {};
+    const action = EzvizVideoControlEnum[actionType as VideoControlEnum];
+    setEzvizControl({ entityId: id!, action, controllingType: Number(!start) });
+  };
+
   //长按开始
   const moveStart = (action: string) => {
     if (unref(props.options?.isGBT)) {
       handleGBTControl(action, unref(sliderValue));
       return;
     }
+
+    if (props.options?.videoPlatformType === VideoPlatformEnum.FLUORITE) {
+      handleEzvizControl(action, true);
+      return;
+    }
+
     handleControl(0, action);
   };
 
@@ -79,6 +85,14 @@
       handleGBTControl('STOP', unref(sliderValue));
       return;
     }
+
+    if (props.options?.videoPlatformType === VideoPlatformEnum.FLUORITE) {
+      setTimeout(() => {
+        handleEzvizControl(action, false);
+      }, 1000);
+      return;
+    }
+
     handleControl(1, action);
   };
 
@@ -122,15 +136,15 @@
           <div>
             <Button
               class="left-top in-block"
-              @mousedown="moveStart('UP')"
-              @mouseup="moveStop('UP')"
+              @mousedown="moveStart(VideoControlEnum.Up)"
+              @mouseup="moveStop(VideoControlEnum.Up)"
             >
               <CaretUpOutlined class="icon-rotate child-icon" />
             </Button>
             <Button
               class="right-top in-block"
-              @mousedown="moveStart('RIGHT')"
-              @mouseup="moveStop('RIGHT')"
+              @mousedown="moveStart(VideoControlEnum.Right)"
+              @mouseup="moveStop(VideoControlEnum.Right)"
             >
               <CaretRightOutlined class="icon-rotate child-icon" />
             </Button>
@@ -138,15 +152,15 @@
           <div>
             <Button
               class="left-bottom in-block"
-              @mousedown="moveStart('LEFT')"
-              @mouseup="moveStop('LEFT')"
+              @mousedown="moveStart(VideoControlEnum.Left)"
+              @mouseup="moveStop(VideoControlEnum.Left)"
             >
               <CaretLeftOutlined class="icon-rotate child-icon" />
             </Button>
             <Button
               class="right-bottom in-block"
-              @mousedown="moveStart('DOWN')"
-              @mouseup="moveStop('DOWN')"
+              @mousedown="moveStart(VideoControlEnum.Down)"
+              @mouseup="moveStop(VideoControlEnum.Down)"
             >
               <CaretDownOutlined class="icon-rotate child-icon" />
             </Button>
@@ -161,16 +175,16 @@
       <div class="flex justify-center mt-8">
         <Button
           class="button-icon"
-          @mousedown="moveStart('ZOOM_IN')"
-          @mouseup="moveStop('ZOOM_IN')"
+          @mousedown="moveStart(VideoControlEnum.ZoomIn)"
+          @mouseup="moveStop(VideoControlEnum.ZoomIn)"
           style="border-radius: 50%"
         >
           <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
         </Button>
         <Button
           class="ml-10 button-icon"
-          @mousedown="moveStart('ZOOM_OUT')"
-          @mouseup="moveStop('ZOOM_OUT')"
+          @mousedown="moveStart(VideoControlEnum.ZoomOut)"
+          @mouseup="moveStop(VideoControlEnum.ZoomOut)"
           style="border-radius: 50%"
         >
           <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />

@@ -31,7 +31,6 @@
         options.value = null;
         setModalProps({ loading: true, loadingTip: '视频加载中...' });
         const { url, type } = await record.getPlayUrl();
-
         playUrl.value = url;
         options.value = record;
         options.value.playerProps = {