feat: 当电子围栏和算法参数都修改时，切换算法时进行提示确认

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

@@ -49,14 +49,6 @@
   import usePresetListStore from '../../store/usePresetListStore';
   // import AddAlgoDialog from './AddAlgoDialog.vue';
   import { createAlgoSubmitParams, algoDetailToJSON } from '@/modules/algo/algo-params-edit/utils';
-  import {
-    getInferCode,
-    getAlgoType,
-    getMetaValues,
-    getExtraCommonInfo,
-    getDetectionTime,
-    getInferParam,
-  } from '@/modules/algo/algo-params-edit/utils';
 
   import { ALGO_ENABLED_STATUS } from '@/api/camera/camera-preview';
   import { ref, watchEffect } from 'vue';
@@ -73,10 +65,10 @@
   const algoSettingIsOpen = ref(false);
 
   // 是否修改过参数配置
-  const isChanged = ref(false);
+  const isParamsChanged = ref(false);
 
   const handleSettingChange = () => {
-    isChanged.value = true;
+    isParamsChanged.value = true;
   };
 
   const handleToggleSetting = (algoId: number) => {
@@ -87,6 +79,15 @@
     }
   };
 
+  /** 检测是否要离开参数设置 */
+  const checkExitParams = (): Promise<unknown> => {
+    if (isParamsChanged.value) {
+      return confirmSwitchAlgo();
+    } else {
+      return Promise.resolve();
+    }
+  };
+
   const handleSelectAlgo = (algoId: number, e) => {
     // 如果点击的是它自己，那么取消选中当前的算法
     if (selectedAlgoId.value === algoId) {
@@ -97,20 +98,14 @@
     const switchToNewAlgo = (_algoId: number) => {
       selectedAlgoId.value = _algoId;
       algoSettingIsOpen.value = false;
-      isChanged.value = false;
+      isParamsChanged.value = false;
       fenceStore.showFenceTool = false;
     };
-
-    // 如果算法设置有修改，切换到其他卡片时，要先确认提示再切换
-    if (isChanged.value) {
-      confirmSwitchAlgo()
-        .then(() => {
-          switchToNewAlgo(algoId);
-        })
-        .catch(() => {});
-    } else {
-      switchToNewAlgo(algoId);
-    }
+    /** 确认电子围栏是否要离开，如果确认离开，再确认算法参数配置要不要离开 */
+    fenceStore
+      .confirmExitFence()
+      .then(checkExitParams)
+      .then(() => switchToNewAlgo(algoId));
   };
 
   watchEffect(() => {
@@ -157,7 +152,7 @@
     const initialStatus = detail.status;
     detail.status = status;
     selectedAlgoId.value = algoId;
-    isChanged.value = false;
+    isParamsChanged.value = false;
     algoSettingIsOpen.value = false;
     updateCameraAlgoRelStatus(params)
       .then(() => {
@@ -176,7 +171,7 @@
       updateCameraAlgoApi({ ...newParam, id: param.id }).then(() => {
         ElMessage.success('更新成功');
         getCameraAlgoList(cameraId);
-        isChanged.value = false;
+        isParamsChanged.value = false;
       });
     }
   };
@@ -191,12 +186,27 @@
     });
   };
 
-  const confirmSwitchAlgo = () => {
+  // “电子围栏设置未保存，离开后无法保存设置内容。
+
+  const confirmExitFence = () => {
+    return ElMessageBox.confirm('电子围栏设置未保存，离开后无法保存设置内容。', '', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      dangerouslyUseHTMLString: true,
+    }).then(() => {
+      return true;
+    });
+  };
+
+  const confirmSwitchAlgo = (): Promise<boolean> => {
     return ElMessageBox.confirm('<strong>确认切换算法吗?</strong><br />切换后未保存的算法配置将被丢弃。', '', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
       dangerouslyUseHTMLString: true,
+    }).then(() => {
+      return true;
     });
   };
 
@@ -205,12 +215,12 @@
       ElMessage.success('删除成功');
       getCameraAlgoList(cameraDetailStore.cameraId);
       selectedAlgoId.value = undefined;
-      isChanged.value = false;
+      isParamsChanged.value = false;
     });
   };
 
   const handleCancel = () => {
-    isChanged.value = false;
+    isParamsChanged.value = false;
     selectedAlgoId.value = undefined;
   };
 </script>

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

@@ -50,7 +50,6 @@
     <FenceToolbar
       :is-edit="showFenceTool"
       @remove="handleRemove"
-      @toggle-editable="toggleEditable"
       @toggle-range="toggleRange"
       @select="handleSelectFenceList"
       @toggle-fence-status="paramsSettingFn.toggleFenceStatus"
@@ -60,9 +59,6 @@
   </div>
 
   <div class="cameraParamsSettingWrapper">
-    <!-- <div class="cameraParamsSetting">
-      <CameraParams />
-    </div> -->
     <div class="algorithmsSetting"> <AlgorithmsSetting /> </div>
   </div>
 </template>
@@ -133,16 +129,6 @@
     fenceEditorRef.value?.remove();
   };
 
-  /** 退出编辑模式 */
-  const toggleEditable = (val: boolean) => {
-    fenceStore.showFenceTool = val;
-    if (val) {
-      fenceEditorRef.value?.setEditMode();
-    } else {
-      fenceEditorRef.value?.exitEditMode();
-    }
-  };
-
   /** 从图中选中电子围栏多边形 */
   const handleSelectFencePolygon = (nextFenceId: number) => {
     fenceStore.currentFenceId = nextFenceId;
@@ -209,7 +195,7 @@
       id: selectedAlgoDetail.id!,
     };
     updateCameraAlgoApi(newParam).then(() => {
-      ElMessage.success('更新成功');
+      ElMessage.success('修改成功');
       getCameraAlgoList(cameraId);
     });
   };

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

@@ -42,32 +42,11 @@
         :detail="selectedDetail"
       />
     </div>
-
-    <!-- <div class="toolbar"> -->
-    <!-- <div class="fenceDrawingTip" v-if="isEdit">
-        {{ cameraAlgoStore.selectedAlgoDetail?.algoInfo?.name }}算法电子围栏绘制中
-      </div> -->
-    <!-- <template v-if="props.isEdit"> -->
-    <!-- <ToolbarIcon
-        :src="deleteIcon"
-        :active="false"
-        @click="emits('toggleFence')"
-        tip="检测范围反选"
-      /> -->
-    <!-- <ToggleFenceStatus @click="emits('toggleRange')" />
-        <ToolbarIcon :src="deleteIcon" :active="false" @click="emits('remove')" tip="删除电子围栏" />
-        <ToolbarIcon :src="saveIcon" :active="false" @click="emits('save')" tip="保存电子围栏" />
-      </template> -->
-
-    <!-- <ElButton type="primary" size="small" @click="toggleEdit">{{
-        props.isEdit ? '退出编辑' : '编辑电子围栏'
-      }}</ElButton> -->
-    <!-- </div> -->
   </div>
 </template>
 <script setup lang="ts">
   import { computed, defineEmits, ref, watch } from 'vue';
-  import { ElSwitch } from 'element-plus';
+  import { ElMessage, ElSwitch } from 'element-plus';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import PresetSelect from '../PresetSelect/PresetSelect.vue';
   import FenceNameItem from './FenceNameItem.vue';
@@ -97,7 +76,6 @@
   const { selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
 
   const emits = defineEmits<{
-    // (e: 'toggleEditable', editState: boolean): unknown;
     (e: 'toggleRange'): unknown;
     (e: 'remove'): unknown;
     (e: 'cancel'): unknown;
@@ -151,8 +129,6 @@
   };
 
   const handleUpdateRegion = (val: string) => {
-    console.log('isFenceRegionOut', isFenceRegionOut.value);
-    console.log('region', val);
     emits('toggleRange');
   };
 
@@ -199,7 +175,9 @@
         cameraId,
         presetToken,
       };
-      choosePreset(params);
+      choosePreset(params).then((res) => {
+        ElMessage.success('修改成功');
+      });
     }
   };
 

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

@@ -1,26 +1,17 @@
-import {
-  GetFenceParams,
-  getFenceApi,
-  saveFenceApi,
-  SaveFenceParams,
-  editFenceApi,
-  UpdateFenceParams,
-  deleteFenceApi,
-  DeleteFenceParams,
-  createCameraFence,
-} from '@/api/camera/camera-preview';
+import { GetFenceParams, getFenceApi } from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { ServerLine, ServerLineInfos } from '../components/FenceEditor/constants';
 import safeParse from '@/utils/safeParse';
+import { ElMessageBox } from 'element-plus';
 
 /** 当前电子围栏的store */
 export const useFenceStore = defineStore('fencePolygonStore', () => {
+  /** 初始的电子围栏。用于取消时恢复数据 */
+  const initialFence = ref<ServerLineInfos>([]);
   /** 当前相机-预置位-算法对应的所有的电子围栏 */
-  const allFences = ref<ServerLineInfos>([]);
+  const allFences = ref<ServerLineInfos>(initialFence.value);
 
-  /** 初始的电子围栏。用于取消时恢复数据 */
-  let initialFence = <ServerLineInfos>[];
   /** 当前正在操作的电子围栏id */
   const currentFenceId = ref<number | null>(null);
 
@@ -32,6 +23,9 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
   // 是否展示电子围栏的工具栏
   const showFenceTool = ref(false);
 
+  /** 电子围栏参数是否修改过 */
+  const isChanged = computed(() => JSON.stringify(initialFence.value) !== JSON.stringify(allFences.value));
+
   /** 获取电子围栏 */
   const getFence = (param: GetFenceParams) => {
     loading.value = true;
@@ -46,7 +40,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;
+        initialFence.value = newFence;
         currentFenceGroupId.value = res.id;
       })
       .catch(() => {
@@ -60,23 +54,40 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
 
   const clear = () => {
     allFences.value = [];
-    initialFence = [];
+    initialFence.value = [];
     currentFenceId.value = null;
   };
 
   /** 重置到修改前的状态 */
   const reset = () => {
-    allFences.value = initialFence;
+    allFences.value = initialFence.value;
+  };
+
+  /** 确认是否要离开电子围栏 */
+  const confirmExitFence = (): Promise<unknown> => {
+    if (isChanged.value) {
+      return ElMessageBox.confirm('电子围栏设置未保存，离开后无法保存设置内容。', '', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true,
+      });
+    } else {
+      return Promise.resolve(true);
+    }
   };
 
   return {
     allFences,
+    isChanged,
     currentFenceId,
-    getFence,
-    reset,
+    currentFenceGroupId,
     clear,
     showFenceTool,
-    currentFenceGroupId,
+
+    getFence,
+    reset,
+    confirmExitFence,
   };
 });