| | |
| | | @click="playerIdx = (i-1)" |
| | | > |
| | | <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> |
| | | <player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true" |
| | | :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player> |
| | | <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 |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.initData(); |
| | | |
| | | }, |
| | | created(){ |
| | |
| | | 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> |
| | |
| | | margin: 0 10px; |
| | | |
| | | } |
| | | |
| | | .btn:hover{ |
| | | color: #409EFF; |
| | | } |
| | | |
| | | .btn.active{ |
| | | color: #409EFF; |
| | | |
| | | } |
| | | |
| | | .redborder{ |
| | | border: 2px solid red !important; |
| | | } |
| | | |
| | | .play-box{ |
| | | background-color: #000000; |
| | | border: 2px solid #505050; |
| | |
| | | .baidumap > .BMap_cpyCtrl { |
| | | display: none !important; |
| | | } |
| | | |
| | | .baidumap > .anchorBL { |
| | | display: none !important; |
| | | } |