feat: 完成检测电子围栏外部显示

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

@@ -6,7 +6,10 @@
     </div>
     <PresetSelect />
 
-    <div style="display: flex"> <ElCheckbox label="检测围栏外部" /> <ElCheckbox label="前台画面显示" /> </div>
+    <div style="display: flex">
+      <ElCheckbox label="检测围栏外部" v-model="isFenceRegionOut" @update:modelValue="handleUpdateRegion" />
+      <ElCheckbox label="前台画面显示" />
+    </div>
     <div class="fenceListWrapper">
       <FenceNameItem
         :active="item.id === fenceStore.currentFenceId"
@@ -50,7 +53,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { defineEmits, ref } from 'vue';
+  import { 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';
@@ -64,6 +67,8 @@
   import usePresetListStore from '../../store/usePresetListStore';
   import EditFenceDialog from './EditFenceDialog.vue';
   import { ServerLineInfo } from '../FenceEditor/constants';
+  import { storeToRefs } from 'pinia';
+  import { RegionJudge } from './constants';
   const cameraAlgoStore = useCameraAlgoStore();
 
   const fenceStore = useFenceStore();
@@ -74,6 +79,8 @@
   const showEditFenceDialog = ref(false);
   const selectedDetail = ref<ServerLineInfo | null>(null);
 
+  const { selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
+
   const emits = defineEmits<{
     (e: 'toggleEditable', editState: boolean): unknown;
     (e: 'toggleRange'): unknown;
@@ -82,6 +89,18 @@
     (e: 'select', fenceId: number): unknown;
   }>();
 
+  const isFenceRegionOut = ref(false);
+
+  watch(
+    () => selectedAlgoDetail.value?.regionJudge,
+    (newVal) => {
+      isFenceRegionOut.value = newVal === RegionJudge.out;
+    },
+    {
+      immediate: true,
+    },
+  );
+
   const toggleEdit = () => {
     emits('toggleEditable', !props.isEdit);
   };
@@ -90,6 +109,12 @@
     emits('select', nextFenceId);
   };
 
+  const handleUpdateRegion = (val: string) => {
+    console.log('isFenceRegionOut', isFenceRegionOut.value);
+    console.log('region', val);
+    emits('toggleRange');
+  };
+
   const handleEditFenceInfo = (detail) => {
     showEditFenceDialog.value = true;
     selectedDetail.value = detail;