样式修改

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)); 
@@ -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(`/`)
 }
@@ -520,7 +543,12 @@ function connectWebSocket() {
 
     // 监听视频状态事件
     socket.on('video_status', (data) => {
-      console.log('📺 视频状态:', data)
+      // console.log('📺 视频状态:', data)
+      if (data.status == 'started') {
+        videoStatus.value = '已连接'
+      } else {
+        videoStatus.value = '未连接'
+      }
     })
 
     // 监听视频帧数据
@@ -537,27 +565,29 @@ function connectWebSocket() {
 
     // 监听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)
     })
@@ -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;

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;