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'
      }"
    >
      <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' }"
    ></Device>
    <filecenter :cur="PageCur" v-if="PageCur == 'filecenter'"></filecenter>
    <warndata v-if="PageCur == 'warndata'" :cur="PageCur"></warndata>
    <gasreport :cur="PageCur" v-if="PageCur == 'gasreport'"></gasreport>
    <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-item
        text="瓦斯日报"
        name="gasreport"
        icon="bell"
      ></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: "device",
      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>