From 08718766d46b27bc90acb61e193721c959a24297 Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Wed, 13 Aug 2025 10:00:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=B4=E9=83=A8=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/renderer/src/views/Detection.vue | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index b82d1cec..037248af 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/frontend/src/renderer/src/views/Detection.vue
@@ -103,6 +103,7 @@
             <div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
               <div style="width: 33%;position: relative;">
                 <div class="chart-title">旋转角</div>
+                <div class="chart-titles">{{headlist.rotation}}</div>
                 <div id="rotationChartId" style="width: 100%;height: 140px;"></div>
                 <div class="gauge-group-box">
                   <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
@@ -113,7 +114,8 @@
               </div>
               <div style="width: 33%;position: relative;">
                 <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-text1">左：<span class="gauge-group-box-text2">{{
                     headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
@@ -123,7 +125,8 @@
               </div>
               <div style="width: 33%;position: relative;">
                 <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-text1">俯：<span class="gauge-group-box-text2">{{
                     headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
@@ -669,6 +672,11 @@ const formattedTime = computed(() => {
   const secs = seconds.value % 60;
   return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
 });
+const headlist = ref({
+  rotation:'0',
+  tilt:'0',
+  pitch:'0'
+})
 // 开始计时器
 const startTimer = () => {
   if (isRunning.value) return;
@@ -987,7 +995,10 @@ const isTrackingMaxValues = ref(false)
 function handleIMUData(data) {
   try {
     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 }
     // 2) { head_pose: { rotation, tilt, pitch } }
@@ -2689,6 +2700,17 @@ onUnmounted(() => {
   font-size: 14px;
   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) {
   background-color: rgb(81, 81, 81) !important;