You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
317 lines
8.3 KiB
Vue
317 lines
8.3 KiB
Vue
<template>
|
|
<div class="videobtnbox">
|
|
<!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
|
|
>主动录像
|
|
</el-button> -->
|
|
<el-dropdown trigger="click" @command="handleCommandpic">
|
|
<el-button type="primary" :loading="picLoading">
|
|
主动录像<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown" class="picdropStyle">
|
|
<el-dropdown-item
|
|
:command="item.channelid"
|
|
v-for="(item, index) in channelIdList"
|
|
:key="index"
|
|
>{{
|
|
item.alias !== null && item.alias !== ""
|
|
? item.alias
|
|
: item.channelname
|
|
}}</el-dropdown-item
|
|
>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
<el-dialog
|
|
class="videoDialog"
|
|
title="配置参数"
|
|
:visible.sync="videoVisible"
|
|
>
|
|
<el-form :model="videoForm" label-width="94px" ref="videoRef">
|
|
<el-form-item label="码流类型">
|
|
<el-select v-model="videoForm.stream">
|
|
<el-option label="主码流" value="0"></el-option>
|
|
<el-option label="从码流" value="1"></el-option>
|
|
<el-option label="第3码流" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="时间 s(秒)"
|
|
prop="time"
|
|
:rules="[
|
|
{ required: true, message: '时间不能为空' },
|
|
{ type: 'number', message: '时间必须为数字值' },
|
|
]"
|
|
>
|
|
<el-input-number
|
|
v-model="videoForm.time"
|
|
:min="1"
|
|
:max="60"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="videoVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="anVideoFn">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getTermStatus,
|
|
setTermCamera,
|
|
getTakePicStatusJoggle,
|
|
getTakePicPhotoStatusJoggle,
|
|
} from "@/utils/api/index";
|
|
export default {
|
|
data() {
|
|
return {
|
|
picLoading: false,
|
|
statusTimer: null,
|
|
statusNum: 0,
|
|
picPimer: null,
|
|
picNum: 0,
|
|
videoVisible: false,
|
|
pzchannelId: "",
|
|
videoForm: {
|
|
stream: "0",
|
|
time: 20,
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
// protocol: {
|
|
// handler(newVal, oldVal) {},
|
|
// deep: true,
|
|
// immediate: true,
|
|
// },
|
|
termId: {
|
|
handler(newVal, oldVal) {
|
|
clearInterval(this.statusTimer);
|
|
this.statusTimer = null;
|
|
this.statusNum = 0;
|
|
this.picLoading = false;
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
// channelId: {
|
|
// handler(newVal, oldVal) {},
|
|
// deep: true,
|
|
// immediate: true,
|
|
// },
|
|
},
|
|
computed: {
|
|
termId() {
|
|
return this.$store.state.termId;
|
|
},
|
|
channelIdList() {
|
|
return this.$store.state.channelIdList;
|
|
},
|
|
protocol() {
|
|
return this.$store.state.protocol;
|
|
},
|
|
},
|
|
methods: {
|
|
handleCommandpic(command) {
|
|
console.log(command);
|
|
this.pzchannelId = command;
|
|
this.picLoading = true;
|
|
getTermStatus({ termId: this.termId }).then((res) => {
|
|
console.log(res);
|
|
if (res.data.isonline) {
|
|
console.log(this.protocol);
|
|
if (this.protocol == "65281") {
|
|
this.videoVisible = true;
|
|
} else {
|
|
this.picLoading = true;
|
|
let params = [
|
|
{
|
|
name: "act",
|
|
value: "capture",
|
|
},
|
|
{
|
|
name: "channel",
|
|
value: command,
|
|
},
|
|
{
|
|
name: "preset",
|
|
value: 255,
|
|
},
|
|
{
|
|
name: "type",
|
|
value: 1,
|
|
},
|
|
];
|
|
this.setTermFn(params);
|
|
}
|
|
} else {
|
|
this.picLoading = false;
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
message: "装置下线，发送指令失败",
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
anVideoFn() {
|
|
this.$refs.videoRef.validate((valid) => {
|
|
if (valid) {
|
|
this.videoVisible = false;
|
|
this.picLoading = true;
|
|
let params = [
|
|
{
|
|
name: "act",
|
|
value: "capture",
|
|
},
|
|
{
|
|
name: "channel",
|
|
value: this.pzchannelId,
|
|
},
|
|
{
|
|
name: "preset",
|
|
value: 255,
|
|
},
|
|
{
|
|
name: "type",
|
|
value: 1,
|
|
},
|
|
{
|
|
name: "stream",
|
|
value: this.videoForm.stream,
|
|
},
|
|
{
|
|
name: "videoTime",
|
|
value: this.videoForm.time,
|
|
},
|
|
];
|
|
this.setTermFn(params);
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
//下发命令
|
|
setTermFn(val) {
|
|
setTermCamera({
|
|
termId: this.termId,
|
|
list: val,
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.getTakePicStatus(res.data);
|
|
clearInterval(this.statusTimer);
|
|
this.statusTimer = null;
|
|
this.statusTimer = window.setInterval(() => {
|
|
this.getTakePicStatus(res.data);
|
|
this.statusNum++;
|
|
}, 3000);
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//查询命令是否下发成功
|
|
getTakePicStatus(val) {
|
|
console.log(val);
|
|
getTakePicStatusJoggle({
|
|
requestid: val.requestId,
|
|
termId: this.termId,
|
|
photoTime: new Date(val.date).getTime(),
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
//res.data 0 状态未知 1 成功 2失败
|
|
if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
|
|
this.clearFn();
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
message: "下发指令超时，请重试！",
|
|
type: "warning",
|
|
});
|
|
} else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
|
|
this.clearFn();
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
message: "下发指令成功！",
|
|
type: "success",
|
|
});
|
|
clearInterval(this.picPimer);
|
|
this.picPimer = null;
|
|
this.picPimer = window.setInterval(() => {
|
|
this.newPicApi(val);
|
|
this.picNum++;
|
|
}, 8000);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err); //代码错误、请求失败捕获
|
|
});
|
|
},
|
|
//获取最新的图片
|
|
newPicApi(val) {
|
|
getTakePicPhotoStatusJoggle({
|
|
requestid: val.requestId,
|
|
termId: this.termId,
|
|
photoTime: new Date(val.date).getTime(),
|
|
}).then((res) => {
|
|
console.log(res.data);
|
|
if (res.data == true && this.picNum < 10) {
|
|
// console.log(this.$parent.$parent);
|
|
this.$parent.$parent.getPhotoList(
|
|
-1,
|
|
new Date(val.date).getTime(),
|
|
this.termId
|
|
); //获取图片列表是传当前设备的 id 和termid
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
message: "已返回最新视频！",
|
|
type: "success",
|
|
});
|
|
clearInterval(this.picPimer);
|
|
this.picPimer = null;
|
|
this.picNum = 0;
|
|
console.log("已返回最新视频！");
|
|
} else if (res.data == false && this.picNum > 10) {
|
|
clearInterval(this.picPimer);
|
|
this.picPimer = null;
|
|
this.picNum = 0;
|
|
}
|
|
});
|
|
},
|
|
clearFn() {
|
|
clearInterval(this.statusTimer);
|
|
this.statusTimer = null;
|
|
this.statusNum = 0;
|
|
this.picLoading = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.videobtnbox {
|
|
.videoDialog {
|
|
.el-dialog {
|
|
width: 380px;
|
|
}
|
|
.el-input,
|
|
.el-input-number {
|
|
width: 214px;
|
|
}
|
|
.dialog-footer {
|
|
.el-button--default,
|
|
.el-button--primary {
|
|
width: 80px !important;
|
|
}
|
|
.el-button + .el-button {
|
|
margin-left: 10px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|