fix: 相机预览页面进入即监听相机code

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

@@ -4,13 +4,30 @@
   > -->
   <AlgoAddBtn @click="showDialog"></AlgoAddBtn>
 
-  <ElDialog v-model="visible" title="添加算法" @close="handleClose" width="500px" :close-on-click-modal="!algoListVisiable">
+  <ElDialog
+    v-model="visible"
+    title="添加算法"
+    @close="handleClose"
+    width="500px"
+    :close-on-click-modal="!algoListVisiable"
+  >
     <div style="display: flex; justify-content: center; align-items: center">
       <span>算法：</span>
-      <ElSelect v-model="selectedIds" multiple style="width: 224px" size="small" @visible-change="handleVisibleChange"
-        placeholder="请为该相机选择关联的算法">
-        <ElOption v-for="item in curOptionsByCode" :key="item.id" :value="item.id" :label="item.name"
-          :disabled="!!isAlgoBind(item.id)">
+      <ElSelect
+        v-model="selectedIds"
+        multiple
+        style="width: 224px"
+        size="small"
+        @visible-change="handleVisibleChange"
+        placeholder="请为该相机选择关联的算法"
+      >
+        <ElOption
+          v-for="item in curOptionsByCode"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+          :disabled="!!isAlgoBind(item.id)"
+        >
           {{ item.name }}
           <span style="margin-left: 5px" v-if="isAlgoBind(item.id)">√</span>
         </ElOption>
@@ -24,72 +41,75 @@
   </ElDialog>
 </template>
 <script lang="ts" setup>
-import { ElDialog, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus';
-import { ref, watch } from 'vue';
-import useCameraAlgoStore from '../../store/useCameraAlgoStore';
-import { storeToRefs } from 'pinia';
-import { createCameraAlgoApi } from '@/api/camera/camera-preview';
-import useCameraDetailStore from '../../store/useCameraDetailStore';
-import AlgoAddBtn from '../AlgoSwitchCard/AlgoAddBtn.vue';
-import { AlgoItem, getAlgosByCameraCode } from '@/api/camera/camera-preview'
+  import { ElDialog, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus';
+  import { ref, watch } from 'vue';
+  import useCameraAlgoStore from '../../store/useCameraAlgoStore';
+  import { storeToRefs } from 'pinia';
+  import { createCameraAlgoApi } from '@/api/camera/camera-preview';
+  import useCameraDetailStore from '../../store/useCameraDetailStore';
+  import AlgoAddBtn from '../AlgoSwitchCard/AlgoAddBtn.vue';
+  import { AlgoItem, getAlgosByCameraCode } from '@/api/camera/camera-preview';
 
-const selectedIds = ref<number[]>([]);
-const cameraAlgoStore = useCameraAlgoStore();
+  const selectedIds = ref<number[]>([]);
+  const cameraAlgoStore = useCameraAlgoStore();
 
-const { isAlgoBind } = cameraAlgoStore;
-// const { allAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
-const { getCameraAlgoList } = cameraAlgoStore;
-const cameraDetailStore = useCameraDetailStore();
-const { detail } = storeToRefs(cameraDetailStore);
+  const { isAlgoBind } = cameraAlgoStore;
+  // const { allAlgoList, selectedAlgoId } = storeToRefs(cameraAlgoStore);
+  const { getCameraAlgoList } = cameraAlgoStore;
+  const cameraDetailStore = useCameraDetailStore();
+  const { detail } = storeToRefs(cameraDetailStore);
 
-const visible = ref(false);
-const algoListVisiable = ref(false);
-const handleClose = () => {
-  visible.value = false;
-};
+  const visible = ref(false);
+  const algoListVisiable = ref(false);
+  const handleClose = () => {
+    visible.value = false;
+  };
 
-const curOptionsByCode = ref<AlgoItem[]>([]);
-watch(
-  () => detail.value?.code,
-  (newCode) => {
-    if (!newCode) return;
-    getAlgosByCameraCode(newCode).then((res) => {
-      curOptionsByCode.value = res;
-    })
-  },
-);
+  const curOptionsByCode = ref<AlgoItem[]>([]);
+  watch(
+    () => detail.value?.code,
+    (newCode) => {
+      if (!newCode) return;
+      getAlgosByCameraCode(newCode).then((res) => {
+        curOptionsByCode.value = res;
+      });
+    },
+    {
+      immediate: true,
+    },
+  );
 
-const handleVisibleChange = (visible: boolean) => {
-  const t = setTimeout(() => {
-    algoListVisiable.value = visible;
-    clearTimeout(t);
-  }, 100);
-};
+  const handleVisibleChange = (visible: boolean) => {
+    const t = setTimeout(() => {
+      algoListVisiable.value = visible;
+      clearTimeout(t);
+    }, 100);
+  };
 
-const handleSubmit = () => {
-  if (selectedIds.value?.length < 1) {
-    ElMessage.warning({ message: '请选择算法' });
-    return;
-  }
-  createCameraAlgoApi({
-    algoIds: selectedIds.value || [],
-    cameraId: cameraDetailStore.cameraId,
-  }).then((res) => {
-    console.log('createAlgo ok', res);
-    // selectedAlgoId.value = selectedIds.value?.[0];
-    getCameraAlgoList(cameraDetailStore.cameraId);
-    ElMessage.success('添加成功，请完成算法参数配置后生效');
-    visible.value = false;
-  });
-};
+  const handleSubmit = () => {
+    if (selectedIds.value?.length < 1) {
+      ElMessage.warning({ message: '请选择算法' });
+      return;
+    }
+    createCameraAlgoApi({
+      algoIds: selectedIds.value || [],
+      cameraId: cameraDetailStore.cameraId,
+    }).then((res) => {
+      console.log('createAlgo ok', res);
+      // selectedAlgoId.value = selectedIds.value?.[0];
+      getCameraAlgoList(cameraDetailStore.cameraId);
+      ElMessage.success('添加成功，请完成算法参数配置后生效');
+      visible.value = false;
+    });
+  };
 
-const showDialog = () => {
-  visible.value = true;
-  selectedIds.value = undefined;
-};
+  const showDialog = () => {
+    visible.value = true;
+    selectedIds.value = undefined;
+  };
 </script>
 <style scoped>
-:deep(.el-select .el-input__inner) {
-  min-height: 32px;
-}
+  :deep(.el-select .el-input__inner) {
+    min-height: 32px;
+  }
 </style>