Эх сурвалжийг харах

fix: 同步瑞鹰生产简报表格样式

- 统一标题栏、日期选择器和表格容器结构
- 补充表格边框、加载态、表头及行背景样式
- 调整 full 模式表格行高,避免少量数据时行被拉伸
- 优化当日生产简况内容换行展示
Zimo 1 өдөр өмнө
parent
commit
371758d76d

+ 42 - 18
src/views/pms/stat/rykb/ryProductionBriefs.vue

@@ -178,9 +178,9 @@ onMounted(() => {
 
 <template>
   <div
-    class="panel device-list-panel production-brief-panel w-full flex flex-col"
+    class="panel device-list-panel production-brief-panel w-full min-h-0 flex flex-col"
     :class="{ 'production-brief-panel--full': props.pageMode === 'full' }">
-    <div class="panel-title flex items-center justify-between">
+    <div class="panel-title device-list-panel__title flex items-center justify-between">
       <div class="kb-panel-title-text flex items-center">
         <div class="icon-decorator">
           <span></span>
@@ -188,25 +188,28 @@ onMounted(() => {
         </div>
         生产简报
       </div>
-      <div class="production-brief-panel__picker">
+      <div class="device-list-panel__picker">
         <el-date-picker
           v-model="selectedDate"
           value-format="YYYY-MM-DD"
           type="date"
           placeholder="选择日期"
           :clearable="false"
-          class="production-brief-panel__picker-input"
+          class="device-list-panel__picker-input"
           @change="handleDateChange" />
       </div>
     </div>
-    <div class="device-list-panel__body flex-1 min-h-0">
+    <div class="device-list-panel__body flex flex-col flex-1 min-h-0">
       <el-table
         v-loading="loading"
         :data="tableData"
         :height="tableHeight"
         :span-method="tableSpanMethod"
+        element-loading-text="加载中..."
+        element-loading-background="rgb(222 236 252 / 72%)"
+        border
         class="device-list-table production-brief-table"
-        :class="{ 'production-brief-table--full': props.pageMode === 'full' }">
+        :class="{ 'device-list-table--full': props.pageMode === 'full' }">
         <el-table-column prop="projectClassification" label="公司" min-width="72" align="center" />
         <el-table-column prop="projectName" label="项目" min-width="150" align="center" />
         <el-table-column prop="deptName" label="队伍" min-width="94" align="center" />
@@ -222,7 +225,11 @@ onMounted(() => {
           prop="constructionBrief"
           label="当日生产简况"
           min-width="160"
-          align="center" />
+          align="center">
+          <template #default="{ row }">
+            <div class="production-brief-table__summary">{{ row.constructionBrief || '--' }}</div>
+          </template>
+        </el-table-column>
 
         <el-table-column label="当日进尺(m)/当日井次" min-width="150" align="center">
           <template #default="{ row }">
@@ -260,17 +267,13 @@ onMounted(() => {
 
 .device-list-panel.production-brief-panel--full {
   height: 100%;
+  min-height: 0;
   margin-top: 0;
 }
 
-.production-brief-panel__picker {
-  display: flex;
-  width: calc(120px * var(--kb-scale, 1));
-  align-items: center;
-}
-
-.production-brief-panel__picker-input {
-  width: calc(120px * var(--kb-scale, 1)) !important;
+.device-list-panel__picker,
+.device-list-panel__picker-input {
+  width: calc(160px * var(--kb-scale, 1)) !important;
 
   :deep(.el-input__wrapper) {
     min-height: calc(28px * var(--kb-scale, 1));
@@ -293,26 +296,47 @@ onMounted(() => {
   :deep(.el-table__header-wrapper th.el-table__cell) {
     font-size: calc(16px * var(--kb-scale, 1));
     line-height: 1.2;
+    color: #10233c !important;
+    background: #b5cde7 !important;
+    border-color: #fff !important;
   }
 
   :deep(.el-table__body td.el-table__cell) {
+    height: calc(58px * var(--kb-scale, 1));
     padding: calc(7px * var(--kb-scale, 1)) 0;
     font-size: calc(14px * var(--kb-scale, 1));
+    color: #07192c !important;
+    background: #89b3de !important;
+    border-color: #fff !important;
+  }
+
+  :deep(.el-table__body tr:nth-child(2n) td.el-table__cell) {
+    background: #b8cee5 !important;
+  }
+
+  :deep(.el-table__row:hover > td.el-table__cell) {
+    background: #75a5d6 !important;
   }
 }
 
-.production-brief-table--full {
+.production-brief-table__summary {
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.device-list-table--full {
   :deep(.el-scrollbar__view) {
     display: block;
     height: 100%;
   }
 
   :deep(.el-table__body) {
-    height: 100%;
+    height: auto;
   }
 
   :deep(.el-table__body tbody) {
-    height: 100%;
+    height: auto;
   }
 }
 </style>