修改头部图
This commit is contained in:
parent
0abe79ba1c
commit
08718766d4
@ -103,6 +103,7 @@
|
||||
<div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
|
||||
<div style="width: 33%;position: relative;">
|
||||
<div class="chart-title">旋转角</div>
|
||||
<div class="chart-titles">{{headlist.rotation}}</div>
|
||||
<div id="rotationChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="gauge-group-box">
|
||||
<div class="gauge-group-box-text1">左:<span class="gauge-group-box-text2">{{
|
||||
@ -113,7 +114,8 @@
|
||||
</div>
|
||||
<div style="width: 33%;position: relative;">
|
||||
<div class="chart-title">倾斜角</div>
|
||||
<div id="pitchChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="chart-titles">{{headlist.tilt}}</div>
|
||||
<div id="tiltChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="gauge-group-box">
|
||||
<div class="gauge-group-box-text1">左:<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
|
||||
@ -123,7 +125,8 @@
|
||||
</div>
|
||||
<div style="width: 33%;position: relative;">
|
||||
<div class="chart-title">俯仰角</div>
|
||||
<div id="tiltChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="chart-titles">{{headlist.pitch}}</div>
|
||||
<div id="pitchChartId" style="width: 100%;height: 140px;"></div>
|
||||
<div class="gauge-group-box">
|
||||
<div class="gauge-group-box-text1">俯:<span class="gauge-group-box-text2">{{
|
||||
headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
|
||||
@ -669,6 +672,11 @@ const formattedTime = computed(() => {
|
||||
const secs = seconds.value % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
});
|
||||
const headlist = ref({
|
||||
rotation:'0',
|
||||
tilt:'0',
|
||||
pitch:'0'
|
||||
})
|
||||
// 开始计时器
|
||||
const startTimer = () => {
|
||||
if (isRunning.value) return;
|
||||
@ -987,7 +995,10 @@ const isTrackingMaxValues = ref(false)
|
||||
function handleIMUData(data) {
|
||||
try {
|
||||
if (!data) return
|
||||
|
||||
console.log('IMU数据:', data)
|
||||
headlist.value.rotation = data.rotation // 旋转角度
|
||||
headlist.value.tilt = data.tilt // 倾斜角度
|
||||
headlist.value.pitch = data.pitch // 俯仰角度
|
||||
// 兼容两种载荷结构:
|
||||
// 1) { rotation, tilt, pitch }
|
||||
// 2) { head_pose: { rotation, tilt, pitch } }
|
||||
@ -2689,6 +2700,17 @@ onUnmounted(() => {
|
||||
font-size: 14px;
|
||||
color: #EEF1FA;
|
||||
}
|
||||
.chart-titles {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 7px;
|
||||
z-index: 2000;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #EEF1FA;
|
||||
}
|
||||
|
||||
:deep(.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before) {
|
||||
background-color: rgb(81, 81, 81) !important;
|
||||
|
Loading…
Reference in New Issue
Block a user