修改报告样式和查看详情样式

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

@@ -4,12 +4,12 @@
     <div class="generateReport-container-headertitle">生成报告</div>
     <div style="display: flex;">
       <div class="generateReport-container-cancelbutton" @click="closeCancel">取消</div>
-      <div class="generateReport-container-confirmbutton" @click="closeCancel">确定</div>
+      <div class="generateReport-container-confirmbutton" @click="confirmCancel">确定</div>
     </div>
     <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 100px">
+    <el-scrollbar height="calc(100%)" style="padding:0 90px; box-sizing: border-box;" id="pdf-content">
       <div class="generateReport-container-bodytitle">体态测量报告单</div>
       <div class="generateReport-container-display">
         <div class="generateReport-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
@@ -190,11 +190,11 @@
       </div>
       <div class="generateReport-container-testdatatitle">【诊断结果】</div>
       <div class="generateReport-title2">记录</div>
-      <div class="generateReport-border1">记录信息</div>
+      <div class="generateReport-border1">{{ detectionInfo.diagnosis_info }}</div>
       <div class="generateReport-title2">处理</div>
-      <div class="generateReport-border2">保持观察，不予处理</div>
+      <div class="generateReport-border2">{{ detectionInfo.treatment_info }}</div>
       <div class="generateReport-title2">备注</div>
-      <div class="generateReport-border3">备注信息</div>
+      <div class="generateReport-border3">{{ detectionInfo.suggestion_info }}</div>
     </el-scrollbar>
     
 
@@ -208,6 +208,9 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 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'
 
 const emit = defineEmits([ 'closeGenerateReport' ]);
@@ -287,6 +290,10 @@ onMounted(() => {
 function closeCancel() {
   emit("closeGenerateReport",false)
 }
+function confirmCancel() {
+  // generatePDF()
+  // emit("closeGenerateReport",false)
+}
 onUnmounted(() => {
   
 })
@@ -314,6 +321,41 @@ function closeSelectData(is,val){
   }
   isSelectData.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>
@@ -523,7 +565,7 @@ function closeSelectData(is,val){
 .generateReport-border1{
   padding: 5px;
   width: 100%;
-  height: 200px;
+  min-height: 200px;
   background: rgba(255, 255, 255, 1);
   box-sizing: border-box;
   border-width: 1px;
@@ -538,7 +580,7 @@ function closeSelectData(is,val){
 }
 .generateReport-border2{
   width: 100%;
-  height: 40px;
+  min-height: 40px;
   background: rgba(255, 255, 255, 1);
   box-sizing: border-box;
   border-width: 1px;
@@ -553,7 +595,7 @@ function closeSelectData(is,val){
 }
 .generateReport-border3{
   width: 100%;
-  height: 120px;
+  min-height: 120px;
   background: rgba(255, 255, 255, 1);
   box-sizing: border-box;
   border-width: 1px;

frontend/src/renderer/src/views/ImageDetails.vue

@@ -15,7 +15,42 @@
           <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.body_image"  alt="" style="width: 100%;height: 100%;object-fit:contain;">
         </div>
         <div class="ImageDetails-content-imgbox" v-if="indexActive == 2">
-          <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.screen_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
+          <div style="background: #fff; padding-left: 80px;">
+            <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>
+         
+          <!-- <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.screen_image" alt="" style="width: 100%;height: 100%;object-fit:contain;"> -->
         </div>
         <div class="ImageDetails-content-imgbox" v-if="indexActive == 3">
           <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.foot_data_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
@@ -86,10 +121,22 @@ const BACKEND_URL = getBackendUrl() // 后端地址
 const indexActive = ref(0) // 图片详情索引
 const ImageDetailsInfo = ref({})  // 图片详情信息
 const pageIndex = ref(0)
+const headPoseMaxValuesRight= ref({  
+  rotationLeftMax: 0,    // 旋转-左旋最大值
+  rotationRightMax: 0,   // 旋转-右旋最大值
+  tiltLeftMax: 0,        // 倾斜-左倾最大值
+  tiltRightMax: 0,       // 倾斜-右倾最大值
+  pitchUpMax: 0,         // 俯仰-上仰最大值
+  pitchDownMax: 0  })
+
 // 生命周期
 onMounted(() => {
   pageIndex.value = props.selectIndex
   ImageDetailsInfo.value =  props.ImageDetailsList[props.selectIndex]
+  if(ImageDetailsInfo.value.head_pose !=null){ 
+    headPoseMaxValuesRight.value = JSON.parse(ImageDetailsInfo.value.head_pose).headPoseMaxValues
+  }
+
 })
 function clickIndex(index) {
   indexActive.value = index
@@ -98,12 +145,20 @@ function clickleft() {
   if (pageIndex.value > 0) {
     pageIndex.value = pageIndex.value-1
     ImageDetailsInfo.value =  props.ImageDetailsList[pageIndex.value]
+    if(ImageDetailsInfo.value.head_pose !=null){ 
+      headPoseMaxValuesRight.value = JSON.parse(ImageDetailsInfo.value.head_pose).headPoseMaxValues
+    }
+
   }
 }
 function clickright() {
   if (pageIndex.value < props.ImageDetailsList.length-1) {
     pageIndex.value = pageIndex.value + 1
     ImageDetailsInfo.value =  props.ImageDetailsList[pageIndex.value]
+    if(ImageDetailsInfo.value.head_pose !=null){ 
+      headPoseMaxValuesRight.value = JSON.parse(ImageDetailsInfo.value.head_pose).headPoseMaxValues
+    }
+
   }
 }
 function handleCancel() {
@@ -185,4 +240,15 @@ onUnmounted(() => {
   height: 100%;
   width: calc(100% - 160px);
 }
+
+
+.ImageDetails-content-imgbox .rollyawpitchtext{
+  font-style: normal;
+  color: #282828;
+  font-size: 24px;
+  width: 170px;
+}
+.ImageDetails-content-imgbox  .rollyawpitchtextcolor{
+  color:#14AAFF;
+}
 </style>

frontend/src/renderer/src/views/ImageDetailsCompare.vue

@@ -34,14 +34,78 @@
         <div class="ImageDetailsCompare-display"  v-if="indexActive == 2">
           <div class="ImageDetailsCompare-content-imgbox"  style="width: 740px;height: 100%;">
             <div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoLeft.order }}</div>
-            <img  :src="BACKEND_URL+'/' +  ImageDetailsInfoLeft.screen_image" alt="" 
+            <div style="width: 700px;height:361px;background: #fff;  padding-left: 80px;">
-            style="width: 740px;height:361px">
+              <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>
           </div>
           <div class="ImageDetailsCompare-content-imgbox" 
-            style="width: 740px;height: 100%;margin-left: 50px;">
+            style="width: 630px;height: 100%;margin-left: 50px;">
             <div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoRight.order }}</div>
-            <img  :src="BACKEND_URL+'/' +  ImageDetailsInfoRight.screen_image" alt="" 
+            <div style="width: 700px;height:361px;background: #fff;  padding-left: 80px;">
-            style="width: 740px;height:361px">
+              <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>
           </div>
         </div>
         <div class="ImageDetailsCompare-display"  v-if="indexActive == 3">
@@ -109,12 +173,34 @@ const indexActive = ref(0) // 图片详情索引
 const ImageDetailsInfoLeft = ref({})  // 左图片详情信息
 const ImageDetailsInfoRight = ref({})  // 右图片详情信息
 const pageIndex = ref(0)
+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  })
+
 // 生命周期
 onMounted(() => {
   pageIndex.value = props.selectIndex
   if(props.ImageDetailsList.length == 2){
     ImageDetailsInfoLeft.value =  props.ImageDetailsList[0]
+    if(props.ImageDetailsList[0].head_pose !=null){
+      headPoseMaxValuesLeft.value = JSON.parse(props.ImageDetailsList[0].head_pose).headPoseMaxValues
+    }
     ImageDetailsInfoRight.value =  props.ImageDetailsList[1]
+    if(props.ImageDetailsList[1].head_pose !=null){ 
+      headPoseMaxValuesRight.value = JSON.parse(props.ImageDetailsList[1].head_pose).headPoseMaxValues
+    }
   }
  
 })
@@ -217,4 +303,14 @@ onUnmounted(() => {
   margin-bottom: 20px;
   width: 100%;
 }
+
+.ImageDetailsCompare-content-imgbox .rollyawpitchtext{
+  font-style: normal;
+  color: #282828;
+  font-size: 24px;
+  width: 170px;
+}
+.ImageDetailsCompare-content-imgbox  .rollyawpitchtextcolor{
+  color:#14AAFF;
+}
 </style>

frontend/src/renderer/src/views/PatientProfile.vue

@@ -173,7 +173,7 @@
                 <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" >
                   <div v-for="(item, index) in useImgList" :key="index"
                     class="patientprofile-imgbox">
-                    <div class="patientprofile-imgactive">
+                    <div class="patientprofile-imgactive" @click="clickImg(item,index)">
                       <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;">
                     </div>
                     <div class="patientprofile-imgtextbox">
@@ -286,6 +286,8 @@
     <ImageDetailsCompare v-if="isImageDetailsCompare" 
      :ImageDetailsList="ImageDetailsList" @closeImageDetailsCompare="closeImageDetailsCompare"/>
 
+    <ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
+      @closeImageDetails="closeImageDetails"/>
       <!-- 无操作退出提示 -->
     <div class="pop-up-mask" v-if="isTip">
       <div class="pop-up-tip-container">
@@ -312,6 +314,7 @@ import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/ap
 import { useAuthStore } from '@/stores/index.js'
 import GenerateReport from '@/views/GenerateReport.vue'
 import ImageDetailsCompare from '@/views/ImageDetailsCompare.vue'
+import ImageDetails from '@/views/ImageDetails.vue'
 
 const formatDate = (date) => {
   const d = new Date(date)
@@ -350,7 +353,8 @@ const profileInfo = ref({
 const selectedRecord = ref({})
 const recordData =ref([])
 const isImageDetailsCompare = ref(false) // 是否显示对比图片详情
-
+const isImageDetails =ref(false) // 是否显示图片详情
+const selectIndex = ref(0) // 图片详情选中的索引
 const ImageDetailsList = ref([]) // 图片详情列表
 
 const checkboxGroup = ref([]) // 图片列表选中的数据
@@ -374,6 +378,11 @@ function getNo(order) {
     return order
   }
 }
+function clickImg(item,index){
+  debugger
+  selectIndex.value = index
+  isImageDetails.value =true
+}
 const calculateAge = (birthDate) => { // 获取年龄
   if (!birthDate) return '—'
   const today = new Date()
@@ -676,9 +685,10 @@ function closeGenerateReport(){ // 关闭生成报告页面
 }
 
 function viewCompareImg(){
-  if(checkboxGroup.length != 2){
+  if(checkboxGroup.value.length != 2){
     return
   }
+
   ImageDetailsList.value = []
   for(let i=0;i<checkboxGroup.value.length;i++){ 
     for(let j=0;j<imageList.value.length;j++){ 
@@ -708,6 +718,9 @@ function delVideoClick(){ // 临时方法
 function closeImageDetailsCompare(){ // 关闭图片对比页面
   isImageDetailsCompare.value = false
 }
+function closeImageDetails(){ // 关闭图片对比页面
+  isImageDetails.value = false
+}
 
 function tipCancel(){
   isTip.value = false
@@ -1402,4 +1415,7 @@ historyAPI.VideoDelById(ids).then((response)=>{
   background-color: #14aaff;
   color: #fff;
 }
+.patientprofile-container-info .el-select__placeholder{
+  color: #fff;
+}
 </style>