添加了头部姿态数据处理

This commit is contained in:
root 2025-08-06 14:24:27 +08:00
parent ba8f13b3ea
commit c7f96636f3

View File

@ -78,10 +78,26 @@
头部姿态 头部姿态
</div> </div>
</div> </div>
<el-button type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216)); <div style="display: flex; gap: 10px;">
--el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;"> <el-button
清零 type="primary"
class="start-btn"
@click="clearAndStartTracking"
:disabled="isRecording"
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: 80px;">
{{ isTrackingMaxValues ? '跟踪中' : '清零' }}
</el-button> </el-button>
<el-button
type="success"
class="start-btn"
@click="saveMaxValuesToHistory"
:disabled="!isTrackingMaxValues || isRecording"
style="background-image: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255));
--el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 80px;">
保存
</el-button>
</div>
</div> </div>
</div> </div>
@ -91,25 +107,28 @@
<div id="headChart1" style="width: 100%;height: 140px;"></div> <div id="headChart1" style="width: 100%;height: 140px;"></div>
<!-- <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> --> <!-- <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"><span class="gauge-group-box-text2">-55.2°</span></div> <div class="gauge-group-box-text1">旋转</div>
<div class="gauge-group-box-text1"><span class="gauge-group-box-text2">{{ 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">-55.2°</span></div> class="gauge-group-box-text2">{{ 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;"> <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"><span class="gauge-group-box-text2">-7.7°</span></div> <div class="gauge-group-box-text1">倾斜</div>
<div class="gauge-group-box-text1"><span class="gauge-group-box-text2">{{ 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">8.7°</span></div> class="gauge-group-box-text2">{{ 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;"> <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"><span class="gauge-group-box-text2">-10.5°</span></div> <div class="gauge-group-box-text1">俯仰</div>
<div class="gauge-group-box-text1" style="margin-left: 20px;"><span <div class="gauge-group-box-text1"><span class="gauge-group-box-text2">{{ headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
class="gauge-group-box-text2">11.5°</span></div> <div class="gauge-group-box-text1" style="margin-left: 20px;"><span
class="gauge-group-box-text2">{{ headPoseMaxValues.pitchUpMax.toFixed(1) }}°</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -642,6 +661,22 @@ function displayDepthCameraFrame(base64Image) {
} }
// 姿
const headPoseMaxValues = ref({
rotationLeftMax: 0, // -
rotationRightMax: 0, // -
tiltLeftMax: 0, // -
tiltRightMax: 0, // -
pitchUpMax: 0, // -
pitchDownMax: 0 // -
})
// 姿
const headPoseHistory = ref([])
//
const isTrackingMaxValues = ref(false)
// IMU姿 // IMU姿
function handleIMUData(data) { function handleIMUData(data) {
try { try {
@ -658,6 +693,11 @@ function handleIMUData(data) {
// //
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) {
updateHeadPoseMaxValues(headPose)
}
// //
// //
@ -673,6 +713,162 @@ function handleIMUData(data) {
} }
} }
// 姿
function updateHeadPoseMaxValues(headPose) {
try {
//
if (headPose.rotation < 0) {
//
headPoseMaxValues.value.rotationLeftMax = Math.min(
headPoseMaxValues.value.rotationLeftMax,
Math.abs(headPose.rotation)
)
} else if (headPose.rotation > 0) {
//
headPoseMaxValues.value.rotationRightMax = Math.max(
headPoseMaxValues.value.rotationRightMax,
headPose.rotation
)
}
//
if (headPose.tilt < 0) {
//
headPoseMaxValues.value.tiltLeftMax = Math.min(
headPoseMaxValues.value.tiltLeftMax,
Math.abs(headPose.tilt)
)
} else if (headPose.tilt > 0) {
//
headPoseMaxValues.value.tiltRightMax = Math.max(
headPoseMaxValues.value.tiltRightMax,
headPose.tilt
)
}
//
if (headPose.pitch < 0) {
//
headPoseMaxValues.value.pitchDownMax = Math.min(
headPoseMaxValues.value.pitchDownMax,
Math.abs(headPose.pitch)
)
} else if (headPose.pitch > 0) {
//
headPoseMaxValues.value.pitchUpMax = Math.max(
headPoseMaxValues.value.pitchUpMax,
headPose.pitch
)
}
//
console.log('📊 当前头部姿态最值:', {
rotationLeft: headPoseMaxValues.value.rotationLeftMax.toFixed(1),
rotationRight: headPoseMaxValues.value.rotationRightMax.toFixed(1),
tiltLeft: headPoseMaxValues.value.tiltLeftMax.toFixed(1),
tiltRight: headPoseMaxValues.value.tiltRightMax.toFixed(1),
pitchUp: headPoseMaxValues.value.pitchUpMax.toFixed(1),
pitchDown: headPoseMaxValues.value.pitchDownMax.toFixed(1)
})
} catch (error) {
console.error('❌ 更新头部姿态最值失败:', error)
}
}
//
function clearAndStartTracking() {
try {
saveMaxValuesToHistory()
// 0
headPoseMaxValues.value = {
rotationLeftMax: 0,
rotationRightMax: 0,
tiltLeftMax: 0,
tiltRightMax: 0,
pitchUpMax: 0,
pitchDownMax: 0
}
//
isTrackingMaxValues.value = true
console.log('🔄 头部姿态最值已清零,开始跟踪')
ElMessage.success('头部姿态最值已清零,开始跟踪')
} catch (error) {
console.error('❌ 清零最值失败:', error)
ElMessage.error('清零最值失败')
}
}
//
function saveMaxValuesToHistory() {
try {
if (!isTrackingMaxValues.value) {
ElMessage.warning('请先点击清零开始跟踪')
return
}
//
const currentMaxValues = {
id: headPoseHistory.value.length + 1,
rotationLeftMax: Number(headPoseMaxValues.value.rotationLeftMax.toFixed(1)),
rotationRightMax: Number(headPoseMaxValues.value.rotationRightMax.toFixed(1)),
tiltLeftMax: Number(headPoseMaxValues.value.tiltLeftMax.toFixed(1)),
tiltRightMax: Number(headPoseMaxValues.value.tiltRightMax.toFixed(1)),
pitchUpMax: Number(headPoseMaxValues.value.pitchUpMax.toFixed(1)),
pitchDownMax: Number(headPoseMaxValues.value.pitchDownMax.toFixed(1)),
timestamp: new Date().toLocaleString()
}
//
headPoseHistory.value.push(currentMaxValues)
//
isTrackingMaxValues.value = false
console.log('💾 头部姿态最值已保存:', currentMaxValues)
ElMessage.success(`头部姿态最值已保存(第${currentMaxValues.id}组)`)
//
updateHistoryTable()
} catch (error) {
console.error('❌ 保存最值失败:', error)
ElMessage.error('保存最值失败')
}
}
//
function updateHistoryTable() {
try {
// 姿
if (headPoseHistory.value.length > 0) {
const latestData = headPoseHistory.value[headPoseHistory.value.length - 1]
// historyData姿
const newHistoryItem = {
id: latestData.id,
rotLeft: latestData.rotationLeftMax,
rotRight: latestData.rotationRightMax,
tiltLeft: latestData.tiltLeftMax,
tiltRight: latestData.tiltRightMax,
pitchDown: latestData.pitchDownMax,
pitchUp: latestData.pitchUpMax,
timestamp: latestData.timestamp
}
// historyData
if (historyData.value) {
historyData.value.push(newHistoryItem)
}
console.log('📋 历史数据表格已更新')
}
} catch (error) {
console.error('❌ 更新历史数据表格失败:', error)
}
}
// //
function handlePressureData(data) { function handlePressureData(data) {
try { try {