|
|
|
|
@ -32,6 +32,10 @@
|
|
|
|
|
:key="pane.key"
|
|
|
|
|
:tab="pane.title"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
|
|
|
|
|
<a-row
|
|
|
|
|
v-for='rowIndex in row'
|
|
|
|
|
:key='rowIndex'
|
|
|
|
|
@ -51,9 +55,6 @@
|
|
|
|
|
></video>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -76,8 +77,8 @@ export default {
|
|
|
|
|
column: 0,
|
|
|
|
|
a: 0,
|
|
|
|
|
clientHeight: 0,
|
|
|
|
|
panes: [ ],
|
|
|
|
|
activeKey: 0,//当前页，当前页id，从零开始
|
|
|
|
|
panes: [],
|
|
|
|
|
activeKey: 0, //当前页，当前页id，从零开始
|
|
|
|
|
videoH: 0,
|
|
|
|
|
isFullscreen: false,
|
|
|
|
|
originHeight: 0,
|
|
|
|
|
@ -88,7 +89,7 @@ export default {
|
|
|
|
|
//watch: {},
|
|
|
|
|
computed: {
|
|
|
|
|
videoHeight() {
|
|
|
|
|
return this.clientHeight / this.row + "px";
|
|
|
|
|
return (this.clientHeight / this.row )+ "px";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
destroyed() {
|
|
|
|
|
@ -96,10 +97,12 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getWallStyle();
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
console.log("DOM已更新完成");
|
|
|
|
|
|
|
|
|
|
this.playPageCameras();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let isFullscreen =
|
|
|
|
|
document.fullscreenElement ||
|
|
|
|
|
document.mozFullScreenElement ||
|
|
|
|
|
@ -123,6 +126,7 @@ export default {
|
|
|
|
|
that.isFullscreen = !that.isFullscreen;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
updated() {},
|
|
|
|
|
methods: {
|
|
|
|
|
getWallStyle() {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
@ -150,80 +154,46 @@ export default {
|
|
|
|
|
console.log("clientHeight:" + this.clientHeight);
|
|
|
|
|
},
|
|
|
|
|
onEdit(targetKey, action) {
|
|
|
|
|
const index = this.panes.findIndex((pane) => pane.key === targetKey);
|
|
|
|
|
const index = this.panes.findIndex(
|
|
|
|
|
(pane) => pane.key === targetKey
|
|
|
|
|
);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
this.panes.splice(index, 1);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getAllCameras() {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getAllCameras1({
|
|
|
|
|
data: {},
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
let cameras = res.data;
|
|
|
|
|
for (let i = 1; i <= cameras.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 =
|
|
|
|
|
cameras[i - 1].rtcServer +
|
|
|
|
|
":" +
|
|
|
|
|
cameras[i - 1].rtcServerPort;
|
|
|
|
|
let video = document.getElementById(idName);
|
|
|
|
|
let player = new WebRtcPlayer(
|
|
|
|
|
server,
|
|
|
|
|
video,
|
|
|
|
|
"camera" + cameras[i - 1].id
|
|
|
|
|
);
|
|
|
|
|
this.players.push(player);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//一页个数
|
|
|
|
|
countVideo(i){
|
|
|
|
|
|
|
|
|
|
this.row= i;
|
|
|
|
|
this.column= i;
|
|
|
|
|
countVideo(i) {
|
|
|
|
|
this.row = i;
|
|
|
|
|
this.column = i;
|
|
|
|
|
|
|
|
|
|
this.activeKey=0;
|
|
|
|
|
this.activeKey = 0;
|
|
|
|
|
this.playPageCameras();
|
|
|
|
|
},
|
|
|
|
|
//墙信息
|
|
|
|
|
pageInfo(cameras){
|
|
|
|
|
var page = Math.ceil(cameras.length/(this.row*this.column));
|
|
|
|
|
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 });
|
|
|
|
|
for (var i = 1; i <= page; i++) {
|
|
|
|
|
this.panes.push({
|
|
|
|
|
title: "视频墙 " + i,
|
|
|
|
|
content: "Content of Tab " + i,
|
|
|
|
|
key: i - 1,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
changeTab(key){
|
|
|
|
|
changeTab(key) {
|
|
|
|
|
console.log(key);
|
|
|
|
|
},
|
|
|
|
|
onTabClick(key) {
|
|
|
|
|
this.destory()
|
|
|
|
|
this.destory();
|
|
|
|
|
|
|
|
|
|
console.log(key);
|
|
|
|
|
this.activeKey =key;
|
|
|
|
|
this.activeKey = key;
|
|
|
|
|
this.playPageCameras();
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
playPageCameras() {
|
|
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getAllCameras({
|
|
|
|
|
data: {},
|
|
|
|
|
@ -231,11 +201,14 @@ export default {
|
|
|
|
|
.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);
|
|
|
|
|
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=[];
|
|
|
|
|
this.players = [];
|
|
|
|
|
for (let i = 1; i <= camerasPage.length; i++) {
|
|
|
|
|
let rowIndex =
|
|
|
|
|
Math.floor((i - 1) / this.column) + 1;
|
|
|
|
|
@ -253,6 +226,7 @@ export default {
|
|
|
|
|
":" +
|
|
|
|
|
camerasPage[i - 1].rtcServerPort;
|
|
|
|
|
let video = document.getElementById(idName);
|
|
|
|
|
console.log(video);
|
|
|
|
|
let player = new WebRtcPlayer(
|
|
|
|
|
server,
|
|
|
|
|
video,
|
|
|
|
|
@ -265,6 +239,7 @@ export default {
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
destory() {
|
|
|
|
|
for (let player of this.players) {
|
|
|
|
|
|
LAPTOP-S9HJSOEB\昊天
2 years ago