qp_onemap_ui/src/views/Yxgl.vue

<template>
  <div id="yxgl_box">
    <el-menu
      :default-active="menuActive"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      <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">
        <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)' }"
    >
      <StatisticalAnalysis />
    </div>
  </div>
</template>

<script>
import StatisticalAnalysis from "@/views/yxgl/StatisticalAnalysis.vue";
export default {
  name: "yxgl",
  data() {
    return {
      isCollapse: false,
      menuActive: "StatisticalAnalysis",
    };
  },
  // 2. 局部注册组件（键值同名可简写）
  components: {
    StatisticalAnalysis, // 完整写法：MyButton: MyButton
  },
  mounted() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

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

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