动态血氧的查看模版

public/spo2-report-template.html

@@ -7,7 +7,7 @@
   <style>
     body { background: #f5f7fa; margin: 0; font-family: 'Microsoft YaHei', Arial, sans-serif; }
     .spo2-report-template { max-width: 900px; margin: 0 auto; padding: 0; }
-    .report-page { background: white; margin: 0 auto 40px auto; max-width: 900px; min-height: 900px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); border-radius: 12px; padding: 48px 56px 32px 56px; page-break-after: always; }
+    .report-page { background: white; margin: 0 auto 40px auto; max-width: 900px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); border-radius: 12px; padding: 48px 56px 32px 56px; page-break-after: always; display: flex; flex-direction: column; position: relative; padding-bottom: 60px; }
     .report-title { text-align: center; font-size: 28px; font-weight: bold; margin-bottom: 32px; }
     .report-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; font-size: 16px; margin-bottom: 32px; }
     .report-info-item { display: flex; }
@@ -27,6 +27,8 @@
     .diagnosis-content { margin: 48px 0 32px 0; padding: 32px; background: #f8f9fa; border-radius: 8px; min-height: 300px; }
     .diagnosis-text { font-size: 18px; white-space: pre-wrap; color: #303133; font-family: inherit; }
     .report-footer { display: flex; justify-content: space-between; margin-top: 80px; font-size: 16px; }
+    .page-number { text-align: center; margin-top: auto; padding-top: 20px; font-size: 14px; color: #909399; position: absolute; left: 0; right: 0; bottom: 20px; background: white; z-index: 2; }
+    .report-page { background: white; margin: 0 auto 40px auto; max-width: 900px; min-height: 900px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); border-radius: 12px; padding: 48px 56px 32px 56px; page-break-after: always; display: flex; flex-direction: column; }
     .pie-charts-group { display: flex; gap: 32px; justify-content: center; margin-top: 32px; }
     .pie-chart-block { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 24px 16px; min-width: 260px; }
     .pie-chart-title { font-size: 18px; font-weight: bold; margin-bottom: 12px; }
@@ -45,10 +47,38 @@
     #print-button:hover { background-color: #337ecc; }
     #print-button svg { margin-right: 6px; }
     
+    @page {
+      margin: 20mm 15mm 30mm 15mm;
+    }
+    
     @media print {
-      body { background: white; }
+      body { background: white; overflow: visible !important; height: auto !important; }
-      .report-page { box-shadow: none; margin: 0; padding: 20px; page-break-after: always; }
+      html { overflow: visible !important; height: auto !important; }
+      .report-page { 
+        box-shadow: none; 
+        margin: 0; 
+        padding: 20px; 
+        page-break-after: always; 
+        position: relative; 
+        min-height: 700px; 
+      }
       #print-button, #loading-mask { display: none !important; }
+      /* 打印时页码固定在页面底部 */
+      .page-number { 
+        position: fixed !important; 
+        left: 0 !important; 
+        right: 0 !important; 
+        bottom: 5mm !important; 
+        text-align: center !important; 
+        color: #606266 !important; 
+        font-size: 12px !important; 
+        background: white !important; 
+        z-index: 9999 !important; 
+        margin: 0 !important; 
+        padding: 0 !important; 
+        width: 100% !important;
+        box-sizing: border-box !important;
+      }
     }
   </style>
 </head>
@@ -142,6 +172,7 @@
           </tbody>
         </table>
       </div>
+      <div class="page-number">第 1 页</div>
     </div>
     <div class="report-page report-diagnosis">
       <h2 class="report-title">诊断结论</h2>
@@ -152,6 +183,7 @@
         <div>报告医生：________________</div>
         <div>报告日期：<span class="report-date">--</span></div>
       </div>
+      <div class="page-number">第 2 页</div>
     </div>
     <div class="report-page report-pie-chart">
       <h2 class="report-title">血氧分布饼状图</h2>
@@ -198,6 +230,7 @@
           </div>
         </div>
       </div>
+      <div class="page-number">第 3 页</div>
     </div>
   </div>
   <script>
@@ -500,9 +533,64 @@
         }, 300);
       }
     });
+    
+    // 打印时调整页码位置
+    window.addEventListener('beforeprint', function() {
+      const pageNumbers = document.querySelectorAll('.page-number');
+      pageNumbers.forEach((pageNum, index) => {
+        // 使用fixed定位确保页码始终在页面底部
+        pageNum.style.position = 'fixed';
+        pageNum.style.left = '0';
+        pageNum.style.right = '0';
+        pageNum.style.bottom = '5mm';  // 与@media print中的设置一致
+        pageNum.style.textAlign = 'center';
+        pageNum.style.color = '#606266';
+        pageNum.style.fontSize = '12px';
+        pageNum.style.background = 'white';
+        pageNum.style.zIndex = '9999';
+        pageNum.style.margin = '0';
+        pageNum.style.padding = '0';
+      });
+    });
+    
+    // 打印后恢复样式
+    window.addEventListener('afterprint', function() {
+      // 不重置页码样式，保持在底部显示
+      // 在打印环境中，页码会保持在底部
+      // 在非打印环境中，恢复原始样式
+      if (!window.matchMedia('print').matches) {
+        const pageNumbers = document.querySelectorAll('.page-number');
+        pageNumbers.forEach((pageNum) => {
+          pageNum.style.position = 'absolute';
+          pageNum.style.left = '0';
+          pageNum.style.right = '0';
+          pageNum.style.bottom = '0';
+          pageNum.style.textAlign = 'center';
+          pageNum.style.color = '#909399';
+          pageNum.style.fontSize = '14px';
+          pageNum.style.background = 'white';
+          pageNum.style.zIndex = '2';
+          pageNum.style.margin = '0';
+          pageNum.style.padding = '20px 0';
+        });
+      }
+    });
     // 支持独立打开时自动填充测试数据
     document.addEventListener('DOMContentLoaded', function() {
       showLoading();
+      
+      // 确保页码始终在正确位置
+      const pageNumbers = document.querySelectorAll('.page-number');
+      pageNumbers.forEach((pageNum) => {
+        pageNum.style.position = 'absolute';
+        pageNum.style.left = '0';
+        pageNum.style.right = '0';
+        pageNum.style.bottom = '20px';
+        pageNum.style.textAlign = 'center';
+        pageNum.style.width = '100%';
+        pageNum.style.boxSizing = 'border-box';
+      });
+      
       if (!window.opener && !window.parent) {
         setTimeout(() => {
           fillData({

src/views/analysis/SpO₂.vue

@@ -294,11 +294,12 @@
   <!-- 报告模版弹窗（iframe方式） -->
   <el-dialog
     v-model="iframeDialogVisible"
-    title="血氧监测报告"
+    title=""
     fullscreen
     :close-on-click-modal="false"
     :close-on-press-escape="true"
     destroy-on-close
+    class="spo2-report-dialog"
   >
     <iframe
       ref="reportIframe"
@@ -306,7 +307,7 @@
       width="100%"
       height="100%"
       frameborder="0"
-      style="min-height: 100vh"
+      style="width: 100%; height: 100vh; border: none; display: block"
       @load="onIframeLoad"
     ></iframe>
   </el-dialog>
@@ -1004,3 +1005,29 @@ onMounted(async () => {
   }
 }
 </style>
+
+<style scoped>
+:deep(.spo2-report-dialog .el-dialog__body) {
+  padding: 0;
+  overflow: hidden;
+  height: 100vh;
+  width: 100%;
+}
+</style>
+
+<style>
+/* 只在弹窗全屏时生效，隐藏外层滚动条 */
+body,
+html {
+  overflow: hidden !important;
+  height: 100vh !important;
+}
+.spo2-report-dialog.el-dialog,
+.spo2-report-dialog .el-dialog__body {
+  padding: 0 !important;
+  overflow: hidden !important;
+  height: 100vh !important;
+  width: 100vw !important;
+  box-sizing: border-box;
+}
+</style>