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

<template>
  <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-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.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>
    </el-form-item>
    <el-form-item label="录制时间：">
      <el-col :span="11">
        <el-time-picker
          v-model="cameraDetailStore.params.startTime"
          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.endTime"
          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 { getCameraParamsApi, 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';

  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);
    saveCameraParamsApi({
      ...params,
      startTime,
      endTime,
      cameraId: cameraDetailStore.cameraId,
    }).then((res) => {
      ElMessage.success('保存成功');
    });
  };
</script>

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