tsg-app/pages/spjk/spbf/index.vue

<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar 
    v-show="show == 0"
    :title="info.name" 
    :autoBack="true" 
    :titleStyle="{
				fontSize:'18px',width:'220px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
         <view class="video-box" >
      <iframe :src="webURL" :class="{'normal': show == 0,'active': show == 1}" frameborder="0" ref="videoFrame" :allowfullscreen="true"></iframe>
    </view>
    <view class="video-tool">
      <view class="left-tool">
        <view class="outside-circle">
          <view class="up" @click="onOperation('UP')">
            <image 
            style="width: 20px; height: 20px;"
            src="../../../static/images/up.png"></image>
          </view>
          <view class="down"  @click="onOperation('DOWN')">
            <image
              style="width: 20px; height: 20px; transform: rotate(180deg);"
              src="../../../static/images/up.png"></image>
          </view>
          <view class="left"  @click="onOperation('LEFT')">
            <image
              style="width: 20px; height: 20px; transform: rotate(-90deg);"
              src="../../../static/images/up.png"></image>
          </view>
          <view class="right"  @click="onOperation('RIGHT')">
            <image
              style="width: 20px; height: 20px; transform: rotate(90deg);"
              src="../../../static/images/up.png"></image>
          </view>
        </view>
      </view>
      <view class="right-tool">
        <view class="fd" @click="onOperation('ZOOM_IN')">
          <image 
          style="width: 20px; height: 20px;"
          src="../../../static/images/fd.png"
          ></image>
          <text>放大</text>
          </view>
        <view class="sx" @click="onOperation('ZOOM_OUT')">
          <image 
          style="width: 20px; height: 20px;"
          src="../../../static/images/sx.png"
          ></image>
           <text>缩小</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
export default {
   data() {
    return {
        info:{},
        show:0,
        webURL:'',
        timer:null
    }
   },
   methods: {
     receiveRenderData(e){
        this.show = e.data;
		},
      async getVideoSrc(id){
        try{
          const {data} = await uni.$http.get(
          `/gunshiApp/tsg/attCctvBase/preview/${id}`)
          if(data.code == 200){
           this.webURL="./static/h5Player/webplayer.html?cameraIndexCode="+id+"&cameraUrl="+data.data
          }
        }catch(e){
          uni.$showMsg()
        }
      },
      async onOperation(type){
        const params = {
          command:type,
          indexCode:this.info.indexCode,
          action:0,
          speed:30
        }
        try{
          const {data} = await uni.$http.post("/gunshiApp/tsg/attCctvBase/control",params)
            if(this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(() => {
              this.onOperation1(type)
            },500)
        }catch(error){
           // uni.$showMsg()
        }
      },
      async onOperation1(type){
        const params = {
          command:type,
          indexCode:this.info.indexCode,
          action:1,
          speed:30
        }
        try{
          const {data} = await uni.$http.post("/gunshiApp/tsg/attCctvBase/control",params)
        }catch(error){
           uni.$showMsg()
        }
      },
   },
   mounted() {
    this.getVideoSrc(this.info?.indexCode)
   },
   onLoad(options){
    this.info = JSON.parse(decodeURIComponent(options.info));
   }
}
</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>
 .video-box{
    // margin-top: 50px;
    // padding: 0 10px;
      .normal{
        position: absolute;

        top: 70px;
        left: 0;
        width: 100vw;
        height: 100vh;
      }
      .active{
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0px;
        left: 0;
      }
    }
    .video-tool{
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top:50%;
      margin-left: 10px;
      padding: 5px;
      width: 93%;
      background-color: #efefef;
    }
    .outside-circle{
      position: relative;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: #0796fe;
      .up,.down,.left,.right{
        position: absolute;
      }
      .up{
        left:45%;
        top: 10%;
      }
      .down{
        left:45%;
        top: 70%;
      }
      .left{
      left:20%;
      top:41%;
      }
      .right{
        left:70%;
        top:41%;
      }
    }
    .fd,.sx{
      display: flex;
      align-items: center;
      color: #fff;
      padding: 10px 40px;
      background-color: #0796fe;
      margin-left: 10px;
      margin-bottom: 10px;
      border-radius: 7%;
      &>text{
        margin-left: 10px;
      }
    }
    .left-tool{
      margin-right: 20px;
    }

</style>