xytSk-App/pages/skDetail/spjk/spjk.vue

<template>
  <view class="spjk-box">
    <view class="select-bar">
        <uni-data-select
         v-model="value"
         :localdata="list"
         @change="change"
         :clear="false"
            >
        </uni-data-select>
    </view>
    <view class="video-box" >
      <iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
    </view>
    <!-- <u-overlay :show="show" @click="show = false">
		<view class="warp" style="position:relative;">
			<view class="rect" >
      <iframe :src="webURL" style="height: 100vh;width:100vw" frameborder="0" ref="videoFrame"></iframe>
      <image src="/static/images/m1.png" style="position:absolute; bottom:0,right:0"></image>
      </view>
		</view>
	</u-overlay> -->
    <!-- <button @click="handler">全屏</button> -->
  </view>
</template>

<script>
  export default {
    props:{
      stcd:String,
      source:String,
      default:''
    },
    data() {
      return {
        value: "",
        list:[],
        webURL:'',
        show:0
      }
    },
    methods: {
     receiveRenderData(e){
				//接收的值
				console.log("3333",e.data)
        this.show = e.data
			},
      async getList(){
        try{
          const {data} = await uni.$http.get(
          `/gunshiApp/xfflood/stbprp/cctv/listByStcd/${this.stcd}`)
          if(data.code == 200){
            let newData = data.data.map(item => ({...item,value:item.camId,text:item.name}))
            this.list = [...newData];
            this.value = newData[0].value
            this.getVideoSrc(newData[0].camId)
          }
        }catch(e){
          uni.$showMsg()
        }
      },
      async getVideoSrc(id){
        try{
          const {data} = await uni.$http.get(
          `/gunshiApp/xfflood/xfCctvB/preview/${id}`)
          if(data.code == 200){
           this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
          }
        }catch(e){
          uni.$showMsg()
        }
      },
      change(e) {
         console.log("e:", e);
         this.getVideoSrc(e)
     },
    },
    mounted() {
      this.getList()
    },
  }
</script>

<script module="renderModal" lang="renderjs">
  export default {
    data() {
			return {
				dom: '',
			}
		},
    mounted() {
			this.dom = document.getElementById('iframe')
			// 接收iframe传过来的值
			window.addEventListener('message', (e)=> {
				var data = e.data;
				this.emitData(data) 
			});
		},
    methods: {
      emitData(e) {
        this.$ownerInstance.callMethod('receiveRenderData',e)
      },
  },
  }
</script>

<style lang="scss" scoped>
  .spjk-box{
    .select-bar{
      margin: 10px 15px;
    }
    .video-box{
      .normal{
        position: absolute;
        // width: 370px;
        // height: 300px;
        top: 170px;
        left: 0;
        width: 100vw;
        height: 100vh;
      }
      .active{
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: -30px;
        left: 0;
      }
    }
  }
</style>