377 lines
16 KiB
Vue
377 lines
16 KiB
Vue
|
<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 v-show="activeName==1" class="header"><span>视频监控</span></div>
|
|||
|
|
<div v-show="activeName==1" 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: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
|||
|
|
<!-- <div style="width: 100%;height: 100%;position: fixed;"></div> -->
|
|||
|
|
<iframe src="monitor/iframe.html" ref="videoIframe1" frameborder="0" style="width: 100%;height:700px;"></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="历史视频" name="2">
|
|||
|
|
<div v-show="activeName==2" class="header"><span>历史视频</span></div>
|
|||
|
|
<div v-show="activeName==2" 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="handleNodeClick2"
|
|||
|
|
ref="typeTree" node-key="deviceId" highlight-current
|
|||
|
|
></el-tree>
|
|||
|
|
</div>
|
|||
|
|
<div class="contant">
|
|||
|
|
<div style="width: 100%;height: 700px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
|||
|
|
<iframe src="monitor/iframe.html" ref="videoIframe2" frameborder="0" style="width: 100%;height: 700px;"></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</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 {
|
|||
|
|
activeName:'1',
|
|||
|
|
deviceData:[
|
|||
|
|
],
|
|||
|
|
titleList:[],
|
|||
|
|
devicesOptions:[],
|
|||
|
|
defaultProps: {
|
|||
|
|
children: "children",
|
|||
|
|
label: "deviceName",
|
|||
|
|
id: "deviceId"
|
|||
|
|
},
|
|||
|
|
dateRange:this.defaultDateRange(),
|
|||
|
|
pickerOptions:{
|
|||
|
|
//禁用当前日期之前的日期
|
|||
|
|
disabledDate(time) {
|
|||
|
|
//Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
|
|||
|
|
return time.getTime() < Date.now() - 8.64e7;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
chosenWinNo:0,
|
|||
|
|
chosenChannel:null,
|
|||
|
|
chosenChannel2:null,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.getKitchenDeviceSelect();
|
|||
|
|
this.videoLogin();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 门禁设备选项
|
|||
|
|
getKitchenDeviceSelect(){
|
|||
|
|
getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
|
|||
|
|
this.devicesOptions = response.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 初始化监控列表
|
|||
|
|
videoLogin(){
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.iframeLogin('1')
|
|||
|
|
}, 500);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.iframeLogin('2')
|
|||
|
|
}, 500);
|
|||
|
|
},
|
|||
|
|
//点击设备
|
|||
|
|
handleTabClick(tab){
|
|||
|
|
console.log(this.activeName)
|
|||
|
|
if(this.activeName=='1'){
|
|||
|
|
}
|
|||
|
|
if(this.activeName=='2'){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
iframeLogin(domId){
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
|||
|
|
var width = '1300';
|
|||
|
|
var height = '700';
|
|||
|
|
var that = this;
|
|||
|
|
if(domId=='1'){
|
|||
|
|
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
|||
|
|
console.log(oWebVideoCtrl1)
|
|||
|
|
oWebVideoCtrl1.I_Logout(szDeviceIdentify)
|
|||
|
|
oWebVideoCtrl1.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>
|
|||
|
|
iWndowType: 2,
|
|||
|
|
cbInitPluginComplete: function () {
|
|||
|
|
oWebVideoCtrl1.I_InsertOBJECTPlugin("divPlugin");
|
|||
|
|
oWebVideoCtrl1.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
|||
|
|
success: function (xmlDoc) {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
|||
|
|
iRtspPort: oLiveView.szPort,
|
|||
|
|
iWndIndex:0,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
iChannelID: 11,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
|||
|
|
iRtspPort: oLiveView.szPort,
|
|||
|
|
iWndIndex:1,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
iChannelID: 12,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
|||
|
|
iRtspPort: oLiveView.szPort,
|
|||
|
|
iWndIndex:2,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
iChannelID: 13,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
|||
|
|
iRtspPort: oLiveView.szPort,
|
|||
|
|
iWndIndex:3,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
iChannelID: 14,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
cbSelWnd: function (xmlDoc) {
|
|||
|
|
let WndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
|
|||
|
|
var szInfo = "当前选择的窗口编号：" + WndIndex;
|
|||
|
|
that.chosenWinNo = WndIndex;
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
if(domId=='2'){
|
|||
|
|
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
|||
|
|
console.log(oWebVideoCtrl2)
|
|||
|
|
oWebVideoCtrl2.I_Logout(szDeviceIdentify)
|
|||
|
|
oWebVideoCtrl2.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>
|
|||
|
|
iWndowType: 1,
|
|||
|
|
cbInitPluginComplete: function () {
|
|||
|
|
oWebVideoCtrl2.I_InsertOBJECTPlugin("divPlugin");
|
|||
|
|
oWebVideoCtrl2.I_Login(oLiveView.szIP,oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
|||
|
|
success: function (xmlDoc) {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
console.log(that.formatDateTime(that.dateRange[0]))
|
|||
|
|
console.log(that.formatDateTime(that.dateRange[1]))
|
|||
|
|
oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
|
|||
|
|
szStartTime:that.formatDateTime(that.dateRange[0]),
|
|||
|
|
szEndTime:that.formatDateTime(that.dateRange[1]),
|
|||
|
|
iChannelID: that.chosenChannel2,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
iframeLogout(domId){
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
|||
|
|
if(domId=='1'){
|
|||
|
|
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
|||
|
|
// oWebVideoCtrl1.I_Logout(szDeviceIdentify)
|
|||
|
|
var iRet = oWebVideoCtrl1.I_Logout(szDeviceIdentify);
|
|||
|
|
var szInfo = ""
|
|||
|
|
if (0 == iRet) {
|
|||
|
|
szInfo = "退出成功！";
|
|||
|
|
} else {
|
|||
|
|
szInfo = "退出失败！";
|
|||
|
|
}
|
|||
|
|
console.log(szInfo)
|
|||
|
|
}
|
|||
|
|
if(domId=='2'){
|
|||
|
|
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
|||
|
|
// oWebVideoCtrl2.I_Logout(szDeviceIdentify)
|
|||
|
|
var iRet = oWebVideoCtrl2.I_Logout(szDeviceIdentify);
|
|||
|
|
var szInfo = ""
|
|||
|
|
if (0 == iRet) {
|
|||
|
|
szInfo = "退出成功！";
|
|||
|
|
} else {
|
|||
|
|
szInfo = "退出失败！";
|
|||
|
|
}
|
|||
|
|
console.log(szInfo)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async handleNodeClick(data) {
|
|||
|
|
console.log(data)
|
|||
|
|
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
|||
|
|
let obj = JSON.parse(data.deviceExtendInfo)
|
|||
|
|
console.log(obj)
|
|||
|
|
// if(this.chosenWinNo==3){
|
|||
|
|
// this.chosenWinNo=0
|
|||
|
|
// }else{
|
|||
|
|
// this.chosenWinNo = this.chosenWinNo+1
|
|||
|
|
// }
|
|||
|
|
console.log(this.chosenWinNo)
|
|||
|
|
this.chosenChannel = 22
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
|
|||
|
|
}, 500);
|
|||
|
|
}else{
|
|||
|
|
this.$modal.msgError("设备未绑定通道号");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
iframeLoaded(WinNo,Channel){
|
|||
|
|
console.log(WinNo)
|
|||
|
|
console.log(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
|
|||
|
|
}
|
|||
|
|
var szDeviceIdentify = oLiveView.szIP;
|
|||
|
|
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
|||
|
|
oWebVideoCtrl1.I_Stop({
|
|||
|
|
iWndIndex:WinNo
|
|||
|
|
})
|
|||
|
|
setTimeout(function () {
|
|||
|
|
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
|||
|
|
iRtspPort: oLiveView.szPort,
|
|||
|
|
iWndIndex:WinNo,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
iChannelID: Channel,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
}, 800);
|
|||
|
|
},
|
|||
|
|
async handleNodeClick2(data) {
|
|||
|
|
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
|||
|
|
let obj = JSON.parse(data.deviceExtendInfo)
|
|||
|
|
this.chosenChannel2 = 15
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.iframeLoaded2()
|
|||
|
|
}, 500);
|
|||
|
|
}else{
|
|||
|
|
this.$modal.msgError("设备未绑定通道号");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
iframeLoaded2(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
|
|||
|
|
}
|
|||
|
|
var szDeviceIdentify = oLiveView.szIP;
|
|||
|
|
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
|||
|
|
var that = this;
|
|||
|
|
oWebVideoCtrl2.I_Stop({iWndIndex:0})
|
|||
|
|
setTimeout(function () {
|
|||
|
|
console.log(that.formatDateTime(that.dateRange[0]))
|
|||
|
|
console.log(that.formatDateTime(that.dateRange[1]))
|
|||
|
|
oWebVideoCtrl2.I_StartPlayback(szDeviceIdentify, {
|
|||
|
|
szStartTime:that.formatDateTime(that.dateRange[0]),
|
|||
|
|
szEndTime:that.formatDateTime(that.dateRange[1]),
|
|||
|
|
iChannelID: that.chosenChannel2,
|
|||
|
|
iStreamType: oLiveView.iStreamType,
|
|||
|
|
bZeroChannel: oLiveView.bZeroChannel
|
|||
|
|
});
|
|||
|
|
}, 800);
|
|||
|
|
},
|
|||
|
|
defaultDateRange() {
|
|||
|
|
const end = new Date(new Date().toLocaleDateString());
|
|||
|
|
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
|
|||
|
|
const start = new Date((new Date().toLocaleDateString()));
|
|||
|
|
start.setTime(start.getTime());
|
|||
|
|
|
|||
|
|
this.start = parseInt(start.getTime() / 1000)
|
|||
|
|
this.end = parseInt(end.getTime() / 1000)
|
|||
|
|
return [start, end]
|
|||
|
|
},
|
|||
|
|
//日期时间
|
|||
|
|
formatDateTime(date) {
|
|||
|
|
// 格式化为 YYYY-MM-DD
|
|||
|
|
date = new Date(date)
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|||
|
|
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
|
|||
|
|
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
|||
|
|
const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|