| | |
|---|
| | | <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> |
|---|
| | |
|---|
| | | }, |
|---|
| | | 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 |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | |
|---|
| | | |
|---|
| | | 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: { |
|---|
| | |
|---|
| | | 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}) |
|---|
| | |
|---|
| | | 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> |
|---|
