视频对接2
This commit is contained in:
parent
7870bcc510
commit
849619c8bd
|
|
@ -29,30 +29,35 @@ html, body {
|
|||
<script src="./codebase/jsPlugin-1.2.0.min.js"></script>
|
||||
<script src="./codebase/webVideoCtrl.js"></script>
|
||||
<script>
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var type = urlParams.get('type');
|
||||
console.log(type)
|
||||
$(function () {
|
||||
var height = '350';
|
||||
var width = $("body").width();
|
||||
if(type=="1"){
|
||||
width = $("body").width() * 0.5;
|
||||
height = '350';
|
||||
}
|
||||
if(type=="2"){
|
||||
width = $("body").width() * 0.5;
|
||||
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>
|
||||
iWndowType: 1,
|
||||
cbInitPluginComplete: function () {
|
||||
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
|
||||
}
|
||||
});
|
||||
// var urlParams = new URLSearchParams(window.location.search);
|
||||
// var type = urlParams.get('type');
|
||||
// console.log(type)
|
||||
// $(function () {
|
||||
// var height = '350';
|
||||
// var width = $("body").width();
|
||||
// if(type=="1"){
|
||||
// width = $("body").width() * 0.5;
|
||||
// height = '350';
|
||||
// }
|
||||
// if(type=="2"){
|
||||
// width = $("body").width() * 0.5;
|
||||
// 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>
|
||||
// iWndowType: 1,
|
||||
// cbInitPluginComplete: function () {
|
||||
// WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
|
||||
// },
|
||||
// cbSelWnd: function (xmlDoc) {
|
||||
// let g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
|
||||
// var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
|
||||
// console.log(szInfo);
|
||||
// },
|
||||
// });
|
||||
|
||||
});
|
||||
// });
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,103 +1,216 @@
|
|||
<template>
|
||||
<div id="video">
|
||||
<div class="header" @click="getData"><span>历史视频</span></div>
|
||||
<div class="contant">
|
||||
<div style="width: 80%;height: 400px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;" >
|
||||
<iframe src="monitor/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>
|
||||
<div style="width: 100%;">
|
||||
<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="handleNodeClick2"
|
||||
ref="typeTree" node-key="deviceId" highlight-current
|
||||
></el-tree>
|
||||
</div>
|
||||
<div class="contant">
|
||||
<div style="display: flex;width: 100%;height: 50px;align-items: center;">
|
||||
<div style="font-weight: bold;margin-right: 10px;margin-left: 20px;">时间范围:</div>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="datetimerange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd HH:mm:ss" style="width: 400px"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
:picker-options="pickerOptions" >
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div style="width: 100%;height: 630px;margin-bottom: 10px; overflow: hidden;position: relative;margin-right: 10px;">
|
||||
<iframe src="monitor/iframe.html" ref="videoIframe2" frameborder="0" style="width: 1300px;height: 630px;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script src="./codebase/webVideoCtrl.js"></script>
|
||||
<!-- <script src="./codebase/webVideoCtrl.js"></script> -->
|
||||
<script>
|
||||
import $ from 'jquery';
|
||||
|
||||
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices";
|
||||
export default {
|
||||
name: 'videoMonitoring',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName:'2',
|
||||
deviceData:[
|
||||
],
|
||||
deviceName1:'监控1',
|
||||
deviceName2:'监控2',
|
||||
deviceName3:'监控3',
|
||||
deviceName4:'监控4',
|
||||
titleList:[]
|
||||
],
|
||||
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,
|
||||
};
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
iframeLogin(oWebVideoCtrl,channel){
|
||||
// 初始化监控列表
|
||||
videoLogin(){
|
||||
setTimeout(() => {
|
||||
this.iframeLogin('2')
|
||||
}, 500);
|
||||
},
|
||||
iframeLogin(domId){
|
||||
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
|
||||
};
|
||||
oWebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
success: function (xmlDoc) {
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
setTimeout(function () {
|
||||
oWebVideoCtrl.I_StartRealPlay(oLiveView.szIP, {
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: channel,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 1000);
|
||||
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
|
||||
}
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
var that = this;
|
||||
if(domId=='2'){
|
||||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl2.I_Logout(szDeviceIdentify)
|
||||
oWebVideoCtrl2.I_InitPlugin(1300,700, {
|
||||
bWndFull: true,//<EFBFBD>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><EFBFBD>ȫ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ĭ<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD> true:֧<EFBFBD><EFBFBD> false:<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD>
|
||||
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<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
|
||||
}
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
if(domId=='2'){
|
||||
var oWebVideoCtrl2 = this.$refs.videoIframe2.contentWindow.WebVideoCtrl;
|
||||
var iRet = oWebVideoCtrl2.I_Logout(szDeviceIdentify);
|
||||
var szInfo = ""
|
||||
if (0 == iRet) {
|
||||
szInfo = "退出成功！";
|
||||
} else {
|
||||
szInfo = "退出失败！";
|
||||
}
|
||||
});
|
||||
console.log(szInfo)
|
||||
}
|
||||
},
|
||||
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("设备未绑定通道号");
|
||||
}
|
||||
},
|
||||
openVideo(playId){
|
||||
// this.$emit('openVideo',true,playId);
|
||||
// this.videoVisible = true;
|
||||
// monitor.clickStopRealPlay()
|
||||
// monitor.clickStartRealPlay(null,'1')
|
||||
// this.$refs.vueRef.play();//播放
|
||||
},
|
||||
getData(){
|
||||
setTimeout(() => {
|
||||
this.iframeLoaded('0','8')
|
||||
this.iframeLoaded('1','16')
|
||||
this.iframeLoaded('2','17')
|
||||
this.iframeLoaded('3','32')
|
||||
}, 1000);
|
||||
},
|
||||
changeSize(num){
|
||||
|
||||
}
|
||||
iframeLoaded2(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
|
||||
}
|
||||
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()+ 9 * 60 * 60 * 1000 - 1);
|
||||
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>
|
||||
|
|
@ -110,7 +223,7 @@ methods:{
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
span{
|
||||
margin-left: 40px;
|
||||
font-size: 20px;
|
||||
|
|
@ -118,19 +231,14 @@ methods:{
|
|||
}
|
||||
}
|
||||
.contant{
|
||||
width: 100%;
|
||||
width: 1350px;
|
||||
height: auto;
|
||||
// height: 85%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 1%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,29 @@
|
|||
<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%;">
|
||||
<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?type=1" ref="videoIframe1" frameborder="0" style="width: 100%;height: 700px;"></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-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="handleNodeClick2"
|
||||
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="monitor/iframe.html?type=2" ref="videoIframe5" frameborder="0" style="width: 100%;height: 600px;"></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 style="width: 100%;">
|
||||
<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: 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>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script src="./codebase/webVideoCtrl.js"></script>
|
||||
<!-- <script src="./codebase/webVideoCtrl.js"></script> -->
|
||||
<script>
|
||||
import $ from 'jquery';
|
||||
import { getKitchenDeviceSelectApi } from "@/api/kitchen/devices";
|
||||
|
|
@ -59,27 +33,20 @@ components: {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
activeName:'1',
|
||||
activeName:'2',
|
||||
deviceData:[
|
||||
],
|
||||
deviceName1:'监控1',
|
||||
deviceName2:'监控2',
|
||||
deviceName3:'监控3',
|
||||
deviceName4:'监控4',
|
||||
],
|
||||
titleList:[],
|
||||
devicesOptions:[],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "deviceName",
|
||||
id: "deviceId"
|
||||
},
|
||||
},
|
||||
chosenWinNo:0,
|
||||
chosenChannel:null
|
||||
chosenChannel:null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// monitor.clickLogin()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getKitchenDeviceSelect();
|
||||
this.videoLogin();
|
||||
|
|
@ -92,27 +59,12 @@ methods:{
|
|||
})
|
||||
},
|
||||
// 初始化监控列表
|
||||
videoLogin(){
|
||||
setTimeout(() => {
|
||||
this.iframeLogin()
|
||||
}, 1000);
|
||||
},
|
||||
//点击设备
|
||||
handleTabClick(tab){
|
||||
console.log(this.activeName)
|
||||
if(this.activeName=='1'){
|
||||
|
||||
}
|
||||
if(this.activeName=='2'){
|
||||
|
||||
}
|
||||
videoLogin(){
|
||||
setTimeout(() => {
|
||||
this.iframeLogin('1')
|
||||
}, 500);
|
||||
},
|
||||
handleNodeClick(data, node) {
|
||||
// if(this.chosenWinNo==3){
|
||||
// this.chosenWinNo=0
|
||||
// }else{
|
||||
// this.chosenWinNo = this.chosenWinNo+1
|
||||
// }
|
||||
iframeLogin(domId){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
|
|
@ -122,25 +74,60 @@ methods:{
|
|||
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
|
||||
};
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:2,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 11,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
// if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
||||
// let obj = JSON.parse(data.deviceExtendInfo)
|
||||
// console.log(obj)
|
||||
// this.chosenChannel = 11
|
||||
|
||||
// }else{
|
||||
// this.$modal.msgError("设备未绑定通道号");
|
||||
// }
|
||||
}
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
var that = this;
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
oWebVideoCtrl1.I_InitPlugin(1300,700, {
|
||||
bWndFull: true,//<EFBFBD>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><EFBFBD>ȫ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ĭ<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD> true:֧<EFBFBD><EFBFBD> false:<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD>
|
||||
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: 15,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iRtspPort: oLiveView.szPort,
|
||||
iWndIndex:1,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 16,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iRtspPort: oLiveView.szPort,
|
||||
iWndIndex:2,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 21,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iRtspPort: oLiveView.szPort,
|
||||
iWndIndex:3,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 22,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
},
|
||||
cbSelWnd: function (xmlDoc) {
|
||||
let WndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
|
||||
var szInfo = "当前选择的窗口编号：" + WndIndex;
|
||||
that.chosenWinNo = WndIndex;
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
async handleNodeClick2(data, node) {
|
||||
iframeLogout(domId){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
|
|
@ -150,26 +137,32 @@ methods:{
|
|||
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
|
||||
};
|
||||
// var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
}
|
||||
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
if(domId=='1'){
|
||||
var oWebVideoCtrl1 = this.$refs.videoIframe1.contentWindow.WebVideoCtrl;
|
||||
var iRet = oWebVideoCtrl1.I_Logout(szDeviceIdentify);
|
||||
var szInfo = ""
|
||||
if (0 == iRet) {
|
||||
szInfo = "退出成功！";
|
||||
} else {
|
||||
szInfo = "退出失败！";
|
||||
}
|
||||
console.log(szInfo)
|
||||
}
|
||||
},
|
||||
async handleNodeClick(data) {
|
||||
if(data.deviceExtendInfo&&data.deviceExtendInfo!=""){
|
||||
let obj = JSON.parse(data.deviceExtendInfo)
|
||||
console.log(obj)
|
||||
this.chosenChannel = '28'
|
||||
setTimeout(() => {
|
||||
// oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iWndIndex:0,
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: this.chosenChannel,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
let obj = JSON.parse(data.deviceExtendInfo)
|
||||
this.chosenChannel = 27
|
||||
setTimeout(() => {
|
||||
this.iframeLoaded(this.chosenWinNo,this.chosenChannel)
|
||||
}, 500);
|
||||
}else{
|
||||
this.$modal.msgError("设备未绑定通道号");
|
||||
}
|
||||
},
|
||||
iframeLogin(){
|
||||
},
|
||||
iframeLoaded(WinNo,Channel){
|
||||
var oLiveView = {
|
||||
iProtocol: 1, // protocol 1<EFBFBD><EFBFBD>http, 2:https
|
||||
szIP: "192.168.1.10", // protocol ip
|
||||
|
|
@ -179,61 +172,22 @@ methods:{
|
|||
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
|
||||
};
|
||||
}
|
||||
var szDeviceIdentify = oLiveView.szIP;
|
||||
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(()=>{
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:0,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 11,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:1,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 12,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:2,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 23,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
oWebVideoCtrl1.I_StartRealPlay(szDeviceIdentify, {
|
||||
iWndIndex:3,
|
||||
iStreamType: oLiveView.iStreamType,
|
||||
iChannelID: 24,
|
||||
bZeroChannel: oLiveView.bZeroChannel
|
||||
});
|
||||
},500);
|
||||
}
|
||||
});
|
||||
// var oWebVideoCtrl5 = this.$refs.videoIframe5.contentWindow.WebVideoCtrl;
|
||||
// oWebVideoCtrl5.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
|
||||
// success: function (xmlDoc) {
|
||||
// var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
|
||||
// setTimeout(()=>{
|
||||
// oWebVideoCtrl5.I_StartRealPlay(szDeviceIdentify, {
|
||||
// iWndIndex:0,
|
||||
// iStreamType: oLiveView.iStreamType,
|
||||
// iChannelID: 22,
|
||||
// bZeroChannel: oLiveView.bZeroChannel
|
||||
// });
|
||||
// },500);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
openVideo(playId){
|
||||
// this.$emit('openVideo',true,playId);
|
||||
// this.videoVisible = true;
|
||||
// monitor.clickStopRealPlay()
|
||||
// monitor.clickStartRealPlay(null,'1')
|
||||
// this.$refs.vueRef.play();//播放
|
||||
},
|
||||
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);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -247,7 +201,7 @@ methods:{
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
span{
|
||||
margin-left: 40px;
|
||||
font-size: 20px;
|
||||
|
|
@ -255,7 +209,7 @@ methods:{
|
|||
}
|
||||
}
|
||||
.contant{
|
||||
width: 80%;
|
||||
width: 1350px;
|
||||
height: auto;
|
||||
// height: 85%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,337 +0,0 @@
|
|||
<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%;">
|
||||
<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="monitor/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="monitor/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="monitor/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="monitor/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="monitor/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>
|
||||
<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:[
|
||||
],
|
||||
deviceName1:'监控1',
|
||||
deviceName2:'监控2',
|
||||
deviceName3:'监控3',
|
||||
deviceName4:'监控4',
|
||||
titleList:[],
|
||||
devicesOptions:[],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "deviceName",
|
||||
id: "deviceId"
|
||||
},
|
||||
chosenWinNo:1,
|
||||
chosenChannel:null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// monitor.clickLogin()
|
||||
},
|
||||
mounted() {
|
||||
this.getKitchenDeviceSelect();
|
||||
this.videoLogin();
|
||||
},
|
||||
methods:{
|
||||
// 门禁设备选项
|
||||
getKitchenDeviceSelect(){
|
||||
getKitchenDeviceSelectApi({deviceType:1}).then((response) => {
|
||||
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)
|
||||
}, 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){
|
||||
console.log(domId)
|
||||
console.log(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_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;
|
||||
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;
|
||||
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;
|
||||
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){
|
||||
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);
|
||||
// this.videoVisible = true;
|
||||
// monitor.clickStopRealPlay()
|
||||
// monitor.clickStartRealPlay(null,'1')
|
||||
// this.$refs.vueRef.play();//播放
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</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;
|
||||
padding-top: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,376 @@
|
|||
<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<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
|
||||
}
|
||||
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,//<EFBFBD>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><EFBFBD>ȫ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ĭ<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD> true:֧<EFBFBD><EFBFBD> false:<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD>
|
||||
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,//<EFBFBD>Ƿ<EFBFBD>֧<EFBFBD>ֵ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˫<EFBFBD><EFBFBD>ȫ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ĭ<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD> true:֧<EFBFBD><EFBFBD> false:<EFBFBD><EFBFBD>֧<EFBFBD><EFBFBD>
|
||||
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<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
|
||||
}
|
||||
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<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
|
||||
}
|
||||
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<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
|
||||
}
|
||||
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>
|
||||
Loading…
Reference in New Issue