相机参数设置页面添加

src/views/cameras/preview/CameraPreview.vue

@@ -10,7 +10,9 @@
           <CameraViewSetting />
         </div>
         <div class="cameraParamsSettingWrapper">
-          <div class="cameraParamsSetting"> 相机的参数设置 </div>
+          <div class="cameraParamsSetting">
+            <CameraParams :detail="cameraParamsDetail" />
+          </div>
           <div class="algorithmsSetting"> <AlgorithmsSetting /> </div>
         </div>
       </div>
@@ -19,29 +21,33 @@
 </template>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
   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';
+  import CameraParams from './components/CameraParams/CameraParams.vue';
   const { data, loading } = useCameraTree();
+
+  const cameraParamsDetail = ref({});
 </script>
 <style lang="scss" scoped>
   .cameraView {
     width: 800px;
     // height: 400px;
-    border: 1px solid #ccc;
+    // border: 1px solid #ccc;
   }
 
   .cameraParamsSetting {
     width: 350px;
     min-height: 300px;
-    border: 1px solid #ccc;
+    // border: 1px solid #ccc;
   }
 
   .cameraParamsSetting {
     width: 350px;
     min-height: 300px;
-    border: 1px solid #ccc;
+    // border: 1px solid #ccc;
   }
 
   .algorithmsSetting {

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

@@ -29,7 +29,6 @@
             <el-time-picker
               v-model="x.value"
               is-range
-              arrow-control
               range-separator="-"
               start-placeholder="Start time"
               end-placeholder="End time"

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

@@ -2,7 +2,7 @@
   <div>
     <div style="font-size: 12px; font-weight: bold">算法配置</div>
     <div style="display: flex">
-      <div style="width: 200px">
+      <div class="algoTagWrapper">
         <AlgoTag
           v-for="item in cameraAlgoList"
           :key="item.code"
@@ -77,4 +77,9 @@
     });
   };
 </script>
-<style scoped></style>
+<style scoped>
+  .algoTagWrapper {
+    min-width: 150px;
+    margin-right: 15px;
+  }
+</style>

src/views/cameras/preview/components/CameraParams/CameraParams.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+  import { watch, ref } from 'vue';
+
+  const props = defineProps<{
+    detail: any;
+  }>();
+  const cameraParams = ref({
+    imageResolution: '',
+    recordPeriod: null,
+    startTime: '',
+    endTime: '',
+    reservation: '',
+  });
+
+  //   声明时赋初始值
+  //   const form = reactive({
+  //     imageResolution: props.cameraInits.imageResolution,
+  //     recordPeriod: props.cameraInits.recordPeriod,
+  //     startTime: props.cameraInits.startTime,
+  //     endTime: props.cameraInits.endTime,
+  //     reservation: props.cameraInits.reservation,
+  //   });
+
+  watch(
+    () => {
+      return props.detail;
+    },
+    () => {
+      cameraParams.value = props.detail;
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const emits = defineEmits(['submit']);
+  const onSubmit = () => {
+    emits('submit', cameraParams);
+  };
+</script>
+<template>
+  <el-form :model="cameraParams" label-width="130px" lable-position="left">
+    <el-form-item label="分辨率：">
+      <el-select v-model="cameraParams.imageResolution" style="width: 100%">
+        <el-option label="1920" value="1920" />
+        <el-option label="1280" value="1280" />
+        <el-option label="720" value="720" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="录制周期：">
+      <el-select v-model="cameraParams.recordPeriod" style="width: 100%">
+        <el-option label="10天" value="10天" />
+        <el-option label="5天" value="5天" />
+        <el-option label="1天" value="1天" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="录制时间：">
+      <el-col :span="11">
+        <el-time-picker v-model="cameraParams.startTime" style="width: 100%" />
+      </el-col>
+      <el-col :span="1">
+        <span class="text-center">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-time-picker v-model="cameraParams.endTime" style="width: 100%" />
+      </el-col>
+    </el-form-item>
+    <el-form-item label="返回预置位：">
+      <el-input v-model="cameraParams.reservation" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">保存</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped>
+  .text-center {
+    /* text-align: center; */
+    margin-left: 2px;
+  }
+</style>