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\昊天 10 months ago
parent f6c06f393b
commit d1e2cae606
2 changed files with 255 additions and 287 deletions
Show Stats Download Patch File Download Diff File

3
src/views/checkManage/checkOperation.vue
Unescape Escape View File

@ -32,8 +32,7 @@
<a-select showSearch <a-select showSearch
ref="select" ref="select"
style="width: 100%" style="width: 100%"
:placeholder="checkObj.category" :value="checkObj.category"
:defaultValue="checkObj.category"
@change="change" @change="change"
> >

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

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