相机预览

src/api/camera/camera-preview.ts

@@ -119,7 +119,7 @@ export const deleteCameraAlgoApi = (params: { cameraId: number; algoId: number }
 export interface GetFenceParams {
   algoId: number;
   cameraId: number;
-  presetId: number;
+  presetToken: string;
 }
 
 /** 查询电子围栏 */
@@ -133,12 +133,27 @@ export const getFenceApi = (
   });
 };
 
+export interface SaveFenceParams {
+  algoId: number;
+  cameraId: number;
+  electronicFencePolygon: string;
+  presetToken: number;
+}
+/** 添加电子围栏 */
+export const saveFenceApi = (data: SaveFenceParams) => {
+  return http.request({
+    url: '/cameraPreview/updateFence',
+    method: 'put',
+    data,
+  });
+};
+
 interface UpdateFenceParams {
   algoId: number;
   cameraId: number;
-  electronicFencePolygon: number;
+  electronicFencePolygon: string;
   id: number;
-  presetId: number;
+  presetToken: number;
 }
 /** 编辑电子围栏 */
 export const editFenceApi = (data: UpdateFenceParams) => {

src/views/cameras/preview/CameraPreview.vue

@@ -9,27 +9,16 @@
         <div class="cameraView">
           <CameraViewSetting />
         </div>
-        <div class="cameraParamsSettingWrapper">
-          <div class="cameraParamsSetting">
-            <CameraParams :detail="cameraParamsDetail" />
-          </div>
-          <div class="algorithmsSetting"> <AlgorithmsSetting /> </div>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import CameraTree from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
-  import AlgorithmsSetting from './components/AlgorithmsSetting/AlgorithmsSetting.vue';
   import useCameraTree from './hooks/useCameraTree';
-  import CameraParams from './components/CameraParams/CameraParams.vue';
   const { data, loading } = useCameraTree();
-
-  const cameraParamsDetail = ref({});
 </script>
 <style lang="scss" scoped>
   .cameraView {
@@ -64,14 +53,4 @@
     height: 800px;
     border: 1px solid #ccc;
   }
-
-  .cameraParamsSettingWrapper {
-    display: flex;
-    margin-top: 10px;
-  }
-  .algorithmsSetting {
-    flex: 1;
-    min-height: 300px;
-    margin-left: 10px;
-  }
 </style>

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

@@ -31,9 +31,11 @@
   import AlgoTag from './AlgoTag.vue';
   import useFenceStore from '../../store/useFenceStore';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import usePresetListStore from '../../store/usePresetListStore';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
+  const presetStore = usePresetListStore();
 
   const { getCameraAlgoList, getAllAlgoList } = cameraAlgoStore;
   const { cameraAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
@@ -48,7 +50,11 @@
     if (id !== selectedAlgoId.value) {
       selectedAlgoId.value = id;
       fenceStore
-        .getFence({ algoId: id, cameraId: cameraDetailStore.cameraId, presetId: 1 })
+        .getFence({
+          algoId: id,
+          cameraId: cameraDetailStore.cameraId,
+          presetToken: presetStore.currentPresetToken,
+        })
         .then((res) => {
           console.log('fence detail', res);
         });

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

@@ -25,6 +25,12 @@
         /> </div
     ></div>
   </div>
+  <div class="cameraParamsSettingWrapper">
+    <div class="cameraParamsSetting">
+      <CameraParams :detail="cameraParamsDetail" />
+    </div>
+    <div class="algorithmsSetting"> <AlgorithmsSetting /> </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref, watch } from 'vue';
@@ -39,6 +45,8 @@
   import { onMounted } from 'vue';
   import usePresetListStore from '../../store/usePresetListStore';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import AlgorithmsSetting from '../AlgorithmsSetting/AlgorithmsSetting.vue';
+  import CameraParams from '../CameraParams/CameraParams.vue';
 
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
@@ -51,6 +59,8 @@
 
   const addPresetModalVisible = ref(false);
 
+  const cameraParamsDetail = ref({});
+
   const handleClose = () => {
     addPresetModalVisible.value = false;
   };
@@ -80,6 +90,7 @@
   const handleSave = () => {
     const json = fenceEditorRef.value?.toObject();
     console.log('save json', json);
+    fenceStore.saveFence({ cameraId: '', });
   };
 
   const handleUpdateViewType = (t: ViewType) => {
@@ -153,4 +164,20 @@
     right: 50px;
     z-index: 10;
   }
+
+  .cameraParamsSettingWrapper {
+    display: flex;
+    margin-top: 10px;
+  }
+  .algorithmsSetting {
+    flex: 1;
+    min-height: 300px;
+    margin-left: 10px;
+    border-left: 1px solid #ccc;
+    padding-left: 15px;
+  }
+  .cameraParamsSetting {
+    flex-basis: 330px;
+    flex-shrink: 0;
+  }
 </style>

src/views/cameras/preview/hooks/useFenceDetail.ts

@@ -0,0 +1,10 @@
+import useFenceStore from '../store/useFenceStore';
+
+// import
+const useFenceDetail = () => {
+  const fenceStore = useFenceStore();
+
+  const getFenceDetail = () => {
+    fenceStore.getFence({ algoId: '', cameraId: '', presetToken: '' });
+  };
+};

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

@@ -1,4 +1,9 @@
-import { GetFenceParams, getFenceApi } from '@/api/camera/camera-preview';
+import {
+  GetFenceParams,
+  getFenceApi,
+  saveFenceApi,
+  SaveFenceParams,
+} from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { ServerLines } from '../components/FenceEditor/constants';
@@ -13,36 +18,42 @@ export const useFenceStore = defineStore('electronicFencePolygonStore', () => {
 
   /** 获取电子围栏 */
   const getFence = (param: GetFenceParams) => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const res = {
-          id: 2,
-          electronicFencePolygon:
-            Math.random() > 0.5
-              ? ``
-              : `[[[150.9196038878118,103.42855053676564],[350.91958691002293,54.42855423815479],[464.91957723268325,211.42854237860183],[222.9195977758078,225.42854132106206],[60.91961152781679,175.42854509798977]],[[325.9195890322465,259.42853875275125],[534.9195712904572,249.42853950813677],[624.9195636504521,362.42853097228016],[509.91957341268073,380.4285296125862],[309.91959039046964,345.4285322564356]]]`,
-        };
-        currentFenceId.value = res.id;
-        const points = res.electronicFencePolygon
-          ? (JSON.parse(res.electronicFencePolygon) as [])
-          : [];
-        currentFencePoints.value = points;
-        serverFencePoints.value = points;
-        resolve();
-      }, 200);
+    // return new Promise((resolve) => {
+    //   setTimeout(() => {
+    //     const res = {
+    //       id: 2,
+    //       electronicFencePolygon:
+    //         Math.random() > 0.5
+    //           ? ``
+    //           : `[[[150.9196038878118,103.42855053676564],[350.91958691002293,54.42855423815479],[464.91957723268325,211.42854237860183],[222.9195977758078,225.42854132106206],[60.91961152781679,175.42854509798977]],[[325.9195890322465,259.42853875275125],[534.9195712904572,249.42853950813677],[624.9195636504521,362.42853097228016],[509.91957341268073,380.4285296125862],[309.91959039046964,345.4285322564356]]]`,
+    //     };
+    //     currentFenceId.value = res.id;
+    //     const points = res.electronicFencePolygon
+    //       ? (JSON.parse(res.electronicFencePolygon) as [])
+    //       : [];
+    //     currentFencePoints.value = points;
+    //     serverFencePoints.value = points;
+    //     resolve();
+    //   }, 200);
+    // });
+
+    return getFenceApi(param).then((res) => {
+      currentFenceId.value = res.id;
+      const points = res.electronicFencePolygon
+        ? (JSON.parse(res.electronicFencePolygon) as [])
+        : [];
+      currentFencePoints.value = points;
+      serverFencePoints.value = points;
     });
+  };
 
-    // return getFenceApi(param).then((res) => {
-    //   currentFenceId.value = res.id;
-    //   const points = res.electronicFencePolygon
-    //     ? (JSON.parse(res.electronicFencePolygon) as [])
-    //     : [];
-    //   currentFencePoints.value = points;
-    //   serverFencePoints.value = points;
-    // });
+  const saveFence = (param: SaveFenceParams) => {
+    return saveFenceApi(param).then((res) => {
+      console.log('save success', res);
+    });
   };
 
-  return { serverFencePoints, currentFencePoints, currentFenceId, getFence };
+  return { serverFencePoints, currentFencePoints, currentFenceId, getFence, saveFence };
 });
 
 export default useFenceStore;

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

@@ -1,7 +1,6 @@
-import { GetFenceParams, getFenceApi, getPresetListApi } from '@/api/camera/camera-preview';
+import { getPresetListApi } from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { ServerLines } from '../components/FenceEditor/constants';
 import { useRequest } from 'vue-hooks-plus';
 
 /** 当前电子围栏的store */