ThbTech/BodyBalanceEvaluation
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
limengnan 2026-01-09 18:54:59 +08:00
parent a08f666306
commit 2accaa48a6
2 changed files with 78 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/renderer/src/views/Detection.vue
View File

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

98
frontend/src/renderer/src/views/PhotoAlbum.vue
View File

@ -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>