smsb-web-develop/src/views/external/box/settings/components/RecordConfigDialog.vue

<template>
  <confirm-dialog
    ref="configDialog"
    :title="title"
    @confirm="onSave"
  >
    <div class="c-grid-form auto u-align-self--center">
      <span class="c-grid-form__label">宽度</span>
      <el-input-number
        v-model="recordConfig.videoWidth"
        class="has-info"
        data-info="范围：240~7680"
        controls-position="right"
        :min="240"
        :max="7680"
        step-strictly
      />
      <span class="c-grid-form__label">高度</span>
      <el-input-number
        v-model="recordConfig.videoHeight"
        class="has-info"
        data-info="范围：240~7680"
        controls-position="right"
        :min="240"
        :max="7680"
        step-strictly
      />
      <span class="c-grid-form__label">码率</span>
      <div class="l-flex--row c-grid-form__option">
        <el-input-number
          v-model="recordConfig.videoBitRate"
          controls-position="right"
          :min="36"
          step-strictly
        />
        &nbsp;Kbps（最低36Kbps)
      </div>
      <span class="c-grid-form__label">帧率</span>
      <div class="l-flex--row c-grid-form__option">
        <el-input-number
          v-model="recordConfig.frameRate"
          class="has-info"
          data-info="范围：1~24"
          controls-position="right"
          :min="1"
          :max="24"
          step-strictly
        />
        &nbsp;1~24
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import {
  getRecordConfig,
  addRecordConfig,
  updateRecordConfig
} from '@/api/device'

export default {
  name: 'RecordConfigDialog',
  data () {
    return {
      title: '',
      recordConfig: {}
    }
  },
  methods: {
    show ({ id, name }) {
      this.title = `${name}推流配置`
      const loading = this.$showLoading()
      getRecordConfig(id).then(({ data }) => {
        if (data) {
          this.$has = true
          const { videoWidth, videoHeight, videoBitRate, frameRate } = data
          this.recordConfig = {
            deviceId: id,
            videoWidth,
            videoHeight,
            videoBitRate: videoBitRate / 1024 | 0,
            frameRate
          }
        } else {
          this.$has = false
          this.recordConfig = {
            deviceId: id,
            videoWidth: 640,
            videoHeight: 360,
            videoBitRate: 36,
            frameRate: 1
          }
        }
        this.$refs.configDialog.show()
      }).finally(() => {
        this.$closeLoading(loading)
      })
    },
    onSave (done) {
      const { deviceId, videoWidth, videoHeight, videoBitRate, frameRate } = this.recordConfig
      ;(this.$has ? updateRecordConfig : addRecordConfig)({
        deviceId,
        videoWidth,
        videoHeight,
        videoBitRate: videoBitRate * 1024,
        frameRate
      }).then(() => {
        done()
        this.$message({
          type: 'success',
          message: '设置成功'
        })
      })
    }
  }
}
</script>