301 lines
10 KiB
Vue
301 lines
10 KiB
Vue
<template>
|
|
<a-spin :spinning="confirmLoading">
|
|
<JFormContainer :disabled="disabled">
|
|
<template #detail>
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-row>
|
|
<a-col :span="20">
|
|
<a-divider orientation="left">主码流</a-divider>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
分辨率
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.main_resolution" :options="formData.mainResolutionArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
视频帧率
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.main_frame_rate" :options="formData.mainFrameRatesArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
码率类型
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.main_bitrate_type" :options="formData.mainBitrateTypeArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
图像质量
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.main_quality" :options="formData.mainQualityArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 10px">
|
|
<a-col :span="6" class="labelText">
|
|
码率上限
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.main_bitrate" :options="formData.mainBitrateArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 10px">
|
|
<a-col :span="6" class="labelText">
|
|
视频编码
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.main_encode_type" :options="formData.mainEncodeTypeArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row style="margin-top: 14px">
|
|
<a-col :span="1"></a-col>
|
|
<a-col :span="20">
|
|
<a-button type="primary" preIcon="ant-design:save-outlined" @click="setParams">保存</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-row>
|
|
<a-col :span="20">
|
|
<a-divider orientation="left">子码流</a-divider>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
分辨率
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.minor_resolution" :options="formData.minorResolutionArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
视频帧率
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.minor_frame_rate" :options="formData.minorFrameRatesArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
码率类型
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.minor_bitrate_type" :options="formData.minorBitrateTypeArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 14px">
|
|
<a-col :span="6" class="labelText">
|
|
图像质量
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.minor_quality" :options="formData.minorQualityArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 10px">
|
|
<a-col :span="6" class="labelText">
|
|
码率上限
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.minor_bitrate" :options="formData.minorBitrateArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-row style="margin-bottom: 10px">
|
|
<a-col :span="6" class="labelText">
|
|
视频编码
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-select v-model:value="formData.minor_encode_type" :options="formData.minorEncodeTypeArr"/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</JFormContainer>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, defineProps, onMounted, watch,} from 'vue';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
|
import { getValueType } from '/@/utils';
|
|
import { Form } from 'ant-design-vue';
|
|
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
|
import { getVideoParams,setVideoParams } from "@/views/iot/tplink/camera/camera.api";
|
|
|
|
const props = defineProps({
|
|
data: { type: Object, default: () => ({}) },
|
|
});
|
|
|
|
const formData = reactive<Record<string, any>>({
|
|
deviceIndex: '', //设备索引
|
|
|
|
main_quality: '', //图像质量
|
|
mainQualityArr: [],
|
|
main_bitrate: '', //码率上限
|
|
mainBitrateArr: [],
|
|
main_frame_rate: '', //帧速率
|
|
mainFrameRatesArr: [],
|
|
main_encode_type: '', //视频编码
|
|
mainEncodeTypeArr: [],
|
|
main_resolution: '', //分辨率
|
|
mainResolutionArr: [],
|
|
main_bitrate_type: '', //码率类型
|
|
mainBitrateTypeArr: [],
|
|
|
|
minor_quality: '', //图像质量
|
|
minorQualityArr: [],
|
|
minor_bitrate: '', //码率上限
|
|
minorBitrateArr: [],
|
|
minor_frame_rate: '', //帧速率
|
|
minorFrameRatesArr: [],
|
|
minor_encode_type: '', //视频编码
|
|
minorEncodeTypeArr: [],
|
|
minor_resolution: '', //分辨率
|
|
minorResolutionArr: [],
|
|
minor_bitrate_type: '', //码率类型
|
|
minorBitrateTypeArr: [],
|
|
|
|
});
|
|
|
|
const confirmLoading = ref<boolean>(false);
|
|
|
|
/**
|
|
* 获取画面通用信息
|
|
*/
|
|
function getParams(deviceIndex){
|
|
if(deviceIndex==null){
|
|
return
|
|
}
|
|
getVideoParams({
|
|
"deviceIndex": deviceIndex
|
|
}).then(res=>{
|
|
let mainData = res.mainData;
|
|
let minorData = res.minorData;
|
|
|
|
formData.main_quality = mainData.quality;
|
|
formData.main_bitrate = mainData.bitrate;
|
|
formData.main_frame_rate = mainData.frame_rate;
|
|
formData.main_encode_type = mainData.encode_type;
|
|
formData.main_resolution = mainData.resolution;
|
|
formData.main_bitrate_type = mainData.bitrate_type;
|
|
|
|
formData.minor_quality = minorData.quality;
|
|
formData.minor_bitrate = minorData.bitrate;
|
|
formData.minor_frame_rate = minorData.frame_rate;
|
|
formData.minor_encode_type = minorData.encode_type;
|
|
formData.minor_resolution = minorData.resolution;
|
|
formData.minor_bitrate_type = minorData.bitrate_type;
|
|
|
|
formData.mainQualityArr = res.mainQualityArr;
|
|
formData.mainBitrateArr = res.mainBitrateArr;
|
|
formData.mainFrameRatesArr = res.mainFrameRatesArr;
|
|
formData.mainEncodeTypeArr = res.mainEncodeTypeArr;
|
|
formData.mainResolutionArr = res.mainResolutionArr;
|
|
formData.mainBitrateTypeArr = res.mainBitrateTypeArr;
|
|
|
|
formData.minorQualityArr = res.minorQualityArr;
|
|
formData.minorBitrateArr = res.minorBitrateArr;
|
|
formData.minorFrameRatesArr = res.minorFrameRatesArr;
|
|
formData.minorEncodeTypeArr = res.minorEncodeTypeArr;
|
|
formData.minorResolutionArr = res.minorResolutionArr;
|
|
formData.minorBitrateTypeArr = res.minorBitrateTypeArr;
|
|
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 设置画面通用信息
|
|
*/
|
|
function setParams(){
|
|
confirmLoading.value = true;
|
|
let params = {
|
|
"deviceIndex": formData.deviceIndex,
|
|
"main":{
|
|
"quality": formData.main_quality,
|
|
"bitrate": formData.main_bitrate,
|
|
"frame_rate": formData.main_frame_rate,
|
|
"encode_type": formData.main_encode_type,
|
|
"resolution": formData.main_resolution,
|
|
"bitrate_type": formData.main_bitrate_type,
|
|
},
|
|
"minor":{
|
|
"quality": formData.minor_quality,
|
|
"bitrate": formData.minor_bitrate,
|
|
"frame_rate": formData.minor_frame_rate,
|
|
"encode_type": formData.minor_encode_type,
|
|
"resolution": formData.minor_resolution,
|
|
"bitrate_type": formData.minor_bitrate_type,
|
|
},
|
|
};
|
|
setVideoParams(params).then(res=>{
|
|
confirmLoading.value = false;
|
|
});
|
|
}
|
|
|
|
onMounted(() => {
|
|
watch(
|
|
() => props.data,
|
|
async () => {
|
|
formData.deviceIndex = props.data.deviceIndex;
|
|
getParams(formData.deviceIndex);
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.antd-modal-form {
|
|
padding: 14px;
|
|
}
|
|
|
|
.labelText {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.ant-select {
|
|
display: flex;
|
|
}
|
|
|
|
</style>
|