fix: 修改相机添加算法可选项接口

src/api/camera/camera-preview.ts

@@ -47,7 +47,7 @@ export enum FENCE_ENBALED_STATUS {
   disabled = 1,
 }
 
-interface AlgoItem {
+export interface AlgoItem {
   id: number;
   name: string;
   code?: string;
@@ -69,6 +69,14 @@ export const getAllAlgosApi = () => {
   });
 };
 
+/** 根据相机code获取算法列表 */
+export const getAlgosByCameraCode = (cameraCode: string) => {
+  return http.request<AlgoItem[]>({
+    url: `/cameraPreview/getAlgoListWithCamera?cameraCode=${cameraCode}`,
+    method: 'get',
+  });
+};
+
 /** 相机关联的算法信息 */
 export interface CameraAlgoItem {
   id?: number;

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

@@ -4,30 +4,13 @@
   > -->
   <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 allAlgoList"
-          :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>
@@ -41,59 +24,72 @@
   </ElDialog>
 </template>
 <script lang="ts" setup>
-  import { ElDialog, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus';
-  import { ref } 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 { 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 { 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 handleVisibleChange = (visible: boolean) => {
-    const t = setTimeout(() => {
-      algoListVisiable.value = visible;
-      clearTimeout(t);
-    }, 100);
-  };
+const curOptionsByCode = ref<AlgoItem[]>([]);
+watch(
+  () => detail.value?.code,
+  (newCode) => {
+    if (!newCode) return;
+    getAlgosByCameraCode(newCode).then((res) => {
+      curOptionsByCode.value = res;
+    })
+  },
+);
 
-  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 handleVisibleChange = (visible: boolean) => {
+  const t = setTimeout(() => {
+    algoListVisiable.value = visible;
+    clearTimeout(t);
+  }, 100);
+};
 
-  const showDialog = () => {
-    visible.value = true;
-    selectedIds.value = undefined;
-  };
+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;
+};
 </script>
 <style scoped>
-  :deep(.el-select .el-input__inner) {
-    min-height: 32px;
-  }
+:deep(.el-select .el-input__inner) {
+  min-height: 32px;
+}
 </style>