相机设置-算法参数配置-点击设置按钮才会出现参数配置

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

@@ -6,7 +6,11 @@
         <AlgoSwitchIcon :active="isAlgoOpen" @click.stop="toggleAlgoStatus" />
         <div class="algoName">{{ label }}</div>
         <div class="toolbar">
-          <AlgoSettingIcon class="divideLine algoSettingIcon" v-if="hasAlgoSettingMaxPermisson()" />
+          <AlgoSettingIcon
+            class="divideLine algoSettingIcon"
+            v-if="hasAlgoSettingMaxPermisson()"
+            @click.stop="emits('toggleSetting')"
+          />
           <!-- <AlgoSettingIcon class="divideLine algoSettingIcon" /> -->
           <div @click.stop="() => {}">
             <el-tooltip :content="isFenceOpen ? '关闭电子围栏' : '开启电子围栏'">
@@ -58,6 +62,7 @@
     (e: 'toggleAlgo', isOpen: boolean): unknown;
     (e: 'toggleFence', isOpen: boolean): unknown;
     (e: 'remove'): unknown;
+    (e: 'toggleSetting'): unknown;
   }>();
   const toggleAlgoStatus = () => {
     emits('toggleAlgo', !props.isAlgoOpen);

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

@@ -26,13 +26,14 @@
           @toggle-algo="handleToggleAlgo(item, $event)"
           :is-fence-open="item.electronicFence === FENCE_ENBALED_STATUS.enabled"
           @toggle-fence="handleToggleFence(item, $event)"
+          @toggleSetting="handleToggleSetting"
         />
       </div>
       <div>
         <AlgoSettingCard
           @on-submit="handleSubmit"
           @on-cancel="handleCancel"
-          v-if="selectedAlgoId"
+          v-if="selectedAlgoId && algoSettingIsOpen"
         />
         <!-- <div style="color: #ccc; margin-top: 20px" v-else>请选择算法</div> -->
       </div>
@@ -64,7 +65,7 @@
     getInferParam,
   } from './utils';
   import { ALGO_ENABLED_STATUS } from '@/api/camera/camera-preview';
-  import { watchEffect } from 'vue';
+  import { ref, watchEffect } from 'vue';
   import { useUserStore } from '@/store/modules/user';
 
   const cameraAlgoStore = useCameraAlgoStore();
@@ -77,12 +78,17 @@
   const userStore = useUserStore();
 
   const hasAddPermission = () => userStore.checkPermission('algo_add');
+  const algoSettingIsOpen = ref(false);
+
+  const handleToggleSetting = () => {
+    algoSettingIsOpen.value = !algoSettingIsOpen.value;
+  };
 
   const handleSelectAlgo = (algoId: number) => {
     if (selectedAlgoId.value === algoId) {
       return;
     }
-    if (selectedAlgoId.value) {
+    if (selectedAlgoId.value && algoSettingIsOpen.value) {
       const el = document.getElementById('algoSetting') as HTMLElement;
       ElMessageBox.confirm(
         '<strong>确认切换算法配置吗?</strong><br />切换后未保存的算法配置将被丢弃。',
@@ -98,11 +104,13 @@
         .then(() => {
           if (algoId !== selectedAlgoId.value) {
             selectedAlgoId.value = algoId;
+            algoSettingIsOpen.value = false;
           }
         })
         .catch(() => {});
     } else {
       selectedAlgoId.value = algoId;
+      algoSettingIsOpen.value = false;
     }
   };
 

types/modules.d.ts

@@ -1,8 +1,8 @@
-// declare module '*.vue' {
-//   import { DefineComponent } from 'vue';
-//   const Component: DefineComponent<{}, {}, any>;
-//   export default Component;
-// }
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
+}
 
 declare module 'virtual:*' {
   const result: any;