完成相机控制的方向盘

src/api/camera/camera-preview.ts

@@ -235,7 +235,7 @@ export const getPresetListApi = (cameraId: number) => {
 };
 
 /** 跳转到对应的预置位 */
-export const goToPresetApi = (data: { presetToken: string; cameraId: string }) => {
+export const goToPresetApi = (data: { presetToken: string; cameraId: number }) => {
   return http.request({
     url: `/camera/gotoPreset`,
     method: 'post',
@@ -244,7 +244,7 @@ export const goToPresetApi = (data: { presetToken: string; cameraId: string }) =
 };
 
 interface CameraMoveParam {
-  cameraId: string;
+  cameraId: number;
   x: number;
   zoom: number;
   y: number;

src/views/cameras/preview/components/CameraDirectionControl/CameraDirectionControl.vue

@@ -2,15 +2,36 @@
   <div class="cameraDirectionControlWrapper">
     <div class="cameraDirectionControl">
       <div class="roundCircle"></div>
-      <DirectionItem position="top" />
-      <DirectionItem position="right" />
-      <DirectionItem position="bottom" />
-      <DirectionItem position="left" />
+      <DirectionItem position="top" @click="handleMoveTop" />
+      <DirectionItem position="right" @click="handleMoveRight" />
+      <DirectionItem position="bottom" @click="handleMoveBottom" />
+      <DirectionItem position="left" @click="handleMoveLeft" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
+  import { cameraMoveApi } from '@/api/camera/camera-preview';
   import DirectionItem from './DirectionItem.vue';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import { storeToRefs } from 'pinia';
+
+  const cameraDetailStore = useCameraDetailStore();
+  const { cameraId } = storeToRefs(cameraDetailStore);
+
+  const STEP = 0.1;
+
+  const handleMoveTop = () => {
+    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: 0, y: STEP });
+  };
+  const handleMoveRight = () => {
+    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: STEP, y: 0 });
+  };
+  const handleMoveBottom = () => {
+    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: 0, y: -STEP });
+  };
+  const handleMoveLeft = () => {
+    cameraMoveApi({ cameraId: cameraId.value, zoom: 0, x: -STEP, y: 0 });
+  };
 </script>
 <style scoped>
   .cameraDirectionControlWrapper {

src/views/cameras/preview/components/CameraDirectionControl/DirectionItem.vue

@@ -11,7 +11,6 @@
   const props = defineProps<{ position: 'top' | 'right' | 'bottom' | 'left' }>();
   const isActive = ref(false);
   const handleClick = () => {
-    console.log('click');
     isActive.value = true;
     setTimeout(() => {
       isActive.value = false;

src/views/cameras/preview/components/FenceEditor/FenceEditor.vue

@@ -693,6 +693,5 @@
     width: 100%;
     height: 100%;
     z-index: 8;
-    /* border: 2px solid #0f0; */
   }
 </style>

src/views/cameras/preview/components/PresetSelect/PresetSelect.vue

@@ -29,7 +29,7 @@
   import { CircleCloseFilled } from '@element-plus/icons-vue';
   import usePresetListStore from '../../store/usePresetListStore';
   import { storeToRefs } from 'pinia';
-  import { deletePresetApi } from '@/api/camera/camera-preview';
+  import { deletePresetApi, goToPresetApi } from '@/api/camera/camera-preview';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import useFenceStore from '../../store/useFenceStore';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
@@ -72,6 +72,7 @@
 
   const handleChangeValue = (val) => {
     currentPresetToken.value = val;
+    goToPresetApi({ presetToken: val, cameraId: cameraDetailStore.cameraId });
     fenceStore.getFence({
       presetToken: val,
       algoId: cameraAlgoStore.selectedAlgoId!,