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

<template>
  <div class="layout-container">
    <!-- 顶部菜单栏 -->
    <header class="header">
      <div style="display: flex">
        <DrawerHeader :tokenKey="currentTabTokenKey" @default="drawerCanvas?.toolDefault()"
          @zoom_in="drawerCanvas?.drawZoomIn()" @zoom_out="drawerCanvas?.drawZoomOut()"
          @refresh="drawerCanvas?.drawRefresh()" @center="drawerCanvas?.drawCenter()"
          @part="drawerCanvas?.toolViewWindow()" @all="drawerCanvas?.viewAll()" @move="drawerCanvas?.toolViewMove()"
          @choose="drawerCanvas?.toolSelect()" @save="drawerCanvas?.save()" @layer="drawerCanvas?.showLayers()" />
      </div>
    </header>
    <div class="footer-container">
      <aside class="left-aside" v-if="showLeft" :style="{ width: leftWidth }">
        <div class="img-layer">
          <LayerTree :tokenKey="currentTabTokenKey" />
        </div>
        <div @click="showLeft = false">⬅️</div>
      </aside>
      <!-- 中间主内容区 -->
      <main class="main-content">
        <CanvasRenderer ref="drawerCanvas" :tokenKey="currentTabTokenKey" @edit-well-group="doEditWellGroup" />
      </main>
      <!-- 右侧侧边栏 -->
      <aside v-if="showRight" :style="{ width: rightWidth }" class="right-aside">
        <!-- <div @click="showRight = false">➡️</div>
        <div>右侧侧边栏</div> -->
        <!-- <div v-if="showEdit" style="width: 100%;height: 100%;background-color: white;">
          <WellGroupEditComponent ref="editRef" v-if="showEdit" :parentToken="parentToken"
            :wellGroupData="wellGroupData" @close-edit="closeEdit"
            style=" position: relative;  resize: both;height: calc(100vh - 110px);" />
        </div>
        <div v-else> -->
        <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 ref="swpRef" @open-file="doOpenFile" />
            </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>
        <!-- </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 { TabType } from "~/enums/common.enum"
import { STORAGE_KEYS } from "~/utils/storageKeys"
import { useCurrentTabStore } from "~/stores/currentTabStore";

const useTabStore = useCurrentTabStore();

const showLeft = ref(false); // 控制左侧区域的显示
const showRight = computed(() => props.showRight); // 控制右侧区域的显示
// 控制右侧编辑窗口的显示 
const showEdit = ref(false);

const editRef = ref(null);

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

const parentToken = ref('');
const wellGroupData = ref(null);

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

// 井平台参数组件引用
const swpRef = ref(null);

const canvasSize = ref(null);

const activeTab = ref("genParam");

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

const props = defineProps({
  isView: {
    type: Boolean,
    default: false
  },
  tabType: {
    type: TabType
  },
  tokenKey: {
    type: String,
    default: 'drawerToken'
  },
  showRight: {
    type: Boolean,
    default: true
  }
});

const currentTabTokenKey = computed(() => props.tokenKey);

// 监听窗口变化和面板显隐
onMounted(() => {

  nextTick(() => {
    canvasSize.value = getCanvasSize();
  });

  emitter.on("showLayers", () => {
    showLeft.value = !showLeft.value;
  });

  // showRight.value = useTabStore.showRight;
  console.log("showRight：", showRight.value)
  resetRightSize();
});

const resetRightSize = () => {
  if (showRight.value) {
    if (currentTopTab.value === '/horizontalWell') {
      rightWidth.value = showRight.value ? '310px' : '0';
    } else {
      rightWidth.value = showRight.value ? '300px' : '0';
    }
  }
}

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

onUnmounted(() => { });

const getCanvasSize = () => {
  const rect = drawerCanvas.value.getCanvasSize();
  return rect;
};

function doOpenFile(item) {
  drawerCanvas.value?.doOpenFile(item)
}

// 编辑井组事件
function doEditWellGroup(pt, wgd) {
  rightWidth.value = "650px";
  showEdit.value = true;
  parentToken.value = pt;
  wellGroupData.value = wgd;
  console.log("执行编辑事件：", pt, wgd);
}

function closeEdit() {
  showEdit.value = false;
  parentToken.value = '';
  wellGroupData.value = null;
  resetRightSize();
}

defineExpose({
  canvasSize,
  getCanvasSize,
  doOpenFile,
})
</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: 45px;
}

.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>