修改报告样式

public/templates/report-template.html

@@ -8,6 +8,42 @@
     <!-- 添加PDF.js库 -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
     <style>
+        /* 体质辨识结果表格样式 */
+        .constitution-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 10px auto 30px;  /* 上边距10px，左右auto居中，下边距30px留出空间 */
+        }
+
+        .constitution-table td {
+            border: 1px solid #000;
+            padding: 8px;
+            text-align: center;
+        }
+
+        /* 头像容器样式 */
+        .avatar-container {
+            width: 120px;
+            height: 160px;
+            margin: 30px auto;
+            border: 1px solid #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #fff;
+        }
+
+        .avatar-image {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: cover;
+        }
+
+        /* 调整下方内容的间距 */
+        .person_detail:first-child {
+            margin-top: 20px;
+        }
+
         .report-container {
             max-width: 1200px;
             margin: 0 auto;
@@ -30,8 +66,8 @@
             background-color: #4a90e2;
             color: white;
             padding: 15px;
-            font-size: 18px;
-            font-weight: bold;
+            font-size: 18px; /* 这里控制字体大小 */
+            font-weight: bold;/* 这里控制字体粗细 */
             border-bottom: 1px solid #e0e0e0;
         }
 
@@ -70,6 +106,7 @@
             border: 1px solid #ddd;
             padding: 12px;
             text-align: left;
+            font-size: 16px;  /* 可以在这里设置字体大小 */
         }
 
         .exam-table th {
@@ -158,13 +195,27 @@
                 max-width: none;
             }
 
+            /* 体质辨识结果表格样式 */
+            .constitution-table {
+                width: 100%;
+                font-size: 12px;
+            }
+
+            .constitution-table td {
+                padding: 5px;
+                border: 1px solid #000 !important;
+                -webkit-print-color-adjust: exact !important;
+                print-color-adjust: exact !important;
+            }
+
             /* 一般检查特殊处理 */
             .general-exam {
                 page-break-inside: avoid !important;
                 break-inside: avoid !important;
                 page-break-after: always !important;
                 break-after: page !important;
-                height: 1123px !important; /* 设置固定高度，与其他报告一致 */
+                height: 1123px !important;
+                /* 设置固定高度，与其他报告一致 */
                 width: 800px !important;
                 margin: 0 auto !important;
                 padding: 0 !important;
@@ -173,9 +224,10 @@
                 box-shadow: none !important;
                 display: block !important;
                 overflow: visible !important;
-                position: relative !important; /* 确保可以放置绝对定位的页脚 */
+                position: relative !important;
+                /* 确保可以放置绝对定位的页脚 */
             }
-            
+
             /* 确保一般检查的页脚正确显示 */
             .general-exam .report-footer {
                 position: absolute !important;
@@ -186,14 +238,14 @@
                 padding-top: 5px !important;
                 display: block !important;
             }
-            
+
             .general-exam .report-footer-text {
                 font-size: 10px !important;
                 margin: 0 !important;
                 font-style: italic !important;
                 text-align: right !important;
             }
-            
+
             /* 确保一般检查的页码正确显示 */
             .general-exam .page-number {
                 position: absolute !important;
@@ -217,13 +269,13 @@
             /* 一般检查的表格 */
             .general-exam .exam-table {
                 margin: 5px 0 !important;
-                font-size: 9px !important;
+                font-size: 16px !important;
             }
 
             .general-exam .exam-table th,
             .general-exam .exam-table td {
                 padding: 2px !important;
-                font-size: 9px !important;
+                font-size: 16px !important;
             }
 
             /* 一般检查的小结 */
@@ -476,7 +528,8 @@
         .preface-content .footer {
             margin-top: 40px;
             width: 100%;
-            text-align: right;  /* 整个footer右对齐 */
+            text-align: right;
+            /* 整个footer右对齐 */
         }
 
         .preface-content .hospital-name {
@@ -493,7 +546,8 @@
             min-width: 100px;
             border-bottom: 1px solid #000;
             text-align: center;
-            margin: 0 5px;  /* 增加左右间距 */
+            margin: 0 5px;
+            /* 增加左右间距 */
         }
 
         /* 添加页码样式 */
@@ -505,7 +559,7 @@
             text-align: center;
             font-size: 12px;
         }
-        
+
         /* 打印时的页码样式 */
         @media print {
             .page-number {
@@ -524,13 +578,13 @@
             padding-top: 10px;
             text-align: right;
         }
-        
+
         .report-footer-text {
             margin: 0;
             font-size: 12px;
             font-style: italic;
         }
-        
+
         /* 打印时的页码样式 */
         @media print {
             .report-footer {
@@ -541,11 +595,29 @@
                 border-top: 1px solid #000;
                 padding-top: 5px;
             }
-            
+
             .report-footer-text {
                 font-size: 10px;
             }
         }
+
+        /* 首页页码在预览时隐藏 */
+        .first-page-number {
+            display: none;
+        }
+
+        /* 打印时显示首页页码 */
+        @media print {
+            .first-page-number {
+                display: block;
+                position: absolute;
+                bottom: 10px;
+                left: 0;
+                right: 0;
+                text-align: center;
+                font-size: 10px;
+            }
+        }
     </style>
 </head>
 
@@ -555,7 +627,7 @@
         <div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
             <div class="report-title">
                 <div style="display: flex; justify-content: space-between; align-items: center;">
-                    <span>体检编号：--</span>
+                    <span>&nbsp;&nbsp;体检编号：--</span>
                 </div>
             </div>
             <div class="repott_concent">
@@ -569,6 +641,10 @@
                     <div class="repott_concent_Examination">Examination</div>
                     <div class="repott_concent_Report">Report</div>
                 </div>
+                <!-- 添加头像区域 -->
+                <div class="avatar-container">
+                    <img src="" alt="头像" class="avatar-image" id="avatar-image">
+                </div>
                 <div style="margin-top: 100px;">
                     <div class="person_detail">
                         <span class="person_title">姓名</span><span class="person_content">--</span>
@@ -592,12 +668,9 @@
                     </div>
                 </div>
             </div>
-            </div>
-            <!-- 添加页码 -->
-                <div class="page-number" >第1页</div>
-            </div>
+            <!-- 添加 first-page-number 类 -->
+            <div class="page-number first-page-number">第1页</div>
         </div>
-    </br>
         <!-- 前言 -->
         <div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
             <div class="report-title">
@@ -611,7 +684,7 @@
                     <p class="greeting">尊敬的<span class="underline">________</span>先生/女士：</p>
 
                     <div class="paragraph-group">
-                        <p>您好！欢迎参加2024年度国家基本公共卫生服务老年人健康体检项目。</p>
+                        <p>您好！欢迎参加国家基本公共卫生服务老年人健康体检项目。</p>
 
                         <p>健康体检是在自我感觉健康的情况下，通过医学手段对身体各脏器的状态进行的检测。定期的健康体检可以帮助您及早发现健康状态下的危机，为您的健康保驾护航。</p>
 
@@ -624,10 +697,9 @@
 
                     <div class="footer">
                         <p class="hospital-name" style="text-align: right;">乌兰察布第四医院</p>
-                        <p class="slogan" style="text-align: right;">定期体检，尊享健康</p>
                     </div>
                 </div>
-               
+
             </div>
             <div class="report-footer">
                 <p class="report-footer-text">定期体检，尊享健康</p>
@@ -635,7 +707,28 @@
             <!-- 添加页码 -->
             <div class="page-number">第2页</div>
         </div>
-     
+        </br>
+        <!-- 汇总 -->
+        <div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
+            <div class="report-title">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <span>汇总</span>
+                    <span>填充值</span>
+                </div>
+            </div>
+            <div class="paragraph-group">
+                <p id="summary-year" 
+                <span class="year-value"">
+                    这里是汇总结果
+                </p>
+
+            </div>
+            <div class="report-footer">
+                <p class="report-footer-text">定期体检，尊享健康</p>
+            </div>
+            <!-- 添加页码 -->
+            <div class="page-number">第3页</div>
+        </div>
         <p> </p>
         <!-- 一般检查部分 -->
         <div class="report-item general-exam">
@@ -697,7 +790,7 @@
                 <p class="report-footer-text">定期体检，尊享健康</p>
             </div>
             <!-- 添加页码 -->
-            <div class="page-number">第3页</div>
+            <div class="page-number">第4页</div>
         </div>
 
         <!-- 超声检查报告 -->
@@ -735,7 +828,7 @@
                 <p class="report-footer-text">定期体检，尊享健康</p>
             </div>
             <!-- 添加页码 -->
-            <div class="page-number">第4页</div>
+            <div class="page-number">第5页</div>
         </div>
 
         <!-- 尿常规检查报告 -->
@@ -767,7 +860,7 @@
                 <p class="report-footer-text">定期体检，尊享健康</p>
             </div>
             <!-- 添加页码 -->
-            <div class="page-number">第5页</div>
+            <div class="page-number">第6页</div>
         </div>
 
         <!-- 生化检查报告 -->
@@ -799,7 +892,7 @@
                 <p class="report-footer-text">定期体检，尊享健康</p>
             </div>
             <!-- 添加页码 -->
-            <div class="page-number">第6页</div>
+            <div class="page-number">第7页</div>
         </div>
 
         <!-- 血常规检查报告 -->
@@ -831,7 +924,7 @@
                 <p class="report-footer-text">定期体检，尊享健康</p>
             </div>
             <!-- 添加页码 -->
-            <div class="page-number">第7页</div>
+            <div class="page-number">第8页</div>
         </div>
 
         <!-- 心电图检查报告 -->
@@ -857,7 +950,27 @@
                 <p class="report-footer-text">定期体检，尊享健康</p>
             </div>
             <!-- 添加页码 -->
-            <div class="page-number">第8页</div>
+            <div class="page-number">第9页</div>
+        </div>
+        <!-- 中医体质辨识 -->
+        <div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
+            <div class="report-title">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <span>中医体质辨识</span>
+                    <span>填充值</span>
+                </div>
+            </div>
+            <table class="constitution-table" id="constitution-result" style="margin: 10px auto 30px;">
+                <tr>
+                    <td width="50%" style="text-align: center;">体质辨识结果</td>
+                    <td width="50%" class="constitution-value" style="text-align: center;">--</td>
+                </tr>
+            </table>
+            <div class="report-footer">
+                <p class="report-footer-text">定期体检，尊享健康</p>
+            </div>
+            <!-- 添加页码 -->
+            <div class="page-number">第10页</div>
         </div>
     </div>
 

src/views/summary/reprot-print/components/ReportPreview.vue

@@ -14,16 +14,14 @@
         v-if="dialogVisible"
         src="\templates\report-template.html"
         frameborder="0"
-        style="width: 100%; height: 100%; border: none;"
+        style="width: 100%; height: 100%; border: none"
         @load="handleIframeLoad"
       ></iframe>
     </div>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="handleClose">关闭</el-button>
-        <el-button type="primary" @click="handlePrint">
-          打印报告
-        </el-button>
+        <el-button type="primary" @click="handlePrint"> 打印报告 </el-button>
       </span>
     </template>
   </el-dialog>
@@ -32,6 +30,7 @@
 <script setup lang="ts">
 import { ref, defineProps, defineEmits, watch } from 'vue'
 import { PatientApi } from '@/api/inspect/inspectpatient/index'
+import Message from '@/layout/components/Message/src/Message.vue'
 
 const props = defineProps({
   visible: {
@@ -55,7 +54,7 @@ watch(
     if (newVal) {
       // 当对话框显示时，设置iframe内容
       setTimeout(() => {
-       // setIframeContent()
+        // setIframeContent()
       }, 100) // 给一点时间让DOM更新
     }
   }
@@ -72,10 +71,10 @@ const handleIframeLoad = async () => {
   const iframe = document.querySelector('iframe')
   const reportData = await PatientApi.getReportAll(props.reportData.medicalSn)
   console.log('获取到的报告数据:', reportData)
-  
+
   if (iframe && iframe.contentWindow) {
     const doc = iframe.contentWindow.document
-    
+
     // 更新首页体检编号
     const reportTitle = doc.querySelector('.report-title')
     if (reportTitle) {
@@ -86,15 +85,15 @@ const handleIframeLoad = async () => {
     // 姓名
     const nameContent = doc.querySelector('.person_detail:nth-child(1) .person_content')
     if (nameContent) nameContent.textContent = reportData.pName || '--'
-    
+
     // 性别
     const sexContent = doc.querySelector('.person_detail:nth-child(2) .person_content')
     if (sexContent) sexContent.textContent = reportData.gender || '--'
-    
+
+    let age = '--'
     // 年龄 - 从出生日期计算
     const ageContent = doc.querySelector('.person_detail:nth-child(3) .person_content')
     if (ageContent) {
-      let age = '--'
       if (reportData.birthday) {
         const birthDate = new Date(reportData.birthday)
         const today = new Date()
@@ -107,25 +106,39 @@ const handleIframeLoad = async () => {
       }
       ageContent.textContent = age
     }
-    
+
     // 单位
     const companyContent = doc.querySelector('.person_detail:nth-child(4) .person_content')
     if (companyContent) companyContent.textContent = reportData.company || '--'
-    
+
     // 联系电话
     const phoneContent = doc.querySelector('.person_detail:nth-child(5) .person_content')
     if (phoneContent) phoneContent.textContent = reportData.phone || '--'
-    
+
     // 体检日期
     const examDateContent = doc.querySelector('.person_detail:nth-child(6) .person_content')
     if (examDateContent) {
       const date = reportData.examDate ? new Date(reportData.examDate) : null
-      const formattedDate = date ? 
-        `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日` : 
-        '--'
+      const formattedDate = date
+        ? `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日`
+        : '--'
       examDateContent.textContent = formattedDate
     }
-    
+    // 更新头像
+    const avatarImg = doc.getElementById('avatar-image')
+    if (avatarImg) {
+      if (avatarImg) {
+        try {
+          // 尝试直接赋值
+          avatarImg.src = reportData.headPicUrl || ''
+        } catch (error) {
+          console.error('设置src时出错:', error)
+        }
+      } else {
+        console.log('未找到头像元素')
+      }
+    }
+
     // 更新标题
     const title = doc.querySelector('h1')
     if (title) {
@@ -142,9 +155,9 @@ const handleIframeLoad = async () => {
 
     // 更新一般检查数据（身高等）
     const generalData = reportData.data.reduce((acc, item) => {
-      acc[item.itemName] = item;
-      return acc;
-    }, {});
+      acc[item.itemName] = item
+      return acc
+    }, {})
 
     const tbody = doc.querySelector('.general-exam .exam-table tbody')
     if (tbody) {
@@ -164,19 +177,19 @@ const handleIframeLoad = async () => {
     const generalSummary = doc.querySelector('.general-exam .report-summary p')
     if (generalSummary) {
       // 只取身高项目的 analyse 作为小结
-      const heightData = generalData['身高'];
-      generalSummary.textContent = heightData?.analyse || '暂无小结';
+      const heightData = generalData['身高']
+      generalSummary.textContent = heightData?.analyse || '暂无小结'
     }
 
     // 更新超声检查报告
-    const ultrasoundData = reportData.data.find(item => item.itemName === '超声');
+    const ultrasoundData = reportData.data.find((item) => item.itemName === '超声')
     if (ultrasoundData) {
       const ultrasoundSummary = doc.querySelector('.ultrasound-exam .report-summary')
       if (ultrasoundSummary) {
         // 解析 analyse 字段（格式："检查所见：xxx\n检查结果：xxx"）
-        const findings = ultrasoundData.analyse?.split('\n')[0]?.replace('检查所见：', '') || '';
-        const conclusion = ultrasoundData.analyse?.split('\n')[1]?.replace('检查结果：', '') || '';
-        
+        const findings = ultrasoundData.analyse?.split('\n')[0]?.replace('检查所见：', '') || ''
+        const conclusion = ultrasoundData.analyse?.split('\n')[1]?.replace('检查结果：', '') || ''
+
         ultrasoundSummary.innerHTML = `
           <p><strong>【所见】</strong><br>${findings}</p>
           <p><strong>【所得】</strong><br>${conclusion}</p>
@@ -186,44 +199,45 @@ const handleIframeLoad = async () => {
 
     // 更新其他检查报告
     // 尿常规
-    const urineData = reportData.data.find(item => item.itemName === '尿常规');
+    const urineData = reportData.data.find((item) => item.itemName === '尿常规')
     if (urineData) {
       const urineSummary = doc.querySelector('.report-item:nth-of-type(3) .report-summary p')
       if (urineSummary) {
-        urineSummary.textContent = urineData.analyse || '暂无小结';
+        urineSummary.textContent = urineData.analyse || '暂无小结'
       }
     }
 
     // 生化检查
-    const biochemData = reportData.data.find(item => item.itemName === '生化');
+    const biochemData = reportData.data.find((item) => item.itemName === '生化')
     if (biochemData) {
       const biochemSummary = doc.querySelector('.report-item:nth-of-type(4) .report-summary p')
       if (biochemSummary) {
-        biochemSummary.textContent = biochemData.analyse || '暂无小结';
+        biochemSummary.textContent = biochemData.analyse || '暂无小结'
       }
     }
 
     // 血常规
-    const bloodData = reportData.data.find(item => item.itemName === '血常规');
+    const bloodData = reportData.data.find((item) => item.itemName === '血常规')
     if (bloodData) {
       const bloodSummary = doc.querySelector('.report-item:nth-of-type(5) .report-summary p')
       if (bloodSummary) {
-        bloodSummary.textContent = bloodData.analyse || '暂无小结';
+        bloodSummary.textContent = bloodData.analyse || '暂无小结'
       }
     }
 
-  
-
-  // 获取所有报告标题中的第二个span（填充值所在位置）
-  const reportTitles = doc.querySelectorAll('.report-title > div > span:nth-child(2)');
-  // 更新每个填充值
-  reportTitles.forEach(span => {
-    span.textContent = `体检编号:${reportData.medicalSn || '--'}`+`姓名:${reportData.pName || '--'}`;
-  });
-
+    // 获取所有报告标题中的第二个span（填充值所在位置）
+    const reportTitles = doc.querySelectorAll('.report-title > div > span:nth-child(2)')
+    // 更新每个填充值
+    reportTitles.forEach((span) => {
+      span.textContent =
+        `${reportData.medicalSn || '--'} ` +
+        `${reportData.pName || '--'} ` +
+        `${reportData.gender || '--'} ` +
+        `${age || '--'}岁`
+    })
 
     // 心电图
-    const ecgData = reportData.data.find(item => item.type === 'ecg');
+    const ecgData = reportData.data.find((item) => item.type === 'ecg')
     if (ecgData) {
       const ecgSummary = doc.querySelector('.report-item:last-child .report-summary')
       if (ecgSummary) {
@@ -234,64 +248,75 @@ const handleIframeLoad = async () => {
       }
     }
 
+    // 设置体质辨识结果
+    const constitutionValue = doc.querySelector('#constitution-result .constitution-value')
+    if (constitutionValue) {
+      constitutionValue.textContent = '平和质' || '--'
+    }
+
+    // 更新汇总结果
+    const summaryElement = doc.getElementById('summary-year')
+    if (summaryElement) {
+      summaryElement.textContent = `这里是汇总结果值啊`
+    }
+
     // 更新图片和 PDF 链接
-    reportData.data.forEach(item => {
+    reportData.data.forEach((item) => {
       if (item.data) {
-        let reportTitle = '';
+        let reportTitle = ''
         switch (item.itemName || item.type) {
           case '血常规':
-            reportTitle = '血常规检查报告';
-            break;
+            reportTitle = '血常规检查报告'
+            break
           case 'ecg':
-            reportTitle = '心电图检查报告';
-            break;
+            reportTitle = '心电图检查报告'
+            break
           case '生化':
-            reportTitle = '生化检查报告';
-            break;
+            reportTitle = '生化检查报告'
+            break
           case '超声':
-            reportTitle = '超声检查报告';
-            break;
+            reportTitle = '超声检查报告'
+            break
           case '尿常规':
-            reportTitle = '尿常规检查报告';
-            break;
+            reportTitle = '尿常规检查报告'
+            break
           default:
-            break;
+            break
         }
 
         if (reportTitle) {
-          const reportSection = Array.from(doc.querySelectorAll('.report-item')).find(section => {
-            const titleElement = section.querySelector('.report-title');
-            return titleElement && titleElement.textContent?.trim().includes(reportTitle);
-          });
+          const reportSection = Array.from(doc.querySelectorAll('.report-item')).find((section) => {
+            const titleElement = section.querySelector('.report-title')
+            return titleElement && titleElement.textContent?.trim().includes(reportTitle)
+          })
           if (reportSection) {
-            // 为PDF URL添加参数 
-            const pdfUrl = item.data + '#toolbar=0&navpanes=0&view=Fit';
-            
+            // 为PDF URL添加参数
+            const pdfUrl = item.data + '#toolbar=0&navpanes=0&view=Fit'
+
             // 更新 iframe src
-            const iframeElement = reportSection.querySelector('.screen-only iframe');
+            const iframeElement = reportSection.querySelector('.screen-only iframe')
             if (iframeElement) {
-              iframeElement.src = pdfUrl;
+              iframeElement.src = pdfUrl
             }
 
             // 更新图片 src（如果是图片，保持原样）
-            const img = reportSection.querySelector('img');
+            const img = reportSection.querySelector('img')
             if (img) {
-              img.src = item.data;
+              img.src = item.data
             }
 
             // 更新打印时显示的 PDF 容器的 data-pdf-url
-            const pdfContainer = reportSection.querySelector('.print-only.pdf-container');
+            const pdfContainer = reportSection.querySelector('.print-only.pdf-container')
             if (pdfContainer) {
-              pdfContainer.setAttribute('data-pdf-url', pdfUrl);
+              pdfContainer.setAttribute('data-pdf-url', pdfUrl)
             }
           }
         }
       }
-    });
+    })
   }
 }
 
-
 const handlePrint = () => {
   const iframe = document.querySelector('iframe')
   if (iframe && iframe.contentWindow) {
@@ -309,17 +334,17 @@ const handlePrint = () => {
     loadingMessage.style.zIndex = '9999'
     loadingMessage.innerHTML = '正在准备打印，请稍候...'
     iframeDoc.body.appendChild(loadingMessage)
-    
+
     console.log('准备打印报告，等待2秒...')
-    
+
     // 延迟2秒后打印
     setTimeout(() => {
       // 移除加载提示
       iframeDoc.body.removeChild(loadingMessage)
-      
+
       // 执行打印
       iframe.contentWindow?.print()
-      
+
       // 打印完成后关闭窗口（如果是在新窗口中打开的）
       setTimeout(() => {
         if (window.opener) {
@@ -374,4 +399,4 @@ const handleClose = () => {
   flex: 1;
   overflow: hidden; /* 再次确保没有滚动条 */
 }
-</style>
+</style>