feat: 将算法参数提取为公共之间，左侧相机树通过slot传参进来

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

@@ -0,0 +1,134 @@
+<!-- 算法参数配置页面 -->
+<template>
+  <div>
+    <div class="cameraMain">
+      <div class="cameraTree" v-show="cameraTreeVisible">
+        <slot name="cameraTree"> 这里需要插入相机树的组件 </slot>
+      </div>
+      <div v-if="cameraTreeVisible" class="arrow-icon" @click="cameraTreeVisible = false"
+        ><el-icon><DArrowLeft /></el-icon
+      ></div>
+      <div v-else class="arrow-icon" @click="cameraTreeVisible = true"
+        ><el-icon><DArrowRight /></el-icon
+      ></div>
+      <div class="cameraSettingWrapper">
+        <div class="cameraView">
+          <CameraViewSetting v-if="cameraDetailStore.cameraId" />
+          <div class="cameraPlaceholder" v-else>请选择左侧相机</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, watch } from 'vue';
+  import { ElIcon } from 'element-plus';
+  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
+  import CameraTreeCom from './components/CameraTree/CameraTree.vue';
+  import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
+  import useCameraDetailStore from './store/useCameraDetailStore';
+  import useCameraAlgoStore from './store/useCameraAlgoStore';
+  import usePresetListStore from './store/usePresetListStore';
+  import useFenceStore from './store/useFenceStore';
+  import { IsPtz } from '@/types/camera/constant';
+  import { getCameraDeatilById } from '@/api/camera/camera-preview';
+
+  const cameraDetailStore = useCameraDetailStore();
+  const cameraAlgoStore = useCameraAlgoStore();
+  const fenceStore = useFenceStore();
+  const presetListStore = usePresetListStore();
+
+  const cameraTreeVisible = ref(true);
+
+  watch(
+    () => cameraDetailStore.cameraId,
+    async (cameraId) => {
+      fenceStore.clear();
+      if (cameraId) {
+        getCameraDeatilById(cameraId).then(async (res) => {
+          cameraDetailStore.setDetail(res);
+          // 如果isPtz为null，或者为0，都按照枪击相机
+          const presetList = await presetListStore.getPresetList(cameraId);
+          if (res.isPtz === IsPtz.disabled || !res.isPtz) {
+            presetListStore.currentPresetToken = presetList?.[0].token;
+          }
+        });
+
+        cameraAlgoStore.getCameraAlgoList(cameraId);
+        cameraAlgoStore.selectedAlgoId = null;
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  onMounted(() => {
+    cameraAlgoStore.getAllAlgoList();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .cameraParamsSetting {
+    width: 350px;
+    min-height: 300px;
+    // border: 1px solid #ccc;
+  }
+
+  .cameraParamsSetting {
+    width: 350px;
+    min-height: 300px;
+    // border: 1px solid #ccc;
+  }
+
+  .algorithmsSetting {
+    flex: 1;
+    border-left: 1px solid #ccc;
+    padding-left: 20px;
+  }
+  .cameraMain {
+    display: flex;
+    background: #fff;
+    overflow-x: auto;
+    // height: calc(100vh - 90px);
+  }
+  .cameraTree {
+    min-width: 270px;
+    max-width: 600px;
+    flex-shrink: 0;
+    // height: 800px;
+    // border: 1px solid #ccc;
+    border: 1px solid #f0f2f5;
+    margin: 5px;
+  }
+
+  .cameraPlaceholder {
+    color: #333;
+    text-align: center;
+    margin-top: 100px;
+    margin-left: 100px;
+  }
+
+  .arrow-icon {
+    width: 16px;
+    height: 48px;
+    margin: 320px 0;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: #bee2ff;
+  }
+
+  .arrow-icon:hover {
+    color: #fff;
+    background-color: #0052d9;
+  }
+
+  .cameraView {
+    width: 1230px;
+    position: relative;
+  }
+</style>

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

@@ -1,134 +1,15 @@
 <!-- 算法参数配置页面 -->
 <template>
-  <div>
-    <div class="cameraMain">
-      <div class="cameraTree" v-show="cameraTreeVisible">
-        <CameraTreeCom />
-      </div>
-      <div v-if="cameraTreeVisible" class="arrow-icon" @click="cameraTreeVisible = false"
-        ><el-icon><DArrowLeft /></el-icon
-      ></div>
-      <div v-else class="arrow-icon" @click="cameraTreeVisible = true"
-        ><el-icon><DArrowRight /></el-icon
-      ></div>
-      <div class="cameraSettingWrapper">
-        <div class="cameraView">
-          <CameraViewSetting v-if="cameraDetailStore.cameraId" />
-          <div class="cameraPlaceholder" v-else>请选择左侧相机</div>
-        </div>
-      </div>
-    </div>
-  </div>
+  <AlgoParamsSettingBase>
+    <template #cameraTree>
+      <CameraTree />
+    </template>
+  </AlgoParamsSettingBase>
 </template>
 
 <script lang="ts" setup>
-  import { onMounted, ref, watch } from 'vue';
-  import { ElIcon } from 'element-plus';
-  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
-  import CameraTreeCom from './components/CameraTree/CameraTree.vue';
-  import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
-  import useCameraDetailStore from './store/useCameraDetailStore';
-  import useCameraAlgoStore from './store/useCameraAlgoStore';
-  import usePresetListStore from './store/usePresetListStore';
-  import useFenceStore from './store/useFenceStore';
-  import { IsPtz } from '@/types/camera/constant';
-  import { getCameraDeatilById } from '@/api/camera/camera-preview';
-
-  const cameraDetailStore = useCameraDetailStore();
-  const cameraAlgoStore = useCameraAlgoStore();
-  const fenceStore = useFenceStore();
-  const presetListStore = usePresetListStore();
-
-  const cameraTreeVisible = ref(true);
-
-  watch(
-    () => cameraDetailStore.cameraId,
-    async (cameraId) => {
-      fenceStore.clear();
-      if (cameraId) {
-        getCameraDeatilById(cameraId).then(async (res) => {
-          cameraDetailStore.setDetail(res);
-          // 如果isPtz为null，或者为0，都按照枪击相机
-          const presetList = await presetListStore.getPresetList(cameraId);
-          if (res.isPtz === IsPtz.disabled || !res.isPtz) {
-            presetListStore.currentPresetToken = presetList?.[0].token;
-          }
-        });
-
-        cameraAlgoStore.getCameraAlgoList(cameraId);
-        cameraAlgoStore.selectedAlgoId = null;
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  onMounted(() => {
-    cameraAlgoStore.getAllAlgoList();
-  });
+  import AlgoParamsSettingBase from '@/modules/algo-params-setting-base/AlgoParamsSettingBase.vue';
+  import CameraTree from '@/modules/algo-params-setting-base/components/CameraTree/CameraTree.vue';
 </script>
 
-<style lang="scss" scoped>
-  .cameraParamsSetting {
-    width: 350px;
-    min-height: 300px;
-    // border: 1px solid #ccc;
-  }
-
-  .cameraParamsSetting {
-    width: 350px;
-    min-height: 300px;
-    // border: 1px solid #ccc;
-  }
-
-  .algorithmsSetting {
-    flex: 1;
-    border-left: 1px solid #ccc;
-    padding-left: 20px;
-  }
-  .cameraMain {
-    display: flex;
-    background: #fff;
-    overflow-x: auto;
-    // height: calc(100vh - 90px);
-  }
-  .cameraTree {
-    min-width: 270px;
-    max-width: 600px;
-    flex-shrink: 0;
-    // height: 800px;
-    // border: 1px solid #ccc;
-    border: 1px solid #f0f2f5;
-    margin: 5px;
-  }
-
-  .cameraPlaceholder {
-    color: #333;
-    text-align: center;
-    margin-top: 100px;
-    margin-left: 100px;
-  }
-
-  .arrow-icon {
-    width: 16px;
-    height: 48px;
-    margin: 320px 0;
-    border-radius: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    background-color: #bee2ff;
-  }
-
-  .arrow-icon:hover {
-    color: #fff;
-    background-color: #0052d9;
-  }
-
-  .cameraView {
-    width: 1230px;
-    position: relative;
-  }
-</style>
+<style lang="scss" scoped></style>