fix: [相机预览] 点击算法切换问题

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

@@ -22,10 +22,10 @@
           :is-selected="item.algoId === selectedAlgoId"
           :is-algo-open="item.status === ALGO_ENABLED_STATUS.enabled"
           @click="handleSelectAlgo(item.algoId)"
-          @remove="confirmRemove(item.algoId)"
-          @toggle-algo="handleToggleAlgo(item, $event)"
+          @remove="confirmRemove(item.algoId, item)"
+          @toggle-algo="confirmToggleAlgoOpen(item, $event)"
           :is-fence-open="item.electronicFence === FENCE_ENBALED_STATUS.enabled"
-          @toggle-fence="handleToggleFence(item, $event)"
+          @toggle-fence="confirmToggleFence(item, $event)"
           @toggle-setting="handleToggleSetting(item.algoId)"
         />
       </div>
@@ -88,19 +88,8 @@
     }
     // 如果是在其他卡片上切换设置开关，等同于直接切卡片，并且显示设置。
     // 如果原先设置开关是打开的，那么要先alert提示，否则就直接切
-    if (algoSettingIsOpen.value) {
-      const el = document.getElementById('algoSetting') as HTMLElement;
-      ElMessageBox.confirm(
-        '<strong>确认切换算法配置吗?</strong><br />切换后未保存的算法配置将被丢弃。',
-        '',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-          dangerouslyUseHTMLString: true,
-          appendTo: el,
-        },
-      ).then(() => {
+    if (selectedAlgoId.value !== algoId && algoSettingIsOpen.value) {
+      confirmSwitchAlgo().then(() => {
         selectedAlgoId.value = algoId;
         algoSettingIsOpen.value = true;
       });
@@ -114,19 +103,8 @@
     if (selectedAlgoId.value === algoId) {
       return;
     }
-    if (selectedAlgoId.value && algoSettingIsOpen.value) {
-      const el = document.getElementById('algoSetting') as HTMLElement;
-      ElMessageBox.confirm(
-        '<strong>确认切换算法配置吗?</strong><br />切换后未保存的算法配置将被丢弃。',
-        '',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-          dangerouslyUseHTMLString: true,
-          appendTo: el,
-        },
-      )
+    if (algoSettingIsOpen.value) {
+      confirmSwitchAlgo()
         .then(() => {
           selectedAlgoId.value = algoId;
           algoSettingIsOpen.value = false;
@@ -178,7 +156,19 @@
     }
   });
 
-  const handleToggleAlgo = (detail: CameraAlgoItem, algoStatus: boolean) => {
+  const confirmToggleAlgoOpen = (detail: CameraAlgoItem, algoStatus: boolean) => {
+    if (detail.algoId !== selectedAlgoId.value && algoSettingIsOpen.value) {
+      confirmSwitchAlgo().then(() => {
+        handleToggleAlgoOpen(detail, algoStatus);
+      });
+    } else {
+      handleToggleAlgoOpen(detail, algoStatus);
+    }
+  };
+
+  const handleToggleAlgoOpen = (detail: CameraAlgoItem, algoStatus: boolean) => {
+    // 如果是在已选中的卡片上切换或者其他卡片设置是关闭的情况下，直接切不提示。
+    // 只有切到其他卡片并且当前的设置是打开的情况下，才需要提示。
     const cameraId = cameraDetailStore.cameraId;
     const algoId = detail.algoId;
     // console.log({ detail, status });
@@ -191,6 +181,8 @@
     };
     const initialStatus = detail.status;
     detail.status = status;
+    selectedAlgoId.value = algoId;
+    algoSettingIsOpen.value = false;
     updateCameraAlgoApi(params)
       .then(() => {
         ElMessage.success(algoStatus ? '算法已开启' : '算法已关闭');
@@ -200,6 +192,16 @@
       });
   };
 
+  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;
@@ -213,6 +215,8 @@
     };
     const initialStatus = detail.electronicFence;
     detail.electronicFence = status;
+    selectedAlgoId.value = algoId;
+    algoSettingIsOpen.value = false;
     updateCameraAlgoApi(params)
       .then(() => {
         ElMessage.success(fenceStatus ? '电子围栏已开启' : '电子围栏已关闭');
@@ -258,8 +262,8 @@
     }
   };
 
-  const confirmRemove = (algoId: number) => {
-    ElMessageBox.confirm('删除后，该算法卡片将无法恢复，请确定是否删除?', '提示', {
+  const confirmRemove = (algoId: number, item) => {
+    ElMessageBox.confirm(`请确定是否删除【${item.algoInfo.name}】算法?`, '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
@@ -268,8 +272,20 @@
     });
   };
 
+  const confirmSwitchAlgo = () => {
+    return ElMessageBox.confirm(
+      '<strong>确认切换算法吗?</strong><br />切换后未保存的算法配置将被丢弃。',
+      '',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true,
+      },
+    );
+  };
+
   const handleRemove = (algoId: number) => {
-    console.log('remove', algoId);
     deleteCameraAlgoApi({ algoId, cameraId: cameraDetailStore.cameraId }).then(() => {
       ElMessage.success('删除成功');
       getCameraAlgoList(cameraDetailStore.cameraId);