ptw统计

src/views/pms/qhse/ptw/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <el-row :gutter="20">
+  <el-row :gutter="20" class="ptw-page-layout">
     <!-- 左侧部门树 -->
     <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
-    <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
+    <el-col :span="isLeftContentCollapsed ? 24 : 20" :xs="24" class="ptw-main-col">
       <div ref="statsContainerRef" class="ptw-stats mb-15px">
         <div class="ptw-stats-card" style="position: relative">
           <div class="ptw-stats-card__label" style="position: absolute; top: 15px">作业票总数</div>
@@ -21,7 +21,7 @@
           <Echart ref="timeTrendChartRef" :height="200" :options="timeTrendChartOptions" />
         </div>
       </div>
-      <div class="bg-white rounded-sm px-2 py-2">
+      <div class="bg-white rounded-sm px-2 py-2 shrink-0">
         <!-- 搜索工作栏 -->
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
           <el-form-item label="PTW编号" prop="ptwNo">
@@ -66,13 +66,17 @@
       </div>
 
       <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
-        <zm-table
-          :loading="loading"
-          :data="list"
-          :stripe="true"
-          height="calc(85vh - 130px)"
-          :show-overflow-tooltip="true">
+      <ContentWrap
+        class="ptw-table-wrap flex-1 overflow-hidden mt-15px !mb-0"
+        style="border: none"
+        :body-style="tableWrapBodyStyle">
+        <div class="ptw-table-scroll">
+          <zm-table
+            :loading="loading"
+            :data="list"
+            :stripe="true"
+            height="100%"
+            :show-overflow-tooltip="true">
           <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
             <template #default="scope">
               {{ scope.$index + 1 }}
@@ -175,14 +179,17 @@
               </el-button>
             </template>
           </zm-table-column>
-        </zm-table>
+          </zm-table>
+        </div>
 
         <!-- 分页 -->
-        <Pagination
-          :total="total"
-          v-model:page="queryParams.pageNo"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getList" />
+        <div class="ptw-pagination">
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList" />
+        </div>
       </ContentWrap>
     </el-col>
   </el-row>
@@ -610,6 +617,13 @@ const statsContainerRef = ref<HTMLElement | null>(null)
 const staticChartRef = ref<any>(null)
 const timeTrendChartRef = ref<any>(null)
 let statsResizeObserver: ResizeObserver | null = null
+const tableWrapBodyStyle = {
+  padding: '10px',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+}
 
 // 对话框相关
 const dialogVisible = ref(false)
@@ -1302,10 +1316,40 @@ const handleRadioChange2 = (row: any) => {
 </script>
 
 <style scoped>
+.ptw-page-layout {
+  align-items: stretch;
+}
+
+.ptw-main-col {
+  height: 85vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .ptw-stats {
   display: grid;
   grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr);
   gap: 16px;
+  flex-shrink: 0;
+}
+
+.ptw-table-wrap {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ptw-table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ptw-pagination {
+  flex-shrink: 0;
 }
 
 .ptw-stats-card,
@@ -1341,6 +1385,10 @@ const handleRadioChange2 = (row: any) => {
 }
 
 @media (max-width: 768px) {
+  .ptw-main-col {
+    height: auto;
+  }
+
   .ptw-stats {
     grid-template-columns: 1fr;
   }