sl-sfy-safety/src/views/cameras/preview/components/CameraParams/CameraParams.vue

<template>
  <div class="cameraParamTitle">相机参数设置</div>
  <el-form :model="cameraDetailStore" label-width="130px" lable-position="left">
    <el-form-item label="分辨率：">
      <el-select v-model="cameraDetailStore.params.resolution" style="width: 100%" size="small">
        <el-option
          v-for="x in videoResolutionList"
          :label="x.label"
          :value="x.value"
          :key="x.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="录制周期：">
      <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.startAt"
          style="width: 100%"
          size="small"
        />
      </el-col>
      <el-col :span="1">
        <span class="text-center">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker v-model="cameraDetailStore.params.endAt" style="width: 100%" size="small" />
      </el-col>
    </el-form-item>
    <!-- <el-form-item label="返回预置位：">
      <el-input v-model="cameraDetailStore.params.reservation" size="small" />
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { saveCameraParamsApi } from '@/api/camera/camera-preview';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { ElMessage } from 'element-plus';
  import useCameraDetailStore from '../../store/useCameraDetailStore';
  import { videoResolutionList, periodOptions } from './types';

  const cameraDetailStore = useCameraDetailStore();

  const onSubmit = () => {
    const params = cameraDetailStore.params;
    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,
      startAt,
      endAt,
      cameraId: cameraDetailStore.cameraId,
    }).then(() => {
      ElMessage.success('保存成功');
      if (!cameraDetailStore.detail) return;
      cameraDetailStore.detail.nvrPeriod = params.period;
      cameraDetailStore.detail.resolution = params.resolution;
      cameraDetailStore.detail.nvrStartAt = params.startAt;
      cameraDetailStore.detail.nvrEndAt = params.endAt;
    });
  };
</script>

<style scoped>
  .text-center {
    /* text-align: center; */
    margin-left: 2px;
  }
  .cameraParamTitle {
    font-weight: bold;
  }
</style>