fix: 修改流媒体控制台的东西

@@ -122,5 +122,9 @@ export const closeFlvPlay = (url: string, browserId: string) => {
 
 //云台控制
 export const controlling = (params: any) => {
-  return `/api/yt/video/controlling?=${{ ...params }}`;
+  console.log(params, 'params');
+  return defHttp.get({
+    url: `/video/controlling`,
+    params,
+  });
 };

@@ -89,43 +89,17 @@
     !unref(isPlay) && unref(videoPlayInstance)?.play();
   };
 
-  const handleTopClick = async () => {
-    console.log('上');
-    handleControl(0, 'up');
-    setTimeout(() => {
-      handleControl(1, 'up');
-    }, 2000);
-  };
-
-  const handleRightClick = () => {
-    console.log('右');
-  };
-
-  const handleBottomClick = () => {
-    console.log('下');
-  };
-
-  const handleLeftClick = () => {
-    console.log('左');
-  };
-
-  // type 1:放大    2:缩小
-  const handleScale = (type: number) => {
-    console.log(type);
-    console.log(props);
-  };
-
-  const getSn = () => {
+  const getId = () => {
     const { options } = props || {};
-    const { sources } = options || {};
-    return sources?.[0]?.sn;
+    const { sources }: any = options || {};
+    return sources?.[0]?.id;
   };
 
   const handleControl = (action: number, direction: string) => {
     console.log(direction);
 
-    const organizationId = getSn();
-    controlling({ organizationId, action, direction });
+    const organizationId = getId();
+    controlling({ cameralndexCode: organizationId, action, command: direction });
   };
 
   const isPlay = ref<Boolean | null | undefined>(true);
@@ -159,6 +133,15 @@
     });
   });
 
+  //长按开始
+  const moveStart = (action) => {
+    handleControl(0, action);
+  };
+  // 长按结束
+  const moveStop = (action) => {
+    handleControl(1, action);
+  };
+
   onUnmounted(() => {
     unref(videoPlayInstance)?.dispose();
     videoPlayInstance.value = null;
@@ -191,18 +174,34 @@
 
         <div class="box">
           <div>
-            <Button class="left-top in-block" @click="handleTopClick">
+            <Button
+              class="left-top in-block"
+              @mousedown="moveStart('up')"
+              @mouseup="moveStop('up')"
+            >
               <CaretUpOutlined class="icon-rotate child-icon" />
             </Button>
-            <Button class="right-top in-block" @click="handleRightClick">
+            <Button
+              class="right-top in-block"
+              @mousedown="moveStart('RIGHT')"
+              @mouseup="moveStop('RIGHT')"
+            >
               <CaretRightOutlined class="icon-rotate child-icon" />
             </Button>
           </div>
           <div>
-            <Button class="left-bottom in-block" @click="handleBottomClick">
+            <Button
+              class="left-bottom in-block"
+              @mousedown="moveStart('LEFT')"
+              @mouseup="moveStop('LEFT')"
+            >
               <CaretLeftOutlined class="icon-rotate child-icon" />
             </Button>
-            <Button class="right-bottom in-block" @click="handleLeftClick">
+            <Button
+              class="right-bottom in-block"
+              @mousedown="moveStart('DOWN')"
+              @mouseup="moveStop('DOWN')"
+            >
               <CaretDownOutlined class="icon-rotate child-icon" />
             </Button>
           </div>
@@ -211,10 +210,20 @@
         </div>
       </div>
       <div class="flex justify-center mt-8">
-        <Button shape="circle" class="button-icon" @click="handleScale(1)">
+        <Button
+          class="button-icon"
+          @mousedown="moveStart('ZOOM_IN')"
+          @mouseup="moveStop('ZOOM_IN')"
+          style="border-radius: :50%;"
+        >
           <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
         </Button>
-        <Button shape="circle" class="ml-10 button-icon" @click="handleScale(2)">
+        <Button
+          class="ml-10 button-icon"
+          @mousedown="moveStart('ZOOM_OUT')"
+          @mouseup="moveStop('ZOOM_OUT')"
+          style="border-radius: :50%;"
+        >
           <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />
         </Button>
       </div>
@@ -254,6 +263,7 @@
     height: 3rem;
     background: #f5f5f5;
     border: none;
+    border-radius: 50% !important;
   }
 
   .center {

@@ -49,13 +49,13 @@
     autoplay: true,
   });
 
-  const setSources = (url: string, fingerprintResult: GetResult, sn) => {
+  const setSources = (url: string, fingerprintResult: GetResult, id) => {
     const flag = isRtspProtocol(url);
     options.sources = [
       {
         src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
         type: getVideoTypeByUrl(url),
-        sn,
+        id,
       },
     ];
 
@@ -76,12 +76,12 @@
             closeFlvPlay(unref(playUrl), result.visitorId);
             withToken.value = true;
           }
-          setSources((record as CameraModel).videoUrl, result, record.sn);
+          setSources((record as CameraModel).videoUrl, result, record.id);
         }
       } else {
         try {
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-          setSources(url, result, record.sn);
+          setSources(url, result, record.id);
         } catch (error) {}
       }
       showVideo.value = true;