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-13 14:17:37 +08:00
parent 08718766d4
commit c1cfa71348
1 changed files with 79 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
<!-- handleStartStop -->
<el-button v-if="isRecording" @click="handleStartStop" type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
--el-button-border-color: #409EFF;
--el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;" >
--el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;">
结束
</el-button>
<el-button v-if="isStart && isConnected" @click="saveDetectionData" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6);
@ -77,18 +77,23 @@
<div style="display: flex;">
<div class="module-header">
<div style="display: flex;align-items: center;">
<div class="module-title">
<div class="module-title" style="width:230px">
<div class="module-title-bg">
<img src="@/assets/svg/u67.svg" alt="" srcset="" style="margin-right: 5px;">
头部姿态
</div>
<el-button type="primary" class="start-btn" @click="calibrationClick" :disabled="isRecording"
style="background-color: #0099ff;font-size: 14px;
--el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
校准
</el-button>
</div>
</div>
<div style="display: flex;align-items: center;">
<div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
imuStatus
}}</div>
}}</div>
<el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
style="background-color: #0099ff;font-size: 14px;margin-left: 15px;
--el-button-border-color: transparent !important;border-radius: 20px;height:26px;border:none;width: 100px;">
@ -103,7 +108,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 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">{{
@ -114,7 +119,7 @@
</div>
<div style="width: 33%;position: relative;">
<div class="chart-title">倾斜角</div>
<div class="chart-titles">{{headlist.tilt}}</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">{{
@ -125,7 +130,7 @@
</div>
<div style="width: 33%;position: relative;">
<div class="chart-title">俯仰角</div>
<div class="chart-titles">{{headlist.pitch}}</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">{{
@ -141,7 +146,7 @@
</div>
<!-- 历史数据表格 -->
<div style="display: flex;justify-content: center;padding: 0px 10px;margin-top: 5px;height: 100%;">
<el-table :data="historyData" border style="width: 100%;overflow: auto;height: calc(100% - 280px);" >
<el-table :data="historyData" border style="width: 100%;overflow: auto;height: calc(100% - 280px);">
<el-table-column prop="id" label="ID" align="center" width="60" />
<el-table-column label="最大旋转角" align="center">
<el-table-column prop="rotLeft" label="左" min-width="60" align="center" />
@ -334,7 +339,8 @@
</div>
</div>
</div>
<el-dialog class="tsDialog" v-model="resDialogVisible" center title="诊断信息" width="600" :before-close="reshandleClose">
<el-dialog class="tsDialog" v-model="resDialogVisible" center title="诊断信息" width="600"
:before-close="reshandleClose">
<div style="margin-top:10px">
<div class="dialog-title">
<div class="dialog-title-item">
@ -361,8 +367,10 @@
</div>
<template #footer>
<span class="dialog-footer">
<el-button style="background: #323232;border:1px solid #787878;color: #ffffff;" @click="resDialogVisible = false">取消</el-button>
<el-button type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
<el-button style="background: #323232;border:1px solid #787878;color: #ffffff;"
@click="resDialogVisible = false">取消</el-button>
<el-button type="primary" style="background:#0099ff;"
@click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
<el-button type="primary" style="background:#0099ff;" @click="handleDiagnosticInfo('completed')">
保存
</el-button>
@ -468,8 +476,8 @@
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose"
style="margin-right: 0px;background: #323232;border:1px solid #787878;color: #ffffff;">退出</el-button>
<el-button @click="handleClose"
style="margin-right: 0px;background: #323232;border:1px solid #787878;color: #ffffff;">退出</el-button>
<el-button type="primary" style="background: #0099ff;" @click="handleSave" :loading="saveLoading">
保存
</el-button>
@ -488,7 +496,7 @@ import html2canvas from 'html2canvas'
import Header from '@/views/Header.vue'
import { useAuthStore } from '../stores/index.js'
import * as echarts from 'echarts'
import { getBackendUrl ,patientAPI} from '../services/api.js'
import { getBackendUrl, patientAPI } from '../services/api.js'
const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()
@ -673,9 +681,9 @@ const formattedTime = computed(() => {
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
});
const headlist = ref({
rotation:'0',
tilt:'0',
pitch:'0'
rotation: '0',
tilt: '0',
pitch: '0'
})
// 开始计时器
const startTimer = () => {
@ -995,7 +1003,6 @@ 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 // 俯仰角度
@ -2031,21 +2038,38 @@ const initchart = () => {
} else {
console.warn('找不到 ID 为 的 DOM 元素');
}
// 添加窗口大小调整监听器
window.addEventListener('resize', () => {
if (rotationCharts) {
rotationCharts.resize();
}
if (pitchCharts) {
pitchCharts.resize();
}
if (tiltCharts) {
tiltCharts.resize();
}
});
// 添加窗口大小调整监听器
window.addEventListener('resize', () => {
if (rotationCharts) {
rotationCharts.resize();
}
if (pitchCharts) {
pitchCharts.resize();
}
if (tiltCharts) {
tiltCharts.resize();
}
});
});
}
const calibrationClick = async () => {
const response = await fetch(`${BACKEND_URL}/api/devices/calibrate/imu`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({})
})
if (response.ok) {
const result = await response.json()
if (result.success) {
ElMessage.success(result.message)
} else {
ElMessage.error(result.message)
}
}
}
onMounted(() => {
// 加载患者信息
loadPatientInfo()
@ -2700,6 +2724,7 @@ onUnmounted(() => {
font-size: 14px;
color: #EEF1FA;
}
.chart-titles {
position: absolute;
top: 4px;
@ -2730,44 +2755,54 @@ onUnmounted(() => {
background-color: #282828 !important;
border-right: 1px solid rgb(81, 81, 81) !important;
}
:deep(.el-scrollbar__wrap){
:deep(.el-scrollbar__wrap) {
background: #282828 !important;
}
:deep(.tsDialog.el-dialog){
:deep(.tsDialog.el-dialog) {
background-color: #323232;
padding:0px;
padding-bottom:20px;
padding: 0px;
padding-bottom: 20px;
}
:deep(.tsDialog.el-dialog .el-input__wrapper){
:deep(.tsDialog.el-dialog .el-input__wrapper) {
background-color: #242424;
border: none;
box-shadow: none;
}
:deep(.tsDialog.el-dialog .el-select__wrapper){
:deep(.tsDialog.el-dialog .el-select__wrapper) {
background-color: #242424;
border: none;
box-shadow: none;
}
:deep(.tsDialog.el-dialog .el-input__inner){
:deep(.tsDialog.el-dialog .el-input__inner) {
color: #ffffff;
}
:deep(.tsDialog.el-dialog .el-select__placeholder){
:deep(.tsDialog.el-dialog .el-select__placeholder) {
color: #ffffff;
}
:deep(.tsDialog.el-dialog .el-dialog__header){
:deep(.tsDialog.el-dialog .el-dialog__header) {
border-bottom: 1px solid #1e1e1e;
padding:10px 20px;
padding: 10px 20px;
}
:deep(.tsDialog.el-dialog .el-textarea__inner) {
background: #242424;
color: #ffffff;
box-shadow:none;
box-shadow: none;
}
:deep( .el-dialog__body){
padding:20px;
:deep(.el-dialog__body) {
padding: 20px;
}
:deep(.el-dialog__footer){
padding:0px 20px;
:deep(.el-dialog__footer) {
padding: 0px 20px;
}
</style>
<style>