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-show="PageCur == 'device'"
      :style="{ marginTop: wvTop + 20 + 'px' }"
    ></Device>
    <filecenter :cur="PageCur" v-show="PageCur == 'filecenter'"></filecenter>
    <warndata v-show="PageCur == 'warndata'" :cur="PageCur"></warndata>
    <gasreport :cur="PageCur" v-show="PageCur == 'gasreport'"></gasreport>
    <user :cur="PageCur" v-show="PageCur == 'user'"></user>
    <u-tabbar
      :value="PageCur"
      @change="NavChange"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        v-show="menus.device != null"
        text="设备中心"
        name="device"
        icon="calendar"
      ></u-tabbar-item>
      <u-tabbar-item
        v-show="menus.warndata != null"
        text="预警分析"
        name="warndata"
        icon="plus-circle"
      ></u-tabbar-item>
      <u-tabbar-item
        v-show="menus.filecenter != null"
        text="文件共享"
        name="filecenter"
        icon="file-text"
      ></u-tabbar-item>
      <u-tabbar-item
        v-show="menus.gasreport != null"
        text="瓦斯日报"
        name="gasreport"
        icon="bell"
      ></u-tabbar-item>
      <u-tabbar-item text="我的" name="user" 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: false,
      menus: {},
    };
  },
  computed: {
    permission: function () {
      var data = uni.getStorageSync("menuPermission");
      console.log(JSON.stringify(data), "data");
      if (data == null || data == "" || data.length == 0) {
        data = [
          {
            redirect: null,
            path: "/device",
            ver: null,
            component: "device",
            route: "1",
            meta: {
              keepAlive: false,
              des: null,
              internalOrExternal: false,
              componentName: "device",
              title: "设备中心",
            },
            name: "device",
            id: "1862300062379954178",
          },
          {
            redirect: null,
            path: "/warndata",
            ver: null,
            component: "warndata",
            route: "1",
            meta: {
              keepAlive: false,
              des: null,
              internalOrExternal: false,
              componentName: "warndata",
              title: "预警分析",
            },
            name: "warndata",
            id: "1862301272310829057",
          },
          {
            redirect: null,
            path: "/filecenter",
            ver: null,
            component: "filecenter",
            route: "1",
            meta: {
              keepAlive: false,
              des: null,
              internalOrExternal: false,
              componentName: "filecenter",
              title: "文件共享中心",
            },
            name: "filecenter",
            id: "1862301712700166146",
          },
          {
            redirect: null,
            path: "/gasreport",
            ver: null,
            component: "gasreport",
            route: "1",
            meta: {
              keepAlive: false,
              des: null,
              internalOrExternal: false,
              componentName: "gasreport",
              title: "瓦斯上报",
            },
            name: "gasreport",
            id: "1862302433877184513",
          },
        ];
      }
      for (var i = 0; i < data.length; i++) {
        this.menus[data[i].component] = data[i].component;
      }
      return data;
    },
  },
  watch: {
    permission: {
      handler(newV, oldV) {
        debugger;
        if (newV != null && newV != "") 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>