添加导出fpd报告功能

frontend/src/renderer/src/views/GenerateReport.vue

@@ -9,7 +9,7 @@
     <img src="@/assets/archive/close.png" alt="" @click="closeCancel" style="cursor: pointer;">
    </div>
    <div class="generateReport-container-body">
-    <el-scrollbar height="calc(100%)" style="padding:0 90px; box-sizing: border-box;" id="pdf-content">
+    <el-scrollbar height="calc(100%)" style="padding:0 90px; box-sizing: border-box;">
       <div class="generateReport-container-bodytitle">体态测量报告单</div>
       <div class="generateReport-container-display">
         <div class="generateReport-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
@@ -200,25 +200,29 @@
 
    </div>
    <SelectData  v-if="isSelectData" :imageList="imageList" @closeSelectData="closeSelectData"/>
+   <PopUpReport  v-if="isPopUpReport"
+   :selectedPatient="selectedPatient"
+   :detectionInfo="detectionInfo"
+   :selectIds="[rawData.id,calibrationData.id]"
+   @closePopUpReport="closePopUpReport"
+   />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ref,  onMounted, onUnmounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { historyAPI,getBackendUrl } from '@/services/api.js'
-import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/api.js'
 // import { ipcRenderer } from 'electron'
-import html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
 import SelectData from '@/views/SelectData.vue'
+import PopUpReport from '@/views/PopUpReport.vue'
 
 const emit = defineEmits([ 'closeGenerateReport' ]);
 const props = defineProps({
   selectedPatient: {
     required: false,
     type: Object,
-    default: null
+    default: {}
   },
   
   detectionId: {
@@ -227,6 +231,7 @@ const props = defineProps({
     default: ""
   }
 })
+const isPopUpReport = ref(false)
 const BACKEND_URL = getBackendUrl()
 const rawData = ref({}) // 原始数据
 const calibrationData = ref({}) // 校准数据
@@ -291,6 +296,11 @@ function closeCancel() {
   emit("closeGenerateReport",false)
 }
 function confirmCancel() {
+  if(rawData.value.id == null){
+    ElMessage.error('请选择原始数据')
+    return
+  }
+  isPopUpReport.value = true
   // generatePDF()
   // emit("closeGenerateReport",false)
 }
@@ -321,41 +331,9 @@ function closeSelectData(is,val){
   }
   isSelectData.value = false
 }
-
+function closePopUpReport() { 
-
+  isPopUpReport.value = false
-const generatePDF = async () => {
+}
-    // 1. 通过 id 获取 DOM 元素
-    const element = document.getElementById('pdf-content'); 
-    
-    // 2. 转为 Canvas
-    const canvas = await html2canvas(element, {
-      scale: 2, // 提高清晰度 
-      useCORS: true, // 允许跨域图片
-    });
-
-    // 3. 生成 PDF
-    const pdf = new jsPDF('p', 'mm', 'a4'); // 纵向、毫米、A4尺寸
-    const imgData = canvas.toDataURL('image/jpeg',  1.0);
-    
-    // 计算图片在 PDF 中的尺寸
-    const pdfWidth = pdf.internal.pageSize.getWidth(); 
-    const pdfHeight = (canvas.height  * pdfWidth) / canvas.width; 
-    
-    // 添加图片到 PDF
-    pdf.addImage(imgData,  'JPEG', 0, 0, pdfWidth, pdfHeight);
-    
-    // 4. 获取 PDF 流（Blob 对象）
-    const pdfBlob = pdf.output('blob'); 
-    
-    // 5. 使用流（示例：上传或下载）
-    // 上传示例：const formData = new FormData(); formData.append('file',  pdfBlob);
-    // 下载示例：
-    const url = URL.createObjectURL(pdfBlob); 
-    const a = document.createElement('a'); 
-    a.href  = url;
-    a.download  = 'document.pdf'; 
-    a.click(); 
-  };
 </script>
 
 <style scoped>

frontend/src/renderer/src/views/PopUpReport.vue

@@ -0,0 +1,523 @@
+<template>
+  <div class="PopUpReport-container">
+   <div class="PopUpReport-container-body"  id="pdf-content">
+    <div style="height: 100%; padding:0 90px; box-sizing: border-box;">
+      <div class="PopUpReport-container-bodytitle">体态测量报告单</div>
+      <div class="PopUpReport-container-display">
+        <div class="PopUpReport-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
+        <div class="PopUpReport-container-userinfotext">ID：{{ detectionInfo.id }}</div>
+      </div>
+      <div class="PopUpReport-container-userinfodisplay">
+        <div class="PopUpReport-container-userinfotext2">
+          ID：{{ selectedPatient.id }}
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-210">
+          姓名：{{ selectedPatient.name }}
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-195">
+          性别：{{ selectedPatient.gender }}
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-195">
+          年龄：{{ calculateAge(selectedPatient.birth_date) }}岁
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-235">
+          身高：{{ selectedPatient.height }}cm
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-215">
+          体重：{{ selectedPatient.weight }}kg
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-95">
+          鞋码：{{ selectedPatient.shoe_size }}码
+        </div>
+        <div class="PopUpReport-container-userinfotext2">
+          电话：{{ selectedPatient.phone }}
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-405">
+          邮箱：{{ selectedPatient.email }}
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-430">
+          居住地：{{ selectedPatient.residence }}
+        </div>
+        <div class="PopUpReport-container-userinfotext2 width-310">
+          职业：{{ selectedPatient.occupation }}
+        </div>
+      </div>
+      <div class="PopUpReport-container-testdatatitle">【检测数据】</div>
+      <div class="PopUpReport-containerdisplay">
+        <div class="PopUpReport-container-leftbox">
+          <div class="displayflex">
+            <div class="displayflextext1">原始数据：</div>
+            <div class="displayflextext1">
+               {{ rawData.order }}
+            </div>
+          </div>
+          <!-- 选中后显示内容 -->
+          <div v-if="rawData.order && rawData.order!=''">
+            <div class="PopUpReport-content-title">整体数据</div>
+            <div style="width: 600px;height: 387px;">
+              <img :src="BACKEND_URL+'/' +  rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="PopUpReport-content-title">身体姿态</div>
+            <div style="width: 100%;height: 454px; display: flex;justify-content: center;">
+              <img :src="BACKEND_URL+'/' +  rawData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="PopUpReport-content-title">头部姿态</div>
+            <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              <img src="@/assets/archive/roll.png">
+              <img src="@/assets/archive/yaw.png">
+              <img src="@/assets/archive/pitch.png">
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesLeft.rotationLeftMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesLeft.tiltLeftMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesLeft.pitchDownMax}}°
+              </span></div>
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesLeft.rotationRightMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">右：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesLeft.tiltRightMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">仰：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesLeft.pitchUpMax}}°
+                </span>
+              </div>
+            </div>
+            <div class="PopUpReport-content-title">足底压力</div>
+            <div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
+              <img  :src="BACKEND_URL+'/' +  rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="PopUpReport-content-title">视频1图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  rawData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="PopUpReport-content-title">视频2图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  rawData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+          </div>
+        </div>
+        <div class="PopUpReport-container-rightbox">
+          <div class="displayflex">
+            <div class="displayflextext1">矫正数据：</div>
+            <div class="displayflextext1">
+               {{ calibrationData.order }}
+            </div>
+          </div>
+          <!-- 选中后显示内容 -->
+          <div v-if="calibrationData.order && calibrationData.order!=''">
+            <div class="PopUpReport-content-title">整体数据</div>
+            <div style="width: 600px;height: 387px;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="PopUpReport-content-title">身体姿态</div>
+            <div style="width: 100%;height: 454px; display: flex;justify-content: center;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="PopUpReport-content-title">头部姿态</div>
+            <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
+              <img src="@/assets/archive/roll.png">
+              <img src="@/assets/archive/yaw.png">
+              <img src="@/assets/archive/pitch.png">
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.rotationLeftMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.tiltLeftMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.pitchDownMax}}°
+              </span></div>
+            </div>
+            <div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
+              <div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
+                {{headPoseMaxValuesRight.rotationRightMax}}°
+              </span></div>
+              <div class="rollyawpitchtext">右：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.tiltRightMax}}°
+                </span>
+              </div>
+              <div class="rollyawpitchtext">仰：
+                <span class="rollyawpitchtextcolor">
+                  {{headPoseMaxValuesRight.pitchUpMax}}°
+                </span>
+              </div>
+            </div>
+            <div class="PopUpReport-content-title">足底压力</div>
+            <div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
+              <img  :src="BACKEND_URL+'/' +  calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="PopUpReport-content-title">视频1图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="PopUpReport-content-title">视频2图片</div>
+            <div style="width: 600px;height: 338px; display: flex;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="PopUpReport-container-testdatatitle">【诊断结果】</div>
+      <div class="PopUpReport-title2">记录</div>
+      <div class="PopUpReport-border1">{{ detectionInfo.diagnosis_info }}</div>
+      <div class="PopUpReport-title2">处理</div>
+      <div class="PopUpReport-border2">{{ detectionInfo.treatment_info }}</div>
+      <div class="PopUpReport-title2">备注</div>
+      <div class="PopUpReport-border3">{{ detectionInfo.suggestion_info }}</div>
+    </div>
+
+    
+
+   </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { getBackendUrl } from '@/services/api.js'
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
+const emit = defineEmits([ 'closePopUpReport' ]);
+const props = defineProps({
+  selectedPatient: {
+    required: false,
+    type: Object,
+    default: null
+  },
+  detectionInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  },
+  selectIds: {
+    required: false,
+    type: Array,
+    default: []
+  }
+})
+const BACKEND_URL = getBackendUrl()
+const rawData = ref({}) // 原始数据
+const calibrationData = ref({}) // 校准数据
+const isSelectData = ref(false) // 是否选择原始数据列表
+const imageList = ref([])
+const headPoseMaxValuesLeft = ref({  
+  rotationLeftMax: 0,    // 旋转-左旋最大值
+  rotationRightMax: 0,   // 旋转-右旋最大值
+  tiltLeftMax: 0,        // 倾斜-左倾最大值
+  tiltRightMax: 0,       // 倾斜-右倾最大值
+  pitchUpMax: 0,         // 俯仰-上仰最大值
+  pitchDownMax: 0  })
+
+  const headPoseMaxValuesRight= ref({  
+  rotationLeftMax: 0,    // 旋转-左旋最大值
+  rotationRightMax: 0,   // 旋转-右旋最大值
+  tiltLeftMax: 0,        // 倾斜-左倾最大值
+  tiltRightMax: 0,       // 倾斜-右倾最大值
+  pitchUpMax: 0,         // 俯仰-上仰最大值
+  pitchDownMax: 0  })
+const calculateAge = (birthDate) => { // 获取年龄
+  if (!birthDate) return '—'
+  const today = new Date()
+  const birth = new Date(birthDate)
+  let age = today.getFullYear() - birth.getFullYear()
+  const monthDiff = today.getMonth() - birth.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+    age--
+  }
+  return age
+}
+
+// 生命周期
+onMounted(() => {
+  imageList.value = props.detectionInfo.data
+  for (let i = 0; i < imageList.value.length; i++) {
+    if(imageList.value[i].id == props.selectIds[0]){
+      rawData.value = imageList.value[i] 
+      if(imageList.value[i].head_pose !=null){ 
+        headPoseMaxValuesLeft.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
+      }
+    }
+    if(imageList.value[i].id == props.selectIds[1]){
+      calibrationData.value = imageList.value[i] 
+      if(imageList.value[i].head_pose !=null){ 
+        headPoseMaxValuesRight.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
+      }
+    }
+  }
+  setTimeout(() => {
+    generatePDF()
+  }, 500);
+})
+onUnmounted(() => {
+  
+})
+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  = 'document.pdf'; 
+  document.body.appendChild(a); 
+  a.click(); 
+  document.body.removeChild(a); 
+  URL.revokeObjectURL(url); 
+  emit("closePopUpReport",false)
+};
+</script>
+
+<style scoped>
+.PopUpReport-container{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #fff;
+  z-index: 50;
+  overflow: auto;
+}
+.PopUpReport-container-body{
+  margin:20px auto 0;
+  width: 1600px;
+  background: #fff;
+  border-radius: 5px;
+  padding: 50px 0 20px;
+
+
+}
+.PopUpReport-container-display{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 25px;
+  border-bottom: 1px solid #333;
+}
+.PopUpReport-container-bodytitle{
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 36px;
+  color: #282828;
+  text-align: center;
+  padding-bottom: 20px;
+}
+.PopUpReport-container-userinfotext{
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+}
+.PopUpReport-container-userinfodisplay{
+  display: flex;
+  flex-wrap: wrap;
+  align-content:flex-start ;
+  padding: 20px 0;
+  padding-top: 30px;
+  border-bottom: 1px solid #333;
+}
+.PopUpReport-container-userinfotext2{
+  width: 240px;
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+  padding-bottom: 10px;
+}
+.width-210{ width: 210px; }
+.width-195{ width: 195px; }
+.width-215{ width: 215px; }
+.width-235{ width: 235px; }
+.width-95{ width: 95px; }
+.width-405{ width: 405px; }
+.width-430{ width: 430px; }
+.width-300{ width: 300px; }
+
+.PopUpReport-container-testdatatitle{
+  font-weight: 700;
+  font-style: normal;
+  color: #14AAFF;
+  font-size: 18px;
+  text-align: left;
+  padding: 20px 0;
+}
+.PopUpReport-containerdisplay{
+  display: flex;
+}
+.PopUpReport-container-leftbox{
+  width: 50%;
+  border-right:1px solid rgb(208, 208, 208) ;
+  box-sizing: border-box;
+}
+.PopUpReport-container-rightbox{
+  width: 50%;
+  box-sizing: border-box;
+  padding-left: 80px;
+}
+.displayflex{
+  display: flex;
+  align-items: center;
+}
+.PopUpReport-container .displayflextext1{
+  font-weight: 700;
+  font-style: normal;
+  color: #14AAFF;
+  font-size: 18px;
+  text-align: left;
+}
+.displayflexselect{
+  position: relative;
+  width: 200px;
+  height: 40px;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(220, 223, 230, 1);
+  border-radius: 4px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+  margin-left: 20px;
+  cursor: pointer;
+}
+.displayflexselect-icon{
+  position: absolute;
+  top: 15px;
+  right: 10px;
+}
+
+.PopUpReport-content-title{
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+  padding-top:30px;
+  padding-bottom: 15px;
+}
+.rollyawpitchtext{
+  font-style: normal;
+  color: #282828;
+  font-size: 24px;
+  width: 170px;
+}
+.rollyawpitchtextcolor{
+  color:#14AAFF;
+}
+.PopUpReport-title2{
+  font-weight: 700;
+  font-style: normal;
+  font-size: 18px;
+  color: #282828;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+}
+.PopUpReport-border1{
+  padding: 5px;
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+}
+.PopUpReport-border2{
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+  padding: 5px;
+}
+.PopUpReport-border3{
+  width: 100%;
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+  padding: 5px;
+}
+</style>