|  |  | 
 |  |  |                  :style="liveStyle" :class="{redborder: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> | 
 |  |  | 
 |  |  |  | 
 |  |  |   computed: { | 
 |  |  |     liveStyle() { | 
 |  |  |       let style = {width: '100%', height: '100%'} | 
 |  |  |       switch (this.spilt) { | 
 |  |  |         case 4: | 
 |  |  |           return {width: '49%', height: '49%'} | 
 |  |  |           style = {width: '49%', height: '49%'} | 
 |  |  |           break | 
 |  |  |         case 9: | 
 |  |  |           return {width: '32%', height: '32%'} | 
 |  |  |         default: | 
 |  |  |           return {width: '100%', height: '100%'} | 
 |  |  |           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) { | 
 |  |  |           itemData.playUrl = res.data.data.httpsFlv | 
 |  |  |           that.setPlayUrl(res.data.data.ws_flv, idxTmp) | 
 |  |  |         if (res.data.code === 0 && res.data.data) { | 
 |  |  |           let videoUrl; | 
 |  |  |           if (location.protocol === "https:") { | 
 |  |  |             videoUrl = res.data.data.wss_flv; | 
 |  |  |           } else { | 
 |  |  |             videoUrl = res.data.data.ws_flv; | 
 |  |  |           } | 
 |  |  |           itemData.playUrl = videoUrl; | 
 |  |  |           that.setPlayUrl(videoUrl, idxTmp); | 
 |  |  |         } else { | 
 |  |  |           that.$message.error(res.data.msg); | 
 |  |  |         } |