添加刷新按钮

frontend/src/renderer/src/views/Detection.vue

@@ -65,9 +65,15 @@
                 身体姿态
               </div>
             </div>
-            <div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }" 
+            <div style="display: flex; align-items: center;">
-            style="font-size: 14px;">
+              <img src="@/assets/refresh.png" title="刷新身体姿态数据"
-              {{ femtoboltStatus }}</div>
+              @click="refreshClick('femtobolt')"
+              alt="" style="margin-right: 5px;cursor: pointer;">
+                <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;">
             <!-- 使用深度相机视频流替换静态图片 -->
@@ -85,29 +91,36 @@
             <div style="display: flex;">
               <div class="module-header">
                 <div style="display: flex;align-items: center;">
-                  <div class="module-title" style="width:230px">
+                  <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>
-                    <el-button type="primary" class="start-btn" @click="calibrationClick" :disabled="isRecording"
+                    <div>
-                      style="background-color: #0099ff;font-size: 14px;
+                      <el-button type="primary" class="start-btn" @click="calibrationClick" :disabled="isRecording"
-                           --el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
+                          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>
+                        <el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
+                        style="background-color: #0099ff;font-size: 14px;margin-left: 15px;
+                              --el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
+                        清零
+                      </el-button>
+
+                    </div>
+                    
                   </div>
 
                 </div>
                 <div style="display: flex;align-items: center;">
+                  <img src="@/assets/refresh.png" title="刷新头部姿态数据"
+                    @click="refreshClick('imu')"
+                    alt="" style="margin-right: 5px;cursor: pointer;">
                   <div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
                     imuStatus
                   }}</div>
-                  <el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
+                 
-                    style="background-color: #0099ff;font-size: 14px;margin-left: 15px;
-                           --el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
-                    清零
-                  </el-button>
-
                 </div>
               </div>
 
@@ -169,8 +182,13 @@
                     足部压力
                   </div>
                 </div>
-                <div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
+                <div style="display: flex;align-items: center;">
-                  pressureStatus }}</div>
+                  <img src="@/assets/refresh.png" title="刷新足部压力数据"
+                      @click="refreshClick('pressure')"
+                      alt="" style="margin-right: 5px;cursor: pointer;">
+                  <div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
+                    pressureStatus }}</div>
+                </div>
               </div>
             </div>
             <div style="
@@ -331,7 +349,12 @@
                     视频
                   </div>
                 </div>
-                <div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div>
+                <div style="display: flex;align-items: center;">
+                  <img src="@/assets/refresh.png" title="刷新视频数据"
+                    @click="refreshClick('camera')"
+                    alt="" style="margin-right: 5px;cursor: pointer;">
+                  <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)">
@@ -597,6 +620,7 @@ let cameraSocket = null
 let femtoboltSocket = null
 let imuSocket = null
 let pressureSocket = null
+let restartSocket = null
 let frameCount = 0
 
 // 后端服务器地址配置
@@ -870,6 +894,14 @@ const savePatient = async () => {
   }
 }
 function routeTo(path) {
+  if( isPreventCombo.value == true){
+    setTimeout(() => {
+      isPreventCombo.value = false
+    }, 2000);
+    ElMessage.warning(`请勿连击点击刷新按钮`)
+    return
+  }
+  isPreventCombo.value = true
   router.push(`/`)
 }
 function cameraUpdate() {  // 相机设置数据更新弹框
@@ -941,7 +973,12 @@ function connectWebSocket() {
       pressureSocket.disconnect()
       pressureSocket = null
     }
+    if (restartSocket) {
+      restartSocket.disconnect()
+      restartSocket = null
+    }
 
+    
     // 创建主Socket.IO连接
     socket = io(BACKEND_URL, {
       transports: ['websocket', 'polling'],  // 只使用polling，与后端保持一致
@@ -964,7 +1001,7 @@ function connectWebSocket() {
     femtoboltSocket = devicesSocket
     imuSocket = devicesSocket
     pressureSocket = devicesSocket
-
+    restartSocket = devicesSocket
     // 主连接事件
     socket.on('connect', () => {
       console.log('✅ 主WebSocket连接成功！Socket ID:', socket.id)
@@ -1046,7 +1083,12 @@ function connectWebSocket() {
       tempInfo.value.camera_frame = data
       displayFrame(data.image)
     })
+    devicesSocket.on('device_restart_message', (data) => {
+      debugger
+    })
    
+
+
     
     devicesSocket.on('femtobolt_frame', (data) => {
       tempInfo.value.femtobolt_frame = data
@@ -1147,6 +1189,8 @@ function disconnectWebSocket() {
     femtoboltSocket = null
     imuSocket = null
     pressureSocket = null
+    restartSocket = null
+    
     console.log('🔗 统一设备命名空间连接已断开')
   }
   
@@ -1626,7 +1670,14 @@ async function handleStartStop() {
     ElMessage.warning('WebSocket未连接，无法操作')
     return
   }
-
+  if( isPreventCombo.value == true){
+    setTimeout(() => {
+      isPreventCombo.value = false
+    }, 2000);
+    ElMessage.warning(`请勿连击点击刷新按钮`)
+    return
+  }
+  isPreventCombo.value = true
   if (isStart.value) {
     // 停止录制视频
     await stopRecord()
@@ -2043,7 +2094,41 @@ const stopRecord = async () => {  // 停止录屏
 }
 function routerClick(){
   historyDialogVisible.value = true
-  // router.push(`/patient/${patientInfo.value.id}`)
+}
+
+
+const isPreventCombo =ref(false) // 防止连击
+
+// 单个刷新数据
+function refreshClick(type) { 
+  if( isPreventCombo.value == true){
+    setTimeout(() => {
+      isPreventCombo.value = false
+    }, 5000);
+    ElMessage.warning(`请勿连击点击刷新按钮`)
+    return
+  }
+  isPreventCombo.value = true
+  if (devicesSocket && devicesSocket.connected) {
+    console.log('🚀 发送重启设备请求...')
+    debugger
+    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>