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 16:08:44 +08:00
parent 8649fb16d2
commit 1c336fc6c9
2 changed files with 174 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/renderer/src/services/api.js
View File

@ -112,6 +112,11 @@ export const deviceAPI = {
return api.post('/api/devices/calibrate') return api.post('/api/devices/calibrate')
}, },
// 校准IMU头部姿态传感器
calibrateIMU() {
return api.post('/api/devices/calibrate/imu')
},
// 测试设备 // 测试设备
testDevice() { testDevice() {
return api.post('/api/devices/test') return api.post('/api/devices/test')

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

@ -83,11 +83,7 @@
<div style="margin-left: 10px;font-size: 14px;">{{ imuStatus }}</div> <div style="margin-left: 10px;font-size: 14px;">{{ imuStatus }}</div>
</div> </div>
<div style="display: flex; gap: 10px;"> <div style="display: flex; gap: 10px;">
<el-button <el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
type="primary"
class="start-btn"
@click="clearAndStartTracking"
:disabled="isRecording"
style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); 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;">
清零并保存 清零并保存
@ -99,40 +95,36 @@
<!-- 仪表盘区域 --> <!-- 仪表盘区域 -->
<div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;"> <div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
<div style="width: 33%;"> <div style="width: 33%;">
<div id="headChart1" style="width: 100%;height: 140px;"></div> <div id="rotationChartId" style="width: 100%;height: 140px;"></div>
<!-- <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> -->
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">旋转</div> <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{ headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div> headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">{{
class="gauge-group-box-text2">{{ headPoseMaxValues.rotationRightMax.toFixed(1) }}°</span></div> headPoseMaxValues.rotationRightMax.toFixed(1) }}°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> <div id="pitchChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">倾斜</div> <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{ headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div> headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">{{
class="gauge-group-box-text2">{{ headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span></div> headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> <div id="tiltChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="gauge-group-box">
<div class="gauge-group-box-text1">俯仰</div> <div class="gauge-group-box-text1">下：<span class="gauge-group-box-text2">{{
<div class="gauge-group-box-text1">下：<span class="gauge-group-box-text2">{{ headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div> headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">上：<span <div class="gauge-group-box-text1" style="margin-left: 20px;">上：<span class="gauge-group-box-text2">{{
class="gauge-group-box-text2">{{ headPoseMaxValues.pitchUpMax.toFixed(1) }}°</span></div> headPoseMaxValues.pitchUpMax.toFixed(1) }}°</span></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 历史数据表格 --> <!-- 历史数据表格 -->
<div class="gauge-table-title"> <div style="display: flex;justify-content: center;padding: 0px 25px;margin-top: 20px;">
历史数据.. <el-table :data="historyData" border style="width: 96%;overflow: auto;" :height="160">
</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" /> <el-table-column prop="id" label="ID" width="60" />
<el-table-column label="最大旋转角" align="center"> <el-table-column label="最大旋转角" align="center">
<el-table-column prop="rotLeft" label="左" min-width="60" align="center" /> <el-table-column prop="rotLeft" label="左" min-width="60" align="center" />
@ -167,11 +159,11 @@
<div class="foot-container-left" style="font-size: 14px;"> <div class="foot-container-left" style="font-size: 14px;">
<div> <div>
<span>左前足</span> <span>左前足</span>
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.left_front }}</span>
</div> </div>
<div class="foot-container-margintop"> <div class="foot-container-margintop">
<span>左后足</span> <span>左后足</span>
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.left_rear }}</span>
</div> </div>
</div> </div>
<div class="foot-container-content"> <div class="foot-container-content">
@ -183,26 +175,28 @@
<span>右足</span> <span>右足</span>
</div> </div>
</div> </div>
<img src="@/assets/zu.png" alt=""> <img :src="footImgSrc" style="width: 300px;height: 300px;" alt="">
<div style="display: flex;justify-content: center;margin-top: 8px;font-size: 14px;"> <div style="display: flex;justify-content: center;margin-top: 8px;font-size: 14px;">
<div> <div>
<span>左足总压力</span> <span>左足总压力</span>
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;"
class="foot-container-paddingcolor">{{ footPressure.left_total }}</span>
</div> </div>
<div class="foot-container-marginleft"> <div class="foot-container-marginleft">
<span>右足总压力</span> <span>右足总压力</span>
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;"
class="foot-container-paddingcolor">{{ footPressure.right_total }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="foot-container-right" style="font-size: 14px;"> <div class="foot-container-right" style="font-size: 14px;">
<div> <div>
<span>右前足</span> <span>右前足</span>
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_front }}</span>
</div> </div>
<div class="foot-container-margintop"> <div class="foot-container-margintop">
<span>右后足</span> <span>右后足</span>
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">{{ footPressure.right_rear }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -404,9 +398,9 @@ const handleClose = () => {
const diagnosticForm = ref({}) const diagnosticForm = ref({})
// 模拟历史数据 // 模拟历史数据
const historyData = ref([ const historyData = ref([
{ id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' }, // { 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: 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°' } // { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
]) ])
const chartoption = ref({ const chartoption = ref({
backgroundColor: '#000000', backgroundColor: '#000000',
@ -435,26 +429,26 @@ const chartoption = ref({
length: '85%', length: '85%',
width: 2, width: 2,
offsetCenter: [0, '5%'], offsetCenter: [0, '5%'],
itemStyle:{ itemStyle: {
color:'#ff8d00' color: '#ff8d00'
}, },
}, },
anchor: { anchor: {
show: true, show: true,
showAbove: true, showAbove: true,
size: 18, size: 18,
icon:'circle', icon: 'circle',
itemStyle: { itemStyle: {
borderWidth: 3, borderWidth: 3,
color:'#ff8d00', color: '#ff8d00',
borderColor:'#ff8d00', borderColor: '#ff8d00',
} }
}, },
axisLine: { axisLine: {
roundCap: true, roundCap: true,
lineStyle: { lineStyle: {
width: 3, width: 3,
color:[[1, '#0089ff']] color: [[1, '#0089ff']]
} }
}, },
axisTick: { axisTick: {
@ -523,6 +517,8 @@ function connectWebSocket() {
startVideoStream() startVideoStream()
startIMUStreaming(); startIMUStreaming();
startPressureStreaming(); startPressureStreaming();
//绘制头部仪表盘
initchart()
}) })
// 连接失败事件 // 连接失败事件
@ -694,6 +690,7 @@ const headPoseMaxValues = ref({
// 头部姿态历史最值记录数组 // 头部姿态历史最值记录数组
const headPoseHistory = ref([]) const headPoseHistory = ref([])
const headPoseData = ref({})
// 最值跟踪状态 // 最值跟踪状态
const isTrackingMaxValues = ref(false) const isTrackingMaxValues = ref(false)
@ -703,22 +700,48 @@ function handleIMUData(data) {
try { try {
if (data && data.head_pose) { if (data && data.head_pose) {
const headPose = data.head_pose const headPose = data.head_pose
// 更新头部姿态数据 // 更新头部姿态数据
console.log('🎯 更新IMU头部姿态数据:', { console.log('🎯 更新IMU头部姿态数据:', {
rotation: headPose.rotation, // 旋转角：左旋(-), 右旋(+) rotation: headPose.rotation, // 旋转角：左旋(-), 右旋(+)
tilt: headPose.tilt, // 倾斜角：左倾(-), 右倾(+) tilt: headPose.tilt, // 倾斜角：左倾(-), 右倾(+)
pitch: headPose.pitch // 俯仰角：俯角(-), 仰角(+) pitch: headPose.pitch // 俯仰角：俯角(-), 仰角(+)
}) })
if (rotationCharts) {
// 显示角度值（保留一位小数） rotationCharts.setOption({
console.log(`📐 头部姿态角度 - 旋转: ${headPose.rotation.toFixed(1)}°, 倾斜: ${headPose.tilt.toFixed(1)}°, 俯仰: ${headPose.pitch.toFixed(1)}°`) series: [{
data: [{
// 如果正在跟踪最值，则更新最值数据 value:headPose.rotation.toFixed(1)
if (isTrackingMaxValues.value) { }]
updateHeadPoseMaxValues(headPose) }]
})
} }
if (pitchCharts) {
pitchCharts.setOption({
series: [{
data: [{
value:headPose.pitch.toFixed(1)
}]
}]
})
}
if (tiltCharts) {
tiltCharts.setOption({
series: [{
data: [{
value:headPose.tilt.toFixed(1)
}]
}]
})
}
// 显示角度值（保留一位小数）
// console.log(`📐 头部姿态角度 - 旋转: ${headPose.rotation.toFixed(1)}°, 倾斜: ${headPose.tilt.toFixed(1)}°, 俯仰: ${headPose.pitch.toFixed(1)}°`)
// 如果正在跟踪最值，则更新最值数据
// if (isTrackingMaxValues.value) {
updateHeadPoseMaxValues(headPose)
// }
// 这里可以添加数据可视化逻辑 // 这里可以添加数据可视化逻辑
// 例如更新图表或显示数值 // 例如更新图表或显示数值
@ -751,7 +774,7 @@ function updateHeadPoseMaxValues(headPose) {
headPose.rotation headPose.rotation
) )
} }
// 更新倾斜角最值 // 更新倾斜角最值
if (headPose.tilt < 0) { if (headPose.tilt < 0) {
// 左倾（负值），取绝对值的最大值 // 左倾（负值），取绝对值的最大值
@ -766,7 +789,7 @@ function updateHeadPoseMaxValues(headPose) {
headPose.tilt headPose.tilt
) )
} }
// 更新俯仰角最值 // 更新俯仰角最值
if (headPose.pitch < 0) { if (headPose.pitch < 0) {
// 下俯（负值），取绝对值的最大值 // 下俯（负值），取绝对值的最大值
@ -781,16 +804,16 @@ function updateHeadPoseMaxValues(headPose) {
headPose.pitch headPose.pitch
) )
} }
// 输出当前最值（用于调试） // // 输出当前最值（用于调试）
console.log('📊 当前头部姿态最值:', { // console.log('📊 当前头部姿态最值:', {
rotationLeft: headPoseMaxValues.value.rotationLeftMax.toFixed(1), // rotationLeft: headPoseMaxValues.value.rotationLeftMax.toFixed(1),
rotationRight: headPoseMaxValues.value.rotationRightMax.toFixed(1), // rotationRight: headPoseMaxValues.value.rotationRightMax.toFixed(1),
tiltLeft: headPoseMaxValues.value.tiltLeftMax.toFixed(1), // tiltLeft: headPoseMaxValues.value.tiltLeftMax.toFixed(1),
tiltRight: headPoseMaxValues.value.tiltRightMax.toFixed(1), // tiltRight: headPoseMaxValues.value.tiltRightMax.toFixed(1),
pitchUp: headPoseMaxValues.value.pitchUpMax.toFixed(1), // pitchUp: headPoseMaxValues.value.pitchUpMax.toFixed(1),
pitchDown: headPoseMaxValues.value.pitchDownMax.toFixed(1) // pitchDown: headPoseMaxValues.value.pitchDownMax.toFixed(1)
}) // })
} catch (error) { } catch (error) {
console.error('❌ 更新头部姿态最值失败:', error) console.error('❌ 更新头部姿态最值失败:', error)
} }
@ -800,7 +823,7 @@ function updateHeadPoseMaxValues(headPose) {
function clearAndStartTracking() { function clearAndStartTracking() {
try { try {
saveMaxValuesToHistory() saveMaxValuesToHistory()
// 重置所有最值为0 // 重置所有最值为0
headPoseMaxValues.value = { headPoseMaxValues.value = {
rotationLeftMax: 0, rotationLeftMax: 0,
@ -810,26 +833,21 @@ function clearAndStartTracking() {
pitchUpMax: 0, pitchUpMax: 0,
pitchDownMax: 0 pitchDownMax: 0
} }
// 开始跟踪 // 开始跟踪
isTrackingMaxValues.value = true isTrackingMaxValues.value = true
console.log('🔄 头部姿态最值已清零，开始跟踪') // console.log('🔄 头部姿态最值已清零，开始跟踪')
ElMessage.success('头部姿态最值已清零，开始跟踪') // ElMessage.success('头部姿态最值已清零，开始跟踪')
} catch (error) { } catch (error) {
console.error('❌ 清零最值失败:', error) // console.error('❌ 清零最值失败:', error)
ElMessage.error('清零最值失败') ElMessage.error('清零失败')
} }
} }
// 保存当前最值到历史记录 // 保存当前最值到历史记录
function saveMaxValuesToHistory() { function saveMaxValuesToHistory() {
try { try {
if (!isTrackingMaxValues.value) {
ElMessage.warning('请先点击清零开始跟踪')
return
}
// 创建当前最值的副本 // 创建当前最值的副本
const currentMaxValues = { const currentMaxValues = {
id: headPoseHistory.value.length + 1, id: headPoseHistory.value.length + 1,
@ -841,20 +859,20 @@ function saveMaxValuesToHistory() {
pitchDownMax: Number(headPoseMaxValues.value.pitchDownMax.toFixed(1)), pitchDownMax: Number(headPoseMaxValues.value.pitchDownMax.toFixed(1)),
timestamp: new Date().toLocaleString() timestamp: new Date().toLocaleString()
} }
// 添加到历史记录 // 添加到历史记录
headPoseHistory.value.push(currentMaxValues) headPoseHistory.value.push(currentMaxValues)
// 停止跟踪 // 停止跟踪
isTrackingMaxValues.value = false isTrackingMaxValues.value = false
console.log('💾 头部姿态最值已保存:', currentMaxValues) // console.log('💾 头部姿态最值已保存:', currentMaxValues)
ElMessage.success(`头部姿态最值已保存（第${currentMaxValues.id}组）`) // ElMessage.success(`头部姿态最值已保存（第${currentMaxValues.id}组）`)
// 更新历史数据表格（如果存在的话） // 更新历史数据表格（如果存在的话）
updateHistoryTable() updateHistoryTable()
} catch (error) { } catch (error) {
console.error('❌ 保存最值失败:', error) // console.error('❌ 保存最值失败:', error)
ElMessage.error('保存最值失败') ElMessage.error('保存最值失败')
} }
} }
@ -865,7 +883,7 @@ function updateHistoryTable() {
// 将头部姿态最值数据合并到现有的历史数据中 // 将头部姿态最值数据合并到现有的历史数据中
if (headPoseHistory.value.length > 0) { if (headPoseHistory.value.length > 0) {
const latestData = headPoseHistory.value[headPoseHistory.value.length - 1] const latestData = headPoseHistory.value[headPoseHistory.value.length - 1]
// 更新historyData数组，添加头部姿态最值数据 // 更新historyData数组，添加头部姿态最值数据
const newHistoryItem = { const newHistoryItem = {
id: latestData.id, id: latestData.id,
@ -877,66 +895,64 @@ function updateHistoryTable() {
pitchUp: latestData.pitchUpMax, pitchUp: latestData.pitchUpMax,
timestamp: latestData.timestamp timestamp: latestData.timestamp
} }
// 如果historyData数组存在，则添加新数据 // 如果historyData数组存在，则添加新数据
if (historyData.value) { if (historyData.value) {
historyData.value.push(newHistoryItem) historyData.value.push(newHistoryItem)
} }
console.log('📋 历史数据表格已更新') console.log('📋 历史数据表格已更新')
} }
} catch (error) { } catch (error) {
console.error('❌ 更新历史数据表格失败:', error) console.error('❌ 更新历史数据表格失败:', error)
} }
} }
const footPressure = ref({
left_front: '',
left_rear: '',
right_front: '',
right_rear: '',
left_total: '',
right_total: '',
total_pressure: ''
})
const footImgSrc = ref('')
// 处理压力传感器足部压力数据 // 处理压力传感器足部压力数据
function handlePressureData(data) { function handlePressureData(data) {
try { try {
if (data && data.foot_pressure) { if (data && data.foot_pressure) {
const pressureData = data.foot_pressure const pressureData = data.foot_pressure
// 更新足部压力数据 // 更新足部压力数据
console.log('👣 接收到压力传感器数据:')
// 显示分区压力值 // 显示分区压力值
if (pressureData.pressure_zones) { if (pressureData.pressure_zones) {
const zones = pressureData.pressure_zones footPressure.value = pressureData.pressure_zones
console.log(' 分区压力值:')
console.log(` 左前足: ${zones.left_front} N`)
console.log(` 左后足: ${zones.left_rear} N`)
console.log(` 右前足: ${zones.right_front} N`)
console.log(` 右后足: ${zones.right_rear} N`)
console.log(` 左足总压力: ${zones.left_total} N`)
console.log(` 右足总压力: ${zones.right_total} N`)
console.log(` 总压力: ${zones.total_pressure} N`)
} }
// 显示平衡分析 // 显示平衡分析
if (pressureData.balance_analysis) { // if (pressureData.balance_analysis) {
const balance = pressureData.balance_analysis // const balance = pressureData.balance_analysis
console.log(' 平衡分析:') // console.log(' 平衡分析:')
console.log(` 平衡比例: ${(balance.balance_ratio * 100).toFixed(1)}%`) // console.log(` 平衡比例: ${(balance.balance_ratio * 100).toFixed(1)}%`)
console.log(` 压力中心偏移: ${balance.pressure_center_offset}%`) // console.log(` 压力中心偏移: ${balance.pressure_center_offset}%`)
console.log(` 平衡状态: ${balance.balance_status}`) // console.log(` 平衡状态: ${balance.balance_status}`)
console.log(` 左足前后比: ${(balance.left_front_ratio * 100).toFixed(1)}%`) // console.log(` 左足前后比: ${(balance.left_front_ratio * 100).toFixed(1)}%`)
console.log(` 右足前后比: ${(balance.right_front_ratio * 100).toFixed(1)}%`) // console.log(` 右足前后比: ${(balance.right_front_ratio * 100).toFixed(1)}%`)
} // }
// 处理压力图片 // 处理压力图片
if (pressureData.pressure_image) { if (pressureData.pressure_image) {
console.log(' 📊 接收到压力分布图片 (base64格式)') // console.log(' 📊 接收到压力分布图片 (base64格式)')
// 这里可以将图片显示在界面上 // 这里可以将图片显示在界面上
updatePressureImage(pressureData.pressure_image) if (pressureData.pressure_image && pressureData.pressure_image.length > 0) {
footImgSrc.value = pressureData.pressure_image
} else {
console.warn('⚠️ 收到空的压力传感器数据图')
}
} }
} }
} catch (error) { } catch (error) {
console.error('❌ 处理压力传感器数据失败:', error) console.error('❌ 处理压力传感器数据失败:', error)
} }
} }
// 启动IMU头部姿态数据推流 // 启动IMU头部姿态数据推流
function startIMUStreaming() { function startIMUStreaming() {
if (socket && socket.connected) { if (socket && socket.connected) {
@ -1429,21 +1445,19 @@ async function saveRecording() {
mimeType: currentMimeType || 'video/webm;codecs=vp9' mimeType: currentMimeType || 'video/webm;codecs=vp9'
}) })
}) })
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`) throw new Error(`HTTP ${response.status}: ${response.statusText}`)
} }
const result = await response.json() const result = await response.json()
if (result.success) { if (result.success) {
//诊断信息说明
dialogVisible.value = true
console.log('🎬 录像保存成功:', result.filepath) console.log('🎬 录像保存成功:', result.filepath)
ElMessage.success({ ElMessage.success({
message: `录像保存成功！文件路径: ${result.filepath}`, message: `录像保存成功！文件路径: ${result.filepath}`,
duration: 5000 duration: 5000
}) })
isRecording.value = false isRecording.value = false
dialogVisible.value = true
// 更新会话的视频路径 // 更新会话的视频路径
if (patientInfo.value.sessionId) { if (patientInfo.value.sessionId) {
try { try {
@ -1460,7 +1474,6 @@ async function saveRecording() {
// patientInfo.value.sessionId = null // patientInfo.value.sessionId = null
console.log('✅ 会话正式结束，会话ID已清空') console.log('✅ 会话正式结束，会话ID已清空')
} else { } else {
dialogVisible.value = false
throw new Error(result.message || '保存失败') throw new Error(result.message || '保存失败')
} }
@ -1470,7 +1483,6 @@ async function saveRecording() {
message: `保存录像失败: ${error.message}`, message: `保存录像失败: ${error.message}`,
duration: 5000 duration: 5000
}) })
dialogVisible.value = false
// 即使保存失败，也要清空会话ID，避免状态混乱 // 即使保存失败，也要清空会话ID，避免状态混乱
patientInfo.value.sessionId = null patientInfo.value.sessionId = null
console.log('⚠️ 录像保存失败，但会话已结束，会话ID已清空') console.log('⚠️ 录像保存失败，但会话已结束，会话ID已清空')
@ -1639,27 +1651,51 @@ const handleBeforeUnload = () => {
} }
} }
const creatorId = ref('') const creatorId = ref('')
let headCharts = null; let rotationCharts = null;
let pitchCharts = null;
let tiltCharts = null;
const initchart = () => { const initchart = () => {
// 确保 DOM 元素已经渲染 // 确保 DOM 元素已经渲染
nextTick(() => { nextTick(() => {
const chartDom = document.getElementById('headChart1'); const chartDom = document.getElementById('rotationChartId');
if (chartDom) { if (chartDom) {
// 如果图表已经存在，先销毁 // 如果图表已经存在，先销毁
if (headCharts) { if (rotationCharts) {
headCharts.dispose(); rotationCharts.dispose();
} }
headCharts = echarts.init(chartDom); rotationCharts = echarts.init(chartDom);
headCharts.setOption(chartoption.value); rotationCharts.setOption(chartoption.value);
// 添加窗口大小调整监听器 // 添加窗口大小调整监听器
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (headCharts) { if (rotationCharts) {
headCharts.resize(); rotationCharts.resize();
} }
}); });
} else { } else {
console.warn('找不到 ID 为 headChart1 的 DOM 元素'); console.warn('找不到 ID 为 的 DOM 元素');
}
const chartDom2 = document.getElementById('pitchChartId');
if (chartDom2) {
// 如果图表已经存在，先销毁
if (pitchCharts) {
pitchCharts.dispose();
}
pitchCharts = echarts.init(chartDom2);
pitchCharts.setOption(chartoption.value);
} else {
console.warn('找不到 ID 为 的 DOM 元素');
}
const chartDom3 = document.getElementById('tiltChartId');
if (chartDom3) {
// 如果图表已经存在，先销毁
if (tiltCharts) {
tiltCharts.dispose();
}
tiltCharts = echarts.init(chartDom3);
tiltCharts.setOption(chartoption.value);
} else {
console.warn('找不到 ID 为 的 DOM 元素');
} }
}); });
} }
@ -1669,7 +1705,7 @@ onMounted(() => {
loadPatientInfo() loadPatientInfo()
// 组件挂载时连接WebSocket并自动开始推流 // 组件挂载时连接WebSocket并自动开始推流
// connectWebSocket() connectWebSocket()
// 监听页面关闭或刷新事件 // 监听页面关闭或刷新事件
window.addEventListener('beforeunload', handleBeforeUnload) window.addEventListener('beforeunload', handleBeforeUnload)
@ -1677,7 +1713,6 @@ onMounted(() => {
console.log(authStore.currentUser) console.log(authStore.currentUser)
creatorId.value = authStore.currentUser.id creatorId.value = authStore.currentUser.id
} }
initchart()
}) })
onUnmounted(() => { onUnmounted(() => {
@ -2175,6 +2210,9 @@ onUnmounted(() => {
:deep(.el-table .el-table__cell) { :deep(.el-table .el-table__cell) {
padding: 4px 0px; padding: 4px 0px;
} }
:deep(.el-table__body-wrapper) {
border-bottom: 1px solid #ffffff !important;
}
</style> </style>
<style> <style>
.dashboard-container .el-table { .dashboard-container .el-table {