2025.9.19 数据产品（待完成）

riku

2025-09-19 58c0f11fe2f23a1be2dec768f9ac02107301a634

 src/views/fysp/support/JingAnSupport.vue

@@ -1,6 +1,9 @@
<template>
  <el-tabs type="border-card">
    <el-tab-pane label="新设备">
  <el-tabs ref="tabsRef">
    <el-tab-pane label="静安夜间施工管理">
      <JingAnNightConstruction></JingAnNightConstruction>
    </el-tab-pane>
    <el-tab-pane label="静安工地扬尘设备信息匹配">
      <NewDevice></NewDevice>
    </el-tab-pane>
    <el-tab-pane label="新工地">
@@ -9,7 +12,52 @@
  </el-tabs>
</template>
<script setup>
import { ref, onMounted, provide, computed } from 'vue';
import NewDevice from './NewDevice.vue';
import NewConstruction from './NewConstruction.vue';
import JingAnNightConstruction from './JingAnNightConstruction.vue';

// 定义 tabs ref
const tabsRef = ref(null);
const tabsHeaderHeight = ref(0);

onMounted(() => {
  // 确保 DOM 已经渲染完成
  setTimeout(() => {
    tabsHeaderHeight.value = getTabsHeaderHeight();
  }, 0);
});

function getTabsHeaderHeight() {
  if (tabsRef.value) {
    // 获取 el-tabs 组件的 DOM 元素
    const tabsElement = tabsRef.value.$el;

    // Element UI 的 el-tabs header 通常有 .el-tabs__header 类名
    const headerElement = tabsElement.querySelector('.el-tabs__header');

    if (headerElement) {
      // 获取 header 的 offsetHeight（包含 padding 和 border，不包含 margin）
      const offsetHeight = headerElement.offsetHeight;

      // 获取计算样式以获取 margin 值
      const computedStyle = window.getComputedStyle(headerElement);

      // 解析 margin 值（上下左右）
      const marginTop = parseFloat(computedStyle.marginTop || 0);
      const marginBottom = parseFloat(computedStyle.marginBottom || 0);
      // const marginLeft = parseFloat(computedStyle.marginLeft || 0);
      // const marginRight = parseFloat(computedStyle.marginRight || 0);

      // 计算总高度（包含所有 padding、border 和 margin）
      const totalHeightWithMargin = offsetHeight + marginTop + marginBottom;

      return totalHeightWithMargin;
    }
  }
  return 0;
}

provide('tabsHeaderHeight', computed(() => tabsHeaderHeight.value));
</script>
<style scoped></style>