梳理了前端检测页面的交互处理逻辑

This commit is contained in:
root 2025-08-06 10:37:21 +08:00
parent d1738c3e42
commit 2a3d168e50
2 changed files with 38 additions and 124 deletions

View File

@ -947,7 +947,7 @@ def handle_disconnect():
logger.info('客户端已断开连接') logger.info('客户端已断开连接')
# 原始的start_video处理逻辑暂时注释 # 原始的start_video处理逻辑暂时注释
@socketio.on('start_video') @socketio.on('start_video_stream')
def handle_start_video(data=None): def handle_start_video(data=None):
try: try:
results = {'status': 'success', 'cameras': {}} results = {'status': 'success', 'cameras': {}}
@ -996,7 +996,7 @@ def handle_start_video(data=None):
logger.error(f'启动视频流失败: {e}', exc_info=True) logger.error(f'启动视频流失败: {e}', exc_info=True)
emit('video_status', {'status': 'error', 'message': f'启动失败: {str(e)}'}) emit('video_status', {'status': 'error', 'message': f'启动失败: {str(e)}'})
@socketio.on('stop_video') @socketio.on('stop_video_stream')
def handle_stop_video(data=None): def handle_stop_video(data=None):
logger.info(f'收到stop_video事件数据: {data}') logger.info(f'收到stop_video事件数据: {data}')

View File

@ -26,36 +26,13 @@
--el-button-border-color: transparent "> --el-button-border-color: transparent ">
结束 结束
</el-button> </el-button>
<el-button v-if="isStart && isConnected" @click="handleScreenshot" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6); <el-button v-if="isStart && isConnected" @click="saveDetectionData" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6);
--el-button-border-color: #409EFF; --el-button-border-color: #409EFF;
--el-button-border-color: transparent "> --el-button-border-color: transparent ">
保存数据 保存数据
</el-button> </el-button>
<!-- <el-button
@click="handleStartStopRecording"
:disabled="!isConnected"
type="warning"
class="start-btn"
style="background-image: linear-gradient(to right, rgb(255, 193, 7), rgb(255, 87, 34));
--el-button-border-color: #409EFF;
--el-button-border-color: transparent; margin-left: 10px;"
>
{{ isRecording ? '停止录制' : '开始录制' }}
</el-button> -->
<!-- <el-button
v-if="isStart == true"
@click="handleDataCollection"
:loading="dataCollectionLoading"
type="success"
style="width: 120px;background-image: linear-gradient(to right, rgb(40, 167, 69), rgb(25, 135, 84));
--el-button-border-color: #409EFF;
--el-button-border-color: transparent; margin-left: 10px;"
>
检测数据采集
</el-button> -->
</div> </div>
<div class="top-bar-right"> <div class="top-bar-right">
<span class="info-item">测试时间2025/5/28 下午14:38</span> <span class="info-item">测试时间2025/5/28 下午14:38</span>
<span class="info-item">测试医生李四</span> <span class="info-item">测试医生李四</span>
@ -509,8 +486,10 @@ function connectWebSocket() {
socket.on('connect', () => { socket.on('connect', () => {
console.log('✅ WebSocket连接成功Socket ID:', socket.id) console.log('✅ WebSocket连接成功Socket ID:', socket.id)
isConnected.value = true isConnected.value = true
// RTSP // IMU
startRtsp() startVideoStream()
startIMUStreaming();
startPressureStreaming();
}) })
// //
@ -528,7 +507,9 @@ function connectWebSocket() {
socket.on('disconnect', (reason) => { socket.on('disconnect', (reason) => {
console.log('⚠️ 连接断开:', reason) console.log('⚠️ 连接断开:', reason)
isConnected.value = false isConnected.value = false
hideVideo() stopVideoStream()
stopIMUStreaming()
stopPressureStreaming()
// //
if (isRecording.value) { if (isRecording.value) {
stopRecording() stopRecording()
@ -536,6 +517,7 @@ function connectWebSocket() {
} }
}) })
// //
socket.on('video_status', (data) => { socket.on('video_status', (data) => {
console.log('📺 视频状态:', data) console.log('📺 视频状态:', data)
@ -552,10 +534,6 @@ function connectWebSocket() {
displayDepthCameraFrame(data.image) displayDepthCameraFrame(data.image)
}) })
//
socket.on('error', (error) => {
console.error('❌ Socket错误:', error)
})
// IMU // IMU
socket.on('imu_status', (data) => { socket.on('imu_status', (data) => {
@ -589,29 +567,25 @@ function connectWebSocket() {
handlePressureData(data) handlePressureData(data)
}) })
//
socket.on('error', (error) => {
console.error('❌ Socket错误:', error)
})
} catch (error) { } catch (error) {
console.error('💥 连接异常:', error.message) console.error('💥 连接异常:', error.message)
isConnected.value = false isConnected.value = false
} }
} }
// WebSocket
function disconnectWebSocket() {
if (socket) {
socket.disconnect()
socket = null
console.log('主动断开连接')
isConnected.value = false
hideVideo()
}
}
// //
function startRtsp() { function startVideoStream() {
if (socket && socket.connected) { if (socket && socket.connected) {
console.log('🚀 发送start_video事件') console.log('🚀 发送start_video事件')
socket.emit('start_video', {}, (ack) => { socket.emit('start_video_stream', {}, (ack) => {
if (ack) { if (ack) {
console.log('✅ start_video事件已确认:', ack) console.log('✅ start_video事件已确认:', ack)
} else { } else {
@ -634,10 +608,10 @@ function startRtsp() {
} }
// //
function stopRtsp() { function stopVideoStream() {
if (socket && socket.connected) { if (socket && socket.connected) {
console.log('🛑 发送stop_video事件') console.log('🛑 发送stop_video事件')
socket.emit('stop_video', {}, (ack) => { socket.emit('stop_video_stream', {}, (ack) => {
if (ack) { if (ack) {
console.log('✅ stop_video事件已确认:', ack) console.log('✅ stop_video事件已确认:', ack)
} else { } else {
@ -667,11 +641,6 @@ function displayDepthCameraFrame(base64Image) {
} }
} }
//
function hideVideo() {
rtspImgSrc.value = ''
depthCameraImgSrc.value = ''
}
// IMU姿 // IMU姿
function handleIMUData(data) { function handleIMUData(data) {
@ -777,19 +746,7 @@ function stopPressureStreaming() {
} }
} }
// /
function handleStartStopRecording() {
if (!isConnected.value) {
ElMessage.warning('WebSocket未连接无法操作')
return
}
if (isRecording.value) {
stopRecording()
} else {
startRecording()
}
}
// //
async function handleDataCollection() { async function handleDataCollection() {
@ -880,8 +837,9 @@ async function handleDataCollection() {
} }
} }
// //
async function handleScreenshot() {
async function saveDetectionData() {
if (screenshotLoading.value) return if (screenshotLoading.value) return
try { try {
@ -917,7 +875,7 @@ async function handleScreenshot() {
} }
// API // API
const result = await saveScreenshot({ const result = await sendDetectionData({
patientId: patientInfo.value.id, patientId: patientInfo.value.id,
patientName: patientInfo.value.name, patientName: patientInfo.value.name,
sessionId: patientInfo.value.sessionId, sessionId: patientInfo.value.sessionId,
@ -960,21 +918,9 @@ async function handleScreenshot() {
} }
} }
// ID // API
function generateSessionId() { async function sendDetectionData(data) {
const now = new Date()
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hour = String(now.getHours()).padStart(2, '0')
const minute = String(now.getMinutes()).padStart(2, '0')
const second = String(now.getSeconds()).padStart(2, '0')
return `${year}${month}${day}${hour}${minute}${second}`
}
// API
async function saveScreenshot(data) {
try { try {
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect` const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`
, { , {
@ -1372,41 +1318,8 @@ async function stopDetection() {
if (isRecording.value) { if (isRecording.value) {
stopRecording() stopRecording()
} }
// saveRecording()
isStart.value = false isStart.value = false
// // API
// if (patientInfo.value.sessionId) {
// const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop`, {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// duration: duration
// })
// })
// if (response.ok) {
// const result = await response.json()
// if (result.success) {
// console.log(' ')
// //
// dialogVisible.value = true
// if (result.duration) {
// console.log(` : ${result.duration}`)
// }
// }
// }
// }
// dialogVisible.value = true
// // ID
// patientInfo.value.detectionStartTime = null
// // patientInfo.value.sessionId = null
// ElMessage.success('')
} catch (error) { } catch (error) {
console.error('❌ 停止检测失败:', error) console.error('❌ 停止检测失败:', error)
ElMessage.error(`停止检测失败: ${error.message}`) ElMessage.error(`停止检测失败: ${error.message}`)
@ -1450,16 +1363,17 @@ const loadPatientInfo = async () => {
// //
const handleBeforeUnload = () => { const handleBeforeUnload = () => {
//
if (isRecording.value) {
stopRecording()
}
// //
if (isStart.value) { if (isStart.value) {
stopDetection() stopDetection()
} }
// //
stopRtsp() stopVideoStream()
// IMU
stopIMUStreaming()
//
stopPressureStreaming()
// WebSocket // WebSocket
if (socket) { if (socket) {
socket.disconnect() socket.disconnect()