From 2accaa48a6e257a2b74c966d0e18332d4ef3f9ec Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Fri, 9 Jan 2026 18:54:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=AA=E5=9B=BE=E4=BC=A0=E8=B6=B3=E9=83=A8?=
 =?UTF-8?q?=E5=8E=8B=E5=8A=9B=E5=B0=BA=E5=AF=B8=EF=BC=8C=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E7=9B=B8=E5=86=8C=E6=B7=BB=E5=8A=A0=E5=81=87=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/renderer/src/views/Detection.vue | 10 +-
 .../src/renderer/src/views/PhotoAlbum.vue     | 98 +++++++++++++------
 2 files changed, 78 insertions(+), 30 deletions(-)

diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index 8e85ff80..d383574a 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/frontend/src/renderer/src/views/Detection.vue
@@ -189,7 +189,7 @@
                 </div>
               </div>
             </div>
-            <div class="body-footbottom-box" ref="">
+            <div class="body-footbottom-box" ref="pressureRef">
               <div class="body-footbottom-left">
                 <div style="width:100%;height: 50px;"></div>
                 <div class="body-footbottom-leftbottom">
@@ -924,6 +924,7 @@ const contenGridRef =ref(null) // 实时检查整体box
 const wholeBodyRef = ref(null) // 身体姿态ref
 const camera1Ref = ref(null)
 const camera2Ref = ref(null)
+const pressureRef = ref(null)
 const historyDialogVisible = ref(false)
 // 患者信息（从页面获取或通过API获取）
 const patientInfo = ref({
@@ -1993,6 +1994,13 @@ async function saveDetectionData() {
       pressure_image = tempInfo.value.pressure_data.foot_pressure.pressure_image 
       foot_data = tempInfo.value.pressure_data.foot_pressure.pressure_zones
     }
+
+    let pressureBox =  pressureRef.value?.getBoundingClientRect()
+    let titile_height = 24
+    pressure_image =[
+      Math.round(pressureBox.x), Math.round(pressureBox.y)+ titile_height,
+      Math.round(pressureBox.width), Math.round(pressureBox.height)
+    ]
     let foot1_image=""
     if(tempInfo.value.camera1_frame != null 
     && tempInfo.value.camera1_frame.image != null ){
diff --git a/frontend/src/renderer/src/views/PhotoAlbum.vue b/frontend/src/renderer/src/views/PhotoAlbum.vue
index 4ca498fe..7192fbd0 100644
--- a/frontend/src/renderer/src/views/PhotoAlbum.vue
+++ b/frontend/src/renderer/src/views/PhotoAlbum.vue
@@ -1,44 +1,69 @@
 <template>
-  <div class="PhotoAlbum-box">
-    <div class="PhotoAlbum-header">
-      <div>图片相册</div>
-      <img src="@/assets/header/closepage.png" alt="" style="cursor: pointer;width: 13px;height: 14px;" 
-      @click="handleCancel">
-    </div>
-    <div class="PhotoAlbum-imgul">
-      <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" >
-        <div v-for="(item, index) in useImgList" :key="index"
-          class="PhotoAlbum-imgbox">
-          <div class="PhotoAlbum-imgactive" @click="clickImg(item,index)">
-            <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;">
-          </div>
-          <div class="PhotoAlbum-imgtextbox">
-            <el-checkbox  
-              :value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
-              <div>{{ item.id }}</div>
-              <span>{{ getTime(item.timestamp) }}</span>
-            </el-checkbox>
+  <div>
+    <div class="PhotoAlbum-box">
+      <div class="PhotoAlbum-header">
+        <div>图片相册</div>
+        <img src="@/assets/header/closepage.png" alt="" style="cursor: pointer;width: 13px;height: 14px;" 
+        @click="handleCancel">
+      </div>
+      <div class="PhotoAlbum-imgul">
+        <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" style="  display: flex;
+            flex-wrap:wrap ;
+            align-content: flex-start;">
+          <div v-for="(item, index) in useImgList" :key="index"
+            class="PhotoAlbum-imgbox">
+            <div class="PhotoAlbum-imgactive" @click="clickImg(item,index)">
+              <img :src="BACKEND_URL+'/' +  item.screen_image" alt="" style="width: 100%;height: 100%;">
+            </div>
+            <div class="PhotoAlbum-imgtextbox">
+              <el-checkbox  
+                :value="item.id" size="large" style="display:flex; align-items: center; justify-content: space-between">
+                <div>{{ item.id }}</div>
+                <span>{{ getTime(item.timestamp) }}</span>
+              </el-checkbox>
+            </div>
           </div>
+        </el-checkbox-group>
+      </div>
+      <div style="display: flex;justify-content: flex-end;padding-right: 70px;padding-top: 20px;">
+        <div class="delButton">
+          <div>删除</div>
         </div>
-      </el-checkbox-group>
+      </div>
+      
     </div>
-    <ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
+    {{ isImageDetails }}
+  <ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
       @closeImageDetails="closeImageDetails"/>
   </div>
+
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { historyAPI,getBackendUrl } from '@/services/api.js'
-
+import ImageDetails from '@/views/ImageDetails.vue'
 const emit = defineEmits([ 'closePhotoAlbum']);
 const BACKEND_URL = getBackendUrl()
 const checkboxGroup = ref([]) // 图片列表选中的数据
 const useImgList = ref([]) // 图片列表数据
+for(let i=0; i<10; i++){
+  useImgList.value.push({
+    id:i
+  })
+}
 const selectIndex = ref(0) // 图片列表选中的索引
 const isImageDetails = ref(false) // 图片详情弹窗
 const imageList = ref([]) // 图片详情数据
+for(let i=0; i<10; i++){
+  imageList.value.push({
+    id:i
+  })
+}
+function closeImageDetails(){ // 关闭图片对比页面
+  isImageDetails.value = false
+}
 function clickImg(item,index){ // 点击图片
   selectIndex.value = index
   isImageDetails.value =true
@@ -53,9 +78,7 @@ function getTime(time){ // 时间格式转换
 const handleCancel = () => {
   emit('closePhotoAlbum');
 }
-function closeImageDetails(){ // 关闭图片对比页面
-  isImageDetails.value = false
-}
+
 
 </script>
 
@@ -91,17 +114,20 @@ function closeImageDetails(){ // 关闭图片对比页面
 }
 .PhotoAlbum-imgul{
   width: 100%;
-  height: calc(100% - 140px);
+  height: calc(100% - 160px);
   /* background: red; */
-  margin-top: 10px;
+  margin-top: 20px;
+  padding:0px 57px;
   display: flex;
   flex-wrap:wrap ;
   align-content: flex-start;
+  overflow: auto;
 }
 
 .PhotoAlbum-imgbox{
-  width: 23%;
-  height: 100%;
+  width: 274px;
+  height: 185px;
+  margin-bottom: 5px;
 }
 .PhotoAlbum-imgactive{
   width: 100%;
@@ -120,4 +146,18 @@ function closeImageDetails(){ // 关闭图片对比页面
   justify-content: space-between;
   align-items: center;
 }
+.delButton{
+  width: 80px;
+  height: 40px;
+  background-color: rgba(89, 113, 148, 1);
+  font-family: 'Noto Sans SC', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.6);
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
\ No newline at end of file