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 v-for="(item, index) in permission " :key="index" :text="item.name" :name="item.component"
        :icon="index = 0 ? 'list-dot' : index == 1 ? 'calendar' : index == 2 ? 'plus-circle' : index == 3 ? 'file-text' : index == 4 ? 'bell' : 'list-dot'"></u-tabbar-item>
      <!-- <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: "",
      tun3DPage: null,
      wvHeight: getApp().globalData.windowHeight,
      wvWidth: getApp().globalData.windowWidth,
      wvTop: 0,
      iframeloading: true,
    };
  },
  computed: {
    permission: function () {
      return uni.getStorageSync('menuPermission')
    }
  },
  watch: {
    permission: {
      handler(newV, oldV) {
        this.PageCur = newV[0].component
      },
      immediate: 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>