feat: 完成电子围栏的取消和保存功能

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

@@ -8,7 +8,7 @@
           v-for="(item, index) in props.algoList"
           :key="index"
           class="algo-item"
-          :class="{ active: selectedIds.includes(item.id), disabled: true }"
+          :class="{ active: selectedIds.includes(item.id), disabled: !hasAddPermission }"
           @click="handleAlgoSelect(item)"
         >
           <span class="algo-name">{{ item.name }}</span>
@@ -44,7 +44,7 @@
     }
   };
 
-  const hasAddPermission = computed(() => false && userStore.checkPermission(PERM_ALGO.CONFIG_ADD));
+  const hasAddPermission = computed(() => userStore.checkPermission(PERM_ALGO.CONFIG_ADD));
 </script>
 
 <style lang="less" scoped>

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

@@ -19,7 +19,7 @@
             :canvas-size="{ width: canvasWidth, height: canvasHeight }"
             :line-points="fenceStore.allFences"
             :fence-id="fenceStore.currentFenceId"
-            @save="handleSaveFence"
+            @save="handleSaveFenceToLocal"
             @select="handleSelectFencePolygon"
           />
         </div>
@@ -54,6 +54,8 @@
       @toggle-range="toggleRange"
       @select="handleSelectFenceList"
       @toggle-fence-status="paramsSettingFn.toggleFenceStatus"
+      @save="handleSaveFenceToServer"
+      @cancel="handleCancelFenceEdit"
     />
   </div>
 
@@ -151,14 +153,22 @@
     fenceStore.currentFenceId = nextFenceId;
   };
 
-  const handleSaveFence = (data: { fenceId?: number; polygon: FencePolygonPoints }) => {
+  const handleSaveFenceToServer = () => {
+    paramsSettingFn.saveFenceToServer();
+  };
+
+  const handleCancelFenceEdit = () => {
+    paramsSettingFn.reset();
+  };
+
+  /** 将数据保存到前端本地 */
+  const handleSaveFenceToLocal = (data: { fenceId?: number; polygon: FencePolygonPoints }) => {
     console.log('提交的fenceId', data);
     const { fenceId, polygon } = data;
 
     const cameraId = cameraDetailStore.cameraId;
     const algoId = cameraAlgoStore.selectedAlgoId;
     const presetToken = presetStore.currentPresetToken;
-    const fenceGroupId = fenceStore.currentFenceGroupId;
     if (!cameraId) {
       ElMessage.error('未选中相机');
       return;
@@ -171,7 +181,6 @@
       ElMessage.error('未选中预置位');
       return;
     }
-    const param = { cameraId: cameraId, algoId: algoId, presetToken };
 
     if (!fenceId) {
       // 不存在的话，就新建电子围栏

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

@@ -55,9 +55,9 @@
   }
   .fenceItem {
     position: relative;
-    padding: 15px;
+    padding: 8px;
     border: 1px solid #ccc;
-    margin: 5px 0;
+    margin: 8px 0;
     cursor: pointer;
   }
   .popoverMenu {

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

@@ -30,6 +30,10 @@
         @edit="handleEditFenceInfo(item)"
       />
     </div>
+    <div v-if="fenceStore.allFences.length > 0" style="text-align: right">
+      <ElButton size="small" @click="handleCancelFence">取消</ElButton>
+      <ElButton type="primary" size="small" @click="handleSaveFence">保存</ElButton>
+    </div>
     <div>
       <EditFenceDialog
         v-if="showEditFenceDialog"
@@ -63,11 +67,7 @@
 </template>
 <script setup lang="ts">
   import { computed, defineEmits, ref, watch } from 'vue';
-  import { ElButton, ElSwitch } from 'element-plus';
-  import ToolbarIcon from '../ToolbarIcon/ToolbarIcon.vue';
-  import saveIcon from '@/assets/images/camera/save.png';
-  import deleteIcon from '@/assets/images/camera/delete.png';
-  import ToggleFenceStatus from './ToggleFenceStatus.vue';
+  import { ElSwitch } from 'element-plus';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import PresetSelect from '../PresetSelect/PresetSelect.vue';
   import FenceNameItem from './FenceNameItem.vue';
@@ -100,6 +100,7 @@
     // (e: 'toggleEditable', editState: boolean): unknown;
     (e: 'toggleRange'): unknown;
     (e: 'remove'): unknown;
+    (e: 'cancel'): unknown;
     (e: 'save'): unknown;
     (e: 'select', fenceId: number): unknown;
     /** 切换电子围栏打开关闭状态 */
@@ -138,6 +139,13 @@
     },
   );
 
+  const handleSaveFence = () => {
+    emits('save');
+  };
+  const handleCancelFence = () => {
+    emits('cancel');
+  };
+
   const handleSelectFence = (nextFenceId: number) => {
     emits('select', nextFenceId);
   };
@@ -237,8 +245,9 @@
     padding: 10px;
   }
   .fenceListWrapper {
-    max-height: 435px;
+    height: 365px;
     overflow-y: auto;
+    margin-bottom: 10px;
   }
 
   .fenceTitle {

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

@@ -82,6 +82,8 @@ export const useParamsSettingFn = () => {
       algoId,
       presetToken,
       electronicFencePolygon: JSON.stringify(fenceStore.allFences),
+    }).then(() => {
+      ElMessage.success('保存成功');
     });
   };
 
@@ -103,16 +105,19 @@ export const useParamsSettingFn = () => {
       }
       return x;
     });
-    updateBatchCameraFence();
+    // updateBatchCameraFence();
   };
 
   const deleteFence = (fenceId: number) => {
     const allFences = fenceStore.allFences;
     fenceStore.allFences = allFences.filter((x) => x.id !== fenceId);
-    updateBatchCameraFence();
+    // updateBatchCameraFence();
   };
 
-  return { toggleFenceStatus, editFence, createFence, deleteFence };
+  /** 将数据保存到后端 */
+  const saveFenceToServer = updateBatchCameraFence;
+
+  return { toggleFenceStatus, editFence, createFence, deleteFence, saveFenceToServer, reset: fenceStore.reset };
 };
 
 export default useParamsSettingFn;

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

@@ -18,6 +18,9 @@ import safeParse from '@/utils/safeParse';
 export const useFenceStore = defineStore('fencePolygonStore', () => {
   /** 当前相机-预置位-算法对应的所有的电子围栏 */
   const allFences = ref<ServerLineInfos>([]);
+
+  /** 初始的电子围栏。用于取消时恢复数据 */
+  let initialFence = <ServerLineInfos>[];
   /** 当前正在操作的电子围栏id */
   const currentFenceId = ref<number | null>(null);
 
@@ -43,6 +46,7 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
           return { ...x, polygon: typeof x.polygon === 'string' ? (safeParse(x.polygon) as ServerLine) : x.polygon };
         }) as unknown as ServerLineInfos;
         allFences.value = newFence;
+        initialFence = newFence;
         currentFenceGroupId.value = res.id;
       })
       .catch(() => {
@@ -54,35 +58,25 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
       });
   };
 
-  const deleteFence = (param: DeleteFenceParams) => {
-    const { fenceId } = param;
-    if (currentFenceId.value === fenceId) {
-      currentFenceId.value = null;
-    }
-    allFences.value = allFences.value.filter((x) => x.id !== fenceId);
-    return deleteFenceApi(param);
-  };
-
-  // 批量更新电子围栏
-  const batchUpdateFence = (param: UpdateFenceParams[]) => {
-    // return Promise.all(param.map((x) => editFence(x)));
-  };
-
   const clear = () => {
     allFences.value = [];
+    initialFence = [];
     currentFenceId.value = null;
   };
 
+  /** 重置到修改前的状态 */
+  const reset = () => {
+    allFences.value = initialFence;
+  };
+
   return {
     allFences,
     currentFenceId,
     getFence,
-
-    deleteFence,
+    reset,
     clear,
     showFenceTool,
     currentFenceGroupId,
-    batchUpdateFence,
   };
 });