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

---
 frontend/src/renderer/src/assets/record.png   | Bin 0 -> 941 bytes
 frontend/src/renderer/src/views/Dashboard.vue |   8 +-
 frontend/src/renderer/src/views/Detection.vue | 145 +++++++++++++++---
 3 files changed, 128 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/renderer/src/assets/record.png

diff --git a/frontend/src/renderer/src/assets/record.png b/frontend/src/renderer/src/assets/record.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ff0620922ca8e4585f83be9690e74031bcee625
GIT binary patch
literal 941
zcmV;e15*5nP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px&XGugsR7gw3R!e9UK@fd4o9#ut=}D8BRgmnAc!{X-s3=5K@P~pP)PRVfpr9u|
zsQ5W4C@3fd{2UY%HR1;ae@7!?F5=EcL3bw6lis4FH#;RgyQ4Fko!xAVW^U76Rj;f1
zb-f}?&_@%5i-v)-ElrCPq)jh^W~f6az+Z~&eYN_BUpA7&sDMA}V(u{Uc7Rp`m>C1`
z8Q^<OOkJ~G`L5m}>H_D|;v_Tn0GLuQSb2Yt2<I|+d9ap!P2ij%dKg$31YpLUgod{a
z>MbJCTPk(2jlgY15A%qyF0duwb;gnHap1AQwjns=^qraaS#IG<tt_&7avKqy0WdYN
zGaXqKqw1n<h?@X5l$`mQ=@gcYvdq4jZ6u!pw6yGV%XH+%O8*hS<vTs#Lju<<M{aEd
zG_cJY;wk}K)ISkURo;07xWrz(QbZ!4KjTP!ETDl;&JZpGEdU0a7>mMej{s-&<ar|6
z<!8&Z+;WGWR07+2a=x-*U@-&38t6Fz_gkHz2bH#2J=H<Pk4y3Rg5?%=hsgKG+%`l%
zfMyW7&AePYB9I}D5^$ti6&N^XIr8X;gQmq@FxCJVFdeC~_rKp6tBypP_M*fmoG@K^
zI2@$UNUid~_iL7(d4cH`-h^#zT^tADkRR6bmINK{H*lXWHhF~Wz5!vqm6vzI0dhv_
z5`%Zt0w&-}#*v+2n`~OFBgSpDrZG0Ry7EReV?DKxh)?^AUZN$_|8pP`zz`n@m|cf#
zpG`;3iX6CQQZs8sb%lyI`z?1!z4K71L%<$2&6tz_@pU|a-=`-}*Le6#EO5BgM6@!K
zA9^$%rOu^OE13CVe5pg^(g=rI^YY|)kgG2(4tk6evE))4wjn+#*;8U*xpIBweP+k-
zoU*#OT^5hX{YM&zZ6wbEq$E&1_|9sg&{zZUMdNZQ0X}Csg}p&Cu`Lt8chiy6>ae)x
zwrz-SWu>a!GF6nYNQ_09f|G<5s;)=`PT>JyED9A-rkH_XRD*z0DvxP<HPMK?bv@Og
z5qFgp$=_;d5cpHB@Ic_Vn{Ie`#~OOIVxmXcd5K~>d1!-%xn(g3+^Y@%RmoM2DHAg6
z1qV?BLIJ#!h?KlF$545InY)vqi{mohj%XtPbD;m5w;bnNccA|lpep7s3hkXP5d2Hi
P00000NkvXXu0mjfNiwo6

literal 0
HcmV?d00001

diff --git a/frontend/src/renderer/src/views/Dashboard.vue b/frontend/src/renderer/src/views/Dashboard.vue
index e33f2e9e..25c87dea 100644
--- a/frontend/src/renderer/src/views/Dashboard.vue
+++ b/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 {
diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue
index 27aa45a9..7d1a9b54 100644
--- a/frontend/src/renderer/src/views/Detection.vue
+++ b/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 {