截图传足部压力尺寸，图片相册添加假数据和样式

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

frontend/src/renderer/src/views/PhotoAlbum.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div class="PhotoAlbum-box">
       <div class="PhotoAlbum-header">
         <div>图片相册</div>
@@ -6,7 +7,9 @@
         @click="handleCancel">
       </div>
       <div class="PhotoAlbum-imgul">
-      <el-checkbox-group v-model="checkboxGroup" size="large" @change="selectedChange" >
+        <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)">
@@ -22,23 +25,45 @@
           </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>
+      </div>
+      
+    </div>
+    {{ 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%;
+  width: 274px;
-  height: 100%;
+  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>