样式修改
This commit is contained in:
jingna
parent
2a3d168e50
commit
3d3f072ab2
@ -18,7 +18,7 @@
|
||||
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;">
|
||||
{{ isConnected ? '开始' : '连接中saveRecording...' }}
|
||||
{{ isConnected ? '开始' : '连接中...' }}
|
||||
</el-button>
|
||||
<!-- 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));
|
||||
@ -30,7 +30,7 @@
|
||||
--el-button-border-color: #409EFF;
|
||||
--el-button-border-color: transparent ">
|
||||
保存数据
|
||||
</el-button>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="top-bar-right">
|
||||
@ -49,18 +49,19 @@
|
||||
<div id="detectare" class="content-grid">
|
||||
<!-- 身体姿态模块 -->
|
||||
<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-bg">
|
||||
<img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
身体姿态
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;font-size: 14px;">{{ videoStatus }}</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
|
||||
<!-- 使用深度相机视频流替换静态图片 -->
|
||||
<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 class="body-posture" style="width: 44%;display: flex;
|
||||
@ -68,15 +69,18 @@
|
||||
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 class="module-header">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
头部姿态
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
头部姿态
|
||||
</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-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;">
|
||||
@ -115,8 +119,8 @@
|
||||
</div>
|
||||
<!-- 历史数据表格 -->
|
||||
<div class="gauge-table-title">
|
||||
历史数据..
|
||||
</div>
|
||||
历史数据..
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;padding: 0px 25px;">
|
||||
<el-table :data="historyData" style="width: 96%;height: 160px;overflow: auto;">
|
||||
<el-table-column prop="id" label="ID" width="60" />
|
||||
@ -136,16 +140,17 @@
|
||||
</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 class="module-header">
|
||||
<div class="module-header" style="justify-content: flex-start;">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
足部压力
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;font-size: 14px;">{{ pressureStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-container">
|
||||
@ -194,13 +199,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="body-posture" style="width: 30%;display: flex;
|
||||
flex-wrap: wrap;
|
||||
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 class="module-header">
|
||||
<div class="module-title">
|
||||
@ -276,20 +280,21 @@
|
||||
|
||||
</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 class="module-header">
|
||||
<div class="module-header" style="justify-content: flex-start;">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
|
||||
视频
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;font-size: 14px;">{{ videoStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使用img元素显示视频流（优化的Data URL方案） -->
|
||||
<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>
|
||||
@ -333,7 +338,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted,nextTick } from 'vue'
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { io } from 'socket.io-client'
|
||||
@ -394,7 +399,7 @@ const historyData = ref([
|
||||
{ id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
|
||||
])
|
||||
const chartoption = ref({
|
||||
backgroundColor:'#000000',
|
||||
backgroundColor: '#000000',
|
||||
grid: { top: 0, right: 0, bottom: 0, left: 0 },
|
||||
series: [
|
||||
{
|
||||
@ -417,34 +422,49 @@ const chartoption = ref({
|
||||
show: false,
|
||||
},
|
||||
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: '75%',
|
||||
width: 10,
|
||||
offsetCenter: [0, '5%']
|
||||
length: '85%',
|
||||
width: 2,
|
||||
offsetCenter: [0, '5%'],
|
||||
itemStyle:{
|
||||
color:'#ff8d00'
|
||||
},
|
||||
},
|
||||
anchor: {
|
||||
show: true,
|
||||
showAbove: true,
|
||||
size: 18,
|
||||
icon:'circle',
|
||||
itemStyle: {
|
||||
borderWidth: 3,
|
||||
color:'#ff8d00',
|
||||
borderColor:'#ff8d00',
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 5
|
||||
width: 3,
|
||||
color:[[1, '#0089ff']]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
splitNumber: 2,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#999'
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#999'
|
||||
width: 4,
|
||||
color: '#0089ff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
//刻度颜色
|
||||
distance: 10,
|
||||
color: '#999',
|
||||
color: '#ffffff',
|
||||
fontSize: 10
|
||||
},
|
||||
title: {
|
||||
@ -455,12 +475,15 @@ const chartoption = ref({
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100
|
||||
value: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
const videoStatus = ref('未连接')
|
||||
const pressureStatus = ref('未连接')
|
||||
const imuStatus = ref('未连接')
|
||||
function routeTo(path) {
|
||||
router.push(`/`)
|
||||
}
|
||||
@ -517,10 +540,15 @@ function connectWebSocket() {
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 监听视频状态事件
|
||||
socket.on('video_status', (data) => {
|
||||
console.log('📺 视频状态:', data)
|
||||
// console.log('📺 视频状态:', data)
|
||||
if (data.status == 'started') {
|
||||
videoStatus.value = '已连接'
|
||||
} else {
|
||||
videoStatus.value = '未连接'
|
||||
}
|
||||
})
|
||||
|
||||
// 监听视频帧数据
|
||||
@ -534,30 +562,32 @@ function connectWebSocket() {
|
||||
displayDepthCameraFrame(data.image)
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 监听IMU状态事件
|
||||
socket.on('imu_status', (data) => {
|
||||
console.log('📡 IMU状态:', data)
|
||||
// console.log('📡 IMU状态:', data)
|
||||
if (data.status === 'success') {
|
||||
ElMessage.success(data.message)
|
||||
imuStatus.value = '已连接'
|
||||
} else {
|
||||
ElMessage.error(data.message)
|
||||
imuStatus.value = '未连接'
|
||||
}
|
||||
})
|
||||
|
||||
// 监听IMU头部姿态数据
|
||||
socket.on('imu_data', (data) => {
|
||||
console.log('🎯 IMU头部姿态数据:', data)
|
||||
// console.log('🎯 IMU头部姿态数据:', data)
|
||||
handleIMUData(data)
|
||||
})
|
||||
|
||||
// 监听压力传感器状态事件
|
||||
socket.on('pressure_status', (data) => {
|
||||
console.log('📡 压力传感器状态:', data)
|
||||
// console.log('📡 压力传感器状态:', data)
|
||||
if (data.status === 'success') {
|
||||
ElMessage.success(data.message)
|
||||
pressureStatus.value = '已连接'
|
||||
// ElMessage.success(data.message)
|
||||
} else {
|
||||
ElMessage.error(data.message)
|
||||
pressureStatus.value = '未连接'
|
||||
// ElMessage.error(data.message)
|
||||
}
|
||||
})
|
||||
|
||||
@ -567,7 +597,7 @@ function connectWebSocket() {
|
||||
handlePressureData(data)
|
||||
})
|
||||
|
||||
// 监听错误事件
|
||||
// 监听错误事件
|
||||
socket.on('error', (error) => {
|
||||
console.error('❌ Socket错误:', error)
|
||||
})
|
||||
@ -648,10 +678,10 @@ function handleIMUData(data) {
|
||||
if (data && data.euler_angles) {
|
||||
// 更新头部姿态数据
|
||||
console.log('🎯 更新IMU头部姿态数据:', data.euler_angles)
|
||||
|
||||
|
||||
// 这里可以添加数据可视化逻辑
|
||||
// 例如更新图表或显示数值
|
||||
|
||||
|
||||
// 如果有图表组件，可以在这里更新数据
|
||||
// updateHeadPoseChart(data.euler_angles)
|
||||
}
|
||||
@ -666,10 +696,10 @@ function handlePressureData(data) {
|
||||
if (data && data.pressure_data) {
|
||||
// 更新足部压力数据
|
||||
console.log('👣 更新压力传感器数据:', data.pressure_data)
|
||||
|
||||
|
||||
// 这里可以添加数据可视化逻辑
|
||||
// 例如更新图表或显示压力分布
|
||||
|
||||
|
||||
// 如果有图表组件，可以在这里更新数据
|
||||
// updatePressureChart(data.pressure_data)
|
||||
}
|
||||
@ -1317,8 +1347,8 @@ async function stopDetection() {
|
||||
// 如果正在录制，停止录制
|
||||
if (isRecording.value) {
|
||||
stopRecording()
|
||||
}
|
||||
isStart.value = false
|
||||
}
|
||||
isStart.value = false
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 停止检测失败:', error)
|
||||
@ -1392,7 +1422,7 @@ const initchart = () => {
|
||||
}
|
||||
headCharts = echarts.init(chartDom);
|
||||
headCharts.setOption(chartoption.value);
|
||||
|
||||
|
||||
// 添加窗口大小调整监听器
|
||||
window.addEventListener('resize', () => {
|
||||
if (headCharts) {
|
||||
@ -1410,7 +1440,7 @@ onMounted(() => {
|
||||
loadPatientInfo()
|
||||
|
||||
// 组件挂载时连接WebSocket并自动开始推流
|
||||
connectWebSocket()
|
||||
// connectWebSocket()
|
||||
|
||||
// 监听页面关闭或刷新事件
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
@ -1433,7 +1463,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
// 停止视频播放并断开连接
|
||||
stopRtsp()
|
||||
stopVideoStream()
|
||||
|
||||
// 断开WebSocket连接
|
||||
if (socket) {
|
||||
@ -1499,7 +1529,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
padding: 10px 20px;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
@ -1548,7 +1578,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
padding: 0px 10px;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 130px);
|
||||
height: calc(100vh - 120px);
|
||||
/* flex: 1;
|
||||
|
||||
display: grid;
|
||||
@ -1912,30 +1942,37 @@ onUnmounted(() => {
|
||||
background: #1D1b26;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.el-table .el-table__cell) {
|
||||
padding: 4px 0px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.dashboard-container .el-table{
|
||||
.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{
|
||||
|
||||
.dashboard-container .el-table tr {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
.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;
|
||||
}
|
||||
|
||||
.top-bar .el-button {
|
||||
height: 44px;
|
||||
border-radius: 25px;
|
||||
|
||||
@ -104,7 +104,7 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 60px;
|
||||
height: 50px;
|
||||
background: #000000;
|
||||
border-bottom: 1px solid #434343;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user