From e6790d88fc5b1ac33d239c0d90ce6cdea666b821 Mon Sep 17 00:00:00 2001 From: mk1990 <153958232@qq.com> Date: 星期一, 16 五月 2022 10:14:24 +0800 Subject: [PATCH] Merge branch 'wvp-28181-2.0' of https://github.com/mk1990/wvp-GB28181-pro into wvp-28181-2.0 --- web_src/src/components/live.vue | 60 ++++++++++++++++++------------------------------------------ 1 files changed, 18 insertions(+), 42 deletions(-) diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue index d23f4e6..797be84 100644 --- a/web_src/src/components/live.vue +++ b/web_src/src/components/live.vue @@ -15,10 +15,10 @@ <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;"> <div v-for="i in spilt" :key="i" class="play-box" :style="liveStyle" :class="{redborder:playerIdx == (i-1)}" - @click="playerIdx = (i-1)" - > + @click="playerIdx = (i-1)"> <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div> - <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/> + <player ref="player" v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" + @destroy="destroy"/> </div> </div> </el-main> @@ -39,30 +39,15 @@ }, data() { return { - showVideoDialog: true, - hasAudio: false, videoUrl: [''], spilt: 1,//鍒嗗睆 playerIdx: 0,//婵�娲绘挱鏀惧櫒 - deviceList: [], //璁惧鍒楄〃 - currentDevice: {}, //褰撳墠鎿嶄綔璁惧瀵硅薄 - - videoComponentList: [], updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織 - currentDeviceChannelsLenth: 0, - winHeight: window.innerHeight - 200, - currentPage: 1, count: 15, total: 0, - getDeviceListLoading: false, //channel - searchSrt: "", - channelType: "", - online: "", - channelTotal: 0, - deviceChannelList: [], loading: false }; }, @@ -75,13 +60,22 @@ computed: { liveStyle() { - if (this.spilt == 1) { - return {width: '100%', height: '100%'} - } else if (this.spilt == 4) { - return {width: '49%', height: '49%'} - } else if (this.spilt == 9) { - return {width: '32%', height: '32%'} + let style = {width: '100%', height: '100%'} + switch (this.spilt) { + case 4: + style = {width: '49%', height: '49%'} + break + case 9: + style = {width: '32%', height: '32%'} + break } + this.$nextTick(() => { + for (let i = 0; i < this.spilt; i++) { + const player = this.$refs.player + player && player[i] && player[i].updatePlayerDomSize() + } + }) + return style } }, watch: { @@ -167,13 +161,6 @@ this.sendDevicePush({deviceId, channelId}) } }, - convertImageToCanvas(image) { - var canvas = document.createElement("canvas"); - canvas.width = image.width; - canvas.height = image.height; - canvas.getContext("2d").drawImage(image, 0, 0); - return canvas; - }, shot(e) { // console.log(e) // send({code:'image',data:e}) @@ -211,17 +198,6 @@ console.log(data); window.localStorage.setItem('playData', JSON.stringify(data)) }, - loadAndPlay() { - let dataStr = window.localStorage.getItem('playData') || '[]' - let data = JSON.parse(dataStr); - - data.forEach((item, i) => { - if (item) { - this.playerIdx = i - this.sendDevicePush(item) - } - }) - } } }; </script> -- Gitblit v1.8.0