feat: 完成电子围栏的开启和关闭

src/api/camera/camera-preview.ts

@@ -144,10 +144,12 @@ export const getCameraAlgoListApi = (cameraId: number): Promise<CameraAlgoItem[]
 interface SaveCameraAlgoParam {
   algoId: number;
   cameraId: number;
-  detectionFrequency: number;
-  detectionTime: string;
-  electronicFence: string;
-  status: 0 | 1;
+  detectionFrequency?: number;
+  detectionTime?: string;
+  /** 电子围栏开启还是关闭 */
+  electronicFence?: 0 | 1;
+  /** 算法开启还是关闭 */
+  status?: 0 | 1;
 }
 
 interface CreateCameraAlgoParam {

src/modules/algo/algo-params-edit/utils.ts

@@ -5,7 +5,7 @@ import { isEqual } from 'lodash-es';
 
 import { TimeRangeItem, TimePeriodItem } from '@/modules/algo/algo-params-edit/types';
 
-import { CameraAlgoItem } from '@/api/camera/camera-preview';
+import { ALGO_ENABLED_STATUS, CameraAlgoItem, FENCE_ENBALED_STATUS } from '@/api/camera/camera-preview';
 import safeParse from '@/utils/safeParse';
 
 // export const createDefaultTime = (): TimeRangeItem => {
@@ -229,3 +229,40 @@ export const createAlgoSubmitParams = (param, initialAlgoDetail) => {
   };
   return newParam;
 };
+
+/** algo的extra详情转化为json */
+export const algoDetailToJSON = (detail) => {
+  const enableCard = detail?.status === ALGO_ENABLED_STATUS.enabled ? true : false;
+  const electronicFenceBool = detail?.electronicFence === FENCE_ENBALED_STATUS.enabled ? true : false;
+
+  // const timeRangeArr = getDetectionTimeJSON(detail?.detectionTime) || [];
+  const timeRangeArr = getDetectionTime(detail?.detectionTime) || [];
+  const metaValues = getMetaValues(detail?.extra) || [];
+
+  const commonInfo = getExtraCommonInfo(detail);
+
+  return {
+    ...detail,
+    inferCode: getInferCode(detail?.extra),
+    // detectionJSON,
+    enableCardBool: enableCard,
+    electronicFenceBool,
+    timeRangeArr,
+    metaValues,
+    regionJudge: commonInfo.regionJudge || 0,
+    judge: commonInfo.judge || commonInfo.judge == 0 ? commonInfo.judge : 1,
+    eventDurationMinMs:
+      commonInfo.eventDurationMinMs || commonInfo.eventDurationMinMs == 0 ? commonInfo.eventDurationMinMs : 1,
+    eventDurationMinFrames:
+      commonInfo.eventDurationMinFrames || commonInfo.eventDurationMinFrames == 0
+        ? commonInfo.eventDurationMinFrames
+        : 1,
+    eventAlarmIntervalMs:
+      commonInfo.eventAlarmIntervalMs || commonInfo.eventAlarmIntervalMs == 0 ? commonInfo.eventAlarmIntervalMs : 1,
+    eventAlarmIntervalFrames:
+      commonInfo.eventAlarmIntervalFrames || commonInfo.eventAlarmIntervalFrames == 0
+        ? commonInfo.eventAlarmIntervalFrames
+        : 1,
+    timeWindow: commonInfo.timeWindow,
+  };
+};

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

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <el-tooltip content="算法参数设置">
-      <svg-icon icon-name="algo-setting" color="#1890ff" />
-    </el-tooltip>
+    <svg-icon icon-name="algo-setting" color="#1890ff" />
   </div>
 </template>
 <script lang="ts" setup>

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

@@ -10,7 +10,7 @@
         <div class="algoName" v-else>{{ label }}</div>
         <div class="toolbar">
           <div>
-            <ElectronicFenceIcon :active="isFenceOpen" @click.stop="updateFenceStatus" />
+            <ElectronicFenceIcon :active="isFenceOpen" @click.stop="toggleFenceToolStatus" />
           </div>
           <AlgoSettingIcon
             class="divideLine algoSettingIcon"
@@ -20,9 +20,7 @@
           <!-- <AlgoSettingIcon class="divideLine algoSettingIcon" /> -->
 
           <div class="divideLine deleteIcon" @click.stop="emits('remove')" v-if="hasDeletePermission()">
-            <el-tooltip content="删除算法">
-              <img :src="deletePng" alt="删除" style="width: 16px; height: 16px" />
-            </el-tooltip>
+            <img :src="deletePng" alt="删除" style="width: 16px; height: 16px" />
           </div>
         </div>
       </div>
@@ -63,7 +61,8 @@
     emits('toggleAlgo', !props.isAlgoOpen);
   };
 
-  const updateFenceStatus = () => {
+  /** 切换工具栏的显示隐藏状态 */
+  const toggleFenceToolStatus = () => {
     emits('toggleFenceTool');
   };
 

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

@@ -48,7 +48,7 @@
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import usePresetListStore from '../../store/usePresetListStore';
   // import AddAlgoDialog from './AddAlgoDialog.vue';
-  import { createAlgoSubmitParams } from '@/modules/algo/algo-params-edit/utils';
+  import { createAlgoSubmitParams, algoDetailToJSON } from '@/modules/algo/algo-params-edit/utils';
   import {
     getInferCode,
     getAlgoType,
@@ -118,50 +118,12 @@
     if (!algoId) return;
     const detail = getAlgoDetail(algoId);
     if (!detail) return;
-    // console.log('detail change', detail);
-    // const detectionJSON = getDetectionJSON(detail?.detectionFrequency);
-    const enableCard = detail?.status === ALGO_ENABLED_STATUS.enabled ? true : false;
-    const electronicFenceBool = detail?.electronicFence === FENCE_ENBALED_STATUS.enabled ? true : false;
-
-    // const timeRangeArr = getDetectionTimeJSON(detail?.detectionTime) || [];
-    const timeRangeArr = getDetectionTime(detail?.detectionTime) || [];
-    const metaValues = getMetaValues(detail?.extra) || [];
-
-    const commonInfo = getExtraCommonInfo(detail);
-
-    selectedAlgoDetail.value = {
-      ...detail,
-      inferCode: getInferCode(detail?.extra),
-      // detectionJSON,
-      enableCardBool: enableCard,
-      electronicFenceBool,
-      timeRangeArr,
-      metaValues,
-      regionJudge: commonInfo.regionJudge || 0,
-      judge: commonInfo.judge || commonInfo.judge == 0 ? commonInfo.judge : 1,
-      eventDurationMinMs:
-        commonInfo.eventDurationMinMs || commonInfo.eventDurationMinMs == 0 ? commonInfo.eventDurationMinMs : 1,
-      eventDurationMinFrames:
-        commonInfo.eventDurationMinFrames || commonInfo.eventDurationMinFrames == 0
-          ? commonInfo.eventDurationMinFrames
-          : 1,
-      eventAlarmIntervalMs:
-        commonInfo.eventAlarmIntervalMs || commonInfo.eventAlarmIntervalMs == 0 ? commonInfo.eventAlarmIntervalMs : 1,
-      eventAlarmIntervalFrames:
-        commonInfo.eventAlarmIntervalFrames || commonInfo.eventAlarmIntervalFrames == 0
-          ? commonInfo.eventAlarmIntervalFrames
-          : 1,
-    };
+    selectedAlgoDetail.value = algoDetailToJSON(detail);
     fenceStore.getFence({
       algoId: algoId,
       cameraId: cameraDetailStore.cameraId,
       presetToken: presetStore.currentPresetToken,
     });
-
-    //是否有窗口时间
-    if (commonInfo.timeWindow) {
-      selectedAlgoDetail.value.timeWindow = commonInfo.timeWindow;
-    }
   });
 
   const toggleFenceTool = () => {
@@ -206,32 +168,6 @@
       });
   };
 
-  // 开启关闭电子围栏
-  const handleToggleFence = (detail: CameraAlgoItem, fenceStatus: boolean) => {
-    const cameraId = cameraDetailStore.cameraId;
-    const algoId = detail.algoId;
-    // console.log({ detail, status });
-    const status = fenceStatus ? FENCE_ENBALED_STATUS.enabled : FENCE_ENBALED_STATUS.disabled;
-    const params = {
-      cameraId: cameraId,
-      id: detail.id as number,
-      algoId,
-      electronicFence: status,
-    };
-    const initialStatus = detail.electronicFence;
-    detail.electronicFence = status;
-    selectedAlgoId.value = algoId;
-    isChanged.value = false;
-    algoSettingIsOpen.value = false;
-    updateCameraAlgoApi(params)
-      .then(() => {
-        ElMessage.success(fenceStatus ? '电子围栏已开启' : '电子围栏已关闭');
-      })
-      .catch(() => {
-        detail.electronicFence = initialStatus;
-      });
-  };
-
   const handleSubmit = (param) => {
     const cameraId = cameraDetailStore.cameraId;
 

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

@@ -53,6 +53,7 @@
       @toggle-editable="toggleEditable"
       @toggle-range="toggleRange"
       @select="handleSelectFenceList"
+      @toggle-fence-status="paramsSettingFn.toggleFenceStatus"
     />
   </div>
 
@@ -64,41 +65,36 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, ref, watchEffect } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   import FenceToolbar from '../FenceToolbar/FenceToolbar.vue';
   import FenceEditor from '../FenceEditorV2/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
-  import PresetSelect from '../PresetSelect/PresetSelect.vue';
-  // import { ViewType } from '../ViewWindowSetting/types';
   import useFenceStore from '../../store/useFenceStore';
   import AddPresetModal from '../AddPresetModal/AddPresetModal.vue';
   import usePresetListStore from '../../store/usePresetListStore';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import useCameraAlgoStore from '../../store/useCameraAlgoStore';
   import AlgorithmsSetting from '../AlgorithmsSetting/AlgorithmsSetting.vue';
-  import RenderSwitch from '../RenderSwitch/RenderSwitch.vue';
-  import { FullscreenExitOutlined } from '@vicons/antd';
-  import FenceAppSetting from '../FenceAppSetting/FenceAppSetting.vue';
 
   import { ElMessage } from 'element-plus';
   import CameraDirectionControl from '../CameraDirectionControl/CameraDirectionControl.vue';
   import CameraViewScale from './CameraViewScale.vue';
   import { canvasHeight, canvasWidth, domHeight, domWidth } from './constants';
-  import useFullscreen from 'vue-hooks-plus/lib/useFullscreen';
-  import { createCameraAlgoApi, editFenceApi, saveFenceApi, updateCameraAlgoApi } from '@/api/camera/camera-preview';
+  import { createCameraAlgoApi, FENCE_ENBALED_STATUS, updateCameraAlgoApi } from '@/api/camera/camera-preview';
   import { RegionJudge } from '../FenceToolbar/constants';
   import AlgoCanSelect from '../AlgoCanSelect/AlgoCanSelect.vue';
   import { AlgoDetail, queryAlgoInfoAllByCameraId } from '@/api/algo/algo';
   import { FencePolygonPoints } from '../FenceEditorV2/types';
+  import useParamsSettingFn from '../../hooks/useParamsSettingFn';
 
   const emits = defineEmits<{
     (e: 'changeTreeRender', render: number | string): unknown;
   }>();
 
-  const [, { enterFullscreen }] = useFullscreen(() => document.querySelector('.cameraVideo'));
-
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
+  const paramsSettingFn = useParamsSettingFn();
+
   const fenceStore = useFenceStore();
 
   const presetStore = usePresetListStore();
@@ -135,11 +131,6 @@
     fenceEditorRef.value?.remove();
   };
 
-  /** 选中电子围栏多边形 */
-  const selectFencePolygon = (fenceId: number) => {
-    fenceEditorRef.value?.selectFence(fenceId);
-  };
-
   /** 退出编辑模式 */
   const toggleEditable = (val: boolean) => {
     fenceStore.showFenceTool = val;
@@ -306,7 +297,7 @@
     top: 0;
     width: 260px;
     height: 540px;
-    /* border: 1px solid #f00; */
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
     background: #fff;
     /* width: 962px; */
     /* padding: 20px;

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

@@ -1,8 +1,16 @@
 <template>
   <div class="fenceWrapper">
     <div>
-      <div>电子围栏</div>
-      <ElSwitch size="small" class="fenceSwitchBtn" />
+      <div class="fenceTitle">电子围栏</div>
+      <ElSwitch
+        size="small"
+        class="fenceSwitchBtn"
+        v-model="selectedAlgoDetail.electronicFenceBool"
+        @update:modelValue="handleUpdateFenceStatus"
+      />
+    </div>
+    <div class="algoName">
+      {{ selectedAlgoDetail?.algoInfo?.name }}
     </div>
     <PresetSelect />
 
@@ -86,11 +94,13 @@
   const { selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
 
   const emits = defineEmits<{
-    (e: 'toggleEditable', editState: boolean): unknown;
+    // (e: 'toggleEditable', editState: boolean): unknown;
     (e: 'toggleRange'): unknown;
     (e: 'remove'): unknown;
     (e: 'save'): unknown;
     (e: 'select', fenceId: number): unknown;
+    /** 切换电子围栏打开关闭状态 */
+    (e: 'toggleFenceStatus', nextStatus: boolean): unknown;
   }>();
 
   const isFenceRegionOut = ref(false);
@@ -125,10 +135,6 @@
     },
   );
 
-  const toggleEdit = () => {
-    emits('toggleEditable', !props.isEdit);
-  };
-
   const handleSelectFence = (nextFenceId: number) => {
     emits('select', nextFenceId);
   };
@@ -196,6 +202,11 @@
       choosePreset(params);
     }
   };
+
+  const handleUpdateFenceStatus = (nextStatus: boolean) => {
+    console.log('nextFenceStatus', nextStatus);
+    emits('toggleFenceStatus', nextStatus);
+  };
 </script>
 
 <style scoped>
@@ -224,6 +235,12 @@
     top: 10px;
   }
 
+  .algoName {
+    color: #ccc;
+    margin-top: 10px;
+    font-size: 12px;
+  }
+
   .fenceWrapper {
     padding: 10px;
   }
@@ -231,4 +248,20 @@
     max-height: 435px;
     overflow-y: auto;
   }
+
+  .fenceTitle {
+    font-weight: bold;
+    font-size: 16px;
+    position: relative;
+    margin-left: 10px;
+    &::before {
+      content: '';
+      width: 4px;
+      position: absolute;
+      left: -8px;
+      height: 20px;
+      top: 2px;
+      background-color: #1890ff;
+    }
+  }
 </style>

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

@@ -0,0 +1,43 @@
+import { FENCE_ENBALED_STATUS, updateCameraAlgoApi } from '@/api/camera/camera-preview';
+import { ElMessage } from 'element-plus';
+import useCameraAlgoStore from '../store/useCameraAlgoStore';
+import useCameraDetailStore from '../store/useCameraDetailStore';
+import useFenceStore from '../store/useFenceStore';
+import usePresetListStore from '../store/usePresetListStore';
+
+/** 各种store相关的方法都可以提取到这个hooks中 */
+export const useParamsSettingFn = () => {
+  const fenceStore = useFenceStore();
+
+  const presetStore = usePresetListStore();
+  const cameraDetailStore = useCameraDetailStore();
+  const cameraAlgoStore = useCameraAlgoStore();
+
+  /** 切换电子围栏的开启关闭状态  */
+  const toggleFenceStatus = (nextStatus: boolean) => {
+    const cameraId = cameraDetailStore.cameraId;
+    const algoId = cameraAlgoStore.selectedAlgoId;
+    if (!algoId) return;
+
+    const status = nextStatus ? FENCE_ENBALED_STATUS.enabled : FENCE_ENBALED_STATUS.disabled;
+    const params = {
+      cameraId: cameraId,
+      id: cameraAlgoStore.selectedAlgoDetail?.id!,
+      algoId,
+      electronicFence: status,
+    };
+
+    updateCameraAlgoApi(params).then(() => {
+      ElMessage.success(nextStatus ? '电子围栏已开启' : '电子围栏已关闭');
+      cameraAlgoStore.cameraAlgoList?.forEach((item) => {
+        if (item.algoId === algoId) {
+          item.electronicFence = status;
+        }
+      });
+    });
+  };
+
+  return { toggleFenceStatus };
+};
+
+export default useParamsSettingFn;

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

@@ -19,6 +19,10 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
   const allFences = ref<ServerLineInfos>([]);
   /** 当前正在操作的电子围栏id */
   const currentFenceId = ref<number | null>(null);
+
+  /** 电子围栏的分组id */
+  const currentFenceGroupId = ref<number | null>(null);
+
   const loading = ref(false);
 
   // 是否展示电子围栏的工具栏
@@ -36,6 +40,7 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
           return { ...x, polygon: safeParse(x.polygon) as ServerLine };
         }) as unknown as ServerLineInfos;
         allFences.value = newFence;
+        currentFenceGroupId.value = res.id;
       })
       .catch(() => {
         currentFenceId.value = null;
@@ -85,6 +90,7 @@ export const useFenceStore = defineStore('fencePolygonStore', () => {
     deleteFence,
     clear,
     showFenceTool,
+    currentFenceGroupId,
   };
 });