前端修改
This commit is contained in:
parent
8649fb16d2
commit
1c336fc6c9
@ -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')
|
||||||
|
@ -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',
|
||||||
@ -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)
|
||||||
@ -710,14 +707,40 @@ function handleIMUData(data) {
|
|||||||
tilt: headPose.tilt, // 倾斜角:左倾(-), 右倾(+)
|
tilt: headPose.tilt, // 倾斜角:左倾(-), 右倾(+)
|
||||||
pitch: headPose.pitch // 俯仰角:俯角(-), 仰角(+)
|
pitch: headPose.pitch // 俯仰角:俯角(-), 仰角(+)
|
||||||
})
|
})
|
||||||
|
if (rotationCharts) {
|
||||||
|
rotationCharts.setOption({
|
||||||
|
series: [{
|
||||||
|
data: [{
|
||||||
|
value:headPose.rotation.toFixed(1)
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
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)}°`)
|
// console.log(`📐 头部姿态角度 - 旋转: ${headPose.rotation.toFixed(1)}°, 倾斜: ${headPose.tilt.toFixed(1)}°, 俯仰: ${headPose.pitch.toFixed(1)}°`)
|
||||||
|
|
||||||
// 如果正在跟踪最值,则更新最值数据
|
// 如果正在跟踪最值,则更新最值数据
|
||||||
if (isTrackingMaxValues.value) {
|
// if (isTrackingMaxValues.value) {
|
||||||
updateHeadPoseMaxValues(headPose)
|
updateHeadPoseMaxValues(headPose)
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 这里可以添加数据可视化逻辑
|
// 这里可以添加数据可视化逻辑
|
||||||
// 例如更新图表或显示数值
|
// 例如更新图表或显示数值
|
||||||
@ -782,15 +805,15 @@ function updateHeadPoseMaxValues(headPose) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 输出当前最值(用于调试)
|
// // 输出当前最值(用于调试)
|
||||||
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)
|
||||||
}
|
}
|
||||||
@ -814,22 +837,17 @@ function clearAndStartTracking() {
|
|||||||
// 开始跟踪
|
// 开始跟踪
|
||||||
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,
|
||||||
@ -848,13 +866,13 @@ function saveMaxValuesToHistory() {
|
|||||||
// 停止跟踪
|
// 停止跟踪
|
||||||
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('保存最值失败')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -877,7 +895,6 @@ 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)
|
||||||
@ -889,7 +906,16 @@ function updateHistoryTable() {
|
|||||||
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 {
|
||||||
@ -897,46 +923,36 @@ function handlePressureData(data) {
|
|||||||
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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user