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

---
 frontend/src/renderer/src/views/Detection.vue | 165 +++++++++++-------
 frontend/src/renderer/src/views/Header.vue    |   2 +-
 2 files changed, 102 insertions(+), 65 deletions(-)

diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index d0bccf91..9ffbc9fe 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/frontend/src/renderer/src/views/Detection.vue
@@ -18,7 +18,7 @@
             class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
                   --el-button-border-color: #409EFF;
               --el-button-border-color: transparent;">
-            {{ isConnected ? '开始' : '连接中saveRecording...' }}
+            {{ isConnected ? '开始' : '连接中...' }}
           </el-button>
           <!-- handleStartStop -->
           <el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
@@ -30,7 +30,7 @@
                   --el-button-border-color: #409EFF;
               --el-button-border-color: transparent ">
             保存数据
-          </el-button>         
+          </el-button>
         </div>
 
         <div class="top-bar-right">
@@ -49,18 +49,19 @@
       <div id="detectare" class="content-grid">
         <!-- 身体姿态模块 -->
         <div class="module-card body-posture" style="width: 25%; ">
-          <div class="module-header">
+          <div class="module-header" style="justify-content: flex-start;">
             <div class="module-title">
               <div class="module-title-bg">
                 <img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
                 身体姿态
               </div>
             </div>
+            <div style="margin-left: 10px;font-size: 14px;">{{ videoStatus }}</div>
           </div>
           <div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
             <!-- 使用深度相机视频流替换静态图片 -->
             <img :src="depthCameraImgSrc || '@/assets/posture.png'" alt="深度相机视频流"
-              style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;">
+              style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#2C2C2C;">
           </div>
         </div>
         <div class="body-posture" style="width: 44%;display: flex;
@@ -68,15 +69,18 @@
             align-content: space-between;
         ">
 
-          <div class="module-card" style=" height:420px">
+          <div class="module-card" style=" height:50%;min-height: 425px;margin-bottom: 5px;">
             <!-- 头部姿态模块 -->
             <div style="display: flex;">
               <div class="module-header">
-                <div class="module-title">
-                  <div class="module-title-bg">
-                    <img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
-                    头部姿态
+                <div style="display: flex;align-items: center;">
+                  <div class="module-title">
+                    <div class="module-title-bg">
+                      <img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
+                      头部姿态
+                    </div>
                   </div>
+                  <div style="margin-left: 10px;font-size: 14px;">{{ imuStatus }}</div>
                 </div>
                 <el-button type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
                    --el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;">
@@ -115,8 +119,8 @@
             </div>
             <!-- 历史数据表格 -->
             <div class="gauge-table-title">
-                历史数据..
-              </div>
+              历史数据..
+            </div>
             <div style="display: flex;justify-content: center;padding: 0px 25px;">
               <el-table :data="historyData" style="width: 96%;height: 160px;overflow: auto;">
                 <el-table-column prop="id" label="ID" width="60" />
@@ -136,16 +140,17 @@
             </div>
           </div>
           <!-- 足部压力模块 -->
-          <div class="module-card" style=" height: calc(100% - 426px); min-height: calc(335px);">
+          <div class="module-card" style=" height:50%;">
 
             <div style="display: flex;">
-              <div class="module-header">
+              <div class="module-header" style="justify-content: flex-start;">
                 <div class="module-title">
                   <div class="module-title-bg">
                     <img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
                     足部压力
                   </div>
                 </div>
+                <div style="margin-left: 10px;font-size: 14px;">{{ pressureStatus }}</div>
               </div>
             </div>
             <div class="foot-container">
@@ -194,13 +199,12 @@
           </div>
         </div>
 
-
         <div class="body-posture" style="width: 30%;display: flex;
           flex-wrap: wrap;
           align-content: space-between;
         ">
           <!-- 基础信息模块 -->
-          <div class="module-card" style="padding-bottom: 40px; height: calc(364px);">
+          <div class="module-card" style="padding-bottom: 40px; height: 50%;min-height: 425px;margin-bottom: 5px;">
             <div style="display: flex;">
               <div class="module-header">
                 <div class="module-title">
@@ -276,20 +280,21 @@
 
           </div>
           <!-- 视频模块 -->
-          <div class="module-card" style="height: calc(100% - 370px);min-height: 324px;">
+          <div class="module-card" style="height: 50%;">
             <div style="display: flex;margin-bottom: 20px;">
-              <div class="module-header">
+              <div class="module-header" style="justify-content: flex-start;">
                 <div class="module-title">
                   <div class="module-title-bg">
                     <img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
                     视频
                   </div>
                 </div>
+                <div style="margin-left: 10px;font-size: 14px;">{{ videoStatus }}</div>
               </div>
             </div>
             <!-- 使用img元素显示视频流（优化的Data URL方案） -->
             <img :src="rtspImgSrc" alt=""
-              style="width: 100%;height: calc(100% - 60px);object-fit:contain;background:#000;" />
+              style="width: 100%;height: calc(100% - 60px);object-fit:contain;background:#2C2C2C;" />
           </div>
         </div>
       </div>
@@ -333,7 +338,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted,nextTick } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter, useRoute } from 'vue-router'
 import { io } from 'socket.io-client'
@@ -394,7 +399,7 @@ const historyData = ref([
   { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
 ])
 const chartoption = ref({
-  backgroundColor:'#000000',
+  backgroundColor: '#000000',
   grid: { top: 0, right: 0, bottom: 0, left: 0 },
   series: [
     {
@@ -417,34 +422,49 @@ const chartoption = ref({
         show: false,
       },
       pointer: {
-        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
-        length: '75%',
-        width: 10,
-        offsetCenter: [0, '5%']
+        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: 5
+          width: 3,
+          color:[[1, '#0089ff']]
         }
       },
       axisTick: {
         splitNumber: 2,
         lineStyle: {
           width: 2,
-          color: '#999'
+          color: '#ffffff'
         }
       },
       splitLine: {
         length: 12,
         lineStyle: {
-          width: 3,
-          color: '#999'
+          width: 4,
+          color: '#0089ff'
         }
       },
       axisLabel: {
+        //刻度颜色
         distance: 10,
-        color: '#999',
+        color: '#ffffff',
         fontSize: 10
       },
       title: {
@@ -455,12 +475,15 @@ const chartoption = ref({
       },
       data: [
         {
-          value: 100
+          value: 20
         }
       ]
     }
   ]
 })
+const videoStatus = ref('未连接')
+const pressureStatus = ref('未连接')
+const imuStatus = ref('未连接')
 function routeTo(path) {
   router.push(`/`)
 }
@@ -517,10 +540,15 @@ function connectWebSocket() {
       }
     })
 
-    
+
     // 监听视频状态事件
     socket.on('video_status', (data) => {
-      console.log('📺 视频状态:', data)
+      // console.log('📺 视频状态:', data)
+      if (data.status == 'started') {
+        videoStatus.value = '已连接'
+      } else {
+        videoStatus.value = '未连接'
+      }
     })
 
     // 监听视频帧数据
@@ -534,30 +562,32 @@ function connectWebSocket() {
       displayDepthCameraFrame(data.image)
     })
 
-   
+
     // 监听IMU状态事件
     socket.on('imu_status', (data) => {
-      console.log('📡 IMU状态:', data)
+      // console.log('📡 IMU状态:', data)
       if (data.status === 'success') {
-        ElMessage.success(data.message)
+        imuStatus.value = '已连接'
       } else {
-        ElMessage.error(data.message)
+        imuStatus.value = '未连接'
       }
     })
 
     // 监听IMU头部姿态数据
     socket.on('imu_data', (data) => {
-      console.log('🎯 IMU头部姿态数据:', data)
+      // console.log('🎯 IMU头部姿态数据:', data)
       handleIMUData(data)
     })
 
     // 监听压力传感器状态事件
     socket.on('pressure_status', (data) => {
-      console.log('📡 压力传感器状态:', data)
+      // console.log('📡 压力传感器状态:', data)
       if (data.status === 'success') {
-        ElMessage.success(data.message)
+        pressureStatus.value = '已连接'
+        // ElMessage.success(data.message)
       } else {
-        ElMessage.error(data.message)
+        pressureStatus.value = '未连接'
+        // ElMessage.error(data.message)
       }
     })
 
@@ -567,7 +597,7 @@ function connectWebSocket() {
       handlePressureData(data)
     })
 
-     // 监听错误事件
+    // 监听错误事件
     socket.on('error', (error) => {
       console.error('❌ Socket错误:', error)
     })
@@ -648,10 +678,10 @@ function handleIMUData(data) {
     if (data && data.euler_angles) {
       // 更新头部姿态数据
       console.log('🎯 更新IMU头部姿态数据:', data.euler_angles)
-      
+
       // 这里可以添加数据可视化逻辑
       // 例如更新图表或显示数值
-      
+
       // 如果有图表组件，可以在这里更新数据
       // updateHeadPoseChart(data.euler_angles)
     }
@@ -666,10 +696,10 @@ function handlePressureData(data) {
     if (data && data.pressure_data) {
       // 更新足部压力数据
       console.log('👣 更新压力传感器数据:', data.pressure_data)
-      
+
       // 这里可以添加数据可视化逻辑
       // 例如更新图表或显示压力分布
-      
+
       // 如果有图表组件，可以在这里更新数据
       // updatePressureChart(data.pressure_data)
     }
@@ -1317,8 +1347,8 @@ async function stopDetection() {
     // 如果正在录制，停止录制
     if (isRecording.value) {
       stopRecording()
-    }    
-    isStart.value = false    
+    }
+    isStart.value = false
 
   } catch (error) {
     console.error('❌ 停止检测失败:', error)
@@ -1392,7 +1422,7 @@ const initchart = () => {
       }
       headCharts = echarts.init(chartDom);
       headCharts.setOption(chartoption.value);
-      
+
       // 添加窗口大小调整监听器
       window.addEventListener('resize', () => {
         if (headCharts) {
@@ -1410,7 +1440,7 @@ onMounted(() => {
   loadPatientInfo()
 
   // 组件挂载时连接WebSocket并自动开始推流
-  connectWebSocket()
+  // connectWebSocket()
 
   // 监听页面关闭或刷新事件
   window.addEventListener('beforeunload', handleBeforeUnload)
@@ -1433,7 +1463,7 @@ onUnmounted(() => {
   }
 
   // 停止视频播放并断开连接
-  stopRtsp()
+  stopVideoStream()
 
   // 断开WebSocket连接
   if (socket) {
@@ -1499,7 +1529,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px 20px;
+  padding: 10px 20px;
   background-color: #000000;
 }
 
@@ -1548,7 +1578,7 @@ onUnmounted(() => {
   display: flex;
   padding: 0px 10px;
   justify-content: space-between;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 120px);
   /* flex: 1;
 
   display: grid;
@@ -1912,30 +1942,37 @@ onUnmounted(() => {
   background: #1D1b26;
   color: #ffffff;
 }
+
 :deep(.el-table .el-table__cell) {
   padding: 4px 0px;
 }
 </style>
 <style>
-.dashboard-container .el-table{
+.dashboard-container .el-table {
   background: transparent !important;
 }
-.dashboard-container .el-table tr{
-  background-color: transparent !important;
-}
-.dashboard-container .el-table thead.is-group th.el-table__cell{
-  background-color: transparent !important;
-}
-.dashboard-container .cell{
-  color: #fff;
-}
-.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
+
+.dashboard-container .el-table tr {
   background-color: transparent !important;
 }
 
-.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+.dashboard-container .el-table thead.is-group th.el-table__cell {
   background-color: transparent !important;
 }
+
+.dashboard-container .cell {
+  color: #fff;
+}
+
+.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+  background-color: transparent !important;
+}
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  background-color: transparent !important;
+}
+
 .top-bar .el-button {
   height: 44px;
   border-radius: 25px;
diff --git a/frontend/src/renderer/src/views/Header.vue b/frontend/src/renderer/src/views/Header.vue
index 8f99b91e..ce0a9e59 100644
--- a/frontend/src/renderer/src/views/Header.vue
+++ b/frontend/src/renderer/src/views/Header.vue
@@ -104,7 +104,7 @@
   }
   
   .header {
-    height: 60px;
+    height: 50px;
     background: #000000;
     border-bottom: 1px solid #434343;
     display: flex;