工具栏的隐藏显示逻辑控制

src/views/cameras/preview/components/AlgorithmsSetting/AlgoSettingCard.vue

@@ -2,14 +2,14 @@
   <div class="algoCardWrapper">
     <div class="algoCardTitle">
       <div>{{ selectedAlgoDetail?.algoInfo?.name }}</div>
-      <ElSwitch v-model="enableCard" size="small" />
+      <ElSwitch v-model="selectedAlgoDetail.enableCardBool" size="small" />
     </div>
     <div class="algoCardMain">
       <div class="algoRow">
         <div class="algoLabel">电子围栏:</div>
         <div>
           <div>
-            <ElSwitch v-model="electronicFence" size="small" />
+            <ElSwitch v-model="selectedAlgoDetail.electronicFenceBool" size="small" />
             <span style="font-size: 10px; margin-left: 20px; color: #262626"
               >备注：请绘制电子围栏</span
             >
@@ -20,7 +20,7 @@
       <div class="algoRow">
         <div class="algoLabel">检测时间:</div>
         <div>
-          <div v-for="x in timeRangeArr" :key="x.id">
+          <div v-for="x in selectedAlgoDetail.timeRangeArr" :key="x.id">
             <el-time-picker
               v-model="x.value"
               is-range
@@ -31,7 +31,7 @@
               size="small"
               style="width: 180px; margin-bottom: 10px"
             />
-            <span @click="removeTime(x.id)" v-if="timeRangeArr.length > 1">
+            <span @click="removeTime(x.id)" v-if="selectedAlgoDetail.timeRangeArr.length > 1">
               <el-icon class="removeIcon"><CircleCloseFilled /></el-icon
             ></span>
           </div>
@@ -43,13 +43,17 @@
       <div class="algoRow" style="align-items: center">
         <div class="algoLabel">检测频率:</div>
         <ElInputNumber
-          v-model="detectionNum"
+          v-model="selectedAlgoDetail.detectionJSON.detectionNum"
           controls-position="right"
           :min="0"
           size="small"
           style="width: 80px"
         />
-        <ElSelect size="small" style="width: 60px; margin-left: 10px" v-model="detectionUnit">
+        <ElSelect
+          size="small"
+          style="width: 60px; margin-left: 10px"
+          v-model="selectedAlgoDetail.detectionJSON.detectionUnit"
+        >
           <ElOption
             v-for="x in frequencyOptions"
             :key="x.value"
@@ -87,8 +91,7 @@
 
   // const { data: algoList, loading } = useAllAlgos();
   const cameraAlgoStore = useCameraAlgoStore();
-  const { isAlgoBind } = cameraAlgoStore;
-  const { allAlgoList, selectedAlgoId, selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
+  const { selectedAlgoId, selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
 
   interface Param {
     /** 算法id */
@@ -108,37 +111,13 @@
     (e: 'onRemove', algoId: number): Promise<unknown>;
   }>();
 
-  const timeRangeArr = ref<TimeRangeItem[]>([createDefaultTime()]);
-
-  const detectionUnit = ref(FrequencyEnum.miniute);
-
-  /** 电子围栏开关 */
-  const electronicFence = ref(true);
-
-  const detectionNum = ref(5);
-
-  const enableCard = ref(true);
-
-  watch(
-    () => selectedAlgoDetail.value,
-    (detail) => {
-      console.log('detail change', detail);
-      const detectionJSON = getDetectionJSON(detail?.detectionFrequency);
-      enableCard.value = Boolean(detail?.status);
-      electronicFence.value = Boolean(detail?.electronicFence);
-      detectionNum.value = detectionJSON.detectionNum;
-      detectionUnit.value = detectionJSON.detectionUnit;
-      timeRangeArr.value = getDetectionTimeJSON(detail?.detectionTime) || [createDefaultTime()];
-    },
-    { deep: true, immediate: true },
-  );
-
   const handleAddTimeRange = () => {
-    timeRangeArr.value.push(createDefaultTime());
+    selectedAlgoDetail.value.timeRangeArr.push(createDefaultTime());
   };
 
   const removeTime = (id: string) => {
-    timeRangeArr.value = timeRangeArr.value.filter((x) => x.id !== id);
+    const timeRangeArr = selectedAlgoDetail.value.timeRangeArr;
+    selectedAlgoDetail.value.timeRangeArr = timeRangeArr.filter((x) => x.id !== id);
   };
 
   const getTimeStr = (d: Dayjs) => {
@@ -154,14 +133,14 @@
     const param = {
       id: detail.id,
       algoId: detail.algoId,
-      detectionFrequency: detectionNum.value * detectionUnit.value,
-      detectionTime: timeRangeArr.value
+      detectionFrequency: detail.detectionJSON.detectionNum * detail.detectionJSON.detectionUnit,
+      detectionTime: detail.timeRangeArr
         .map((x) => {
           return getTimeStrs(x.value);
         })
         .join(';'),
-      electronicFence: electronicFence.value ? STATUS.enabled : STATUS.disabled,
-      status: enableCard.value ? STATUS.enabled : STATUS.disabled,
+      electronicFence: detail.electronicFenceBool ? STATUS.enabled : STATUS.disabled,
+      status: detail.enableCardBool ? STATUS.enabled : STATUS.disabled,
     };
     emits('onSubmit', param);
     console.log('param', param);

src/views/cameras/preview/components/AlgorithmsSetting/AlgorithmsSetting.vue

@@ -39,13 +39,14 @@
   import useCameraDetailStore from '../../store/useCameraDetailStore';
   import usePresetListStore from '../../store/usePresetListStore';
   import AddAlgoDialog from './AddAlgoDialog.vue';
+  import { createDefaultTime, getDetectionJSON, getDetectionTimeJSON } from './utils';
 
   const cameraAlgoStore = useCameraAlgoStore();
   const fenceStore = useFenceStore();
   const presetStore = usePresetListStore();
 
-  const { getCameraAlgoList, getAllAlgoList } = cameraAlgoStore;
-  const { cameraAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
+  const { getCameraAlgoList, getAllAlgoList, getAlgoDetail } = cameraAlgoStore;
+  const { cameraAlgoList, selectedAlgoId, selectedAlgoDetail } = storeToRefs(cameraAlgoStore);
   const cameraDetailStore = useCameraDetailStore();
 
   onMounted(() => {
@@ -53,11 +54,27 @@
     getAllAlgoList();
   });
 
-  const handleSelectAlgo = (id: number) => {
-    if (id !== selectedAlgoId.value) {
-      selectedAlgoId.value = id;
+  const handleSelectAlgo = (algoId: number) => {
+    if (algoId !== selectedAlgoId.value) {
+      selectedAlgoId.value = algoId;
+      const detail = getAlgoDetail(algoId);
+
+      console.log('detail change', detail);
+      const detectionJSON = getDetectionJSON(detail?.detectionFrequency);
+      const enableCard = Boolean(detail?.status);
+      const electronicFenceBool = Boolean(detail?.electronicFence);
+
+      const timeRangeArr = getDetectionTimeJSON(detail?.detectionTime) || [createDefaultTime()];
+
+      selectedAlgoDetail.value = {
+        ...detail,
+        detectionJSON,
+        enableCardBool: enableCard,
+        electronicFenceBool,
+        timeRangeArr,
+      };
       fenceStore.getFence({
-        algoId: id,
+        algoId: algoId,
         cameraId: cameraDetailStore.cameraId,
         presetToken: presetStore.currentPresetToken,
       });

src/views/cameras/preview/components/AlgorithmsSetting/utils.ts

@@ -19,8 +19,13 @@ export const frequencyOptions = [
   { label: '分钟', value: FrequencyEnum.miniute },
   { label: '小时', value: FrequencyEnum.hour },
 ];
+
+export interface DetectionJSON {
+  detectionNum: number;
+  detectionUnit: FrequencyEnum;
+}
 /** 根据后端返回的时间(单位是秒)，拆分成单位和数值 */
-export const getDetectionJSON = (time: number | undefined | null) => {
+export const getDetectionJSON = (time: number | undefined | null): DetectionJSON => {
   if (time && time > 0) {
     for (let i = frequencyOptions.length - 1; i >= 0; i--) {
       const unit = frequencyOptions[i].value;

src/views/cameras/preview/components/CameraViewSetting/CameraViewSetting.vue

@@ -3,6 +3,7 @@
     <div class="toolbarWrapper">
       <ViewWindowSetting v-model="viewType" @update:model-value="handleUpdateViewType" />
       <FenceToolbar
+        :style="{ visibility: drawable ? 'visible' : 'hidden' }"
         @remove="handleRemove"
         @save="handleSave"
         @toggle-editable="toggleEditable"
@@ -33,7 +34,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import FenceToolbar from '../FenceToolbar/FenceToolbar.vue';
   import FenceEditor from '../FenceEditor/FenceEditor.vue';
   import CameraLiveVideo from '../CameraLiveVideo/CameraLiveVideo.vue';
@@ -168,6 +169,13 @@
     },
   );
 
+  const drawable = computed(() => {
+    if (!presetStore.currentPresetToken) return false;
+    if (!cameraAlgoStore.selectedAlgoId) return false;
+    if (!cameraAlgoStore.selectedAlgoDetail?.electronicFenceBool) return false;
+    return true;
+  });
+
   const handleAddPreset = () => {
     addPresetModalVisible.value = true;
   };

src/views/cameras/preview/store/useCameraAlgoStore.ts

@@ -1,12 +1,16 @@
-import {
-  getAllAlgosApi,
-  getCameraAlgoListApi,
-  CameraAlgoItem,
-  AlgoStatus,
-} from '@/api/camera/camera-preview';
+import { getAllAlgosApi, getCameraAlgoListApi, CameraAlgoItem } from '@/api/camera/camera-preview';
 import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useRequest } from 'vue-hooks-plus';
+import { TimeRangeItem } from '../components/AlgorithmsSetting/types';
+import { DetectionJSON } from '../components/AlgorithmsSetting/utils';
+
+interface CameraAlgoItemInCard extends CameraAlgoItem {
+  detectionJSON: DetectionJSON;
+  enableCardBool: boolean;
+  electronicFenceBool: boolean;
+  timeRangeArr: TimeRangeItem[];
+}
 
 const useCameraAlgoStore = defineStore('cameraAlgo', () => {
   const { data: cameraAlgoList, runAsync: getCameraAlgoList } = useRequest(
@@ -23,28 +27,12 @@ const useCameraAlgoStore = defineStore('cameraAlgo', () => {
   /** 所有算法列表中选定的算法id */
   const selectedAlgoId = ref<number>();
 
-  const selectedAlgoDetail = computed(() => {
-    if (!selectedAlgoId.value) return null;
-    return getAlgoDetail(selectedAlgoId.value);
-  });
+  const selectedAlgoDetail = ref<CameraAlgoItemInCard>({} as CameraAlgoItemInCard);
 
   const getAlgoDetail = (algoId: number): null | CameraAlgoItem => {
-    const detailWithCamera = cameraAlgoList.value?.find((x) => x.algoId === algoId);
-    if (detailWithCamera) return detailWithCamera;
-    const algoDetail = allAlgoList.value?.find((x) => x.id === algoId);
-    if (!algoDetail) return null;
-    return {
-      algoInfo: algoDetail,
-      id: undefined,
-      algoId: algoDetail?.id,
-      status: AlgoStatus.disabled,
-      electronicFence: 0,
-      cameraId: undefined,
-      code: '',
-      name: '',
-      detectionFrequency: 0,
-      detectionTime: '',
-    };
+    const detail = cameraAlgoList.value?.find((x) => x.algoId === algoId);
+    if (!detail) return null;
+    return detail;
   };
 
   /** 算法是否已经绑定到相机 */