添加刷新按钮

This commit is contained in:
limengnan 2025-09-29 10:41:53 +08:00
parent 8b3c1b9ec5
commit 50daf3f070

View File

@ -65,9 +65,15 @@
身体姿态
</div>
</div>
<div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }"
style="font-size: 14px;">
{{ femtoboltStatus }}</div>
<div style="display: flex; align-items: center;">
<img src="@/assets/refresh.png" title="刷新身体姿态数据"
@click="refreshClick('femtobolt')"
alt="" style="margin-right: 5px;cursor: pointer;">
<div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }"
style="font-size: 14px;">
{{ femtoboltStatus }}</div>
</div>
</div>
<div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 40px);padding-top: 0px;">
<!-- 使用深度相机视频流替换静态图片 -->
@ -85,28 +91,35 @@
<div style="display: flex;">
<div class="module-header">
<div style="display: flex;align-items: center;">
<div class="module-title" style="width:230px">
<div class="module-title" style="width:380px">
<div class="module-title-bg">
<img src="@/assets/svg/u67.svg" alt="" srcset="" style="margin-right: 5px;">
头部姿态
</div>
<el-button type="primary" class="start-btn" @click="calibrationClick" :disabled="isRecording"
style="background-color: #0099ff;font-size: 14px;
--el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
校准
</el-button>
<div>
<el-button type="primary" class="start-btn" @click="calibrationClick" :disabled="isRecording"
style="background-color: #0099ff;font-size: 14px;
--el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
校准
</el-button>
<el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
style="background-color: #0099ff;font-size: 14px;margin-left: 15px;
--el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
清零
</el-button>
</div>
</div>
</div>
<div style="display: flex;align-items: center;">
<img src="@/assets/refresh.png" title="刷新头部姿态数据"
@click="refreshClick('imu')"
alt="" style="margin-right: 5px;cursor: pointer;">
<div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
imuStatus
}}</div>
<el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
style="background-color: #0099ff;font-size: 14px;margin-left: 15px;
--el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
清零
</el-button>
</div>
</div>
@ -169,8 +182,13 @@
足部压力
</div>
</div>
<div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
pressureStatus }}</div>
<div style="display: flex;align-items: center;">
<img src="@/assets/refresh.png" title="刷新足部压力数据"
@click="refreshClick('pressure')"
alt="" style="margin-right: 5px;cursor: pointer;">
<div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
pressureStatus }}</div>
</div>
</div>
</div>
<div style="
@ -331,7 +349,12 @@
视频
</div>
</div>
<div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div>
<div style="display: flex;align-items: center;">
<img src="@/assets/refresh.png" title="刷新视频数据"
@click="refreshClick('camera')"
alt="" style="margin-right: 5px;cursor: pointer;">
<div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div>
</div>
</div>
</div>
<div ref="videoImgRef" style="width: 100%;height: calc(100% - 47px)">
@ -597,6 +620,7 @@ let cameraSocket = null
let femtoboltSocket = null
let imuSocket = null
let pressureSocket = null
let restartSocket = null
let frameCount = 0
//
@ -870,6 +894,14 @@ const savePatient = async () => {
}
}
function routeTo(path) {
if( isPreventCombo.value == true){
setTimeout(() => {
isPreventCombo.value = false
}, 2000);
ElMessage.warning(`请勿连击点击刷新按钮`)
return
}
isPreventCombo.value = true
router.push(`/`)
}
function cameraUpdate() { //
@ -941,6 +973,11 @@ function connectWebSocket() {
pressureSocket.disconnect()
pressureSocket = null
}
if (restartSocket) {
restartSocket.disconnect()
restartSocket = null
}
// Socket.IO
socket = io(BACKEND_URL, {
@ -964,7 +1001,7 @@ function connectWebSocket() {
femtoboltSocket = devicesSocket
imuSocket = devicesSocket
pressureSocket = devicesSocket
restartSocket = devicesSocket
//
socket.on('connect', () => {
console.log('✅ 主WebSocket连接成功Socket ID:', socket.id)
@ -1046,6 +1083,11 @@ function connectWebSocket() {
tempInfo.value.camera_frame = data
displayFrame(data.image)
})
devicesSocket.on('device_restart_message', (data) => {
debugger
})
devicesSocket.on('femtobolt_frame', (data) => {
@ -1147,6 +1189,8 @@ function disconnectWebSocket() {
femtoboltSocket = null
imuSocket = null
pressureSocket = null
restartSocket = null
console.log('🔗 统一设备命名空间连接已断开')
}
@ -1626,7 +1670,14 @@ async function handleStartStop() {
ElMessage.warning('WebSocket未连接无法操作')
return
}
if( isPreventCombo.value == true){
setTimeout(() => {
isPreventCombo.value = false
}, 2000);
ElMessage.warning(`请勿连击点击刷新按钮`)
return
}
isPreventCombo.value = true
if (isStart.value) {
//
await stopRecord()
@ -2043,7 +2094,41 @@ const stopRecord = async () => { // 停止录屏
}
function routerClick(){
historyDialogVisible.value = true
// router.push(`/patient/${patientInfo.value.id}`)
}
const isPreventCombo =ref(false) //
//
function refreshClick(type) {
if( isPreventCombo.value == true){
setTimeout(() => {
isPreventCombo.value = false
}, 5000);
ElMessage.warning(`请勿连击点击刷新按钮`)
return
}
isPreventCombo.value = true
if (devicesSocket && devicesSocket.connected) {
console.log('🚀 发送重启设备请求...')
debugger
if(type == 'camera'){
devicesSocket.emit('restart_device', { device_type: 'camera' })
}else if(type == 'femtobolt'){
devicesSocket.emit('restart_device', { device_type: 'femtobolt' })
}else if(type == 'imu'){
devicesSocket.emit('restart_device', { device_type: 'imu' })
}else if(type == 'pressure'){
devicesSocket.emit('restart_device', { device_type: 'pressure' })
}
} else {
console.warn('⚠️ 设备Socket未连接无法启动设备数据推送')
}
}
</script>