feat: 将选择相机关联的算法列表提取为公共组件

src/modules/algo-params-setting-base/AlgoParamsSettingBase.vue

@@ -13,7 +13,7 @@
       ></div>
       <div class="cameraSettingWrapper">
         <div class="cameraView">
-          <CameraViewSetting v-if="cameraDetailStore.cameraId" />
+          <CameraViewSetting v-if="cameraDetailStore.cameraId" :cameraAllAlgoList="props.cameraAllAlgoList" />
           <div class="cameraPlaceholder" v-else>请选择左侧相机</div>
         </div>
       </div>
@@ -40,6 +40,7 @@
   const presetListStore = usePresetListStore();
 
   const cameraTreeVisible = ref(true);
+  const props = defineProps<{ cameraAllAlgoList: AlgoDetail[] }>();
 
   watch(
     () => cameraDetailStore.cameraId,

src/modules/algo-params-setting-base/components/CameraViewSetting/CameraViewSetting.vue

@@ -29,7 +29,7 @@
         </div>
       </div>
       <div>
-        <AlgoCanSelect :algo-list="cameraAllAlgoList" :selected-ids="cameraAlgoIds" @select="handleApplyAlgo"
+        <AlgoCanSelect :algo-list="props.cameraAllAlgoList" :selected-ids="cameraAlgoIds" @select="handleApplyAlgo"
       /></div>
     </div>
 
@@ -89,6 +89,8 @@
     (e: 'changeTreeRender', render: number | string): unknown;
   }>();
 
+  const props = defineProps<{ cameraAllAlgoList: AlgoDetail[] }>();
+
   const fenceEditorRef = ref<typeof FenceEditor | null>(null);
 
   const paramsSettingFn = useParamsSettingFn();
@@ -101,21 +103,12 @@
 
   const { getCameraAlgoList } = cameraAlgoStore;
 
-  // const viewType = ref<ViewType>(ViewType.window1);
-
   const addPresetModalVisible = ref(false);
 
-  const cameraAllAlgoList = ref<AlgoDetail[]>([]);
-
   const cameraAlgoIds = computed(() => {
     return cameraAlgoStore.cameraAlgoList?.map((item) => item.algoId) || [];
   });
 
-  onMounted(() => {
-    queryAlgoInfoAllByCameraId(cameraDetailStore.cameraId).then((res) => {
-      cameraAllAlgoList.value = res;
-    });
-  });
   const handleClose = () => {
     addPresetModalVisible.value = false;
   };

src/views/cameras/algo-params-setting/AlgoParamsSetting.vue

@@ -1,6 +1,6 @@
 <!-- 算法参数配置页面 -->
 <template>
-  <AlgoParamsSettingBase>
+  <AlgoParamsSettingBase :cameraAllAlgoList="cameraAllAlgoList">
     <template #cameraTree>
       <CameraTree />
     </template>
@@ -10,6 +10,22 @@
 <script lang="ts" setup>
   import AlgoParamsSettingBase from '@/modules/algo-params-setting-base/AlgoParamsSettingBase.vue';
   import CameraTree from '@/modules/algo-params-setting-base/components/CameraTree/CameraTree.vue';
+  import { AlgoDetail, queryAlgoInfoAllByCameraId } from '@/api/algo/algo';
+
+  import { watch, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  const cameraAllAlgoList = ref<AlgoDetail[]>([]);
+  const route = useRoute();
+
+  watch(
+    () => route.query.cameraId,
+    (nextCameraId) => {
+      queryAlgoInfoAllByCameraId(nextCameraId).then((res) => {
+        cameraAllAlgoList.value = res;
+      });
+    },
+    { immediate: true },
+  );
 </script>
 
 <style lang="scss" scoped></style>