diff --git a/frontend/src/renderer/src/assets/process/add.png b/frontend/src/renderer/src/assets/process/add.png
index e37bfd55..efacf751 100644
Binary files a/frontend/src/renderer/src/assets/process/add.png and b/frontend/src/renderer/src/assets/process/add.png differ
diff --git a/frontend/src/renderer/src/assets/process/del-active.png b/frontend/src/renderer/src/assets/process/del-active.png
new file mode 100644
index 00000000..de207a15
Binary files /dev/null and b/frontend/src/renderer/src/assets/process/del-active.png differ
diff --git a/frontend/src/renderer/src/assets/process/del-disabled.png b/frontend/src/renderer/src/assets/process/del-disabled.png
new file mode 100644
index 00000000..777a64b9
Binary files /dev/null and b/frontend/src/renderer/src/assets/process/del-disabled.png differ
diff --git a/frontend/src/renderer/src/assets/process/del-selected.png b/frontend/src/renderer/src/assets/process/del-selected.png
new file mode 100644
index 00000000..ba33a629
Binary files /dev/null and b/frontend/src/renderer/src/assets/process/del-selected.png differ
diff --git a/frontend/src/renderer/src/assets/process/selected-active.png b/frontend/src/renderer/src/assets/process/selected-active.png
new file mode 100644
index 00000000..70f798c8
Binary files /dev/null and b/frontend/src/renderer/src/assets/process/selected-active.png differ
diff --git a/frontend/src/renderer/src/assets/process/set.png b/frontend/src/renderer/src/assets/process/set.png
index 5d6c5db3..e98b2e35 100644
Binary files a/frontend/src/renderer/src/assets/process/set.png and b/frontend/src/renderer/src/assets/process/set.png differ
diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index d0cf8f88..b98216c8 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/frontend/src/renderer/src/views/Detection.vue
@@ -101,7 +101,7 @@
               </div>
             </div>
             <!--  头部姿态3D模型 -->
-            <div class="body-header-bottombox">
+            <div class="body-header-bottombox" ref="imuHeaderRef">
               <div class="body-header-bottombox-left">
                 <div class="body-header-bottombox-lefttext" style="height: 20%;"></div>
                 <div class="body-header-bottombox-lefttext">
@@ -268,7 +268,7 @@
             <div class="body-userinfo-content">
               <div class="body-userinfo-content-top">
                 
-                <img src="@/assets/detection/useredit.png" alt=""
+                <img src="@/assets/detection/useredit.png" alt="" title="编辑患者信息"
                 class="userinfo-edit-img" style="cursor: pointer;" @click="handleEditUserInfo">
                 <div class="useravatar-box">
                   <img src="@/assets/detection/useravatar.svg" alt="">
@@ -440,7 +440,7 @@
             <div class="body-userinfo-content">
               <div class="body-userinfo-content-top">
                 
-                <img src="@/assets/detection/useredit.png" alt=""
+                <img src="@/assets/detection/useredit.png" alt="" title="编辑患者信息"
                 class="userinfo-edit-img" style="cursor: pointer;" @click="handleEditUserInfo">
                 <div class="useravatar-box">
                   <img src="@/assets/detection/useravatar.svg" alt="">
@@ -575,8 +575,8 @@
             <div class="body-userinfo-content">
               <div class="body-userinfo-content-top">
                 
-                <img src="@/assets/detection/useredit.png" alt=""
-                class="userinfo-edit-img" style="cursor: pointer;" @click="handleEditUserInfo">
+                <img src="@/assets/detection/useredit.png" alt="" title="编辑患者信息"
+                  class="userinfo-edit-img" style="cursor: pointer;" @click="handleEditUserInfo">
                 <div class="useravatar-box">
                   <img src="@/assets/detection/useravatar.svg" alt="">
                 </div>
@@ -788,6 +788,19 @@
             <el-checkbox v-model="cameraForm.remote.enable" label="有效" size="large" style="width: 60px;margin-left:10px ;" />
 
           </div>
+
+          <div class="pop-up-camera-display" style="padding-top: 30px;padding-bottom: 00px;">
+            <div class="pop-up-camera-line"></div>
+            <div class="pop-up-camera-title">IMU设备</div>
+          </div>
+          <div class="pop-up-camera-display" style="padding-top: 10px;">
+            <div class="pop-up-camera-name">Mac地址</div>
+            <el-input v-model="cameraForm.imu.mac_address" placeholder="请输入" 
+            style="width: 434px;" />
+            <el-checkbox v-model="cameraForm.imu.enable" label="有效" size="large" style="width: 60px;margin-left:10px ;" />
+
+          </div>
+          
           <div class="form-actions-display">
             <el-button @click="handleCameraCancel" class="formreturnCancel">退出</el-button>
             <el-button type="primary" class="formsaveCancel"
@@ -922,9 +935,10 @@ const screenshotLoading = ref(false)
 const cameraDialogVisible =ref(false) // 设置相机参数弹框
 const contenGridRef =ref(null) // 实时检查整体box
 const wholeBodyRef = ref(null) // 身体姿态ref
-const camera1Ref = ref(null)
-const camera2Ref = ref(null)
-const pressureRef = ref(null)
+const camera1Ref = ref(null) // 视频1ref
+const camera2Ref = ref(null) // 视频2ref
+const pressureRef = ref(null) // 足底压力ref
+const imuHeaderRef = ref(null) // IMUref
 const historyDialogVisible = ref(false)
 // 患者信息（从页面获取或通过API获取）
 const patientInfo = ref({
@@ -1013,12 +1027,14 @@ const cameraForm = ref({ // 相机参数
     depth_range_max: '', // 距离范围最大值
   },
   imu:{
-    port: '', // IMU串口号
+    mac_address: '', // IMU串口号
+    enable: false
   },
   remote:{
-    port: '', // IMU串口号
+    port: '', // 遥控器串口号
     enable: false
-  }
+  },
+
 })
 const calculatedAge = ref(null)
 //修改
@@ -1255,7 +1271,8 @@ function cameraUpdate() {  // 相机设置数据更新弹框
       depth_range_max: '', // 距离范围最大值
     },
     imu:{
-      port: '', // IMU串口号
+      mac_address: '', // IMU串口号
+      enable: false
     },
     remote:{
     port: '', // IMU串口号
@@ -1952,11 +1969,18 @@ async function saveDetectionData() {
     }
 
     let pressureBox =  pressureRef.value?.getBoundingClientRect()
+    let imuHeaderBox =  imuHeaderRef.value?.getBoundingClientRect()
+    
     let titile_height = 24
     pressure_image =[
       Math.round(pressureBox.x), Math.round(pressureBox.y)+ titile_height,
       Math.round(pressureBox.width), Math.round(pressureBox.height)
     ]
+    let head_data_image = []
+    head_data_image =[
+      Math.round(imuHeaderBox.x), Math.round(imuHeaderBox.y)+ titile_height,
+      Math.round(imuHeaderBox.width), Math.round(imuHeaderBox.height)
+    ]
     let foot1_image=""
     if(tempInfo.value.camera1_frame != null 
     && tempInfo.value.camera1_frame.image != null ){
@@ -1990,7 +2014,8 @@ async function saveDetectionData() {
       foot_data:foot_data,
       foot1_image:foot1_image,
       foot2_image:foot2_image,
-      foot_data_image:pressure_image,     
+      foot_data_image:pressure_image,  
+      head_data_image:head_data_image,   
       screen_image:null
  
     })    
@@ -2648,9 +2673,8 @@ function viewClick(e){
   cursor: pointer;
 }
 .icon-box:hover{
-  /* background-color: #14AAFF; */
   background-color: rgb(20 170 255 / 30%);
-    border: 1px solid rgb(20 170 255 / 50%);
+  border: 1px solid rgb(20 170 255 / 50%);
 }
 .startvideo-box{
   width: 130px;
@@ -3183,10 +3207,13 @@ function viewClick(e){
   font-weight: 400;
   font-style: normal;
   font-size: 14px;
-    color: #D7D7D7;
+  color: #D7D7D7;
   margin-left:20px
 }
-
+.endbutton:hover {
+  background-color: #14aaff;
+  border:1px solid #14aaff;
+}
 .pop-up-mask{
   position: fixed;
   z-index: 99;
diff --git a/frontend/src/renderer/src/views/Detection_bak.vue b/frontend/src/renderer/src/views/Detection_bak.vue
deleted file mode 100644
index baf7bc87..00000000
--- a/frontend/src/renderer/src/views/Detection_bak.vue
+++ /dev/null
@@ -1,2999 +0,0 @@
-<template>
-  <div class="dashboard-container">
-    <Header />
-    <!-- 主内容区域 -->
-    <div class="main-content">
-      <!-- 顶部工具栏 -->
-      <header class="top-bar">
-        <div style="display: flex;align-items: center;">
-          <div v-if="!isRecording" class="top-bar-left" @click="routeTo('/')" style="cursor: pointer;">
-            <!-- <img src="@/assets/svg/u14.svg" alt=""> -->
-            <span class="page-title">实时检测</span>
-          </div>
-          <div style="padding-left: 10px;"> 
-            <span :style="{ color: isConnected ? '#00C851' : '#FF4444' }">{{ isConnected ? '检测中' : '服务已断开!' }}</span>
-          </div>
-          <!-- <img src="@/assets/sz.png" alt="" title="编辑相机参数" v-if="isConnected == true"
-          style="margin-left: 20px;cursor: pointer; width: 24px;height: 24px;"
-          @click="cameraUpdate"> -->
-          
-          <!-- 录制时间 -->
-          <div v-if="isRecording" class="icon-container">
-            <!-- <img src="@/assets/record.png" class="blink-icon" :class="{ blinking: isRunning }" alt=""> -->
-            <div style="font-size: 18px;">{{ formattedTime }}</div>
-          </div>
-          <el-button v-if="!isRecording" @click="handleStartStop" :disabled="!isConnected" type="primary"
-            class="start-title-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
-                  --el-button-border-color: #409EFF;border:0px;
-              --el-button-border-color: transparent;width: 110px;height: 30px;font-size: 18px;">           
-            开始录像
-          </el-button>
-          <!-- handleStartStop -->
-          <el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-title-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
-                  --el-button-border-color: #409EFF;border:0px;
-              --el-button-border-color: transparent;width: 110px;height: 30px;font-size: 18px;">
-            结束录像
-          </el-button>
-          <el-button  @click="saveDetectionData" type="primary" class="start-title-btn" style="
-            background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
-            --el-button-border-color: #409EFF;border:0px;
-            --el-button-border-color: transparent;width: 110px;height: 30px;font-size: 18px;">
-            保存数据
-          </el-button>
-        </div>
-
-        <div class="top-bar-right">  
-          <el-icon title="历史记录" class="top-icon" @click="routerClick">
-            <Clock />
-          </el-icon>
-          <!-- <el-icon class="top-icon">
-            <Grid />
-          </el-icon> -->
-        </div>
-      </header>
-
-      <!-- 核心内容区（网格布局） -->
-      <div id="detectare" ref="contenGridRef" class="content-grid">
-        <!-- 身体姿态模块 -->
-        <div class="module-card body-posture" style="width: 25%;margin-right: 1px; ">
-          <div class="module-header">
-            <div class="module-title">
-              <div class="module-title-bg">
-                <!-- <img src="@/assets/svg/u58.svg" alt="" srcset="" style="margin-right: 5px;"> -->
-                身体姿态
-              </div>
-            </div>
-            <div style="display: flex; align-items: center;">
-              <!-- <img src="@/assets/refresh.png" title="重启深度相机"
-              @click="refreshClick('femtobolt')"
-              alt="" style="margin-right: 5px;cursor: pointer; width: 14px;">
-                <div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }"  -->
-                style="font-size: 14px;">
-                  {{ femtoboltStatus }}</div>
-                </div>
-              
-          </div>
-          <div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 40px);padding-top: 0px;">
-            <!-- 使用深度相机视频流替换静态图片 -->
-            <!-- <img :src="(femtoboltStatus === '已连接' && depthCameraImgSrc) ? depthCameraImgSrc : noImageSvg" alt="深度相机视频流"
-              style="width: 100%;height: calc(100% - 40px);object-fit:contain;background:#323232;"> -->
-          </div>
-        </div>
-        <div class="body-posture" style="width: 45%;display: flex;margin-right: 1px;
-            flex-wrap: wrap;
-            align-content: space-between;
-        ">
-
-          <div class="module-card" style=" height:calc( 45%);margin-bottom: 1px;">
-            <!-- 头部姿态模块 -->
-            <div style="display: flex;">
-              <div class="module-header">
-                <div style="display: flex;align-items: center;">
-                  <div class="module-title" style="width:380px">
-                    <div class="module-title-bg">
-                      <!-- <img src="@/assets/svg/u67.svg" alt="" srcset="" style="margin-right: 5px;"> -->
-                      头部姿态
-                    </div>
-                    <div>
-                      <el-button type="primary" class="start-btn" @click="calibrationClick" 
-                          style="background-color: #0099ff;font-size: 14px;
-                              --el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
-                          校准
-                        </el-button>
-                        <el-button type="primary" class="start-btn" @click="clearAndStartTracking" 
-                        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;">
-                        清零
-                      </el-button>
-
-                    </div>
-                    
-                  </div>
-
-                </div>
-                <div style="display: flex;align-items: center;">
-                  <!-- <img src="@/assets/refresh.png" title="重启IMU"
-                    @click="refreshClick('imu')"
-                    alt="" style="margin-right: 5px;cursor: pointer; width: 14px;"> -->
-                  <div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
-                    imuStatus
-                  }}</div>
-                 
-                </div>
-              </div>
-
-            </div>
-            <!-- 仪表盘区域 -->
-            <div style="height:calc(100% - 40px) ; display: flex;justify-content: space-between;align-items: center; padding:10px;">
-              <div style="width: 33%;position: relative;">
-                <div class="chart-title">旋转角</div>
-                <div id="rotationChartId" style="width: 100%;height: 140px;"></div>
-                <div class="rotation-titles">{{ headlist.rotation }}°</div> 
-                <div class="gauge-group-box" style="justify-content: center;">
-                  <div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
-                    headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div>
-          
-                </div>
-                <div class="gauge-group-box"  style="justify-content: center;">
-                  <div class="gauge-group-box-text1">右最大：<span class="gauge-group-box-text2">{{
-                    headPoseMaxValues.rotationRightMax.toFixed(1) }}°</span></div>
-                
-                </div>
-              </div>
-              <div style="width: 33%;position: relative;">
-                <div class="chart-title">倾斜角</div>
-                <div id="tiltChartId" style="width: 100%;height: 140px;"></div>
-                <div class="rotation-titles">{{ headlist.tilt }}°</div>
-                <div class="gauge-group-box" style="justify-content: center;">
-                  <div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
-                    headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
-                  
-                </div>
-                <div class="gauge-group-box" style="justify-content: center;">
-                  <div class="gauge-group-box-text1" style="">右最大：<span class="gauge-group-box-text2">{{
-                    headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span></div>
-                </div>
-              </div>
-              <div style="width: 33%;position: relative;">
-                <div class="chart-title">俯仰角</div>
-                <div id="pitchChartId" style="width: 100%;height: 140px;"></div>
-                <div class="rotation-titles">{{ headlist.pitch }}°</div>
-                <div class="gauge-group-box" style="justify-content: center;">
-                  <div class="gauge-group-box-text1">俯最大：<span class="gauge-group-box-text2">{{
-                    headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
-                </div>
-                <div class="gauge-group-box" style="justify-content: center;">
-                  <div class="gauge-group-box-text1">仰最大：<span class="gauge-group-box-text2">{{
-                    headPoseMaxValues.pitchUpMax.toFixed(1) }}°</span></div>
-                </div>
-              </div>
-            </div>
-          
-          </div>
-          <!-- 足部压力模块 -->
-          <div class="module-card" style=" height:calc( 55% - 1px);overflow: hidden;">
-            <div style="display: flex;">
-              <div class="module-header">
-                <div class="module-title">
-                  <div class="module-title-bg">
-                    <!-- <img src="@/assets/svg/u125.svg" alt="" srcset="" style="margin-right: 5px;"> -->
-                    足部压力
-                  </div>
-                </div>
-                <div style="display: flex;align-items: center;">
-                  <!-- <img src="@/assets/refresh.png" title="重启足底压力板"
-                      @click="refreshClick('pressure')"
-                      alt="" style="margin-right: 5px;cursor: pointer; width: 14px;"> -->
-                  <div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
-                    pressureStatus }}</div>
-                </div>
-              </div>
-            </div>
-            <div style="
-              height: calc(100% - 40px);
-              display: flex;
-              align-items: center;
-              justify-content: center;">
-              <div class="foot-container" style="height:calc(100%) ">
-                <div class="foot-container-left" style="font-size: 18px;text-align: right;">
-                  <div style="width: 190px;">
-                    <span>左前足</span>
-                    <span class="foot-container-paddingcolor">{{ footPressure.left_front
-                    }}%</span>
-                  </div>
-                  <div class="foot-container-margintop" style="width: 190px;">
-                    <span>左后足</span>
-                    <span class="foot-container-paddingcolor">{{ footPressure.left_rear }}%</span>
-                  </div>
-                </div>
-                <div class="foot-container-content">
-                  <div style="display: flex;justify-content: center;margin-bottom: 8px;font-size: 20px;">
-                    <div>
-                      <span>左足</span>
-                    </div>
-                    <div class="foot-container-marginleft">
-                      <span>右足</span>
-                    </div>
-                  </div>
-                  <div style="position: relative;width: 100%;height:calc(100% - 80px) ;">
-                    <!-- <img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 100%;height: 100%;" alt=""> -->
-                    <div class="xline"></div>
-                    <div class="yline"></div>
-                  </div>
-                  <div
-                    style="display: flex;justify-content: center;font-size: 18px;width: 100%;">
-                    <div style="width: 215px;display: flex;align-items: center;">
-                      <div style="width:95px;">左足总压力</div>
-                      <div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.left_total
-                      }}%</div>
-                    </div>
-                    <div class="foot-container-marginleft" style="width: 215px;display: flex;align-items: center;">
-                      <div style="width:95px;">右足总压力</div>
-                      <div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.right_total
-                      }}%</div>
-                    </div>
-                  </div>
-                </div>
-                <div class="foot-container-right" style="font-size: 18px;">
-                  <div style="width: 190px;">
-                    <span>右前足</span>
-                    <span class="foot-container-paddingcolor">{{ footPressure.right_front
-                    }}%</span>
-                  </div>
-                  <div class="foot-container-margintop" style="width: 190px;">
-                    <span>右后足</span>
-                    <span class="foot-container-paddingcolor">{{ footPressure.right_rear
-                    }}%</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-          </div>
-        </div>
-
-        <div class="body-posture" style="width: 30%;display: flex;height:calc(100vh - 100px);
-          flex-wrap: wrap;
-          align-content: space-between;
-        ">
-          <!-- 基础信息模块 -->
-          <div class="module-card" style="height:calc( 45%);margin-bottom: 1px;">
-            <div style="display: flex;">
-              <div class="module-header">
-                <div class="module-title">
-                  <div class="module-title-bg">
-                    <!-- <img src="@/assets/svg/u164.svg" alt="" srcset="" style="margin-right: 5px;"> -->
-                    基础信息
-                  </div>
-                </div>
-                <el-icon class="edit-icon" style="width: 24px;height: 24px;font-size: 24px;" @click="editPatient">
-                  <Edit />
-                </el-icon>
-              </div>
-            </div>
-            <div class="basic-info-box">
-              <div class="basic-info-content">
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">姓名</div>
-                  <div class="basic-info-text2" style="color: #ffc907;">{{ patientInfo.name ||
-                    '-' }}</div>
-                </div>
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">测试者ID</div>
-                  <div class="basic-info-text2">{{ patientInfo.id || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">性别</div>
-                  <div class="basic-info-text2">{{ patientInfo.gender || '-' }}</div>
-                </div>
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">出生日期</div>
-                  <div class="basic-info-text2">{{ patientInfo.birth_date ? formatDate(patientInfo.birth_date) : '-' }}
-                  </div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">年龄</div>
-                  <div class="basic-info-text2">{{ calculateAge(patientInfo.birth_date) }}</div>
-                </div>
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">民族</div>
-                  <div class="basic-info-text2">{{ patientInfo.nationality || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">身高cm</div>
-                  <div class="basic-info-text2">{{ patientInfo.height || '-' }}</div>
-                </div>
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">体重kg</div>
-                  <div class="basic-info-text2">{{ patientInfo.weight || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">鞋码</div>
-                  <div class="basic-info-text2">{{ patientInfo.shoe_size || '-' }}</div>
-                </div>
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">电话号码</div>
-                  <div class="basic-info-text2">{{ patientInfo.phone || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-content-item">
-                  <div class="basic-info-text1">建档时间</div>
-                  <div class="basic-info-text2">{{ patientInfo.created_at ? formatDate(patientInfo.created_at) : '-' }}
-                  </div>
-                </div>
-                <div class="basic-info-content-item">
-
-                </div>
-              </div>
-            </div>
-
-          </div>
-          <!-- 视频模块 -->
-          <div class="module-card" style="height: calc( 55% - 1px)">
-            <div style="display: flex;">
-              <div class="module-header">
-                <div class="module-title">
-                  <div class="module-title-bg">
-                    <!-- <img src="@/assets/svg/u155.svg" alt="" srcset="" style="margin-right: 5px; "> -->
-                    视频
-                    <svg style="margin-left:10px;cursor: pointer;" @click="isBig = true" t="1760175912498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6796" width="16" height="16"><path d="M999.6 964.4L786.2 758.6c77.2-80.6 125-189.7 125-309.8C911.2 201.3 709.9 0 462.5 0S13.8 201.3 13.8 448.8s201.3 448.7 448.7 448.7c102.3 0 196.4-34.8 271.9-92.6l217.1 209.4c6.7 6.5 15.4 9.7 24 9.7 9.1 0 18.1-3.6 24.9-10.6 13.4-13.8 13-35.7-0.8-49zM83.1 448.8c0-209.2 170.2-379.4 379.4-379.4s379.4 170.2 379.4 379.4-170.2 379.4-379.4 379.4c-209.2-0.1-379.4-170.3-379.4-379.4z" p-id="6797" fill="#0099ff"></path><path d="M676.5 412.3H498.8V234.5c0-18.4-16.1-33.4-35.9-33.4S427 216 427 234.5v177.8H249.1c-18.4 0-33.4 16.1-33.4 35.9 0 19.9 14.9 35.9 33.4 35.9h177.8v177.8c0 18.4 16.1 33.4 35.9 33.4s35.9-14.9 35.9-33.4V484.1h177.8c18.4 0 33.4-16.1 33.4-35.9 0-19.9-14.9-35.9-33.4-35.9z" p-id="6798" fill="#0099ff"></path></svg>
-                  </div>
-                </div>
-                <div style="display: flex;align-items: center;">
-                  
-                  <!-- <img src="@/assets/refresh.png" title="重启足部监视相机"
-                    @click="refreshClick('camera')"
-                    alt="" style="margin-right: 5px;cursor: pointer; width: 14px;"> -->
-                  <div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div>
-                </div>
-              </div>
-            </div>
-            <div ref="videoImgRef" style="width: 100%;height: calc(100% - 47px); display: flex; gap: 4px;">
-              <div ref="camera1Ref" style="flex: 1; height: 100%; position: relative;">
-                <!-- <img :src="(cameraStatus === '已连接' && camera1ImgSrc) ? camera1ImgSrc : noImageSvg" alt="camera1"
-                  style="width: 100%; height: 100%; object-fit: contain; background:#323232;" /> -->
-                <div style="position:absolute; left:6px; top:6px; padding:2px 6px; font-size:12px; color:#fff; background:rgba(0,0,0,0.4); border-radius:4px;">
-                  相机1
-                </div>
-              </div>
-              <div ref="camera2Ref" style="flex: 1; height: 100%; position: relative;">
-                <!-- <img :src="(cameraStatus === '已连接' && camera2ImgSrc) ? camera2ImgSrc : noImageSvg" alt="camera2"
-                  style="width: 100%; height: 100%; object-fit: contain; background:#323232;" /> -->
-                <div style="position:absolute; left:6px; top:6px; padding:2px 6px; font-size:12px; color:#fff; background:rgba(0,0,0,0.4); border-radius:4px;">
-                  相机2
-                </div>
-              </div>
-            </div>
-            <!-- 使用img元素显示视频流（优化的Data URL方案） -->
-            
-          </div>
-        </div>
-      </div>
-    </div>
-    <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">
-            <div>用户ID:</div>{{ patientInfo.sessionId }}
-          </div>
-          <div class="dialog-title-item">
-            <div>姓名:{{ patientInfo.name }}</div>
-          </div>
-        </div>
-        <div>
-          <el-form :model="diagnosticForm" label-width="50px">
-            <el-form-item label="记录">
-              <el-input v-model="diagnosticForm.diagnosis_info" :rows="6" type="textarea" placeholder="请输入" />
-            </el-form-item>
-            <el-form-item label="处理">
-              <el-input v-model="diagnosticForm.treatment_info" :rows="6" type="textarea" placeholder="请输入" />
-            </el-form-item>
-            <el-form-item label="建议">
-              <el-input v-model="diagnosticForm.suggestion_info" :rows="6" type="textarea" placeholder="请输入" />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div style="display: flex;justify-content: flex-end;color: #ffffff;">测试医生：李四</div>
-      </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 type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('completed')">
-            保存
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-    <el-dialog class="tsDialog" v-model="dialogVisible" title="编辑基础信息" width="50%" :before-close="handleClose">
-      <div class="form-box" style="margin-top: 20px;">
-        <el-form ref="patientFormRef" :model="patientForm" :rules="formRules" label-width="100px" class="patient-form">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <el-form-item label="测试者ID" prop="testerId">
-                <el-input v-model="patientForm.id" disabled placeholder="请输入测试者ID" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="姓名" prop="name" required>
-                <el-input v-model="patientForm.name" placeholder="请输入" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="性别" prop="gender" required>
-                <el-select v-model="patientForm.gender" placeholder="请选择">
-                  <el-option label="男" value="男" />
-                  <el-option label="女" value="女" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="出生日期" prop="birth_date" required>
-                <el-date-picker v-model="patientForm.birth_date" type="date" placeholder="请选择" style="width: 100%"
-                  @change="calculateAge" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="年龄">
-                <el-input v-model="calculatedAge" placeholder="自动计算" readonly suffix-icon="Calendar" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="民族" prop="nationality">
-                <el-select v-model="patientForm.nationality" placeholder="请选择">
-                  <el-option v-for="item in nationalityOptions" :key="item" :label="item"
-                    :value="item" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="长期居住地" prop="residence">
-                <el-input v-model="patientForm.residence" placeholder="请输入" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="身高" prop="height" required>
-                <el-input v-model="patientForm.height" placeholder="请输入" clearable>
-                  <template #suffix>cm</template>
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="体重" prop="weight" required>
-                <el-input v-model="patientForm.weight" placeholder="请输入" clearable>
-                  <template #suffix>kg</template>
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="鞋码" prop="shoe_size">
-                <el-input v-model="patientForm.shoe_size" placeholder="请输入" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="电话号码" prop="phone" required>
-                <el-input v-model="patientForm.phone" placeholder="请输入" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="电子邮箱" prop="email">
-                <el-input v-model="patientForm.email" placeholder="请输入" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="职业" prop="occupation">
-                <el-select v-model="patientForm.occupation" placeholder="请选择">
-                  <el-option v-for="item in occupationOptions" :key="item" :label="item"
-                    :value="item" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="单位" prop="workplace">
-                <el-input v-model="patientForm.workplace" placeholder="请输入" clearable />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </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 type="primary" style="background: #0099ff;" @click="handleSave" :loading="saveLoading">
-            保存
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-
-
-    <el-dialog class="tsDialog" v-model="cameraDialogVisible" center title="相机参数设置" width="600"
-      :before-close="cameraHandleClose">
-      <div class="form-box" style="margin-top: 20px;">
-        <el-form :model="cameraForm" label-width="100px">
-          <div class="cameraFormTitle">足部相机</div>
-          <el-form-item label="序号">
-            <el-radio-group v-model="cameraForm.camera.device_index">
-              <el-radio :value="0">0</el-radio>
-              <el-radio :value="1">1</el-radio>
-              <el-radio :value="2">2</el-radio>
-              <el-radio :value="3">3</el-radio>
-              <el-radio :value="4">4</el-radio>
-              <el-radio :value="5">5</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <div class="cameraFormTitle">深度相机</div>
-            <el-form-item label="算法类型">
-            <el-radio-group v-model="cameraForm.femtobolt.algorithm_type">
-              <el-radio value="opencv">OpenCV(效率高)</el-radio>
-              <el-radio value="plt">Matplotlib（精度高）</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item label="距离范围">
-            <div >
-              <el-input v-model="cameraForm.femtobolt.depth_range_min" placeholder="请输入最小值" style="width: 216px;" />
-                <span> 到 </span>
-                <el-input v-model="cameraForm.femtobolt.depth_range_max" placeholder="请输入最大值"  style="width: 218px;"/>
-            </div>
-           
-          </el-form-item>
-
-          
-        </el-form>
-      </div>
-
-      
-      
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button style="background: #323232;border:1px solid #787878;color: #ffffff;"
-            @click="cameraDialogVisible = false">取消</el-button>
-          <el-button type="primary" style="background:#0099ff;" @click="cameraSubmit('cameraForm')">
-            保存
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-    <el-dialog class="historyDialogVisible" v-model="historyDialogVisible" center title="历史记录" width="100%">
-       <HistoryDashboard v-if="historyDialogVisible" :patientId="patientId"/>
-    </el-dialog>
-    <div v-if="isBig" style="position: fixed;top: 0;right: 0;
-    width: 100%;height: 100vh;z-index: 9999;background: red;border: 2px solid #b0b0b0">
-    <svg @click="isBig=false" style="position: absolute;right: 10px;top:10px;cursor: pointer;" t="1760175800150" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5743" width="24" height="24"><path d="M796 163.1L511.1 448l-285-285-63.9 64 285 285-285 285 63.8 63.8 285-285 285 285 63.8-63.8-285-285 285-285-63.8-63.9z" fill="#ffffff" p-id="5744"></path></svg>
-    <img :src="(camera1ImgSrc || camera2ImgSrc) || ''" alt="video"
-         style="position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; background:#323232;" />
-    </div>
- 
-  
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-import { useRouter, useRoute } from 'vue-router'
-import { io } from 'socket.io-client'
-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 HistoryDashboard from '@/views/PatientProfile.vue'
-const props = defineProps({
-  selectedPatient: {
-    required: false,
-    type: Object,
-    default: null
-  }
-})
-const isBig =ref(false)
-const authStore = useAuthStore()
-const router = useRouter()
-const route = useRoute()
-const isRecording = ref(false)
-const isConnected = ref(false)
-const rtspImgSrc = ref('')
-const camera1ImgSrc = ref('')
-const camera2ImgSrc = ref('')
-const depthCameraImgSrc = ref('') // 深度相机视频流
-const screenshotLoading = ref(false)
-const cameraDialogVisible =ref(false) // 设置相机参数弹框
-const contenGridRef =ref(null) // 实时检查整体box
-const wholeBodyRef = ref(null) // 身体姿态ref
-const videoImgRef =ref(null) // 视频流图片ref
-const camera1Ref = ref(null)
-const camera2Ref = ref(null)
-const historyDialogVisible = ref(false)
-// 录像相关变量
-let mediaRecorder = null
-let recordedChunks = []
-let recordingStream = null
-// 患者信息（从页面获取或通过API获取）
-const patientInfo = ref({
-  id: '',
-  name: '',
-  gender: '',
-  birth_date: '',
-  age: '',
-  height: '',
-  weight: '',
-  shoe_size: '',
-  phone: '',
-  nationality: '',
-  created_at: '',
-  sessionId: null // 检查记录ID，实际使用时应从路由或API获取
-})
-
-// WebSocket相关变量
-let socket = null
-let devicesSocket = null
-let cameraSocket = null
-let femtoboltSocket = null
-let imuSocket = null
-let pressureSocket = null
-let restartSocket = null
-let frameCount = 0
-
-// 后端服务器地址配置
-const BACKEND_URL = getBackendUrl()
-const resDialogVisible = ref(false)
-const reshandleClose = () => {
-  resDialogVisible.value = false
-}
-const cameraHandleClose = () => { 
-  cameraDialogVisible.value = false
-}
-const dialogVisible = ref(false)
-const handleClose = () => {
-  dialogVisible.value = false
-}
-// 表单引用
-const patientFormRef = ref()
-// 表单数据
-const saveLoading = ref(false)
-const patientForm = ref({
-  id: '',
-  name: '',
-  gender: '',
-  birth_date: '',
-  nationality: '',
-  residence: '',
-  height: '',
-  weight: '',
-  shoe_size: '',
-  phone: '',
-  occupation: '',
-  workplace: '',
-  email: ''
-})
-const occupationOptions = ref(["学生", "教师", "医生", "护士", "工程师", "程序员", "设计师", 
-"会计师", "律师", "警察", "消防员", "军人", "公务员", "销售", "市场营销", 
-"人力资源", "行政", "财务", "咨询师", "建筑师", "科研人员", "记者", "编辑", 
-"作家", "艺术家", "音乐家", "演员", "导演", "摄影师", "厨师", "服务员", 
-"司机", "快递员", "外卖员", "农民", "工人", "电工", "焊工", "机械师", 
-"飞行员", "空乘", "船员", "导游", "翻译", "心理咨询师", "社会工作者", 
-"运动员", "教练", "经纪人", "投资人", "企业家", "自由职业者"])
-const nationalityOptions = ref(["汉族", "满族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族", 
-"布依族", "朝鲜族", "侗族", "瑶族", "白族", "土家族", "哈尼族", "哈萨克族", "傣族", 
-"黎族", "傈僳族", "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族", 
-"景颇族", "柯尔克孜族", "土族", "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族", 
-"毛南族", "仡佬族", "锡伯族", "阿昌族", "普米族", "塔吉克族", "怒族", "乌孜别克族", 
-"俄罗斯族", "鄂温克族", "德昂族", "保安族", "裕固族", "京族", "塔塔尔族", "独龙族", 
-"鄂伦春族", "赫哲族", "门巴族", "珞巴族", "基诺族"])
-const diagnosticForm = ref({
-  diagnosis_info: '',
-  treatment_info: '',
-  suggestion_info: ''
-})
-const cameraForm = ref({ // 相机参数
-  camera:{
-    device_index: '',  // 序号
-  },
-  femtobolt:{
-    algorithm_type: '', // 算法类型
-    depth_mode: '', // 相机模式
-    depth_range_min: '', // 距离范围最小值
-    depth_range_max: '', // 距离范围最大值
-  },
-  imu:{
-    port: '', // IMU串口号
-  }
-})
-const calculatedAge = ref(null)
-//修改
-
-// 模拟历史数据
-const historyData = ref([])
-const chartoption = ref({
-  backgroundColor: '#242424',
-  grid: { top: 0, right: 0, bottom: 0, left: 0 },
-  animation: false,
-  series: [
-    {
-      type: 'gauge',
-      radius: '180%',
-      center: ['50%', '91%'],
-      startAngle: 180,
-      endAngle: 0,
-      min: -90,
-      max: 90,
-      splitNumber: 10,
-      itemStyle: {
-        color: '#58D9F9',
-        shadowColor: 'rgba(0,138,255,0.45)',
-        shadowBlur: 10,
-        shadowOffsetX: 2,
-        shadowOffsetY: 2
-      },
-      progress: {
-        show: false,
-      },
-      pointer: {
-        length: '85%',
-        width: 2,
-        offsetCenter: [0, '5%'],
-        itemStyle: {
-          color: '#ff8d00'
-        },
-      },
-      anchor: {
-        show: true,
-        showAbove: true,
-        size: 18,
-        icon: 'circle',
-        itemStyle: {
-          borderWidth: 3,
-          color: '#ff8d00',
-          borderColor: '#ff8d00',
-        }
-      },
-      axisLine: {
-        roundCap: true,
-        lineStyle: {
-          width: 3,
-          color: [[1, '#0089ff']]
-        }
-      },
-      axisTick: {
-        splitNumber: 2,
-        lineStyle: {
-          width: 2,
-          color: '#ffffff'
-        }
-      },
-      splitLine: {
-        length: 12,
-        lineStyle: {
-          width: 4,
-          color: '#0089ff'
-        }
-      },
-      axisLabel: {
-        //刻度颜色
-        distance: 10,
-        color: '#ffffff',
-        fontSize: 10
-      },
-      title: {
-        show: false
-      },
-      detail: {
-        show: false,
-      },
-      data: [
-        {
-          value: 0
-        }
-      ]
-    }
-  ]
-})
-// 四个设备的独立连接状态
-const cameraStatus = ref('未连接')        // 相机设备状态
-const femtoboltStatus = ref('未连接')     // 深度相机(FemtoBolt)设备状态
-const imuStatus = ref('未连接')           // IMU设备状态
-const pressureStatus = ref('未连接')      // 压力传感器设备状态
-
-// 为了向后兼容，保留videoStatus但映射到cameraStatus
-const videoStatus = computed(() => cameraStatus.value)
-// 计时器状态
-const seconds = ref(0);
-const isRunning = ref(false);
-const timerId = ref(null);
-const blinkState = ref(false);
-const formattedTime = computed(() => {
-
-  const mins = Math.floor(seconds.value / 60);
-  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;
-
-  isRunning.value = true;
-  seconds.value = 0;
-
-  // 使用高性能计时器
-  const startTime = Date.now();
-
-  timerId.value = setInterval(() => {
-    // 计算经过的时间（毫秒）
-    const elapsed = Date.now() - startTime;
-    // 转换为秒并四舍五入
-    seconds.value = Math.round(elapsed / 1000);
-
-    // 检测时长超过10分钟（1800秒）自动停止检测
-    if (seconds.value >= 1800) {
-      console.log('⏰ 检测时长超过30分钟，自动停止检测');
-      ElMessage.warning('检测时长已达到30分钟，自动停止检测');
-      stopRecord()
-      return;
-    }
-
-    // 触发闪烁效果
-    blinkState.value = !blinkState.value;
-  }, 1000);
-};
-// 重置计时器
-const resetTimer = () => {
-  if (timerId.value) {
-    clearInterval(timerId.value);
-    timerId.value = null;
-  }
-  isRunning.value = false;
-  seconds.value = 0;
-  blinkState.value = false;
-};
-const validateForm = async () => {
-  try {
-    await patientFormRef.value.validate()
-    return true
-  } catch (error) {
-    ElMessage.error('请完善必填信息')
-    return false
-  }
-}
-//保存基础信息
-const handleSave = async () => {
-  if (!(await validateForm())) return
-  saveLoading.value = true
-  try {
-    await savePatient()
-    ElMessage.success('修改成功')
-    dialogVisible.value = false
-    saveLoading.value = false
-    loadPatientInfo()
-  } catch (error) {
-    ElMessage.error('修改失败：' + error.message)
-    saveLoading.value = false
-  } finally {
-    saveLoading.value = false
-  }
-}
-const savePatient = async () => {
-  const patientData = {
-    id: patientForm.value.id,
-    name: patientForm.value.name,
-    gender: patientForm.value.gender,
-    age: calculatedAge.value,
-    birth_date: patientForm.value.birth_date,
-    height: patientForm.value.height,
-    weight: patientForm.value.weight,
-    shoe_size: patientForm.value.shoe_size,
-    phone: patientForm.value.phone,
-    occupation: patientForm.value.occupation,
-    email: patientForm.value.email,
-    nationality: patientForm.value.nationality,
-    residence: patientForm.value.residence,
-    workplace: patientForm.value.workplace
-  }
-  try {
-    const response = await patientAPI.updatePatient(patientForm.value.id, patientData)
-    if (response.success) {
-      return response.data
-    } else {
-      throw new Error(response.message || '修改失败')
-    }
-  } catch (error) {
-    throw error
-  }
-}
-const isPreventCombo = ref(false)
-function routeTo(path = '/') {
-  if (isPreventCombo.value === true) {  
-    ElMessage.warning(`请勿连续点击回退按钮！`)
-    return
-  }
-  isPreventCombo.value = true
-  setTimeout(() => {
-    isPreventCombo.value = false
-  }, 2000)
-  router.push(path)
-}
-function cameraUpdate() {  // 相机设置数据更新弹框
-  cameraForm.value = { // 相机参数
-    camera:{
-      device_index: '',  // 序号
-    },
-    femtobolt:{
-      algorithm_type: '', // 算法类型
-      depth_mode: '', // 相机模式
-      depth_range_min: '', // 距离范围最小值
-      depth_range_max: '', // 距离范围最大值
-    },
-    imu:{
-      port: '', // IMU串口号
-    }
-  }
-  // 加载相机参数信息
-  getDevicesInit()
- 
-}
-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
-}
-// 返回按钮逻辑
-const handleBack = () => {
-  console.log('返回上一页')
-}
-const editPatient = () => {
-  // 修改患者信息
-  patientForm.value = JSON.parse(JSON.stringify(patientInfo.value))
-  if (patientForm.value.birth_date) {
-    calculatedAge.value = calculateAge(patientForm.value.birth_date)
-  }
-  dialogVisible.value = true
-}
-const tempInfo = ref({})
-// WebSocket连接函数
-function connectWebSocket() {
-  try {
-    console.log('正在连接到', BACKEND_URL)
-
-    // 如果已有连接，先断开
-    if (socket) {
-      socket.disconnect()
-      socket = null
-    }
-    if (cameraSocket) {
-      cameraSocket.disconnect()
-      cameraSocket = null
-    }
-    if (femtoboltSocket) {
-      femtoboltSocket.disconnect()
-      femtoboltSocket = null
-    }
-    if (imuSocket) {
-      imuSocket.disconnect()
-      imuSocket = null
-    }
-    if (pressureSocket) {
-      pressureSocket.disconnect()
-      pressureSocket = null
-    }
-    if (restartSocket) {
-      restartSocket.disconnect()
-      restartSocket = null
-    }
-
-    
-    // 创建主Socket.IO连接
-    socket = io(BACKEND_URL, {
-      transports: ['websocket', 'polling'],  // 只使用polling，与后端保持一致
-      timeout: 10000,
-      forceNew: true,
-      reconnection: true,
-      reconnectionAttempts: 5,
-      reconnectionDelay: 1000
-    })
-
-    // 创建统一设备命名空间连接
-    devicesSocket = io(BACKEND_URL + '/devices', {
-      transports: ['websocket', 'polling'],  // 只使用polling，与后端保持一致
-      timeout: 10000,
-      forceNew: true
-    })
-    
-    // 为了保持兼容性，将统一的设备socket赋值给各个设备变量
-    cameraSocket = devicesSocket
-    femtoboltSocket = devicesSocket
-    imuSocket = devicesSocket
-    pressureSocket = devicesSocket
-    restartSocket = devicesSocket
-    // 主连接事件
-    socket.on('connect', () => {
-      console.log('✅ 主WebSocket连接成功！Socket ID:', socket.id)
-      isConnected.value = true
-      //绘制头部仪表盘
-      initchart()
-    })
-
-    socket.on('connect_error', (error) => {
-      console.error('❌ 主连接失败:', error.message)
-      isConnected.value = false      
-    })
-
-    socket.on('disconnect', (reason) => {
-      console.log('⚠️ 主连接断开:', reason)
-      isConnected.value = false      
-    })
-
-    socket.on('reconnect', (attemptNumber) => {
-      console.log('🔄 主WebSocket重连成功，尝试次数:', attemptNumber)
-      isConnected.value = true
-    })
-
-    socket.on('reconnect_attempt', (attemptNumber) => {
-      console.log('🔄 正在尝试重连主连接...', attemptNumber)
-    })
-
-    socket.on('reconnect_failed', () => {
-      console.error('❌ 主WebSocket重连失败')
-      isConnected.value = false
-    })
-
-
-
-    socket.on('error', (error) => {
-      console.error('❌ 主Socket错误:', error)
-    })
-
-    // 统一设备命名空间事件监听
-    devicesSocket.on('connect', () => {
-      console.log('🔗 设备命名空间连接成功')
-      
-      // 连接成功后订阅所有设备数据
-      devicesSocket.emit('subscribe_device', { device_type: 'camera' })
-      devicesSocket.emit('subscribe_device', { device_type: 'femtobolt' })
-      devicesSocket.emit('subscribe_device', { device_type: 'imu' })
-      devicesSocket.emit('subscribe_device', { device_type: 'pressure' })
-      
-      // 设备连接成功后启动数据推送
-      startDeviceDataPush()
-    })
-    
-    devicesSocket.on('disconnect', () => {
-      console.log('🔗 设备命名空间断开连接')
-      // 断开连接时重置所有设备状态
-      cameraStatus.value = '未连接'
-      femtoboltStatus.value = '未连接'
-      imuStatus.value = '未连接'
-      pressureStatus.value = '未连接'
-    })
-    
-    devicesSocket.on('connect_error', (error) => {
-      console.error('❌ 设备命名空间连接失败:', error.message)
-    })
-    
-     // 监听设备重启消息事件
-    devicesSocket.on('device_restart_message', (data) => {   
-      ElMessage.success({
-      message: data.message,
-      duration: 5000
-    })         
-    })
-
-    // 监听各设备数据事件
-    devicesSocket.on('camera_frame', (data) => {
-      frameCount++
-      // 区分 camera1 / camera2 帧
-      const devId = (data && data.device_id) ? String(data.device_id).toLowerCase() : ''
-      if (!tempInfo.value.camera_frames) {
-        tempInfo.value.camera_frames = {}
-      }
-      if (devId === 'camera2') {
-        tempInfo.value.camera_frames['camera2'] = data
-        displayCameraFrameById('camera2', data.image)
-      } else {
-        // 默认 camera1（兼容旧逻辑 device_id 为空）
-        tempInfo.value.camera_frames['camera1'] = data
-        displayCameraFrameById('camera1', data.image)
-      }
-    })  
-
-    devicesSocket.on('femtobolt_frame', (data) => {
-      tempInfo.value.femtobolt_frame = data
-      displayDepthCameraFrame(data.depth_image || data.image)
-    })    
-    
-    devicesSocket.on('imu_data', (data) => {
-      tempInfo.value.imu_data = data
-      handleIMUData(data)
-    })
-    
-    devicesSocket.on('pressure_data', (data) => {
-       tempInfo.value.pressure_data = data
-       handlePressureData(data)
-     })
-     
-     // 监听测试状态事件
-     devicesSocket.on('test_status', (data) => {
-       console.log('📊 测试状态:', data)
-       if (data.status === 'started') {
-         console.log('✅ 设备数据推送已开始')
-       } else if (data.status === 'stopped') {
-         console.log('⏹️ 设备数据推送已停止')
-       } else if (data.status === 'error') {
-         console.error('❌ 设备数据推送错误:', data.message)
-       }
-     })
-     
-     // 监听各设备独立连接状态事件
-     devicesSocket.on('device_status', (data) => {
-       console.log('📱 设备状态更新:', data)
-       const { device_type, status } = data
-       const statusText = status ? '已连接' : '未连接'
-       
-       switch (device_type) {
-         case 'camera':
-           cameraStatus.value = statusText
-           console.log(`📷 相机状态: ${statusText}`)
-           break
-         case 'femtobolt':
-           femtoboltStatus.value = statusText
-           console.log(`🔍 深度相机状态: ${statusText}`)
-           break
-         case 'imu':
-           imuStatus.value = statusText
-           console.log(`🧭 IMU状态: ${statusText}`)
-           break
-         case 'pressure':
-           pressureStatus.value = statusText
-           console.log(`⚖️ 压力传感器状态: ${statusText}`)
-           break
-         default:
-           console.warn('⚠️ 未知设备类型:', device_type)
-       }
-     })
-
-  } catch (error) {
-    console.error('💥 连接异常:', error.message)
-    isConnected.value = false
-  }
-}
-
-// 启动设备数据推送
-function startDeviceDataPush() {
-  if (devicesSocket && devicesSocket.connected) {
-    console.log('🚀 发送启动设备数据推送请求...')
-    devicesSocket.emit('start_push_data')
-  } else {
-    console.warn('⚠️ 设备Socket未连接，无法启动设备数据推送')
-  }
-}
-
-// 断开WebSocket连接函数
-function disconnectWebSocket() {
-  try {
-    if (socket) {
-      if (socket.connected) {
-        console.log('正在主动断开WebSocket连接...')
-        
-        // 移除所有事件监听器
-        socket.removeAllListeners()
-        
-        // 断开主连接
-        socket.disconnect()
-        
-        console.log('✅ 主WebSocket连接已断开')
-      }
-      socket = null
-      isConnected.value = false
-    }
-    
-    // 断开统一设备命名空间连接
-    if (devicesSocket) {
-      if (devicesSocket.connected) {
-        // 取消订阅所有设备
-        try {
-          devicesSocket.emit('unsubscribe_device', { device_type: 'camera' })
-          devicesSocket.emit('unsubscribe_device', { device_type: 'femtobolt' })
-          devicesSocket.emit('unsubscribe_device', { device_type: 'imu' })
-          devicesSocket.emit('unsubscribe_device', { device_type: 'pressure' })
-        } catch (e) {
-          console.warn('取消设备订阅时出错:', e)
-        }
-        
-        // 移除所有事件监听器
-        devicesSocket.removeAllListeners()
-        
-        // 断开连接
-        devicesSocket.disconnect()
-        
-        console.log('🔗 统一设备命名空间连接已断开')
-      }
-      
-      devicesSocket = null
-      cameraSocket = null
-      femtoboltSocket = null
-      imuSocket = null
-      pressureSocket = null
-      restartSocket = null
-    }
-    
-    // 重置所有设备状态
-    cameraStatus.value = '未连接'
-    femtoboltStatus.value = '未连接'
-    imuStatus.value = '未连接'
-    pressureStatus.value = '未连接'
-    
-  } catch (error) {
-    console.warn('断开WebSocket连接时出错:', error)
-  }
-}
-
-// WebSocket重连函数
-function reconnectWebSocket() {
-  console.log('开始重新连接WebSocket...')
-  
-  // 先断开现有连接
-  disconnectWebSocket()
-  
-  // 延迟一段时间后重新连接
-  setTimeout(() => {
-    connectWebSocket()
-    console.log('WebSocket重连完成')
-  }, 1000)
-}
-
-
-
-
-// 简单的帧显示函数
-function displayFrame(base64Image) {
-  // 兼容旧调用：默认作为 camera1 更新
-  displayCameraFrameById('camera1', base64Image)
-}
-
-function displayCameraFrameById(deviceId, base64Image) {
-  if (base64Image && base64Image.length > 0) {
-    const url = 'data:image/jpeg;base64,' + base64Image
-    if (String(deviceId).toLowerCase() === 'camera2') {
-      camera2ImgSrc.value = url
-    } else {
-      camera1ImgSrc.value = url
-      // 旧变量保留（避免其它位置引用出错）
-      rtspImgSrc.value = url
-    }
-  } else {
-    console.warn('⚠️ 收到空的视频帧数据')
-  }
-}
-
-// 深度相机帧显示函数
-function displayDepthCameraFrame(base64Image) {
-  if (base64Image && base64Image.length > 0) {
-    depthCameraImgSrc.value = 'data:image/jpeg;base64,' + base64Image
-  } else {
-    console.warn('⚠️ 收到空的深度相机帧数据')
-  }
-}
-
-
-// 头部姿态最值跟踪数据
-const headPoseMaxValues = ref({
-  rotationLeftMax: 0,    // 旋转-左旋最大值
-  rotationRightMax: 0,   // 旋转-右旋最大值
-  tiltLeftMax: 0,        // 倾斜-左倾最大值
-  tiltRightMax: 0,       // 倾斜-右倾最大值
-  pitchUpMax: 0,         // 俯仰-上仰最大值
-  pitchDownMax: 0        // 俯仰-下俯最大值
-})
-
-// 头部姿态历史最值记录数组
-const headPoseHistory = ref([])
-const headPoseData = ref({})
-
-// IMU更新节流与抖动阈值（降低频繁DOM与图表更新导致的卡顿）
-let lastIMUUpdateTs = 0
-const IMU_MIN_INTERVAL_MS = 33 // 约30Hz
-let lastIMUValues = { rotation: null, tilt: null, pitch: null }
-const IMU_CHANGE_EPS = 0.1 // 小于0.1°的变化忽略
-
-
-// 处理IMU头部姿态数据
-function handleIMUData(data) {
-  try {
-    if (!data) return
-  
-    // 兼容两种载荷结构：
-    // 1) { rotation, tilt, pitch }
-    // 2) { head_pose: { rotation, tilt, pitch } }
-    const rotation = (data.rotation ?? (data.head_pose && data.head_pose.rotation))
-    const tilt = (data.tilt ?? (data.head_pose && data.head_pose.tilt))
-    const pitch = (data.pitch ?? (data.head_pose && data.head_pose.pitch))
-
-    if (rotation === undefined || tilt === undefined || pitch === undefined) {
-      return
-    }
-    headlist.value.rotation = rotation // 旋转角度
-    headlist.value.tilt = tilt // 倾斜角度
-    headlist.value.pitch = pitch // 俯仰角度
-    const now = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now()
-
-    // 若距离上次更新时间很短且变化不明显，则跳过避免频繁DOM更新
-    const tooSoon = (now - lastIMUUpdateTs) < IMU_MIN_INTERVAL_MS
-    const notSignificant = (
-      lastIMUValues.rotation !== null && Math.abs(rotation - lastIMUValues.rotation) < IMU_CHANGE_EPS &&
-      lastIMUValues.tilt !== null && Math.abs(tilt - lastIMUValues.tilt) < IMU_CHANGE_EPS &&
-      lastIMUValues.pitch !== null && Math.abs(pitch - lastIMUValues.pitch) < IMU_CHANGE_EPS
-    )
-    if (tooSoon && notSignificant) return
-
-    lastIMUUpdateTs = now
-    lastIMUValues = { rotation, tilt, pitch }
-
-    const rVal = Math.round(rotation * 10) / 10
-    const pVal = Math.round(pitch * 10) / 10
-    const tVal = Math.round(tilt * 10) / 10
-
-    if (rotationCharts && !rotationCharts.isDisposed()) {
-      try {
-        rotationCharts.setOption({
-          series: [{ data: [{ value: rVal }] }]
-        })
-      } catch (e) {
-        console.warn('rotationCharts setOption error:', e);
-      }
-    }
-    if (pitchCharts && !pitchCharts.isDisposed()) {
-      try {
-        pitchCharts.setOption({
-          series: [{ data: [{ value: pVal }] }]
-        })
-      } catch (e) {
-        console.warn('pitchCharts setOption error:', e);
-      }
-    }
-    if (tiltCharts && !tiltCharts.isDisposed()) {
-      try {
-        tiltCharts.setOption({
-          series: [{ data: [{ value: tVal }] }]
-        })
-      } catch (e) {
-        console.warn('tiltCharts setOption error:', e);
-      }
-    }
-
-    // 更新最值跟踪逻辑使用原始数值（不做四舍五入）
-    updateHeadPoseMaxValues({ rotation, tilt, pitch })
-  } catch (error) {
-    console.error('❌ 处理IMU数据失败:', error)
-  }
-}
-
-// 更新头部姿态最值
-function updateHeadPoseMaxValues(headPose) {
-  try {
-    // 更新旋转角最值
-    if (headPose.rotation < 0) {
-      // 左旋（负值），取绝对值的最大值
-      headPoseMaxValues.value.rotationLeftMax = Math.max(
-        headPoseMaxValues.value.rotationLeftMax,
-        Math.abs(headPose.rotation)
-      )
-    } else if (headPose.rotation > 0) {
-      // 右旋（正值）
-      headPoseMaxValues.value.rotationRightMax = Math.max(
-        headPoseMaxValues.value.rotationRightMax,
-        headPose.rotation
-      )
-    }
-
-    // 更新倾斜角最值
-    if (headPose.tilt < 0) {
-      // 左倾（负值），取绝对值的最大值
-      headPoseMaxValues.value.tiltLeftMax = Math.max(
-        headPoseMaxValues.value.tiltLeftMax,
-        Math.abs(headPose.tilt)
-      )
-    } else if (headPose.tilt > 0) {
-      // 右倾（正值）
-      headPoseMaxValues.value.tiltRightMax = Math.max(
-        headPoseMaxValues.value.tiltRightMax,
-        headPose.tilt
-      )
-    }
-
-    // 更新俯仰角最值
-    if (headPose.pitch < 0) {
-      // 下俯（负值），取绝对值的最大值
-      headPoseMaxValues.value.pitchDownMax = Math.max(
-        headPoseMaxValues.value.pitchDownMax,
-        Math.abs(headPose.pitch)
-      )
-    } else if (headPose.pitch > 0) {
-      // 上仰（正值）
-      headPoseMaxValues.value.pitchUpMax = Math.max(
-        headPoseMaxValues.value.pitchUpMax,
-        headPose.pitch
-      )
-    }
-
-  } catch (error) {
-    console.error('❌ 更新头部姿态最值失败:', error)
-  }
-}
-
-// 清零最值并开始跟踪
-function clearAndStartTracking() {
-  try {
-    // 重置所有最值为0
-    headPoseMaxValues.value = {
-      rotationLeftMax: 0,
-      rotationRightMax: 0,
-      tiltLeftMax: 0,
-      tiltRightMax: 0,
-      pitchUpMax: 0,
-      pitchDownMax: 0
-    }
-  } catch (error) {
-    ElMessage.error('清零失败')
-  }
-}
-
-// 保存当前最值到历史记录
-function saveMaxValuesToHistory() {
-  try {
-    // 创建当前最值的副本
-    const currentMaxValues = {
-      id: headPoseHistory.value.length + 1,
-      rotationLeftMax: Number(headPoseMaxValues.value.rotationLeftMax.toFixed(1)),
-      rotationRightMax: Number(headPoseMaxValues.value.rotationRightMax.toFixed(1)),
-      tiltLeftMax: Number(headPoseMaxValues.value.tiltLeftMax.toFixed(1)),
-      tiltRightMax: Number(headPoseMaxValues.value.tiltRightMax.toFixed(1)),
-      pitchUpMax: Number(headPoseMaxValues.value.pitchUpMax.toFixed(1)),
-      pitchDownMax: Number(headPoseMaxValues.value.pitchDownMax.toFixed(1)),
-      timestamp: new Date().toLocaleString()
-    }
-
-    // 添加到历史记录
-    headPoseHistory.value.push(currentMaxValues)
-
-
-    // console.log('💾 头部姿态最值已保存:', currentMaxValues)
-    // ElMessage.success(`头部姿态最值已保存（第${currentMaxValues.id}组）`)
-
-    // 更新历史数据表格（如果存在的话）
-    updateHistoryTable()
-  } catch (error) {
-    // console.error('❌ 保存最值失败:', error)
-    ElMessage.error('保存最值失败')
-  }
-}
-
-// 更新历史数据表格
-function updateHistoryTable() {
-  try {
-    // 将头部姿态最值数据合并到现有的历史数据中
-    if (headPoseHistory.value.length > 0) {
-      const latestData = headPoseHistory.value[headPoseHistory.value.length - 1]
-
-      // 更新historyData数组，添加头部姿态最值数据
-      const newHistoryItem = {
-        id: latestData.id,
-        rotLeft: latestData.rotationLeftMax,
-        rotRight: latestData.rotationRightMax,
-        tiltLeft: latestData.tiltLeftMax,
-        tiltRight: latestData.tiltRightMax,
-        pitchDown: latestData.pitchDownMax,
-        pitchUp: latestData.pitchUpMax,
-        timestamp: latestData.timestamp
-      }
-      // 如果historyData数组存在，则添加新数据
-      if (historyData.value) {
-        historyData.value.push(newHistoryItem)
-      }
-      historyData.value.sort((a, b) => b.id - a.id);
-      console.log('📋 历史数据表格已更新')
-    }
-  } catch (error) {
-    console.error('❌ 更新历史数据表格失败:', error)
-  }
-}
-const footPressure = ref({
-  left_front: '',
-  left_rear: '',
-  right_front: '',
-  right_rear: '',
-  left_total: '',
-  right_total: '',
-  total_pressure: ''
-})
-const footImgSrc = ref('')
-// 处理压力传感器足部压力数据
-function handlePressureData(data) {
-  try {
-    if (data && data.foot_pressure) {
-      const pressureData = data.foot_pressure
-
-      // 更新足部压力数据
-      // 显示分区压力值
-      if (pressureData.pressure_zones) {
-        footPressure.value = pressureData.pressure_zones
-      }
-   
-
-      // 处理压力图片
-      if (pressureData.pressure_image) {
-        // console.log('  📊 接收到压力分布图片 (base64格式)')
-        // 这里可以将图片显示在界面上
-        if (pressureData.pressure_image && pressureData.pressure_image.length > 0) {
-          footImgSrc.value = pressureData.pressure_image
-        } else {
-          console.warn('⚠️ 收到空的压力传感器数据图')
-        }
-      }
-    }
-  } catch (error) {
-    console.error('❌ 处理压力传感器数据失败:', error)
-  }
-}
-
-
-async function handleDiagnosticInfo(status) {
-  try {
-    // 检查是否有活跃的会话ID
-    if (!patientInfo.value.sessionId) {
-      throw new Error('缺少会话Id')
-    }
-    // 调用后端API采集检测数据
-    const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/save-info`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        diagnosis_info: diagnosticForm.diagnosis_info,
-        treatment_info: diagnosticForm.treatment_info,
-        suggestion_info: diagnosticForm.suggestion_info,
-        status: status,
-        session_id: patientInfo.value.sessionId,
-      })
-    })
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-
-    const result = await response.json()
-    if (result.success) {
-      // 显示成功消息
-      ElMessage.success({
-        message: status + '诊断信息成功',
-        duration: 5000
-      })
-      
-    } else {
-      throw new Error(result.message || '诊断信息失败')
-    }
-  } catch (error) {
-    ElMessage.error({
-      message: errorMessage,
-      duration: 5000
-    })
-    
-  } finally {
-    
-  }
-}
-
-// 保存检测数据
-async function saveDetectionData() {
-  console.log(tempInfo.value)  
-  if (screenshotLoading.value) return
-
-  try {
-    screenshotLoading.value = true
-    // 显示保存进度
-    ElMessage.info('正在保存检测截图数据...')
-
-    // 检查是否有活跃的会话ID
-    if (!patientInfo.value.sessionId) {
-      throw new Error('请先开始检测再进行数据保存')
-    }
-    const base64 = 'data:image/jpeg;base64,'
-   
-    let body_image = ""
-    if(tempInfo.value.femtobolt_frame != null 
-    && tempInfo.value.femtobolt_frame.depth_image != null){
-      body_image = base64 + tempInfo.value.femtobolt_frame.depth_image       
-    }
-
-    let pressure_image = ""
-    let foot_data = ""
-    if(tempInfo.value.pressure_data != null 
-    && tempInfo.value.pressure_data.foot_pressure != null
-    && tempInfo.value.pressure_data.foot_pressure.pressure_image != null){
-      pressure_image = tempInfo.value.pressure_data.foot_pressure.pressure_image 
-      foot_data = tempInfo.value.pressure_data.foot_pressure.pressure_zones
-    }
-    let foot_image=""
-    if(tempInfo.value.camera_frame != null 
-    && tempInfo.value.camera_frame.image != null ){
-      foot_image=base64 + tempInfo.value.camera_frame.image
-    }
-
-    let head_pose={}
-    if(tempInfo.value.imu_data != null ){
-      head_pose=tempInfo.value.imu_data
-    }
-    if(headPoseMaxValues !=null){
-      head_pose.headPoseMaxValues = headPoseMaxValues.value
-    }
-    
-    let screen_location = contenGridRef.value.getBoundingClientRect()
-    // 调用后端API保存截图
-    const result = await sendDetectionData({     
-
-      session_id: patientInfo.value.sessionId,
-      patient_id: patientInfo.value.id,
-
-      head_pose:head_pose,
-      body_pose:null,
-      body_image: body_image,
-
-      foot_data:foot_data,
-      foot_image:foot_image,
-      foot_data_image:pressure_image,     
-      screen_image:null
- 
-    })    
-    
-    // 显示成功消息和文件路径
-    ElMessage.success({
-      message: `检测数据保存成功！`,
-      duration: 5000
-    })
-
-
-  } catch (error) {
-    console.error('❌ 检测数据保存失败:', error)
-
-    // 根据错误类型显示不同的错误消息
-    let errorMessage = '检测数据保存失败'
-    if (error.message.includes('网络连接失败')) {
-      errorMessage = '网络连接失败，请检查后端服务是否正常运行'
-    } else if (error.message.includes('服务器错误')) {
-      errorMessage = error.message
-    } else if (error.message.includes('未找到检测数据区域')) {
-      errorMessage = '检测数据区域不存在，请刷新页面重试'
-    } else if (error.message.includes('未找到检测数据')) {
-      errorMessage = '检测数据不存在，请刷新页面重试'
-    } else {
-      errorMessage = `检测数据保存失败: ${error.message}`
-    }
-
-    ElMessage.error({
-      message: errorMessage,
-      duration: 5000
-    })
-
-  } finally {
-    screenshotLoading.value = false
-  }
-}
-
-// 调用后端API保存检测数据
-async function sendDetectionData(data) {
-  try {
-    const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`
-      , {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(data)
-      })
-
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-
-    const result = await response.json()
-
-    if (result.success) {
-      console.log('📸 截图保存成功:', result.filepath)
-      return result
-    } else {
-      throw new Error(result.message || '保存失败')
-    }
-
-  } catch (error) {
-    console.error('💥 保存截图API调用失败:', error)
-
-    if (error.name === 'TypeError' && error.message.includes('fetch')) {
-      throw new Error('网络连接失败，请检查后端服务是否正常运行')
-    } else if (error.message.includes('HTTP')) {
-      throw new Error(`服务器错误: ${error.message}`)
-    } else {
-      throw new Error(error.message)
-    }
-  }
-}
-
-// 处理开始/停止按钮点击
-async function handleStartStop() {
-  if (isRecording.value) {
-    // 停止录制视频
-    await stopRecord()
-  } else {    
-    // 开始录制视频
-    await startRecord()
-  }
-}
-// 开始检测
-async function startDetection() {
-  try {
-    console.log('🚀 正在开始检测...')      
-   
-    // 调用后端API开始检测
-    const response = await fetch(`${BACKEND_URL}/api/detection/start`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        patient_id: route.params.id,
-        // 可以添加其他检测参数
-        creator_id: creatorId.value,        
-      })
-    })
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-    const result = await response.json()
-    if (result.success) {
-      console.log('✅ 检测开始成功')
-      // 保存会话ID和检测开始时间
-      patientInfo.value.sessionId = result.session_id
-    } else {
-      throw new Error(result.message || '开始检测失败')
-    }
-
-  } catch (error) {
-    console.error('💥 开始检测失败:', error)
-    ElMessage.error(`开始检测失败: ${error.message}`)
-    throw error
-  }
-}
-
-// 停止检测
-async function stopDetection() {
-  try {
-    // 计算检测持续时间
-    let duration = 0
-   // 调用后端API停止检测
-    const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        duration: duration
-      })
-    })
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }    
-  } catch (error) {
-    console.error('❌ 停止检测失败:', error)
-    ElMessage.error(`停止检测失败: ${error.message}`)
-  }
-}
-// 格式化日期方法
-const formatDate = (dateString) => {
-  if (!dateString) return '-'
-  const date = new Date(dateString)
-  return date.toLocaleDateString('zh-CN')
-}
-const patientId = ref("")
-// 加载患者信息
-const loadPatientInfo = async () => {
-  try {
-    // 从路由参数获取患者ID
-    patientId.value =  props.selectedPatient.id
-    if (patientId.value == '' || patientId.value == null) {
-      console.warn('未找到患者ID参数')
-      return
-    }
-
-    // 调用API获取患者信息
-    const response = await fetch(`${BACKEND_URL}/api/patients/${patientId.value}`)
-    if (response.ok) {
-      const result = await response.json()
-      if (result.success) {
-        patientInfo.value = { ...result.data, sessionId: null }
-       
-        console.log('患者信息加载成功:', patientInfo.value)
-      } else {
-        throw new Error(result.message)
-      }
-    } else {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-  } catch (error) {
-    console.error('加载患者信息失败:', error)
-    ElMessage.warning('加载患者信息失败，请检查网络连接')
-  }
-}
-
-// 处理页面关闭或刷新事件
-const handleBeforeUnload = (event) => {
-  console.log('页面即将关闭，正在清理资源...') 
-  
-  
-  // 停止检测
-  stopDetection()
-  // 断开WebSocket连接
-  disconnectWebSocket()
-  
-  console.log('✅ 资源清理完成')
-}
-const creatorId = ref('')
-let rotationCharts = null;
-let pitchCharts = null;
-let tiltCharts = null;
-const initchart = () => {
-  // 确保 DOM 元素已经渲染
-  nextTick(() => {
-    const chartDom = document.getElementById('rotationChartId');
-    if (chartDom) {
-      // 如果图表已经存在，先销毁
-      if (rotationCharts) {
-        try {
-          rotationCharts.dispose();
-        } catch (e) {
-          console.warn('rotationCharts dispose error:', e);
-        }
-        rotationCharts = null;
-      }
-      rotationCharts = echarts.init(chartDom);
-      rotationCharts.setOption(chartoption.value);
-    } else {
-      console.warn('找不到 ID 为 rotationChartId 的 DOM 元素');
-    }
-    const chartDom2 = document.getElementById('pitchChartId');
-    if (chartDom2) {
-      // 如果图表已经存在，先销毁
-      if (pitchCharts) {
-        try {
-          pitchCharts.dispose();
-        } catch (e) {
-          console.warn('pitchCharts dispose error:', e);
-        }
-        pitchCharts = null;
-      }
-      pitchCharts = echarts.init(chartDom2);
-      pitchCharts.setOption(chartoption.value);
-    } else {
-      console.warn('找不到 ID 为 pitchChartId 的 DOM 元素');
-    }
-    const chartDom3 = document.getElementById('tiltChartId');
-    if (chartDom3) {
-      // 如果图表已经存在，先销毁
-      if (tiltCharts) {
-        try {
-          tiltCharts.dispose();
-        } catch (e) {
-          console.warn('tiltCharts dispose error:', e);
-        }
-        tiltCharts = null;
-      }
-      tiltCharts = echarts.init(chartDom3);
-      tiltCharts.setOption(chartoption.value);
-    } else {
-      console.warn('找不到 ID 为 tiltChartId 的 DOM 元素');
-    }
-    // 添加窗口大小调整监听器
-    window.addEventListener('resize', () => {
-      if (rotationCharts && !rotationCharts.isDisposed()) {
-        try {
-          rotationCharts.resize();
-        } catch (e) {
-          console.warn('rotationCharts resize error:', e);
-        }
-      }
-      if (pitchCharts && !pitchCharts.isDisposed()) {
-        try {
-          pitchCharts.resize();
-        } catch (e) {
-          console.warn('pitchCharts resize error:', e);
-        }
-      }
-      if (tiltCharts && !tiltCharts.isDisposed()) {
-        try {
-          tiltCharts.resize();
-        } catch (e) {
-          console.warn('tiltCharts resize error:', e);
-        }
-      }
-    });
-  });
-}
-const calibrationClick = async () => {
-  const response = await fetch(`${BACKEND_URL}/api/devices/calibrate/imu`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({})
-  })
-  clearAndStartTracking()
-  if (response.ok) {
-    const result = await response.json()
-    if (result.success) {
-      ElMessage.success(result.message)
-    } else {
-      ElMessage.error(result.message)
-    }
-  }
-
-}
-
-const cameraSubmit = async () => {
-  console.log(cameraForm.value)
-  debugger
-  // const response = await fetch(`${BACKEND_URL}/api/config/devices/all`, {
-  //   method: 'POST',
-  //   headers: {
-  //     'Content-Type': 'application/json'
-  //   },
-  //   body: JSON.stringify(cameraForm.value)
-  // })
-  // if (response.ok) {
-  //   const result = await response.json()
-  //   if (result.success) {
-  //     ElMessage.success(result.message)
-  //     cameraDialogVisible.value = false
-  //   } else {
-  //     ElMessage.error(result.message)
-  //   }
-  // }
-}
-
-// 加载相机参数信息
-const getDevicesInit = async () => {
-  try {
-    // 调用API获取患者信息
-    const response = await fetch(`${BACKEND_URL}/api/config/devices`)
-    if (response.ok) {
-      const result = await response.json()
-      if (result.success) {
-        console.log('相机参数加载成功:', result.data)
-        cameraForm.value = result.data
-        cameraDialogVisible.value = true
-        // console.log('相机参数加载成功:', patientInfo.value)
-      } else {
-        throw new Error(result.message)
-      }
-    } else {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-  } catch (error) {
-    console.error('加载相机参数失败:', error)
-    ElMessage.warning('加载相机参数失败，请检查网络连接')
-  }
-}
-
-onMounted(() => {
-
-  if (authStore.currentUser) {
-    console.log(authStore.currentUser)
-    creatorId.value = authStore.currentUser.id
-  }
-
-  // 加载患者信息
-  loadPatientInfo()
-  // 启动检测
-  startDetection()
-  // 页面加载时自动连接WebSocket
-  connectWebSocket()
-  
-  // 监听页面关闭或刷新事件
-  window.addEventListener('beforeunload', handleBeforeUnload)
-  
-})
-
-onUnmounted(() => {
-  console.log('🔄 Detection组件正在卸载，开始清理资源...')
-  
-  try {
-    // 清理定时器
-    if (timerId.value) {
-      clearInterval(timerId.value)
-      timerId.value = null
-      console.log('✅ 定时器已清理')
-    }
-    
-    // 停止录制
-    if (isRecording.value === true) {
-      stopRecord()
-      console.log('✅ 录制已停止')
-    }
-
-    // 停止检测
-    stopDetection()
-    console.log('✅ 检测已停止')
-    
-    // 断开WebSocket连接
-    disconnectWebSocket()
-    console.log('✅ WebSocket连接已断开')
-    
-    // 清理图表资源
-    if (tiltCharts) {
-      try {
-        tiltCharts.dispose()
-        console.log('✅ tiltCharts已清理')
-      } catch (e) {
-        console.warn('tiltCharts dispose error in onUnmounted:', e)
-      }
-      tiltCharts = null
-    }
-    
-    if (rotationCharts) {
-      try {
-        rotationCharts.dispose()
-        console.log('✅ rotationCharts已清理')
-      } catch (e) {
-        console.warn('rotationCharts dispose error in onUnmounted:', e)
-      }
-      rotationCharts = null
-    }
-    
-    if (pitchCharts) {
-      try {
-        pitchCharts.dispose()
-        console.log('✅ pitchCharts已清理')
-      } catch (e) {
-        console.warn('pitchCharts dispose error in onUnmounted:', e)
-      }
-      pitchCharts = null
-    }
-    
-    // 移除页面关闭事件监听器
-    window.removeEventListener('beforeunload', handleBeforeUnload)
-    console.log('✅ beforeunload事件监听器已移除')
-    
-    console.log('🎉 Detection组件资源清理完成')
-    
-  } catch (error) {
-    console.error('❌ Detection组件卸载时出错:', error)
-  }
-})
-
-const startRecord = async () => { // 开始录屏
-   try {
-    console.log('🚀 正在开始录屏...')
-    startTimer()
-    // 验证患者信息
-    if (!patientInfo.value || !patientInfo.value.sessionId) {
-      throw new Error('缺少患者信息，无法开始录屏')
-    }
-    let screen_location = contenGridRef.value.getBoundingClientRect()
-    let femtobolt_location = wholeBodyRef.value.getBoundingClientRect()
-    let camera1_location = camera1Ref.value?.getBoundingClientRect()
-    let camera2_location = camera2Ref.value?.getBoundingClientRect()
-    let titile_height = 24
-    // 调用后端API开始录屏
-    const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/start_record`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        patient_id: patientId.value,
-        // 可以添加其他录屏参数
-        creator_id: creatorId.value,        
-        screen_location:[Math.round(screen_location.x), Math.round(screen_location.y) + titile_height, Math.round(screen_location.width), Math.round(screen_location.height)],
-        camera1_location:[
-          Math.round(camera1_location.x), Math.round(camera1_location.y)+ titile_height,
-          Math.round(camera1_location.width), Math.round(camera1_location.height)
-        ],
-        camera2_location:[
-          Math.round(camera2_location.x), Math.round(camera2_location.y)+ titile_height,
-          Math.round(camera2_location.width), Math.round(camera2_location.height)
-        ],
-        femtobolt_location:[Math.round(femtobolt_location.x), Math.round(femtobolt_location.y) + titile_height, Math.round(femtobolt_location.width), Math.round(femtobolt_location.height)],
-     
-      })
-    })
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-
-    const result = await response.json()
-
-    if (result.success) {
-      // 保存会话ID和检测开始时间
-      patientInfo.value.detectionStartTime = Date.now()
-      console.log('✅ 录屏会话创建成功，会话ID:', patientInfo.value.sessionId)
-      isRecording.value = true  
-    } else {
-      throw new Error(result.message || '开始录屏失败')
-    }
-  } catch (error) {
-    ElMessage.error(`开始录屏失败: ${error.message}`)
-    throw error
-  }
-}
-
-const stopRecord = async () => {  // 停止录屏
-  try {
-    resetTimer()
-    // 计算检测持续时间
-    let duration = 0
-    if (patientInfo.value.detectionStartTime) {
-      duration = Math.floor((Date.now() - patientInfo.value.detectionStartTime) / 1000)
-    }
-
-   // 调用后端API停止检测
-    const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop_record`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        duration: duration
-      })
-    })
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-    isRecording.value = false
-
-  } catch (error) {
-    console.error('❌ 停止检测失败:', error)
-    ElMessage.error(`停止检测失败: ${error.message}`)
-  }
-}
-function routerClick(){
-  historyDialogVisible.value = true
-}
-
-const isRestart = ref(false) // 防止连击
-
-// 单个刷新数据
-function refreshClick(type) { 
-  // 检查是否在冷却期内
-  if (isRestart.value === true) {
-    ElMessage.warning(`请勿连续点击设备重启按钮！请等待5秒后再试`)
-    return
-  }  
-  // 设置冷却状态
-  isRestart.value = true  
-  // 5秒后重置状态
-  setTimeout(() => {
-    isRestart.value = false
-  }, 5000)  
-  ElMessage.warning(`🚀 发送重启设备请求...`)
-  if (devicesSocket && devicesSocket.connected) {
-    if(type == 'camera'){
-      devicesSocket.emit('restart_device', { device_type: 'camera' })
-    }else if(type == 'femtobolt'){
-      devicesSocket.emit('restart_device', { device_type: 'femtobolt' })
-    }else if(type == 'imu'){
-      devicesSocket.emit('restart_device', { device_type: 'imu' })
-    }else if(type == 'pressure'){
-      devicesSocket.emit('restart_device', { device_type: 'pressure' })
-    }
-  } else {
-    console.warn('⚠️ Socket服务未连接，无法重启设备！')
-  }
-}
-</script>
-
-<style scoped>
-/* 全局容器 */
-.dashboard-container {
-  /* display: flex; */
-  height: 100vh;
-  background-color: #000000;
-  color: #FFFFFF;
-}
-
-/* 左侧导航栏 */
-.sidebar {
-  width: 60px;
-  background-color: #2C2C2C;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 20px;
-}
-
-.sidebar-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-  padding: 10px 0;
-}
-
-.sidebar-item.active {
-  color: #C22ED0;
-}
-
-.sidebar-icon {
-  font-size: 24px;
-  margin-bottom: 4px;
-}
-
-.sidebar-text {
-  font-size: 12px;
-}
-
-/* 主内容区域 */
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 顶部工具栏 */
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: #292929;
-  /* margin-bottom: 1px; */
-}
-
-.top-bar-left {
-  display: flex;
-  align-items: center;
-}
-
-.back-icon {
-  font-size: 20px;
-  cursor: pointer;
-  margin-right: 10px;
-}
-
-.page-title {
-  font-size: 18px;
-  font-weight: bold;
-  margin-left: 10px;
-}
-
-.start-btn {
-  font-size: 16px;
-  padding: 8px 24px;
-  margin-left: 40px;
-}
-
-.start-title-btn {
-  font-size: 16px;
-  padding: 8px 24px;
-  margin-left: 20px;
-}
-
-.top-bar-right {
-  display: flex;
-  align-items: center;
-}
-
-.info-item {
-  font-size: 14px;
-  margin-right: 20px;
-  color: #ffffff;
-}
-
-.top-icon {
-  font-size: 20px;
-  margin-left: 20px;
-  cursor: pointer;
-}
-
-/* 核心内容网格布局 */
-.content-grid {
-  display: flex;
-  padding: 0px 0px;
-  justify-content: space-between;
-  height: calc(100vh - 100px);
-  /* flex: 1;
-
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  grid-template-rows: auto 1fr;
-  gap: 20px; */
-}
-
-/* 通用模块样式 */
-.module-card {
-  width: 100%;
-  background-color: #323232 !important;
-  border: none !important;
-}
-
-.module-header {
-  width: 100%;
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 15px;
-  background-color: rgba(41, 41, 41, 1);
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(27, 27, 27, 1);
-  border-right: none;
-  border-left: none;
-}
-
-.module-title {
-
-
-  width: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border: 2px solid #ffffff; */
-  /* background: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216)); */
-  border-radius: 20px;
-
-
-  font-size: 16px;
-  font-weight: bold;
-  color: #ffffff;
-  padding: 2px;
-}
-
-.module-title-bg {
-  display: flex;
-  align-items: center;
-  width: 116px;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 18px;
-  color: #FFFFFF;
-}
-
-.header-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-}
-
-.edit-icon {
-  font-size: 18px;
-  cursor: pointer;
-  color: #CCCCCC;
-}
-
-/* 身体姿态模块 */
-.body-posture {
-  /* grid-row: 1 / 3; */
-  width: 30%;
-}
-
-.posture-container {
-  position: relative;
-  height: calc(100% - 40px);
-}
-
-.grid-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(to right, #333333 1px, transparent 1px), linear-gradient(to bottom, #333333 1px, transparent 1px);
-  background-size: 50px 50px;
-  border:0px;
-}
-
-.posture-heatmap {
-  /* position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%); */
-  width: 90%;
-  height: 90%;
-}
-
-/* 头部姿态模块 */
-.head-posture {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-}
-
-.gauge-group {
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 20px;
-}
-
-.gauge-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.gauge {
-  width: 140px;
-  height: 140px;
-  --el-gauge-label-color: #FFFFFF;
-}
-
-.gauge-desc {
-  font-size: 14px;
-  text-align: center;
-  margin-top: 8px;
-  color: #CCCCCC;
-}
-
-.history-table {
-  background-color: #333333 !important;
-  margin-bottom: 16px;
-}
-
-.el-table th {
-  background-color: #333333 !important;
-  color: #FFFFFF !important;
-  border-bottom: 1px solid #444444 !important;
-}
-
-.el-table td {
-  background-color: #333333 !important;
-  color: #FFFFFF !important;
-  border-bottom: 1px solid #444444 !important;
-}
-
-.zero-btn {
-  float: right;
-  padding: 6px 16px;
-}
-
-/* 基础信息模块 */
-.basic-info {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  font-size: 14px;
-}
-
-.info-item label {
-  color: #409EFF;
-  margin-right: 8px;
-  font-weight: 500;
-}
-
-/* 足部压力模块 */
-.foot-pressure {
-  grid-column: 2 / 3;
-  grid-row: 2 / 3;
-}
-
-.foot-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-}
-
-.foot-stats {
-  display: flex;
-  justify-content: space-around;
-  width: 100%;
-  font-size: 14px;
-  color: #CCCCCC;
-}
-
-.foot-graph {
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin: 10px 0;
-}
-
-.foot-img {
-  width: 140px;
-  height: 180px;
-  margin: 0 15px;
-  border-radius: 8px;
-}
-
-.foot-divider {
-  width: 2px;
-  height: 100%;
-  background-color: #444444;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.total-pressure {
-  font-size: 14px;
-  color: #CCCCCC;
-}
-
-/* 视频模块 */
-.video-module {
-  grid-column: 1 / 2;
-  grid-row: 2 / 3;
-  margin-top: 20px;
-}
-
-.video-container {
-  position: relative;
-  height: calc(100% - 40px);
-}
-
-.video-preview {
-  width: 100%;
-  height: 100%;
-  /* object-fit: cover; */
-}
-
-.video-time {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: 4px 8px;
-  font-size: 12px;
-  color: #FFFFFF;
-}
-
-/* Element Plus 样式覆盖 */
-:deep(.el-card__header) {
-  border-bottom: 1px solid #444444 !important;
-  padding: 12px 20px !important;
-}
-
-
-.el-button--primary:hover {
-  --el-button-bg-color: #A325B0 !important;
-  --el-button-border-color: #A325B0 !important;
-}
-
-.gauge-group-box {
-  height: 50px;
-  display: flex;
-  align-items: center;
-  color: #ffffff;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  justify-content: space-between;
-  padding: 0px 20px;
-}
-
-.gauge-group-box-text1 {
-  font-size: 16px;
-  font-weight: 700;
-  font-style: normal;
-  display: flex;
-  align-items: center;
-}
-
-.gauge-group-box-text2 {
-  font-size: 24px;
-  color: #30F3FF;
-  font-weight: 700;
-}
-
-.gauge-table-title {
-  padding: 0px 10px;
-  font-size: 14px;
-  color: #ffffff;
-}
-
-/* .foot-container-left{
-  margin-right: 10px;
-}
-.foot-container-right{
-  margin-left: 10px;
-} */
-.foot-container-content {
-  margin: 0px 20px;
-  text-align: center;
-  /* width: 300px; */
-  height: 100%;
-}
-
-.foot-container-margintop {
-  margin-top: 80px;
-}
-
-.foot-container-marginleft {
-  margin-left: 40px;
-}
-
-.foot-container-paddingcolor {
-  padding-left: 10px;
-  color: #ff9900;
-  font-size: 30px;
-  font-weight: 700;
-}
-
-.basic-info-content {
-  display: flex;
-  /* justify-content: center;
-  box-sizing: border-box; */
-  padding-top: 10px;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.basic-info-content-item {
-  display: flex;
-  align-items: center;
-  width: 50%;
-}
-
-.basic-info-text1 {
-  width: 85px;
-  text-align: center;
-  height: 46px;
-  line-height: 46px;
-}
-
-.basic-info-text2 {
-  width: 80%;
-  font-size: 18px;
-  background-color: rgba(36, 36, 36, 1);
-  border-radius: 4px;
-  color: #FFFFFF;
-  text-align: left;
-  height: 40px;
-  line-height: 40px;
-  padding-left: 15px;
-}
-
-.basic-info-text {
-  width: 33%;
-  text-align: center;
-  font-size: 20px;
-}
-
-.basic-info-textcolor {
-  color: rgb(48, 205, 223);
-  padding-bottom: 8px;
-}
-
-.basic-info-box {
-  /* 
-  flex-wrap: wrap;
-  align-content: center; */
-  width: 100%;
-  height: calc(100% - 40px) ;
-  /* display: flex; */
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0px 20px;
-}
-
-.dialog-title {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  color: #ffffff;
-}
-
-.dialog-title-item {
-  display: flex;
-  width: 200px;
-  color: #ffffff;
-}
-
-:deep(.el-dialog) {
-  background-color: #1D1b26;
-}
-
-:deep(.el-dialog__title) {
-  color: #ffffff;
-}
-
-:deep(.el-form-item__label) {
-  color: #ffffff ;
-  font-size: 16px ;
-  font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif ;
-  /* font-weight: 700 ; */
-  font-style: normal ;
-}
-
-
-:deep(.el-table .el-table__cell) {
-  padding: 4px 0px;
-}
-
-:deep(.el-table__body-wrapper) {
-  border-bottom: 1px solid #ffffff !important;
-}
-
-.blink-icon {
-  margin: 0px 10px;
-  transition: all 0.3s ease;
-}
-
-.icon-container {
-  display: flex;
-  align-items: center;
-}
-
-.blinking {
-  animation: blink 1s infinite;
-}
-
-@keyframes blink {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  50% {
-    opacity: 0;
-    transform: scale(1);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.xline {
-  position: absolute;
-  width: calc(100% + 50px) ;
-  /* height: 1px; */
-  border-top: 1px dashed red;
-  top: 50%;
-  left: -25px;
-}
-
-.yline {
-  position: absolute;
-  /* width:1px; */
-  height:  calc(100% + 50px);
-  /* height: 1px; */
-  border-left: 1px dashed red;
-  top: -25px;
-  left: 50%;
-}
-
-.icon-box {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0px 10px;
-}
-
-.icon-box-mark {
-  width: 4px;
-  height: 14px;
-  background-color: rgba(0, 153, 255, 1);
-  margin-right: 10px;
-}
-
-.icon-box-text {
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 16px;
-  color: #0099FF;
-}
-
-.chart-title {
-  position: absolute;
-  top: 4px;
-  left: 7px;
-  z-index: 2000;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  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;
-}
-
-:deep(.el-table__body-wrapper) {
-  border-bottom: 1px solid rgb(81, 81, 81) !important;
-}
-
-:deep(.el-table thead.is-group th.el-table__cell) {
-  border-right: 1px solid rgb(81, 81, 81) !important;
-  border-bottom: 1px solid rgb(81, 81, 81) !important;
-}
-
-:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
-  border-bottom: 1px solid rgb(81, 81, 81) !important;
-  background-color: #282828 !important;
-  border-right: 1px solid rgb(81, 81, 81) !important;
-}
-
-:deep(.el-scrollbar__wrap) {
-  background: #282828 !important;
-}
-
-:deep(.tsDialog.el-dialog) {
-  background-color: #323232;
-  padding: 0px;
-  padding-bottom: 20px;
-}
-
-:deep(.tsDialog.el-dialog .el-input__wrapper) {
-  background-color: #242424;
-  font-size: 16px;
-  border: none;
-  box-shadow: none;
-}
-
-:deep(.tsDialog.el-dialog .el-select__wrapper) {
-  font-size: 16px;
-  background-color: #242424;
-  border: none;
-  box-shadow: none;
-}
-
-:deep(.tsDialog.el-dialog .el-input__inner) {
-  font-size: 16px;
-  color: #ffffff;
-}
-
-:deep(.tsDialog.el-dialog .el-select__placeholder) {
-  color: #ffffff;
-}
-
-:deep(.tsDialog.el-dialog .el-dialog__header) {
-  border-bottom: 1px solid #1e1e1e;
-  padding: 10px 20px;
-}
-
-:deep(.tsDialog.el-dialog .el-textarea__inner) {
-  background: #242424;
-  color: #ffffff;
-  box-shadow: none;
-}
-
-:deep(.el-dialog__body) {
-  padding: 20px;
-}
-
-:deep(.el-dialog__footer) {
-  padding: 0px 20px;
-}
-:deep(.el-radio__label){
-  font-size: 16px;
-  color: #fff;
-}
-
-
-.cameraFormTitle{
-  font-size: 18px;
-  color: #fff;
-  font-weight: 700;
-  margin: 30px 0px;
-}
-</style>
-<style>
-.dashboard-container.dashboard-container-home .el-table--border .el-table__inner-wrapper:after,
-.el-table--border:after,
-.el-table--border:before,
-.el-table__inner-wrapper:before {
-  background: rgb(81, 81, 81) !important;
-}
-
-.dashboard-container.dashboard-container-home .el-table__border-bottom-patch,
-.el-table__border-left-patch {
-  background: rgb(81, 81, 81) !important;
-}
-
-.dashboard-container .el-table {
-  background: #464646 !important;
-}
-
-.dashboard-container .el-table tr {
-  background-color: #464646 !important;
-}
-
-.dashboard-container .el-table thead.is-group th.el-table__cell {
-  background-color: #464646 !important;
-}
-
-.dashboard-container .is-group .cell {
-  color: #C9C9C9;
-  font-size: 18px;
-  font-weight: 400;
-}
-
-.dashboard-container .cell {
-  font-size: 18px;
-  color: #ffffff;
-}
-
-.dashboard-container tr>td.el-table__cell {
-  color: #ffffff;
-}
-
-.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
-  background-color: #6F4200 !important;
-}
-
-.el-table td.el-table__cell,
-.el-table th.el-table__cell.is-leaf {
-  background-color: rgb(81, 81, 81) !important;
-}
-
-.top-bar .el-button {
-  height: 44px;
-  border-radius: 25px;
-  font-size: 28px;
-  border-radius: 20px;
-  width: 220px;
-}
-.rotation-titles{
-  width: 100%;
-  text-align: center;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 24px;
-  color: #30F3FF;
-  text-align: center;
-}
-</style>
-<style> 
-.historyDialogVisible.el-dialog{
-  --el-dialog-margin-top: 0 !important;
-  margin-bottom: 0;
-}
-.historyDialogVisible .el-dialog__body{
-  padding: 0;
-}
-</style>
diff --git a/frontend/src/renderer/src/views/DiagnosticMessage.vue b/frontend/src/renderer/src/views/DiagnosticMessage.vue
index 5749de3f..329d7b38 100644
--- a/frontend/src/renderer/src/views/DiagnosticMessage.vue
+++ b/frontend/src/renderer/src/views/DiagnosticMessage.vue
@@ -19,28 +19,32 @@
                 <el-option v-for="opt in commonItems.treatment" :key="opt" :label="opt" :value="opt" />
               </el-select>
               <el-tooltip content="新增到常用项" placement="top">
-                <img src="@/assets/process/add.png" alt="" @click="addTreatmentFromInput"
-                style="cursor: pointer;margin-left: 5px;">
+                <div class="processadd" @click="addTreatmentFromInput">
+                  <img src="@/assets/process/add.png" alt="" @click="addTreatmentFromInput">
+                </div>
               </el-tooltip>
               <el-tooltip content="选择处理" placement="top">
-                <img src="@/assets/process/set.png" alt="" @click="treatmentDialogVisible=true"
-                style="cursor: pointer;margin-left: 5px;">
+                <div class="processadd" @click="treatmentDialogVisible=true">
+                  <img src="@/assets/process/set.png" alt="" >
+                </div>
               </el-tooltip>
              
             </div>
           </el-form-item>
-          <el-form-item label="备注">
+          <el-form-item label="建议">
             <div style="display: flex;width: 100%;">
               <el-input v-model="diagnosticForm.suggestion_info" resize="none" :rows="5" type="textarea" placeholder="备注信息" 
                 style="margin-top:8px;width:calc(100% - 70px)" />
               <div style="margin-top:8px;display:flex;align-items:center;">
                 <el-tooltip content="新增到常用项" placement="top">
-                  <img src="@/assets/process/add.png" alt="" @click="addSuggestionFromInput"
-                style="cursor: pointer;margin-left: 5px;">
+                  <div class="processadd"  @click="addSuggestionFromInput">
+                    <img src="@/assets/process/add.png" alt="">
+                  </div>
                 </el-tooltip>
                 <el-tooltip content="选择建议" placement="top">
-                  <img src="@/assets/process/set.png" alt="" @click="suggestionDialogVisible=true"
-                  style="cursor: pointer;margin-left: 5px;">
+                  <div class="processadd"  @click="suggestionDialogVisible=true">
+                    <img src="@/assets/process/set.png" alt="">
+                  </div>
                 </el-tooltip>
                
               </div>
@@ -73,12 +77,10 @@
           <span>{{opt}}</span>
           <div style="display:flex;gap:6px;">
             <el-tooltip content="选中" placement="top">
-              <img src="@/assets/process/selected.png" alt="" @click="onPickTreatment(opt)" 
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="selected-icon" @click="onPickTreatment(opt)" ></div>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <img src="@/assets/process/del.png" alt="" @click="removeCommonItem('treatment',opt)" 
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="processdel-icon" @click="removeCommonItem('treatment',opt)" ></div>
             </el-tooltip>
           </div>
         </div>
@@ -96,12 +98,10 @@
           <span>{{opt}}</span>
           <div style="display:flex;gap:6px;">
             <el-tooltip content="选中" placement="top">
-              <img src="@/assets/process/selected.png" alt="" @click="onPickSuggestion(opt)" 
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="selected-icon" @click="onPickSuggestion(opt)" ></div>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <img src="@/assets/process/del.png" alt="" @click="removeCommonItem('suggestion',opt)"
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="processdel-icon" @click="removeCommonItem('suggestion',opt)" ></div>
             </el-tooltip>
           </div>
         </div>
@@ -506,4 +506,48 @@ async function handleDiagnosticInfo(status) {
 .el-select__input{
   color: #ffffff;
 }
+
+.processadd{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  margin-left:5px;
+  cursor: pointer;
+}
+.processadd:hover{
+  background-color: rgb(20 170 255 / 30%);
+  border: 1px solid rgb(20 170 255 / 50%);
+  cursor: pointer;
+}
+
+.selected-icon {
+  width: 18px;
+  height: 18px;
+  background-image: url(@/assets/process/selected.png);
+  cursor: pointer;
+  margin-left: 10px;
+}
+.selected-icon:hover {
+  width: 18px;
+  height: 18px;
+  background-image: url(@/assets/process/selected-active.png);
+}
+
+.processdel-icon {
+  width: 15px;
+  height: 18px;
+  background-image: url(@/assets/process/del.png);
+  cursor: pointer;
+  margin-left: 10px;
+}
+.processdel-icon:hover {
+  width: 15px;
+  height: 18px;
+  background-image: url(@/assets/process/del-active.png);
+}
+
+
 </style>
diff --git a/frontend/src/renderer/src/views/Header.vue b/frontend/src/renderer/src/views/Header.vue
index 7a2a177b..c3d9849d 100644
--- a/frontend/src/renderer/src/views/Header.vue
+++ b/frontend/src/renderer/src/views/Header.vue
@@ -16,14 +16,20 @@
           </div>
         </div>
         <div class="header-right">
-        <div style="color:#fff;margin-right: 20px;">登录时间：{{ time }}  </div>
-        <div class="user-line"></div>
+        <div style="color:#fff;margin-right: 35px;    
+          font-family: 'Noto Sans SC', sans-serif;
+          font-weight: 400;
+          font-style: normal;
+          font-size: 16px;
+          letter-spacing: 1px;
+          color: #9CA3AF;">{{ time }} <span style="padding-left:20px">{{ headerWeek }}</span></div>
+        <!-- <div class="user-line"></div> -->
           <div class="user-info">
             <img src="@/assets/new/u13.png" alt="Avatar" style="width: 30px;height: 30px;">
             <!-- @click="isUpdateUserInfo = true" -->
             <span class="username" >{{ userInfo.name }}</span>
             <div class="user-line"></div>
-            <span class="username user-return"  @click="isTip = true">退出登录</span>           
+            <span class="username user-return"  @click="isTip = true">退出</span>           
           </div>
         </div>
       </div>
@@ -89,7 +95,7 @@
   </template>
   
   <script setup>
-  import { ref, reactive, onMounted } from 'vue'
+  import { ref, reactive, onMounted,onUnmounted } from 'vue'
   import { useRouter, viewDepthKey } from 'vue-router'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import { useAuthStore } from '../stores/index.js'
@@ -125,6 +131,7 @@
     isLicense.value = false
     // getLicense()
   }
+  const headerWeek = ref("")
   function dateFormat(row) {
     const daterc = row;
     if (daterc != null) {
@@ -136,8 +143,12 @@
       var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
       var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
       var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      const dayIndex = date.getDay();
+      const fullWeeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      headerWeek.value  =  fullWeeks[dayIndex]
+
       // 拼接
-      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
+      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds ;
     }
   }
   const handleLogout = async () => {
@@ -151,7 +162,10 @@
       // 用户取消
     }
   }
-  
+  const timer =ref(null) 
+  onUnmounted(()=>{ // 离开页面时清除定时器
+    clearInterval(timer.value)
+  })
   // 生命周期
   onMounted(() => {
     // 从认证状态管理中加载用户信息
@@ -164,10 +178,16 @@
       })
     }
     time.value = dateFormat(new Date())
+    clearInterval(timer.value)
+    timer.value = setInterval(() => {
+      time.value = dateFormat(new Date())
+    }, 1000)
+    // 
 
     // 授权状态徽标：页面加载时检查 /api/license/info
     getLicense()
   })
+
   async function getLicense(){
     try {
         const json = await api.get('/api/license/info')
@@ -295,11 +315,17 @@ function userConfirm(){
   }
   
   .username {
+    font-family: "Noto Sans SC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: 1px;
+    color: #D1D5DB;
     font-size: 14px;
-    color: #fff;
     cursor: pointer;
   }
-  
+  .user-return{
+    color: #0B94D5;
+  }
   .user-dropdown {
     padding: 0;
     color: #fff;
@@ -374,6 +400,7 @@ function userConfirm(){
   margin: 0 10px;
   background-color: #949494;
 }
+
 .user-return:hover{
   cursor: pointer;
   color: rgb(0, 140, 255);
diff --git a/frontend/src/renderer/src/views/PatientProfile.vue b/frontend/src/renderer/src/views/PatientProfile.vue
index 0d80c846..72cb044e 100644
--- a/frontend/src/renderer/src/views/PatientProfile.vue
+++ b/frontend/src/renderer/src/views/PatientProfile.vue
@@ -298,16 +298,19 @@
                     <div style="width: 100%; display:flex;align-items:center;">
                       <el-select v-model="profileInfo.treatment_info" placeholder="请选择" 
                       filterable allow-create default-first-option clearable   @blur="blurChange"
-                        style="width:100%;">
+                        style="width:calc(100% - 60px)">
                         <el-option v-for="opt in commonItems.treatment" :key="opt" :label="opt" :value="opt" />
                       </el-select>
                       <el-tooltip content="新增到常用项" placement="top">
-                        <img src="@/assets/process/add.png" alt="" @click="addTreatmentFromInput"
-                        style="cursor: pointer;margin-left: 5px;">
+                        <div class="processadd" @click="addTreatmentFromInput">
+                          <img src="@/assets/process/add.png" alt="" @click="addTreatmentFromInput">
+                        </div>
+                        
                       </el-tooltip>
                       <el-tooltip content="选择处理" placement="top">
-                        <img src="@/assets/process/set.png" alt="" @click="treatmentDialogVisible=true"
-                        style="cursor: pointer;margin-left: 5px;">
+                        <div class="processadd" @click="treatmentDialogVisible=true">
+                          <img src="@/assets/process/set.png" alt="" >
+                        </div>
                       </el-tooltip>
                     </div>
                 </div>
@@ -316,12 +319,14 @@
                   <el-input type="textarea"  v-model="profileInfo.suggestion_info" :resize="'none'" class="patientprofile-container-dataInfobg-textarea"></el-input>
                   <div style="margin-top:8px;display:flex;align-items:center;">
                     <el-tooltip content="新增到常用项" placement="top">
-                      <img src="@/assets/process/add.png" alt="" @click="addSuggestionFromInput"
-                    style="cursor: pointer;margin-left: 5px;">
+                      <div class="processadd"  @click="addSuggestionFromInput">
+                        <img src="@/assets/process/add.png" alt="">
+                      </div>
                     </el-tooltip>
                     <el-tooltip content="选择建议" placement="top">
-                      <img src="@/assets/process/set.png" alt="" @click="suggestionDialogVisible=true"
-                      style="cursor: pointer;margin-left: 5px;">
+                      <div class="processadd"  @click="suggestionDialogVisible=true">
+                        <img src="@/assets/process/set.png" alt="">
+                      </div>
                     </el-tooltip>
                   </div>
                 </div>
@@ -372,12 +377,14 @@
           <span>{{opt}}</span>
           <div style="display:flex;gap:6px;">
             <el-tooltip content="选中" placement="top">
-              <img src="@/assets/process/selected.png" alt="" @click="onPickTreatment(opt)" 
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="selected-icon" @click="onPickTreatment(opt)" ></div>
+              <!-- <img src="@/assets/process/selected.png" alt="" @click="onPickTreatment(opt)" 
+                style="cursor: pointer;margin-left: 10px;"> -->
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <img src="@/assets/process/del.png" alt="" @click="removeCommonItem('treatment',opt)" 
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="processdel-icon" @click="removeCommonItem('treatment',opt)" ></div>
+              <!-- <img src="@/assets/process/del.png" alt="" @click="removeCommonItem('treatment',opt)" 
+                style="cursor: pointer;margin-left: 10px;"> -->
             </el-tooltip>
           </div>
         </div>
@@ -395,12 +402,10 @@
           <span>{{opt}}</span>
           <div style="display:flex;gap:6px;">
             <el-tooltip content="选中" placement="top">
-              <img src="@/assets/process/selected.png" alt="" @click="onPickSuggestion(opt)" 
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="selected-icon" @click="onPickSuggestion(opt)" ></div>
             </el-tooltip>
             <el-tooltip content="删除" placement="top">
-              <img src="@/assets/process/del.png" alt="" @click="removeCommonItem('suggestion',opt)"
-                style="cursor: pointer;margin-left: 10px;">
+              <div class="processdel-icon" @click="removeCommonItem('suggestion',opt)" ></div>
             </el-tooltip>
           </div>
         </div>
@@ -1726,4 +1731,46 @@ historyAPI.VideoDelById(ids).then((response)=>{
 .patient-profile-container .el-table tr.el-table__row.current-row>td.el-table__cell{
   background-color: #194764 !important;
 }
+
+.processadd{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  margin-left:5px;
+  cursor: pointer;
+}
+.processadd:hover{
+  background-color: rgb(20 170 255 / 30%);
+  border: 1px solid rgb(20 170 255 / 50%);
+  cursor: pointer;
+}
+.selected-icon {
+  width: 18px;
+  height: 18px;
+  background-image: url(@/assets/process/selected.png);
+  cursor: pointer;
+  margin-left: 10px;
+}
+.selected-icon:hover {
+  width: 18px;
+  height: 18px;
+  background-image: url(@/assets/process/selected-active.png);
+}
+
+.processdel-icon {
+  width: 15px;
+  height: 18px;
+  background-image: url(@/assets/process/del.png);
+  cursor: pointer;
+  margin-left: 10px;
+}
+.processdel-icon:hover {
+  width: 15px;
+  height: 18px;
+  background-image: url(@/assets/process/del-active.png);
+}
+
 </style>
diff --git a/frontend/src/renderer/src/views/PatientProfile2.vue b/frontend/src/renderer/src/views/PatientProfile2.vue
deleted file mode 100644
index f0de3df0..00000000
--- a/frontend/src/renderer/src/views/PatientProfile2.vue
+++ /dev/null
@@ -1,1587 +0,0 @@
-<template>
-  <div class="patient-profile-container" 
-  :class="{'videoDialog-patient-profile':isHeader == true}">
-    <!-- 顶部导航 -->
-    <Header v-if="isHeader == false" />
-    <div class="nav-container">
-      <div class="nav-container-title">
-        <!-- <img src="@/assets/svg/goback.svg" alt="" v-if="isHeader == false"  @click="goBack"> -->
-        <div style="margin-left: 20px;">
-          患者档案 - {{ patient?.name || '未知' }} (ID: {{ patient?.id || '未知' }})
-        </div>
-      </div>
-      <div class="nav-container-info">
-        <!-- <div>测试时间：2025-08-03 17:13:18<span></span></div>
-        <div style="margin-left: 15px;">测试医生：<span>李医生</span></div> -->
-      </div>
-    </div>
-    <div class="main-content">
-      <!-- <div v-for="value in source">
-        {{}}
-      </div> -->
-      <!-- 患者基本信息 -->
-      <div v-for="(item, index) in profileInfo" :key="index" class="content-info">
-        <div class="content-left">
-          <!-- <el-checkbox v-model="item.checked" label="" /> -->
-          <div class="content-left-text1">{{ index + 1 }}</div>
-          <div class="content-left-text2">{{ item.created_at }}</div>
-          <div class="content-left-text3" v-if="index==0">最近会诊</div>
-          <div class="content-left-text3" v-else>{{ getDayNum(item.created_at,index) }}</div>
-          <el-button type="danger" style="margin-top: 20px;" @click="sessionsDelById(item,index)">删除</el-button>
-          
-        </div>
-        <div class="content-center">
-          <video ref="videoPlayerRef" :src="item.screen_video_path ? BACKEND_URL+'/' +  item.screen_video_path.replace(/\\/g, '/') : ''" controls width="100%" height="100%">
-            您的浏览器不支持视频播放
-          </video>
-          <img src="@/assets/big.png" alt="" class="bigImgBox" @click="bigImgClick(item)">
-        </div>
-        <div class="content-right">
-          <div class="content-right-top">
-            <div class="content-right-top-title">
-              <div class="content-right-top-text">诊断信息：</div>
-              <div style="display: flex;align-items: center;">
-                <div class="content-right-top-text2" v-if="item.status != 'completed'">未处理</div>
-                <div class="content-right-top-text3" v-if="item.status == 'completed'">已处理</div>
-                <!-- <img v-if="item.status != 'completed'" src="@/assets/svg/edit.svg" alt=""  style="margin-left: 10px;cursor: pointer;"  @click="editClick(item,index)"> -->
-                <!-- <img  src="@/assets/svg/edit.svg" alt=""  style="margin-left: 10px;cursor: pointer;"  @click="editClick(item,index)"> -->
-              </div>
-            </div>
-            <div class="content-right-top-content">
-              <el-form :model="item" label-width="50px">
-                <el-form-item label="记录">
-                  <el-input v-model="item.diagnosis_info" disabled :rows="6" type="textarea"
-                    placeholder="请输入" />
-                </el-form-item>
-                <el-form-item label="处理">
-                  <el-input v-model="item.treatment_info" disabled :rows="6" type="textarea"
-                    placeholder="请输入" />
-                </el-form-item>
-                <el-form-item label="建议">
-                  <el-input v-model="item.suggestion_info" disabled :rows="6" type="textarea"
-                    placeholder="请输入" />
-                </el-form-item>
-              </el-form>
-            </div>
-          </div>
-          <div class="content-right-bottom">
-            <div class="content-right-bottom-title">
-              <div class="content-right-bottom-text">保存数据列表：</div>
-            </div>
-            <div class="content-right-bottom-content">
-              <div v-for="(item2, index2) in item.latest_detection_data" :key="index2" class="content-right-bottom-content-box">
-                <div class="content-right-bottom-img">
-                  <img :src="item2.screen_image ? BACKEND_URL+'/' +  item2.screen_image.replace(/\\/g, '/') : ''" style="width:100% ;height: 100%;cursor: pointer;" alt=""
-                  @click="item2.screen_image ? showImage(BACKEND_URL+'/' +  item2.screen_image.replace(/\\/g, '/')) : null">
-                
-                </div>
-                <div style="margin-top: 15px;">
-                  <div @click="patientdetails(item2)">
-                    <!-- <img src="@/assets/svg/datalist.svg" alt="" style="cursor: pointer;" title="查看详情"> -->
-                  </div>
-                  <div>
-                    <!-- <img src="@/assets/svg/del.svg" alt=""  style="cursor: pointer;"  title="删除"  @click="deleteClick(item,item2,index)"> -->
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 视频播放对话框 -->
-    <el-dialog v-model="videoDialogVisible" title="检测视频回放" width="80%" :before-close="closeVideoDialog">
-      <div class="video-container" v-if="currentVideo">
-        <video ref="videoPlayerRef" :src="currentVideo.url" controls width="100%" height="400">
-          您的浏览器不支持视频播放
-        </video>
-        <div class="video-info">
-          <p><strong>检测时间：</strong>{{ formatDate(currentVideo.createdAt) }}</p>
-          <p><strong>检测时长：</strong>{{ formatDuration(currentVideo.duration) }}</p>
-          <p><strong>文件大小：</strong>{{ formatFileSize(currentVideo.fileSize) }}</p>
-        </div>
-      </div>
-    </el-dialog>
-
-    <!-- 截图查看对话框 -->
-    <el-dialog v-model="screenshotDialogVisible" title="检测截图" width="90%" :before-close="closeScreenshotDialog">
-      <div class="screenshot-container" v-if="currentScreenshots.length > 0">
-        <div class="screenshot-grid">
-          <div v-for="(screenshot, index) in currentScreenshots" :key="screenshot.id" class="screenshot-item"
-            @click="previewScreenshotHandler(screenshot, index)">
-            <img :src="screenshot.thumbnail" :alt="`截图${index + 1}`" />
-            <div class="screenshot-overlay">
-              <div class="screenshot-time">{{ formatTime(screenshot.timestamp) }}</div>
-              <div class="screenshot-actions">
-                <el-button type="primary" size="small" @click.stop="downloadScreenshot(screenshot)">
-                  <el-icon>
-                    <Download />
-                  </el-icon>
-                </el-button>
-                <el-button type="danger" size="small" @click.stop="deleteScreenshot(screenshot)">
-                  <el-icon>
-                    <Delete />
-                  </el-icon>
-                </el-button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <el-empty v-else description="暂无截图" />
-    </el-dialog>
-
-    <!-- 截图预览对话框 -->
-    <el-dialog v-model="previewDialogVisible" title="截图预览" width="70%" :before-close="closePreviewDialog">
-      <div class="preview-container" v-if="previewScreenshot">
-        <img :src="previewScreenshot.url" alt="截图预览" class="preview-image" />
-        <div class="preview-info">
-          <p><strong>截图时间：</strong>{{ formatDate(previewScreenshot.timestamp) }}</p>
-          <p><strong>检测数据：</strong></p>
-          <div class="data-display" v-if="previewScreenshot.data">
-            <div class="data-item">
-              <span>头部姿态：</span>
-              <span>Pitch: {{ previewScreenshot.data.pitch }}°, Yaw: {{ previewScreenshot.data.yaw }}°, Roll: {{
-                previewScreenshot.data.roll }}°</span>
-            </div>
-            <div class="data-item">
-              <span>足底压力：</span>
-              <span>左足: {{ previewScreenshot.data.leftPressure }}%, 右足: {{ previewScreenshot.data.rightPressure
-              }}%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-    <!-- 修改诊断信息 -->
-    <el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose">
-      <div>
-        <div class="dialog-title">
-          <div class="dialog-title-item">
-            <div>用户ID:</div>{{ patient.id }}
-          </div>
-          <div class="dialog-title-item">
-            <div>姓名:{{ patient.name }}</div>
-          </div>
-        </div>
-        <div>
-          <el-form :model="diagnosticForm" label-width="50px">
-            <el-form-item label="记录">
-              <el-input v-model="diagnosticForm.diagnosis_info" :rows="6" type="textarea" placeholder="请输入" />
-            </el-form-item>
-            <el-form-item label="处理">
-              <el-input v-model="diagnosticForm.treatment_info" :rows="6" type="textarea" placeholder="请输入" />
-            </el-form-item>
-            <el-form-item label="建议">
-              <el-input v-model="diagnosticForm.suggestion_info" :rows="6" type="textarea" placeholder="请输入" />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div style="display: flex;justify-content: flex-end;color: #ffffff;">检查医生：{{ userInfo.username }}</div>
-      </div>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
-          <el-button type="primary" @click="handleDiagnosticInfo('completed')">
-            保存
-          </el-button>
-        </span>
-      </template>
-    </el-dialog>
-    <!-- 数据详情 -->
-    <el-dialog class="detailsDialog" v-model="detailsDialogVisible" top="5vh" title="当前保存数据" width="1000px"
-      :before-close="detailshandleClose">
-      <div style="margin: 20px 0px; height: calc(100vh - 200px);overflow: auto;">
-        <div>
-          <div class="patient-detail-box">
-            <div class="detail-header">
-              <div class="module-title">
-                <div class="module-title-text">基础信息</div>
-              </div>
-            </div>
-            <div class="basic-info-box">
-              <div class="basic-info-content">
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">测试者ID</div>
-                  <div>{{ selectedPatient.id || '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">姓名</div>
-                  <div>{{ selectedPatient.name || '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">性别</div>
-                  <div>{{ selectedPatient.gender || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">出生日期</div>
-                  <div>{{ selectedPatient.birth_date ? formatDate(selectedPatient.birth_date) : '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">年龄</div>
-                  <div>{{ calculateAge(selectedPatient.birth_date) }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">民族</div>
-                  <div>{{ selectedPatient.nationality || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">身高cm</div>
-                  <div>{{ selectedPatient.height || '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">体重kg</div>
-                  <div>{{ selectedPatient.weight || '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">鞋码</div>
-                  <div>{{ selectedPatient.shoe_size || '-' }}</div>
-                </div>
-              </div>
-              <div class="basic-info-content">
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">电话号码</div>
-                  <div>{{ selectedPatient.phone || '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-                  <div class="basic-info-textcolor">建档时间</div>
-                  <div>{{ selectedPatient.created_at ? formatDate(selectedPatient.created_at) : '-' }}</div>
-                </div>
-                <div class="basic-info-text">
-
-                </div>
-              </div>
-
-            </div>
-          </div>
-        </div>
-        <div class="patient-profile-dialog-box">
-          <div class="detail-header">
-            <div class="module-title">
-              <div class="module-title-text">身体姿态</div>
-            </div>
-          </div>
-          <div style="display: flex;justify-content: center;align-items: center;">
-            <img :src="BACKEND_URL+'/' +  profileForm.body_image" alt="" style="width: 500px;">
-          </div>
-        </div>
-        <div class="patient-profile-dialog-box" style="height: 230px;">
-          <div class="detail-header">
-            <div class="module-title">
-              <div class="module-title-text">头部姿态</div>
-            </div>
-          </div>
-          <div class="detail-head-content">
-            <div style="margin-right: 100px;">
-              <!-- <img src="@/assets/u45.png" style="width: 90px;height: 90px;" alt=""> -->
-            </div>
-            <div>
-              <div>
-                最大旋转角：<span class="detail-head-text">左：
-                  <span class="head-text-color">{{headPoseMaxValues.rotationLeftMax.toFixed(1)}}°</span>
-                </span>
-                <span class="detail-head-text">右：
-                  <span class="head-text-color">{{ headPoseMaxValues.rotationRightMax.toFixed(1) }}°</span>
-                </span>
-              </div>
-              <div style="margin-top: 15px;">最大倾斜角：
-                <span class="detail-head-text">左：
-                  <span class="head-text-color">{{ headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span>
-                </span>
-                <span class="detail-head-text">右：
-                  <span class="head-text-color">{{ headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span>
-                </span>
-              </div>
-              <div style="margin-top: 15px;">最大俯仰角：
-                <span class="detail-head-text">俯：
-                  <span class="head-text-color">{{ headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span>
-                </span>
-                <span class="detail-head-text">仰：
-                  <span class="head-text-color">{{ headPoseMaxValues.pitchUpMax.toFixed(1) }}°</span>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="patient-profile-dialog-box">
-          <div class="detail-header">
-            <div class="module-title">
-              <div class="module-title-text">足底压力</div>
-            </div>
-          </div>
-          <div style="display: flex;justify-content: center;margin-bottom: 8px;font-size: 16px;    color: #FFFFFF;">
-            <div>
-              <span>左足</span>
-            </div>
-            <div class="foot-container-marginleft">
-              <span>右足</span>
-            </div>
-          </div>
-          <div style="display: flex;justify-content: center;align-items: center; width: 400px;height:280px;margin: 0 auto; position: relative;">
-            <div class="foot-container-left" style="font-size: 16px;color: #FFFFFF;">
-              <div style="width: 180px;text-align: right;">
-                <span>左前足</span>
-                <span class="foot-container-paddingcolor">{{ footPressure.left_front
-                }}%</span>
-              </div>
-              <div class="foot-container-margintop" style="width: 180px;text-align: right;">
-                <span>左后足</span>
-                <span class="foot-container-paddingcolor">{{ footPressure.left_rear }}%</span>
-              </div>
-            </div>
-            <img :src="BACKEND_URL+'/' +  profileForm.foot_data_image" alt="" style="width: 280px;height: 280px;  margin: 0 10px;">
-            <div class="foot-container-shuline"></div>
-            <div class="foot-container-hengline"></div>
-            <div class="foot-container-right" style="font-size: 16px;color: #FFFFFF;">
-              <div style="width: 180px;">
-                <span>右前足</span>
-                <span class="foot-container-paddingcolor">{{ footPressure.right_front
-                }}%</span>
-              </div>
-              <div class="foot-container-margintop" style="width: 180px;">
-                <span>右后足</span>
-                <span class="foot-container-paddingcolor">{{ footPressure.right_rear
-                }}%</span>
-              </div>
-            </div>
-          </div>
-          <div
-            style="display: flex;justify-content: center;font-size: 16px;width: 470px;color:#FFFFFF;margin: auto;">
-            <div style="width: 245px;display: flex;align-items: center;justify-content: flex-end;">
-              <div style="">左足总压力</div>
-              <div style="" class="foot-container-paddingcolor">{{ footPressure.left_total
-              }}%</div>
-            </div>
-            <div class="foot-container-marginleft" style="width: 245px;display: flex;align-items: center;margin-left: 15px;">
-              <div style="">右足总压力</div>
-              <div style="width:130px;" class="foot-container-paddingcolor">100.2{{ footPressure.right_total
-              }}%</div>
-            </div>
-          </div>
-            
-        </div>
-       
-        <div class="patient-profile-dialog-box" style="height: 370px;">
-          <div class="detail-header">
-            <div class="module-title">
-              <div class="module-title-text">视频图片</div>
-            </div>
-          </div>
-          <div style="display: flex;justify-content: center;align-items: center;">
-            <img :src="BACKEND_URL+'/' +  profileForm.foot_image" alt="">
-          </div>
-        </div>
-      </div>
-
-    </el-dialog>
-
-      <!-- 查看视频 -->
-    <el-dialog v-model="dialogVideoVisible" center title="查看视频"  top="20px" width="90%" :before-close="handleClose"
-    class="dialogVideobox">
-      <video v-if="videoUrl != ''" :src="videoUrl" controls autoplay style="width: 100%;height:calc(100vh - 120px);">
-        您的浏览器不支持视频播放
-      </video>
-    </el-dialog>
-    <el-image
-      ref="imageRef"
-      style="width: 0px; height: 0px"
-      src=""
-      show-progress
-      :preview-src-list="srcList"
-      fit="cover"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted, isShallow } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { patientAPI, detectionAPI,historyAPI,getBackendUrl } from '@/services/api.js'
-import Header from '@/views/Header.vue'
-import { useAuthStore } from '@/stores/index.js'
-const props = defineProps({
-  patientId: {
-    required: false,
-    type: String,
-    default: null
-  }
-})
-const authStore = useAuthStore()
-const BACKEND_URL = getBackendUrl()
-const router = useRouter()
-const route = useRoute()
-const isHeader = ref(false)
-const patientId = ref("")
-// 响应式数据
-const patient = ref(null)
-const detectionRecords = ref([])
-const searchKeyword = ref('')
-const videoDialogVisible = ref(false)
-const screenshotDialogVisible = ref(false)
-const previewDialogVisible = ref(false)
-const currentVideo = ref(null)
-const currentScreenshots = ref([])
-const previewScreenshot = ref(null)
-const videoPlayerRef = ref()
-const dialogVideoVisible = ref(false)
-const headPoseMaxValues = ref({  
-  rotationLeftMax: 0,    // 旋转-左旋最大值
-  rotationRightMax: 0,   // 旋转-右旋最大值
-  tiltLeftMax: 0,        // 倾斜-左倾最大值
-  tiltRightMax: 0,       // 倾斜-右倾最大值
-  pitchUpMax: 0,         // 俯仰-上仰最大值
-  pitchDownMax: 0  })
-const userInfo = reactive({
-    username: '',
-    avatar: ''
-  })
-  
-// 计算属性
-const filteredRecords = computed(() => {
-  if (!searchKeyword.value) {
-    return detectionRecords.value
-  }
-  return detectionRecords.value.filter(record =>
-    record.id.toString().includes(searchKeyword.value) ||
-    record.doctor?.includes(searchKeyword.value) ||
-    formatDate(record.createdAt).includes(searchKeyword.value)
-  )
-})
-const footPressure = ref({})
-const profileInfo = ref([])
-const diagnosticForm = ref({
-  diagnosis_info: '',
-  treatment_info: '',
-  suggestion_info: ''
-})
-const srcList = ref([])
-const imageRef = ref()
-function showImage(row){ // 显示大屏图片
-
-  srcList.value = [row]
-  setTimeout(() => {
-    if(imageRef.value){
-      imageRef.value.showPreview()
-    }
-  }, 300)
-}
-function bigImgClick(row) { 
-  // 将Windows路径的反斜杠转换为Web URL的正斜杠
-  const webPath = row.normal_video_path.replace(/\\/g, '/')
-  videoUrl.value = BACKEND_URL + '/' + webPath
-  dialogVideoVisible.value = true
-}
-
-function getDayNum(date2,index){
-  // 解析日期字符串
-  const parseDate = (dateStr) => {
-    if (!dateStr) return new Date();
-    const parts = dateStr.split(' ');
-    const datePart = parts[0].split('-');
-    const timePart = parts[1].split(':');
-    
-    return new Date(
-      parseInt(datePart[0]),     // 年
-      parseInt(datePart[1]) - 1, // 月 (0-indexed)
-      parseInt(datePart[2]),     // 日
-      parseInt(timePart[0]),     // 小时
-      parseInt(timePart[1]),     // 分钟
-      parseInt(timePart[2])      // 秒
-    );
-  };
-
-  const d1 = new Date();
-  const d2 = parseDate(date2);
-
-  // 计算时间差（毫秒）
-  const timeDiff = Math.abs(d1.getTime() - d2.getTime());
-
-  // 转换为天数
-  const daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
-  
-  if(daysDiff == 0){
-    return  "当天";
-  }
-  return daysDiff + "天";
-}
-
-const sessionsInit = async () => {
-  try {
-    let params ={
-      patient_id: '202511270002'
-    }
-    // 导出报告逻辑
-    const response = await historyAPI.sessionsPage(params)
-    debugger
-    if (response.success) {
-      response.data.sessions.forEach(element => {
-        element.list = [{}]
-      });
-      profileInfo.value =  response.data.sessions
-    }
-  } catch (error) {
-    ElMessage.error('获取失败')
-  }
-}
-
-
-const videoUrl = ref("")
-const dialogVisible = ref(false)
-const handleClose = () => {
-  dialogVisible.value = false
-  dialogVideoVisible.value = false
-  videoUrl.value = ""
-}
-const detailsDialogVisible = ref(false)
-const selectedPatient = ref({})
-const detailshandleClose = () => {
-  detailsDialogVisible.value = false
-}
-// 添加计算年龄的方法
-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
-}
-
-// 方法
-const goBack = () => {
-  router.go(-1)
-}
-
-const editPatient = () => {
-  router.push(`/patient/edit/${patient.value.id}`)
-}
-
-const startDetection = () => {
-  router.push(`/detection/${patient.value.id}`)
-}
-
-const viewRecord = (record) => {
-  router.push(`/detection/record/${record.id}`)
-}
-
-const playVideo = (record) => {
-  currentVideo.value = {
-    url: record.videoUrl,
-    createdAt: record.createdAt,
-    duration: record.duration,
-    fileSize: record.videoFileSize
-  }
-  videoDialogVisible.value = true
-}
-
-const viewScreenshots = (record) => {
-  currentScreenshots.value = record.screenshots || []
-  screenshotDialogVisible.value = true
-}
-
-const previewScreenshotHandler = (screenshot, index) => {
-  previewScreenshot.value = screenshot
-  previewDialogVisible.value = true
-}
-
-const downloadScreenshot = (screenshot) => {
-  // 下载截图逻辑
-  const link = document.createElement('a')
-  link.href = screenshot.url
-  link.download = `screenshot_${screenshot.id}.png`
-  link.click()
-}
-
-const deleteScreenshot = async (screenshot) => {
-  try {
-    await ElMessageBox.confirm('确定要删除这张截图吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-
-    // 删除截图逻辑
-    ElMessage.success('截图已删除')
-    // 重新加载截图列表
-    loadDetectionRecords()
-  } catch {
-    // 用户取消
-  }
-}
-
-
-const exportReport = async (record) => {
-  try {
-    ElMessage.info('正在生成报告...')
-    // 导出报告逻辑
-    const response = await detectionAPI.exportReport(record.id)
-    if (response.success) {
-      ElMessage.success('报告导出成功')
-    }
-  } catch (error) {
-    ElMessage.error('报告导出失败')
-  }
-}
-
-const closeVideoDialog = () => {
-  if (videoPlayerRef.value) {
-    videoPlayerRef.value.pause()
-  }
-  videoDialogVisible.value = false
-  currentVideo.value = null
-}
-
-const closeScreenshotDialog = () => {
-  screenshotDialogVisible.value = false
-  currentScreenshots.value = []
-}
-
-const closePreviewDialog = () => {
-  previewDialogVisible.value = false
-  previewScreenshot.value = null
-}
-
-const getRecordStatusType = (status) => {
-  switch (status) {
-    case '已完成': return 'success'
-    case '进行中': return 'warning'
-    case '已中断': return 'danger'
-    default: return 'info'
-  }
-}
-
-const formatDate = (date) => {
-  const d = new Date(date)
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  return `${y}-${m}-${day}`
-}
-
-const formatTime = (timestamp) => {
-  return new Date(timestamp).toLocaleTimeString('zh-CN')
-}
-
-const formatDuration = (seconds) => {
-  const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = seconds % 60
-  return `${minutes}分${remainingSeconds}秒`
-}
-
-const formatFileSize = (bytes) => {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-const loadPatientInfo = async () => {
-  try {
-    const response = await patientAPI.getById(patientId.value)
-    if (response.success) {
-      patient.value = response.data
-      selectedPatient.value = response.data
-      console.log('加载患者信息成功:', response.data)
-    } else {
-      throw new Error(response.message)
-    }
-  } catch (error) {
-    console.error('加载患者信息失败:', error)
-    // 模拟数据
-    patient.value = {}
-  }
-}
-
-const loadDetectionRecords = async () => {
-  try {
-    const response = await detectionAPI.getByPatientId(patientId.value)
-    if (response.success) {
-      detectionRecords.value = response.data
-    } else {
-      throw new Error(response.message)
-    }
-  } catch (error) {
-    console.error('加载检测记录失败:', error)
-    // 模拟数据
-    detectionRecords.value = [
-      {
-        id: 1,
-        patientId: patientId.value,
-        status: '已完成',
-        duration: 300,
-        doctor: '李医生',
-        createdAt: '2024-01-20T14:20:00Z',
-        videoUrl: '/videos/detection_1.mp4',
-        videoFileSize: 52428800,
-        screenshots: [
-          {
-            id: 1,
-            timestamp: '2024-01-20T14:22:30Z',
-            thumbnail: '/data/patients/thumb_1.jpg',
-            url: '/data/patients/screenshot_1.png',
-            data: {
-              pitch: 2.5,
-              yaw: -1.2,
-              roll: 0.8,
-              leftPressure: 45,
-              rightPressure: 55
-            }
-          },
-          {
-            id: 2,
-            timestamp: '2024-01-20T14:24:15Z',
-            thumbnail: '/data/patients/thumb_2.jpg',
-            url: '/data/patients/screenshot_2.png',
-            data: {
-              pitch: 3.1,
-              yaw: -0.8,
-              roll: 1.2,
-              leftPressure: 48,
-              rightPressure: 52
-            }
-          }
-        ]
-      },
-      {
-        id: 2,
-        patientId: patientId.value,
-        status: '已完成',
-        duration: 240,
-        doctor: '王医生',
-        createdAt: '2024-01-18T11:30:00Z',
-        videoUrl: '/videos/detection_2.mp4',
-        videoFileSize: 41943040,
-        screenshots: []
-      }
-    ]
-  }
-}
-//修改诊断信息
-function editClick(row,index) {
-  diagnosticForm.value = {
-     id: row.id,
-     diagnosis_info: row.diagnosis_info,
-     treatment_info: row.treatment_info,
-     suggestion_info: row.suggestion_info,
-     status: row.status,
-     index: index
-  }
-  dialogVisible.value = true
-}
-//数据详情
-function patientdetails(row) {
-  detectionById(row)
-  detailsDialogVisible.value = true
-}
-async function handleDiagnosticInfo(status) {
-  try {
-    // 检查是否有活跃的会话ID
-    if (!diagnosticForm.value.id) {
-      throw new Error('缺少会话Id')
-    }
-    // 调用后端API采集检测数据
-    const response = await fetch(`${BACKEND_URL}/api/detection/${diagnosticForm.value.id}/save-info`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        diagnosis_info:diagnosticForm.value.diagnosis_info,
-        treatment_info:diagnosticForm.value.treatment_info,
-        suggestion_info:diagnosticForm.value.suggestion_info,
-        status:status,
-        id:diagnosticForm.value.id,
-      })
-    })
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-    }
-
-    const result = await response.json()
-    if (result.success) {
-      profileInfo.value[diagnosticForm.value.index].diagnosis_info = diagnosticForm.value.diagnosis_info
-      profileInfo.value[diagnosticForm.value.index].treatment_info = diagnosticForm.value.treatment_info
-      profileInfo.value[diagnosticForm.value.index].suggestion_info = diagnosticForm.value.suggestion_info
-      profileInfo.value[diagnosticForm.value.index].status = status
-      ElMessage.success({
-        message: '诊断信息成功',
-        duration: 5000
-      })
-      dialogVisible.value =false
-    } else {
-      throw new Error(result.message || '诊断信息失败')
-    }
-  } catch (error) {
-    ElMessage.error({
-      message: errorMessage,
-      duration: 5000
-    })
-  } finally {
-  }
-}
-
-// 暂停视频 
-const pauseVideo = (index) => {
-  if (videoPlayerRef.value) {
-    videoPlayerRef.value[index].pause()
-  }
-}
- 
- // 播放视频 
-const playNewVideo = () => {
-  if (videoPlayerRef.value) {
-    videoPlayerRef.value[index].play()
-  }
-}
-const profileForm = ref({})
-function detectionById(row) { 
-  footPressure.value = {}
-  headPoseMaxValues.value = {
-    rotationLeftMax: 0,    // 旋转-左旋最大值
-    rotationRightMax: 0,   // 旋转-右旋最大值
-    tiltLeftMax: 0,        // 倾斜-左倾最大值
-    tiltRightMax: 0,       // 倾斜-右倾最大值
-    pitchUpMax: 0,         // 俯仰-上仰最大值
-    pitchDownMax: 0 
-  }
- 
-  historyAPI.detectionById(row.id).then((response)=>{
-    if(response.success){
-      profileForm.value = response.data
-      if(response.data.foot_data !=null){
-        footPressure.value = response.data.foot_data
-      }
-      if(response.data.head_pose !=null){
-        headPoseMaxValues.value = response.data.head_pose.headPoseMaxValues
-      }
-
-      
-      
-    }
-  }).catch(()=>{
-
-  })
-}
-const deleteClick = async (row,row2) => {
-  detectionLatestList(row.id)
-  ElMessageBox.confirm(
-    '确定义删除此条数据?',
-    '提示',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  ).then(() => {
-      historyAPI.detectionDelById(row2.id).then((response)=>{
-        if(response.success){
-          ElMessage.success({
-            message: response.message,
-            duration: 5000
-          });
-          sessionsInit()
-          // detectionLatestList(row.id)
-        }
-      }).catch(()=>{
-      })
-    })
-}
-
-
-const sessionsDelById = async (row) => {
-  ElMessageBox.confirm(
-    '确定义删除此条数据?',
-    '提示',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  ).then(() => {
-      historyAPI.sessionsDelById(row.id).then((response)=>{
-        if(response.success){
-          ElMessage.success({
-            message: response.message,
-            duration: 5000
-          });
-          sessionsInit()
-        }
-      }).catch(()=>{
-      })
-    })
-}
-
-const  detectionLatestList = async(id)=>{
-  const response = await historyAPI.detectionLatestList(id)
-  console.log(response)
-  // historyAPI.detectionLatestList(id).then((response)=>{
-  //   if(response.success){
-  //     console.log(response)
-  //   }
-  // }).catch(()=>{
-  // })
-}
-// // 其他控制方法
-// const togglePlayPause = () => {
-//   if (videoPlayerRef.value) {
-//     if (videoPlayerRef.value.paused) {
-//       videoPlayerRef.value.play()
-//     } else {
-//       videoPlayerRef.value.pause()
-//     }
-//   }
-// }
-// 生命周期
-onMounted(() => {
-  if(props.patientId != "" && props.patientId != null ){
-    patientId.value = props.patientId
-    isHeader.value = true
-  }else{
-    isHeader.value = false
-    patientId.value = route.params.id
-  }
-  loadPatientInfo()
-  sessionsInit()
-  if (authStore.currentUser) {
-    Object.assign(userInfo, {
-      username: authStore.currentUser.name,
-      avatar: authStore.currentUser.avatar || ''
-    })
-  }
-  // loadDetectionRecords()
-})
-</script>
-
-<style scoped>
-.content-info {
-  display: flex;
-  padding: 10px 0px 10px 15px;
-  min-height: 700px;
-}
-
-.content-left {
-  width: 87px;
-  min-width: 87px;
-  height: 100%;
-  background: inherit;
-  background-color: rgba(85, 85, 85, 0.6);
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 15px;
-  color: #FFFFFF;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  /* 垂直排列子元素 */
-  justify-content: center;
-  /* 垂直居中 */
-  align-items: center;
-  /* 水平居中 */
-}
-
-.content-left-text1 {}
-
-.content-left-text2 {}
-
-.content-left-text3 {}
-
-.content-center {
-  position: relative;
-  width: calc(100% - 327px);
-  margin: 0px 15px;
-  background-color: rgba(85, 85, 85, 0.6);
-}
-
-.content-right {
-  width: 260px;
-  min-width: 260px;
-  height: 100%;
-  /* background-color: rgba(85, 85, 85, 0.6); */
-}
-
-.content-right-top {
-  width: 100%;
-  height: 50%;
-  background-color: rgba(85, 85, 85, 0.6);
-}
-
-.content-right-top-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #ffffff;
-  padding: 15px;
-}
-
-.content-right-top-text {
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 16px;
-  color: #FFFFFF;
-}
-
-.content-right-top-text2 {
-  width: 62px;
-  height: 40px;
-  line-height: 40px;
-  background: rgba(230, 162, 60, 0.1);
-  color: #E6A23C;
-  text-align: center;
-  border-radius: 5px;
-  border: 1px solid rgba(230, 162, 60, 0.3);
-}
-.content-right-top-text3 {
-  width: 62px;
-  height: 40px;
-  line-height: 40px;
-  background: rgba(103, 194, 58, 0.1);
-  color: rgb(103, 194, 58);
-  text-align: center;
-  border-radius: 5px;
-  border: 1px solid rgba(103, 194, 58, 0.3);
-}
-
-
-.content-right-top-content {
-  height: calc(100% - 75px);
-  overflow: auto;
-}
-
-:deep(.el-textarea__inner) {
-  background: transparent;
-  color: #ffffff;
-}
-
-:deep(.el-form-item__label) {
-  color: #ffffff;
-}
-
-:deep(.el-textarea.is-disabled .el-textarea__inner) {
-  background: transparent;
-  color: #ffffff;
-}
-
-.content-right-bottom {
-  margin-top: 10px;
-  width: 100%;
-  height: calc(50% - 10px);
-  background-color: rgba(85, 85, 85, 0.6);
-}
-
-.content-right-bottom-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #ffffff;
-  padding: 15px 15px 0px;
-}
-
-.content-right-bottom-text {
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  font-size: 16px;
-  color: #FFFFFF;
-}
-
-.content-right-bottom-content {
-  height: calc(100% - 75px);
-  overflow: auto;
-  padding: 0px 15px;
-}
-
-.content-right-bottom-content-box {
-  color: #ffffff;
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-}
-
-.content-right-bottom-img {
-  width: 180px;
-  height: 74px;
-  border: 1px solid #434343;
-  margin-right: 10px;
-}
-
-.dialog-title {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  color: #ffffff;
-}
-
-.dialog-title-item {
-  display: flex;
-  width: 200px;
-  color: #ffffff;
-}
-
-:deep(.el-dialog) {
-  background-color: #1D1b26;
-  margin-bottom: 0px;
-}
-
-:deep(.el-dialog__title) {
-  color: #ffffff;
-}
-
-:deep(.el-checkbox__inner) {
-  width:20px;
-  height: 20px;
-  background: transparent;
-}
-
-
-.patient-profile-container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: #000000;
-}
-.videoDialog-patient-profile{
-  height: calc(100vh - 80px) ;
-}
-
-.nav-container {
-  display: flex;
-  width: 100%;
-  padding: 15px 20px 0px;
-  gap: 20px;
-}
-
-.nav-container-title {
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  color: #FFFFFF;
-  font-size: 18px;
-  width: calc(100% - 500px);
-  display: flex;
-  cursor: pointer;
-}
-
-.nav-container-info {
-  display: flex;
-  font-size: 16px;
-  color: #FFFFFF;
-  font-family: 'Arial Normal', 'Arial', sans-serif;
-}
-
-.main-content {
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  width: 100%;
-}
-
-.patient-info-card,
-.detection-records-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #e4e7ed;
-}
-
-.card-header h2 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 18px;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-}
-
-.info-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 15px;
-}
-
-.info-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.info-item label {
-  font-weight: 500;
-  color: #909399;
-  min-width: 80px;
-}
-
-.info-item span {
-  color: #2c3e50;
-}
-
-.records-list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.record-item {
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 20px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.record-item:hover {
-  border-color: #409eff;
-  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
-}
-
-.record-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.record-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.record-title h4 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 16px;
-}
-
-.record-time {
-  color: #909399;
-  font-size: 14px;
-}
-
-.record-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.record-stats {
-  display: flex;
-  gap: 20px;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #909399;
-}
-
-.stat-value {
-  font-size: 14px;
-  color: #2c3e50;
-  font-weight: 500;
-}
-
-.record-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.loading-container {
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.video-container {
-  text-align: center;
-}
-
-.video-info {
-  margin-top: 15px;
-  text-align: left;
-  color: #606266;
-}
-
-.screenshot-container {
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.screenshot-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 15px;
-}
-
-.screenshot-item {
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: transform 0.3s;
-}
-
-.screenshot-item:hover {
-  transform: scale(1.05);
-}
-
-.screenshot-item img {
-  width: 100%;
-  height: 150px;
-  /* object-fit: cover; */
-}
-
-.screenshot-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-  color: white;
-  padding: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.screenshot-time {
-  font-size: 12px;
-}
-
-.screenshot-actions {
-  display: flex;
-  gap: 5px;
-}
-
-.preview-container {
-  text-align: center;
-}
-
-.preview-image {
-  max-width: 100%;
-  max-height: 60vh;
-  border-radius: 8px;
-}
-
-.preview-info {
-  margin-top: 20px;
-  text-align: left;
-  color: #606266;
-}
-
-.data-display {
-  margin-top: 10px;
-  padding: 15px;
-  background: #f5f7fa;
-  border-radius: 6px;
-}
-
-.data-item {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.data-item:last-child {
-  margin-bottom: 0;
-}
-
-.main-dashboard-top {
-  display: flex;
-  width: 100%;
-  padding: 15px 20px 0px;
-  gap: 20px;
-}
-
-.main-dashboard-top-title {
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-style: normal;
-  color: #FFFFFF;
-  font-size: 18px;
-  width: calc(100% - 500px);
-}
-
-.main-dashboard-top-info {
-  display: flex;
-  font-size: 16px;
-  color: #FFFFFF;
-  font-family: 'Arial Normal', 'Arial', sans-serif;
-}
-
-.patient-detail-box {
-  background: rgb(85, 85, 85);
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  color: #fff;
-}
-
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: 15px;
-  /* border-bottom: 1px solid #434343; */
-}
-
-.detail-header h3 {
-  margin: 0;
-  color: #2c3e50;
-  font-size: 18px;
-}
-
-.detail-content {
-  flex: 1;
-  margin-bottom: 20px;
-}
-
-.module-title {
-  width: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* border: 2px solid #ffffff; */
-  background: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216));
-  border-radius: 20px;
-  font-size: 16px;
-  font-weight: bold;
-  color: #ffffff;
-  padding: 2px;
-}
-
-.module-title-text {
-  display: flex;
-  align-items: center;
-  width: 116px;
-  background: rgb(85, 85, 85);
-  border-radius: 20px;
-  padding: 0px 25px;
-}
-
-.basic-info-box {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  height: 100%;
-}
-
-.basic-info-content {
-  display: flex;
-  justify-content: center;
-  box-sizing: border-box;
-  padding-top: 30px;
-  width: 100%;
-}
-
-.basic-info-text {
-  width: 33%;
-  text-align: center;
-  font-size: 16px;
-}
-
-.basic-info-textcolor {
-  color: #30F3FF;
-  padding-bottom: 8px;
-}
-
-:deep(.detailsDialog.el-dialog) {
-  background-color: rgba(85, 85, 85, 0.9);
-}
-
-.patient-profile-dialog-box {
-  background-color: rgba(85, 85, 85, 0.6);
-  padding: 20px;
-  border-radius: 5px;
-  /* height: 550px; */
-  margin-top: 20px;
-}
-.detail-head-content{
-  display: flex;
-  color: #ffffff;
-  padding: 20px;
-  font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
-  font-weight: 700;
-  font-size:16px;
-}
-.detail-head-text{
-  margin: 0px 20px;
-}
-.bigImgBox{
-  position: absolute;
-  bottom: 100px;
-  right: 30px;
-  cursor: pointer;
-}
-
-
-.foot-container-marginleft {
-  margin-left: 40px;
-}
-.foot-container-paddingcolor{
-  padding-left: 10px;
-  color: #ff9900;
-  font-size: 22px;
-  font-weight: 700;
-}
-.foot-container-shuline{
-  width: 0px;
-  height:  calc(100% + 60px);
-  border-left: 1px dashed red;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-}
-.foot-container-hengline{
-  width: calc(100% );
-  height: 0;
-  border-top: 1px dashed red;
-  position: absolute;
-  top: 0;
-  left: 0px;
-  right: 10;
-  bottom: 0;
-  margin: auto;
-}
-.foot-container-margintop {
-  margin-top: 80px;
-}
-.head-text-color{
-  color: #ff9900;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/renderer/src/views/PhotoAlbum.vue b/frontend/src/renderer/src/views/PhotoAlbum.vue
index 68bfefe0..32380466 100644
--- a/frontend/src/renderer/src/views/PhotoAlbum.vue
+++ b/frontend/src/renderer/src/views/PhotoAlbum.vue
@@ -32,6 +32,7 @@
       <div style="display: flex;justify-content: flex-end;padding-right: 58px;padding-top: 20px;">
         <div  
           :class="checkboxGroup.length  == 0? 'delButton':'delButton-selectedbutotn'" @click="delImgClick">
+          <div :class="checkboxGroup.length  == 0?'delButton-icon':'delButton-selectedicon'"></div>
           <div>删除</div>
         </div>
       </div>
@@ -410,5 +411,16 @@ onMounted(() => {
   background-color: #14aaff;
   color: #fff;
 }
-
+.PhotoAlbum-bg .delButton-icon{
+ width: 18px;
+ height: 18px;
+ background-image: url(@/assets/process/del-disabled.png);
+ margin-right:5px ;
+}
+.delButton-selectedicon{
+  width: 18px;
+  height: 18px;
+  background-image: url(@/assets/process/del-selected.png);
+  margin-right:5px ;
+}
 </style>
\ No newline at end of file