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

提交双报告对比模块

Browse Source
This commit is contained in:
limengnan 2025-12-11 16:18:59 +08:00
parent 5ec2adc833
commit 61b720fff4
10 changed files with 1129 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/Log/OrbbecSDK.log.txt
View File

Binary file not shown.

2
backend/main.py
View File

@ -1525,7 +1525,7 @@ class AppServer:
return jsonify({'success': False, 'error': f'删除文件失败: {str(e)}'}), 500
# 更新数据库
self.db_manager.update_session_report_path(session_id, None)
self.db_manager.update_session_report_path(session_id, None, None)
return jsonify({'success': True, 'message': '报告已删除'})

BIN
frontend/src/renderer/src/assets/archive/close.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 387 B

BIN
frontend/src/renderer/src/assets/archive/close2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 324 B

BIN
frontend/src/renderer/src/assets/archive/download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 348 B

25
frontend/src/renderer/src/views/PatientProfile.vue
View File

@ -305,7 +305,7 @@
</div>
<ViewPDF v-if="isViewPDF" :pdfUrl="pdfUrl" @closeViewPDF="closeViewPDF"/>
<ReportComparison v-if="isReportComparison" :selectedData="selectedData"
:selectedPatient="selectedPatient" />
:selectedPatient="selectedPatient" @closeReportComparison="isReportComparison = false"/>
</div>
</template>
@ -421,6 +421,8 @@ const handleSubmit = (item) => {
const sessionsId = ref('')
function selectRecord(data){
selectedRecord.value = data
checkboxVideo.value = []
checkboxGroup.value = []
sessionsById(data.id)
sessionsId.value = data.id
profileInfo.value = {
@ -696,6 +698,27 @@ function viewPatientProfile() { //对比报告
if (selectedData.value.length !== 2) {
return
}
if (selectedData.value[0].data_ids == null) {
ElMessage.error({
message: '对比报告不能为空',
duration: 5000
})
return
}
if (selectedData.value[1].data_ids == null) {
ElMessage.error({
message: '对比报告不能为空',
duration: 5000
})
return
}
if (selectedData.value[0].data_ids.split(',').length !== selectedData.value[1].data_ids.split(',').length) {
ElMessage.error({
message: '请选择相同类型报告对比',
duration: 5000
})
}
isReportComparison.value = true
}

1
frontend/src/renderer/src/views/PopUpOnlyReport.vue
View File

@ -232,6 +232,7 @@ const generatePDF = async () => {
// 使用检测ID作为文件名
const filename = `${props.detectionInfo.id || 'report'}.pdf`
form.append('file', blob, filename)
form.append('data_ids', rawData.value.id)
// 如果有detectionInfo.id，则上传到后端
if (props.detectionInfo.id) {

42
frontend/src/renderer/src/views/PopUpReport.vue
View File

@ -54,21 +54,20 @@
<!-- 选中后显示内容 -->
<div v-if="rawData.id && rawData.id!=''">
<div class="PopUpReport-content-title">整体数据</div>
<div style="width: 600px;height: 387px;">
<img :src="BACKEND_URL+'/' + rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
<div class="PopUpReport-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%;
<div style="width: 600px;height: 327px;">
<img :src="BACKEND_URL+'/' + rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="PopUpReport-content-title">身体姿态</div>
<img :src="BACKEND_URL+'/' + rawData.body_image" alt="" srcset=""
style="width: 300px;height: 600px;margin-left: 100px;">
<div class="PopUpReport-content-title">头部姿态</div>
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width:500px;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 style="width: 570px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
</span>
@ -80,7 +79,7 @@
{{headPoseMaxValuesLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 570px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationRightMax}}°
</span></div>
@ -96,7 +95,7 @@
</div>
</div>
<div class="PopUpReport-content-title">足底压力</div>
<div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
<div style="width: 600px;height: 370px; display: flex;">
<img :src="BACKEND_URL+'/' + rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
@ -120,21 +119,19 @@
<!-- 选中后显示内容 -->
<div v-if="calibrationData.id && calibrationData.id!=''">
<div class="PopUpReport-content-title">整体数据</div>
<div style="width: 600px;height: 387px;">
<div style="width: 600px;height: 327px;">
<img :src="BACKEND_URL+'/' + calibrationData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
<div class="PopUpReport-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>
<img :src="BACKEND_URL+'/' + calibrationData.body_image" alt="" srcset=""
style="width: 300px;height: 600px;margin-left: 100px; ">
<div class="PopUpReport-content-title">头部姿态</div>
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 500px;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 style="width: 570px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationLeftMax}}°
</span>
@ -146,7 +143,7 @@
{{headPoseMaxValuesRight.pitchDownMax}}°
</span></div>
</div>
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 570px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationRightMax}}°
</span></div>
@ -162,7 +159,7 @@
</div>
</div>
<div class="PopUpReport-content-title">足底压力</div>
<div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
<div style="width: 600px;height: 370px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
@ -190,9 +187,6 @@
<div>检测医生：{{ detectionInfo.creator_name }}</div>
</div>
</div>
</div>
</div>
</template>
@ -301,6 +295,7 @@ const generatePDF = async () => {
// 使用检测ID作为文件名
const filename = `${props.detectionInfo.id || 'report'}.pdf`
form.append('file', blob, filename)
form.append('data_ids', rawData.value.id + ',' + calibrationData.value.id)
// 如果有detectionInfo.id，则上传到后端
if (props.detectionInfo.id) {
@ -684,7 +679,7 @@ function getFormattedTime() {
}
}
.PopUpOnlyReport-footer{
.PopUpReport-footer{
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #333;
@ -694,4 +689,5 @@ function getFormattedTime() {
color: rgb(40, 40, 40);
font-size: 18px;
}
</style>

731
frontend/src/renderer/src/views/ReportComparison - 副本.vue Normal file
View File

@ -0,0 +1,731 @@
<template>
<div class="ReportComparison-container" id="popup-report-root">
<img src="@/assets/header/closepage.png"
alt="" style="cursor: pointer;position: fixed; right: 20px; top: 20px;z-index: ;"
@click="handleCancel">
<div class="ReportComparison-container-body" id="pdf-content">
<div style="height: 100%; padding:0 90px; box-sizing: border-box;">
<div class="ReportComparison-container-bodytitle">体态测量报告单</div>
<div class="ReportComparison-container-display">
<!-- <div class="ReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
<div class="ReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div> -->
</div>
<div class="ReportComparison-container-userinfodisplay">
<div class="ReportComparison-container-userinfotext2">
ID：{{ selectedPatient.id }}
</div>
<div class="ReportComparison-container-userinfotext2 width-210">
姓名：{{ selectedPatient.name }}
</div>
<div class="ReportComparison-container-userinfotext2 width-195">
性别：{{ selectedPatient.gender }}
</div>
<div class="ReportComparison-container-userinfotext2 width-195">
年龄：{{ calculateAge(selectedPatient.birth_date) }}岁
</div>
<div class="ReportComparison-container-userinfotext2 width-235">
身高：{{ selectedPatient.height }}cm
</div>
<div class="ReportComparison-container-userinfotext2 width-215">
体重：{{ selectedPatient.weight }}kg
</div>
<div class="ReportComparison-container-userinfotext2 width-95">
鞋码：{{ selectedPatient.shoe_size }}码
</div>
<div class="ReportComparison-container-userinfotext2">
电话：{{ selectedPatient.phone }}
</div>
<div class="ReportComparison-container-userinfotext2 width-405">
邮箱：{{ selectedPatient.email }}
</div>
<div class="ReportComparison-container-userinfotext2 width-430">
居住地：{{ selectedPatient.residence }}
</div>
<div class="ReportComparison-container-userinfotext2 width-310">
职业：{{ selectedPatient.occupation }}
</div>
</div>
<div class="ReportComparison-container-testdatatitle">【检测数据】</div>
<div class="ReportComparison-containerdisplay">
<div class="ReportComparison-container-leftbox">
<div class="displayflex">
<div class="displayflextext1">原始数据：</div>
<div class="displayflextext1">
{{ rawOneData.id }}
</div>
</div>
<!-- 选中后显示内容 -->
<div v-if="rawOneData.id && rawOneData.id!=''">
<div class="ReportComparison-content-title">整体数据</div>
<div style="width: 600px;height: 387px;">
<img :src="BACKEND_URL+'/' + rawOneData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
<div class="ReportComparison-content-title">身体姿态</div>
<div style="width: 100%;height: 454px; display: flex;justify-content: center;">
<img :src="BACKEND_URL+'/' + rawOneData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-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="ReportComparison-content-title">足底压力</div>
<div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
<img :src="BACKEND_URL+'/' + rawOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">视频1图片</div>
<div style="width: 600px;height: 338px; display: flex;">
<img :src="BACKEND_URL+'/' + rawOneData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
<div class="ReportComparison-content-title">视频2图片</div>
<div style="width: 600px;height: 338px; display: flex;">
<img :src="BACKEND_URL+'/' + rawOneData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
</div>
</div>
<div class="ReportComparison-container-rightbox">
<div class="displayflex">
<div class="displayflextext1">矫正数据：</div>
<div class="displayflextext1">
{{ calibrationOneData.id }}
</div>
</div>
<!-- 选中后显示内容 -->
<div v-if="calibrationOneData.id && calibrationOneData.id!=''">
<div class="ReportComparison-content-title">整体数据</div>
<div style="width: 600px;height: 387px;">
<img :src="BACKEND_URL+'/' + calibrationOneData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
<div class="ReportComparison-content-title">身体姿态</div>
<div style="width: 100%;height: 454px; display: flex;justify-content: center;">
<img :src="BACKEND_URL+'/' + calibrationOneData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-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="ReportComparison-content-title">足底压力</div>
<div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
<img :src="BACKEND_URL+'/' + calibrationOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">视频1图片</div>
<div style="width: 600px;height: 338px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationOneData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
<div class="ReportComparison-content-title">视频2图片</div>
<div style="width: 600px;height: 338px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationOneData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%;">
</div>
</div>
</div>
</div>
<div class="ReportComparison-container-testdatatitle">【诊断结果】</div>
<div class="ReportComparison-title2">记录</div>
<div class="ReportComparison-border1">{{ leftInfo.diagnosis_info }}</div>
<div class="ReportComparison-title2">处理</div>
<div class="ReportComparison-border2">{{ leftInfo.treatment_info }}</div>
<div class="ReportComparison-title2">备注</div>
<div class="ReportComparison-border3">{{ leftInfo.suggestion_info }}</div>
<div class="ReportComparison-footer">
<div style="margin-right: 80px;">检测时间：{{ leftInfo.created_at }}</div>
<div style="margin-right: 80px;">报告时间：{{ getFormattedTime() }}</div>
<div>检测医生：{{ leftInfo.creator_name }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { historyAPI,getBackendUrl } from '@/services/api.js'
import { ElMessage } from 'element-plus'
const emit = defineEmits([ 'closeReportComparison' ]);
const props = defineProps({
selectedPatient: {
required: false,
type: Object,
default: null
},
selectedData: {
required: false,
type: Array,
default: []
},
selectIds: {
required: false,
type: Array,
default: []
}
})
const BACKEND_URL = getBackendUrl()
const rawOneData = ref({}) // 原始数据
const rawTwoData = ref({}) // 原始数据
const calibrationOneData = ref({}) // 校准数据
const calibrationTwoData = ref({}) // 校准数据
const imageList = 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 })
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
}
// 生命周期
onMounted(() => {
sessionsByIdLeft(props.selectedData[0].id)
sessionsByIdRight(props.selectedData[1].id)
// imageList.value = props.detectionInfo.data
// for (let i = 0; i < imageList.value.length; i++) {
// if(imageList.value[i].id == props.selectIds[0]){
// rawOneDatavalue = imageList.value[i]
// if(imageList.value[i].head_pose !=null){
// headPoseMaxValuesLeft.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
// }
// }
// if(imageList.value[i].id == props.selectIds[1]){
// calibrationOneData.value = imageList.value[i]
// if(imageList.value[i].head_pose !=null){
// headPoseMaxValuesRight.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
// }
// }
// }
// setTimeout(() => {
// generatePDF()
// }, 500);
})
const leftInfo = ref({})
const rightInfo = ref({})
const sessionsByIdLeft = async (session_id) => {
try {
// 导出报告逻辑
const response = await historyAPI.sessionsById(session_id)
if (response.success) {
// 回填会话诊断信息到左侧表单
leftInfo.value = response.data
response.data.data.forEach(element => {
if(element.id == props.selectedData[0].data_ids.split(",")[0]){
rawOneData.value = element
}
});
response.data.data.forEach(element => {
if(element.id == props.selectedData[0].data_ids.split(",")[1]){
calibrationOneData.value = element
}
});
}
} catch (error) {
ElMessage.error('获取失败')
}
}
const sessionsByIdRight = async (session_id) => {
try {
// 导出报告逻辑
const response = await historyAPI.sessionsById(session_id)
if (response.success) {
// 回填会话诊断信息到左侧表单
rightInfo.value = response.data
response.data.data.forEach(element => {
if(element.id == props.selectedData[1].data_ids.split(",")[0]){
rawTwoData.value = element
}
});
response.data.data.forEach(element => {
if(element.id == props.selectedData[1].data_ids.split(",")[1]){
calibrationTwoData.value = element
}
});
}
} catch (error) {
ElMessage.error('获取失败')
}
}
onUnmounted(() => {
})
const generatePDF = async () => {
try {
const root = document.getElementById('popup-report-root')
if (!root) {
ElMessage.error('报告容器未找到')
return
}
if (!window.electronAPI) {
console.error('electronAPI 未定义')
return
}
const pdfBuffer = await window.electronAPI.generateReportPdf({
selector: '#popup-report-root',
pageSize: 'A4',
landscape: true, // 横向
printBackground: true
})
const blob = new Blob([pdfBuffer], { type: 'application/pdf' })
// 仅供预览或下载
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
// emit('closePopUpReport', true)
} catch (e) {
console.error('报告生成异常:', e)
ElMessage.error(`报告生成失败：${e.message}`)
}
};
function getFormattedTime() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始需+1
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0'); // 24小时制
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function handleCancel(){
emit('closeReportComparison',false)
}
</script>
<style scoped>
.ReportComparison-container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #000;
z-index: 50;
overflow: auto;
}
.ReportComparison-container-body{
margin:20px auto 0;
width: 1600px;
background: #fff;
border-radius: 5px;
padding: 20px 0 30px;
}
.ReportComparison-container-display{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 25px;
border-bottom: 1px solid #333;
}
.ReportComparison-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;
}
.ReportComparison-container-userinfotext{
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 700;
font-style: normal;
color: #282828;
font-size: 18px;
}
.ReportComparison-container-userinfodisplay{
display: flex;
flex-wrap: wrap;
align-content:flex-start ;
padding: 20px 0;
padding-top: 30px;
border-bottom: 1px solid #333;
}
.ReportComparison-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; }
.ReportComparison-container-testdatatitle{
font-weight: 700;
font-style: normal;
color: #14AAFF;
font-size: 18px;
text-align: left;
padding: 20px 0;
}
.ReportComparison-containerdisplay{
display: flex;
}
.ReportComparison-container-leftbox{
width: 50%;
border-right:1px solid rgb(208, 208, 208) ;
box-sizing: border-box;
}
.ReportComparison-container-rightbox{
width: 50%;
box-sizing: border-box;
padding-left: 80px;
}
.displayflex{
display: flex;
align-items: center;
}
.ReportComparison-container .displayflextext1{
font-weight: 700;
font-style: normal;
color: #14AAFF;
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;
}
.ReportComparison-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;
}
.ReportComparison-title2{
font-weight: 700;
font-style: normal;
font-size: 18px;
color: #282828;
padding-top: 20px;
padding-bottom: 20px;
}
.ReportComparison-border1{
padding: 5px;
width: 100%;
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-radius: 4px;
font-weight: 400;
font-style: normal;
font-size: 18px;
text-decoration: none;
color: #383838;
}
.ReportComparison-border2{
width: 100%;
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-radius: 4px;
font-style: normal;
font-size: 18px;
text-decoration: none;
color: #383838;
padding: 5px;
}
.ReportComparison-border3{
width: 100%;
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-radius: 4px;
font-style: normal;
font-size: 18px;
text-decoration: none;
color: #383838;
padding: 5px;
}
</style>
<style>
@media print {
@page {
size: A4 landscape;
margin: 10mm;
}
html, body {
height: auto !important;
overflow: visible !important;
background: white !important;
}
/* 隐藏所有元素，但保留占位，避免 display:none 导致的父级隐藏问题 */
body * {
visibility: hidden;
}
/* 显式显示目标容器及其子元素 */
#popup-report-root,
#popup-report-root *,
#electron-print-container,
#electron-print-container * {
visibility: visible !important;
}
/* 确保根节点可见并重置布局 */
#popup-report-root {
position: static !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background-color: white !important;
z-index: 9999 !important;
overflow: visible !important;
}
/* 容器样式重置 */
.ReportComparison-container-body {
width: 100% !important;
margin: 0 !important;
box-shadow: none !important;
padding: 10px !important;
border: none !important;
height: auto !important;
overflow: visible !important;
display: block !important;
min-height: 100vh !important;
}
/* 移除内层div的固定高度 */
.ReportComparison-container-body > div {
height: auto !important;
padding: 0 !important;
}
/* 针对克隆节点的特定样式 */
#electron-print-container .ReportComparison-container {
position: static !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
background-color: white !important;
}
/* 左右分栏调整 */
.ReportComparison-container-leftbox,
.ReportComparison-container-rightbox {
width: 49% !important;
display: inline-block !important;
vertical-align: top !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 10px !important;
border: none !important;
/* 允许分栏内部内容自然分页 */
break-inside: auto !important;
}
.ReportComparison-container-leftbox {
border-right: 1px solid #ccc !important;
}
/* 图片容器自适应 */
.ReportComparison-container-body div[style*="width: 600px"] {
width: 100% !important;
height: auto !important;
margin-bottom: 10px !important;
break-inside: avoid !important;
}
/* 图片自适应 */
img {
max-width: 100% !important;
height: auto !important;
object-fit: contain !important;
max-height: 300px !important; /* 限制最大高度，防止一页占满 */
}
/* 头部信息紧凑化 */
.ReportComparison-container-bodytitle {
font-size: 24px !important;
padding-bottom: 10px !important;
}
.ReportComparison-container-display,
.ReportComparison-container-userinfodisplay {
padding: 10px 0 !important;
}
.ReportComparison-container-userinfotext2 {
font-size: 14px !important;
width: auto !important;
margin-right: 20px !important;
padding-bottom: 5px !important;
}
/* 标题字号调整 */
.ReportComparison-content-title,
.ReportComparison-container-testdatatitle,
.ReportComparison-title2 {
font-size: 16px !important;
padding-top: 10px !important;
padding-bottom: 5px !important;
}
/* 分页控制 */
.ReportComparison-content-title {
break-after: avoid;
}
img {
break-inside: avoid;
}
/* 隐藏不需要的UI元素 */
.displayflexselect-icon,
::-webkit-scrollbar {
display: none !important;
}
}
.PopUpOnlyReport-footer{
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #333;
display: flex;
font-weight: 700;
font-style: normal;
color: rgb(40, 40, 40);
font-size: 18px;
}
</style>

488
frontend/src/renderer/src/views/ReportComparison.vue
View File

@ -1,11 +1,17 @@
<template>
<div class="ReportComparison-container" id="popup-report-root">
<img src="@/assets/header/closepage.png"
alt="" style="cursor: pointer;position: fixed; right: 20px; top: 20px;z-index: 99;"
@click="handleCancel">
<img src="@/assets/archive/download.png"
style="cursor: pointer;position: fixed; right: 60px; top: 17px;z-index: 99;height: 28px;"
@click="generatePDF">
<div class="ReportComparison-container-body" id="pdf-content">
<div style="height: 100%; padding:0 90px; box-sizing: border-box;">
<div class="ReportComparison-container-bodytitle">体态测量报告单</div>
<div class="ReportComparison-container-display">
<div class="ReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
<div class="ReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div>
<!-- <div class="ReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
<div class="ReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div> -->
</div>
<div class="ReportComparison-container-userinfodisplay">
<div class="ReportComparison-container-userinfotext2">
@ -43,166 +49,316 @@
</div>
</div>
<div class="ReportComparison-container-testdatatitle">【检测数据】</div>
<div class="ReportComparison-containerdisplay">
<div class="ReportComparison-container-leftbox">
<div class="displayflex">
<div class="displayflextext1">原始数据：</div>
<div class="displayflextext1">
{{ rawData.id }}
<div style="display: flex;">
<div class="ReportComparison-containerdisplay">
<div style="display: flex;">
<div class="ReportComparison-container-leftbox">
<div class="displayflex">
<div class="displayflextext1">原始数据：</div>
<div class="displayflextext1">
{{ rawOneData.id }}
</div>
</div>
<!-- 选中后显示内容 -->
<div class="ReportComparison-content-title">整体数据</div>
<div style="width: 90%;height: 100px;">
<img :src="BACKEND_URL+'/' + rawOneData.screen_image" alt="" srcset=""
style="width: 100%;height: 100%; object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">身体姿态</div>
<div style="width: 90%;height:300px; display: flex;justify-content: center;">
<img :src="BACKEND_URL+'/' + rawOneData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">头部姿态</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:100%;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: 100%;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="ReportComparison-content-title">足底压力</div>
<div style="width: 90%;height:200px;display: flex;">
<img :src="BACKEND_URL+'/' + rawOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">视频1图片</div>
<div style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + rawOneData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
<div class="ReportComparison-content-title">视频2图片</div>
<div style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + rawOneData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
</div>
<div class="ReportComparison-container-rightbox">
<div class="displayflex">
<div class="displayflextext1">矫正数据：</div>
<div class="displayflextext1">
{{ calibrationOneData.id }}
</div>
</div>
<!-- 选中后显示内容 -->
<div class="ReportComparison-content-title">整体数据</div>
<div style="width: 90%;height: 100px;">
<img :src="BACKEND_URL+'/' + calibrationOneData.screen_image" alt=""
srcset="" style="width: 100%;height: 100%;object-fit:contain;">
</div>
<div class="ReportComparison-content-title">身体姿态</div>
<div style="width: 90%;height:300px; display: flex;justify-content: center;">
<img :src="BACKEND_URL+'/' + calibrationOneData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">头部姿态</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:100%;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: 100%;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="ReportComparison-content-title">足底压力</div>
<div style="width: 90%;height:200px;display: flex;">
<img :src="BACKEND_URL+'/' + calibrationOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">视频1图片</div>
<div style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationOneData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
<div class="ReportComparison-content-title">视频2图片</div>
<div style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationOneData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
</div>
</div>
<!-- 选中后显示内容 -->
<div v-if="rawData.id && rawData.id!=''">
<div class="ReportComparison-container-testdatatitle">【诊断结果】</div>
<div class="ReportComparison-title2">记录</div>
<div class="ReportComparison-border1">{{ leftInfo.diagnosis_info }}</div>
<div class="ReportComparison-title2">处理</div>
<div class="ReportComparison-border2">{{ leftInfo.treatment_info }}</div>
<div class="ReportComparison-title2">备注</div>
<div class="ReportComparison-border3">{{ leftInfo.suggestion_info }}</div>
</div>
<div class="ReportComparison-containerdisplay">
<div style="display: flex;">
<div class="ReportComparison-container-leftbox">
<div class="displayflex">
<div class="displayflextext1">原始数据：</div>
<div class="displayflextext1">
{{ rawTwoData.id }}
</div>
</div>
<!-- 选中后显示内容 -->
<div class="ReportComparison-content-title">整体数据</div>
<div style="width: 600px;height: 387px;">
<img :src="BACKEND_URL+'/' + rawData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
<div style="width: 90%;height: 100px;">
<img :src="BACKEND_URL+'/' + rawTwoData.screen_image" alt=""
srcset="" style="width: 100%;height: 100%;object-fit:contain;">
</div>
<div class="ReportComparison-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%;
<div style="width: 90%;height:300px; display: flex;justify-content: center;">
<img :src="BACKEND_URL+'/' + rawTwoData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-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 style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
{{headPoseMaxValuesTwoLeft.rotationLeftMax}}°
</span>
</div>
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.tiltLeftMax}}°
{{headPoseMaxValuesTwoLeft.tiltLeftMax}}°
</span></div>
<div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.pitchDownMax}}°
{{headPoseMaxValuesTwoLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationRightMax}}°
{{headPoseMaxValuesTwoLeft.rotationRightMax}}°
</span></div>
<div class="rollyawpitchtext">右：
<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.tiltRightMax}}°
{{headPoseMaxValuesTwoLeft.tiltRightMax}}°
</span>
</div>
<div class="rollyawpitchtext">仰：
<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.pitchUpMax}}°
{{headPoseMaxValuesTwoLeft.pitchUpMax}}°
</span>
</div>
</div>
<div class="ReportComparison-content-title">足底压力</div>
<div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
<img :src="BACKEND_URL+'/' + rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
<div style="width: 90%;height:200px;display: flex;">
<img :src="BACKEND_URL+'/' + rawTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-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 style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + rawTwoData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
<div class="ReportComparison-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 style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + rawTwoData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
</div>
</div>
<div class="ReportComparison-container-rightbox">
<div class="displayflex">
<div class="displayflextext1">矫正数据：</div>
<div class="displayflextext1">
{{ calibrationData.id }}
<div class="ReportComparison-container-rightbox">
<div class="displayflex">
<div class="displayflextext1">矫正数据：</div>
<div class="displayflextext1">
{{ calibrationTwoData.id }}
</div>
</div>
</div>
<!-- 选中后显示内容 -->
<div v-if="calibrationData.id && calibrationData.id!=''">
<!-- 选中后显示内容 -->
<div class="ReportComparison-content-title">整体数据</div>
<div style="width: 600px;height: 387px;">
<img :src="BACKEND_URL+'/' + calibrationData.screen_image" alt="" srcset="" style="width: 100%;height: 100%;">
<div style="width: 90%;height: 100px;">
<img :src="BACKEND_URL+'/' + calibrationTwoData.screen_image" alt=""
srcset="" style="width: 100%;height: 100%;object-fit:contain;">
</div>
<div class="ReportComparison-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%;
<div style="width: 90%;height:300px; display: flex;justify-content: center;">
<img :src="BACKEND_URL+'/' + calibrationTwoData.body_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-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 style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationLeftMax}}°
{{headPoseMaxValuesTwoRight.rotationLeftMax}}°
</span>
</div>
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.tiltLeftMax}}°
{{headPoseMaxValuesTwoRight.tiltLeftMax}}°
</span></div>
<div class="rollyawpitchtext">俯：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.pitchDownMax}}°
{{headPoseMaxValuesTwoRight.pitchDownMax}}°
</span></div>
</div>
<div style="width: 630px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationRightMax}}°
{{headPoseMaxValuesTwoRight.rotationRightMax}}°
</span></div>
<div class="rollyawpitchtext">右：
<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.tiltRightMax}}°
{{headPoseMaxValuesTwoRight.tiltRightMax}}°
</span>
</div>
<div class="rollyawpitchtext">仰：
<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.pitchUpMax}}°
{{headPoseMaxValuesTwoRight.pitchUpMax}}°
</span>
</div>
</div>
<div class="ReportComparison-content-title">足底压力</div>
<div style="width: 600px;height: 370px; display: flex;margin-bottom: 100px;">
<img :src="BACKEND_URL+'/' + calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
<div style="width: 90%;height:200px;display: flex;">
<img :src="BACKEND_URL+'/' + calibrationTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
object-fit:contain; ">
</div>
<div class="ReportComparison-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 style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationTwoData.foot1_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
<div class="ReportComparison-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 style="width: 90%;height:180px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationTwoData.foot2_image" alt="" srcset="" style="width: 100%;height: 100%; object-fit:contain;">
</div>
</div>
</div>
<div class="ReportComparison-container-testdatatitle">【诊断结果】</div>
<div class="ReportComparison-title2">记录</div>
<div class="ReportComparison-border1">{{ rightInfo.diagnosis_info }}</div>
<div class="ReportComparison-title2">处理</div>
<div class="ReportComparison-border2">{{ rightInfo.treatment_info }}</div>
<div class="ReportComparison-title2">备注</div>
<div class="ReportComparison-border3">{{ rightInfo.suggestion_info }}</div>
</div>
</div>
<div class="ReportComparison-container-testdatatitle">【诊断结果】</div>
<div class="ReportComparison-title2">记录</div>
<div class="ReportComparison-border1">{{ detectionInfo.diagnosis_info }}</div>
<div class="ReportComparison-title2">处理</div>
<div class="ReportComparison-border2">{{ detectionInfo.treatment_info }}</div>
<div class="ReportComparison-title2">备注</div>
<div class="ReportComparison-border3">{{ detectionInfo.suggestion_info }}</div>
<div class="ReportComparison-footer">
<div style="margin-right: 80px;">检测时间：{{ detectionInfo.created_at }}</div>
<!-- <div style="margin-right: 80px;">检测时间：{{ rightInfo.created_at }}</div> -->
<div style="margin-right: 80px;">报告时间：{{ getFormattedTime() }}</div>
<div>检测医生：{{ detectionInfo.creator_name }}</div>
<div>检测医生：{{ rightInfo.creator_name }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getBackendUrl } from '@/services/api.js'
import { historyAPI,getBackendUrl } from '@/services/api.js'
import { ElMessage } from 'element-plus'
const emit = defineEmits([ 'closePopUpReport' ]);
const emit = defineEmits([ 'closeReportComparison' ]);
const props = defineProps({
selectedPatient: {
required: false,
@ -211,14 +367,9 @@ const props = defineProps({
},
selectedData: {
required: false,
type: Object,
type: Array,
default: []
},
detectionInfo: {
required: false,
type: Object,
default: {}
},
selectIds: {
required: false,
type: Array,
@ -226,10 +377,10 @@ const props = defineProps({
}
})
const BACKEND_URL = getBackendUrl()
const rawData = ref({}) // 原始数据
const calibrationData = ref({}) // 校准数据
const isSelectData = ref(false) // 是否选择原始数据列表
const imageList = ref([])
const rawOneData = ref({}) // 原始数据
const rawTwoData = ref({}) // 原始数据
const calibrationOneData = ref({}) // 校准数据
const calibrationTwoData = ref({}) // 校准数据
const headPoseMaxValuesLeft = ref({
rotationLeftMax: 0, // 旋转-左旋最大值
rotationRightMax: 0, // 旋转-右旋最大值
@ -237,6 +388,13 @@ const headPoseMaxValuesLeft = ref({
tiltRightMax: 0, // 倾斜-右倾最大值
pitchUpMax: 0, // 俯仰-上仰最大值
pitchDownMax: 0 })
const headPoseMaxValuesTwoLeft = ref({
rotationLeftMax: 0, // 旋转-左旋最大值
rotationRightMax: 0, // 旋转-右旋最大值
tiltLeftMax: 0, // 倾斜-左倾最大值
tiltRightMax: 0, // 倾斜-右倾最大值
pitchUpMax: 0, // 俯仰-上仰最大值
pitchDownMax: 0 })
const headPoseMaxValuesRight= ref({
rotationLeftMax: 0, // 旋转-左旋最大值
@ -244,7 +402,16 @@ const headPoseMaxValuesLeft = ref({
tiltLeftMax: 0, // 倾斜-左倾最大值
tiltRightMax: 0, // 倾斜-右倾最大值
pitchUpMax: 0, // 俯仰-上仰最大值
pitchDownMax: 0 })
pitchDownMax: 0
})
const headPoseMaxValuesTwoRight= ref({
rotationLeftMax: 0, // 旋转-左旋最大值
rotationRightMax: 0, // 旋转-右旋最大值
tiltLeftMax: 0, // 倾斜-左倾最大值
tiltRightMax: 0, // 倾斜-右倾最大值
pitchUpMax: 0, // 俯仰-上仰最大值
pitchDownMax: 0
})
const calculateAge = (birthDate) => { // 获取年龄
if (!birthDate) return '—'
const today = new Date()
@ -259,16 +426,18 @@ const calculateAge = (birthDate) => { // 获取年龄
// 生命周期
onMounted(() => {
sessionsByIdLeft(props.selectedData[0].id)
sessionsByIdRight(props.selectedData[1].id)
// imageList.value = props.detectionInfo.data
// for (let i = 0; i < imageList.value.length; i++) {
// if(imageList.value[i].id == props.selectIds[0]){
// rawData.value = imageList.value[i]
// rawOneDatavalue = imageList.value[i]
// if(imageList.value[i].head_pose !=null){
// headPoseMaxValuesLeft.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
// }
// }
// if(imageList.value[i].id == props.selectIds[1]){
// calibrationData.value = imageList.value[i]
// calibrationOneData.value = imageList.value[i]
// if(imageList.value[i].head_pose !=null){
// headPoseMaxValuesRight.value = JSON.parse(imageList.value[i].head_pose).headPoseMaxValues
// }
@ -278,6 +447,67 @@ onMounted(() => {
// generatePDF()
// }, 500);
})
const leftInfo = ref({})
const rightInfo = ref({})
const sessionsByIdLeft = async (session_id) => {
try {
// 导出报告逻辑
const response = await historyAPI.sessionsById(session_id)
if (response.success) {
// 回填会话诊断信息到左侧表单
leftInfo.value = response.data
response.data.data.forEach(element => {
if(element.id == props.selectedData[0].data_ids.split(",")[0]){
rawOneData.value = element
if(element.head_pose !=null){
headPoseMaxValuesLeft.value = JSON.parse(element.head_pose).headPoseMaxValues
}
}
});
response.data.data.forEach(element => {
if(element.id == props.selectedData[0].data_ids.split(",")[1]){
calibrationOneData.value = element
if(element.head_pose !=null){
headPoseMaxValuesRight.value = JSON.parse(element.head_pose).headPoseMaxValues
}
}
});
}
} catch (error) {
ElMessage.error('获取失败')
}
}
const sessionsByIdRight = async (session_id) => {
try {
// 导出报告逻辑
const response = await historyAPI.sessionsById(session_id)
if (response.success) {
// 回填会话诊断信息到左侧表单
rightInfo.value = response.data
response.data.data.forEach(element => {
if(element.id == props.selectedData[1].data_ids.split(",")[0]){
rawTwoData.value = element
if(element.head_pose !=null){
headPoseMaxValuesTwoLeft.value = JSON.parse(element.head_pose).headPoseMaxValues
}
}
});
response.data.data.forEach(element => {
if(element.id == props.selectedData[1].data_ids.split(",")[1]){
calibrationTwoData.value = element
if(element.head_pose !=null){
headPoseMaxValuesTwoRight.value = JSON.parse(element.head_pose).headPoseMaxValues
}
}
});
}
} catch (error) {
ElMessage.error('获取失败')
}
}
onUnmounted(() => {
})
@ -302,41 +532,17 @@ const generatePDF = async () => {
})
const blob = new Blob([pdfBuffer], { type: 'application/pdf' })
const form = new FormData()
// 使用检测ID作为文件名
const filename = `${props.detectionInfo.id || 'report'}.pdf`
form.append('file', blob, filename)
// 如果有detectionInfo.id，则上传到后端
if (props.detectionInfo.id) {
const res = await fetch(`${BACKEND_URL}/api/reports/${props.detectionInfo.id}/upload`, {
method: 'POST',
body: form
})
if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`)
}
const json = await res.json()
if (json.success) {
ElMessage.success('报告生成并上传成功')
emit('closePopUpReport', true)
} else {
throw new Error(json.error || '上传失败')
}
} else {
// 仅供预览或下载
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = filename
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
emit('closePopUpReport', true)
}
// 仅供预览或下载
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = '对比报告'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
// emit('closePopUpReport', true)
} catch (e) {
console.error('报告生成异常:', e)
ElMessage.error(`报告生成失败：${e.message}`)
@ -353,7 +559,9 @@ function getFormattedTime() {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
function handleCancel(){
emit('closeReportComparison',false)
}
</script>
<style scoped>
@ -363,13 +571,13 @@ function getFormattedTime() {
left: 0;
width: 100%;
height: 100vh;
background-color: #fff;
background-color: #000;
z-index: 50;
overflow: auto;
}
.ReportComparison-container-body{
margin:20px auto 0;
width: 1600px;
width: 1048px;
background: #fff;
border-radius: 5px;
padding: 20px 0 30px;
@ -434,7 +642,10 @@ function getFormattedTime() {
padding: 20px 0;
}
.ReportComparison-containerdisplay{
display: flex;
/* display: flex; */
width: 50%;
border-right:1px solid rgb(208, 208, 208) ;
box-sizing: border-box;
}
.ReportComparison-container-leftbox{
width: 50%;
@ -444,7 +655,7 @@ function getFormattedTime() {
.ReportComparison-container-rightbox{
width: 50%;
box-sizing: border-box;
padding-left: 80px;
/* padding-left: 80px; */
}
.displayflex{
display: flex;
@ -454,7 +665,7 @@ function getFormattedTime() {
font-weight: 700;
font-style: normal;
color: #14AAFF;
font-size: 18px;
font-size: 14px;
text-align: left;
}
.displayflexselect{
@ -490,11 +701,11 @@ function getFormattedTime() {
padding-top:30px;
padding-bottom: 15px;
}
.rollyawpitchtext{
.ReportComparison-container .rollyawpitchtext{
font-style: normal;
color: #282828;
font-size: 24px;
width: 170px;
font-size: 14px;
width: 66px;
}
.rollyawpitchtextcolor{
color:#14AAFF;
@ -516,7 +727,7 @@ function getFormattedTime() {
border-radius: 4px;
font-weight: 400;
font-style: normal;
font-size: 18px;
font-size: 14px;
text-decoration: none;
color: #383838;
}
@ -526,7 +737,7 @@ function getFormattedTime() {
box-sizing: border-box;
border-radius: 4px;
font-style: normal;
font-size: 18px;
font-size: 14px;
text-decoration: none;
color: #383838;
padding: 5px;
@ -537,7 +748,7 @@ function getFormattedTime() {
box-sizing: border-box;
border-radius: 4px;
font-style: normal;
font-size: 18px;
font-size: 14px;
text-decoration: none;
color: #383838;
padding: 5px;
@ -689,7 +900,7 @@ function getFormattedTime() {
}
}
.PopUpOnlyReport-footer{
.ReportComparison-footer{
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #333;
@ -697,6 +908,9 @@ function getFormattedTime() {
font-weight: 700;
font-style: normal;
color: rgb(40, 40, 40);
font-size: 18px;
font-size: 14px;
}
.ReportComparison-zitaiimg{
width: 66px;
}
</style>