创建预置位

src/api/camera/camera-preview.ts

@@ -159,7 +159,7 @@ export const deleteFenceApi = (cameraAlgoPresetRelId: number) => {
 
 interface CreatePresetParam {
   presetName: string;
-  cameraCode: string;
+  cameraId: number;
 }
 
 /** 创建预置位 */
@@ -174,7 +174,7 @@ export const createPresetApi = (data: CreatePresetParam) => {
 interface UpdatePresetNameParam {
   presetToken: string;
   presetName: string;
-  cameraCode: string;
+  cameraId: number;
 }
 /** 修改预置位名称 */
 export const changePresetNameApi = (data: UpdatePresetNameParam) => {
@@ -186,7 +186,7 @@ export const changePresetNameApi = (data: UpdatePresetNameParam) => {
 };
 
 /** 删除预置位 */
-export const deletePresetApi = (data: { presetToken: string; cameraCode: string }) => {
+export const deletePresetApi = (data: { presetToken: string; cameraId: number }) => {
   return http.request({
     url: `/camera/deletePreset`,
     method: 'post',
@@ -215,12 +215,12 @@ export const getPresetListApi = (cameraId: number) => {
   return http.request<PresetDetailItem[]>({
     url: `/camera/getPresets`,
     method: 'get',
-    params: { cameraCode: cameraId },
+    params: { cameraId },
   });
 };
 
 /** 跳转到对应的预置位 */
-export const goToPresetApi = (data: { presetToken: string; cameraCode: string }) => {
+export const goToPresetApi = (data: { presetToken: string; cameraId: string }) => {
   return http.request({
     url: `/camera/gotoPreset`,
     method: 'post',
@@ -229,7 +229,7 @@ export const goToPresetApi = (data: { presetToken: string; cameraCode: string })
 };
 
 interface CameraMoveParam {
-  cameraCode: string;
+  cameraId: string;
   x: number;
   zoom: number;
   y: number;

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

@@ -11,22 +11,30 @@
   import { createPresetApi } from '@/api/camera/camera-preview';
   import { ElDialog, ElInput, ElMessage } from 'element-plus';
   import { ref } from 'vue';
+  import usePresetListStore from '../../store/usePresetListStore';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
   const presetName = ref('');
   const loading = ref(false);
   const emits = defineEmits<{ (e: 'close'): unknown; (e: 'ok'): unknown }>();
+  const presetStore = usePresetListStore();
+
+  const cameraDetailStore = useCameraDetailStore();
 
   const handleSubmit = () => {
     loading.value = true;
-    createPresetApi({ presetName: presetName.value, cameraCode: 'dev_01_01' })
-      .then(() => {
-        ElMessage.success('预置位创建成功');
-        emits('ok');
+    createPresetApi({ presetName: presetName.value, cameraId: cameraDetailStore.cameraId })
+      .then((val) => {
+        if (val) {
+          ElMessage.success('预置位创建成功');
+          presetStore.currentPresetToken = val;
+          emits('ok');
+        } else {
+          ElMessage.error('创建失败：已有预置位数量可能超限，请删除后再添加');
+        }
       })
       .finally(() => {
         loading.value = false;
       });
   };
-
-  /** 先写死为dev_01_01 */
 </script>
 <style scoped></style>

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

@@ -27,36 +27,39 @@
     createCameraAlgoApi,
     updateCameraAlgoApi,
   } from '@/api/camera/camera-preview';
-  import { useRouteQuery } from '@vueuse/router';
   import { ElMessage } from 'element-plus';
   import AlgoTag from './AlgoTag.vue';
   import useFenceStore from '../../store/useFenceStore';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
 
   const { getCameraAlgoList, getAllAlgoList } = cameraAlgoStore;
   const { cameraAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
+  const cameraDetailStore = useCameraDetailStore();
 
-  const cameraId = useRouteQuery('cameraId', '', { transform: (str) => Number(str) });
   onMounted(() => {
-    getCameraAlgoList(cameraId.value);
+    getCameraAlgoList(cameraDetailStore.cameraId);
     getAllAlgoList();
   });
 
   const handleSelectAlgo = (id: number) => {
     if (id !== selectedAlgoId.value) {
       selectedAlgoId.value = id;
-      fenceStore.getFence({ algoId: id, cameraId: cameraId.value, presetId: 1 }).then((res) => {
-        console.log('fence detail', res);
-      });
+      fenceStore
+        .getFence({ algoId: id, cameraId: cameraDetailStore.cameraId, presetId: 1 })
+        .then((res) => {
+          console.log('fence detail', res);
+        });
     }
   };
 
   const handleSubmit = (param) => {
     console.log('submitParam', param);
+    const cameraId = cameraDetailStore.cameraId;
     const newParam = {
-      cameraId: cameraId.value,
+      cameraId: cameraId,
       electronicFence: param.electronicFence,
       algoId: param.algoId,
       detectionFrequency: param.detectionFrequency,
@@ -66,21 +69,21 @@
     if (param.id) {
       updateCameraAlgoApi({ ...newParam, id: param.id }).then(() => {
         ElMessage.success('更新成功');
-        getCameraAlgoList(cameraId.value);
+        getCameraAlgoList(cameraId);
       });
     } else {
       createCameraAlgoApi(newParam).then(() => {
         ElMessage.success('保存成功');
-        getCameraAlgoList(cameraId.value);
+        getCameraAlgoList(cameraId);
       });
     }
   };
 
   const handleRemove = (algoId: number) => {
     console.log('remove', algoId);
-    deleteCameraAlgoApi({ algoId, cameraId: cameraId.value }).then(() => {
+    deleteCameraAlgoApi({ algoId, cameraId: cameraDetailStore.cameraId }).then(() => {
       ElMessage.success('删除成功');
-      getCameraAlgoList(cameraId.value);
+      getCameraAlgoList(cameraDetailStore.cameraId);
     });
   };
 </script>
@@ -90,4 +93,3 @@
     margin-right: 15px;
   }
 </style>
-../../store/useFenceStore

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

@@ -19,7 +19,7 @@
     <div>
       <CameraDirectionControl />
       <ElButton type="primary" @click="handleAddPreset">添加预置位</ElButton>
-      <AddPresetModal v-if="addPresetModalVisible" @close="handleClose" @ok="handleClose" />
+      <AddPresetModal v-if="addPresetModalVisible" @close="handleClose" @ok="handleAddPresetOk" />
     </div>
   </div>
 </template>
@@ -37,12 +37,14 @@
   import { ElMessage } from 'element-plus';
   import { onMounted } from 'vue';
   import usePresetListStore from '../../store/usePresetListStore';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
   const fenceStore = useFenceStore();
 
   const { data, getPresetList } = usePresetListStore();
+  const cameraDetailStore = useCameraDetailStore();
 
   const viewType = ref<ViewType>(ViewType.window1);
 
@@ -52,6 +54,11 @@
     addPresetModalVisible.value = false;
   };
 
+  const handleAddPresetOk = () => {
+    getPresetList(cameraDetailStore.cameraId);
+    handleClose();
+  };
+
   const handleRemove = () => {
     console.log('handleRemove');
     fenceEditorRef.value?.remove();
@@ -112,7 +119,10 @@
   };
 
   onMounted(() => {
-    getPresetList('dev_01_01');
+    const cameraId = cameraDetailStore.cameraId;
+    if (cameraId) {
+      getPresetList(cameraId);
+    }
   });
 </script>
 <style scoped>

src/views/cameras/preview/store/useCameraDetailStore.ts

@@ -1,16 +1,19 @@
 /** 相机详情的store */
 
 import { CameraDetailServer } from '@/api/camera/camera-overview';
+import { useRouteQuery } from '@vueuse/router';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
 const useCameraDetailStore = defineStore('cameraDetail', () => {
+  const cameraId = useRouteQuery('cameraId', '', { transform: (str) => Number(str) });
+
   const detail = ref<CameraDetailServer | null>(null);
 
   const setDetail = (newDetail: CameraDetailServer) => {
     detail.value = newDetail;
   };
-  return { detail, setDetail };
+  return { detail, setDetail, cameraId };
 });
 
 export default useCameraDetailStore;