Vent-App/pages/index/index.vue

<template>
  <view class='app-container'>
	<view v-if="iframeloading" class="loadding-box" :style="{'height': wvHeight+'px', 'width': wvWidth+'px', 'marginTop': wvTop+'px', border: 'none', background: '#000' }">
		<u-loading-icon></u-loading-icon>
	</view>
	<iframe v-if="PageCur == 'tun2D'" ref="iframe" src="http://182.92.126.35:8098/"  @load="viewLoad" :style="{'height': wvHeight+'px', 'width': wvWidth+'px', 'marginTop': wvTop+'px', border: 'none', background: '#000' }"></iframe>
	<Device v-if="PageCur == 'device'" :style="{'marginTop': wvTop+20+'px'}"/>
	<filecenter
	  :cur="PageCur"
	  v-if="PageCur == 'filecenter'"
	></filecenter>
	<warndata
	  v-if="PageCur == 'warndata'"
	  :cur="PageCur"
	></warndata>
    <u-tabbar
      :value="PageCur"
      @change="NavChange"
      :fixed="true"
	  :placeholder="true"
	  :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        text="通风系统图"
        name="tun2D"
        icon="list-dot"

      ></u-tabbar-item>
      <u-tabbar-item
        text="设备中心"
        name="device"
        icon="calendar"
      ></u-tabbar-item>
	  <u-tabbar-item
	    text="预警分析"
	    name="warndata"
	    icon="plus-circle"
	  ></u-tabbar-item>
	  <u-tabbar-item
	    text="文件共享"
	    name="filecenter"
	    icon="file-text"
	  ></u-tabbar-item>
    </u-tabbar>
	
  </view>
</template>

<script>
import { nextTick } from "vue";
import Device from '../device/index.vue'
export default {
	components: {
	  Device,
	},
  data() {
    return {
	  isLandScape: '',
      PageCur: "tun2D",
	  tun3DPage: null,
	  wvHeight: getApp().globalData.windowHeight,
	  wvWidth: getApp().globalData.windowWidth,
	  wvTop: 0,
	  iframeloading: true
    };
  },
  onLoad() {
  	this.changeWV()
  },
  mounted(){
	
  },
  onShow() {
  	// this.changeWV()
  },
  onResize(){
  	this.changeWV()
  },
  methods: {
    NavChange: function (e) {
      this.PageCur = e;
	  if(e == 'tun2D'){
		// this.changeWV()
		this.iframeloading = true
	  }
    },
	viewLoad(event) {
		const _this = this
		setTimeout(() => {
			_this.iframeloading = false
		}, 2000)
	},
	changeWV() {
		const _this = this
	    uni.getSystemInfo({ // 获取当前设备的具体信息
			success: (sysinfo) => {
				if (sysinfo.windowWidth > sysinfo.windowHeight) {
				   // 横屏
					_this.isLandScape = true
				
				} else {  
				   // 竖屏
					_this.isLandScape = false
				}
				
				_this.wvTop = _this.isLandScape ? 0 : sysinfo.statusBarHeight + 20;
				_this.wvHeight = _this.isLandScape ? sysinfo.windowHeight - sysinfo.statusBarHeight - 20 : sysinfo.windowHeight - sysinfo.statusBarHeight  - sysinfo.statusBarHeight - 38;
				_this.wvWidth = _this.isLandScape ? sysinfo.windowWidth : sysinfo.windowWidth
				
				console.log('屏幕模式--->', _this.isLandScape? '横屏':'竖屏')
				console.log(_this.wvTop, _this.wvWidth, _this.wvHeight )
			}
		});
		
	}
  },
};
</script>

<style>
.app-container{
	width: 100%;
	height: 100%;
}
.loadding-box{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>