完成云台相机接口联调

src/api/camera/camera-preview.ts

@@ -328,10 +328,18 @@ interface CreatePresetParam {
   cameraId: number;
 }
 
+/** 创建预置位 deprecated*/
+// export const createPresetApi = (data: CreatePresetParam) => {
+//   return http.request({
+//     url: `/onvif/createPreset`,
+//     method: 'post',
+//     data,
+//   });
+// };
 /** 创建预置位 */
 export const createPresetApi = (data: CreatePresetParam) => {
   return http.request({
-    url: `/onvif/createPreset`,
+    url: `/onvif/saveCameraPreset`,
     method: 'post',
     data,
   });
@@ -351,6 +359,14 @@ export const changePresetNameApi = (data: UpdatePresetNameParam) => {
   });
 };
 
+/** 删除预置位 deprecated*/
+// export const deletePresetApi = (data: { presetToken: string; cameraId: number }) => {
+//   return http.request({
+//     url: `/onvif/deletePreset`,
+//     method: 'post',
+//     data,
+//   });
+// };
 /** 删除预置位 */
 export const deletePresetApi = (data: { presetToken: string; cameraId: number }) => {
   return http.request({
@@ -359,7 +375,6 @@ export const deletePresetApi = (data: { presetToken: string; cameraId: number })
     data,
   });
 };
-
 export interface PresetDetailItem {
   name: string;
   token: string;
@@ -376,19 +391,35 @@ export interface PresetDetailItem {
   };
 }
 
+export interface PresetListResp {
+  cameraId: number;
+  id:number;
+  imageUrl:string;
+  presetName:string;
+  presetToken:string;
+}
+
+/** 获取预置位列表  depracted*/ 
+// export const getPresetListApi = (cameraId: number) => {
+//   return http.request<PresetDetailItem[]>(
+//     {
+//       url: `/onvif/getPresets`,
+//       // url: `/admin/algo/queryCameraPreset`,
+//       method: 'get',
+//       params: { cameraId },
+//     },
+//     {
+//       isShowErrorMessage: false,
+//     },
+//   );
+// };
 /** 获取预置位列表 */
 export const getPresetListApi = (cameraId: number) => {
-  return http.request<PresetDetailItem[]>(
-    {
-      url: `/onvif/getPresets`,
-      // url: `/admin/algo/queryCameraPreset`,
-      method: 'get',
-      params: { cameraId },
-    },
-    {
-      isShowErrorMessage: false,
-    },
-  );
+  return http.request<PresetListResp[]>({
+    url: `/onvif/queryCameraPresetList`,
+    method: 'get',
+    params: { cameraId },
+  });
 };
 
 /** 跳转到对应的预置位 */

src/modules/algo-params-setting-base/components/PresetSelect/PresetSelect.vue

@@ -12,11 +12,11 @@
         :disabled="Boolean(!cameraDetailStore.detail?.isPtz)"
         placeholder="请选择预置位"
       >
-        <ElOption v-for="item in presetOptions" :key="item.token" :label="item.name" :value="item.token">
-          <span style="float: left">{{ item.name }}</span>
+        <ElOption v-for="item in presetOptions" :key="item.presetToken" :label="item.presetToken" :value="item.presetToken">
+          <span style="float: left">{{ item.presetName }}</span>
           <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
             <!-- 点击删除的时候，阻止选中菜单 -->
-            <el-icon @click.stop="handleDeletePreset(item.token)">
+            <el-icon @click.stop="handleDeletePreset(item.presetToken)" v-if="false">
               <CircleCloseFilled />
             </el-icon>
           </span>

src/views/cameras/overview/components/CameraOverviewPopover.vue

@@ -17,20 +17,15 @@
         <div class="presetAddWrapper" v-if="!!overviewCameraData.isPtz">
           <CameraViewScale @update:ControlPerspective="activePresetToken = ''" />
           <CameraDirectionControl @update:ControlPerspective="activePresetToken = ''" />
-          <ElButton type="primary" size="large" style="margin-top: 20px; width: 100px" @click="handleAddPreset"
-            >添加预置位</ElButton
-          >
+          <ElButton type="primary" style="margin-top: 20px; width: 100px" @click="handleAddPreset">添加预置位</ElButton>
         </div>
       </main>
       <footer class="footer" v-if="!!overviewCameraData.isPtz && presetList.length > 0">
         <div class="footer-header">
-          <ElTooltip :content="isEditMode ? '完成编辑' : '开始编辑'" placement="right">
-            <img
-              :src="isEditMode ? EditPresetPositionFocusIcon : EditPresetPositionIcon"
-              alt="编辑预置位"
-              @click="toggleEditMode"
-            />
-          </ElTooltip>
+          <div class="edit-preset-position-icon-wrapper" @click="toggleEditMode">
+            <img :src="isEditMode ? EditPresetPositionFocusIcon : EditPresetPositionIcon" alt="编辑预置位" />
+            <span v-show="isEditMode">完成编辑</span>
+          </div>
           <div class="pagination-control" v-if="displayPresetList.length > 0">
             <el-button type="text" :disabled="currentPage === 1" @click="prevPage" :icon="ArrowLeft" />
             <span>{{ currentPage }}/{{ totalPages }}</span>
@@ -38,18 +33,13 @@
           </div>
         </div>
         <div class="preset-position-list">
-          <div 
-            class="preset-position-item" 
-            v-for="item in currentPageItems" 
-            :key="item.token"
-            :class="{ 'active-preset': activePresetToken === item.token }"
+          <div
+            class="preset-position-item"
+            v-for="item in currentPageItems"
+            :key="item.presetToken"
+            :class="{ 'active-preset': activePresetToken === item.presetToken }"
           >
-            <img 
-              :src="PresetPositionItem" 
-              alt="预置位" 
-              style="cursor: pointer" 
-              @click="handleGoToPreset(item)" 
-            />
+            <img :src="item.imageUrl || PresetPositionItem" alt="预置位" style="cursor: pointer" @click="handleGoToPreset(item)" />
             <img
               v-if="isEditMode"
               :src="DeletePresetPositionIcon"
@@ -57,7 +47,7 @@
               class="delete-preset-position-icon"
               @click="handleDeletePreset(item)"
             />
-            <span class="preset-position-name">{{ item.name }}</span>
+            <span class="preset-position-name">{{ item.presetName }}</span>
           </div>
         </div>
       </footer>
@@ -73,19 +63,25 @@
   import DeletePresetPositionIcon from '@/assets/icons/delete-preset-position.svg';
   import PresetPositionItem from '@/assets/icons/preset-placeholder-img.svg';
   import EditPresetPositionFocusIcon from '@/assets/icons/edit-preset-position-focus.svg';
-  import { getPresetListApi, PresetDetailItem, deletePresetApi, createPresetApi, goToPresetApi } from '@/api/camera/camera-preview';
+  import {
+    getPresetListApi,
+    PresetListResp,
+    deletePresetApi,
+    createPresetApi,
+    goToPresetApi,
+  } from '@/api/camera/camera-preview';
   import CameraLiveVideo from '@/modules/algo-params-setting-base/components/CameraLiveVideo/CameraLiveVideo.vue';
   import CameraViewScale from '@/modules/algo-params-setting-base/components/CameraViewSetting/CameraViewScale.vue';
   import CameraDirectionControl from '@/modules/algo-params-setting-base/components/CameraDirectionControl/CameraDirectionControl.vue';
   import { ElMessage, ElMessageBox } from 'element-plus';
-  
+
   const emits = defineEmits(['update:dialogVisible']);
   const dialogVisible = ref(false);
-  const presetList = ref<PresetDetailItem[]>([]);
-  const displayPresetList = ref<PresetDetailItem[]>([]);
+  const presetList = ref<PresetListResp[]>([]);
+  const displayPresetList = ref<PresetListResp[]>([]);
   const isEditMode = ref(false);
   const activePresetToken = ref<string>(''); // 当前激活的预置位token
-  
+
   const props = defineProps<{
     dialogVisible: boolean;
     overviewCameraData: CameraDetailServer;
@@ -118,21 +114,21 @@
     isEditMode.value = !isEditMode.value;
   };
 
-  const handleGoToPreset = (item: PresetDetailItem) => {
+  const handleGoToPreset = (item: PresetListResp) => {
     const cameraId = props.overviewCameraData.id;
     if (!cameraId) return;
-    
+
     // 设置当前激活的预置位
-    activePresetToken.value = item.token;
-    
+    activePresetToken.value = item.presetToken;
+
     // 调用前往预置位的API
-    goToPresetApi({ presetToken: item.token, cameraId });
+    goToPresetApi({ presetToken: item.presetToken, cameraId });
   };
 
-  const handleDeletePreset = (item: PresetDetailItem) => {
+  const handleDeletePreset = (item: PresetListResp) => {
     const cameraId = props.overviewCameraData.id;
     if (!cameraId) return;
-    const index = displayPresetList.value.findIndex((preset) => preset.token === item.token);
+    const index = displayPresetList.value.findIndex((preset) => preset.presetToken === item.presetToken);
     if (index !== -1) {
       ElMessageBox.confirm(
         '该预置位可能存在关联的电子围栏。删除该预置位将会删除对应的电子围栏信息，请确认是否删除?',
@@ -142,7 +138,7 @@
           cancelButtonText: '取消',
         },
       ).then(async () => {
-        await deletePresetApi({ presetToken: item.token, cameraId });
+        await deletePresetApi({ presetToken: item.presetToken, cameraId });
         ElMessage.success('删除成功');
         displayPresetList.value.splice(index, 1);
         const currentPageStartIdx = (currentPage.value - 1) * pageSize;
@@ -162,7 +158,7 @@
         if (!value) {
           return '预置位名称不能为空';
         }
-        const isExist = presetList.value.find((item) => item.name === value);
+        const isExist = presetList.value.find((item) => item.presetName === value);
         if (isExist) {
           return '预置位名称已存在';
         }
@@ -215,11 +211,6 @@
       font-weight: bold;
       font-size: 16px;
     }
-    &__title {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
     &__content {
       display: flex;
       flex-direction: column;
@@ -243,6 +234,17 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
+          cursor: pointer;
+          .edit-preset-position-icon-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            span {
+              font-size: 12px;
+              color: #1777ff;
+              font-weight: 500;
+            }
+          }
 
           .pagination-control {
             display: flex;
@@ -263,12 +265,12 @@
             width: 120px;
             position: relative;
             transition: all 0.3s ease;
-            
+
             &.active-preset {
               transform: scale(1.05);
               box-shadow: 0 0 8px 2px rgba(24, 144, 255, 0.6);
               border-radius: 4px;
-              
+
               &::after {
                 content: '';
                 position: absolute;
@@ -281,12 +283,12 @@
                 box-sizing: border-box;
                 pointer-events: none;
               }
-              
+
               .preset-position-name {
                 background: rgba(24, 144, 255, 0.8);
               }
             }
-            
+
             .delete-preset-position-icon {
               position: absolute;
               top: -4px;
@@ -335,6 +337,9 @@
         align-items: center;
         z-index: 10;
         transform: scale(0.6);
+        .el-button {
+          transform: scale(1.5);
+        }
       }
     }
   }