upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

墙信息修改

Browse Source
bozhou-古井贡酒
LAPTOP-S9HJSOEB\昊天 1 year ago
parent 832a72f52d
commit f6c06f393b
1 changed files with 283 additions and 283 deletions
Show Stats Download Patch File Download Diff File

566
src/views/videoWall/index.vue
Unescape Escape View File

@ -1,315 +1,315 @@
<template> <template>
<div id="videos"> <div id="videos">
<a-button <a-button
type="primary" type="primary"
@click="full" @click="full"
v-if="!isFullscreen" v-if="!isFullscreen"
> 全屏<a-icon type="right" /> </a-button> > 全屏<a-icon type="right" /> </a-button>
<a-button <a-button
type="primary" type="primary"
@click="full" @click="full"
v-if="isFullscreen" v-if="isFullscreen"
><a-icon type="left" /> 退出全屏 </a-button> ><a-icon type="left" /> 退出全屏 </a-button>
<a-button <a-button
type="primary" type="primary"
@click="countVideo(2)" @click="countVideo(2)"
> <a-icon type="appstore" /></a-button> > <a-icon type="appstore" /></a-button>
<a-button <a-button
type="primary" type="primary"
@click="countVideo(3)" @click="countVideo(3)"
> <a-icon type="number" /></a-button> > <a-icon type="number" /></a-button>
<a-tabs <a-tabs
:activeKey="activeKey" :activeKey="activeKey"
default-active-key="1" default-active-key="1"
@edit="onEdit" @edit="onEdit"
@change="onTabClick" @change="onTabClick"
>
<a-tab-pane
v-for="pane in panes"
:key="pane.key"
:tab="pane.title"
> >
<a-tab-pane
v-for="pane in panes"
:key="pane.key"
:tab="pane.title"
>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
<a-row <a-row
v-for='rowIndex in row' v-for='rowIndex in row'
:key='rowIndex' :key='rowIndex'
>
<a-col
v-for='colIndex in column'
:key='colIndex'
:span="24/column"
:style="{height: videoHeight}"
> >
<video <a-col
class="camera" v-for='colIndex in column'
:id="rowIndex+'-'+colIndex" :key='colIndex'
autoplay :span="24/column"
muted :style="{height: videoHeight}"
:style="{'height': '100%',width:'100%','object-fit':'fill'}" >
></video> <video
</a-col> class="camera"
</a-row> :id="rowIndex+'-'+colIndex"
</div> autoplay
</template> muted
:style="{'height': '100%',width:'100%','object-fit':'fill'}"
></video>
</a-col>
</a-row>
</div>
</template>
<script> <script>
import WebRtcPlayer from "../../../public/static/webrtcplayer"; import WebRtcPlayer from "../../../public/static/webrtcplayer";
export default { export default {
name: "top", name: "top",
components: {}, components: {},
props: { props: {
id: { id: {
type: String, type: String,
default() { default() {
return ""; return "";
},
}, },
}, },
}, data() {
data() { return {
return { row: 0,
row: 0, column: 0,
column: 0, a: 0,
a: 0, clientHeight: 0,
clientHeight: 0, panes: [],
panes: [], activeKey: 0, //当前页，当前页id，从零开始
activeKey: 0, //当前页，当前页id，从零开始 videoH: 0,
videoH: 0, isFullscreen: false,
isFullscreen: false, originHeight: 0,
originHeight: 0, fullHeight: 0,
fullHeight: 0, players: [],
players: [], };
};
},
//watch: {},
computed: {
videoHeight() {
return (this.clientHeight / this.row )+ "px";
}, },
}, //watch: {},
destroyed() { computed: {
this.destory(); videoHeight() {
}, return (this.clientHeight / this.row )+ "px";
mounted() { },
this.getWallStyle();
this.$nextTick(() => {
console.log("DOM已更新完成");
this.playPageCameras();
});
let isFullscreen =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
this.isFullscreen = !!isFullscreen;
let that = this;
document.addEventListener("fullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("mozfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("webkitfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("msfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
},
updated() {},
methods: {
getWallStyle() {
this.$api.httpApi
.getWallStyle({
data: {},
})
.then((res) => {
if (res.code == 200) {
this.row = res.data[0];
this.column = res.data[1];
this.getClientHeight();
sessionStorage.setItem(
"originHeight",
this.clientHeight
);
}
})
.catch((err) => {
console.log(err);
});
},
getClientHeight() {
this.clientHeight = this.$el.clientHeight - 40;
console.log("clientHeight:" + this.clientHeight);
}, },
onEdit(targetKey, action) { destroyed() {
const index = this.panes.findIndex( this.destory();
(pane) => pane.key === targetKey
);
if (index !== -1) {
this.panes.splice(index, 1);
}
}, },
//一页个数 mounted() {
countVideo(i) { this.getWallStyle();
this.row = i; this.$nextTick(() => {
this.column = i; console.log("DOM已更新完成");
this.activeKey = 0; this.playPageCameras();
this.playPageCameras(); });
},
//墙信息
pageInfo(cameras) {
var page = Math.ceil(cameras.length / (this.row * this.column));
this.panes = [];
for (var i = 1; i <= page; i++) {
this.panes.push({
title: "视频墙 " + i,
content: "Content of Tab " + i,
key: i - 1,
});
}
},
changeTab(key) {
console.log(key);
},
onTabClick(key) {
this.destory();
console.log(key); let isFullscreen =
this.activeKey = key; document.fullscreenElement ||
this.playPageCameras(); document.mozFullScreenElement ||
}, document.webkitFullscreenElement ||
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
this.isFullscreen = !!isFullscreen;
playPageCameras() { let that = this;
this.$nextTick(() => { document.addEventListener("fullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("mozfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("webkitfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("msfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
},
updated() {},
methods: {
getWallStyle() {
this.$api.httpApi this.$api.httpApi
.getAllCameras({ .getWallStyle({
data: {}, data: {},
}) })
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
let cameras = res.data; this.row = res.data[0];
this.pageInfo(cameras); this.column = res.data[1];
var pageSize = this.row * this.column; this.getClientHeight();
var camerasPage = cameras.slice( sessionStorage.setItem(
this.activeKey * pageSize, "originHeight",
(this.activeKey + 1) * pageSize this.clientHeight
); );
console.log(camerasPage);
this.players = [];
for (let i = 1; i <= camerasPage.length; i++) {
let rowIndex =
Math.floor((i - 1) / this.column) + 1;
if (rowIndex > this.row) {
return;
}
let columnIndex = i % this.column;
if (columnIndex == 0) {
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:" + idName);
let server =
camerasPage[i - 1].rtcServer +
":" +
camerasPage[i - 1].rtcServerPort;
let video = document.getElementById(idName);
console.log(video);
let player = new WebRtcPlayer(
server,
video,
"camera" + camerasPage[i - 1].id
);
this.players.push(player);
}
} }
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
}); },
}, getClientHeight() {
destory() { this.clientHeight = this.$el.clientHeight - 40;
for (let player of this.players) {
console.log("stop");
player.destroy();
}
},
full() { console.log("clientHeight:" + this.clientHeight);
if (this.isFullscreen) { },
this.exitfullscreen(); onEdit(targetKey, action) {
} else { const index = this.panes.findIndex(
this.enterfullscreen(); (pane) => pane.key === targetKey
} );
}, if (index !== -1) {
//控制全屏 this.panes.splice(index, 1);
enterfullscreen() { }
//进入全屏 },
var docElm = document.getElementById("videos"); // 指定容器id //一页个数
//W3C countVideo(i) {
if (docElm.requestFullscreen) { this.row = i;
docElm.requestFullscreen(); this.column = i;
}
//FireFox this.activeKey = 0;
else if (docElm.mozRequestFullScreen) { this.playPageCameras();
docElm.mozRequestFullScreen(); },
} //墙信息
//Chrome等 pageInfo(cameras) {
else if (docElm.webkitRequestFullScreen) { var page = Math.ceil(cameras.length / (this.row * this.column));
docElm.webkitRequestFullScreen(); this.panes = [];
} for (var i = 1; i <= page; i++) {
//IE11 this.panes.push({
else if (elem.msRequestFullscreen) { title: "视频墙 " + i,
elem.msRequestFullscreen(); content: "Content of Tab " + i,
} key: i - 1,
this.$nextTick(() => { });
this.clientHeight = document.body.clientHeight; }
console.log("full:" + document.body.clientHeight); },
}); changeTab(key) {
}, console.log(key);
//退出全屏 },
exitfullscreen() { onTabClick(key) {
console.log("tuichu"); this.destory();
if (document.exitFullscreen) {
document.exitFullscreen(); console.log(key);
} else if (document.mozCancelFullScreen) { this.activeKey = key;
document.mozCancelFullScreen(); this.playPageCameras();
} else if (document.webkitCancelFullScreen) { },
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) { playPageCameras() {
document.msExitFullscreen(); this.$nextTick(() => {
} this.$api.httpApi
this.$nextTick(() => { .getAllCameras({
let origin = sessionStorage.getItem("originHeight"); data: {},
if (origin) { })
this.clientHeight = origin; .then((res) => {
if (res.code == 200) {
let cameras = res.data;
this.pageInfo(cameras);
var pageSize = this.row * this.column;
var camerasPage = cameras.slice(
this.activeKey * pageSize,
(this.activeKey + 1) * pageSize
);
console.log(camerasPage);
this.players = [];
for (let i = 1; i <= camerasPage.length; i++) {
let rowIndex =
Math.floor((i - 1) / this.column) + 1;
if (rowIndex > this.row) {
return;
}
let columnIndex = i % this.column;
if (columnIndex == 0) {
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:" + idName);
let server =
camerasPage[i - 1].rtcServer +
":" +
camerasPage[i - 1].rtcServerPort;
let video = document.getElementById(idName);
console.log(video);
let player = new WebRtcPlayer(
server,
video,
"camera" + camerasPage[i - 1].id
);
this.players.push(player);
}
}
})
.catch((err) => {
console.log(err);
});
});
},
destory() {
for (let player of this.players) {
console.log("stop");
player.destroy();
}
},
full() {
if (this.isFullscreen) {
this.exitfullscreen();
} else { } else {
this.getClientHeight(); this.enterfullscreen();
} }
}); },
//控制全屏
enterfullscreen() {
//进入全屏
var docElm = document.getElementById("videos"); // 指定容器id
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
this.$nextTick(() => {
this.clientHeight = document.body.clientHeight;
console.log("full:" + document.body.clientHeight);
});
},
//退出全屏
exitfullscreen() {
console.log("tuichu");
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.$nextTick(() => {
let origin = sessionStorage.getItem("originHeight");
if (origin) {
this.clientHeight = origin;
} else {
this.getClientHeight();
}
});
},
}, },
}, };
}; </script>
</script> <style>
<style> /* #videos > .ant-row {
/* #videos > .ant-row { height: calc(100% / 8);
height: calc(100% / 8); }
} #videos > .ant-row > .ant-col{
#videos > .ant-row > .ant-col{ height: calc(100% / 8);
height: calc(100% / 8); } */
} */ </style>
</style>
Write Preview
Loading…
Cancel
Save