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-05 20:07:18 +08:00
parent 5dd55a2a40
commit cd9808c8e2
1 changed files with 417 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,51 +5,33 @@
<div class="main-content"> <div class="main-content">
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
<header class="top-bar"> <header class="top-bar">
<div style="display: flex;align-items: center;"> <div style="display: flex;align-items: center;">
<div v-if="!isRecording" class="top-bar-left" @click="routeTo('/')"> <div v-if="!isRecording" class="top-bar-left" @click="routeTo('/')">
<img src="@/assets/svg/goback.svg" alt=""> <img src="@/assets/svg/goback.svg" alt="">
<!-- <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> --> <!-- <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> -->
<span class="page-title">实时检测</span> <span class="page-title">实时检测</span>
</div> </div>
<!-- <div > <!-- <div >
{{ formattedTime }} {{ formattedTime }}
</div> --> </div> -->
<el-button <el-button v-if="!isRecording" @click="handleStartStop" :disabled="!isConnected" type="primary"
v-if="!isRecording" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
@click="handleStartStop"
:disabled="!isConnected"
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: #409EFF;
--el-button-border-color: transparent;" --el-button-border-color: transparent;">
> {{ isConnected ? '开始' : '连接中saveRecording...' }}
{{ isConnected ? '开始' : '连接中saveRecording...' }} </el-button>
</el-button> <!-- handleStartStop -->
<!-- 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
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: #409EFF;
--el-button-border-color: transparent " --el-button-border-color: transparent ">
> 结束
结束 </el-button>
</el-button> <el-button v-if="isStart && isConnected" @click="handleScreenshot" type="primary" class="start-btn" style="background-image: linear-gradient(to right, #FBB106, #A817C6);
<el-button
v-if="isStart && isConnected"
@click="handleScreenshot"
type="primary"
class="start-btn"
style="background-image: linear-gradient(to right, #FBB106, #A817C6);
--el-button-border-color: #409EFF; --el-button-border-color: #409EFF;
--el-button-border-color: transparent " --el-button-border-color: transparent ">
> 保存数据
保存数据 </el-button>
</el-button> <!-- <el-button
<!-- <el-button
@click="handleStartStopRecording" @click="handleStartStopRecording"
:disabled="!isConnected" :disabled="!isConnected"
type="warning" type="warning"
@ -60,7 +42,7 @@
> >
{{ isRecording ? '停止录制' : '开始录制' }} {{ isRecording ? '停止录制' : '开始录制' }}
</el-button> --> </el-button> -->
<!-- <el-button <!-- <el-button
v-if="isStart == true" v-if="isStart == true"
@click="handleDataCollection" @click="handleDataCollection"
:loading="dataCollectionLoading" :loading="dataCollectionLoading"
@ -71,14 +53,18 @@
> >
检测数据采集 检测数据采集
</el-button> --> </el-button> -->
</div> </div>
<div class="top-bar-right"> <div class="top-bar-right">
<span class="info-item">测试时间：2025/5/28 下午14:38</span> <span class="info-item">测试时间：2025/5/28 下午14:38</span>
<span class="info-item">测试医生：李四</span> <span class="info-item">测试医生：李四</span>
<el-icon class="top-icon"><Clock /></el-icon> <el-icon class="top-icon">
<el-icon class="top-icon"><Grid /></el-icon> <Clock />
</el-icon>
<el-icon class="top-icon">
<Grid />
</el-icon>
</div> </div>
</header> </header>
@ -90,144 +76,141 @@
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
身体姿态</div> 身体姿态
</div>
</div> </div>
</div> </div>
<div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;"> <div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
<!-- 使用深度相机视频流替换静态图片 --> <!-- 使用深度相机视频流替换静态图片 -->
<img <img :src="depthCameraImgSrc || '@/assets/posture.png'" alt="深度相机视频流"
:src="depthCameraImgSrc || '@/assets/posture.png'" style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;">
alt="深度相机视频流"
style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;"
>
</div> </div>
</div> </div>
<div class="body-posture" style="width: 44%; display: flex; <div class="body-posture" style="width: 44%;display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-between; align-content: space-between;
"> ">
<div class="module-card" style=" height:513px"> <div class="module-card" style=" height:420px">
<!-- 头部姿态模块 --> <!-- 头部姿态模块 -->
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
头部姿态</div> 头部姿态
</div>
</div> </div>
<el-button <el-button type="primary" class="start-btn" style="background-image: linear-gradient(to right, rgb(236, 50, 166), rgb(160, 5, 216));
type="primary" --el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;">
class="start-btn"
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> </el-button>
</div> </div>
</div> </div>
<!-- 仪表盘区域 --> <!-- 仪表盘区域 -->
<div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;"> <div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;"> <div id="headChart1" 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">左：<span class="gauge-group-box-text2">-55.2°</span></div> <div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">-55.2°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">-55.2°</span></div> <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span
class="gauge-group-box-text2">-55.2°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;"> <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">左：<span class="gauge-group-box-text2">-7.7°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">8.7°</span></div> <div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span
class="gauge-group-box-text2">8.7°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;"> <div style="width: 33%;">
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;"> <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">左：<span class="gauge-group-box-text2">-10.5°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span 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">11.5°</span></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 历史数据表格 --> <!-- 历史数据表格 -->
<div class="gauge-table-title"> <div style="display: flex;justify-content: center;padding: 0px 25px;">
历史数据 <div class="gauge-table-title">
</div> 历史数据..
<div style="display: flex;justify-content: center;margin-bottom: 10px;"> </div>
<el-table :data="historyData" style="width: 96%"> <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" />
<el-table-column prop="rotRight" label="右" min-width="60" align="center"/> <el-table-column prop="rotRight" label="右" min-width="60" align="center" />
</el-table-column> </el-table-column>
<el-table-column label="最大倾斜角" align="center"> <el-table-column label="最大倾斜角" align="center">
<el-table-column prop="tiltLeft" label="左" min-width="60" align="center"/> <el-table-column prop="tiltLeft" label="左" min-width="60" align="center" />
<el-table-column prop="tiltRight" label="右" min-width="60" align="center"/> <el-table-column prop="tiltRight" label="右" min-width="60" align="center" />
</el-table-column> </el-table-column>
<el-table-column label="最大仰视角" align="center"> <el-table-column label="最大仰视角" align="center">
<el-table-column prop="pitchDown" label="下" min-width="60" align="center"/> <el-table-column prop="pitchDown" label="下" min-width="60" align="center" />
<el-table-column prop="pitchUp" label="上" min-width="60" align="center"/> <el-table-column prop="pitchUp" label="上" min-width="60" align="center" />
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
<!-- 足部压力模块 --> <!-- 足部压力模块 -->
<div class="module-card" style=" height: calc(100% - 523px); min-height: calc(335px);"> <div class="module-card" style=" height: calc(100% - 426px); min-height: calc(335px);">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
足部压力</div> 足部压力
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="foot-container"> <div class="foot-container">
<div class="foot-container-left"> <div class="foot-container-left" style="font-size: 14px;">
<div> <div>
<span>左前足</span> <span>左前足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-margintop"> <div class="foot-container-margintop">
<span>左后足</span> <span>左后足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
<div class="foot-container-content"> <div class="foot-container-content">
<div style="display: flex;justify-content: center;margin-bottom: 8px;"> <div style="display: flex;justify-content: center;margin-bottom: 8px;font-size: 16px;font-weight: 700;">
<div> <div>
<span>左前足</span> <span>左足</span>
<span class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-marginleft"> <div class="foot-container-marginleft">
<span>左后足</span> <span>右足</span>
<span class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
<img src="@/assets/zu.png" alt=""> <img src="@/assets/zu.png" alt="">
<div style="display: flex;justify-content: center;margin-top: 8px;"> <div style="display: flex;justify-content: center;margin-top: 8px;font-size: 14px;">
<div> <div>
<span>左前足</span> <span>左足总压力</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-marginleft"> <div class="foot-container-marginleft">
<span>左后足</span> <span>右足总压力</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
</div> </div>
<div class="foot-container-right"> <div class="foot-container-right" style="font-size: 14px;">
<div> <div>
<span>右前足</span> <span>右前足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
<div class="foot-container-margintop"> <div class="foot-container-margintop">
<span>右后足</span> <span>右后足</span>
<span class="foot-container-paddingcolor">54%</span> <span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
</div> </div>
</div> </div>
</div> </div>
@ -235,21 +218,24 @@
</div> </div>
<div class="body-posture" style="width: 30%; display: flex; <div class="body-posture" style="width: 30%;display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-between; align-content: space-between;
"> ">
<!-- 基础信息模块 --> <!-- 基础信息模块 -->
<div class="module-card" style="padding-bottom: 40px; height: calc(370px);"> <div class="module-card" style="padding-bottom: 40px; height: calc(364px);">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/jc.png" alt="" srcset="" style="margin-right: 5px;"> <img src="@/assets/jc.png" alt="" srcset="" style="margin-right: 5px;">
基础信息</div> 基础信息
</div>
</div> </div>
<el-icon class="edit-icon"><Edit /></el-icon> <el-icon class="edit-icon">
<Edit />
</el-icon>
</div> </div>
</div> </div>
<div class="basic-info-box"> <div class="basic-info-box">
@ -313,53 +299,59 @@
</div> </div>
<!-- 视频模块 --> <!-- 视频模块 -->
<div class="module-card" style="height: calc(100% - 380px);min-height: 324px;"> <div class="module-card" style="height: calc(100% - 370px);min-height: 324px;">
<div style="display: flex;margin-bottom: 20px;"> <div style="display: flex;margin-bottom: 20px;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
<div class="module-title-bg"> <div class="module-title-bg">
<img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; "> <img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
视频</div> 视频
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 使用img元素显示视频流（优化的Data URL方案） --> <!-- 使用img元素显示视频流（优化的Data URL方案） -->
<img :src="rtspImgSrc" alt="" style="width: 100%;height: calc(100% - 70px);object-fit:contain;background:#000;" /> <img :src="rtspImgSrc" alt=""
style="width: 100%;height: calc(100% - 60px);object-fit:contain;background:#000;" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose" > <el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose">
<div> <div>
<div class="dialog-title"> <div class="dialog-title">
<div class="dialog-title-item"><div>用户ID:</div>{{patientInfo.sessionId}}</div> <div class="dialog-title-item">
<div class="dialog-title-item"><div>姓名:{{patientInfo.name}}</div></div> <div>用户ID:</div>{{ patientInfo.sessionId }}
</div>
<div class="dialog-title-item">
<div>姓名:{{ patientInfo.name }}</div>
</div>
</div> </div>
<div> <div>
<el-form :model="diagnosticForm" label-width="50px"> <el-form :model="diagnosticForm" label-width="50px">
<el-form-item label="记录"> <el-form-item label="记录">
<el-input v-model="diagnosticForm.textarea" :rows="6" type="textarea" placeholder="请输入"/> <el-input v-model="diagnosticForm.textarea" :rows="6" type="textarea" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="处理"> <el-form-item label="处理">
<el-input v-model="diagnosticForm.textarea" :rows="6" type="textarea" placeholder="请输入"/> <el-input v-model="diagnosticForm.textarea" :rows="6" type="textarea" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item label="建议"> <el-form-item label="建议">
<el-input v-model="diagnosticForm.textarea" :rows="6" type="textarea" placeholder="请输入"/> <el-input v-model="diagnosticForm.textarea" :rows="6" type="textarea" placeholder="请输入" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div style="display: flex;justify-content: flex-end;color: #ffffff;">测试医生：李四</div> <div style="display: flex;justify-content: flex-end;color: #ffffff;">测试医生：李四</div>
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button> <el-button @click="dialogVisible = false">取消</el-button>
<el-button @click="handleDataCollection">暂存</el-button> <el-button @click="handleDataCollection">暂存</el-button>
<el-button type="primary" @click="handleDataCollection"> <el-button type="primary" @click="handleDataCollection">
保存 保存
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -371,6 +363,7 @@ import { io } from 'socket.io-client'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import Header from '@/views/Header.vue' import Header from '@/views/Header.vue'
import { useAuthStore } from '../stores/index.js' import { useAuthStore } from '../stores/index.js'
import * as echarts from 'echarts';
const authStore = useAuthStore() const authStore = useAuthStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
@ -423,8 +416,59 @@ const historyData = ref([
{ 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({
function routeTo(path){ series: [
{
type: 'gauge',
progress: {
show: true,
width: 18
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 15,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: 25,
color: '#999',
fontSize: 20
},
anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 80,
offsetCenter: [0, '70%']
},
data: [
{
value: 70
}
]
}
]
})
function routeTo(path) {
router.push(`/`) router.push(`/`)
} }
@ -615,19 +659,19 @@ async function handleDataCollection() {
} }
// 调用后端API采集检测数据 // 调用后端API采集检测数据
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`, { const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ body: JSON.stringify({
// patient_id: patientInfo.value.id, // patient_id: patientInfo.value.id,
// timestamp: Date.now() // timestamp: Date.now()
head_pose:{}, head_pose: {},
body_pose:{}, body_pose: {},
foot_data:{} foot_data: {}
}) })
}) })
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`) throw new Error(`HTTP ${response.status}: ${response.statusText}`)
@ -731,9 +775,9 @@ async function handleScreenshot() {
patientName: patientInfo.value.name, patientName: patientInfo.value.name,
sessionId: patientInfo.value.sessionId, sessionId: patientInfo.value.sessionId,
imageData: base64Image, imageData: base64Image,
head_pose:{}, head_pose: {},
body_pose:{}, body_pose: {},
foot_data:{} foot_data: {}
}) })
// 显示成功消息和文件路径 // 显示成功消息和文件路径
@ -786,13 +830,13 @@ function generateSessionId() {
async function saveScreenshot(data) { async function saveScreenshot(data) {
try { try {
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect` const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`
, { , {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(data) body: JSON.stringify(data)
}) })
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`) throw new Error(`HTTP ${response.status}: ${response.statusText}`)
@ -901,10 +945,10 @@ async function startRecording() {
} }
} }
mediaRecorder.onstop = async () => { // mediaRecorder.onstop = async () => {
console.log('🎬 录像停止，开始保存...') // console.log('🎬 录像停止，开始保存...')
await saveRecording() // await saveRecording()
} // }
// 开始录制 // 开始录制
mediaRecorder.start(1000) // 每秒收集一次数据 mediaRecorder.start(1000) // 每秒收集一次数据
@ -942,12 +986,12 @@ function startCapturingArea(element, canvas, ctx) {
// 继续下一帧 // 继续下一帧
if (isRecording.value) { if (isRecording.value) {
setTimeout(captureFrame, 1000/30) // 30fps setTimeout(captureFrame, 1000 / 30) // 30fps
} }
}).catch(error => { }).catch(error => {
console.error('捕获帧失败:', error) console.error('捕获帧失败:', error)
if (isRecording.value) { if (isRecording.value) {
setTimeout(captureFrame, 1000/30) setTimeout(captureFrame, 1000 / 30)
} }
}) })
} }
@ -1046,6 +1090,7 @@ async function saveRecording() {
message: `录像保存成功！文件路径: ${result.filepath}`, message: `录像保存成功！文件路径: ${result.filepath}`,
duration: 5000 duration: 5000
}) })
isRecording.value = false
dialogVisible.value = true dialogVisible.value = true
// 更新会话的视频路径 // 更新会话的视频路径
if (patientInfo.value.sessionId) { if (patientInfo.value.sessionId) {
@ -1130,7 +1175,7 @@ async function startDetection() {
body: JSON.stringify({ body: JSON.stringify({
patient_id: patientInfo.value.id, patient_id: patientInfo.value.id,
// 可以添加其他检测参数 // 可以添加其他检测参数
creator_id:creatorId.value, creator_id: creatorId.value,
// settings: JSON.stringify({ // settings: JSON.stringify({
// frequency: 30, // 采样频率 // frequency: 30, // 采样频率
// // 其他设置参数 // // 其他设置参数
@ -1177,9 +1222,9 @@ async function stopDetection() {
} }
// 如果正在录制，停止录制 // 如果正在录制，停止录制
// if (isRecording.value) { if (isRecording.value) {
// stopRecording() stopRecording()
// } }
saveRecording() saveRecording()
isStart.value = false isStart.value = false
@ -1274,6 +1319,31 @@ const handleBeforeUnload = () => {
} }
} }
const creatorId = ref('') const creatorId = ref('')
let headCharts = null;
const initchart = () => {
// 确保 DOM 元素已经渲染
nextTick(() => {
const chartDom = document.getElementById('headChart1');
if (chartDom) {
// 如果图表已经存在，先销毁
if (headCharts) {
headCharts.dispose();
}
headCharts = echarts.init(chartDom);
headCharts.setOption(chartoption.value);
// 添加窗口大小调整监听器
window.addEventListener('resize', () => {
if (headCharts) {
headCharts.resize();
}
});
} else {
console.warn('找不到 ID 为 headChart1 的 DOM 元素');
}
});
}
onMounted(() => { onMounted(() => {
// 加载患者信息 // 加载患者信息
loadPatientInfo() loadPatientInfo()
@ -1287,6 +1357,7 @@ onMounted(() => {
console.log(authStore.currentUser) console.log(authStore.currentUser)
creatorId.value = authStore.currentUser.id creatorId.value = authStore.currentUser.id
} }
initchart()
}) })
onUnmounted(() => { onUnmounted(() => {
@ -1414,7 +1485,7 @@ onUnmounted(() => {
/* 核心内容网格布局 */ /* 核心内容网格布局 */
.content-grid { .content-grid {
display: flex; display: flex;
padding: 10px; padding: 0px 10px;
justify-content: space-between; justify-content: space-between;
height: calc(100vh - 130px); height: calc(100vh - 130px);
/* flex: 1; /* flex: 1;
@ -1459,14 +1530,16 @@ onUnmounted(() => {
color: #ffffff; color: #ffffff;
padding: 2px; padding: 2px;
} }
.module-title-bg{
.module-title-bg {
display: flex; display: flex;
align-items: center; align-items: center;
width: 116px; width: 116px;
background: #2C2C2C; background: #2C2C2C;
border-radius: 20px; border-radius: 20px;
padding: 0px 15px ; padding: 0px 15px;
} }
.header-icon { .header-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
@ -1482,7 +1555,7 @@ onUnmounted(() => {
/* 身体姿态模块 */ /* 身体姿态模块 */
.body-posture { .body-posture {
/* grid-row: 1 / 3; */ /* grid-row: 1 / 3; */
width:30% ; width: 30%;
} }
.posture-container { .posture-container {
@ -1673,120 +1746,139 @@ onUnmounted(() => {
--el-button-border-color: #A325B0 !important; --el-button-border-color: #A325B0 !important;
} }
.gauge-group-box{ .gauge-group-box {
display: flex; display: flex;
align-items: center; align-items: center;
color: #ffffff; color: #ffffff;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
} }
.gauge-group-box-text1{
.gauge-group-box-text1 {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
} }
.gauge-group-box-text2{
.gauge-group-box-text2 {
font-size: 24px; font-size: 24px;
color: #30F3FF; color: #30F3FF;
font-weight: 700; font-weight: 700;
} }
.gauge-table-title{
padding: 10px; .gauge-table-title {
padding: 0px 5px;
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
writing-mode: vertical-rl;
font-weight: 700;
} }
/* .foot-container-left{ /* .foot-container-left{
margin-right: 10px; margin-right: 10px;
} }
.foot-container-right{ .foot-container-right{
margin-left: 10px; margin-left: 10px;
} */ } */
.foot-container-content{ .foot-container-content {
margin: 0px 20px; margin: 0px 20px;
text-align: center;
} }
.foot-container-margintop{
.foot-container-margintop {
margin-top: 80px; margin-top: 80px;
} }
.foot-container-marginleft{
margin-left:40px ; .foot-container-marginleft {
margin-left: 40px;
} }
.foot-container-paddingcolor{
.foot-container-paddingcolor {
padding-left: 10px; padding-left: 10px;
color: rgb(48,205,223); color: #30F3FF;
} }
.basic-info-content{
.basic-info-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding-top: 10px; padding-top: 10px;
width: 100%; width: 100%;
} }
.basic-info-text{
.basic-info-text {
width: 33%; width: 33%;
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
} }
.basic-info-textcolor{
color: rgb(48,205,223); .basic-info-textcolor {
color: rgb(48, 205, 223);
padding-bottom: 8px; padding-bottom: 8px;
} }
.basic-info-box{
.basic-info-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
height: 100%; height: 100%;
} }
.dialog-title{
.dialog-title {
display: flex; display: flex;
justify-content:space-between ; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
color: #ffffff; color: #ffffff;
} }
.dialog-title-item{
.dialog-title-item {
display: flex; display: flex;
width: 200px; width: 200px;
color: #ffffff; color: #ffffff;
} }
:deep(.el-dialog){
:deep(.el-dialog) {
background-color: #1D1b26; background-color: #1D1b26;
} }
:deep(.el-dialog__title){
:deep(.el-dialog__title) {
color: #ffffff; color: #ffffff;
} }
:deep(.el-form-item__label){
:deep(.el-form-item__label) {
color: #ffffff; color: #ffffff;
} }
:deep(.el-textarea__inner){
:deep(.el-textarea__inner) {
background: #1D1b26; background: #1D1b26;
color: #ffffff; color: #ffffff;
} }
:deep(.el-table__header-wrapper) {
background: #E7e6e6;
}
:deep(.dashboard-container .cell) {
color: #000000;
}
:deep(.el-table thead) {
color: #000000;
}
:deep(.el-table thead.is-group th.el-table__cell) {
background: #d8d7d7;
}
:deep(.el-table .el-table__cell) {
padding: 4px 0px;
}
</style> </style>
<style> <style>
.top-bar .el-button {
.dashboard-container .el-table{
background: transparent !important;
}
.dashboard-container .el-table tr{
background-color: transparent !important;
}
.dashboard-container .el-table thead.is-group th.el-table__cell{
background-color: transparent !important;
}
.dashboard-container .cell{
color: #fff;
}
.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
background-color: transparent !important;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
background-color: transparent !important;
}
.top-bar .el-button{
height: 44px; height: 44px;
border-radius: 25px; border-radius: 25px;
font-size: 28px; font-size: 28px;
border-radius:20px; border-radius: 20px;
width: 220px; width: 220px;
} }
</style> </style>