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

修改头部图

Browse Source
This commit is contained in:
jingna 2025-08-13 10:00:56 +08:00
parent 0abe79ba1c
commit 08718766d4
1 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,6 +103,7 @@
<div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;"> <div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
<div style="width: 33%;position: relative;"> <div style="width: 33%;position: relative;">
<div class="chart-title">旋转角</div> <div class="chart-title">旋转角</div>
<div class="chart-titles">{{headlist.rotation}}</div>
<div id="rotationChartId" style="width: 100%;height: 140px;"></div> <div id="rotationChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{ <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
@ -113,7 +114,8 @@
</div> </div>
<div style="width: 33%;position: relative;"> <div style="width: 33%;position: relative;">
<div class="chart-title">倾斜角</div> <div class="chart-title">倾斜角</div>
<div id="pitchChartId" style="width: 100%;height: 140px;"></div> <div class="chart-titles">{{headlist.tilt}}</div>
<div id="tiltChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{ <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div> headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
@ -123,7 +125,8 @@
</div> </div>
<div style="width: 33%;position: relative;"> <div style="width: 33%;position: relative;">
<div class="chart-title">俯仰角</div> <div class="chart-title">俯仰角</div>
<div id="tiltChartId" style="width: 100%;height: 140px;"></div> <div class="chart-titles">{{headlist.pitch}}</div>
<div id="pitchChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">俯：<span class="gauge-group-box-text2">{{ <div class="gauge-group-box-text1">俯：<span class="gauge-group-box-text2">{{
headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div> headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
@ -669,6 +672,11 @@ const formattedTime = computed(() => {
const secs = seconds.value % 60; const secs = seconds.value % 60;
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}); });
const headlist = ref({
rotation:'0',
tilt:'0',
pitch:'0'
})
// 开始计时器 // 开始计时器
const startTimer = () => { const startTimer = () => {
if (isRunning.value) return; if (isRunning.value) return;
@ -987,7 +995,10 @@ const isTrackingMaxValues = ref(false)
function handleIMUData(data) { function handleIMUData(data) {
try { try {
if (!data) return if (!data) return
console.log('IMU数据:', data)
headlist.value.rotation = data.rotation // 旋转角度
headlist.value.tilt = data.tilt // 倾斜角度
headlist.value.pitch = data.pitch // 俯仰角度
// 兼容两种载荷结构： // 兼容两种载荷结构：
// 1) { rotation, tilt, pitch } // 1) { rotation, tilt, pitch }
// 2) { head_pose: { rotation, tilt, pitch } } // 2) { head_pose: { rotation, tilt, pitch } }
@ -2689,6 +2700,17 @@ onUnmounted(() => {
font-size: 14px; font-size: 14px;
color: #EEF1FA; color: #EEF1FA;
} }
.chart-titles {
position: absolute;
top: 4px;
right: 7px;
z-index: 2000;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 14px;
color: #EEF1FA;
}
:deep(.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before) { :deep(.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before) {
background-color: rgb(81, 81, 81) !important; background-color: rgb(81, 81, 81) !important;