camera init

.env.development

@@ -5,7 +5,7 @@ VITE_PORT = 8092
 VITE_PUBLIC_PATH = /
 
 # 是否开启mock
-VITE_USE_MOCK = false
+VITE_USE_MOCK = true
 
 # 网站前缀
 VITE_BASE_URL = /

src/views/result/fail.vue

@@ -37,27 +37,27 @@
   </el-card>
 </template>
 <script lang="ts" setup>
-  import { useRouter } from 'vue-router';
-  import { InfoCircleOutlined } from '@vicons/antd';
+import { useRouter } from 'vue-router';
+import { InfoCircleOutlined } from '@vicons/antd';
 
-  const router = useRouter();
+const router = useRouter();
 
-  function goHome() {
-    router.push('/');
-  }
+function goHome() {
+  router.push('/');
+}
 </script>
 <style lang="scss" scoped>
-  .result-box {
-    width: 72%;
-    margin: 0 auto;
-    text-align: center;
-    padding-top: 5px;
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
 
-    &-extra {
-      padding: 24px 40px;
-      text-align: left;
-      background: var(--n-border-color);
-      border-radius: 4px;
-    }
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: var(--n-border-color);
+    border-radius: 4px;
   }
+}
 </style>

src/views/result/success-bak.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-card :bordered="false" class="proCard">
+    <div class="result-box">
+      <el-result status="success" title="操作成功11" description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。">
+        <div class="result-box-extra">
+          <p>已提交申请，等待财务部门审核。</p>
+        </div>
+        <template #footer>
+          <div class="flex justify-center mb-4">
+            <el-space align="center">
+              <el-button type="info" @click="goHome">回到首页</el-button>
+              <el-button>查看详情</el-button>
+              <el-button>打印</el-button>
+            </el-space>
+          </div>
+        </template>
+      </el-result>
+    </div>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+function goHome() {
+  router.push('/');
+}
+</script>
+<style lang="scss" scoped>
+.result-box {
+  width: 72%;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 5px;
+
+  &-extra {
+    padding: 24px 40px;
+    text-align: left;
+    background: var(--n-border-color);
+    border-radius: 4px;
+  }
+}
+</style>

src/views/result/success.vue

@@ -1,48 +1,52 @@
 <template>
-  <el-card :bordered="false" class="proCard">
-    <div class="result-box">
-      <el-result
-        status="success"
-        title="操作成功"
-        description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。"
-      >
-        <div class="result-box-extra">
-          <p>已提交申请，等待财务部门审核。</p>
+  <div>
+    <h2> 相机预览 </h2>
+    <div class="cameraMain">
+      <div class="cameraTree">场景树</div>
+      <div class="cameraSettingWrapper">
+        <div class="cameraView">这是相机预览画面</div>
+        <div class="cameraParamsSettingWrapper">
+          <div class="cameraParamsSetting"> 相机的参数设置 </div>
+          <div class="algorithmsSetting"> 算法配置 </div>
         </div>
-        <template #footer>
-          <div class="flex justify-center mb-4">
-            <el-space align="center">
-              <el-button type="info" @click="goHome">回到首页</el-button>
-              <el-button>查看详情</el-button>
-              <el-button>打印</el-button>
-            </el-space>
-          </div>
-        </template>
-      </el-result>
+      </div>
     </div>
-  </el-card>
+  </div>
 </template>
-<script lang="ts" setup>
-  import { useRouter } from 'vue-router';
+<script lang="ts" setup></script>
+<style lang="scss" scoped>
+  .cameraView {
+    width: 800px;
+    height: 400px;
+    border: 1px solid #ccc;
+  }
 
-  const router = useRouter();
+  .cameraParamsSetting {
+    width: 350px;
+    min-height: 300px;
+    border: 1px solid #ccc;
+  }
 
-  function goHome() {
-    router.push('/');
+  .algorithmsSetting {
+    flex: 1;
+    border: 1px solid #ccc;
+  }
+  .cameraMain {
+    display: flex;
+  }
+  .cameraTree {
+    width: 250px;
+    height: 800px;
+    border: 1px solid #ccc;
   }
-</script>
-<style lang="scss" scoped>
-  .result-box {
-    width: 72%;
-    margin: 0 auto;
-    text-align: center;
-    padding-top: 5px;
 
-    &-extra {
-      padding: 24px 40px;
-      text-align: left;
-      background: var(--n-border-color);
-      border-radius: 4px;
-    }
+  .cameraParamsSettingWrapper {
+    display: flex;
+    margin-top: 10px;
+  }
+  .algorithmsSetting {
+    flex: 1;
+    min-height: 300px;
+    margin-left: 10px;
   }
 </style>