完成新版本的电子围栏编辑 新增和删除，待增加提交和取消按钮功能

src/api/camera/camera-preview.ts

@@ -209,7 +209,7 @@ export interface GetFenceParams {
 }
 
 /** 查询电子围栏 */
-export const getFenceApi = (params: GetFenceParams): Promise<{ id: number; electronicFence: string }> => {
+export const getFenceApi = (params: GetFenceParams): Promise<{ id: number; electronicFencePolygon: string }> => {
   return http.request({
     url: '/admin/algo/queryFence',
     method: 'POST',
@@ -249,7 +249,7 @@ export interface SaveFenceParams {
   fenceName?: string;
 
   /*电子围栏点位信息 */
-  fencePolygon: string;
+  electronicFencePolygon: string;
 }
 export const saveFenceApi = (data: SaveFenceParams) => {
   return http.request({
@@ -537,3 +537,55 @@ export const getCameraDeatilById = (id: number) => {
     method: 'post',
   });
 };
+
+interface UpdateBatchCameraFenceParam {
+  /* 关联的id，不等于algoId */
+  id: number;
+
+  /*摄像头id */
+  cameraId: number;
+
+  /*算法id */
+  algoId: number;
+
+  /*摄像头预置位token，null_default：没有预置位的默认值 */
+  presetToken: string;
+
+  /*电子围栏信息 */
+  electronicFencePolygon?: string;
+
+  /*0-启用/1-禁用 */
+  isDisabled?: number;
+}
+
+/** 编辑电子围栏信息 */
+export const updateBatchCameraFenceApi = (data: UpdateBatchCameraFenceParam) => {
+  return http.request<CameraTree[]>({
+    url: '/admin/algo/updateCameraAlgoPresetRel',
+    method: 'post',
+    data,
+  });
+};
+
+interface CreateCameraFenceParam {
+  /*摄像头id */
+  cameraId: number;
+
+  /*算法id */
+  algoId: number;
+
+  /*摄像头预置位token，null_default：没有预置位的默认值 */
+  presetToken: string;
+
+  /*电子围栏信息 */
+  electronicFencePolygon?: string;
+}
+
+/** 新建电子围栏 */
+export const createCameraFence = (data: CreateCameraFenceParam) => {
+  return http.request<CameraTree[]>({
+    url: '/admin/algo/updateCameraAlgoPresetRel',
+    method: 'post',
+    data,
+  });
+};

src/views/cameras/algo-params-setting/components/CameraViewSetting/CameraViewSetting.vue

@@ -158,6 +158,7 @@
     const cameraId = cameraDetailStore.cameraId;
     const algoId = cameraAlgoStore.selectedAlgoId;
     const presetToken = presetStore.currentPresetToken;
+    const fenceGroupId = fenceStore.currentFenceGroupId;
     if (!cameraId) {
       ElMessage.error('未选中相机');
       return;
@@ -174,10 +175,10 @@
 
     if (!fenceId) {
       // 不存在的话，就新建电子围栏
-      fenceStore.createFence({ ...param, fencePolygon: JSON.stringify(polygon) });
+      paramsSettingFn.createFence(polygon);
     } else {
       // 否则修改电子围栏
-      fenceStore.editFence({ ...param, fencePolygon: JSON.stringify(polygon), fenceId });
+      paramsSettingFn.editFence({ polygon, id: fenceId });
     }
   };
 

src/views/cameras/algo-params-setting/components/FenceEditor/constants.ts

@@ -38,7 +38,7 @@ export type ServerLinePoint = [number, number];
 /** 一个多边形的所有点坐标 */
 export type ServerLine = ServerLinePoint[];
 
-export type ServerLineInfo =  { id: number; name: string; label: string; polygon: ServerLine }
+export type ServerLineInfo = { id: number; name?: string; label?: string; polygon?: ServerLine };
 
 /** 图上所有的多边形 */
 export type ServerLineInfos = ServerLineInfo[];

src/views/cameras/algo-params-setting/components/FenceToolbar/FenceToolbar.vue

@@ -81,6 +81,7 @@
   import { choosePreset, updateFenceDisplayStatus } from '@/api/camera/camera-preview';
   import { FenceDisplayStatus } from '@/types/camera/constant';
   import { useGlobSetting } from '@/hooks/setting';
+  import useParamsSettingFn from '../../hooks/useParamsSettingFn';
   const cameraAlgoStore = useCameraAlgoStore();
 
   const fenceStore = useFenceStore();
@@ -91,6 +92,8 @@
   const showEditFenceDialog = ref(false);
   const selectedDetail = ref<ServerLineInfo | null>(null);
 
+  const paramsSettingFn = useParamsSettingFn();
+
   const { selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
 
   const emits = defineEmits<{
@@ -156,30 +159,19 @@
   };
 
   const handleDeleteFence = (fenceId: number) => {
-    const cameraId = cameraDetailStore.cameraId;
-    const algoId = cameraAlgoStore.selectedAlgoId!;
-    const presetToken = presetStore.currentPresetToken;
-    fenceStore.deleteFence({ cameraId, algoId, presetToken, fenceId });
+    paramsSettingFn.deleteFence(fenceId);
   };
 
   const handleEditSubmit = (data: { label: string; name: string }) => {
-    const cameraId = cameraDetailStore.cameraId;
-    const algoId = cameraAlgoStore.selectedAlgoId!;
-    const presetToken = presetStore.currentPresetToken;
     const fenceId = selectedDetail.value?.id;
     if (!fenceId) return;
-    fenceStore
-      .editFence({
-        cameraId,
-        algoId,
-        presetToken,
-        fenceId: fenceId,
-        fenceLabel: data.label,
-        fenceName: data.name,
-      })
-      .then(() => {
-        handleEditCancel();
-      });
+    paramsSettingFn.editFence({
+      id: fenceId,
+      label: data.label,
+      name: data.name,
+    });
+
+    handleEditCancel();
   };
 
   const handleUpdateDisplay = (nextStatus: boolean) => {

src/views/cameras/algo-params-setting/hooks/useParamsSettingFn.ts

@@ -1,5 +1,12 @@
-import { FENCE_ENBALED_STATUS, updateCameraAlgoApi } from '@/api/camera/camera-preview';
+import {
+  createCameraFence,
+  FENCE_ENBALED_STATUS,
+  updateBatchCameraFenceApi,
+  updateCameraAlgoApi,
+} from '@/api/camera/camera-preview';
 import { ElMessage } from 'element-plus';
+import { ServerLineInfo, ServerLineInfos } from '../components/FenceEditor/constants';
+import { FencePolygonPoints } from '../components/FenceEditorV2/types';
 import useCameraAlgoStore from '../store/useCameraAlgoStore';
 import useCameraDetailStore from '../store/useCameraDetailStore';
 import useFenceStore from '../store/useFenceStore';
@@ -37,7 +44,75 @@ export const useParamsSettingFn = () => {
     });
   };
 
-  return { toggleFenceStatus };
+  /** 新建电子围栏 */
+  // const createFence = (param: SaveFenceParams) => {
+  //   // 还需要把名字加上。
+  //   // return saveFenceApi({ fenceName: '电子围栏', ...param }).then((res) => {
+  //   //   console.log('save success', res);
+  //   //   currentFenceId.value = res;
+  //   //   getFence(param);
+  //   // });
+
+  //   const lastItemId = allFences.value[allFences.value.length - 1]?.id || 1;
+
+  //   allFences.value = [...allFences.value, { name: '电子围栏', ...param, id: lastItemId + 1 }];
+  //   createCameraFence({ ...param, electronicFencePolygon: JSON.stringify(allFences.value) });
+  // };
+
+  const updateBatchCameraFence = () => {
+    const cameraId = cameraDetailStore.cameraId;
+    const algoId = cameraAlgoStore.selectedAlgoId;
+    const presetToken = presetStore.currentPresetToken;
+    if (!cameraId) {
+      ElMessage.error('未选中相机');
+      return;
+    }
+    if (!algoId) {
+      ElMessage.error('未选中算法');
+      return;
+    }
+    if (!presetToken) {
+      ElMessage.error('未选中预置位');
+      return;
+    }
+
+    updateBatchCameraFenceApi({
+      id: fenceStore.currentFenceGroupId!,
+      cameraId,
+      algoId,
+      presetToken,
+      electronicFencePolygon: JSON.stringify(fenceStore.allFences),
+    });
+  };
+
+  // 在前端本地创建单个电子围栏
+  const createFence = (fencePolygon: FencePolygonPoints) => {
+    const allFences = fenceStore.allFences;
+    const lastItemId = allFences[allFences.length - 1]?.id || 1;
+    fenceStore.allFences = [...allFences, { polygon: fencePolygon, name: '电子围栏', id: lastItemId + 1 }];
+    // updateBatchCameraFence();
+  };
+
+  /** 在前端本地修改电子围栏信息 */
+  const editFence = (fencePolygon: ServerLineInfo) => {
+    const allFences = fenceStore.allFences;
+
+    fenceStore.allFences = allFences.map((x) => {
+      if (x.id === fencePolygon.id) {
+        return { ...x, ...fencePolygon };
+      }
+      return x;
+    });
+    updateBatchCameraFence();
+  };
+
+  const deleteFence = (fenceId: number) => {
+    const allFences = fenceStore.allFences;
+    fenceStore.allFences = allFences.filter((x) => x.id !== fenceId);
+    updateBatchCameraFence();
+  };
+
+  return { toggleFenceStatus, editFence, createFence, deleteFence };
 };
 
 export default useParamsSettingFn;

src/views/cameras/algo-params-setting/store/useFenceStore.ts

@@ -7,6 +7,7 @@ import {
   UpdateFenceParams,
   deleteFenceApi,
   DeleteFenceParams,
+  createCameraFence,
 } from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
@@ -34,10 +35,12 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
     if (!param.algoId || !param.cameraId || !param.presetToken) return;
     return getFenceApi(param)
       .then((res) => {
-        const fence = res.electronicFence ? (JSON.parse(res.electronicFence) as []) : ([] as { polygon: string }[]);
+        const fence = res.electronicFencePolygon
+          ? (JSON.parse(res.electronicFencePolygon) as [])
+          : ([] as { polygon: string }[]);
         // const pointsJSON = points.poly
         const newFence = fence.map((x) => {
-          return { ...x, polygon: safeParse(x.polygon) as ServerLine };
+          return { ...x, polygon: typeof x.polygon === 'string' ? (safeParse(x.polygon) as ServerLine) : x.polygon };
         }) as unknown as ServerLineInfos;
         allFences.value = newFence;
         currentFenceGroupId.value = res.id;
@@ -51,22 +54,6 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
       });
   };
 
-  /** 新建电子围栏 */
-  const createFence = (param: SaveFenceParams) => {
-    // 还需要把名字加上。
-
-    return saveFenceApi({ fenceName: '电子围栏', ...param }).then((res) => {
-      console.log('save success', res);
-      currentFenceId.value = res;
-      getFence(param);
-    });
-  };
-
-  /** 修改电子围栏信息 */
-  const editFence = (param: UpdateFenceParams) => {
-    return editFenceApi(param).then(() => getFence(param));
-  };
-
   const deleteFence = (param: DeleteFenceParams) => {
     const { fenceId } = param;
     if (currentFenceId.value === fenceId) {
@@ -76,6 +63,11 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
     return deleteFenceApi(param);
   };
 
+  // 批量更新电子围栏
+  const batchUpdateFence = (param: UpdateFenceParams[]) => {
+    // return Promise.all(param.map((x) => editFence(x)));
+  };
+
   const clear = () => {
     allFences.value = [];
     currentFenceId.value = null;
@@ -85,12 +77,12 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
     allFences,
     currentFenceId,
     getFence,
-    createFence,
-    editFence,
+
     deleteFence,
     clear,
     showFenceTool,
     currentFenceGroupId,
+    batchUpdateFence,
   };
 });