参数设置
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