feat: 修复切换显示电子围栏工具栏的逻辑

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

@@ -9,8 +9,8 @@
         </el-tooltip>
         <div class="algoName" v-else>{{ label }}</div>
         <div class="toolbar">
-          <div @click.stop="() => {}">
-            <ElectronicFenceIcon :active="isFenceOpen" @click="updateFenceStatus" />
+          <div>
+            <ElectronicFenceIcon :active="isFenceOpen" @click.stop="updateFenceStatus" />
           </div>
           <AlgoSettingIcon
             class="divideLine algoSettingIcon"
@@ -45,7 +45,7 @@
     label: string;
     /** 算法是否开启 */
     isAlgoOpen: boolean;
-    /** 电子围栏是否打开 */
+    /** 电子围栏是否处于打开的状态 */
     isFenceOpen: boolean;
   }
 
@@ -55,7 +55,7 @@
 
   const emits = defineEmits<{
     (e: 'toggleAlgo', isOpen: boolean): unknown;
-    (e: 'toggleFence', isOpen: boolean): unknown;
+    (e: 'toggleFenceTool'): unknown;
     (e: 'remove'): unknown;
     (e: 'toggleSetting'): unknown;
   }>();
@@ -64,7 +64,7 @@
   };
 
   const updateFenceStatus = () => {
-    emits('toggleFence', !props.isFenceOpen);
+    emits('toggleFenceTool');
   };
 
   const hasDeletePermission = () => userStore.checkPermission(PERM_ALGO.CONFIG_DELETE);

src/views/cameras/algo-params-setting/components/AlgoSwitchCard/ElectronicFenceIcon.vue

@@ -1,9 +1,10 @@
 <!-- 电子围栏开关按钮 -->
 <template>
   <div>
-    <el-tooltip :content="props.active ? '关闭电子围栏' : '开启电子围栏'">
+    <!-- <el-tooltip :content="props.active ? '关闭电子围栏' : '开启电子围栏'">
       <svg-icon icon-name="electronic-fence" :color="color" />
-    </el-tooltip>
+    </el-tooltip> -->
+    <svg-icon icon-name="electronic-fence" :color="color" />
   </div>
 </template>
 <script lang="ts" setup>

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

@@ -13,7 +13,7 @@
           @remove="confirmRemove(item.algoId, item)"
           @toggle-algo="confirmToggleAlgoOpen(item, $event)"
           :is-fence-open="item.electronicFence === FENCE_ENBALED_STATUS.enabled"
-          @toggle-fence="confirmToggleFence(item, $event)"
+          @toggle-fence-tool="toggleFenceTool(item, $event)"
           @toggle-setting="handleToggleSetting(item.algoId)"
         />
       </div>
@@ -88,6 +88,7 @@
   };
 
   const handleSelectAlgo = (algoId: number, e) => {
+    // 如果点击的是它自己，那么取消选中当前的算法
     if (selectedAlgoId.value === algoId) {
       return;
     }
@@ -97,6 +98,7 @@
       selectedAlgoId.value = _algoId;
       algoSettingIsOpen.value = false;
       isChanged.value = false;
+      fenceStore.showFenceTool = false;
     };
 
     // 如果算法设置有修改，切换到其他卡片时，要先确认提示再切换
@@ -162,6 +164,11 @@
     }
   });
 
+  const toggleFenceTool = () => {
+    const nextShowFenceTool = !fenceStore.showFenceTool;
+    fenceStore.showFenceTool = nextShowFenceTool;
+  };
+
   const confirmToggleAlgoOpen = (detail: CameraAlgoItem, algoStatus: boolean) => {
     if (detail.algoId !== selectedAlgoId.value && algoSettingIsOpen.value) {
       confirmSwitchAlgo().then(() => {
@@ -199,16 +206,7 @@
       });
   };
 
-  const confirmToggleFence = (detail: CameraAlgoItem, fenceStatus: boolean) => {
-    if (detail.algoId !== selectedAlgoId.value && algoSettingIsOpen.value) {
-      confirmSwitchAlgo().then(() => {
-        handleToggleFence(detail, fenceStatus);
-      });
-    } else {
-      handleToggleFence(detail, fenceStatus);
-    }
-  };
-
+  // 开启关闭电子围栏
   const handleToggleFence = (detail: CameraAlgoItem, fenceStatus: boolean) => {
     const cameraId = cameraDetailStore.cameraId;
     const algoId = detail.algoId;

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="cameraAlgoStore.selectedAlgoDetail.electronicFenceBool">
+        <div class="fenceEditorWrapper" v-if="fenceStore.showFenceTool">
           <FenceEditor
             ref="fenceEditorRef"
             :dom-width="domWidth"
@@ -33,7 +33,11 @@
       /></div>
     </div>
 
-    <div class="presetAddWrapper" :class="{ hidePresetControlCls: isEdit }" v-if="!!cameraDetailStore.detail?.isPtz">
+    <div
+      class="presetAddWrapper"
+      :class="{ hidePresetControlCls: showFenceTool }"
+      v-if="!!cameraDetailStore.detail?.isPtz"
+    >
       <CameraViewScale />
       <CameraDirectionControl />
       <ElButton type="primary" @click="handleAddPreset" size="small" style="margin-top: 20px; width: 100px"
@@ -42,11 +46,10 @@
       <AddPresetModal v-if="addPresetModalVisible" @close="handleClose" @ok="handleAddPresetOk" />
     </div>
   </div>
-  <div class="presetWrapper" :style="{ display: drawable ? 'block' : 'none' }">
+  <div class="presetWrapper" :style="{ display: showFenceTool ? 'block' : 'none' }">
     <FenceToolbar
-      :is-edit="isEdit"
+      :is-edit="showFenceTool"
       @remove="handleRemove"
-      @save="handleSave"
       @toggle-editable="toggleEditable"
       @toggle-range="toggleRange"
       @select="handleSelectFenceList"
@@ -137,11 +140,9 @@
     fenceEditorRef.value?.selectFence(fenceId);
   };
 
-  const isEdit = ref(false);
-
   /** 退出编辑模式 */
   const toggleEditable = (val: boolean) => {
-    isEdit.value = val;
+    fenceStore.showFenceTool = val;
     if (val) {
       fenceEditorRef.value?.setEditMode();
     } else {
@@ -216,36 +217,13 @@
   //   console.log('viewType', t);
   // };
 
-  const drawable = computed(() => {
+  const showFenceTool = computed(() => {
     if (!presetStore.currentPresetToken) return false;
     if (!cameraAlgoStore.selectedAlgoId) return false;
-    if (!cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool) return false;
+    if (!fenceStore.showFenceTool) return false;
     return true;
   });
 
-  watchEffect(() => {
-    const electronicFenceBool = cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool;
-
-    if (presetStore.currentPresetToken && cameraAlgoStore.selectedAlgoId && electronicFenceBool) {
-      const points = fenceStore.allFences || [];
-      if (!points) {
-        fenceEditorRef.value?.clear();
-        return;
-      }
-
-      /** 先清空原有的 */
-      fenceEditorRef.value?.clear();
-      // fenceEditorRef.value?.createLines(rawLinePoints);
-      fenceEditorRef.value?.setEditMode();
-      isEdit.value = true;
-      return;
-    } else {
-      fenceEditorRef.value?.clear();
-      fenceEditorRef.value?.exitEditMode();
-      isEdit.value = false;
-    }
-  });
-
   const handleAddPreset = () => {
     addPresetModalVisible.value = true;
   };
@@ -306,7 +284,7 @@
   .algorithmsSetting {
     flex: 1;
     min-height: 300px;
-    margin-left: 15px;
+    /* margin-left: 15px; */
     /* border-left: 1px solid #ccc; */
     /* padding-left: 15px; */
   }

src/views/cameras/algo-params-setting/components/FenceEditorV2/FenceEditor.vue

@@ -45,7 +45,7 @@
     /** dom的真实尺寸 */
     domWidth: number;
     /** 当前选中的是哪个分组 */
-    fenceId: number;
+    fenceId?: number | null;
   }>();
 
   // 保存修改后的电子围栏, fenceId为空表示新建的,否则表示编辑已存在的
@@ -60,7 +60,7 @@
   });
 
   const stageRef = ref();
-  const isEdit = ref(false);
+  const isEdit = ref(true);
 
   const fenceGroups = ref<FenceGroup[]>([]);
 
@@ -102,6 +102,9 @@
         currentGroupId.value = groupId;
       }
     },
+    {
+      immediate: true,
+    },
   );
 
   onMounted(() => {

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

@@ -8,7 +8,8 @@
 
     <div style="display: flex">
       <ElCheckbox label="检测围栏外部" v-model="isFenceRegionOut" @update:modelValue="handleUpdateRegion" />
-      <ElCheckbox label="前台画面显示" />
+      <ElCheckbox label="前台画面显示" v-model="isDisplayFenceInVideo" @update:modelValue="handleUpdateDisplay" />
+      <a :href="previewUrl" target="_blank" style="margin-left: 20px" v-if="previewUrl && false">平台相机预览</a>
     </div>
     <div class="fenceListWrapper">
       <FenceNameItem
@@ -53,7 +54,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { defineEmits, ref, watch } from 'vue';
+  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';
@@ -69,6 +70,9 @@
   import { ServerLineInfo } from '../FenceEditor/constants';
   import { storeToRefs } from 'pinia';
   import { RegionJudge } from './constants';
+  import { choosePreset, updateFenceDisplayStatus } from '@/api/camera/camera-preview';
+  import { FenceDisplayStatus } from '@/types/camera/constant';
+  import { useGlobSetting } from '@/hooks/setting';
   const cameraAlgoStore = useCameraAlgoStore();
 
   const fenceStore = useFenceStore();
@@ -90,6 +94,17 @@
   }>();
 
   const isFenceRegionOut = ref(false);
+  const isDisplayFenceInVideo = ref(false);
+
+  const { detail } = storeToRefs(cameraDetailStore);
+
+  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(
     () => selectedAlgoDetail.value?.regionJudge,
@@ -100,6 +115,15 @@
       immediate: true,
     },
   );
+  watch(
+    () => cameraDetailStore.isShowFence,
+    (isShowFence) => {
+      isDisplayFenceInVideo.value = isShowFence;
+    },
+    {
+      immediate: true,
+    },
+  );
 
   const toggleEdit = () => {
     emits('toggleEditable', !props.isEdit);
@@ -151,6 +175,27 @@
         handleEditCancel();
       });
   };
+
+  const handleUpdateDisplay = (nextStatus: boolean) => {
+    const params = {
+      cameraCode: cameraDetailStore.detail?.code!,
+      isDisplayFence: nextStatus ? FenceDisplayStatus.enabled : FenceDisplayStatus.disabled,
+    };
+
+    updateFenceDisplayStatus(params);
+    if (nextStatus) {
+      // 由于历史原因，需要调用两次接口
+      const cameraId = cameraDetailStore.cameraId;
+      const algoId = cameraAlgoStore.selectedAlgoId!;
+      const presetToken = presetStore.currentPresetToken;
+      const params = {
+        algoId,
+        cameraId,
+        presetToken,
+      };
+      choosePreset(params);
+    }
+  };
 </script>
 
 <style scoped>

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

@@ -21,6 +21,9 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
   const currentFenceId = ref<number | null>(null);
   const loading = ref(false);
 
+  // 是否展示电子围栏的工具栏
+  const showFenceTool = ref(false);
+
   /** 获取电子围栏 */
   const getFence = (param: GetFenceParams) => {
     loading.value = true;
@@ -73,7 +76,16 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
     currentFenceId.value = null;
   };
 
-  return { allFences, currentFenceId, getFence, createFence, editFence, deleteFence, clear };
+  return {
+    allFences,
+    currentFenceId,
+    getFence,
+    createFence,
+    editFence,
+    deleteFence,
+    clear,
+    showFenceTool,
+  };
 });
 
 export default useFenceStore;