ThbTech/BodyBalanceEvaluation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改检查

Browse Source
This commit is contained in:
limengnan 2025-07-28 17:15:50 +08:00
parent d36b16d458
commit d5925c1435
1 changed files with 343 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
frontend/src/renderer/src/views/Detection.vue
View File

@ -14,17 +14,41 @@
<header class="top-bar"> <header class="top-bar">
<div style="display: flex;align-items: center;"> <div style="display: flex;align-items: center;">
<div class="top-bar-left"> <div class="top-bar-left" @click="routeTo('/')">
<el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon>
<span class="page-title">实时检测</span> <span class="page-title">实时检测</span>
</div> </div>
<el-button <el-button
v-if="isStart == false"
@click="isStart = true"
type="primary" type="primary"
class="start-btn" class="start-btn"
style="--el-button-bg-color: #409EFF; --el-button-border-color: #409EFF" 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 "
> >
开始 开始
</el-button> </el-button>
<el-button
v-if="isStart == true"
@click="isStart = false"
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;
--el-button-border-color: transparent "
>
停止
</el-button>
<el-button
v-if="isStart == true"
type="primary"
style="width: 80px;background-image: linear-gradient(to right, rgb(250, 167, 6), rgb(160, 5, 216));
--el-button-border-color: #409EFF;
--el-button-border-color: transparent "
>
截图
</el-button>
</div> </div>
@ -39,204 +63,235 @@
<!-- 核心内容区（网格布局） --> <!-- 核心内容区（网格布局） -->
<div class="content-grid"> <div class="content-grid">
<!-- 身体姿态模块 --> <!-- 身体姿态模块 -->
<el-card class="module-card body-posture"> <div class="module-card body-posture" style="width: 25%; ">
<template #header> <div class="module-header">
<div class="module-header"> <div class="module-title">身体姿态</div>
<span class="module-title">身体姿态</span> </div>
</div> <div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
</template>
<div class="posture-container">
<div class="grid-background"></div>
<img <img
src="https://via.placeholder.com/400x600?text=身体热力图" src="@/assets/posture.png"
alt="身体姿态热力图" alt="身体姿态热力图"
class="posture-heatmap" class="posture-heatmap"
> >
<!-- <video src="@/assets/video.mp4"></video> -->
</div> </div>
</el-card> </div>
<el-card class=""> <div class="body-posture" style="width: 44%; display: flex;
<!-- 头部姿态模块 --> flex-wrap: wrap;
<el-card class="module-card head-posture"> align-content: space-between;
<template #header> ">
<div class="module-card" style=" height: calc(100% - 342px);">
<!-- 头部姿态模块 -->
<div style="display: flex;">
<div class="module-header"> <div class="module-header">
<img <div class="module-title">头部姿态</div>
src="https://via.placeholder.com/24x24?text=头部图标" <el-button
alt="头部姿态图标" type="primary"
class="header-icon" class="start-btn"
style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); --el-button-border-color: transparent !important"
> >
<span class="module-title">头部姿态</span> 清零
</el-button>
</div> </div>
</template>
</div>
<!-- 仪表盘区域 --> <!-- 仪表盘区域 -->
<div class="gauge-group"> <div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
<!-- 旋转角 --> <div style="width: 33%;">
<div class="gauge-item"> <img src="@/assets/test1.png" alt="" style="width: 100%;">
<el-gauge <div class="gauge-group-box">
:value="55.2" <div>最大旋转角：</div>
:min="-90" <div>
:max="90" <div>左：-55.2°</div>
:range="[{ start: -90, end: -30, color: '#1E88E5' }, { start: -30, end: 30, color: '#4CAF50' }, { start: 30, end: 90, color: '#E53935' }]" <div>右：54.2°</div>
class="gauge" </div>
/>
<p class="gauge-desc">最大旋转角：左 -55.2°<br>右 54.2°</p> </div>
</div> </div>
<!-- 倾斜角 --> <div style="width: 33%;">
<div class="gauge-item"> <img src="@/assets/test1.png" alt="" style="width: 100%;">
<el-gauge <div class="gauge-group-box">
:value="7.7" <div>最大倾斜角：</div>
:min="-90" <div>
:max="90" <div>左：-7.7°</div>
:range="[{ start: -90, end: -20, color: '#409EFF' }, { start: -20, end: 20, color: '#FADB14' }, { start: 20, end: 90, color: '#F56C6C' }]" <div>右：8.7°</div>
class="gauge" </div>
/>
<p class="gauge-desc">最大倾斜角：左 -7.7°<br>右 8.7°</p> </div>
</div> </div>
<!-- 俯仰角 --> <div style="width: 33%;">
<div class="gauge-item"> <img src="@/assets/test1.png" alt="" style="width: 100%;">
<el-gauge <div class="gauge-group-box">
:value="-10.5" <div>最大仰视角：</div>
:min="-90" <div>
:max="90" <div>左：-10.5°</div>
:range="[{ start: -90, end: -20, color: '#409EFF' }, { start: -20, end: 20, color: '#FADB14' }, { start: 20, end: 90, color: '#F56C6C' }]" <div>右：11.5°</div>
class="gauge" </div>
/> </div>
<p class="gauge-desc">最大俯仰角：俯 -10.5°<br>仰 11.5°</p>
</div> </div>
</div> </div>
<!-- 历史数据表格 -->
<!-- 历史数据表格 --> <div class="gauge-table-title">
<el-table :data="historyData" border class="history-table"> 历史数据
<el-table-column prop="id" label="ID" align="center" /> </div>
<el-table-column prop="rotLeft" label="最大旋转角-左" align="center" /> <div style="display: flex;justify-content: center;margin-bottom: 10px;">
<el-table-column prop="rotRight" label="最大旋转角-右" align="center" /> <el-table :data="historyData" style="width: 96%">
<el-table-column prop="tiltLeft" label="最大倾斜角-左" align="center" /> <el-table-column prop="id" label="ID" width="60" />
<el-table-column prop="tiltRight" label="最大倾斜角-右" align="center" /> <el-table-column label="最大旋转角" align="center">
<el-table-column prop="pitchDown" label="最大俯仰角-俯" align="center" /> <el-table-column prop="rotLeft" label="左" min-width="60" align="center"/>
<el-table-column prop="pitchUp" label="最大俯仰角-仰" align="center" /> <el-table-column prop="rotRight" label="右" min-width="60" align="center"/>
</el-table> </el-table-column>
<el-table-column label="最大旋转角" align="center">
<el-button <el-table-column prop="rotLeft" label="左" min-width="60" align="center"/>
type="primary" <el-table-column prop="rotRight" label="右" min-width="60" align="center"/>
class="zero-btn" </el-table-column>
style="--el-button-bg-color: #C22ED0; --el-button-border-color: #C22ED0" <el-table-column label="最大旋转角" align="center">
> <el-table-column prop="rotLeft" label="左" min-width="60" align="center"/>
清零 <el-table-column prop="rotRight" label="右" min-width="60" align="center"/>
</el-button> </el-table-column>
</el-card> </el-table>
<!-- 足部压力模块 --> </div>
<el-card class="module-card foot-pressure"> </div>
<template #header> <!-- 足部压力模块 -->
<div class="module-card" style=" height: calc(335px);">
<div style="display: flex;">
<div class="module-header"> <div class="module-header">
<span class="module-title">足部压力</span> <div class="module-title">足部压力</div>
</div> </div>
</template> </div>
<div class="foot-container"> <div class="foot-container">
<div class="foot-stats"> <div class="foot-container-left">
<div class="stat-item">左前足 54%</div> <div>
<div class="stat-item">左后足 46%</div> <span>左前足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
<div class="foot-container-margintop">
<span>左后足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
</div> </div>
<div class="foot-graph"> <div class="foot-container-content">
<img <div style="display: flex;justify-content: center;margin-bottom: 8px;">
src="https://via.placeholder.com/120x150?text=左足热力图" <div>
alt="左足压力" <span>左前足</span>
class="foot-img" <span class="foot-container-paddingcolor">54%</span>
> </div>
<div class="foot-divider"></div> <div class="foot-container-marginleft">
<img <span>左后足</span>
src="https://via.placeholder.com/120x150?text=右足热力图" <span class="foot-container-paddingcolor">54%</span>
alt="右足压力" </div>
class="foot-img" </div>
> <img src="@/assets/zu.png" alt="">
<div style="display: flex;justify-content: center;margin-top: 8px;">
<div>
<span>左前足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
<div class="foot-container-marginleft">
<span>左后足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
</div>
</div> </div>
<div class="foot-stats"> <div class="foot-container-right">
<div class="stat-item">右前足 56%</div> <div>
<div class="stat-item">右后足 44%</div> <span>右前足</span>
</div> <span class="foot-container-paddingcolor">54%</span>
<div class="total-pressure"> </div>
左足总压力：47% &nbsp;&nbsp; 右足总压力：53% <div class="foot-container-margintop">
<span>右后足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
</div> </div>
</div> </div>
</el-card> </div>
</el-card> </div>
<el-card class="">
<!-- 基础信息模块 -->
<el-card class="module-card basic-info"> <div class="body-posture" style="width: 30%; display: flex;
<template #header> flex-wrap: wrap;
align-content: space-between;
">
<!-- 基础信息模块 -->
<div class="module-card" style="padding-bottom: 40px; height: calc(100% - 342px);">
<div style="display: flex;">
<div class="module-header"> <div class="module-header">
<span class="module-title">基础信息</span> <div class="module-title">基础信息</div>
<el-icon class="edit-icon"><Edit /></el-icon> <el-icon class="edit-icon"><Edit /></el-icon>
</div> </div>
</template>
<div class="info-grid">
<div class="info-item">
<label>测试者ID</label>
<span>2101</span>
</div>
<div class="info-item">
<label>姓名</label>
<span>张三</span>
</div>
<div class="info-item">
<label>性别</label>
<span>女</span>
</div>
<div class="info-item">
<label>出生日期</label>
<span>2011/03/07</span>
</div>
<div class="info-item">
<label>年龄</label>
<span>14</span>
</div>
<div class="info-item">
<label>民族</label>
<span>—</span>
</div>
<div class="info-item">
<label>身高 cm</label>
<span>167</span>
</div>
<div class="info-item">
<label>体重 kg</label>
<span>51</span>
</div>
<div class="info-item">
<label>鞋码</label>
<span>38</span>
</div>
<div class="info-item">
<label>电话号码</label>
<span>18011110000</span>
</div>
<div class="info-item">
<label>建档时间</label>
<span>2024/12/13</span>
</div>
</div> </div>
</el-card> <div class="basic-info-box">
<div class="basic-info-content">
<div class="basic-info-text">
<div class="basic-info-textcolor">测试者ID</div>
<div>2101</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">姓名</div>
<div>张三</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">性别</div>
<div>男</div>
</div>
</div>
<div class="basic-info-content">
<div class="basic-info-text">
<div class="basic-info-textcolor">出生日期</div>
<div>2011/03/07</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">年龄</div>
<div>14</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">民族</div>
<div>-</div>
</div>
</div>
<div class="basic-info-content">
<div class="basic-info-text">
<div class="basic-info-textcolor">身高cm</div>
<div>167</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">体重kg</div>
<div>51</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">鞋码</div>
<div>38</div>
</div>
</div>
<div class="basic-info-content">
<div class="basic-info-text">
<div class="basic-info-textcolor">电话号码</div>
<div>18011110000</div>
</div>
<div class="basic-info-text">
<div class="basic-info-textcolor">建档时间</div>
<div>2024/12/13</div>
</div>
<div class="basic-info-text">
</div>
</div>
</div>
</div>
<!-- 视频模块 --> <!-- 视频模块 -->
<el-card class="module-card video-module"> <div class="module-card">
<template #header> <div style="display: flex;margin-bottom: 20px;">
<div class="module-header"> <div class="module-header">
<span class="module-title">视频</span> <div class="module-title">视频</div>
</div> </div>
</template>
<div class="video-container">
<img
src="https://via.placeholder.com/300x200?text=视频预览"
alt="视频预览"
class="video-preview"
>
<span class="video-time">2025/06/11 15:11:33</span>
</div> </div>
</el-card> <video src="@/assets/1.mp4" autoplay style="width: 100%;height: 268px;"></video>
</el-card> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -251,14 +306,20 @@ import {
Grid, Grid,
Edit Edit
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isStart = ref(false)
// 模拟历史数据 // 模拟历史数据
const historyData = ref([ const historyData = ref([
{ id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' }, { 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: 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°' } { 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 = () => { const handleBack = () => {
// 可添加路由跳转逻辑 // 可添加路由跳转逻辑
@ -363,32 +424,47 @@ const handleBack = () => {
/* 核心内容网格布局 */ /* 核心内容网格布局 */
.content-grid { .content-grid {
flex: 1; display: flex;
padding: 20px; padding: 10px;
justify-content: space-between;
height: calc(100vh - 60px);
/* flex: 1;
display: grid; display: grid;
grid-template-columns: 3fr 2fr; grid-template-columns: 3fr 2fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
gap: 20px; gap: 20px; */
} }
/* 通用模块样式 */ /* 通用模块样式 */
.module-card { .module-card {
width: 100%;
background-color: #2C2C2C !important; background-color: #2C2C2C !important;
border: none !important; border: none !important;
} }
.module-header { .module-header {
width: 120px; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 16px; margin-top: 10px;
border: 1px solid red; margin-left: 10px;
border-radius: 20px; margin-right: 10px;
padding: 10px ;
} }
.module-title { .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-size: 16px;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
@ -428,12 +504,12 @@ const handleBack = () => {
} }
.posture-heatmap { .posture-heatmap {
position: absolute; /* position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%); */
max-width: 90%; width: 90%;
max-height: 90%; height: 90%;
} }
/* 头部姿态模块 */ /* 头部姿态模块 */
@ -516,9 +592,9 @@ const handleBack = () => {
.foot-container { .foot-container {
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; align-items: center;
gap: 12px; font-size: 12px;
} }
.foot-stats { .foot-stats {
@ -586,7 +662,7 @@ const handleBack = () => {
} }
/* Element Plus 样式覆盖 */ /* Element Plus 样式覆盖 */
.el-card__header { :deep(.el-card__header) {
border-bottom: 1px solid #444444 !important; border-bottom: 1px solid #444444 !important;
padding: 12px 20px !important; padding: 12px 20px !important;
} }
@ -599,4 +675,84 @@ const handleBack = () => {
--el-button-bg-color: #A325B0 !important; --el-button-bg-color: #A325B0 !important;
--el-button-border-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%;
}
</style>
<style>
.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{
background-color: transparent !important;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
background-color: transparent !important;
}
</style> </style>