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> -->
    <Device v-show="PageCur == 'device'"></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="PageCur === 'device'
        ? '/static/navIcon/sbzx-active.svg'
        : '/static/navIcon/sbzx.svg'
        "></u-tabbar-item>
      <u-tabbar-item v-show="menus.warndata != null" text="预警分析" name="warndata" :icon="PageCur === 'warndata'
        ? '/static/navIcon/yjfx-active.svg'
        : '/static/navIcon/yjfx.svg'
        "></u-tabbar-item>
      <u-tabbar-item
        text=""
        name=""
        :customStyle="{ marginTop: '0rpx' }"
      >
        <view slot="active-icon" class="sw-tab-icon">
          <image
            class="sw-tab-img"
            src="/static/navIcon/sw.svg"
            mode="aspectFit"
          ></image>
        </view>
        <view slot="inactive-icon" class="sw-tab-icon">
          <image
            class="sw-tab-img"
            src="/static/navIcon/sw.svg"
            mode="aspectFit"
          ></image>
        </view>
      </u-tabbar-item>

      <u-tabbar-item v-show="menus.filecenter != null" text="文件共享" name="filecenter" :icon="PageCur === 'filecenter'
        ? '/static/navIcon/wjgx-active.svg'
        : '/static/navIcon/wjgx.svg'
        "></u-tabbar-item>
      <!-- <u-tabbar-item v-show="menus.gasreport != null" text="瓦斯日报" name="gasreport" :icon="PageCur === 'gasreport'
          ? '/static/navIcon/gas-active.png'
          : '/static/navIcon/gas.png'
        "></u-tabbar-item> -->
      <u-tabbar-item text="我的" name="user" :icon="PageCur === 'user'
        ? '/static/navIcon/user-active.png'
        : '/static/navIcon/user.png'
        "></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: 100vh;
  background: url('../../static/desk-img/1-3.png') no-repeat;
  background-size: 100% auto;
}

.loadding-box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sw-tab-icon {
  width: 104rpx;
  height: 84rpx;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #4da3ff 0%, #007aff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 16rpx rgba(0, 122, 255, 0.35);
}

.sw-tab-img {
  width: 56rpx;
  height: 56rpx;
}
</style>