修改检查

This commit is contained in:
limengnan 2025-07-28 17:15:50 +08:00
parent d36b16d458
commit d5925c1435

View File

@ -14,17 +14,41 @@
<header class="top-bar">
<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>
<span class="page-title">实时检测</span>
</div>
<el-button
v-if="isStart == false"
@click="isStart = true"
type="primary"
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
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>
@ -39,204 +63,235 @@
<!-- 核心内容区网格布局 -->
<div class="content-grid">
<!-- 身体姿态模块 -->
<el-card class="module-card body-posture">
<template #header>
<div class="module-card body-posture" style="width: 25%; ">
<div class="module-header">
<span class="module-title">身体姿态</span>
<div class="module-title">身体姿态</div>
</div>
</template>
<div class="posture-container">
<div class="grid-background"></div>
<div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
<img
src="https://via.placeholder.com/400x600?text=身体热力图"
src="@/assets/posture.png"
alt="身体姿态热力图"
class="posture-heatmap"
>
<!-- <video src="@/assets/video.mp4"></video> -->
</div>
</el-card>
<el-card class="">
</div>
<div class="body-posture" style="width: 44%; display: flex;
flex-wrap: wrap;
align-content: space-between;
">
<div class="module-card" style=" height: calc(100% - 342px);">
<!-- 头部姿态模块 -->
<el-card class="module-card head-posture">
<template #header>
<div style="display: flex;">
<div class="module-header">
<img
src="https://via.placeholder.com/24x24?text=头部图标"
alt="头部姿态图标"
class="header-icon"
>
<span class="module-title">头部姿态</span>
</div>
</template>
<!-- 仪表盘区域 -->
<div class="gauge-group">
<!-- 旋转角 -->
<div class="gauge-item">
<el-gauge
:value="55.2"
:min="-90"
:max="90"
:range="[{ start: -90, end: -30, color: '#1E88E5' }, { start: -30, end: 30, color: '#4CAF50' }, { start: 30, end: 90, color: '#E53935' }]"
class="gauge"
/>
<p class="gauge-desc">最大旋转角 -55.2°<br> 54.2°</p>
</div>
<!-- 倾斜角 -->
<div class="gauge-item">
<el-gauge
:value="7.7"
:min="-90"
:max="90"
:range="[{ start: -90, end: -20, color: '#409EFF' }, { start: -20, end: 20, color: '#FADB14' }, { start: 20, end: 90, color: '#F56C6C' }]"
class="gauge"
/>
<p class="gauge-desc">最大倾斜角 -7.7°<br> 8.7°</p>
</div>
<!-- 俯仰角 -->
<div class="gauge-item">
<el-gauge
:value="-10.5"
:min="-90"
:max="90"
:range="[{ start: -90, end: -20, color: '#409EFF' }, { start: -20, end: 20, color: '#FADB14' }, { start: 20, end: 90, color: '#F56C6C' }]"
class="gauge"
/>
<p class="gauge-desc">最大俯仰角 -10.5°<br> 11.5°</p>
</div>
</div>
<!-- 历史数据表格 -->
<el-table :data="historyData" border class="history-table">
<el-table-column prop="id" label="ID" align="center" />
<el-table-column prop="rotLeft" label="最大旋转角-左" align="center" />
<el-table-column prop="rotRight" label="最大旋转角-右" align="center" />
<el-table-column prop="tiltLeft" label="最大倾斜角-左" align="center" />
<el-table-column prop="tiltRight" label="最大倾斜角-右" align="center" />
<el-table-column prop="pitchDown" label="最大俯仰角-俯" align="center" />
<el-table-column prop="pitchUp" label="最大俯仰角-仰" align="center" />
</el-table>
<div class="module-title">头部姿态</div>
<el-button
type="primary"
class="zero-btn"
style="--el-button-bg-color: #C22ED0; --el-button-border-color: #C22ED0"
class="start-btn"
style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); --el-button-border-color: transparent !important"
>
清零
</el-button>
</el-card>
</div>
</div>
<!-- 仪表盘区域 -->
<div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
<div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;">
<div class="gauge-group-box">
<div>最大旋转角</div>
<div>
<div>-55.2°</div>
<div>54.2°</div>
</div>
</div>
</div>
<div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;">
<div class="gauge-group-box">
<div>最大倾斜角</div>
<div>
<div>-7.7°</div>
<div>8.7°</div>
</div>
</div>
</div>
<div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;">
<div class="gauge-group-box">
<div>最大仰视角</div>
<div>
<div>-10.5°</div>
<div>11.5°</div>
</div>
</div>
</div>
</div>
<!-- 历史数据表格 -->
<div class="gauge-table-title">
历史数据
</div>
<div style="display: flex;justify-content: center;margin-bottom: 10px;">
<el-table :data="historyData" style="width: 96%">
<el-table-column prop="id" label="ID" width="60" />
<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-table-column>
<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-table-column>
<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-table-column>
</el-table>
</div>
</div>
<!-- 足部压力模块 -->
<el-card class="module-card foot-pressure">
<template #header>
<div class="module-card" style=" height: calc(335px);">
<div style="display: flex;">
<div class="module-header">
<span class="module-title">足部压力</span>
<div class="module-title">足部压力</div>
</div>
</div>
</template>
<div class="foot-container">
<div class="foot-stats">
<div class="stat-item">左前足 54%</div>
<div class="stat-item">左后足 46%</div>
<div class="foot-container-left">
<div>
<span>左前足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
<div class="foot-graph">
<img
src="https://via.placeholder.com/120x150?text=左足热力图"
alt="左足压力"
class="foot-img"
>
<div class="foot-divider"></div>
<img
src="https://via.placeholder.com/120x150?text=右足热力图"
alt="右足压力"
class="foot-img"
>
</div>
<div class="foot-stats">
<div class="stat-item">右前足 56%</div>
<div class="stat-item">右后足 44%</div>
</div>
<div class="total-pressure">
左足总压力47% &nbsp;&nbsp; 右足总压力53%
<div class="foot-container-margintop">
<span>左后足</span>
<span class="foot-container-paddingcolor">54%</span>
</div>
</div>
</el-card>
</el-card>
<el-card class="">
<div class="foot-container-content">
<div style="display: flex;justify-content: center;margin-bottom: 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>
<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 class="foot-container-right">
<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>
</div>
<div class="body-posture" style="width: 30%; display: flex;
flex-wrap: wrap;
align-content: space-between;
">
<!-- 基础信息模块 -->
<el-card class="module-card basic-info">
<template #header>
<div class="module-card" style="padding-bottom: 40px; height: calc(100% - 342px);">
<div style="display: flex;">
<div class="module-header">
<span class="module-title">基础信息</span>
<div class="module-title">基础信息</div>
<el-icon class="edit-icon"><Edit /></el-icon>
</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 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="info-item">
<label>性别</label>
<span></span>
<div class="basic-info-text">
<div class="basic-info-textcolor">姓名</div>
<div>张三</div>
</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 class="basic-info-text">
<div class="basic-info-textcolor">性别</div>
<div></div>
</div>
</div>
</el-card>
<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">
<template #header>
<div class="module-card">
<div style="display: flex;margin-bottom: 20px;">
<div class="module-header">
<span class="module-title">视频</span>
<div class="module-title">视频</div>
</div>
</div>
<video src="@/assets/1.mp4" autoplay style="width: 100%;height: 268px;"></video>
</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>
</el-card>
</el-card>
</div>
</div>
</div>
@ -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%;
}
</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>