diff --git a/frontend/src/renderer/src/views/Detection.vue b/frontend/src/renderer/src/views/Detection.vue index eaaa9d56..885703d6 100644 --- a/frontend/src/renderer/src/views/Detection.vue +++ b/frontend/src/renderer/src/views/Detection.vue @@ -14,17 +14,41 @@
-
+
实时检测
开始 + + 停止 + + + 截图 +
@@ -39,204 +63,235 @@
- - -
-
+
+
+
身体姿态
+
+
身体姿态热力图 +
- - - - - - - -
- -
- -

最大旋转角：左 -55.2°
右 54.2°

+ +
+ +
+
+ +
+
最大旋转角：
+
+
左：-55.2°
+
右：54.2°
+
+ +
- -
- -

最大倾斜角：左 -7.7°
右 8.7°

+
+ +
+
最大倾斜角：
+
+
左：-7.7°
+
右：8.7°
+
+ +
- -
- -

最大俯仰角：俯 -10.5°
仰 11.5°

+
+ +
+
最大仰视角：
+
+
左：-10.5°
+
右：11.5°
+
+
- - - - - - - - - - - - - - 清零 - - - - - +
-
-
左前足 54%
-
左后足 46%
+
+
+ 左前足 + 54% +
+
+ 左后足 + 54% +
-
- 左足压力 -
- 右足压力 +
+
+
+ 左前足 + 54% +
+
+ 左后足 + 54% +
+
+ +
+
+ 左前足 + 54% +
+
+ 左后足 + 54% +
+
-
-
右前足 56%
-
右后足 44%
-
-
- 左足总压力：47%    右足总压力：53% +
+
+ 右前足 + 54% +
+
+ 右后足 + 54% +
- - - - - - -
-
- - 2101 -
-
- - 张三 -
-
- - 女 -
-
- - 2011/03/07 -
-
- - 14 -
-
- - — -
-
- - 167 -
-
- - 51 -
-
- - 38 -
-
- - 18011110000 -
-
- - 2024/12/13 -
- +
+
+
+
测试者ID
+
2101
+
+
+
姓名
+
张三
+
+
+
性别
+
男
+
+
+
+
+
出生日期
+
2011/03/07
+
+
+
年龄
+
14
+
+
+
民族
+
-
+
+
+
+
+
身高cm
+
167
+
+
+
体重kg
+
51
+
+
+
鞋码
+
38
+
+
+
+
+
电话号码
+
18011110000
+
+
+
建档时间
+
2024/12/13
+
+
+ +
+
- +
+
- - -
- 视频预览 - 2025/06/11 15:11:33
- - - - + +
+
@@ -251,14 +306,20 @@ import { Grid, Edit } from '@element-plus/icons-vue' +import { useRouter } from 'vue-router' +const router = useRouter() +const isStart = ref(false) // 模拟历史数据 const historyData = ref([ { id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' }, { id: 2, rotLeft: '-55.8°', rotRight: '56.2°', tiltLeft: '-17.5°', tiltRight: '17.9°', pitchDown: '-21.2°', pitchUp: '12.1°' }, { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' } ]) - +function routeTo(path){ + router.push(`/`) + // router.push(`/patient/edit/${selectedPatient.value.id}`) +} // 返回按钮逻辑 const handleBack = () => { // 可添加路由跳转逻辑 @@ -363,32 +424,47 @@ const handleBack = () => { /* 核心内容网格布局 */ .content-grid { - flex: 1; - padding: 20px; + display: flex; + padding: 10px; + justify-content: space-between; + height: calc(100vh - 60px); + /* flex: 1; + display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: auto 1fr; - gap: 20px; + gap: 20px; */ } /* 通用模块样式 */ .module-card { + width: 100%; background-color: #2C2C2C !important; border: none !important; } .module-header { - width: 120px; + width: 100%; display: flex; align-items: center; justify-content: space-between; - margin-bottom: 16px; - border: 1px solid red; - border-radius: 20px; - padding: 10px ; + margin-top: 10px; + margin-left: 10px; + margin-right: 10px; } .module-title { + + + width: 120px; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid #ffffff; + border-image: linear-gradient(to right, rgb(245, 173, 7), rgb(160, 5, 216)) 1; + border-radius: 20px; + padding: 1px 10px ; + font-size: 16px; font-weight: bold; color: #ffffff; @@ -428,12 +504,12 @@ const handleBack = () => { } .posture-heatmap { - position: absolute; + /* position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); - max-width: 90%; - max-height: 90%; + transform: translate(-50%, -50%); */ + width: 90%; + height: 90%; } /* 头部姿态模块 */ @@ -516,9 +592,9 @@ const handleBack = () => { .foot-container { display: flex; - flex-direction: column; + justify-content: center; align-items: center; - gap: 12px; + font-size: 12px; } .foot-stats { @@ -586,7 +662,7 @@ const handleBack = () => { } /* Element Plus 样式覆盖 */ -.el-card__header { +:deep(.el-card__header) { border-bottom: 1px solid #444444 !important; padding: 12px 20px !important; } @@ -599,4 +675,84 @@ const handleBack = () => { --el-button-bg-color: #A325B0 !important; --el-button-border-color: #A325B0 !important; } + +.gauge-group-box{ + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + font-size: 12px; +} +.gauge-group-box-left{ + +} +.gauge-table-title{ + padding: 10px; + font-size: 14px; + color: #ffffff; + +} +/* .foot-container-left{ + margin-right: 10px; +} +.foot-container-right{ + margin-left: 10px; +} */ +.foot-container-content{ + margin: 0px 20px; +} +.foot-container-margintop{ + margin-top: 80px; +} +.foot-container-marginleft{ + margin-left:40px ; +} +.foot-container-paddingcolor{ + padding-left: 10px; + color: rgb(48,205,223); +} +.basic-info-content{ + display: flex; + justify-content: center; + box-sizing: border-box; + padding-top: 10px; + width: 100%; +} +.basic-info-text{ + width: 33%; + text-align: center; + font-size: 13px; +} +.basic-info-textcolor{ + color: rgb(48,205,223); + padding-bottom: 8px; +} +.basic-info-box{ + display: flex; + flex-wrap: wrap; + align-content: center; + height: 100%; +} + + \ No newline at end of file