qp_onemap_ui/src/views/Yxgl.vue

<template>
  <el-affix :offset="0">
    <div style="height: 70px;width: 100vw;background: #08224a;"></div>
  </el-affix>
  <el-affix :offset="70">
  <div id="yxgl_box">
    <el-menu
      :default-active="menuActive"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      @select="changeMenu"
    >
      <el-sub-menu index="/#">
        <template #title>
          <el-icon><Platform /></el-icon>
          <span>信息反馈子系统</span>
        </template>
        <el-menu-item index="StatisticalAnalysis">
          <el-icon><Histogram /></el-icon>
          <template #title>信息反馈</template>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2" v-if="$getUserType() == 3">
        <template #title>
          <el-icon><Tools /></el-icon>
          <span>运行管理子系统</span>
        </template>
        <el-menu-item index="oauth">
          <el-icon><UserFilled /></el-icon>
          <template #title>用户权限</template>
        </el-menu-item>
        <el-menu-item index="dms">
          <el-icon><Ticket /></el-icon>
          <template #title>数据管理</template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <div
      class="viewBox"
      :style="{
        width: isCollapse ? 'calc(100vw - 60px)' : 'calc(100% - 200px)',
        background: menuActive == 'StatisticalAnalysis' ? '#08224a' : '#08224a',
        overflowY: menuActive == 'StatisticalAnalysis' ? 'auto' : 'hidden',
      }"
    >
      <el-backtop target=".viewBox" :right="20" :bottom="70" />
      <StatisticalAnalysis v-if="menuActive == 'StatisticalAnalysis'" />
      <iframe v-else :src="iframeUrl" frameborder="0"></iframe>
    </div>
  </div>
  </el-affix>
</template>

<script>
import StatisticalAnalysis from "@/views/yxgl/StatisticalAnalysis.vue";
export default {
  name: "yxgl",
  data() {
    return {
      isCollapse: false,
      menuActive: "StatisticalAnalysis",
      iframeUrl: "",
    };
  },
  // 2. 局部注册组件（键值同名可简写）
  components: {
    StatisticalAnalysis, // 完整写法：MyButton: MyButton
  },
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changeMenu(key, keyPath) {
      this.menuActive = key;
      switch (key) {
        case "dms":
          // window.open(
          //   systemConfig.backServerPath + ":" + systemConfig.dmsWebUrlPort,
          //   "_blank"
          // );
          this.iframeUrl = systemConfig.backServerPath + ":" + systemConfig.dmsWebUrlPort;
          break;
        case "oauth":
          // window.open(
          //   systemConfig.backServerPath + ":" + systemConfig.oauthWebUrlPort,
          //   "_blank"
          // );

          this.iframeUrl =
            systemConfig.backServerPath + ":" + systemConfig.oauthWebUrlPort;
          break;
        default:
          break;
      }
      console.log(this.menuActive, this.iframeUrl);
    },
  },
};
</script>

<style lang="less" scoped>
#yxgl_box {
  width: 100vw;
  // height: calc(100vh - 120px);
  height: 100vh;
  margin: 0;
  display: flex;
  overflow: hidden;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // height: calc(100vh - 120px);
  height: 100vh;
  margin: 0;
  background: #08224a;
}
.viewBox {
  width: calc(100vw - 200px);
  margin: 0;
  // height: calc(100vh - 120px);
  height: 100vh;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 120px;
}
iframe {
  width: 100%;
  height: calc(100%);
  background: #08224a;
}
</style>