275 lines
12 KiB
Vue
275 lines
12 KiB
Vue
<template>
|
||
<div id="video">
|
||
<div class="header"><span>视频监控</span></div>
|
||
<div style="width: 100%;display: flex;justify-content: space-between;">
|
||
<div style="width: 20%;">
|
||
<el-tree style="height: 700px; overflow: scroll"
|
||
:data="devicesOptions" :props="defaultProps"
|
||
:default-expand-all="true"
|
||
:expand-on-click-node="false" @node-click="handleNodeClick"
|
||
ref="typeTree" node-key="deviceId" highlight-current
|
||
></el-tree>
|
||
</div>
|
||
<div class="contant">
|
||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" @click="chosenWindow(1)">
|
||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
|
||
<iframe src="iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span>
|
||
</div>
|
||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(2)">
|
||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
|
||
<iframe src="iframe.html" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span>
|
||
</div>
|
||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(3)">
|
||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
|
||
<iframe src="iframe.html" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span>
|
||
</div>
|
||
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px" @click="chosenWindow(4)">
|
||
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
|
||
<iframe src="iframe.html" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
|
||
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
<script src="./codebase/webVideoCtrl.js"></script>
|
||
<script>
|
||
import $ from 'jquery';
|
||
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices";
|
||
export default {
|
||
name: 'videoMonitoring',
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
deviceData:[
|
||
],
|
||
deviceName1:'监控1',
|
||
deviceName2:'监控2',
|
||
deviceName3:'监控3',
|
||
deviceName4:'监控4',
|
||
titleList:[],
|
||
devicesOptions:[],
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "deviceName",
|
||
id: "deviceId"
|
||
},
|
||
chosenWinNo:1,
|
||
chosenChannel:null
|
||
};
|
||
},
|
||
created() {
|
||
// monitor.clickLogin()
|
||
},
|
||
mounted() {
|
||
this.getKitchenDeviceSelect();
|
||
this.videoLogin();
|
||
|
||
},
|
||
methods:{
|
||
// 门禁设备选项
|
||
getKitchenDeviceSelect(){
|
||
getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
|
||
this.devicesOptions = response.data
|
||
})
|
||
},
|
||
chosenWindow(num){
|
||
this.chosenWinNo = num;
|
||
setTimeout(() => {
|
||
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
|
||
}, 500);
|
||
},
|
||
async handleNodeClick(data, node) {
|
||
console.log(data)
|
||
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
||
let obj = JSON.parse(data.deviceExtendInfo)
|
||
console.log(obj)
|
||
this.chosenChannel = '28'
|
||
setTimeout(() => {
|
||
this.iframeLogin(this.chosenWinNo,this.chosenChannel)
|
||
}, 500);
|
||
}else{
|
||
this.$modal.msgError("设备未绑定通道号");
|
||
}
|
||
},
|
||
iframeLoaded(domId,channel){
|
||
var oLiveView = {
|
||
iProtocol: 1, // protocol 1<><31>http, 2:https
|
||
szIP: "192.168.1.10", // protocol ip
|
||
szPort: "80", // protocol port
|
||
szUsername: "admin", // device username
|
||
szPassword: "hzx12345", // device password
|
||
iStreamType: 2, // stream 1<><31>main stream 2<><32>sub-stream 3<><33>third stream 4<><34>transcode stream
|
||
iChannelID: 1, // channel no
|
||
bZeroChannel: false // zero channel
|
||
};
|
||
if(domId=='1'){
|
||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||
setTimeout(function () {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
if(domId=='2'){
|
||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||
setTimeout(function () {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
if(domId=='3'){
|
||
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
|
||
setTimeout(function () {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
if(domId=='4'){
|
||
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
|
||
setTimeout(function () {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
},
|
||
iframeLogin(domId,channel){
|
||
var oLiveView = {
|
||
iProtocol: 1, // protocol 1<><31>http, 2:https
|
||
szIP: "192.168.1.10", // protocol ip
|
||
szPort: "80", // protocol port
|
||
szUsername: "admin", // device username
|
||
szPassword: "hzx12345", // device password
|
||
iStreamType: 2, // stream 1<><31>main stream 2<><32>sub-stream 3<><33>third stream 4<><34>transcode stream
|
||
iChannelID: 1, // channel no
|
||
bZeroChannel: false // zero channel
|
||
};
|
||
if(domId=='1'){
|
||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||
oWebVideoCtrl1.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||
success: function (xmlDoc) {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
setTimeout(function () {
|
||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
});
|
||
}
|
||
if(domId=='2'){
|
||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||
oWebVideoCtrl2.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||
success: function (xmlDoc) {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
setTimeout(function () {
|
||
oWebVideoCtrl2.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
});
|
||
}
|
||
if(domId=='3'){
|
||
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
|
||
oWebVideoCtrl3.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||
success: function (xmlDoc) {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
setTimeout(function () {
|
||
oWebVideoCtrl3.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
});
|
||
}
|
||
if(domId=='4'){
|
||
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
|
||
oWebVideoCtrl4.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||
success: function (xmlDoc) {
|
||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||
setTimeout(function () {
|
||
oWebVideoCtrl4.I_StartRealPlay(szDeviceIdentify, {
|
||
iStreamType: oLiveView.iStreamType,
|
||
iChannelID: channel,
|
||
bZeroChannel: oLiveView.bZeroChannel
|
||
});
|
||
}, 500);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
openVideo(playId){
|
||
// this.$emit('openVideo',true,playId);
|
||
// this.videoVisible = true;
|
||
// monitor.clickStopRealPlay()
|
||
// monitor.clickStartRealPlay(null,'1')
|
||
// this.$refs.vueRef.play();//播放
|
||
},
|
||
videoLogin(){
|
||
setTimeout(() => {
|
||
this.iframeLogin('1','11')
|
||
this.iframeLogin('2','12')
|
||
this.iframeLogin('3','27')
|
||
this.iframeLogin('4','28')
|
||
}, 1000);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
#video{
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0 0.2rem;
|
||
.header{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #000;
|
||
margin-top: 20px;
|
||
span{
|
||
margin-left: 40px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.contant{
|
||
width: 80%;
|
||
height: auto;
|
||
// height: 85%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-content: center;
|
||
flex-wrap: wrap;
|
||
padding-top: 1%;
|
||
}
|
||
}
|
||
|
||
</style>
|