月报汇总

src/views/pms/qhse/reportSummary/preview-drawer.vue

@@ -96,7 +96,15 @@ const mockMetricValueMap = computed<Record<string, Record<string, ReportMetricVa
     rljs: 4136.5,
     bjhq: 980.2
   },
-  totalManHours: { rhxy: 3824, scrd: 3416, sxty: 2988, eys: 2210, rqny: 2456, rljs: 1768, bjhq: 960 },
+  totalManHours: {
+    rhxy: 3824,
+    scrd: 3416,
+    sxty: 2988,
+    eys: 2210,
+    rqny: 2456,
+    rljs: 1768,
+    bjhq: 960
+  },
   withoutAccident: { rhxy: 186, scrd: 186, sxty: 186, eys: 132, rqny: 186, rljs: 186, bjhq: 186 },
   fatality: { rhxy: 0, scrd: 0, sxty: 0, eys: 0, rqny: 0, rljs: 0, bjhq: 0 },
   injury: { rhxy: 0, scrd: 1, sxty: 0, eys: 0, rqny: 0, rljs: 0, bjhq: 0 },
@@ -119,10 +127,42 @@ const mockMetricValueMap = computed<Record<string, Record<string, ReportMetricVa
   training: { rhxy: 5, scrd: 4, sxty: 4, eys: 3, rqny: 3, rljs: 2, bjhq: 2 },
   participantsTraining: { rhxy: 96, scrd: 82, sxty: 74, eys: 48, rqny: 56, rljs: 35, bjhq: 24 },
   trainingsHours: { rhxy: 64, scrd: 56, sxty: 48, eys: 32, rqny: 36, rljs: 24, bjhq: 16 },
-  waterConsumption: { rhxy: 82.5, scrd: 74.2, sxty: 65.8, eys: 48.6, rqny: 53.4, rljs: 31.8, bjhq: 12.2 },
-  dieselConsumption: { rhxy: 2680, scrd: 2410, sxty: 2085, eys: 1530, rqny: 1695, rljs: 980, bjhq: 220 },
-  electricityConsumption: { rhxy: 4250, scrd: 3980, sxty: 3650, eys: 2420, rqny: 2860, rljs: 1680, bjhq: 920 },
-  naturalGasConsumption: { rhxy: 1260, scrd: 1140, sxty: 980, eys: 660, rqny: 720, rljs: 450, bjhq: 180 },
+  waterConsumption: {
+    rhxy: 82.5,
+    scrd: 74.2,
+    sxty: 65.8,
+    eys: 48.6,
+    rqny: 53.4,
+    rljs: 31.8,
+    bjhq: 12.2
+  },
+  dieselConsumption: {
+    rhxy: 2680,
+    scrd: 2410,
+    sxty: 2085,
+    eys: 1530,
+    rqny: 1695,
+    rljs: 980,
+    bjhq: 220
+  },
+  electricityConsumption: {
+    rhxy: 4250,
+    scrd: 3980,
+    sxty: 3650,
+    eys: 2420,
+    rqny: 2860,
+    rljs: 1680,
+    bjhq: 920
+  },
+  naturalGasConsumption: {
+    rhxy: 1260,
+    scrd: 1140,
+    sxty: 980,
+    eys: 660,
+    rqny: 720,
+    rljs: 450,
+    bjhq: 180
+  },
   remark: {
     rhxy: '现场管理平稳',
     scrd: '专项培训已完成',
@@ -202,17 +242,10 @@ watch(
     :size="'100%'"
     :with-header="false"
     destroy-on-close
+    append-to-body
     body-class="qhse-report-preview-drawer__body"
     @update:model-value="handleVisibleChange">
     <div class="qhse-report-preview" v-loading="loading">
-      <div class="qhse-report-preview__toolbar">
-        <div class="qhse-report-preview__heading">
-          <h2>{{ report?.title || 'QHSE月报汇总' }}</h2>
-          <p>按月报模板预览，包含横向列头与纵向分类行头</p>
-        </div>
-        <el-button @click="handleVisibleChange(false)">关闭</el-button>
-      </div>
-
       <div class="qhse-report-preview__sheet">
         <div class="qhse-report-preview__sheet-title">QHSE 月度报告</div>
         <div class="qhse-report-preview__meta">
@@ -254,6 +287,10 @@ watch(
           </table>
         </div>
       </div>
+
+      <div class="qhse-report-preview__footer">
+        <el-button size="large" type="primary" @click="handleVisibleChange(false)">关闭</el-button>
+      </div>
     </div>
   </el-drawer>
 </template>
@@ -298,9 +335,10 @@ watch(
   gap: 16px;
   background: #fff;
   border: 1px solid #d8e0ef;
-  border-radius: 20px;
+  border-radius: 10px;
   box-shadow: 0 18px 50px rgb(35 51 84 / 10%);
   padding: 24px;
+  // margin-bottom: 20px;
 }
 
 .qhse-report-preview__sheet-title {
@@ -320,14 +358,16 @@ watch(
 }
 
 .qhse-report-preview__table-wrap {
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: visible;
   border: 1px solid #cfd8e6;
 }
 
 .qhse-report-preview__table {
   width: 100%;
   min-width: 820px;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   table-layout: fixed;
   font-size: 14px;
   color: #26334d;
@@ -348,6 +388,7 @@ watch(
     background: #dbe8ff;
     color: #183153;
     font-weight: 700;
+    box-shadow: inset 0 -1px 0 #cfd8e6;
   }
 }
 
@@ -357,6 +398,10 @@ watch(
   z-index: 2;
 }
 
+.qhse-report-preview__table thead .is-sticky-col {
+  z-index: 6;
+}
+
 .is-category {
   background: #edf3ff !important;
   font-weight: 700;
@@ -379,6 +424,27 @@ watch(
   color: #14346b;
 }
 
+.qhse-report-preview__footer {
+  position: fixed;
+  bottom: 0;
+  z-index: 20;
+  display: flex;
+  width: 100%;
+  right: 0;
+  top: 93vh;
+  justify-content: center;
+  // padding: 10px 20px;
+
+  background: rgb(255 255 255 / 90%);
+  border: 1px solid rgb(216 224 239 / 90%);
+  // border-radius: 18px;
+  box-shadow: 0 14px 40px rgb(35 51 84 / 14%);
+  backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 @media (width < 768px) {
   .qhse-report-preview {
     padding: 12px;
@@ -399,5 +465,16 @@ watch(
     font-size: 22px;
     letter-spacing: 1px;
   }
+
+  .qhse-report-preview__footer {
+    padding: 12px;
+    border-radius: 14px;
+  }
+}
+
+:deep(.qhse-report-preview-drawer__body) {
+  height: 100%;
+  overflow-y: auto;
+  padding: 0;
 }
 </style>