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

样式修改

Browse Source
This commit is contained in:
jingna 2025-08-06 14:25:14 +08:00
parent 2a3d168e50
commit 3d3f072ab2
2 changed files with 102 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@
class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 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: #409EFF;
--el-button-border-color: transparent;"> --el-button-border-color: transparent;">
{{ isConnected ? '开始' : '连接中saveRecording...' }} {{ isConnected ? '开始' : '连接中...' }}
</el-button> </el-button>
<!-- handleStartStop --> <!-- handleStartStop -->
<el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); <el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
@ -49,18 +49,19 @@
<div id="detectare" class="content-grid"> <div id="detectare" class="content-grid">
<!-- 身体姿态模块 --> <!-- 身体姿态模块 -->
<div class="module-card body-posture" style="width: 25%; "> <div class="module-card body-posture" style="width: 25%; ">
<div class="module-header"> <div class="module-header" style="justify-content: flex-start;">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
身体姿态 身体姿态
</div> </div>
</div> </div>
<div style="margin-left: 10px;font-size: 14px;">{{ videoStatus }}</div>
</div> </div>
<div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;"> <div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
<!-- 使用深度相机视频流替换静态图片 --> <!-- 使用深度相机视频流替换静态图片 -->
<img :src="depthCameraImgSrc || '@/assets/posture.png'" alt="深度相机视频流" <img :src="depthCameraImgSrc || '@/assets/posture.png'" alt="深度相机视频流"
style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;"> style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#2C2C2C;">
</div> </div>
</div> </div>
<div class="body-posture" style="width: 44%;display: flex; <div class="body-posture" style="width: 44%;display: flex;
@ -68,16 +69,19 @@
align-content: space-between; align-content: space-between;
"> ">
<div class="module-card" style=" height:420px"> <div class="module-card" style=" height:50%;min-height: 425px;margin-bottom: 5px;">
<!-- 头部姿态模块 --> <!-- 头部姿态模块 -->
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div style="display: flex;align-items: center;">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
头部姿态 头部姿态
</div> </div>
</div> </div>
<div style="margin-left: 10px;font-size: 14px;">{{ imuStatus }}</div>
</div>
<el-button type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); <el-button type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
--el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;"> --el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;">
清零 清零
@ -136,16 +140,17 @@
</div> </div>
</div> </div>
<!-- 足部压力模块 --> <!-- 足部压力模块 -->
<div class="module-card" style=" height: calc(100% - 426px); min-height: calc(335px);"> <div class="module-card" style=" height:50%;">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header" style="justify-content: flex-start;">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
足部压力 足部压力
</div> </div>
</div> </div>
<div style="margin-left: 10px;font-size: 14px;">{{ pressureStatus }}</div>
</div> </div>
</div> </div>
<div class="foot-container"> <div class="foot-container">
@ -194,13 +199,12 @@
</div> </div>
</div> </div>
<div class="body-posture" style="width: 30%;display: flex; <div class="body-posture" style="width: 30%;display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-between; align-content: space-between;
"> ">
<!-- 基础信息模块 --> <!-- 基础信息模块 -->
<div class="module-card" style="padding-bottom: 40px; height: calc(364px);"> <div class="module-card" style="padding-bottom: 40px; height: 50%;min-height: 425px;margin-bottom: 5px;">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
@ -276,20 +280,21 @@
</div> </div>
<!-- 视频模块 --> <!-- 视频模块 -->
<div class="module-card" style="height: calc(100% - 370px);min-height: 324px;"> <div class="module-card" style="height: 50%;">
<div style="display: flex;margin-bottom: 20px;"> <div style="display: flex;margin-bottom: 20px;">
<div class="module-header"> <div class="module-header" style="justify-content: flex-start;">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; "> <img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
视频 视频
</div> </div>
</div> </div>
<div style="margin-left: 10px;font-size: 14px;">{{ videoStatus }}</div>
</div> </div>
</div> </div>
<!-- 使用img元素显示视频流（优化的Data URL方案） --> <!-- 使用img元素显示视频流（优化的Data URL方案） -->
<img :src="rtspImgSrc" alt="" <img :src="rtspImgSrc" alt=""
style="width: 100%;height: calc(100% - 60px);object-fit:contain;background:#000;" /> style="width: 100%;height: calc(100% - 60px);object-fit:contain;background:#2C2C2C;" />
</div> </div>
</div> </div>
</div> </div>
@ -417,34 +422,49 @@ const chartoption = ref({
show: false, show: false,
}, },
pointer: { pointer: {
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', length: '85%',
length: '75%', width: 2,
width: 10, offsetCenter: [0, '5%'],
offsetCenter: [0, '5%'] itemStyle:{
color:'#ff8d00'
},
},
anchor: {
show: true,
showAbove: true,
size: 18,
icon:'circle',
itemStyle: {
borderWidth: 3,
color:'#ff8d00',
borderColor:'#ff8d00',
}
}, },
axisLine: { axisLine: {
roundCap: true, roundCap: true,
lineStyle: { lineStyle: {
width: 5 width: 3,
color:[[1, '#0089ff']]
} }
}, },
axisTick: { axisTick: {
splitNumber: 2, splitNumber: 2,
lineStyle: { lineStyle: {
width: 2, width: 2,
color: '#999' color: '#ffffff'
} }
}, },
splitLine: { splitLine: {
length: 12, length: 12,
lineStyle: { lineStyle: {
width: 3, width: 4,
color: '#999' color: '#0089ff'
} }
}, },
axisLabel: { axisLabel: {
//刻度颜色
distance: 10, distance: 10,
color: '#999', color: '#ffffff',
fontSize: 10 fontSize: 10
}, },
title: { title: {
@ -455,12 +475,15 @@ const chartoption = ref({
}, },
data: [ data: [
{ {
value: 100 value: 20
} }
] ]
} }
] ]
}) })
const videoStatus = ref('未连接')
const pressureStatus = ref('未连接')
const imuStatus = ref('未连接')
function routeTo(path) { function routeTo(path) {
router.push(`/`) router.push(`/`)
} }
@ -520,7 +543,12 @@ function connectWebSocket() {
// 监听视频状态事件 // 监听视频状态事件
socket.on('video_status', (data) => { socket.on('video_status', (data) => {
console.log('📺 视频状态:', data) // console.log('📺 视频状态:', data)
if (data.status == 'started') {
videoStatus.value = '已连接'
} else {
videoStatus.value = '未连接'
}
}) })
// 监听视频帧数据 // 监听视频帧数据
@ -537,27 +565,29 @@ function connectWebSocket() {
// 监听IMU状态事件 // 监听IMU状态事件
socket.on('imu_status', (data) => { socket.on('imu_status', (data) => {
console.log('📡 IMU状态:', data) // console.log('📡 IMU状态:', data)
if (data.status === 'success') { if (data.status === 'success') {
ElMessage.success(data.message) imuStatus.value = '已连接'
} else { } else {
ElMessage.error(data.message) imuStatus.value = '未连接'
} }
}) })
// 监听IMU头部姿态数据 // 监听IMU头部姿态数据
socket.on('imu_data', (data) => { socket.on('imu_data', (data) => {
console.log('🎯 IMU头部姿态数据:', data) // console.log('🎯 IMU头部姿态数据:', data)
handleIMUData(data) handleIMUData(data)
}) })
// 监听压力传感器状态事件 // 监听压力传感器状态事件
socket.on('pressure_status', (data) => { socket.on('pressure_status', (data) => {
console.log('📡 压力传感器状态:', data) // console.log('📡 压力传感器状态:', data)
if (data.status === 'success') { if (data.status === 'success') {
ElMessage.success(data.message) pressureStatus.value = '已连接'
// ElMessage.success(data.message)
} else { } else {
ElMessage.error(data.message) pressureStatus.value = '未连接'
// ElMessage.error(data.message)
} }
}) })
@ -1410,7 +1440,7 @@ onMounted(() => {
loadPatientInfo() loadPatientInfo()
// 组件挂载时连接WebSocket并自动开始推流 // 组件挂载时连接WebSocket并自动开始推流
connectWebSocket() // connectWebSocket()
// 监听页面关闭或刷新事件 // 监听页面关闭或刷新事件
window.addEventListener('beforeunload', handleBeforeUnload) window.addEventListener('beforeunload', handleBeforeUnload)
@ -1433,7 +1463,7 @@ onUnmounted(() => {
} }
// 停止视频播放并断开连接 // 停止视频播放并断开连接
stopRtsp() stopVideoStream()
// 断开WebSocket连接 // 断开WebSocket连接
if (socket) { if (socket) {
@ -1499,7 +1529,7 @@ onUnmounted(() => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 20px; padding: 10px 20px;
background-color: #000000; background-color: #000000;
} }
@ -1548,7 +1578,7 @@ onUnmounted(() => {
display: flex; display: flex;
padding: 0px 10px; padding: 0px 10px;
justify-content: space-between; justify-content: space-between;
height: calc(100vh - 130px); height: calc(100vh - 120px);
/* flex: 1; /* flex: 1;
display: grid; display: grid;
@ -1912,6 +1942,7 @@ onUnmounted(() => {
background: #1D1b26; background: #1D1b26;
color: #ffffff; color: #ffffff;
} }
:deep(.el-table .el-table__cell) { :deep(.el-table .el-table__cell) {
padding: 4px 0px; padding: 4px 0px;
} }
@ -1920,22 +1951,28 @@ onUnmounted(() => {
.dashboard-container .el-table { .dashboard-container .el-table {
background: transparent !important; background: transparent !important;
} }
.dashboard-container .el-table tr { .dashboard-container .el-table tr {
background-color: transparent !important; background-color: transparent !important;
} }
.dashboard-container .el-table thead.is-group th.el-table__cell { .dashboard-container .el-table thead.is-group th.el-table__cell {
background-color: transparent !important; background-color: transparent !important;
} }
.dashboard-container .cell { .dashboard-container .cell {
color: #fff; color: #fff;
} }
.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { .dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: transparent !important; background-color: transparent !important;
} }
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
background-color: transparent !important; background-color: transparent !important;
} }
.top-bar .el-button { .top-bar .el-button {
height: 44px; height: 44px;
border-radius: 25px; border-radius: 25px;

2
frontend/src/renderer/src/views/Header.vue
View File

@ -104,7 +104,7 @@
} }
.header { .header {
height: 60px; height: 50px;
background: #000000; background: #000000;
border-bottom: 1px solid #434343; border-bottom: 1px solid #434343;
display: flex; display: flex;