fix: 修复切换相机时电子围栏编辑状态未重置问题

src/views/cameras/algo-params-setting/AlgoParamsSetting.vue

@@ -25,7 +25,6 @@
   import { onMounted, ref, watch } from 'vue';
   import { ElIcon } from 'element-plus';
   import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
-  import { storeToRefs } from 'pinia';
   import CameraTreeCom from './components/CameraTree/CameraTree.vue';
   import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
   import useCameraDetailStore from './store/useCameraDetailStore';
@@ -36,7 +35,6 @@
   import { getCameraDeatilById } from '@/api/camera/camera-preview';
 
   const cameraDetailStore = useCameraDetailStore();
-  const { isShowFence } = storeToRefs(cameraDetailStore);
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
   const presetListStore = usePresetListStore();
@@ -46,7 +44,6 @@
   watch(
     () => cameraDetailStore.cameraId,
     async (cameraId) => {
-      isShowFence.value = false;
       fenceStore.clear();
       if (cameraId) {
         getCameraDeatilById(cameraId).then(async (res) => {

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

@@ -189,19 +189,6 @@
     });
   };
 
-  // “电子围栏设置未保存，离开后无法保存设置内容。
-
-  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: '确定',

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

@@ -12,7 +12,7 @@
     </div>
     <div class="videoAlgoListWrapper">
       <div class="cameraViewSettingWrapper" :style="{ width: domWidth + 'px', height: domHeight + 'px' }">
-        <div class="fenceEditorWrapper" v-if="fenceStore.showFenceTool">
+        <div class="fenceEditorWrapper" v-if="showFenceTool" key="cameraDetailStore.cameraId">
           <FenceEditor
             ref="fenceEditorRef"
             :dom-width="domWidth"
@@ -200,14 +200,8 @@
     });
   };
 
-  // const handleUpdateViewType = (t: ViewType) => {
-  //   console.log('viewType', t);
-  // };
-
   const showFenceTool = computed(() => {
-    if (!cameraAlgoStore.selectedAlgoId) return false;
-    if (!fenceStore.showFenceTool) return false;
-    return true;
+    return fenceStore.showFenceTool;
   });
 
   const handleAddPreset = () => {

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

@@ -1,104 +0,0 @@
-<template>
-  <!-- 电子围栏显示在前台的控制开关 -->
-  <div class="wrapper">
-    <el-checkbox label="平台是否显示电子围栏" v-model="isShowFence" @change="changeShowFence" class="checkbox" />
-    <el-cascader v-model="valuePreset" :options="options" size="small" @change="changePreset" v-if="isShowFence" />
-    <a :href="previewUrl" target="_blank" style="margin-left: 20px" v-if="previewUrl">平台相机预览</a>
-  </div>
-</template>
-<script lang="ts" setup>
-  import {
-    updateFenceDisplayStatus,
-    getCameraAlgoPresetList,
-    choosePreset,
-    getAppCameraAlgoPreset,
-  } from '@/api/camera/camera-preview';
-  import { computed, ref, watch } from 'vue';
-  import useCameraDetailStore from '../../store/useCameraDetailStore';
-  import { storeToRefs } from 'pinia';
-  import { OptionType } from './constants';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { FenceDisplayStatus } from '@/types/camera/constant';
-  const valuePreset = ref<[string, string]>();
-  const cameraDetailStore = useCameraDetailStore();
-  const { isShowFence, detail } = storeToRefs(cameraDetailStore);
-
-  const options = ref([]);
-
-  const { appPCUrl } = useGlobSetting();
-
-  const previewUrl = computed(() => {
-    const firstSceneId = detail.value?.sceneTemplateList[0]?.sceneId;
-    if (!detail.value?.workshopId || !detail.value?.code || !firstSceneId) return '';
-    return appPCUrl + `#/shop?id=${detail.value?.workshopId}&cameraCode=${detail.value?.code!}&sceneId=${firstSceneId}`;
-  });
-
-  watch(
-    () => detail.value?.id,
-    (newId) => {
-      if (!newId) return;
-      getCameraAlgoPresetList(newId).then((res) => {
-        options.value = renameKeys(res.algoInfoVOList);
-      });
-
-      getAppCameraAlgoPreset(newId).then((res) => {
-        if (res) {
-          valuePreset.value = [res.algoId, res.presetToken];
-        } else {
-          valuePreset.value = undefined;
-        }
-      });
-    },
-  );
-
-  const renameKeys = (data: any) => {
-    return data.map((item) => {
-      const newItem: OptionType = {
-        label: item.name,
-        value: item.id,
-      };
-
-      if (item.presetInfoList) {
-        newItem.children = item.presetInfoList.map((child) => ({
-          label: child.presetName,
-          value: child.presetToken,
-        }));
-      }
-
-      return newItem;
-    });
-  };
-
-  const changeShowFence = async () => {
-    if (!isShowFence.value) {
-      valuePreset.value = undefined;
-    }
-    const params = {
-      cameraCode: cameraDetailStore.detail?.code!,
-      isDisplayFence: isShowFence.value ? FenceDisplayStatus.enabled : FenceDisplayStatus.disabled,
-    };
-
-    updateFenceDisplayStatus(params);
-  };
-
-  const changePreset = (value) => {
-    console.log('value', value);
-    const params = {
-      algoId: value[0],
-      cameraId: cameraDetailStore.detail?.id!,
-      presetToken: value[1],
-    };
-    choosePreset(params);
-  };
-</script>
-<style scoped>
-  .wrapper {
-    display: flex;
-    align-items: center;
-    margin-left: 20px;
-  }
-
-  .checkbox {
-    margin-right: 10px;
-  }
-</style>

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

@@ -111,9 +111,9 @@
     },
   );
   watch(
-    () => cameraDetailStore.isShowFence,
-    (isShowFence) => {
-      isDisplayFenceInVideo.value = isShowFence;
+    () => cameraDetailStore.isDisplayFence,
+    (isDisplayFence) => {
+      isDisplayFenceInVideo.value = isDisplayFence;
     },
     {
       immediate: true,

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

@@ -33,7 +33,7 @@ const formatDateTime = (time: string) => {
 
 const useCameraDetailStore = defineStore('cameraDetail', () => {
   const cameraId = useRouteQuery('cameraId', '', { transform: (str) => Number(str) });
-  const isShowFence = ref<boolean>(false);
+  const isDisplayFence = ref<boolean>(false);
 
   const detail = ref<CameraDetailServer | null>(null);
 
@@ -48,14 +48,14 @@ const useCameraDetailStore = defineStore('cameraDetail', () => {
       resolution: newDetail.resolution || VideoResolution.HIGH_RESOLUTION,
       period: newDetail.nvrPeriod || 30,
     };
-    isShowFence.value = newDetail.isDisplayFence === FenceDisplayStatus.enabled ? true : false;
+    isDisplayFence.value = newDetail.isDisplayFence === FenceDisplayStatus.enabled ? true : false;
   };
 
   const clear = () => {
     detail.value = null;
     params.value = { ...defaultParams };
   };
-  return { detail, setDetail, cameraId, params, clear, isShowFence };
+  return { detail, setDetail, cameraId, params, clear, isDisplayFence };
 });
 
 export default useCameraDetailStore;

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

@@ -56,6 +56,8 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
     allFences.value = [];
     initialFence.value = [];
     currentFenceId.value = null;
+    currentFenceGroupId.value = null;
+    showFenceTool.value = false;
   };
 
   /** 重置到修改前的状态 */