Quellcode durchsuchen

feat: 调整瑞都生产日报表格样式

- 参照项目部统计表格统一标题栏、日期选择器和表格布局
- 补充表格边框、加载态、隔行色和 hover 样式
- 优化施工简要内容换行展示
Zimo vor 2 Tagen
Ursprung
Commit
95a65fc7df
1 geänderte Dateien mit 48 neuen und 27 gelöschten Zeilen
  1. 48 27
      src/views/pms/stat/rdkb/rdProductionBriefs.vue

+ 48 - 27
src/views/pms/stat/rdkb/rdProductionBriefs.vue

@@ -144,9 +144,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>
@@ -154,25 +154,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="projectName" label="项目" min-width="150" align="center">
           <template #default="{ row }">
             {{ formatText(row.projectName) }}
@@ -230,7 +233,9 @@ onMounted(() => {
         </el-table-column>
         <el-table-column prop="constructionBrief" label="施工简要" min-width="220" align="center">
           <template #default="{ row }">
-            {{ formatText(row.constructionBrief) }}
+            <div class="production-brief-table__summary">
+              {{ formatText(row.constructionBrief) }}
+            </div>
           </template>
         </el-table-column>
 
@@ -249,31 +254,27 @@ 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));
-    padding: 0 calc(10px * var(--kb-scale, 1));
-  }
+  // :deep(.el-input__wrapper) {
+  //   min-height: calc(28px * var(--kb-scale, 1));
+  //   padding: 0 calc(10px * var(--kb-scale, 1));
+  // }
 
-  :deep(.el-input__inner) {
-    font-size: calc(12px * var(--kb-scale, 1));
-  }
+  // :deep(.el-input__inner) {
+  //   font-size: calc(12px * var(--kb-scale, 1));
+  // }
 
-  :deep(.el-input__prefix-inner),
-  :deep(.el-input__suffix-inner) {
-    font-size: calc(14px * var(--kb-scale, 1));
-  }
+  // :deep(.el-input__prefix-inner),
+  // :deep(.el-input__suffix-inner) {
+  //   font-size: calc(14px * var(--kb-scale, 1));
+  // }
 }
 
 .production-brief-table {
@@ -282,11 +283,25 @@ onMounted(() => {
   :deep(.el-table__header-wrapper th.el-table__cell) {
     font-size: calc(16px * var(--kb-scale, 1));
     line-height: 1.2;
+    color: #10233c;
+    background: #b5cde7;
+    border-color: #fff;
   }
 
   :deep(.el-table__body td.el-table__cell) {
     padding: calc(7px * var(--kb-scale, 1)) 0;
     font-size: calc(14px * var(--kb-scale, 1));
+    color: #07192c;
+    background: #89b3de;
+    border-color: #fff;
+  }
+
+  :deep(.el-table__body tr:nth-child(2n) td.el-table__cell) {
+    background: #b8cee5;
+  }
+
+  :deep(.el-table__row:hover > td.el-table__cell) {
+    background: #75a5d6 !important;
   }
 }
 
@@ -297,7 +312,13 @@ onMounted(() => {
   white-space: nowrap;
 }
 
-.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%;