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

视频监控修改2

This commit is contained in:
zzyuan 2025-06-27 16:48:42 +08:00
parent cd780e7a7e
commit 7c8c58f4fe
5 changed files with 207 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/codebase/jquery-3.6.4.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
public/iframe.html
View File

@ -22,7 +22,7 @@ html, body {
<body> <body>
<div id="divPlugin" class="plugin"></div> <div id="divPlugin" class="plugin"></div>
</body> </body>
<script src="./codebase/jquery-1.7.1.min.js"></script> <script src="./codebase/jquery-3.6.4.min.js"></script>
<script src="./codebase/encryption/AES.js"></script> <script src="./codebase/encryption/AES.js"></script>
<script src="./codebase/encryption/cryptico.min.js"></script> <script src="./codebase/encryption/cryptico.min.js"></script>
<script src="./codebase/encryption/crypto-3.1.2.min.js"></script> <script src="./codebase/encryption/crypto-3.1.2.min.js"></script>
@ -30,10 +30,10 @@ html, body {
<script src="./codebase/webVideoCtrl.js"></script> <script src="./codebase/webVideoCtrl.js"></script>
<script> <script>
var urlParams = new URLSearchParams(window.location.search); var urlParams = new URLSearchParams(window.location.search);
var type = urlParams.get('type'); // var type = urlParams.get('type');
console.log(type) // console.log(type)
$(function () { $(function () {
var height = '100%'; var height = '350';
var width = $("body").width(); var width = $("body").width();
// if(type=="dialog"){ // if(type=="dialog"){
// width = $("body").width(); // width = $("body").width();

2
public/index.html
View File

@ -9,7 +9,7 @@
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script src="./codebase/jsPlugin-1.2.0.min.js"></script> <script src="./codebase/jsPlugin-1.2.0.min.js"></script>
<script src="./codebase/jquery-1.7.1.min.js"></script> <script src="./codebase/jquery-3.6.4.min.js"></script>
<script src="./codebase/jsPlugin-1.2.0.min.js"></script> <script src="./codebase/jsPlugin-1.2.0.min.js"></script>
<script src="./codebase/encryption/AES.js"></script> <script src="./codebase/encryption/AES.js"></script>
<!-- <script src="./codebase/transform/SystemTransform.js"></script> --> <!-- <script src="./codebase/transform/SystemTransform.js"></script> -->

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

@ -1,39 +1,45 @@
<template> <template>
<div id="video"> <div id="video">
<div class="header" @click="getData"><span>视频监控</span></div> <div class="header"><span>视频监控</span></div>
<!-- <div style="width: 100%;display: flex;font-size: 18px;font-weight: bold;align-items: center;justify-content: center;height: 24px;;"> <div style="width: 100%;display: flex;justify-content: space-between;">
<div style="width: 20%;" @click="changeSize(1)">1</div> <div style="width: 20%;">
<div style="width: 20%;" @click="changeSize(2)">2</div> <el-tree style="height: 700px; overflow: scroll"
<div style="width: 20%;" @click="changeSize(4)">4</div> :data="devicesOptions" :props="defaultProps"
</div> --> :default-expand-all="true"
<div class="contant"> :expand-on-click-node="false" @node-click="handleNodeClick"
<div style="width: 45%;height: 350px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" > ref="typeTree" node-key="deviceId" highlight-current
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('8')"></div> --> ></el-tree>
<iframe src="iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe> </div>
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName1}}</span> <div class="contant">
</div> <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>
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('16')"></div> --> <iframe src="iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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;">{{deviceName1}}</span>
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName2}}</span> </div>
</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>
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('17')"></div> --> <iframe src="iframe.html" ref="videoIframe2" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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;">{{deviceName2}}</span>
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName3}}</span> </div>
</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>
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('32')"></div> --> <iframe src="iframe.html" ref="videoIframe3" frameborder="0" style="width: 100%;height: 100%;"></iframe>
<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;">{{deviceName3}}</span>
<span style="position: absolute;left: 0.2rem;bottom:0.2rem;font-size: 14px;color: aliceblue;">{{deviceName4}}</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> </div>
</div> </div>
</template> </template>
<script src="./codebase/webVideoCtrl.js"></script> <script src="./codebase/webVideoCtrl.js"></script>
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices";
export default { export default {
name: 'videoMonitoring', name: 'videoMonitoring',
components: { components: {
@ -46,60 +52,178 @@ data() {
deviceName2:'监控2', deviceName2:'监控2',
deviceName3:'监控3', deviceName3:'监控3',
deviceName4:'监控4', deviceName4:'监控4',
titleList:[] titleList:[],
devicesOptions:[],
defaultProps: {
children: "children",
label: "deviceName",
id: "deviceId"
},
chosenWinNo:1,
chosenChannel:null
}; };
}, },
created() { created() {
// monitor.clickLogin() // monitor.clickLogin()
}, },
mounted() { mounted() {
this.getData(); this.getKitchenDeviceSelect();
// this.iframeLoaded() this.videoLogin();
}, },
methods:{ methods:{
iframeLoaded (domId,channel){ // 门禁设备选项
// console.log(domId) getKitchenDeviceSelect(){
if(domId=='0'){ getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
var oWebVideoCtrl = this.$refs.videoIframe1.contentWindow.WebVideoCtrl; this.devicesOptions = response.data
this.iframeLogin(oWebVideoCtrl,channel) })
}
if(domId=='1'){
var oWebVideoCtrl = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
this.iframeLogin(oWebVideoCtrl,channel)
}
if(domId=='2'){
var oWebVideoCtrl = this.$refs.videoIframe3.contentWindow.WebVideoCtrl;
this.iframeLogin(oWebVideoCtrl,channel)
}
if(domId=='3'){
var oWebVideoCtrl = this.$refs.videoIframe4.contentWindow.WebVideoCtrl;
this.iframeLogin(oWebVideoCtrl,channel)
}
}, },
iframeLogin(oWebVideoCtrl,channel){ 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 = { var oLiveView = {
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
szIP: "192.168.1.10", // protocol ip szIP: "192.168.1.10", // protocol ip
szPort: "80", // protocol port szPort: "80", // protocol port
szUsername: "admin", // device username szUsername: "admin", // device username
szPassword: "hzx12345", // device password szPassword: "hzx12345", // device password
iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream iStreamType: 2, // stream 1<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>transcode stream
iChannelID: 1, // channel no iChannelID: 1, // channel no
bZeroChannel: false // zero channel bZeroChannel: false // zero channel
}; };
oWebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, { if(domId=='1'){
success: function (xmlDoc) { var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
setTimeout(function () {
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
setTimeout(function () { oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
oWebVideoCtrl.I_StartRealPlay(oLiveView.szIP, { iStreamType: oLiveView.iStreamType,
iStreamType: oLiveView.iStreamType, iChannelID: channel,
iChannelID: channel, bZeroChannel: oLiveView.bZeroChannel
bZeroChannel: oLiveView.bZeroChannel });
}); }, 500);
}, 1000); }
} 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<EFBFBD><EFBFBD>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<EFBFBD><EFBFBD>main stream 2<EFBFBD><EFBFBD>sub-stream 3<EFBFBD><EFBFBD>third stream 4<EFBFBD><EFBFBD>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){ openVideo(playId){
// this.$emit('openVideo',true,playId); // this.$emit('openVideo',true,playId);
@ -108,17 +232,14 @@ methods:{
// monitor.clickStartRealPlay(null,'1') // monitor.clickStartRealPlay(null,'1')
// this.$refs.vueRef.play();//播放 // this.$refs.vueRef.play();//播放
}, },
getData(){ videoLogin(){
setTimeout(() => { setTimeout(() => {
this.iframeLoaded('0','8') this.iframeLogin('1','11')
this.iframeLoaded('1','16') this.iframeLogin('2','12')
this.iframeLoaded('2','17') this.iframeLogin('3','27')
this.iframeLoaded('3','32') this.iframeLogin('4','28')
}, 1000); }, 1000);
}, },
changeSize(num){
}
} }
} }
</script> </script>
@ -139,7 +260,7 @@ methods:{
} }
} }
.contant{ .contant{
width: 100%; width: 80%;
height: auto; height: auto;
// height: 85%; // height: 85%;
display: flex; display: flex;
@ -148,10 +269,6 @@ methods:{
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 1%; padding-top: 1%;
} }
} }
</style> </style>

1
vue.config.js
View File

@ -37,6 +37,7 @@ module.exports = {
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
// target: `http://192.168.2.75:48380`,//旭 // target: `http://192.168.2.75:48380`,//旭
target: `http://192.168.0.244:48380`,//测试 target: `http://192.168.0.244:48380`,//测试
// target: `http://192.168.1.176:48380`,//测试
// target: `http://192.168.0.44:48380`,//测试 // target: `http://192.168.0.44:48380`,//测试
// target: `http://192.168.0.176:48380`,// // target: `http://192.168.0.176:48380`,//
changeOrigin: true, changeOrigin: true,