From 0b1af5bc7849be3c4931d2407c7e37cca6a9ae33 Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Tue, 9 Dec 2025 18:18:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88pdf=EF=BC=88=E6=9C=AA?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../renderer/src/views/DiagnosticMessage.vue  |  19 +-
 .../src/renderer/src/views/GenerateReport.vue |  10 +-
 .../src/renderer/src/views/PatientProfile.vue |  23 ++-
 .../renderer/src/views/PopUpOnlyReport.vue    | 178 ++++++++++++------
 .../src/renderer/src/views/PopUpReport.vue    |  16 ++
 frontend/src/renderer/src/views/viewPDF.vue   |  36 +++-
 6 files changed, 206 insertions(+), 76 deletions(-)

diff --git a/frontend/src/renderer/src/views/DiagnosticMessage.vue b/frontend/src/renderer/src/views/DiagnosticMessage.vue
index 4aa52081..78b0d6df 100644
--- a/frontend/src/renderer/src/views/DiagnosticMessage.vue
+++ b/frontend/src/renderer/src/views/DiagnosticMessage.vue
@@ -141,31 +141,36 @@ async function handleDiagnosticInfo(status) {
 .formreturnCancel {
   width: 80px;
   height: 40px;
-  background: #313131;
-  border: 1px solid rgb(148, 148, 148);
+  background-color: #597194;
+  border: 1px solid #597194;
   font-family: 'Noto Sans SC';
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
-  color: rgb(148, 148, 148);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 .formreturnCancel:hover {
-  background: #1e2c49;
-  color: #266fff;
-  border: 1px solid #266fff;
+  background-color: #14aaff;
+  color: #fff;
+  border: 1px solid #14aaff;
 }
 
 .formsaveCancel {
   width: 80px;
   height: 40px;
-  background: #266fff;
+  background:#0b94d5;
+  border:1px solid #0b94d5;
   font-family: 'Noto Sans SC';
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
   color: #FFFFFF;
 }
+.formsaveCancel:hover{
+  background:#14aaff;
+  border:1px solid #14aaff;
+}
 </style>
 <style>
 .DiagnosticMessage-container .el-form-item__label{
diff --git a/frontend/src/renderer/src/views/GenerateReport.vue b/frontend/src/renderer/src/views/GenerateReport.vue
index c0a514ce..d64268fe 100644
--- a/frontend/src/renderer/src/views/GenerateReport.vue
+++ b/frontend/src/renderer/src/views/GenerateReport.vue
@@ -210,7 +210,7 @@
    :selectedPatient="selectedPatient"
    :detectionInfo="detectionInfo"
    :selectId="rawData.id"
-   @closePopUpReport="closePopUpReport"
+   @closePopUpOnlyReport="closePopUpOnlyReport"
    />
   </div>
 </template>
@@ -344,7 +344,15 @@ function closeSelectData(is,val){
 }
 function closePopUpReport() { 
   isPopUpReport.value = false
+  emit("closeGenerateReport",true)
 }
+
+function closePopUpOnlyReport() { 
+  isPopUpOnlyReport.value = false
+  emit("closeGenerateReport",true)
+}
+
+
 </script>
 
 <style scoped>
diff --git a/frontend/src/renderer/src/views/PatientProfile.vue b/frontend/src/renderer/src/views/PatientProfile.vue
index 67fd54bc..9dd8fdbb 100644
--- a/frontend/src/renderer/src/views/PatientProfile.vue
+++ b/frontend/src/renderer/src/views/PatientProfile.vue
@@ -303,7 +303,7 @@
         </div>
       </div>
     </div>
-    <!-- <ViewPDF /> -->
+    <ViewPDF v-if="isViewPDF" :pdfUrl="pdfUrl" @closeViewPDF="closeViewPDF"/>
   </div>
 </template>
 
@@ -341,6 +341,8 @@ const props = defineProps({
   }
 })
 const isTip = ref(false) // 退出提示
+const isViewPDF = ref(false) // 是否查看PDF
+const pdfUrl = ref('') // PDF地址
 const tipValue = ref('')
 const delType = ref('')
 const detectionId = ref('') // 列表检测ID
@@ -380,6 +382,9 @@ function getNo(order) {
     return order
   }
 }
+function closeViewPDF(){
+  isViewPDF.value = false
+}
 function clickImg(item,index){
   debugger
   selectIndex.value = index
@@ -562,10 +567,13 @@ function deleteClick(row){
   isTip.value = true
 }
 function fileClick(row){
-  ElMessage.success({
-      message: '预览文件',
-      duration: 3000
-    });
+  pdfUrl.value = BACKEND_URL + '/' + row.detection_report
+  debugger
+  isViewPDF.value = true
+  // ElMessage.success({
+  //     message: '预览文件',
+  //     duration: 3000
+  //   });
 }
 
 function selectedChange(val){ 
@@ -695,7 +703,10 @@ function generateReport(row,index){ // 打开生成报告页面
   detectionId.value = row.id 
   isGenerateReport.value = true
 }
-function closeGenerateReport(){ // 关闭生成报告页面
+function closeGenerateReport(e){ // 关闭生成报告页面
+  if(e == true){
+     sessionsInit()
+  }
   isGenerateReport.value = false
 }
 
diff --git a/frontend/src/renderer/src/views/PopUpOnlyReport.vue b/frontend/src/renderer/src/views/PopUpOnlyReport.vue
index 6363e82b..7192bfea 100644
--- a/frontend/src/renderer/src/views/PopUpOnlyReport.vue
+++ b/frontend/src/renderer/src/views/PopUpOnlyReport.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="PopUpOnlyReport-container">
+  <div class="PopUpOnlyReport-container" id="popup-report-root">
     <div class="PopUpOnlyReport-container-body"  id="pdf-content">
       <div style="height: 100%; padding:0 90px; box-sizing: border-box;">
         <div class="PopUpOnlyReport-container-bodytitle">体态测量报告单</div>
@@ -131,8 +131,8 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { getBackendUrl } from '@/services/api.js'
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
+// import html2canvas from 'html2canvas';
+// import jsPDF from 'jspdf';
 const emit = defineEmits([ 'closePopUpOnlyReport' ]);
 const props = defineProps({
   selectedPatient: {
@@ -187,6 +187,7 @@ onMounted(() => {
       }
     }
   }
+
   setTimeout(() => {
     generatePDF()
   }, 500);
@@ -206,66 +207,127 @@ function getFormattedTime() {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 }
 const generatePDF = async () => {
-  const element = document.getElementById('pdf-content'); 
-  
-  // PDF尺寸配置 
-  const pdf = new jsPDF('p', 'mm', 'a4');
-  const pageWidth = pdf.internal.pageSize.getWidth(); 
-  const pageHeight = pdf.internal.pageSize.getHeight(); 
-  
-  // 计算缩放比例
-  const scale = 2; // 提高清晰度
-  const elementWidth = element.offsetWidth; 
-  const elementHeight = element.scrollHeight; 
-  const widthRatio = pageWidth / (elementWidth / scale);
-  
-  // 智能分页算法 
-  const pageContentHeight = (pageHeight / widthRatio) * scale;
-  let position = 0;
-  let currentPage = 1;
- 
-  while (position < elementHeight) {
-    // 添加新页面（首页除外）
-    if (currentPage > 1) {
-      pdf.addPage(); 
+  try {
+    const root = document.getElementById('popup-report-root')
+    if (!root) {
+      ElMessage.error('报告容器未找到')
+      return
     }
- 
-    // 分块渲染
-    const canvas = await html2canvas(element, {
-      scale,
-      useCORS: true,
-      windowHeight: pageContentHeight,
-      height: pageContentHeight,
-      y: position,
-      x: 0,
-      scrollY: -window.scrollY  // 锁定滚动位置
-    });
- 
-    // 计算当前块尺寸 
-    const imgData = canvas.toDataURL('image/jpeg',  1.0);
-    const imgWidth = pageWidth;
-    const imgHeight = (canvas.height  * imgWidth) / canvas.width; 
+
+    if (!window.electronAPI) {
+      console.error('electronAPI 未定义')
+      return
+    }
+
+    const pdfBuffer = await window.electronAPI.generateReportPdf({
+      selector: '#popup-report-root',
+      pageSize: 'A4',
+      landscape: true, // 横向
+      printBackground: true
+    })
     
-    // 添加图片到PDF 
-    pdf.addImage(imgData,  'JPEG', 0, 0, imgWidth, imgHeight);
+    const blob = new Blob([pdfBuffer], { type: 'application/pdf' })
+    const form = new FormData()
+    // 使用检测ID作为文件名
+    const filename = `${props.detectionInfo.id || 'report'}.pdf`
+    form.append('file', blob, filename)
     
-    // 更新位置
-    position += pageContentHeight;
-    currentPage++;
+    // 如果有detectionInfo.id，则上传到后端
+    if (props.detectionInfo.id) {
+      const res = await fetch(`${BACKEND_URL}/api/reports/${props.detectionInfo.id}/upload`, {
+        method: 'POST',
+        body: form
+      })
+      
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}: ${res.statusText}`)
+      }
+      
+      const json = await res.json()
+      if (json.success) {
+        ElMessage.success('报告生成并上传成功')
+        emit('closePopUpOnlyReport', true)
+      } else {
+        throw new Error(json.error || '上传失败')
+      }
+    } else {
+      // 仅供预览或下载
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+      emit('closePopUpOnlyReport', true)
+    }
+  } catch (e) {
+    console.error('报告生成异常:', e)
+    ElMessage.error(`报告生成失败：${e.message}`)
   }
- 
-  // 生成并下载PDF 
-  const pdfBlob = pdf.output('blob'); 
-  const url = URL.createObjectURL(pdfBlob); 
-  const a = document.createElement('a'); 
-  a.href  = url;
-  a.download  = '体态测量报告单.pdf'; 
-  document.body.appendChild(a); 
-  a.click(); 
-  document.body.removeChild(a); 
-  URL.revokeObjectURL(url); 
-  emit("closePopUpOnlyReport",false)
 };
+// const generatePDF = async () => {
+//   const element = document.getElementById('pdf-content'); 
+  
+//   // PDF尺寸配置 
+//   const pdf = new jsPDF('p', 'mm', 'a4');
+//   const pageWidth = pdf.internal.pageSize.getWidth(); 
+//   const pageHeight = pdf.internal.pageSize.getHeight(); 
+  
+//   // 计算缩放比例
+//   const scale = 2; // 提高清晰度
+//   const elementWidth = element.offsetWidth; 
+//   const elementHeight = element.scrollHeight; 
+//   const widthRatio = pageWidth / (elementWidth / scale);
+  
+//   // 智能分页算法 
+//   const pageContentHeight = (pageHeight / widthRatio) * scale;
+//   let position = 0;
+//   let currentPage = 1;
+ 
+//   while (position < elementHeight) {
+//     // 添加新页面（首页除外）
+//     if (currentPage > 1) {
+//       pdf.addPage(); 
+//     }
+ 
+//     // 分块渲染
+//     const canvas = await html2canvas(element, {
+//       scale,
+//       useCORS: true,
+//       windowHeight: pageContentHeight,
+//       height: pageContentHeight,
+//       y: position,
+//       x: 0,
+//       scrollY: -window.scrollY  // 锁定滚动位置
+//     });
+ 
+//     // 计算当前块尺寸 
+//     const imgData = canvas.toDataURL('image/jpeg',  1.0);
+//     const imgWidth = pageWidth;
+//     const imgHeight = (canvas.height  * imgWidth) / canvas.width; 
+    
+//     // 添加图片到PDF 
+//     pdf.addImage(imgData,  'JPEG', 0, 0, imgWidth, imgHeight);
+    
+//     // 更新位置
+//     position += pageContentHeight;
+//     currentPage++;
+//   }
+ 
+//   // 生成并下载PDF 
+//   const pdfBlob = pdf.output('blob'); 
+//   const url = URL.createObjectURL(pdfBlob); 
+//   const a = document.createElement('a'); 
+//   a.href  = url;
+//   a.download  = '体态测量报告单.pdf'; 
+//   document.body.appendChild(a); 
+//   a.click(); 
+//   document.body.removeChild(a); 
+//   URL.revokeObjectURL(url); 
+//   emit("closePopUpOnlyReport",false)
+// };
 </script>
 
 <style scoped>
diff --git a/frontend/src/renderer/src/views/PopUpReport.vue b/frontend/src/renderer/src/views/PopUpReport.vue
index 46230572..b040518b 100644
--- a/frontend/src/renderer/src/views/PopUpReport.vue
+++ b/frontend/src/renderer/src/views/PopUpReport.vue
@@ -184,6 +184,11 @@
       <div class="PopUpReport-border2">{{ detectionInfo.treatment_info }}</div>
       <div class="PopUpReport-title2">备注</div>
       <div class="PopUpReport-border3">{{ detectionInfo.suggestion_info }}</div>
+      <div class="PopUpReport-footer">
+          <div style="margin-right: 80px;">检测时间：{{ detectionInfo.created_at }}</div>
+          <div style="margin-right: 80px;">报告时间：{{ getFormattedTime() }}</div>
+          <div>检测医生：{{ detectionInfo.creator_name }}</div>
+        </div>
     </div>
 
     
@@ -678,4 +683,15 @@ function getFormattedTime() {
     display: none !important;
   }
 }
+
+.PopUpOnlyReport-footer{
+  margin-top: 40px;
+  padding-top: 40px;
+  border-top: 1px solid #333;
+  display: flex;
+  font-weight: 700;
+  font-style: normal;
+  color: rgb(40, 40, 40);
+  font-size: 18px;
+}
 </style>
diff --git a/frontend/src/renderer/src/views/viewPDF.vue b/frontend/src/renderer/src/views/viewPDF.vue
index ab806887..fc822feb 100644
--- a/frontend/src/renderer/src/views/viewPDF.vue
+++ b/frontend/src/renderer/src/views/viewPDF.vue
@@ -1,8 +1,17 @@
 <template>
   <div class="viewPDF-container">
-    <div class="pdf-viewer">
-      <div class="pdf-container" ref="pdfContainer"></div>
+    <div class="viewPDF-header">
+      <div style="display: flex; align-items: center;">
+      </div>
+      <img src="@/assets/archive/close.png" alt="" style="cursor: pointer;" @click="handleCancel">
     </div>
+    <div style="padding: 0 20px;height: calc(100vh - 80px);">
+      <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
+    </div>
+   
+    <!-- <div class="pdf-viewer">
+      <div class="pdf-container" ref="pdfContainer"></div>
+    </div> -->
   </div>
 
 </template>
@@ -12,12 +21,23 @@ import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/ap
 
 import { ref, onMounted } from 'vue'
 import * as pdfjsLib from 'pdfjs-dist'
+const emit = defineEmits([ 'closeViewPDF' ]);
+const props = defineProps({
+  pdfUrl: {
+    required: false,
+    type: String,
+    default: ''
+  }
+})
+const pdfUrl = ref(props.pdfUrl)
 const pdfContainer = ref(null) // 容器用于挂载多个 canvas
 // 设置 worker 路径（重要）
 pdfjsLib.GlobalWorkerOptions.workerSrc  = '/pdf.worker.min.js' 
 const BACKEND_URL = getBackendUrl()
 const pdfCanvas = ref(null)
- 
+ function handleCancel(){
+   emit('closeViewPDF',false)
+ }
 // const renderPDF = async (url) => {
 //   try {
 //     // 加载 PDF 文档
@@ -106,7 +126,7 @@ const renderPage = async (pdf, pageNum, scale) => {
 }
 onMounted(() => {
   // 替换为你的 PDF 文件路径或 URL
-  renderPDF(`${BACKEND_URL}/202512070001/20251209141628/report_142802459.pdf`)  // 可以是本地文件或远程链接
+  // renderPDF(`${BACKEND_URL}/202512070001/20251209141628/report_142802459.pdf`)  // 可以是本地文件或远程链接
 })
 </script>
  
@@ -139,4 +159,12 @@ canvas {
   border-radius: 8px;
   overflow: auto;
 }
+
+.viewPDF-header{
+  height: 60px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-right: 20px;
+}
 </style>
\ No newline at end of file