bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
bonus-ui/src/views/kitchen/environment/videoMonitoring/index.vue

338 lines
15 KiB
Vue
Raw Normal View History

视频监控
2025-06-26 16:20:38 +08:00
<template>
<div id="video">
监控修改
2025-06-30 14:18:52 +08:00
<div style="width: 100%;">
<el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
<el-tab-pane label="视频监控" name="1">
<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;">
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('1')"></div>
<iframe src="iframe.html?type=1" 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">
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('2')"></div>
<iframe src="iframe.html?type=1" 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">
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('3')"></div>
<iframe src="iframe.html?type=1" 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">
<div style="width: 100%;height: 100%;position: fixed;" @click="chosenWindow('4')"></div>
<iframe src="iframe.html?type=1" 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>
</el-tab-pane>
<el-tab-pane label="历史视频" name="2">
<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: 100%;height: 600px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
<div style="width: 100%;height: 100%;position: fixed;"></div>
<iframe src="iframe.html?type=2" ref="videoIframe5" 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>
</div>
</el-tab-pane>
</el-tabs>
</div>
视频监控修改2
2025-06-27 16:48:42 +08:00
视频监控
2025-06-26 16:20:38 +08:00
</div>
</template>
<script src="./codebase/webVideoCtrl.js"></script>
<script>
import $ from 'jquery';
视频监控修改2
2025-06-27 16:48:42 +08:00
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices";
视频监控
2025-06-26 16:20:38 +08:00
export default {
name: 'videoMonitoring',
components: {
},
data() {
return {
监控修改
2025-06-30 14:18:52 +08:00
activeName:'1',
视频监控
2025-06-26 16:20:38 +08:00
deviceData:[
],
deviceName1:'监控1',
deviceName2:'监控2',
deviceName3:'监控3',
deviceName4:'监控4',
视频监控修改2
2025-06-27 16:48:42 +08:00
titleList:[],
devicesOptions:[],
defaultProps: {
children: "children",
label: "deviceName",
id: "deviceId"
},
chosenWinNo:1,
chosenChannel:null
视频监控
2025-06-26 16:20:38 +08:00
};
},
created() {
// monitor.clickLogin()
},
mounted() {
视频监控修改2
2025-06-27 16:48:42 +08:00
this.getKitchenDeviceSelect();
监控修改
2025-06-30 14:18:52 +08:00
this.videoLogin();
视频监控
2025-06-26 16:20:38 +08:00
},
methods:{
视频监控修改2
2025-06-27 16:48:42 +08:00
// 门禁设备选项
getKitchenDeviceSelect(){
getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
this.devicesOptions = response.data
})
},
监控修改
2025-06-30 14:18:52 +08:00
// 初始化监控列表
videoLogin(){
setTimeout(() => {
this.iframeLogin('1','11')
this.iframeLogin('2','12')
this.iframeLogin('3','27')
this.iframeLogin('4','28')
}, 1000);
},
//点击设备
handleTabClick(tab){
console.log(this.activeName)
if(this.activeName=='1'){
}
if(this.activeName=='2'){
}
},
视频监控修改2
2025-06-27 16:48:42 +08:00
chosenWindow(num){
监控修改
2025-06-30 14:18:52 +08:00
console.log(num)
视频监控修改2
2025-06-27 16:48:42 +08:00
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("设备未绑定通道号");
}
},
监控修改
2025-06-30 14:18:52 +08:00
iframeLoaded(domId,channel){
console.log(domId)
console.log(channel)
视频监控修改2
2025-06-27 16:48:42 +08:00
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;
监控修改
2025-06-30 14:18:52 +08:00
oWebVideoCtrl1.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
// 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);
// }
// });
视频监控修改2
2025-06-27 16:48:42 +08:00
}
if(domId=='2'){
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
监控修改
2025-06-30 14:18:52 +08:00
oWebVideoCtrl2.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
// 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);
// }
// });
视频监控修改2
2025-06-27 16:48:42 +08:00
}
if(domId=='3'){
监控修改
2025-06-30 14:18:52 +08:00
var oWebVideoCtrl3 = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
oWebVideoCtrl3.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
// 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);
// }
// });
视频监控修改2
2025-06-27 16:48:42 +08:00
}
if(domId=='4'){
监控修改
2025-06-30 14:18:52 +08:00
var oWebVideoCtrl4 = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
oWebVideoCtrl4.I_Logout(oLiveView.szIP + "_" + oLiveView.szPort)
// 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);
// }
// });
}
视频监控修改2
2025-06-27 16:48:42 +08:00
},
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);
视频监控
2025-06-26 16:20:38 +08:00
}
视频监控修改2
2025-06-27 16:48:42 +08:00
});
}
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);
视频监控
2025-06-26 16:20:38 +08:00
}
视频监控修改2
2025-06-27 16:48:42 +08:00
});
}
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);
视频监控
2025-06-26 16:20:38 +08:00
}
视频监控修改2
2025-06-27 16:48:42 +08:00
});
}
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);
视频监控
2025-06-26 16:20:38 +08:00
}
视频监控修改2
2025-06-27 16:48:42 +08:00
});
}
视频监控
2025-06-26 16:20:38 +08:00
},
openVideo(playId){
// this.$emit('openVideo',true,playId);
// this.videoVisible = true;
// monitor.clickStopRealPlay()
// monitor.clickStartRealPlay(null,'1')
// this.$refs.vueRef.play();//播放
},
监控修改
2025-06-30 14:18:52 +08:00
视频监控
2025-06-26 16:20:38 +08:00
}
}
</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{
视频监控修改2
2025-06-27 16:48:42 +08:00
width: 80%;
视频监控
2025-06-26 16:20:38 +08:00
height: auto;
// height: 85%;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
padding-top: 1%;
}
}
</style>