From c1cfa7134827504df31df818397910623a182ecf Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Wed, 13 Aug 2025 14:17:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=A1=E5=87=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/renderer/src/views/Detection.vue | 123 +++++++++++-------
 1 file changed, 79 insertions(+), 44 deletions(-)

diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index 037248af..f3212390 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/frontend/src/renderer/src/views/Detection.vue
@@ -25,7 +25,7 @@
           <!-- handleStartStop -->
           <el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
                   --el-button-border-color: #409EFF;
-              --el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;" >
+              --el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;">
             结束
           </el-button>
           <el-button v-if="isStart && isConnected" @click="saveDetectionData" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6); 
@@ -77,18 +77,23 @@
             <div style="display: flex;">
               <div class="module-header">
                 <div style="display: flex;align-items: center;">
-                  <div class="module-title">
+                  <div class="module-title" style="width:230px">
                     <div class="module-title-bg">
                       <img src="@/assets/svg/u67.svg" alt="" srcset="" style="margin-right: 5px;">
                       头部姿态
                     </div>
+                    <el-button type="primary" class="start-btn" @click="calibrationClick" :disabled="isRecording"
+                      style="background-color: #0099ff;font-size: 14px;
+                           --el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
+                      校准
+                    </el-button>
                   </div>
 
                 </div>
                 <div style="display: flex;align-items: center;">
                   <div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
                     imuStatus
-                    }}</div>
+                  }}</div>
                   <el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
                     style="background-color: #0099ff;font-size: 14px;margin-left: 15px;
                            --el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
@@ -103,7 +108,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 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">{{
@@ -114,7 +119,7 @@
               </div>
               <div style="width: 33%;position: relative;">
                 <div class="chart-title">倾斜角</div>
-                <div class="chart-titles">{{headlist.tilt}}</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">{{
@@ -125,7 +130,7 @@
               </div>
               <div style="width: 33%;position: relative;">
                 <div class="chart-title">俯仰角</div>
-                <div class="chart-titles">{{headlist.pitch}}</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">{{
@@ -141,7 +146,7 @@
             </div>
             <!-- 历史数据表格 -->
             <div style="display: flex;justify-content: center;padding: 0px 10px;margin-top: 5px;height: 100%;">
-              <el-table :data="historyData" border style="width: 100%;overflow: auto;height: calc(100% - 280px);"  >
+              <el-table :data="historyData" border style="width: 100%;overflow: auto;height: calc(100% - 280px);">
                 <el-table-column prop="id" label="ID" align="center" width="60" />
                 <el-table-column label="最大旋转角" align="center">
                   <el-table-column prop="rotLeft" label="左" min-width="60" align="center" />
@@ -334,7 +339,8 @@
         </div>
       </div>
     </div>
-    <el-dialog class="tsDialog" v-model="resDialogVisible" center title="诊断信息" width="600" :before-close="reshandleClose">
+    <el-dialog class="tsDialog" v-model="resDialogVisible" center title="诊断信息" width="600"
+      :before-close="reshandleClose">
       <div style="margin-top:10px">
         <div class="dialog-title">
           <div class="dialog-title-item">
@@ -361,8 +367,10 @@
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button style="background: #323232;border:1px solid #787878;color: #ffffff;" @click="resDialogVisible = false">取消</el-button>
-          <el-button type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
+          <el-button style="background: #323232;border:1px solid #787878;color: #ffffff;"
+            @click="resDialogVisible = false">取消</el-button>
+          <el-button type="primary" style="background:#0099ff;"
+            @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
           <el-button type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('completed')">
             保存
           </el-button>
@@ -468,8 +476,8 @@
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="handleClose" 
-          style="margin-right: 0px;background: #323232;border:1px solid #787878;color: #ffffff;">退出</el-button>
+          <el-button @click="handleClose"
+            style="margin-right: 0px;background: #323232;border:1px solid #787878;color: #ffffff;">退出</el-button>
           <el-button type="primary" style="background: #0099ff;" @click="handleSave" :loading="saveLoading">
             保存
           </el-button>
@@ -488,7 +496,7 @@ import html2canvas from 'html2canvas'
 import Header from '@/views/Header.vue'
 import { useAuthStore } from '../stores/index.js'
 import * as echarts from 'echarts'
-import { getBackendUrl ,patientAPI} from '../services/api.js'
+import { getBackendUrl, patientAPI } from '../services/api.js'
 const authStore = useAuthStore()
 const router = useRouter()
 const route = useRoute()
@@ -673,9 +681,9 @@ const formattedTime = computed(() => {
   return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
 });
 const headlist = ref({
-  rotation:'0',
-  tilt:'0',
-  pitch:'0'
+  rotation: '0',
+  tilt: '0',
+  pitch: '0'
 })
 // 开始计时器
 const startTimer = () => {
@@ -995,7 +1003,6 @@ 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 // 俯仰角度
@@ -2031,21 +2038,38 @@ const initchart = () => {
     } else {
       console.warn('找不到 ID 为  的 DOM 元素');
     }
-      // 添加窗口大小调整监听器
-      window.addEventListener('resize', () => {
-        if (rotationCharts) {
-          rotationCharts.resize();
-        }
-        if (pitchCharts) {
-          pitchCharts.resize();
-        }
-        if (tiltCharts) {
-          tiltCharts.resize();
-        }
-      });
+    // 添加窗口大小调整监听器
+    window.addEventListener('resize', () => {
+      if (rotationCharts) {
+        rotationCharts.resize();
+      }
+      if (pitchCharts) {
+        pitchCharts.resize();
+      }
+      if (tiltCharts) {
+        tiltCharts.resize();
+      }
+    });
   });
 }
+const calibrationClick = async () => {
+  const response = await fetch(`${BACKEND_URL}/api/devices/calibrate/imu`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({})
+  })
+  if (response.ok) {
+    const result = await response.json()
+    if (result.success) {
+      ElMessage.success(result.message)
+    } else {
+      ElMessage.error(result.message)
+    }
+  }
 
+}
 onMounted(() => {
   // 加载患者信息
   loadPatientInfo()
@@ -2700,6 +2724,7 @@ onUnmounted(() => {
   font-size: 14px;
   color: #EEF1FA;
 }
+
 .chart-titles {
   position: absolute;
   top: 4px;
@@ -2730,44 +2755,54 @@ onUnmounted(() => {
   background-color: #282828 !important;
   border-right: 1px solid rgb(81, 81, 81) !important;
 }
-:deep(.el-scrollbar__wrap){
+
+:deep(.el-scrollbar__wrap) {
   background: #282828 !important;
 }
-:deep(.tsDialog.el-dialog){
+
+:deep(.tsDialog.el-dialog) {
   background-color: #323232;
-  padding:0px;
-  padding-bottom:20px;
+  padding: 0px;
+  padding-bottom: 20px;
 }
-:deep(.tsDialog.el-dialog .el-input__wrapper){
+
+:deep(.tsDialog.el-dialog .el-input__wrapper) {
   background-color: #242424;
   border: none;
   box-shadow: none;
 }
-:deep(.tsDialog.el-dialog .el-select__wrapper){
+
+:deep(.tsDialog.el-dialog .el-select__wrapper) {
   background-color: #242424;
   border: none;
   box-shadow: none;
 }
-:deep(.tsDialog.el-dialog .el-input__inner){
+
+:deep(.tsDialog.el-dialog .el-input__inner) {
   color: #ffffff;
 }
-:deep(.tsDialog.el-dialog .el-select__placeholder){
+
+:deep(.tsDialog.el-dialog .el-select__placeholder) {
   color: #ffffff;
 }
-:deep(.tsDialog.el-dialog .el-dialog__header){
+
+:deep(.tsDialog.el-dialog .el-dialog__header) {
   border-bottom: 1px solid #1e1e1e;
-  padding:10px 20px;
+  padding: 10px 20px;
 }
+
 :deep(.tsDialog.el-dialog .el-textarea__inner) {
   background: #242424;
   color: #ffffff;
-  box-shadow:none;
+  box-shadow: none;
 }
-:deep( .el-dialog__body){
-  padding:20px;
+
+:deep(.el-dialog__body) {
+  padding: 20px;
 }
-:deep(.el-dialog__footer){
-  padding:0px 20px;
+
+:deep(.el-dialog__footer) {
+  padding: 0px 20px;
 }
 </style>
 <style>