预览pdf（未完成）

2025-12-09 18:18:22 +08:00 · 2025-12-09 18:18:22 +08:00 · 0b1af5bc78
commit 0b1af5bc78
parent 68936a6ab3
6 changed files with 206 additions and 76 deletions
--- 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{
--- 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>
--- 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
 }

--- 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>
--- 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>
--- 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>