bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

监控修改

This commit is contained in:
zzyuan 2025-06-30 14:18:52 +08:00
parent 772a51037c
commit d86c765ea5
3 changed files with 153 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/iframe.html
View File

@ -30,19 +30,19 @@ html, body {
<script src="./codebase/webVideoCtrl.js"></script>
<script>
var urlParams = new URLSearchParams(window.location.search);
// var type = urlParams.get('type');
// console.log(type)
var type = urlParams.get('type');
console.log(type)
$(function () {
var height = '350';
var width = $("body").width();
// if(type=="dialog"){
// width = $("body").width();
// height = '500';
// }
// if(type=="sanwei"){
// width = $("body").width();
// height = '230';
// }
if(type=="1"){
width = $("body").width();
height = '350';
}
if(type=="2"){
width = $("body").width();
height = '600';
}
// <20><>ʼ<EFBFBD><CABC><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
WebVideoCtrl.I_InitPlugin(width,height, {
bWndFull: true,//<2F>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><D6B5><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><CBAB>ȫ<EFBFBD><C8AB><EFBFBD><EFBFBD>Ĭ<EFBFBD><C4AC>֧<EFBFBD><D6A7> true:֧<><D6A7> false:<3A><>֧<EFBFBD><D6A7>

161
src/views/kitchen/environment/videoMonitoring/index.vue
View File

@ -1,5 +1,8 @@
<template>
<div id="video">
<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%;">
@ -11,28 +14,53 @@
></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: 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" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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" @click="chosenWindow(2)">
<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" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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" @click="chosenWindow(3)">
<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" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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" @click="chosenWindow(4)">
<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" ref="videoIframe4" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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>
</div>
</template>
@ -46,6 +74,7 @@ components: {
},
data() {
return {
activeName:'1',
deviceData:[
],
deviceName1:'监控1',
@ -69,7 +98,6 @@ created() {
mounted() {
this.getKitchenDeviceSelect();
this.videoLogin();
},
methods:{
// 门禁设备选项
@ -78,7 +106,27 @@ methods:{
this.devicesOptions = response.data
})
},
// 初始化监控列表
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'){
}
},
chosenWindow(num){
console.log(num)
this.chosenWinNo = num;
setTimeout(() => {
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
@ -98,6 +146,8 @@ methods:{
}
},
iframeLoaded(domId,channel){
console.log(domId)
console.log(channel)
var oLiveView = {
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
szIP: "192.168.1.10", // protocol ip
@ -110,47 +160,67 @@ methods:{
};
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);
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);
// }
// });
}
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);
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);
// }
// });
}
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);
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);
// }
// });
}
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);
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);
// }
// });
}
},
iframeLogin(domId,channel){
@ -232,14 +302,7 @@ methods:{
// 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>

2
src/views/kitchen/index.vue
View File

@ -242,8 +242,6 @@ export default {
this.InitEChartsThree()
this.InitEChartsFour()
this.InitEChartsFive()
});
},
changDate1(){