|  |  |  | 
|---|
|  |  |  | <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: { | 
|---|
|  |  |  | 
|---|
|  |  |  | console.log(idx); | 
|---|
|  |  |  | this.clear(idx.substring(idx.length - 1)) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | clickEvent: function (data) { | 
|---|
|  |  |  | if (data.channelId && data.subCount == 0) { | 
|---|
|  |  |  | this.sendDevicePush(data) | 
|---|
|  |  |  | clickEvent: function (device, data, isCatalog) { | 
|---|
|  |  |  | if (data.channelId && !isCatalog) { | 
|---|
|  |  |  | if (device.online === 0) { | 
|---|
|  |  |  | this.$message.error('设备离线!不允许点播'); | 
|---|
|  |  |  | }else { | 
|---|
|  |  |  | this.sendDevicePush(data) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | contextMenuEvent: function (data) { | 
|---|
|  |  |  | contextMenuEvent: function (device, event, data, isCatalog) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //通知设备上传媒体流 | 
|---|
|  |  |  | sendDevicePush: function (itemData) { | 
|---|
|  |  |  | if (itemData.status === 0) { | 
|---|
|  |  |  | this.$message.error('设备离线!'); | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // if (itemData.status === 0) { | 
|---|
|  |  |  | //   this.$message.error('设备离线!'); | 
|---|
|  |  |  | //   return | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | this.save(itemData) | 
|---|
|  |  |  | let deviceId = itemData.deviceId; | 
|---|
|  |  |  | // this.isLoging = true; | 
|---|
|  |  |  | 
|---|
|  |  |  | method: 'get', | 
|---|
|  |  |  | url: '/api/play/start/' + deviceId + '/' + channelId | 
|---|
|  |  |  | }).then(function (res) { | 
|---|
|  |  |  | // that.isLoging = false; | 
|---|
|  |  |  | console.log('=====----=====') | 
|---|
|  |  |  | console.log(res) | 
|---|
|  |  |  | if (res.data.code == 0 && res.data.data) { | 
|---|
|  |  |  | if (res.data.code === 0 && res.data.data) { | 
|---|
|  |  |  | itemData.playUrl = res.data.data.httpsFlv | 
|---|
|  |  |  | that.setPlayUrl(res.data.data.ws_flv, idxTmp) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | 
|---|
|  |  |  | if (deviceId && channelId) { | 
|---|
|  |  |  | 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) | 
|---|
|  |  |  | 
|---|
|  |  |  | 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> | 
|---|