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-12 17:09:58 +08:00
parent 6ec453a63d
commit c3ced25fe1
14 changed files with 531 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

55
frontend/src/renderer/src/views/AloneReportComparison.vue
View File

@ -11,8 +11,6 @@
<div style="height: 100%; padding:0 40px; box-sizing: border-box;">
<div class="AloneReportComparison-container-bodytitle">体态测量报告单对比</div>
<div class="AloneReportComparison-container-display">
<!-- <div class="AloneReportComparison-container-userinfotext">检测时间：{{ detectionInfo.start_time }}</div>
<div class="AloneReportComparison-container-userinfotext">ID：{{ detectionInfo.id }}</div> -->
</div>
<div class="AloneReportComparison-container-userinfodisplay">
<div class="AloneReportComparison-container-userinfotext2" style="width: 180px;">
@ -73,12 +71,22 @@
style="width: 99%;height: 454px; object-fit:contain; ">
<!-- </div> -->
<div class="AloneReportComparison-content-title">头部姿态</div>
<div style="width: 380px;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 20px">
<div style="width: 380px;padding:20px 0 10px; display: flex;justify-content: space-between;">
<div style="width:150px;">
<div class="rollyawpitchtitle" style=" margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png">
</div>
<div style="width:150px;">
<div class="rollyawpitchtitle" style="margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png">
</div>
<div style="width:150px;">
<div class="rollyawpitchtitle" style="margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png">
</div>
<div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
</div>
<div style="width: 460px;padding:0px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
</span>
@ -90,7 +98,7 @@
{{headPoseMaxValuesLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationRightMax}}°
</span></div>
@ -105,6 +113,7 @@
</span>
</div>
</div>
</div>
<div class="AloneReportComparison-content-title">足底压力</div>
<div style="width: 90%;height: 280px; display: flex;">
<img :src="BACKEND_URL+'/' + rawOneData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -146,12 +155,22 @@
<img :src="BACKEND_URL+'/' + rawTwoData.body_image" alt="" srcset=""
style="width: 99%;height: 454px; object-fit:contain;">
<div class="AloneReportComparison-content-title">头部姿态</div>
<div style="width:380px;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 20px">
<div style="width: 380px;padding:20px 0 10px; display: flex;justify-content: space-between;">
<div style="width:150px;">
<div class="rollyawpitchtitle" style=" margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png">
</div>
<div style="width:150px;">
<div class="rollyawpitchtitle" style="margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png">
</div>
<div style="width:150px;">
<div class="rollyawpitchtitle" style="margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png">
</div>
<div style="width: 430px;padding:20px 0; display: flex;justify-content: space-between;">
</div>
<div style="width: 460px;padding:0px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationLeftMax}}°
</span>
@ -163,7 +182,7 @@
{{headPoseMaxValuesRight.pitchDownMax}}°
</span></div>
</div>
<div style="width: 430px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationRightMax}}°
</span></div>
@ -178,6 +197,7 @@
</span>
</div>
</div>
</div>
<div class="AloneReportComparison-content-title">足底压力</div>
<div style="width: 90%;height: 280px; display: flex;">
<img :src="BACKEND_URL+'/' + rawTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -506,12 +526,15 @@ function handleCancel(){
}
.rollyawpitchtext{
font-style: normal;
color: #282828;
font-size: 24px;
width: 170px;
font-weight: 400;
color: #ffff;
font-size: 20px;
width: 135px;
width: 150px;
}
.rollyawpitchtextcolor{
color:#14AAFF;
font-weight: 700;
color: #3BF2C6;
}
.AloneReportComparison-title2{
font-weight: 700;
@ -694,4 +717,12 @@ function handleCancel(){
color: rgb(40, 40, 40);
font-size: 18px;
}
.rollyawpitchtitle {
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #14AAFF;
width: 150px;
text-align:center
}
</style>

81
frontend/src/renderer/src/views/GenerateReport.vue
View File

@ -72,12 +72,18 @@
object-fit:contain; ">
</div>
<div class="generateReport-content-title">头部姿态</div>
<div style=" width:calc(100% - 20px); background:#1c222f;padding-left:70px">
<div style="width: 555px;padding-top:20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtitle">倾斜角</div>
<div class="rollyawpitchtitle">旋转角</div>
<div class="rollyawpitchtitle">俯仰角</div>
</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: 575px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 575px;padding:0px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
</span>
@ -104,6 +110,8 @@
</span>
</div>
</div>
</div>
<div class="generateReport-content-title">足底压力</div>
<div style="width: 600px;height: 270px; display: flex;">
<img :src="BACKEND_URL+'/' + rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -139,12 +147,19 @@
object-fit:contain; ">
</div>
<div class="generateReport-content-title">头部姿态</div>
<div style=" width:calc(100% - 20px); background:#1c222f;padding-left:70px">
<div style="width: 555px;padding-top:20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtitle">倾斜角</div>
<div class="rollyawpitchtitle">旋转角</div>
<div class="rollyawpitchtitle">俯仰角</div>
</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: 575px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 575px;padding:0px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationLeftMax}}°
</span>
@ -171,6 +186,46 @@
</span>
</div>
</div>
</div>
<!-- <div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtitle">倾斜角</div>
<div class="rollyawpitchtitle">旋转角</div>
<div class="rollyawpitchtitle">俯仰角</div>
</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: 575px;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: 575px;padding:0px 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="generateReport-content-title">足底压力</div>
<div style="width: 600px;height: 270px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -500,7 +555,7 @@ function closePopUpOnlyReport(e) {
.generateReport-container-rightbox{
width: 50%;
box-sizing: border-box;
padding-left: 80px;
margin-left: 80px;
}
.displayflex{
display: flex;
@ -546,14 +601,24 @@ function closePopUpOnlyReport(e) {
padding-top:30px;
padding-bottom: 15px;
}
.rollyawpitchtext{
.rollyawpitchtitle {
font-weight: 400;
font-style: normal;
color: #282828;
font-size: 24px;
width: 170px;
font-size: 16px;
color: #14AAFF;
width: 127px;
text-align:center
}
.rollyawpitchtext {
font-style: normal;
font-weight: 400;
color: #ffff;
font-size: 20px;
width: 135px;
}
.rollyawpitchtextcolor{
color:#14AAFF;
font-weight: 700;
color: #3BF2C6;
}
.generateReport-title2{
font-weight: 700;

38
frontend/src/renderer/src/views/ImageDetails.vue
View File

@ -17,42 +17,8 @@
style="max-width: 100%;max-height: 100%;object-fit:contain;">
</div>
<div class="ImageDetails-content-imgbox" v-if="indexActive == 2">
<div style="background: #fff; padding-left: 80px;">
<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: 575px;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: 575px;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>
<!-- <img :src="BACKEND_URL+'/' + ImageDetailsInfo.screen_image" alt="" style="width: 100%;height: 100%;object-fit:contain;"> -->
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.head_data_image" alt=""
style="max-width: 100%;max-height: 100%;object-fit:contain;">
</div>
<div class="ImageDetails-content-imgbox" v-if="indexActive == 3">
<img :src="BACKEND_URL+'/' + ImageDetailsInfo.foot_data_image" alt=""

80
frontend/src/renderer/src/views/ImageDetailsCompare.vue
View File

@ -19,93 +19,29 @@
</div>
</div>
<div class="ImageDetailsCompare-display" v-if="indexActive == 1">
<div class="ImageDetailsCompare-content-imgbox" style="width: 300px;height: 100%;">
<div class="ImageDetailsCompare-content-imgbox" style="max-width: 450px;height: 100%;">
<div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoLeft.id }}</div>
<img :src="BACKEND_URL+'/' + ImageDetailsInfoLeft.body_image" alt=""
style="width: 300px;height:600px;">
style="max-width: 450px;max-height:100%">
</div>
<div class="ImageDetailsCompare-content-imgbox"
style="width: 300px;height: 100%;margin-left: 50px;">
style="max-width: 450px;height: 100%;margin-left: 50px;">
<div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoRight.id }}</div>
<img :src="BACKEND_URL+'/' + ImageDetailsInfoRight.body_image" alt=""
style="width: 300px;height:600px;">
style="max-width: 450px;max-height:100%;">
</div>
</div>
<div class="ImageDetailsCompare-display" v-if="indexActive == 2">
<div class="ImageDetailsCompare-content-imgbox" style="width: 740px;height: 100%;">
<div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoLeft.id }}</div>
<div style="width: 700px;height:361px;background: #fff; padding-left: 80px;">
<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: 575px;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: 575px;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>
<img :src="BACKEND_URL+'/' + ImageDetailsInfoLeft.head_data_image" alt=""
style="max-width: 100%;max-height: 100%;object-fit:contain;">
</div>
<div class="ImageDetailsCompare-content-imgbox"
style="width: 630px;height: 100%;margin-left: 50px;">
<div class="ImageDetailsCompare-content-title">{{ ImageDetailsInfoRight.id }}</div>
<div style="width: 700px;height:361px;background: #fff; padding-left: 80px;">
<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: 575px;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: 575px;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>
<img :src="BACKEND_URL+'/' + ImageDetailsInfoRight.head_data_image" alt=""
style="max-width: 100%;max-height: 100%;object-fit:contain;">
</div>
</div>
<div class="ImageDetailsCompare-display" v-if="indexActive == 3">

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

@ -1773,4 +1773,20 @@ historyAPI.VideoDelById(ids).then((response)=>{
background-image: url(@/assets/process/del-active.png);
}
.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td{
background-color: #194764 !important;
border-top:1px solid rgba(38, 111, 255, 1);
border-bottom:1px solid rgba(38, 111, 255, 1)
}
.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td:last-child{
border-right:1px solid rgba(38, 111, 255, 1);
}
.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row td:first-child{
border-left:1px solid rgba(38, 111, 255, 1);
}
.patient-profile-container .patientprofile-container .el-table .el-table__row.current-row:last-child td{
border-bottom:1px solid rgba(38, 111, 255, 1)
}
</style>

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

@ -68,12 +68,22 @@
<img :src="BACKEND_URL+'/' + rawData.body_image" alt="" srcset=""
style="width: 99%;height: 454px; object-fit:contain; ">
<div class="PopUpOnlyReport-content-title">头部姿态</div>
<div style="width: 630px;padding:20px 0; margin: auto; display: flex;justify-content: space-between;">
<div style=" width:630px; background:#1c222f;margin: auto;padding-left:50px">
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 170px;">
<div class="rollyawpitchtitle" style="width:137px; margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png">
<img src="@/assets/archive/yaw.png">
<img src="@/assets/archive/pitch.png" style="margin-right: 100px;">
</div>
<div style="width: 630px;padding:20px 0; margin: auto; display: flex;justify-content: space-between;">
<div style="width: 170px;">
<div class="rollyawpitchtitle" style="width:137px; margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png">
</div>
<div style="width: 170px;">
<div class="rollyawpitchtitle" style="width:137px; margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png">
</div>
</div>
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
</span>
@ -85,7 +95,7 @@
{{headPoseMaxValuesLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 630px;padding:20px 0; margin: auto; display: flex;justify-content: space-between;">
<div style="width: 555px;padding:20px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationRightMax}}°
</span></div>
@ -100,6 +110,8 @@
</span>
</div>
</div>
</div>
<div class="PopUpOnlyReport-content-title">足底压力</div>
<div style="width: 600px;height: 370px; margin: auto; display: flex;margin-bottom: 100px;">
<img :src="BACKEND_URL+'/' + rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -472,14 +484,24 @@ function handleCancel(){
padding-top:30px;
padding-bottom: 15px;
}
.rollyawpitchtext{
.rollyawpitchtitle {
font-weight: 400;
font-style: normal;
color: #282828;
font-size: 24px;
font-size: 16px;
color: #14AAFF;
width: 170px;
text-align:center
}
.rollyawpitchtext {
font-style: normal;
font-weight: 400;
color: #ffff;
font-size: 20px;
width: 170px;
}
.rollyawpitchtextcolor{
color:#14AAFF;
font-weight: 700;
color: #3BF2C6;
}
.PopUpOnlyReport-title2{
font-weight: 700;

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

@ -69,12 +69,18 @@
<img :src="BACKEND_URL+'/' + rawData.body_image" alt="" srcset=""
style="width: 99%;height: 454px; object-fit:contain; ">
<div class="PopUpReport-content-title">头部姿态</div>
<div style="width:380px;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
<div style="width: 100%;padding-top:10px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtitle">倾斜角</div>
<div class="rollyawpitchtitle">旋转角</div>
<div class="rollyawpitchtitle">俯仰角</div>
</div>
<div style="width:100%;padding:10px 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: 460px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 460px;padding:10px 0; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
</span>
@ -86,7 +92,7 @@
{{headPoseMaxValuesLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationRightMax}}°
</span></div>
@ -101,6 +107,8 @@
</span>
</div>
</div>
</div>
<div class="PopUpReport-content-title">足底压力</div>
<div style="width: 90%;height: 280px; display: flex;">
<img :src="BACKEND_URL+'/' + rawData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -134,12 +142,18 @@
<img :src="BACKEND_URL+'/' + calibrationData.body_image" alt="" srcset=""
style="width: 99%;height: 454px; object-fit:contain; ">
<div class="PopUpReport-content-title">头部姿态</div>
<div style="width: 380px;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;padding:0 10px">
<div style="width: 100%;padding-top:20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtitle">倾斜角</div>
<div class="rollyawpitchtitle">旋转角</div>
<div class="rollyawpitchtitle">俯仰角</div>
</div>
<div style="width:100%;padding:10px 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: 460px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 460px;padding-top:10px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationLeftMax}}°
</span>
@ -151,7 +165,7 @@
{{headPoseMaxValuesRight.pitchDownMax}}°
</span></div>
</div>
<div style="width: 460px;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 460px;padding:10px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationRightMax}}°
</span></div>
@ -166,6 +180,7 @@
</span>
</div>
</div>
</div>
<div class="PopUpReport-content-title">足底压力</div>
<div style="width: 90%;height: 280px; display: flex;">
<img :src="BACKEND_URL+'/' + calibrationData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -492,12 +507,14 @@ function getFormattedTime() {
}
.rollyawpitchtext{
font-style: normal;
color: #282828;
font-size: 24px;
width: 170px;
font-weight: 400;
color: #ffff;
font-size: 20px;
width: 135px;
}
.rollyawpitchtextcolor{
color:#14AAFF;
font-weight: 700;
color: #3BF2C6;
}
.PopUpReport-title2{
font-weight: 700;
@ -683,5 +700,12 @@ function getFormattedTime() {
color: rgb(40, 40, 40);
font-size: 18px;
}
.rollyawpitchtitle {
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #14AAFF;
width: 127px;
text-align:center
}
</style>

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

@ -10,8 +10,6 @@
<div style="height: 100%; padding:0 40px; 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" style="width: 180px;">
@ -55,8 +53,10 @@
<div class="ReportComparison-container-testdatatitle">【检测数据】</div>
<div style="display: flex;">
<div class="ReportComparison-containerdisplay">
<div class="displayflextext1" style="padding-bottom:10px">报告时间: {{ leftInfo.start_time }}</div>
<div style="display: flex;">
<div class="ReportComparison-container-leftbox">
<div class="displayflex">
<div class="displayflextext1">原始数据：</div>
<div class="displayflextext1">
@ -76,12 +76,22 @@
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">头部姿态</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
<div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
</div>
<div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationLeftMax}}°
</span>
@ -93,7 +103,7 @@
{{headPoseMaxValuesLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesLeft.rotationRightMax}}°
</span></div>
@ -108,6 +118,7 @@
</span>
</div>
</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%;
@ -143,12 +154,22 @@
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">头部姿态</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
<div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
</div>
<div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationLeftMax}}°
</span>
@ -160,7 +181,7 @@
{{headPoseMaxValuesRight.pitchDownMax}}°
</span></div>
</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesRight.rotationRightMax}}°
</span></div>
@ -175,6 +196,7 @@
</span>
</div>
</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%;
@ -199,6 +221,7 @@
<div class="ReportComparison-border3">{{ leftInfo.suggestion_info }}</div>
</div>
<div class="ReportComparison-containerdisplay">
<div class="displayflextext1" style="padding-bottom:10px">报告时间: {{ rightInfo.start_time }}</div>
<div style="display: flex;">
<div class="ReportComparison-container-leftbox">
<div class="displayflex">
@ -220,12 +243,22 @@
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">头部姿态</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
<div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
</div>
<div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesTwoLeft.rotationLeftMax}}°
</span>
@ -237,7 +270,7 @@
{{headPoseMaxValuesTwoLeft.pitchDownMax}}°
</span></div>
</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesTwoLeft.rotationRightMax}}°
</span></div>
@ -252,6 +285,9 @@
</span>
</div>
</div>
</div>
<div class="ReportComparison-content-title">足底压力</div>
<div style="width: 90%;height:200px;display: flex;">
<img :src="BACKEND_URL+'/' + rawTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -287,12 +323,22 @@
object-fit:contain; ">
</div>
<div class="ReportComparison-content-title">头部姿态</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style=" width:calc(100% - 10px); background:#1c222f;;padding:0 10px">
<div style="width: 100%;padding:10px 0; display: flex;justify-content: space-between;">
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">倾斜角</div>
<img src="@/assets/archive/roll.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">旋转角</div>
<img src="@/assets/archive/yaw.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:66px;">
<div class="rollyawpitchtitle" style="width:66px;font-size:14px; margin-bottom:10px">俯仰角</div>
<img src="@/assets/archive/pitch.png" class="ReportComparison-zitaiimg">
</div>
<div style="width:100%;padding:20px 0; display: flex;justify-content: space-between;">
</div>
<div style="width:100%;padding:0px 0 10px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">左：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesTwoRight.rotationLeftMax}}°
</span>
@ -304,7 +350,7 @@
{{headPoseMaxValuesTwoRight.pitchDownMax}}°
</span></div>
</div>
<div style="width: 100%;padding:20px 0; display: flex;justify-content: space-between;">
<div style="width: 100%;padding:0px 0 20px; display: flex;justify-content: space-between;">
<div class="rollyawpitchtext">右：<span class="rollyawpitchtextcolor">
{{headPoseMaxValuesTwoRight.rotationRightMax}}°
</span></div>
@ -319,6 +365,7 @@
</span>
</div>
</div>
</div>
<div class="ReportComparison-content-title">足底压力</div>
<div style="width: 90%;height:200px;display: flex;">
<img :src="BACKEND_URL+'/' + calibrationTwoData.foot_data_image" alt="" srcset="" style="width: 100%;height: 100%;
@ -706,12 +753,14 @@ function handleCancel(){
}
.ReportComparison-container .rollyawpitchtext{
font-style: normal;
color: #282828;
font-size: 14px;
font-weight: 400;
color: #ffff;
font-size: 12px;
width: 66px;
}
.rollyawpitchtextcolor{
color:#14AAFF;
font-weight: 700;
color: #3BF2C6;
}
.ReportComparison-title2{
font-weight: 700;
@ -917,4 +966,10 @@ function handleCancel(){
.ReportComparison-zitaiimg{
width: 66px;
}
.rollyawpitchtitle {
font-weight: 400;
font-style: normal;
color: #14AAFF;
text-align:center
}
</style>