视频监控修改2
This commit is contained in:
parent
cd780e7a7e
commit
7c8c58f4fe
File diff suppressed because one or more lines are too long
|
|
@ -22,7 +22,7 @@ html, body {
|
|||
<body>
|
||||
<div id="divPlugin" class="plugin"></div>
|
||||
</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/cryptico.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>
|
||||
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 = '100%';
|
||||
var height = '350';
|
||||
var width = $("body").width();
|
||||
// if(type=="dialog"){
|
||||
// width = $("body").width();
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<title><%= webpackConfig.name %></title>
|
||||
<!--[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/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/encryption/AES.js"></script>
|
||||
<!-- <script src="./codebase/transform/SystemTransform.js"></script> -->
|
||||
|
|
|
|||
|
|
@ -1,39 +1,45 @@
|
|||
<template>
|
||||
<div id="video">
|
||||
<div class="header" @click="getData"><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: 20%;" @click="changeSize(1)">1</div>
|
||||
<div style="width: 20%;" @click="changeSize(2)">2</div>
|
||||
<div style="width: 20%;" @click="changeSize(4)">4</div>
|
||||
</div> -->
|
||||
<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="openVideo('8')"></div> -->
|
||||
<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">
|
||||
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('16')"></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" >
|
||||
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('17')"></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" >
|
||||
<!-- <div style="width: 100%;height: 100%;position: fixed;" @click="openVideo('32')"></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: {
|
||||
|
|
@ -46,38 +52,52 @@ data() {
|
|||
deviceName2:'监控2',
|
||||
deviceName3:'监控3',
|
||||
deviceName4:'监控4',
|
||||
titleList:[]
|
||||
titleList:[],
|
||||
devicesOptions:[],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "deviceName",
|
||||
id: "deviceId"
|
||||
},
|
||||
chosenWinNo:1,
|
||||
chosenChannel:null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// monitor.clickLogin()
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
// this.iframeLoaded()
|
||||
this.getKitchenDeviceSelect();
|
||||
this.videoLogin();
|
||||
|
||||
},
|
||||
methods:{
|
||||
iframeLoaded (domId,channel){
|
||||
// console.log(domId)
|
||||
if(domId=='0'){
|
||||
var oWebVideoCtrl = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
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)
|
||||
// 门禁设备选项
|
||||
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("设备未绑定通道号");
|
||||
}
|
||||
},
|
||||
iframeLogin(oWebVideoCtrl,channel){
|
||||
iframeLoaded(domId,channel){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
|
|
@ -88,18 +108,122 @@ methods:{
|
|||
iChannelID: 1, // channel no
|
||||
bZeroChannel: false // zero channel
|
||||
};
|
||||
oWebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl.I_StartRealPlay(oLiveView.szIP, {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 1000);
|
||||
}, 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<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){
|
||||
// this.$emit('openVideo',true,playId);
|
||||
|
|
@ -108,17 +232,14 @@ methods:{
|
|||
// monitor.clickStartRealPlay(null,'1')
|
||||
// this.$refs.vueRef.play();//播放
|
||||
},
|
||||
getData(){
|
||||
videoLogin(){
|
||||
setTimeout(() => {
|
||||
this.iframeLoaded('0','8')
|
||||
this.iframeLoaded('1','16')
|
||||
this.iframeLoaded('2','17')
|
||||
this.iframeLoaded('3','32')
|
||||
this.iframeLogin('1','11')
|
||||
this.iframeLogin('2','12')
|
||||
this.iframeLogin('3','27')
|
||||
this.iframeLogin('4','28')
|
||||
}, 1000);
|
||||
},
|
||||
changeSize(num){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -139,7 +260,7 @@ methods:{
|
|||
}
|
||||
}
|
||||
.contant{
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
// height: 85%;
|
||||
display: flex;
|
||||
|
|
@ -148,10 +269,6 @@ methods:{
|
|||
flex-wrap: wrap;
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ module.exports = {
|
|||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: `http://192.168.2.75: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.176:48380`,//
|
||||
changeOrigin: true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue