修改报告详情

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

@@ -0,0 +1,569 @@
+<template>
+  <div class="generateReport-container">
+   <div class="generateReport-container-header">
+    <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>
+    <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">
+      <div class="generateReport-container-bodytitle">体态测量报告单</div>
+      <div class="generateReport-container-display">
+        <div class="generateReport-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
+        <div class="generateReport-container-userinfotext">ID：{{ detectionInfo.id }}</div>
+      </div>
+      <div class="generateReport-container-userinfodisplay">
+        <div class="generateReport-container-userinfotext2">
+          ID：{{ selectedPatient.id }}
+        </div>
+        <div class="generateReport-container-userinfotext2 width-210">
+          姓名：{{ selectedPatient.name }}
+        </div>
+        <div class="generateReport-container-userinfotext2 width-195">
+          性别：{{ selectedPatient.gender }}
+        </div>
+        <div class="generateReport-container-userinfotext2 width-195">
+          年龄：{{ calculateAge(selectedPatient.birth_date) }}岁
+        </div>
+        <div class="generateReport-container-userinfotext2 width-235">
+          身高：{{ selectedPatient.height }}cm
+        </div>
+        <div class="generateReport-container-userinfotext2 width-215">
+          体重：{{ selectedPatient.weight }}kg
+        </div>
+        <div class="generateReport-container-userinfotext2 width-95">
+          鞋码：{{ selectedPatient.shoe_size }}码
+        </div>
+        <div class="generateReport-container-userinfotext2">
+          电话：{{ selectedPatient.phone }}
+        </div>
+        <div class="generateReport-container-userinfotext2 width-405">
+          邮箱：{{ selectedPatient.email }}
+        </div>
+        <div class="generateReport-container-userinfotext2 width-430">
+          居住地：{{ selectedPatient.residence }}
+        </div>
+        <div class="generateReport-container-userinfotext2 width-310">
+          职业：{{ selectedPatient.occupation }}
+        </div>
+      </div>
+      <div class="generateReport-container-testdatatitle">【检测数据】</div>
+      <div class="generateReport-containerdisplay">
+        <div class="generateReport-container-leftbox">
+          <div class="displayflex">
+            <div class="displayflextext1">选择原始数据</div>
+            <div class="displayflexselect" @click="getRawData('left')">
+               {{ rawData.order }}
+              <img src="@/assets/archive/selectbottom.png" class="displayflexselect-icon" alt="">
+            </div>
+          </div>
+          <!-- 选中后显示内容 -->
+          <div v-if="rawData.order && rawData.order!=''">
+            <div class="generateReport-content-title">整体数据</div>
+            <div style="width: 600px;height: 337px;">
+              <img :src="BACKEND_URL+'/' +  rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="generateReport-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="generateReport-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="generateReport-content-title">足底压力</div>
+            <div style="width: 600px;height: 270px; display: flex;">
+              <img  :src="BACKEND_URL+'/' +  rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="generateReport-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="generateReport-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="generateReport-container-rightbox">
+          <div class="displayflex">
+            <div class="displayflextext1">选择矫正数据</div>
+            <div class="displayflexselect" @click="getRawData('right')">
+               {{ calibrationData.order }}
+              <img src="@/assets/archive/selectbottom.png" class="displayflexselect-icon" alt="">
+            </div>
+          </div>
+          <!-- 选中后显示内容 -->
+          <div v-if="calibrationData.order && calibrationData.order!=''">
+            <div class="generateReport-content-title">整体数据</div>
+            <div style="width: 600px;height: 337px;">
+              <img :src="BACKEND_URL+'/' +  calibrationData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="generateReport-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="generateReport-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="generateReport-content-title">足底压力</div>
+            <div style="width: 600px;height: 270px; display: flex;">
+              <img  :src="BACKEND_URL+'/' +  calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
+              object-fit:contain; ">
+            </div>
+            <div class="generateReport-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="generateReport-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="generateReport-container-testdatatitle">【诊断结果】</div>
+      <div class="generateReport-title2">记录</div>
+      <div class="generateReport-border1">记录信息</div>
+      <div class="generateReport-title2">处理</div>
+      <div class="generateReport-border2">保持观察，不予处理</div>
+      <div class="generateReport-title2">备注</div>
+      <div class="generateReport-border3">备注信息</div>
+    </el-scrollbar>
+    
+
+   </div>
+   <SelectData  v-if="isSelectData" :imageList="imageList" @closeSelectData="closeSelectData"/>
+  </div>
+</template>
+
+<script setup>
+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 SelectData from '@/views/SelectData.vue'
+
+const emit = defineEmits([ 'closeGenerateReport' ]);
+const props = defineProps({
+  selectedPatient: {
+    required: false,
+    type: Object,
+    default: null
+  },
+  
+  detectionId: {
+    required: false,
+    type: String,
+    default: ""
+  }
+})
+const BACKEND_URL = getBackendUrl()
+const rawData = ref({}) // 原始数据
+const calibrationData = ref({}) // 校准数据
+const isSelectData = ref(false) // 是否选择原始数据列表
+const imageList = ref([])
+const detectionInfo= 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  })
+
+function getNo(order) {
+  if(order<10){
+    return '0'+order 
+  }else{ 
+    return order
+  }
+}
+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
+}
+const sessionsById = async (session_id) => {
+  try {
+    // 导出报告逻辑
+    const response = await historyAPI.sessionsById(session_id)
+    if (response.success) {
+      response.data.data.forEach((element,index) => {
+        element.order ='D-'+  (getNo(index + 1))
+      });
+      detectionInfo.value = response.data
+      imageList.value = response.data.data
+    }
+  } catch (error) {
+    ElMessage.error('获取失败')
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  sessionsById(props.detectionId)
+})
+function closeCancel() {
+  emit("closeGenerateReport",false)
+}
+onUnmounted(() => {
+  
+})
+const selectIndex = ref('left')
+function getRawData(e){
+  selectIndex.value = e
+  isSelectData.value = true
+}
+
+function closeSelectData(is,val){ 
+  if(is == true){
+    if(selectIndex.value == 'left'){
+      rawData.value = val 
+      if(val.head_pose !=null){ 
+        headPoseMaxValuesLeft.value = JSON.parse(val.head_pose).headPoseMaxValues
+      }
+    }else if(selectIndex.value == 'right'){
+      calibrationData.value = val 
+      if(val.head_pose !=null){ 
+        headPoseMaxValuesRight.value = JSON.parse(val.head_pose).headPoseMaxValues
+      }
+    }
+   
+   
+  }
+  isSelectData.value = false
+}
+</script>
+
+<style scoped>
+.generateReport-container{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: #0b0c0f;
+  z-index: 50;
+}
+.generateReport-container-header{
+  width: 1920px;
+  height: 60px;
+  background: inherit;
+  background-color: #191d28;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30px;
+}
+.generateReport-container-headertitle{
+  font-weight: 700;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
+}
+.generateReport-container-cancelbutton{
+  width: 100px;
+  height: 40px;
+  background-color: #597194;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.generateReport-container-cancelbutton:hover{
+  background-color: #14aaff;
+  color: #fff;
+}
+.generateReport-container-confirmbutton{
+  width: 100px;
+  height: 40px;
+  background-color: #0b94d5;
+  border-radius: 4px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.generateReport-container-confirmbutton:hover{
+  background-color: #14aaff;
+}
+.generateReport-container-body{
+  margin:20px auto 0;
+  width: 1600px;
+  height: calc(100vh - 80px);
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(219, 225, 236, 0.3);
+  padding: 50px 0 20px;
+
+}
+.generateReport-container-display{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 25px;
+  border-bottom: 1px solid #333;
+}
+.generateReport-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;
+}
+.generateReport-container-userinfotext{
+  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+  font-weight: 700;
+  font-style: normal;
+  color: #282828;
+  font-size: 18px;
+}
+.generateReport-container-userinfodisplay{
+  display: flex;
+  flex-wrap: wrap;
+  align-content:flex-start ;
+  padding: 20px 0;
+  padding-top: 30px;
+  border-bottom: 1px solid #333;
+}
+.generateReport-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; }
+
+.generateReport-container-testdatatitle{
+  font-weight: 700;
+  font-style: normal;
+  color: #14AAFF;
+  font-size: 18px;
+  text-align: left;
+  padding: 20px 0;
+}
+.generateReport-containerdisplay{
+  display: flex;
+}
+.generateReport-container-leftbox{
+  width: 50%;
+  border-right:1px solid rgb(208, 208, 208) ;
+  box-sizing: border-box;
+}
+.generateReport-container-rightbox{
+  width: 50%;
+  box-sizing: border-box;
+  padding-left: 80px;
+}
+.displayflex{
+  display: flex;
+  align-items: center;
+}
+.displayflextext1{
+  font-weight: 400;
+  font-style: normal;
+  color: #282828;
+  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;
+}
+
+.generateReport-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;
+}
+.generateReport-title2{
+  font-weight: 700;
+  font-style: normal;
+  font-size: 18px;
+  color: #282828;
+  padding-top: 20px;
+  padding-bottom: 20px;
+
+}
+.generateReport-border1{
+  padding: 5px;
+  width: 100%;
+  height: 200px;
+  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: 18px;
+  text-decoration: none;
+  color: #383838;
+}
+.generateReport-border2{
+  width: 100%;
+  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-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+  padding: 5px;
+}
+.generateReport-border3{
+  width: 100%;
+  height: 120px;
+  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-style: normal;
+  font-size: 18px;
+  text-decoration: none;
+  color: #383838;
+  padding: 5px;
+}
+</style>

frontend/src/renderer/src/views/Header.vue

@@ -281,13 +281,14 @@
   }
   .badge-invalid { 
     text-align: center;
-    background-color: linear-gradient(135deg, rgba(69, 91, 123, 1) 0%, rgba(69, 91, 123, 1) 0%, rgba(55, 65, 81, 1) 100%, rgba(55, 65, 81, 1) 100%); 
+    background: linear-gradient(135deg, rgba(69, 91, 123, 1) 0%, rgba(69, 91, 123, 1) 0%, rgba(55, 65, 81, 1) 100%, rgba(55, 65, 81, 1) 100%); 
     font-weight: 400;
     font-style: normal;
     color: rgb(255, 255, 255);
+    font-size:14px;
     text-align: center;
   }
-  .badge-trial { background-color: rgba(67, 67, 67, 1); color: #949494; }
+  .badge-trial { background: rgba(67, 67, 67, 1); color: #949494; }
   .badge-valid { 
    
     text-align: center;

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

@@ -0,0 +1,188 @@
+<template>
+    <div class="ImageDetails-box">
+      <div class="ImageDetails-header">
+        <div>{{ ImageDetailsInfo.order }}</div>
+        <img src="@/assets/archive/close2.png" alt="" style="cursor: pointer;" @click="handleCancel">
+      </div>
+      <div class="ImageDetails-imgbgbox">
+        <div class="ImageDetails-leftbutton" @click="clickleft">
+          <img src="@/assets/archive/leftbutton.png" alt="">
+        </div>
+        <div class="ImageDetails-content-imgbox" v-if="indexActive == 0">
+          <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 == 1">
+          <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>
+        <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;">
+        </div>
+        <div class="ImageDetails-content-imgbox" v-if="indexActive == 4">
+          <div style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
+            <div style="width: 100%;text-align: center;font-weight: 700;
+              font-style: normal;
+              font-size: 20px;
+              color: #FFFFFF;
+              padding-bottom: 10px;">视频1</div>
+            <div style="width: 640px;height: 360px;display: flex;justify-content: center;align-items: center;">
+              <img :src="BACKEND_URL+'/' +  ImageDetailsInfo.foot1_image" alt="" style="width: 100%;height: 100%;object-fit:contain;">
+            </div>
+            
+          </div>
+          <div style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">
+            <div style="width: 100%;text-align: center;font-weight: 700;
+              font-style: normal;
+              font-size: 20px;
+              color: #FFFFFF;
+              padding-bottom: 10px;">视频2</div>
+            <div style="width: 640px;height: 360px;display: flex;justify-content: center;align-items: center;">
+              <img  :src="BACKEND_URL+'/' +  ImageDetailsInfo.foot1_image"  alt="" style="width: 100%;height: 100%;object-fit:contain;">
+            </div>
+            
+          </div>
+        </div>
+
+        <div class="ImageDetails-leftbutton" @click="clickright">
+          <img src="@/assets/archive/rightbutton.png" alt="">
+        </div>
+
+      </div>
+      <div style="display: flex;justify-content: center; margin-top: 35px;">
+        <div :class="indexActive == 0?'ImageDetails-buttonli-active':''" @click="clickIndex(0)"
+          class="ImageDetails-buttonli" style="border-radius: 4px 0 0 4px;">整体</div>
+        <div :class="indexActive == 1?'ImageDetails-buttonli-active':''" @click="clickIndex(1)"
+          class="ImageDetails-buttonli" >背部</div>
+        <div :class="indexActive == 2?'ImageDetails-buttonli-active':''" @click="clickIndex(2)"
+          class="ImageDetails-buttonli">头部</div>
+        <div :class="indexActive == 3?'ImageDetails-buttonli-active':''" @click="clickIndex(3)"
+          class="ImageDetails-buttonli">足底</div>
+        <div :class="indexActive == 4?'ImageDetails-buttonli-active':''"  @click="clickIndex(4)"
+        class="ImageDetails-buttonli"  style="border-radius: 0px 4px 4px 0px;">视频截图</div>
+      </div>
+    </div>
+
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { getBackendUrl } from '@/services/api.js'
+const emit = defineEmits([ 'closeImageDetails' ]);
+const props = defineProps({
+  ImageDetailsList: {
+    required: false,
+    type: Array,
+    default: []
+  },
+  selectIndex: {
+    required: false,
+    type: Number,
+    default: 0
+  }
+})
+const BACKEND_URL = getBackendUrl() // 后端地址
+const indexActive = ref(0) // 图片详情索引
+const ImageDetailsInfo = ref({})  // 图片详情信息
+const pageIndex = ref(0)
+// 生命周期
+onMounted(() => {
+  pageIndex.value = props.selectIndex
+  ImageDetailsInfo.value =  props.ImageDetailsList[props.selectIndex]
+})
+function clickIndex(index) {
+  indexActive.value = index
+}
+function clickleft() {
+  if (pageIndex.value > 0) {
+    pageIndex.value = pageIndex.value-1
+    ImageDetailsInfo.value =  props.ImageDetailsList[pageIndex.value]
+  }
+}
+function clickright() {
+  if (pageIndex.value < props.ImageDetailsList.length-1) {
+    pageIndex.value = pageIndex.value + 1
+    ImageDetailsInfo.value =  props.ImageDetailsList[pageIndex.value]
+  }
+}
+function handleCancel() {
+    emit("closeImageDetails",false)
+}
+onUnmounted(() => {
+})
+</script>
+
+<style scoped>
+.ImageDetails-box{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #191d28;
+  padding: 0px 30px 20px;
+  z-index: 299;
+}
+.ImageDetails-header{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  font-family: 'Noto Sans SC';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
+  text-align: left;
+}
+.ImageDetails-buttonli{
+  width: 120px;
+  height: 50px;
+  background: rgba(55, 65, 81, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Noto Sans SC';
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #FFFFFF;
+  cursor: pointer;
+}
+.ImageDetails-buttonli:hover{
+  color: #14aaff;
+}
+.ImageDetails-buttonli-active{
+  background: #14aaff;
+  color: #FFFFFF !important;
+}
+.ImageDetails-imgbgbox{
+  width: calc(100%);
+  height: calc(100% - 150px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ImageDetails-leftbutton{
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  margin: 0 20px;
+}
+.ImageDetails-content-imgbox{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: calc(100% - 160px);
+}
+</style>

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

@@ -107,8 +107,9 @@
                     font-style: normal;
                     font-size: 14px;
                     color: #14AAFF;
-                line-height: 18px;
+                    line-height: 18px;
-                cursor: pointer;">生成报告</div>
+                    cursor: pointer;"
+                    @click.stop="generateReport(scope.row,scope.$index)">生成报告</div>
                 <div class="patientprofile-file-box" v-if="scope.row.detection_report != null">
                   <img src="@/assets/new/file.png" alt="" @click="fileClick(scope.row)">
                   <img src="@/assets/new/del.png" class="patientprofile-del" alt=""
@@ -173,13 +174,13 @@
                   <div v-for="(item, index) in useImgList" :key="index"
                     class="patientprofile-imgbox">
                     <div class="patientprofile-imgactive">
-                      <img :src="BACKEND_URL+'/' +  item.foot_data_image" alt="" style="width: 100%;height: 100%;">
+                      <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;">
                     </div>
                     <div class="patientprofile-imgtextbox">
                       <el-checkbox  
                         :value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
-                        <div>{{ item.name }}</div>
+                        <div>{{ item.order }}</div>
-                        <span>2025-05-12  12:12:12</span>
+                        <span>{{ item.timestamp }}</span>
                       </el-checkbox>
                     </div>
                   </div>
@@ -218,7 +219,6 @@
                   <div v-for="(item, index) in useVideoList" :key="index"
                     class="patientprofile-imgbox">
                     <div class="patientprofile-imgactive">
-                      {{ BACKEND_URL+'/' +  item.screen_video.replace(/\\/g, '/') }}
                       <video ref="videoPlayerRef" :src="item.screen_video ? BACKEND_URL+'/' +  item.screen_video.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
                         您的浏览器不支持视频播放
                       </video>
@@ -226,8 +226,8 @@
                     <div class="patientprofile-imgtextbox">
                       <el-checkbox  
                         :value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
-                        <div>{{ item.name }}</div>
+                        <div>{{ item.order }}</div>
-                        <span>2025-05-12  12:12:12</span>
+                        <span>{{ item.timestamp }}</span>
                       </el-checkbox>
                     </div>
                   </div>
@@ -275,12 +275,13 @@
                   <el-input type="textarea"  v-model="profileInfo.suggestion_info" :resize="'none'" class="patientprofile-container-dataInfobg-textarea"></el-input>
                 </div>
               </div>
-
             </div>
           </div>
         </div>
       </div>
     </div>
+    <GenerateReport v-if="isGenerateReport" :selectedPatient="selectedPatient"
+      :detectionId="detectionId" @closeGenerateReport="closeGenerateReport"/>
   </div>
 </template>
 
@@ -290,6 +291,8 @@ import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/api.js'
 import { useAuthStore } from '@/stores/index.js'
+import GenerateReport from '@/views/GenerateReport.vue'
+
 const formatDate = (date) => {
   return new Date(date).toLocaleDateString('zh-CN')
 }
@@ -308,6 +311,8 @@ const props = defineProps({
     default: false
   }
 })
+const detectionId = ref('') // 列表检测ID
+const isGenerateReport = ref(false) // 是否生成报告
 const archiveType =ref(false)
 const profileInfo = ref({}) // 患者信息
 const selectedRecord = ref({})
@@ -325,12 +330,15 @@ const tempVideoList = ref([])
 // tempImgList.value = [...imageList.value]
 const useImgList = ref([])// 图片
 const useVideoList = ref([])// 视频
-// useImgList.value =[...tempImgList.value.slice(0, 4)] // 图片
-// useVideoList.value =[...tempImgList.value.slice(0, 4)] // 视频
-
 const selectedData = ref([]) // 列表选中的数据
 
-
+function getNo(order) {
+  if(order<10){
+    return '0'+order 
+  }else{ 
+    return order
+  }
+}
 const calculateAge = (birthDate) => { // 获取年龄
   if (!birthDate) return '—'
   const today = new Date()
@@ -388,7 +396,6 @@ const sessionsById = async (session_id) => {
   try {
     imageList.value = []
     videoList.value = []
-
     tempImgList.value = []
     tempVideoList.value = []
     useImgList.value = []
@@ -398,6 +405,12 @@ const sessionsById = async (session_id) => {
     // 导出报告逻辑
     const response = await historyAPI.sessionsById(session_id)
     if (response.success) {
+      response.data.data.forEach((element,index) => {
+        element.order ='D-'+  (getNo(index + 1))
+      });
+      response.data.videos.forEach((element,index) => {
+        element.order ='D-'+  (getNo(index + 1))
+      });
       imageList.value = response.data.data
       videoList.value = response.data.videos
 
@@ -408,7 +421,7 @@ const sessionsById = async (session_id) => {
       }else{
         useImgList.value =[...tempImgList.value]
       }
-      if(useVideoList.value.length>4){
+      if(tempVideoList.value.length>4){
         useVideoList.value =[...tempVideoList.value.slice(0, 4)]
       }else{
         useVideoList.value =[...tempVideoList.value]
@@ -587,6 +600,15 @@ async function handleDiagnosticInfo(status) { // 保存诊断信息
 function viewPatientProfile() { // 临时方法
    
 }
+
+function generateReport(row,index){ // 打开生成报告页面
+  // profileInfo.value = row
+  detectionId.value = row.id 
+  isGenerateReport.value = true
+}
+function closeGenerateReport(){ // 关闭生成报告页面
+  isGenerateReport.value = false
+}
 </script>
 
 <style scoped>
@@ -884,6 +906,7 @@ function viewPatientProfile() { // 临时方法
   width: 100%;
   height: calc(100% - 50px);
   padding: 20px;
+  padding-top: 0;
   box-sizing: border-box;
 }
 .patientprofile-container-data{

frontend/src/renderer/src/views/SelectData.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="pop-up-mask">
+    <div class="selectdata-box">
+      <div class="selectdata-header">
+        <div>选择数据</div>
+        <img src="@/assets/archive/close2.png" alt="" style="cursor: pointer;" @click="cancel(false)">
+      </div>
+      <div class="selectdata-imgbgbox">
+        <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" >
+          <div v-for="(item, index) in useImgList" :key="index"
+            class="selectdata-imgbox" >
+            <div class="selectdata-imgactive" @click.stop="selectImg(item,index)">
+              <!-- <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;"> -->
+              <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="selectdata-imgtextbox" @click.stop="selectCheckbox(item)">
+              <el-checkbox  
+                :value="item.order" size="large" style="display:flex; align-items: center; justify-content: space-between">
+                <div>{{ item.order }}</div>
+                <span>{{ item.timestamp }}</span>
+              </el-checkbox>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+      <div style="display: flex;justify-content: flex-end; margin-top: 35px;">
+        <div class="selectdata-cancelbutton" @click="cancel(false)">取消</div>
+        <div class="selectdata-confirmbutton" @click="cancel(true)">确定</div>
+      </div>
+    </div>
+    <ImageDetails v-if="isImageDetails" :ImageDetailsList="useImgList" :selectIndex="selectIndex"
+    @closeImageDetails="closeImageDetails"/>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import ImageDetails from '@/views/ImageDetails.vue'
+import { historyAPI,getBackendUrl } from '@/services/api.js'
+
+const emit = defineEmits([ 'closeSelectData' ]);
+const props = defineProps({
+  imageList: {
+    required: false,
+    type: Object,
+    default: null
+  },
+})
+const BACKEND_URL = getBackendUrl()
+const useImgList = ref([])
+const selectInfo = ref({})
+const ImageDetailsList = ref([]) // 图片详情列表
+const isImageDetails = ref(false) // 是否显示图片详情
+const selectIndex = ref(0) // 图片详情选中的索引
+// 生命周期
+onMounted(() => {
+  useImgList.value = props.imageList
+})
+function cancel(is) {
+  if(is == true && selectInfo.value.id !=null){
+    emit("closeSelectData",true,selectInfo.value)
+  }else{
+    emit("closeSelectData",false,{})
+  }
+  
+}
+const checkboxGroup = ref([]) // 图片列表选中的数据
+function selectedChange(val,row){ 
+  console.log(val,row)
+}
+function selectImg(row,index){ 
+  selectIndex.value = index
+  isImageDetails.value =true
+  
+}
+function selectCheckbox(row){
+  setTimeout(() => {
+    checkboxGroup.value = [row.order]
+    selectInfo.value = row
+  }, 50)
+}
+
+
+onUnmounted(() => {
+  
+})
+
+function closeImageDetails(e){
+  isImageDetails.value = false
+}
+</script>
+
+<style scoped>
+.pop-up-mask{
+  position: fixed;
+  z-index: 199;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.4);
+}
+.selectdata-box{
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  border-radius: 10px;
+  width: 1280px;
+  height: 824px;
+  background: #38475f;
+  box-shadow: 0px 0px 16px rgba(17, 24, 33, 1);
+  padding: 0px 30px 20px;
+}
+.selectdata-header{
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  font-family: 'Noto Sans SC';
+  font-weight: 700;
+  font-style: normal;
+  font-size: 20px;
+  color: #FFFFFF;
+  text-align: left;
+}
+.selectdata-box .el-checkbox-group{
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+}
+.selectdata-imgbgbox{
+  width: calc(100%);
+  height: 645px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  overflow: auto;
+}
+
+.selectdata-imgbox{
+  width: 270px; 
+  height: 180px;
+  margin: 15px;
+}
+.selectdata-imgactive{
+  width: 100%;
+  height: calc(100% - 30px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid transparent;
+  border-radius: 4px;
+}
+
+.selectdata-imgactive:hover{
+  border: 2px solid #0b94d5;
+}
+.selectdata-imgtextbox{
+  width: 100%;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+
+.selectdata-cancelbutton{
+  width: 80px;
+  height: 40px;
+  background-color: #597194;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.selectdata-cancelbutton:hover{
+  background-color: #14aaff;
+  color: #fff;
+}
+.selectdata-confirmbutton{
+  width: 80px;
+  height: 40px;
+  background-color: #0b94d5;
+  border-radius: 4px;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.selectdata-confirmbutton:hover{
+  background-color: #14aaff;
+}
+
+</style>