简柏林 / thingskit-front · Commits

Commit 22b7817ea2647e9ec1aae5e60a80d5aa4a2f1d18

Authored by xp.Huang
2 parents 5481b808 0f822514

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

feat: 新增萤石云视频控制

See merge request yunteng/thingskit-front!1413
Inline Side-by-side
Showing 6 changed files with 77 additions and 28 deletions
@@ -102,3 +102,9 @@ export interface VideoChanneControlType { @@ -102,3 +102,9 @@ export interface VideoChanneControlType {
102 tbDeviceId?: string | number | object; 102 tbDeviceId?: string | number | object;
103 channelId?: string | number | object; 103 channelId?: string | number | object;
104 } 104 }
  105 +
  106 +export interface EzvizControlType {
  107 + entityId: string;
  108 + action: number;
  109 + controllingType: number;
  110 +}
@@ -3,6 +3,7 @@ import { @@ -3,6 +3,7 @@ import {
3 VideoChannelPlayAddressType, 3 VideoChannelPlayAddressType,
4 VideoChannelQueryParamsType, 4 VideoChannelQueryParamsType,
5 VideoChanneControlType, 5 VideoChanneControlType,
  6 + EzvizControlType,
6 } from './model/videoChannelModel'; 7 } from './model/videoChannelModel';
7 import { PaginationResult } from '/#/axios'; 8 import { PaginationResult } from '/#/axios';
8 import { defHttp } from '/@/utils/http/axios'; 9 import { defHttp } from '/@/utils/http/axios';
@@ -12,6 +13,7 @@ enum Api { @@ -12,6 +13,7 @@ enum Api {
12 GET_VIDEO_CONTROL_START = '/video/control/start', 13 GET_VIDEO_CONTROL_START = '/video/control/start',
13 GET_VIDEO_CONTROL_STOP = '/video/control/stop', 14 GET_VIDEO_CONTROL_STOP = '/video/control/stop',
14 SET_VIDEO_CONTROL_CONTROL = '/video/control/control', 15 SET_VIDEO_CONTROL_CONTROL = '/video/control/control',
  16 + SET_EZVIZ_CONTROL = '/video/ezviz/controlling',
15 } 17 }
16 18
17 export const getVideoChannelList = (params: VideoChannelQueryParamsType) => { 19 export const getVideoChannelList = (params: VideoChannelQueryParamsType) => {
@@ -43,3 +45,10 @@ export const setVideoControl = (tbDeviceId, channelId, params: VideoChanneContro @@ -43,3 +45,10 @@ export const setVideoControl = (tbDeviceId, channelId, params: VideoChanneContro
43 params, 45 params,
44 }); 46 });
45 }; 47 };
  48 +
  49 +export const setEzvizControl = (params: EzvizControlType) => {
  50 + return defHttp.get({
  51 + url: Api.SET_EZVIZ_CONTROL,
  52 + params,
  53 + });
  54 +};
@@ -100,7 +100,6 @@ @@ -100,7 +100,6 @@
100 AccessMode, 100 AccessMode,
101 PageMode, 101 PageMode,
102 CameraPermission, 102 CameraPermission,
103 - VideoPlatformEnum,  
104 accessModeConfig, 103 accessModeConfig,
105 getPlayUrl, 104 getPlayUrl,
106 } from './config.data'; 105 } from './config.data';
@@ -199,14 +198,12 @@ @@ -199,14 +198,12 @@
199 const handleViewVideo = (record: CameraRecord) => { 198 const handleViewVideo = (record: CameraRecord) => {
200 const { videoPlatformDTO, params } = record; 199 const { videoPlatformDTO, params } = record;
201 const { type } = videoPlatformDTO || {}; 200 const { type } = videoPlatformDTO || {};
202 -  
203 openModal(true, { 201 openModal(true, {
204 record: { 202 record: {
205 id: record.id, 203 id: record.id,
206 - canControl:  
207 - [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode) &&  
208 - type !== VideoPlatformEnum.FLUORITE, 204 + canControl: [AccessMode.Streaming, AccessMode.GBT28181].includes(record.accessMode),
209 isGBT: record.accessMode === AccessMode.GBT28181, 205 isGBT: record.accessMode === AccessMode.GBT28181,
  206 + videoPlatformType: type,
210 channelId: params?.channelNo, 207 channelId: params?.channelNo,
211 tbDeviceId: params?.deviceId, 208 tbDeviceId: params?.deviceId,
212 getPlayUrl: async () => { 209 getPlayUrl: async () => {
1 import { h } from 'vue'; 1 import { h } from 'vue';
2 import { BasicColumn, FormSchema } from '/@/components/Table'; 2 import { BasicColumn, FormSchema } from '/@/components/Table';
3 import { Tag } from 'ant-design-vue'; 3 import { Tag } from 'ant-design-vue';
  4 +import { VideoPlatformEnum } from '/@/views/camera/manage/config.data';
4 export type VideoCancelModalParamsType = { 5 export type VideoCancelModalParamsType = {
5 canControl?: boolean; 6 canControl?: boolean;
  7 + videoPlatformType: VideoPlatformEnum;
6 isGBT?: boolean; 8 isGBT?: boolean;
7 tbDeviceId?: string; 9 tbDeviceId?: string;
8 channelId?: string; 10 channelId?: string;
@@ -101,3 +103,25 @@ export const searchFormSchema: FormSchema[] | any = [ @@ -101,3 +103,25 @@ export const searchFormSchema: FormSchema[] | any = [
101 }, 103 },
102 }, 104 },
103 ]; 105 ];
  106 +
  107 +export enum VideoControlEnum {
  108 + Up = 'UP',
  109 + Right = 'RIGHT',
  110 + Left = 'LEFT',
  111 + Down = 'DOWN',
  112 + ZoomIn = 'ZOOM_IN',
  113 + ZoomOut = 'ZOOM_OUT',
  114 +}
  115 +
  116 +export enum EzvizVideoControlEnum {
  117 + UP,
  118 + DOWN,
  119 + LEFT,
  120 + RIGHT,
  121 + LEFT_UP,
  122 + LEFT_DOWN,
  123 + RIGHT_UP,
  124 + RIGHT_DOWN,
  125 + ZOOM_IN,
  126 + ZOOM_OUT,
  127 +}
@@ -13,20 +13,14 @@ @@ -13,20 +13,14 @@
13 } from '@ant-design/icons-vue'; 13 } from '@ant-design/icons-vue';
14 import { Button, Slider } from 'ant-design-vue'; 14 import { Button, Slider } from 'ant-design-vue';
15 import { controlling } from '/@/api/camera/cameraManager'; 15 import { controlling } from '/@/api/camera/cameraManager';
16 - import { setVideoControl } from '/@/api/device/videoChannel'; 16 + import { setEzvizControl, setVideoControl } from '/@/api/device/videoChannel';
17 import XGPlayer from '/@/components/Video/src/XGPlayer.vue'; 17 import XGPlayer from '/@/components/Video/src/XGPlayer.vue';
18 - import PresetPlayer from 'xgplayer'; 18 + import { EzvizVideoControlEnum, VideoCancelModalParamsType, VideoControlEnum } from './config';
  19 + import { VideoPlatformEnum } from '/@/views/camera/manage/config.data';
19 20
20 const props = defineProps<{ 21 const props = defineProps<{
21 playUrl?: string; 22 playUrl?: string;
22 - options?: {  
23 - canControl?: boolean;  
24 - isGBT?: boolean;  
25 - tbDeviceId?: string;  
26 - channelId?: string;  
27 - id?: string;  
28 - playerProps?: Recordable;  
29 - }; 23 + options?: VideoCancelModalParamsType;
30 }>(); 24 }>();
31 25
32 const playerRef = ref<InstanceType<typeof XGPlayer>>(); 26 const playerRef = ref<InstanceType<typeof XGPlayer>>();
@@ -64,12 +58,24 @@ @@ -64,12 +58,24 @@
64 }); 58 });
65 }; 59 };
66 60
  61 + const handleEzvizControl = (actionType: string, start: boolean) => {
  62 + const { id } = props.options || {};
  63 + const action = EzvizVideoControlEnum[actionType as VideoControlEnum];
  64 + setEzvizControl({ entityId: id!, action, controllingType: Number(!start) });
  65 + };
  66 +
67 //长按开始 67 //长按开始
68 const moveStart = (action: string) => { 68 const moveStart = (action: string) => {
69 if (unref(props.options?.isGBT)) { 69 if (unref(props.options?.isGBT)) {
70 handleGBTControl(action, unref(sliderValue)); 70 handleGBTControl(action, unref(sliderValue));
71 return; 71 return;
72 } 72 }
  73 +
  74 + if (props.options?.videoPlatformType === VideoPlatformEnum.FLUORITE) {
  75 + handleEzvizControl(action, true);
  76 + return;
  77 + }
  78 +
73 handleControl(0, action); 79 handleControl(0, action);
74 }; 80 };
75 81
@@ -79,6 +85,14 @@ @@ -79,6 +85,14 @@
79 handleGBTControl('STOP', unref(sliderValue)); 85 handleGBTControl('STOP', unref(sliderValue));
80 return; 86 return;
81 } 87 }
  88 +
  89 + if (props.options?.videoPlatformType === VideoPlatformEnum.FLUORITE) {
  90 + setTimeout(() => {
  91 + handleEzvizControl(action, false);
  92 + }, 1000);
  93 + return;
  94 + }
  95 +
82 handleControl(1, action); 96 handleControl(1, action);
83 }; 97 };
84 98
@@ -122,15 +136,15 @@ @@ -122,15 +136,15 @@
122 <div> 136 <div>
123 <Button 137 <Button
124 class="left-top in-block" 138 class="left-top in-block"
125 - @mousedown="moveStart('UP')"  
126 - @mouseup="moveStop('UP')" 139 + @mousedown="moveStart(VideoControlEnum.Up)"
  140 + @mouseup="moveStop(VideoControlEnum.Up)"
127 > 141 >
128 <CaretUpOutlined class="icon-rotate child-icon" /> 142 <CaretUpOutlined class="icon-rotate child-icon" />
129 </Button> 143 </Button>
130 <Button 144 <Button
131 class="right-top in-block" 145 class="right-top in-block"
132 - @mousedown="moveStart('RIGHT')"  
133 - @mouseup="moveStop('RIGHT')" 146 + @mousedown="moveStart(VideoControlEnum.Right)"
  147 + @mouseup="moveStop(VideoControlEnum.Right)"
134 > 148 >
135 <CaretRightOutlined class="icon-rotate child-icon" /> 149 <CaretRightOutlined class="icon-rotate child-icon" />
136 </Button> 150 </Button>
@@ -138,15 +152,15 @@ @@ -138,15 +152,15 @@
138 <div> 152 <div>
139 <Button 153 <Button
140 class="left-bottom in-block" 154 class="left-bottom in-block"
141 - @mousedown="moveStart('LEFT')"  
142 - @mouseup="moveStop('LEFT')" 155 + @mousedown="moveStart(VideoControlEnum.Left)"
  156 + @mouseup="moveStop(VideoControlEnum.Left)"
143 > 157 >
144 <CaretLeftOutlined class="icon-rotate child-icon" /> 158 <CaretLeftOutlined class="icon-rotate child-icon" />
145 </Button> 159 </Button>
146 <Button 160 <Button
147 class="right-bottom in-block" 161 class="right-bottom in-block"
148 - @mousedown="moveStart('DOWN')"  
149 - @mouseup="moveStop('DOWN')" 162 + @mousedown="moveStart(VideoControlEnum.Down)"
  163 + @mouseup="moveStop(VideoControlEnum.Down)"
150 > 164 >
151 <CaretDownOutlined class="icon-rotate child-icon" /> 165 <CaretDownOutlined class="icon-rotate child-icon" />
152 </Button> 166 </Button>
@@ -161,16 +175,16 @@ @@ -161,16 +175,16 @@
161 <div class="flex justify-center mt-8"> 175 <div class="flex justify-center mt-8">
162 <Button 176 <Button
163 class="button-icon" 177 class="button-icon"
164 - @mousedown="moveStart('ZOOM_IN')"  
165 - @mouseup="moveStop('ZOOM_IN')" 178 + @mousedown="moveStart(VideoControlEnum.ZoomIn)"
  179 + @mouseup="moveStop(VideoControlEnum.ZoomIn)"
166 style="border-radius: 50%" 180 style="border-radius: 50%"
167 > 181 >
168 <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" /> 182 <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
169 </Button> 183 </Button>
170 <Button 184 <Button
171 class="ml-10 button-icon" 185 class="ml-10 button-icon"
172 - @mousedown="moveStart('ZOOM_OUT')"  
173 - @mouseup="moveStop('ZOOM_OUT')" 186 + @mousedown="moveStart(VideoControlEnum.ZoomOut)"
  187 + @mouseup="moveStop(VideoControlEnum.ZoomOut)"
174 style="border-radius: 50%" 188 style="border-radius: 50%"
175 > 189 >
176 <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" /> 190 <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />
@@ -31,7 +31,6 @@ @@ -31,7 +31,6 @@
31 options.value = null; 31 options.value = null;
32 setModalProps({ loading: true, loadingTip: '视频加载中...' }); 32 setModalProps({ loading: true, loadingTip: '视频加载中...' });
33 const { url, type } = await record.getPlayUrl(); 33 const { url, type } = await record.getPlayUrl();
34 -  
35 playUrl.value = url; 34 playUrl.value = url;
36 options.value = record; 35 options.value = record;
37 options.value.playerProps = { 36 options.value.playerProps = {