完成相机参数设置接口联调

src/api/camera/camera-overview.ts

@@ -68,6 +68,14 @@ export interface CameraDetailServer {
 
   /** 是否支持设置相机转动，比如设置预置位，调整视角等 */
   isPtz: IsPtz;
+  /** 录制周期 */
+  nvrPeriod: number;
+  /** 录制开始时间 */
+  nvrStartAt: string;
+  /** 录制结束时间 */
+  nvrEndAt: string;
+  /** 分辨率 */
+  resolution: number;
 }
 
 export const getCameraList = (params: CameraQueryParams) => {

src/api/camera/camera-preview.ts

@@ -275,32 +275,21 @@ export const cameraMoveApi = (data: CameraMoveParam) => {
 };
 
 interface SaveCameraParams {
-  startTime: string;
-  endTime: string;
-  imageResolution: number;
-  recordPeriod: number;
-  /** 这个要调整一下 */
-  reservation: string;
   cameraId: number;
+  // 视频录制结束时间（格式"HH:mm"）
+  endAt: string;
+  // 视频录制周期，单位是天;
+  period: number;
+  // 视频录制开始时间（格式"HH:mm"）
+  startAt: string;
+  /** 分辨率 */
+  resolution: number;
 }
 
 export const saveCameraParamsApi = (data: SaveCameraParams) => {
-  localStorage.setItem('cameraParams' + data.cameraId, JSON.stringify(data));
-  return Promise.resolve();
-};
-
-export const getCameraParamsApi = (cameraId: number) => {
-  const data = localStorage.getItem('cameraParams' + cameraId);
-  let jsonData = {
-    startTime: '',
-    endTime: '',
-    imageResolution: 1,
-    recordPeriod: 10,
-    /** 这个要调整一下 */
-    reservation: '10',
-  };
-  if (data) {
-    jsonData = JSON.parse(data);
-  }
-  return Promise.resolve(jsonData);
+  return http.request({
+    url: `/cameraPreview/saveNvr`,
+    method: 'put',
+    data,
+  });
 };

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

@@ -2,11 +2,7 @@
   <div class="cameraParamTitle">相机参数设置</div>
   <el-form :model="cameraDetailStore" label-width="130px" lable-position="left">
     <el-form-item label="分辨率：">
-      <el-select
-        v-model="cameraDetailStore.params.imageResolution"
-        style="width: 100%"
-        size="small"
-      >
+      <el-select v-model="cameraDetailStore.params.resolution" style="width: 100%" size="small">
         <el-option
           v-for="x in videoResolutionList"
           :label="x.label"
@@ -16,16 +12,14 @@
       </el-select>
     </el-form-item>
     <el-form-item label="录制周期：">
-      <el-select v-model="cameraDetailStore.params.recordPeriod" style="width: 100%" size="small">
-        <el-option label="10天" :value="10" />
-        <el-option label="5天" :value="5" />
-        <el-option label="1天" :value="1" />
+      <el-select v-model="cameraDetailStore.params.period" style="width: 100%" size="small">
+        <el-option v-for="x in periodOptions" :key="x.value" :label="x.label" :value="x.value" />
       </el-select>
     </el-form-item>
     <el-form-item label="录制时间：">
       <el-col :span="11">
         <el-time-picker
-          v-model="cameraDetailStore.params.startTime"
+          v-model="cameraDetailStore.params.startAt"
           style="width: 100%"
           size="small"
         />
@@ -34,16 +28,12 @@
         <span class="text-center">-</span>
       </el-col>
       <el-col :span="11">
-        <el-time-picker
-          v-model="cameraDetailStore.params.endTime"
-          style="width: 100%"
-          size="small"
-        />
+        <el-time-picker v-model="cameraDetailStore.params.endAt" style="width: 100%" size="small" />
       </el-col>
     </el-form-item>
-    <el-form-item label="返回预置位：">
+    <!-- <el-form-item label="返回预置位：">
       <el-input v-model="cameraDetailStore.params.reservation" size="small" />
-    </el-form-item>
+    </el-form-item> -->
     <el-form-item>
       <el-button type="primary" @click="onSubmit">保存</el-button>
     </el-form-item>
@@ -51,30 +41,23 @@
 </template>
 
 <script lang="ts" setup>
-  import { getCameraParamsApi, saveCameraParamsApi } from '@/api/camera/camera-preview';
+  import { saveCameraParamsApi } from '@/api/camera/camera-preview';
   import { formatToDateTime } from '@/utils/dateUtil';
   import { ElMessage } from 'element-plus';
   import useCameraDetailStore from '../../store/useCameraDetailStore';
-  import { onMounted } from 'vue';
-  import { videoResolutionList } from './types';
+  import { videoResolutionList, periodOptions } from './types';
 
   const cameraDetailStore = useCameraDetailStore();
 
-  onMounted(() => {
-    getCameraParamsApi(cameraDetailStore.cameraId).then((res) => {
-      cameraDetailStore.params = res;
-    });
-  });
-
   const onSubmit = () => {
     const params = cameraDetailStore.params;
-    const DATE_TIME_STR = 'YYYY-MM-DD HH:mm:ss';
-    const endTime = formatToDateTime(params.endTime, DATE_TIME_STR);
-    const startTime = formatToDateTime(params.startTime, DATE_TIME_STR);
+    const DATE_TIME_STR = 'HH:mm:ss';
+    const endAt = formatToDateTime(params.endAt, DATE_TIME_STR);
+    const startAt = formatToDateTime(params.startAt, DATE_TIME_STR);
     saveCameraParamsApi({
       ...params,
-      startTime,
-      endTime,
+      startAt,
+      endAt,
       cameraId: cameraDetailStore.cameraId,
     }).then(() => {
       ElMessage.success('保存成功');

src/views/cameras/preview/components/CameraParams/types.ts

@@ -1,10 +1,16 @@
 /** 分辨率的枚举值 */
 export enum VideoResolution {
-  '1920*1080' = 1,
-  '720*405' = 0.375,
+  'HIGH_RESOLUTION' = 1080,
+  'MEDIUM_RESOLUTION' = 720,
+  'LOW_RESOLUTION' = 360,
 }
 
 export const videoResolutionList = [
-  { label: '1920*1080', value: VideoResolution['1920*1080'] },
-  { label: '720*405', value: VideoResolution['720*405'] },
+  { label: '高分辨率(1080P)', value: VideoResolution.HIGH_RESOLUTION },
+  { label: '中分辨率(720P)', value: VideoResolution.MEDIUM_RESOLUTION },
+  { label: '低分辨率(360P)', value: VideoResolution.LOW_RESOLUTION },
 ];
+
+export const periodOptions = new Array(31).fill('').map((x, index) => {
+  return { label: `${index + 1}天`, value: index + 1 };
+});

src/views/cameras/preview/hooks/useCameraTree.ts

@@ -27,7 +27,10 @@ const useCameraTree = () => {
     onSuccess: (d) => {
       console.log('tree success', d);
       if (cameraDetailStore.cameraId) {
-        cameraDetailStore.detail = getCameraDetail(d, cameraDetailStore.cameraId);
+        const detail = getCameraDetail(d, cameraDetailStore.cameraId);
+        if (detail) {
+          cameraDetailStore.setDetail(detail);
+        }
       }
     },
   });

src/views/cameras/preview/store/useCameraDetailStore.ts

@@ -2,16 +2,15 @@
 
 import { CameraDetailServer } from '@/api/camera/camera-overview';
 import { useRouteQuery } from '@vueuse/router';
+import dayjs from 'dayjs';
 import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 interface CameraParams {
-  startTime: string;
-  endTime: string;
-  imageResolution: number;
-  recordPeriod: number;
-  /** 这个要调整一下 */
-  reservation: string;
+  startAt: string;
+  endAt: string;
+  resolution: number;
+  period: number;
 }
 
 /** 宽/长的比例 */
@@ -19,12 +18,16 @@ export const WIDTH_HEIGHT_RATIO = 0.5625;
 /** 分辨率以1920为基础 */
 export const BASE_RESOLUTION = 1920;
 
-const defaultParams = {
-  startTime: '',
-  endTime: '',
-  imageResolution: 1,
-  recordPeriod: 0,
-  reservation: '',
+const defaultParams: CameraParams = {
+  startAt: '',
+  endAt: '',
+  resolution: 1,
+  period: 0,
+};
+
+const formatDateTime = (time: string) => {
+  const dayStr = dayjs().format('YYYY-MM-DD');
+  return dayStr + ' ' + time;
 };
 
 const useCameraDetailStore = defineStore('cameraDetail', () => {
@@ -35,21 +38,21 @@ const useCameraDetailStore = defineStore('cameraDetail', () => {
   /** 参数设置 */
   const params = ref<CameraParams>({ ...defaultParams });
 
-  const videoSize = computed(() => {
-    const width = params.value.imageResolution * BASE_RESOLUTION;
-    const height = width * WIDTH_HEIGHT_RATIO;
-    return { width, height };
-  });
-
   const setDetail = (newDetail: CameraDetailServer) => {
     detail.value = newDetail;
+    params.value = {
+      startAt: formatDateTime(newDetail.nvrStartAt || '00:00:00'),
+      endAt: formatDateTime(newDetail.nvrEndAt || '23:59:59'),
+      resolution: newDetail.resolution,
+      period: newDetail.nvrPeriod,
+    };
   };
 
   const clear = () => {
     detail.value = null;
     params.value = { ...defaultParams };
   };
-  return { detail, setDetail, cameraId, params, videoSize, clear };
+  return { detail, setDetail, cameraId, params, clear };
 });
 
 export default useCameraDetailStore;