158 lines
4.1 KiB
Vue
158 lines
4.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-drawer
|
||
v-bind="$attrs"
|
||
v-if="onOpen"
|
||
v-on="$listeners"
|
||
@opened="onOpen"
|
||
@close="onClose"
|
||
style="padding-left: 20px"
|
||
>
|
||
<div class="videoView" v-if="showVideoView0">
|
||
<H265Player :url="url0" @on-error="handleOnError0" />
|
||
</div>
|
||
<div class="videoView videoViewError" v-if="showVideoView0 == false">
|
||
设备0通道链接失败！请及时检查！
|
||
</div>
|
||
<div class="videoView" v-if="showVideoView1">
|
||
<H265Player :url="url1" @on-error="handleOnError1" />
|
||
</div>
|
||
<div class="videoView videoViewError" v-if="showVideoView1 == false">
|
||
设备1通道链接失败！请及时检查！
|
||
</div>
|
||
<div class="videoView" v-if="showVideoView2">
|
||
<H265Player :url="url2" @on-error="handleOnError2" />
|
||
</div>
|
||
<div class="videoView videoViewError" v-if="showVideoView2 == false">
|
||
设备2通道链接失败！请及时检查！
|
||
</div>
|
||
<div class="videoView" v-if="showVideoView3">
|
||
<H265Player :url="url3" @on-error="handleOnError3" />
|
||
</div>
|
||
<div class="videoView videoViewError" v-if="showVideoView3 == false">
|
||
设备3通道链接失败！请及时检查！
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getVideoPassage, editPassageState } from "@/api/video/videoConfig";
|
||
import H265Player from "vue-h265-player";
|
||
|
||
export default {
|
||
name: "videoPlay",
|
||
components: {
|
||
H265Player,
|
||
},
|
||
props: {
|
||
formData: {
|
||
videoDvrNumber: String,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
request:
|
||
"http://111.21.209.230:7086/live/cameraid/{{videoDvrNumber}}${{passage}}/substream/2.m3u8",
|
||
url0: "",
|
||
url1: "",
|
||
url2: "",
|
||
url3: "",
|
||
showVideoView0: true,
|
||
showVideoView1: true,
|
||
showVideoView2: true,
|
||
showVideoView3: true,
|
||
videoPassageList: [],
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {
|
||
formData: {
|
||
handler(value) {
|
||
this.formData = value;
|
||
this.request = this.request.replace(
|
||
"{{videoDvrNumber}}",
|
||
this.formData.videoDvrNumber
|
||
);
|
||
this.initVideo();
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
created() {},
|
||
mounted() {},
|
||
beforeDestroy() {},
|
||
methods: {
|
||
onOpen() {},
|
||
onClose() {},
|
||
handleOnError0(error) {
|
||
this.showVideoView0 = false;
|
||
console.log("error: ", error);
|
||
this.updatePassageState(this.videoPassageList[0].id);
|
||
},
|
||
handleOnError1(error) {
|
||
this.showVideoView1 = false;
|
||
console.log("error: ", error);
|
||
this.updatePassageState(this.videoPassageList[1].id);
|
||
},
|
||
handleOnError2(error) {
|
||
this.showVideoView2 = false;
|
||
console.log("error: ", error);
|
||
this.updatePassageState(this.videoPassageList[2].id);
|
||
},
|
||
handleOnError3(error) {
|
||
this.showVideoView3 = false;
|
||
console.log("error: ", error);
|
||
this.updatePassageState(this.videoPassageList[3].id);
|
||
},
|
||
//查询视频通道
|
||
initVideo() {
|
||
getVideoPassage(this.formData.videoDvrNumber).then((response) => {
|
||
let data = response.data;
|
||
this.videoPassageList = data;
|
||
data.forEach((it, idx) => {
|
||
if (idx == 0) {
|
||
this.url0 = this.request.replace("{{passage}}", it.passageValue);
|
||
}
|
||
if (idx == 1) {
|
||
this.url1 = this.request.replace("{{passage}}", it.passageValue);
|
||
}
|
||
if (idx == 2) {
|
||
this.url2 = this.request.replace("{{passage}}", it.passageValue);
|
||
}
|
||
if (idx == 3) {
|
||
this.url3 = this.request.replace("{{passage}}", it.passageValue);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
updatePassageState(id) {
|
||
let param = {
|
||
id: id,
|
||
videoDvrNumber: this.formData.videoDvrNumber,
|
||
passageState: "2",
|
||
};
|
||
//editPassageState(param);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "@/styles/mixin.scss";
|
||
|
||
::v-deep .el-drawer__header {
|
||
display: none;
|
||
}
|
||
.videoView {
|
||
color: aliceblue;
|
||
float: left;
|
||
width: 50%;
|
||
height: 50%;
|
||
}
|
||
.videoViewError {
|
||
background-color: #575e65;
|
||
text-align: center;
|
||
line-height: 324px;
|
||
}
|
||
</style>
|