参数设置
fanluyan
2 years ago
parent
56ada23704
commit
363e498cb8
@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="setimgDialog"
|
||||
title="视频采集参数"
|
||||
:visible.sync="isShow"
|
||||
:close-on-click-modal="false"
|
||||
width="60%"
|
||||
@close="handleclose"
|
||||
>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
|
||||
<el-tab-pane label="查询实际参数" name="1">
|
||||
<div class="flexnr">
|
||||
<div class="wt80">通道:</div>
|
||||
<el-select v-model="selaccess" placeholder="请选择" class="mr20">
|
||||
<el-option
|
||||
v-for="item in accesslist"
|
||||
:key="item.channelid"
|
||||
:label="item.channelname"
|
||||
:value="item.channelid"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
:loading="searchloading"
|
||||
type="primary"
|
||||
@click="inquirebtn()"
|
||||
>查询</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="flexno bt30">
|
||||
<div class="wt80">视频分辨率:</div>
|
||||
<el-select
|
||||
v-model="capturenr.videoFormat"
|
||||
class="wt280"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ratiolist"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="flexno bt30">
|
||||
<div class="wt80">预置位:</div>
|
||||
<el-input
|
||||
v-model="capturenr.preset"
|
||||
:disabled="true"
|
||||
class="wt280"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="flexno bt30">
|
||||
<div class="wt80">录制时长:</div>
|
||||
<el-input
|
||||
v-model="capturenr.videoTime"
|
||||
:disabled="true"
|
||||
class="wt280"
|
||||
>
|
||||
<template slot="append">s (秒)</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设置参数" name="2">
|
||||
<el-form
|
||||
:model="setForm"
|
||||
:rules="rules"
|
||||
ref="setForm"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="通道" prop="channelId">
|
||||
<el-select
|
||||
v-model="setForm.channelId"
|
||||
placeholder="请选择"
|
||||
class="mr20"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in accesslist"
|
||||
:key="item.channelid"
|
||||
:label="item.channelname"
|
||||
:value="item.channelid"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="视频分辨率" prop="videoFormat">
|
||||
<el-select
|
||||
v-model="setForm.videoFormat"
|
||||
placeholder="请选择"
|
||||
class="mr20"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in ratiolist"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预置位" prop="preset">
|
||||
<el-input-number
|
||||
v-model="setForm.preset"
|
||||
:min="1"
|
||||
:max="255"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="录制时长 s(秒)" prop="videoTime">
|
||||
<el-input-number
|
||||
v-model="setForm.videoTime"
|
||||
:min="1"
|
||||
:max="100"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitbtn('setForm')"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getChannelListJoggle,
|
||||
getVideoParamApi,
|
||||
setVideoParamApi,
|
||||
getVideoParamnrApi,
|
||||
getResolutionRatio,
|
||||
} from "@/utils/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
isShow: false,
|
||||
searchloading: false,
|
||||
activeName: "1", //选项卡
|
||||
accesslist: [], //通道选择器
|
||||
ratiolist: [], //分辨率
|
||||
selaccess: "", //选中的通道
|
||||
capturenr: {}, //查询后的内容
|
||||
setForm: {}, //设置参数
|
||||
rules: {
|
||||
channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
|
||||
videoTime: [
|
||||
{ required: true, message: "请输入录制时长", trigger: "blur" },
|
||||
],
|
||||
preset: [{ required: true, message: "请输入预置位", trigger: "blur" }],
|
||||
videoFormat: [
|
||||
{ required: true, message: "请选择视频分辨率", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
timer: null,
|
||||
i: 0,
|
||||
seltermid: "", //装置id
|
||||
selcmdId: "", //cmdId
|
||||
requestId: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
//获取设备通道
|
||||
getSingleAccess(val) {
|
||||
this.setForm = {};
|
||||
console.log(val);
|
||||
this.seltermid = val.id;
|
||||
this.selcmdId = val.cmdid;
|
||||
getChannelListJoggle({ termid: this.seltermid })
|
||||
.then((res) => {
|
||||
this.accesslist = res.data.list;
|
||||
this.selaccess = res.data.list[0].channelid;
|
||||
this.$set(this.setForm, "channelId", res.data.list[0].channelid);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//获取分辨率
|
||||
getRatio() {
|
||||
getResolutionRatio({ type: 1 })
|
||||
.then((res) => {
|
||||
this.ratiolist = res.data.list;
|
||||
this.$set(this.setForm, "videoFormat", res.data.list[0].id);
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//查询触发
|
||||
inquirebtn() {
|
||||
this.loading = true;
|
||||
this.searchloading = true;
|
||||
getVideoParamApi({
|
||||
channelId: this.selaccess,
|
||||
cmdId: this.selcmdId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.requestId = res.data.requestId;
|
||||
this.inquirenr();
|
||||
this.timer = window.setInterval(() => {
|
||||
this.inquirenr();
|
||||
this.i++;
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$message.error(res.code.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//查询接口
|
||||
inquirenr() {
|
||||
getVideoParamnrApi({
|
||||
// channelId: this.selaccess,
|
||||
// termId: this.seltermid,
|
||||
requestId: this.requestId,
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.code == 200) {
|
||||
this.capturenr = res.data;
|
||||
if (res.data.isNew == true) {
|
||||
this.searchloading = false;
|
||||
this.i = 0;
|
||||
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "查询已更新",
|
||||
type: "success",
|
||||
});
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
} else if (this.i > 9) {
|
||||
this.searchloading = false;
|
||||
this.i = 0;
|
||||
|
||||
this.$message({
|
||||
duration: 1500,
|
||||
showClose: true,
|
||||
message: "暂无响应，请稍后再试！",
|
||||
type: "warning",
|
||||
});
|
||||
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.code.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {});
|
||||
},
|
||||
//确认
|
||||
submitbtn(setForm) {
|
||||
this.$set(this.setForm, "cmdId", this.selcmdId);
|
||||
// this.$set(this.setForm, "termId", this.seltermid);
|
||||
this.$refs[setForm].validate((valid) => {
|
||||
if (valid) {
|
||||
setVideoParamApi(this.setForm)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.$message.success("设置成功");
|
||||
this.isShow = false;
|
||||
} else {
|
||||
this.$message.error(res.code.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error("设置失败");
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
display() {
|
||||
this.isShow = true;
|
||||
},
|
||||
hide() {
|
||||
this.isShow = false;
|
||||
},
|
||||
handleclose() {
|
||||
this.searchloading = false;
|
||||
this.i = 0;
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.setimgDialog {
|
||||
.el-tabs__content {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
.el-tab-pane {
|
||||
height: calc(100% - 16px);
|
||||
}
|
||||
}
|
||||
.flexonly {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flexno {
|
||||
display: flex;
|
||||
margin-top: 24px;
|
||||
padding: 0px 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.flexnr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 0px 8px;
|
||||
}
|
||||
.mt10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.w8 {
|
||||
width: 8%;
|
||||
}
|
||||
.wt80 {
|
||||
width: 80px;
|
||||
}
|
||||
.wt280 {
|
||||
width: 280px;
|
||||
}
|
||||
.w80 {
|
||||
width: 90%;
|
||||
overflow-y: auto;
|
||||
height: 300px;
|
||||
}
|
||||
.mr20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bt30 {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.deviceTable {
|
||||
padding: 16px 8px 0 8px;
|
||||
height: calc(100% - 16px);
|
||||
.rulesBox {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
li {
|
||||
list-style: none;
|
||||
margin-right: 24px;
|
||||
line-height: 24px;
|
||||
span {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.el-tag--small {
|
||||
height: 16px;
|
||||
padding: 0 8px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setRoadDialog {
|
||||
.el-dialog__body {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
.el-form {
|
||||
height: 100%;
|
||||
//background: #fcc;
|
||||
}
|
||||
.setTimeTd {
|
||||
h3 {
|
||||
margin: 8px 0px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.timename {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue