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'" @changePage="changePage"></Device>
    <filecenter
      :cur="PageCur"
      v-show="PageCur == 'filecenter'"
      @changePage="changePage"
    ></filecenter>
    <warndata
      v-show="PageCur == 'warndata'"
      :cur="PageCur"
      @changePage="changePage"
    ></warndata>
    <gasreport
      :cur="PageCur"
      v-show="PageCur == 'gasreport'"
      @changePage="changePage"
    ></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.changePage(e);
    },
    //切换当前页签（底部 tabbar 与子页面事件共用）
    changePage: 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>