挪动相机预览到正确位置

src/views/cameras/preview/CameraPreview.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <h2> 相机预览 </h2>
+    <div class="cameraMain">
+      <div class="cameraTree">
+        <CameraTree :data="data" v-if="data" />
+      </div>
+      <div class="cameraSettingWrapper">
+        <div class="cameraView">
+          <CameraViewSetting />
+        </div>
+        <div class="cameraParamsSettingWrapper">
+          <div class="cameraParamsSetting"> 相机的参数设置 </div>
+          <div class="algorithmsSetting"> <AlgorithmsSetting /> </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import CameraTree from './components/CameraTree/CameraTree.vue';
+  import CameraViewSetting from './components/CameraViewSetting/CameraViewSetting.vue';
+  import AlgorithmsSetting from './components/AlgorithmsSetting/AlgorithmsSetting.vue';
+  import useCameraTree from './hooks/useCameraTree';
+  const { data, loading } = useCameraTree();
+</script>
+<style lang="scss" scoped>
+  .cameraView {
+    width: 800px;
+    // height: 400px;
+    border: 1px solid #ccc;
+  }
+
+  .cameraParamsSetting {
+    width: 350px;
+    min-height: 300px;
+    border: 1px solid #ccc;
+  }
+
+  .cameraParamsSetting {
+    width: 350px;
+    min-height: 300px;
+    border: 1px solid #ccc;
+  }
+
+  .algorithmsSetting {
+    flex: 1;
+    border: 1px solid #ccc;
+  }
+  .cameraMain {
+    display: flex;
+    background: #fff;
+  }
+  .cameraTree {
+    width: 250px;
+    height: 800px;
+    border: 1px solid #ccc;
+  }
+
+  .cameraParamsSettingWrapper {
+    display: flex;
+    margin-top: 10px;
+  }
+  .algorithmsSetting {
+    flex: 1;
+    min-height: 300px;
+    margin-left: 10px;
+  }
+</style>

src/views/result/components/CameraTree/CameraTree.vue

@@ -32,3 +32,4 @@
   const treeRef = ref(null);
 </script>
 <style scoped></style>
+../../../cameras/preview/store/useCameraDetail