修改样式

frontend/src/renderer/src/views/Dashboard.vue

@@ -33,7 +33,7 @@
             </div>
           </div>
           <el-table ref="tableRef" :data="filteredPatients" style="width: 100%" border @cell-click="selectPatient"
-            highlight-current-row>
+            highlight-current-row :header-cell-style="{color:'#000000 !important'}">
             <el-table-column prop="name" label="姓名" min-width="60" />
             <el-table-column prop="id" label="测试者ID" min-width="60" />
             <el-table-column prop="updated_at" label="最后一次检查时间" min-width="60" />
@@ -260,6 +260,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { patientAPI } from '../services/api.js'
 import { useAuthStore } from '../stores/index.js'
 import Header from '@/views/Header.vue'
+import { color } from 'echarts'
 const router = useRouter()
 const authStore = useAuthStore()
 
@@ -1083,6 +1084,9 @@ function delClick(id) {
   border-color: rgba(215, 215, 215, 1);
   color: #FFFFFF;
 }
+:deep(.el-table th){
+  color: #000000 !important;
+}
 </style>
 
 
@@ -1153,7 +1157,7 @@ function delClick(id) {
 }
 
 .dashboard-container.dashboard-container-home .el-dialog {
-  background-color: rgba(85, 85, 85, 0.9);
+  background-color: rgba(85, 85, 85, 1);
 }
 
 .dashboard-container.dashboard-container-home .el-dialog__title {

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

@@ -11,9 +11,10 @@
             <!-- <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> -->
             <span class="page-title">实时检测</span>
           </div>
-          <!-- <div >
-              {{ formattedTime  }}
-            </div> -->
+          <div v-if="isRecording" class="icon-container">
+            <img src="@/assets/record.png" class="blink-icon" :class="{ blinking: isRunning }" alt="">
+            <div>{{ formattedTime }}</div>
+          </div>
           <el-button v-if="!isRecording" @click="handleStartStop" :disabled="!isConnected" type="primary"
             class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 
                   --el-button-border-color: #409EFF;
@@ -159,7 +160,8 @@
               <div class="foot-container-left" style="font-size: 14px;">
                 <div>
                   <span>左前足</span>
-                  <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.left_front }}</span>
+                  <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.left_front
+                  }}</span>
                 </div>
                 <div class="foot-container-margintop">
                   <span>左后足</span>
@@ -179,24 +181,26 @@
                 <div style="display: flex;justify-content: center;margin-top: 8px;font-size: 14px;">
                   <div>
                     <span>左足总压力</span>
-                    <span style="font-size: 24px;"
-                      class="foot-container-paddingcolor">{{ footPressure.left_total }}</span>
+                    <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.left_total
+                    }}</span>
                   </div>
                   <div class="foot-container-marginleft">
                     <span>右足总压力</span>
-                    <span style="font-size: 24px;"
-                      class="foot-container-paddingcolor">{{ footPressure.right_total }}</span>
+                    <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_total
+                    }}</span>
                   </div>
                 </div>
               </div>
               <div class="foot-container-right" style="font-size: 14px;">
                 <div>
                   <span>右前足</span>
-                  <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_front }}</span>
+                  <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_front
+                  }}</span>
                 </div>
                 <div class="foot-container-margintop">
                   <span>右后足</span>
-                  <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_rear }}</span>
+                  <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_rear
+                  }}</span>
                 </div>
               </div>
             </div>
@@ -342,7 +346,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter, useRoute } from 'vue-router'
 import { io } from 'socket.io-client'
@@ -390,7 +394,6 @@ let frameCount = 0
 
 // 后端服务器地址配置
 const BACKEND_URL = getBackendUrl()
-const formattedTime = ref(0)
 const dialogVisible = ref(false)
 const handleClose = () => {
   dialogVisible.value = false
@@ -488,6 +491,46 @@ const chartoption = ref({
 const videoStatus = ref('未连接')
 const pressureStatus = ref('未连接')
 const imuStatus = ref('未连接')
+// 计时器状态
+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 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);
+
+    // 触发闪烁效果
+    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;
+};
 function routeTo(path) {
   router.push(`/`)
 }
@@ -711,27 +754,27 @@ function handleIMUData(data) {
         rotationCharts.setOption({
           series: [{
             data: [{
-              value:headPose.rotation.toFixed(1)
+              value: headPose.rotation.toFixed(1)
             }]
-          }] 
+          }]
         })
       }
       if (pitchCharts) {
         pitchCharts.setOption({
           series: [{
             data: [{
-              value:headPose.pitch.toFixed(1)
-            }] 
-          }] 
+              value: headPose.pitch.toFixed(1)
+            }]
+          }]
         })
       }
       if (tiltCharts) {
         tiltCharts.setOption({
           series: [{
             data: [{
-              value:headPose.tilt.toFixed(1)
-            }] 
-          }] 
+              value: headPose.tilt.toFixed(1)
+            }]
+          }]
         })
       }
       // 显示角度值（保留一位小数）
@@ -739,7 +782,7 @@ function handleIMUData(data) {
 
       // 如果正在跟踪最值，则更新最值数据
       // if (isTrackingMaxValues.value) {
-        updateHeadPoseMaxValues(headPose)
+      updateHeadPoseMaxValues(headPose)
       // }
 
       // 这里可以添加数据可视化逻辑
@@ -1320,6 +1363,7 @@ async function startRecording() {
 
     // 开始录制
     mediaRecorder.start(1000) // 每秒收集一次数据
+    startTimer()
     isRecording.value = true
 
     // 开始定期捕获目标区域
@@ -1458,6 +1502,7 @@ async function saveRecording() {
             duration: 5000
           })
           isRecording.value = false
+          resetTimer()
           // 更新会话的视频路径
           if (patientInfo.value.sessionId) {
             try {
@@ -1683,6 +1728,12 @@ const initchart = () => {
       }
       pitchCharts = echarts.init(chartDom2);
       pitchCharts.setOption(chartoption.value);
+      // 添加窗口大小调整监听器
+      window.addEventListener('resize', () => {
+        if (pitchCharts) {
+          pitchCharts.resize();
+        }
+      });
     } else {
       console.warn('找不到 ID 为  的 DOM 元素');
     }
@@ -1694,6 +1745,12 @@ const initchart = () => {
       }
       tiltCharts = echarts.init(chartDom3);
       tiltCharts.setOption(chartoption.value);
+      // 添加窗口大小调整监听器
+      window.addEventListener('resize', () => {
+        if (tiltCharts) {
+          tiltCharts.resize();
+        }
+      });
     } else {
       console.warn('找不到 ID 为  的 DOM 元素');
     }
@@ -1716,11 +1773,13 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (timerId.value) {
+    clearInterval(timerId.value);
+  }
   // 停止录像（如果正在录像）
   if (isRecording.value) {
     stopRecording()
   }
-
   // 停止检测（如果正在检测）
   if (isStart.value) {
     stopDetection()
@@ -1735,7 +1794,15 @@ onUnmounted(() => {
     socket = null
     console.log('组件卸载时主动断开连接')
   }
-
+  if (tiltCharts) {
+    tiltCharts.dispose();
+  }
+  if (rotationCharts) {
+    rotationCharts.dispose();
+  }
+  if (pitchCharts) {
+    pitchCharts.dispose();
+  }
   // 移除页面关闭事件监听
   window.removeEventListener('beforeunload', handleBeforeUnload)
 })
@@ -2210,9 +2277,41 @@ onUnmounted(() => {
 :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);
+  }
+}
 </style>
 <style>
 .dashboard-container .el-table {