tab监测点框高度

frontend/src/layouts/components/Footer/index.vue

@@ -25,7 +25,7 @@
             >数字式模块</el-dropdown-item
           >
           <el-dropdown-item @click="handelOpen('比对式')"
-            disabled>比对式模块</el-dropdown-item
+           >比对式模块</el-dropdown-item
           >
         </el-dropdown-menu>
       </template>

frontend/src/views/machine/device/components/devicePopup.vue

@@ -1,8 +1,8 @@
 <template>
   <el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center >
-    <el-tabs type="border-card" v-model="activeTab">
+    <el-tabs type="border-card" v-model="activeTab" @tab-change="onTabChange">
       <el-tab-pane label="设备台账信息">
-        <div>
+        <div ref="deviceInfoContainer">
           <el-form :model='formContent' ref='dialogFormRef' :rules='rules' :disabled="false" label-width="auto" class="form-three">
             <el-divider>设备信息</el-divider>
             <el-form-item label="装置编号" prop="createId">
@@ -76,7 +76,7 @@
             <el-form-item label="额定电流(A)" prop="devCurr" v-if="DevIsShow">
               <el-input v-model='formContent.devCurr' :disabled="true"/>
             </el-form-item>
-            <el-form-item label='被检通道' prop='inspectChannel' :label-width='100' v-if="MonIsShow">
+            <el-form-item label='被检通道' prop='inspectChannel'  v-if="MonIsShow">
                 <el-select v-model="formContent.inspectChannel"  multiple collapse-tags  :disabled="true"  :max-collapse-tags="4" placeholder="请选择被检通道" clearable>
                     <el-option
                         v-for="(option, index) in pqChannelArray"
@@ -153,9 +153,10 @@
           </el-form>
         </div>
       </el-tab-pane>
-
+       <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
             <!-- 监测点台账信息 tab pane -->
-            <MonitorTable @getParameter="getParameter" :MonIsShow="MonIsShow"  :DevFormContent = "formContent"/>
+            <MonitorTable @getParameter="getParameter" :DevFormContent = "formContent" :tableHeight="monitorTableHeight"></MonitorTable>
+          </el-tab-pane>
         </el-tabs>
         <template #footer>
             <div >
@@ -171,7 +172,7 @@ import {dialogBig} from '@/utils/elementBind'
 import {type Device} from '@/api/device/interface/device'
 import {ElMessage, type FormItemRule} from 'element-plus'
 import {addPqDev, updatePqDev} from '@/api/device/device'
-import {computed, reactive, type Ref, ref} from 'vue'
+import {computed, reactive, type Ref, ref, watchEffect, nextTick} from 'vue'
 import {useDictStore} from '@/stores/modules/dict'
 import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
 // 使用 dayjs 库格式化
@@ -196,7 +197,7 @@ const scene = ref('')
 const dialogFormRef = ref()
 const createDateTitle = ref('')
 const activeTab = ref('0') // '0' 对应第一个 tab
-
+const monitorTableHeight = ref(375) // 默认高度
 const pqChannelArray = ref([
   {
     value: '1',
@@ -206,6 +207,15 @@ const pqChannelArray = ref([
 const disabledDate = (time: Date) => {
   return time.getTime() > Date.now()
 }
+const onTabChange = (tabName: string | number) => {
+  const name = tabName.toString(); // 统一转为字符串处理
+  if (name === '1') {
+    const formElement = dialogFormRef.value.$el as HTMLElement
+    const formHeight = formElement.offsetHeight
+    monitorTableHeight.value = formHeight - 88
+  }
+}
+
 
 function useMetaInfo() {
   const dialogVisible = ref(false)

frontend/src/views/machine/device/components/monitorTab.vue

@@ -1,14 +1,13 @@
 <!-- components/MonitorPointTable.vue -->
 <template>
-    <el-tab-pane label="监测点台账信息" v-if="MonIsShow">
-      <div class='table-box' ref='popupBaseView'>
+      <div class='table-box'>
         <ProTable
           ref='proTable'
           :pagination="false"
           :toolButton="false"
           :columns='columns'
           :data="tableData"
-          :style="{ height: '375px',maxHeight: '400px',overflow:'hidden'}"
+          :style="{ height: tableHeight + 'px',overflow:'hidden'}"
         >
           <!-- 表格 header 按钮 -->
           <template #tableHeader='scope'>
@@ -29,7 +28,6 @@
         </ProTable>
       </div>
        <MonitorPopup @getParameter="getParameter" ref='monitorPopup'/>
-    </el-tab-pane>
   </template>
   
   <script setup lang="ts">
@@ -47,8 +45,8 @@
 
   // 定义 props
   const props = defineProps<{
-    MonIsShow: boolean;
-    DevFormContent:Device.ResPqDev
+    DevFormContent:Device.ResPqDev,
+    tableHeight?: number // 接收外部传入的高度
   }>();
 
  // ProTable 实例