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 19:58:23 +08:00
parent 513e9867a6
commit 93e45aec19
3 changed files with 275 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/renderer/src/services/api.js
View File

@ -673,6 +673,11 @@ export const historyAPI = {
return api.get(`/api/detection/data/detail/${id}`)
},
//根据主键ID查询检测数据详情
getDetectionData(session_id) {
return api.get(`/api/detection/${session_id}/get_data`)
},
}

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

@ -803,7 +803,7 @@
</div>
<div class="pop-up-mask" v-if="isPhotoAlbum">
<PhotoAlbum @closePhotoAlbum="closePhotoAlbum"
:selectedPatient="selectedPatient" v-if="isPhotoAlbum"/>
:selectedPatient="patientInfo" v-if="isPhotoAlbum"/>
</div>
<PatientProfile v-if="historyDialogVisible"

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

@ -1,15 +1,16 @@
<template>
<div>
<div class="PhotoAlbum-bg">
<div class="PhotoAlbum-box">
<div class="PhotoAlbum-header">
<div>图片相册</div>
<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;">
align-content: flex-start;
justify-content: start;">
<div v-for="(item, index) in useImgList" :key="index"
class="PhotoAlbum-imgbox">
<div class="PhotoAlbum-imgactive" @click="clickImg(item,index)">
@ -25,16 +26,29 @@
</div>
</el-checkbox-group>
</div>
<div style="display: flex;justify-content: flex-end;padding-right: 70px;padding-top: 20px;">
<div class="delButton">
<div style="display: flex;justify-content: flex-end;padding-right: 58px;padding-top: 20px;">
<div
:class="checkboxGroup.length == 0? 'delButton':'delButton-selectedbutotn'" @click="delImgClick">
<div>删除</div>
</div>
</div>
</div>
{{ isImageDetails }}
<ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
<ImageDetails v-if="isImageDetails" :ImageDetailsList="imageList" :selectIndex="selectIndex"
@closeImageDetails="closeImageDetails"/>
<div class="pop-up-mask" v-if="isTip">
<div class="pop-up-tip-container">
<div class="pop-up-tip-header">
<div>提示</div>
<img src="@/assets/header/closepage.png" alt="" style="cursor: pointer;" @click="tipCancel">
</div>
<div class="pop-up-tip-text">确定删除勾选的检测数据吗？</div>
<div class="tipconfirmbutton-box">
<div class="pop-up-tip-cancelbutton" @click="tipCancel">取消</div>
<el-button type="primary" class="tipconfirmbutton" @click="tipConfirm">确定</el-button>
</div>
</div>
</div>
</div>
</template>
@ -45,22 +59,20 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { historyAPI,getBackendUrl } from '@/services/api.js'
import ImageDetails from '@/views/ImageDetails.vue'
const emit = defineEmits([ 'closePhotoAlbum']);
const props = defineProps({
selectedPatient: {
required: false,
type: Object,
default: null
},
})
const BACKEND_URL = getBackendUrl()
const isTip =ref(false)
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
}
@ -78,8 +90,92 @@ function getTime(time){ // 时间格式转换
const handleCancel = () => {
emit('closePhotoAlbum');
}
const delType =ref('video')
function delImgClick(e){ // 临时方法
if(checkboxGroup.value.length < 1){
return
}
delType.value = e
isTip.value = true
}
function tipCancel(){
isTip.value = false
}
async function tipConfirm(){
let imgIds = []
let videoIds = []
checkboxGroup.value.forEach(element => {
useImgList.value.forEach(elements => {
if(element == elements.id){
if(elements.type == 'data'){
imgIds.push(elements.id)
}
if(elements.type == 'videos'){
videoIds.push(elements.id)
}
}
});
});
if(imgIds.length>0){
await detectionDelById(imgIds.join(','))
}
if(videoIds.length>0){
await VideoDelById(videoIds.join(','))
}
isTip.value = false
}
const detectionDelById = async (ids)=>{
try {
const res = await historyAPI.detectionDelById(ids)
if (res && res.success) {
getDetectionData()
}
} catch {}
}
const VideoDelById = async (ids)=>{
try {
const res = await historyAPI.VideoDelById(ids)
if (res && res.success) {
getDetectionData()
ElMessage.success('删除成功！')
}
} catch {}
}
function getDetectionData(){
useImgList.value = []
historyAPI.getDetectionData(props.selectedPatient.sessionId).then((response)=>{
if(response.success){
if(response.data !=null){
response.data.forEach(element => {
useImgList.value.push({
...element
})
});
imageList.value = response.data
}
if(response.videos !=null){
response.videos.forEach(element => {
useImgList.value.push({
...element
})
});
}
}
}).catch(()=>{
})
}
onMounted(() => {
getDetectionData()
})
</script>
<style>
@ -117,7 +213,7 @@ const handleCancel = () => {
height: calc(100% - 160px);
/* background: red; */
margin-top: 20px;
padding:0px 57px;
padding:0px 52px;
display: flex;
flex-wrap:wrap ;
align-content: flex-start;
@ -127,7 +223,10 @@ const handleCancel = () => {
.PhotoAlbum-imgbox{
width: 274px;
height: 185px;
margin:0px 5px ;
margin-bottom: 5px;
cursor: pointer;
}
.PhotoAlbum-imgactive{
width: 100%;
@ -138,7 +237,9 @@ const handleCancel = () => {
border: 2px solid transparent;
border-radius: 4px;
}
.PhotoAlbum-imgactive:hover{
border: 2px solid #0b94d5;
}
.PhotoAlbum-imgtextbox{
width: 100%;
height: 30px;
@ -146,10 +247,10 @@ const handleCancel = () => {
justify-content: space-between;
align-items: center;
}
.delButton{
.PhotoAlbum-bg .delButton{
width: 80px;
height: 40px;
background-color: rgba(89, 113, 148, 1);
background-color: rgba(55, 65, 81, 1) ;
font-family: 'Noto Sans SC', sans-serif;
font-weight: 400;
font-style: normal;
@ -159,5 +260,152 @@ const handleCancel = () => {
display: flex;
justify-content: center;
align-items: center;
cursor: not-allowed;
}
.PhotoAlbum-bg .delButton-selectedbutotn{
background-color: #0b94d5 ;
color: rgba(255, 255, 255,1) ;
border: 0 ;
cursor: pointer;
width: 80px;
height: 40px;
font-family: 'Noto Sans SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
}
.PhotoAlbum-bg .delButton-selectedbutotn:hover{
background-color: #14aaff;
}
.PhotoAlbum-bg .pop-up-mask{
position: fixed;
z-index: 199;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
}
.PhotoAlbum-bg .pop-up-tip-container {
width: 400px;
height:220px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
border-radius: 10px;
background: linear-gradient(135deg, rgba(53, 67, 90, 1) 0%, rgba(53, 67, 90, 1) 0%, rgba(62, 79, 105, 1) 99%, rgba(62, 79, 105, 1) 100%);
}
.PhotoAlbum-bg .pop-up-camera-container{
width: 608px;
height:495px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: linear-gradient(135deg, rgb(53, 67, 90) 0%, rgb(53, 67, 90) 0%, rgb(62, 79, 105) 99%, rgb(62, 79, 105) 100%);
border-radius: 10px;
box-shadow: rgb(17, 24, 33) 0px 0px 10px;
}
.PhotoAlbum-bg .pop-up-camera-header{
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 40px;
font-family: 'Noto Sans SC';
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #FFFFFF;
text-align: left;
border-radius:10px 10px 0 0;
}
.PhotoAlbum-bg .pop-up-tip-header{
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 30px;
font-family: 'Noto Sans SC';
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #FFFFFF;
text-align: left;
}
.PhotoAlbum-bg .tipconfirmbutton-box{
width:100%;
display:flex;
align-items: center;
justify-content: flex-end;
padding: 0 30px;
padding-top: 10px;
}
.PhotoAlbum-bg .tipconfirmbutton{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: rgb(255, 255, 255);
background:#0b94d5;
border:1px solid #0b94d5;
width: 80px;
height: 40px;
}
.PhotoAlbum-bg .tipconfirmbutton:hover{
background:#14aaff;
border:1px solid #14aaff;
}
.PhotoAlbum-bg .pop-up-tip-text{
width:100%;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #FFFFFF;
text-align: left;
height: 80px;
box-sizing: border-box;
padding-left: 30px;
padding-right: 30px;
padding-top:20px ;
/* padding:20px 10px 30px; */
}
.PhotoAlbum-bg .pop-up-tip-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;
}
.PhotoAlbum-bg .pop-up-tip-cancelbutton:hover{
background-color: #14aaff;
color: #fff;
}
</style>