kev/Drawer/drawer-htmlroot/components/WellRecommend.vue

<template>
  <div class="layout-container">
    <!-- 顶部菜单栏 -->
    <header class="header">
      <div style="display: flex">
        <DrawerHeader />
      </div>
    </header>
    <div class="footer-container">
      <aside class="left-aside" v-if="showLeft" :style="{ width: leftWidth }">
        <div class="img-layer">
          <!-- <ClientOnly> -->
          <LayerTree />
          <!-- </ClientOnly> -->
        </div>
        <div @click="showLeft = false">⬅️</div>
      </aside>
      <!-- 中间主内容区 -->
      <main class="main-content">
        <CanvasRenderer ref="drawerCanvas" />
      </main>
      <!-- 右侧侧边栏 -->
      <aside v-if="showRight" :style="{ width: rightWidth }" class="right-aside">
        <!-- <div @click="showRight = false">➡️</div>
        <div>右侧侧边栏</div> -->
        <div v-if="currentTopTab == '/smartWellRecommend'" class="scroll-content">
          <el-tabs type="border-card" :stretch="true" v-model="activeTab" class="fixed-tab" tab-position="top">
            <!-- 生成井组参数设置面板 -->
            <el-tab-pane label="生成参数设置" name="genParam">
              <SmartWellProperty />
            </el-tab-pane>
            <el-tab-pane label="设置单井组参数" name="wellGroupParam">
              <WellGroupProperty />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-else-if="currentTopTab == '/horizontalWell'" class="scroll-content">
          <HorizontalDrawParam />
        </div>
        <div v-else-if="currentTopTab == '/microEarthQuake'" class="scroll-content">
          <SeismicCalcParam />
        </div>
      </aside>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from "vue";
import DrawerHeader from "@/components/DrawerHeader.vue";
import CanvasRenderer from "@/components/CanvasRenderer.vue";
import WellGroupProperty from "@/components/WellGroupProperty.vue";
import LayerTree from "@/components/LayerTree.vue";
import { emitter } from "~/utils/eventBus";

import { useCurrentTabStore } from "~/stores/currentTabStore";

const useTabStore = useCurrentTabStore();

const showLeft = ref(false); // 控制左侧区域的显示
const showRight = ref(true); // 控制右侧区域的显示

const leftWidth = ref("240px");
const rightWidth = ref("300px");

const drawerCanvas = ref(null); // 画布引用

const activeTab = ref("genParam");

const currentTopTab = computed(() => useTabStore.currentTab);

// const layerTree = markRaw(LayerTree);
// const layerTreeRef = ref(layerTree);

// 加载状态
const isLoading = ref(false);

const handleLogin = () => { };

const props = defineProps({
  isView: {
    type: Boolean,
    default: false
  }
});

onBeforeMount(() => {
  showRight.value = useTabStore.showRight;
  if (currentTopTab.value === '/horizontalWell') {
    rightWidth.value = showRight.value ? '350px' : '0';
  } else {
    rightWidth.value = showRight.value ? '300px' : '0';
  }
  console.log("当前页：", currentTopTab.value, rightWidth.value);
});

// 监听窗口变化和面板显隐
onMounted(() => {
  emitter.on("showLayers", () => {
    showLeft.value = !showLeft.value;
    console.log("showLeft:", showLeft.value);
  });
});

onBeforeUnmount(() => {
  emitter.off("showLayers");
});

onUnmounted(() => { });
</script>

<style scoped>
/* html,
body,
#app {
  margin: 0;
  padding: 0;
  overflow: hidden;
} */

.layout-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* overflow: hidden; */
}

.header {
  background: #fff;
  color: #333;
  text-align: center;
  height: 45px;
  vertical-align: middle;
  line-height: 40px;
}

.footer-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left-aside,
.right-aside {
  background-color: #f0f9eb;
  border: 1px solid #eaeaea;
  transition: width 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.left-aside {
  border-right: none;
}

.right-aside {
  border-left: none;
}

.main-content {
  flex: 1;
  position: relative;
  /* padding: 20px; */
  background-color: #fff;
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  overflow: auto;
  resize: both;
}

canvas {
  width: 100%;
  height: 100%;
  /* display: block; */
}

.el-button {
  margin: 10px;
}

.fixed-tab {
  display: flex;
  flex-direction: column;
  /* flex-grow: 1; */
  /* height: calc(100vh - 60px); */
  width: 100%;
  height: 100%;
}

.fixed-tab :deep(.el-tabs__content) {
  flex-grow: 1;
  /* 填充剩余空间 */
  overflow-y: auto;
  /* 内容溢出时滚动 */
  padding: 0;
}

.fixed-tab :deep(.el-tabs__item) {
  float: none;
  /* 清除浮动干扰 */
}

.fixed-tab :deep(.el-tabs__header) {
  display: block !important;
}

.scroll-content {
  height: calc(100vh - 110px);
}

.img-layer {
  min-height: 100%;
  background: #ccc;
}
</style>