|
|
|
|
@ -1,48 +1,23 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div id="videos">
|
|
|
|
|
<a-button type="primary" @click="full" v-if="!isFullscreen">
|
|
|
|
|
全屏<a-icon type="right" />
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="primary" @click="full" v-if="isFullscreen"
|
|
|
|
|
><a-icon type="left" /> 退出全屏
|
|
|
|
|
</a-button>
|
|
|
|
|
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="full"
|
|
|
|
|
v-if="!isFullscreen"
|
|
|
|
|
> 全屏<a-icon type="right" /> </a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="full"
|
|
|
|
|
v-if="isFullscreen"
|
|
|
|
|
><a-icon type="left" /> 退出全屏 </a-button>
|
|
|
|
|
<a-button type="primary" @click="countVideo(2)"> <a-icon type="appstore"/></a-button>
|
|
|
|
|
<a-button type="primary" @click="countVideo(3)"> <a-icon type="number"/></a-button>
|
|
|
|
|
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="countVideo(2)"
|
|
|
|
|
> <a-icon type="appstore" /></a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="countVideo(3)"
|
|
|
|
|
> <a-icon type="number" /></a-button>
|
|
|
|
|
|
|
|
|
|
<a-tabs
|
|
|
|
|
:activeKey="activeKey"
|
|
|
|
|
default-active-key="1"
|
|
|
|
|
@edit="onEdit"
|
|
|
|
|
@change="onTabClick"
|
|
|
|
|
>
|
|
|
|
|
<a-tab-pane
|
|
|
|
|
v-for="pane in panes"
|
|
|
|
|
:key="pane.key"
|
|
|
|
|
:tab="pane.title"
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tabs :activeKey="activeKey" default-active-key="1" @edit="onEdit" @change="onTabClick">
|
|
|
|
|
<a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title"> </a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
|
|
|
|
|
<a-row
|
|
|
|
|
v-for='rowIndex in row'
|
|
|
|
|
:key='rowIndex'
|
|
|
|
|
>
|
|
|
|
|
<a-row v-for="rowIndex in row" :key="rowIndex">
|
|
|
|
|
<a-col
|
|
|
|
|
v-for='colIndex in column'
|
|
|
|
|
:key='colIndex'
|
|
|
|
|
v-for="colIndex in column"
|
|
|
|
|
:key="colIndex"
|
|
|
|
|
:span="24 / column"
|
|
|
|
|
:style="{ height: videoHeight }"
|
|
|
|
|
>
|
|
|
|
|
@ -51,7 +26,7 @@
|
|
|
|
|
:id="rowIndex + '-' + colIndex"
|
|
|
|
|
autoplay
|
|
|
|
|
muted
|
|
|
|
|
:style="{'height': '100%',width:'100%','object-fit':'fill'}"
|
|
|
|
|
:style="{ height: '100%', width: '100%', 'object-fit': 'fill' }"
|
|
|
|
|
></video>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
@ -68,8 +43,8 @@
|
|
|
|
|
type: String,
|
|
|
|
|
default() {
|
|
|
|
|
return "";
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
@ -83,14 +58,14 @@
|
|
|
|
|
isFullscreen: false,
|
|
|
|
|
originHeight: 0,
|
|
|
|
|
fullHeight: 0,
|
|
|
|
|
players: [],
|
|
|
|
|
players: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
//watch: {},
|
|
|
|
|
computed: {
|
|
|
|
|
videoHeight() {
|
|
|
|
|
return (this.clientHeight / this.row )+ "px";
|
|
|
|
|
},
|
|
|
|
|
return this.clientHeight / this.row + "px";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
destroyed() {
|
|
|
|
|
this.destory();
|
|
|
|
|
@ -131,20 +106,17 @@
|
|
|
|
|
getWallStyle() {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getWallStyle({
|
|
|
|
|
data: {},
|
|
|
|
|
data: {}
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
.then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.row = res.data[0];
|
|
|
|
|
this.column = res.data[1];
|
|
|
|
|
this.getClientHeight();
|
|
|
|
|
sessionStorage.setItem(
|
|
|
|
|
"originHeight",
|
|
|
|
|
this.clientHeight
|
|
|
|
|
);
|
|
|
|
|
sessionStorage.setItem("originHeight", this.clientHeight);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
@ -154,9 +126,7 @@
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
@ -177,7 +147,7 @@
|
|
|
|
|
this.panes.push({
|
|
|
|
|
title: "视频墙 " + i,
|
|
|
|
|
content: "Content of Tab " + i,
|
|
|
|
|
key: i - 1,
|
|
|
|
|
key: i - 1
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -196,9 +166,9 @@
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$api.httpApi
|
|
|
|
|
.getAllCameras({
|
|
|
|
|
data: {},
|
|
|
|
|
data: {}
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
.then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
let cameras = res.data;
|
|
|
|
|
this.pageInfo(cameras);
|
|
|
|
|
@ -210,8 +180,7 @@
|
|
|
|
|
console.log(camerasPage);
|
|
|
|
|
this.players = [];
|
|
|
|
|
for (let i = 1; i <= camerasPage.length; i++) {
|
|
|
|
|
let rowIndex =
|
|
|
|
|
Math.floor((i - 1) / this.column) + 1;
|
|
|
|
|
let rowIndex = Math.floor((i - 1) / this.column) + 1;
|
|
|
|
|
if (rowIndex > this.row) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
@ -236,7 +205,7 @@
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
@ -301,8 +270,8 @@
|
|
|
|
|
this.getClientHeight();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
|