修改
This commit is contained in:
jingna
parent
5dd55a2a40
commit
cd9808c8e2
@ -5,51 +5,33 @@
|
||||
<div class="main-content">
|
||||
<!-- 顶部工具栏 -->
|
||||
<header class="top-bar">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div v-if="!isRecording" class="top-bar-left" @click="routeTo('/')">
|
||||
<img src="@/assets/svg/goback.svg" alt="">
|
||||
<!-- <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> -->
|
||||
<span class="page-title">实时检测</span>
|
||||
</div>
|
||||
<!-- <div >
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div v-if="!isRecording" class="top-bar-left" @click="routeTo('/')">
|
||||
<img src="@/assets/svg/goback.svg" alt="">
|
||||
<!-- <el-icon class="back-icon" @click="handleBack"><ArrowLeft /></el-icon> -->
|
||||
<span class="page-title">实时检测</span>
|
||||
</div>
|
||||
<!-- <div >
|
||||
{{ formattedTime }}
|
||||
</div> -->
|
||||
<el-button
|
||||
v-if="!isRecording"
|
||||
@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 v-if="!isRecording" @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: transparent;"
|
||||
>
|
||||
{{ isConnected ? '开始' : '连接中saveRecording...' }}
|
||||
</el-button>
|
||||
<!-- 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: transparent;">
|
||||
{{ isConnected ? '开始' : '连接中saveRecording...' }}
|
||||
</el-button>
|
||||
<!-- 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 "
|
||||
>
|
||||
结束
|
||||
</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-border-color: transparent ">
|
||||
结束
|
||||
</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-border-color: #409EFF;
|
||||
--el-button-border-color: transparent "
|
||||
>
|
||||
保存数据
|
||||
</el-button>
|
||||
<!-- <el-button
|
||||
--el-button-border-color: transparent ">
|
||||
保存数据
|
||||
</el-button>
|
||||
<!-- <el-button
|
||||
@click="handleStartStopRecording"
|
||||
:disabled="!isConnected"
|
||||
type="warning"
|
||||
@ -60,7 +42,7 @@
|
||||
>
|
||||
{{ isRecording ? '停止录制' : '开始录制' }}
|
||||
</el-button> -->
|
||||
<!-- <el-button
|
||||
<!-- <el-button
|
||||
v-if="isStart == true"
|
||||
@click="handleDataCollection"
|
||||
:loading="dataCollectionLoading"
|
||||
@ -71,14 +53,18 @@
|
||||
>
|
||||
检测数据采集
|
||||
</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="top-bar-right">
|
||||
<span class="info-item">测试时间：2025/5/28 下午14:38</span>
|
||||
<span class="info-item">测试医生：李四</span>
|
||||
<el-icon class="top-icon"><Clock /></el-icon>
|
||||
<el-icon class="top-icon"><Grid /></el-icon>
|
||||
<el-icon class="top-icon">
|
||||
<Clock />
|
||||
</el-icon>
|
||||
<el-icon class="top-icon">
|
||||
<Grid />
|
||||
</el-icon>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -90,144 +76,141 @@
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/st.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
身体姿态</div>
|
||||
身体姿态
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;height: 100%;padding-top: 10px;">
|
||||
<!-- 使用深度相机视频流替换静态图片 -->
|
||||
<img
|
||||
:src="depthCameraImgSrc || '@/assets/posture.png'"
|
||||
alt="深度相机视频流"
|
||||
style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;"
|
||||
>
|
||||
<img :src="depthCameraImgSrc || '@/assets/posture.png'" alt="深度相机视频流"
|
||||
style="width: 100%;height: calc(100% - 10px);object-fit:contain;background:#000;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-posture" style="width: 44%; display: flex;
|
||||
<div class="body-posture" style="width: 44%;display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
">
|
||||
|
||||
<div class="module-card" style=" height:513px">
|
||||
<div class="module-card" style=" height:420px">
|
||||
<!-- 头部姿态模块 -->
|
||||
<div style="display: flex;">
|
||||
<div class="module-header">
|
||||
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/tb.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
头部姿态</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));
|
||||
--el-button-border-color: transparent !important;border-radius: 20px;border:none;width: 150px;"
|
||||
>
|
||||
<el-button type="primary" 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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 仪表盘区域 -->
|
||||
<!-- 仪表盘区域 -->
|
||||
<div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
|
||||
<div style="width: 33%;">
|
||||
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;">
|
||||
<div style="width: 33%;">
|
||||
<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-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">左：<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 style="width: 33%;">
|
||||
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;">
|
||||
<div style="width: 33%;">
|
||||
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;">
|
||||
<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" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">8.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>
|
||||
</div>
|
||||
<div style="width: 33%;">
|
||||
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 150px;">
|
||||
<div style="width: 33%;">
|
||||
<img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;">
|
||||
<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" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">11.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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史数据表格 -->
|
||||
<div class="gauge-table-title">
|
||||
历史数据
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;margin-bottom: 10px;">
|
||||
<el-table :data="historyData" style="width: 96%">
|
||||
<!-- 历史数据表格 -->
|
||||
<div style="display: flex;justify-content: center;padding: 0px 25px;">
|
||||
<div class="gauge-table-title">
|
||||
历史数据..
|
||||
</div>
|
||||
<el-table :data="historyData" style="width: 96%;height: 160px;overflow: auto;">
|
||||
<el-table-column prop="id" label="ID" width="60" />
|
||||
<el-table-column label="最大旋转角" 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="rotLeft" label="左" min-width="60" align="center" />
|
||||
<el-table-column prop="rotRight" label="右" min-width="60" align="center" />
|
||||
</el-table-column>
|
||||
<el-table-column label="最大倾斜角" 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="tiltLeft" label="左" min-width="60" align="center" />
|
||||
<el-table-column prop="tiltRight" label="右" min-width="60" align="center" />
|
||||
</el-table-column>
|
||||
<el-table-column label="最大仰视角" 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="pitchDown" label="下" min-width="60" align="center" />
|
||||
<el-table-column prop="pitchUp" label="上" min-width="60" align="center" />
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</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 class="module-header">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/zb.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
足部压力</div>
|
||||
足部压力
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-container">
|
||||
<div class="foot-container-left">
|
||||
<div class="foot-container-left" style="font-size: 14px;">
|
||||
<div>
|
||||
<span>左前足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
|
||||
</div>
|
||||
<div class="foot-container-margintop">
|
||||
<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-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>
|
||||
<span>左前足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span>左足</span>
|
||||
</div>
|
||||
<div class="foot-container-marginleft">
|
||||
<span>左后足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span>右足</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<span>左前足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span>左足总压力</span>
|
||||
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
|
||||
</div>
|
||||
<div class="foot-container-marginleft">
|
||||
<span>左后足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span>右足总压力</span>
|
||||
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot-container-right">
|
||||
<div class="foot-container-right" style="font-size: 14px;">
|
||||
<div>
|
||||
<span>右前足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
|
||||
</div>
|
||||
<div class="foot-container-margintop">
|
||||
<span>右后足</span>
|
||||
<span class="foot-container-paddingcolor">54%</span>
|
||||
<span style="font-size: 24px;" class="foot-container-paddingcolor">54%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -235,21 +218,24 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="body-posture" style="width: 30%; display: flex;
|
||||
<div class="body-posture" style="width: 30%;display: flex;
|
||||
flex-wrap: wrap;
|
||||
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 class="module-header">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/jc.png" alt="" srcset="" style="margin-right: 5px;">
|
||||
基础信息</div>
|
||||
基础信息
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<el-icon class="edit-icon"><Edit /></el-icon>
|
||||
<el-icon class="edit-icon">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-info-box">
|
||||
@ -313,53 +299,59 @@
|
||||
|
||||
</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 class="module-header">
|
||||
<div class="module-title">
|
||||
<div class="module-title-bg">
|
||||
<img src="@/assets/sp.png" alt="" srcset="" style="margin-right: 5px; ">
|
||||
视频</div>
|
||||
视频
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使用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>
|
||||
<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 class="dialog-title">
|
||||
<div class="dialog-title-item"><div>用户ID:</div>{{patientInfo.sessionId}}</div>
|
||||
<div class="dialog-title-item"><div>姓名:{{patientInfo.name}}</div></div>
|
||||
<div class="dialog-title-item">
|
||||
<div>用户ID:</div>{{ patientInfo.sessionId }}
|
||||
</div>
|
||||
<div class="dialog-title-item">
|
||||
<div>姓名:{{ patientInfo.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-form :model="diagnosticForm" label-width="50px">
|
||||
<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 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 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>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-end;color: #ffffff;">测试医生：李四</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button @click="handleDataCollection">暂存</el-button>
|
||||
<el-button type="primary" @click="handleDataCollection">
|
||||
保存
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button @click="handleDataCollection">暂存</el-button>
|
||||
<el-button type="primary" @click="handleDataCollection">
|
||||
保存
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -371,6 +363,7 @@ import { io } from 'socket.io-client'
|
||||
import html2canvas from 'html2canvas'
|
||||
import Header from '@/views/Header.vue'
|
||||
import { useAuthStore } from '../stores/index.js'
|
||||
import * as echarts from 'echarts';
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
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: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
|
||||
])
|
||||
|
||||
function routeTo(path){
|
||||
const chartoption = ref({
|
||||
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(`/`)
|
||||
}
|
||||
|
||||
@ -615,19 +659,19 @@ async function handleDataCollection() {
|
||||
}
|
||||
|
||||
// 调用后端API采集检测数据
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
// patient_id: patientInfo.value.id,
|
||||
// timestamp: Date.now()
|
||||
head_pose:{},
|
||||
body_pose:{},
|
||||
foot_data:{}
|
||||
})
|
||||
})
|
||||
head_pose: {},
|
||||
body_pose: {},
|
||||
foot_data: {}
|
||||
})
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
@ -731,9 +775,9 @@ async function handleScreenshot() {
|
||||
patientName: patientInfo.value.name,
|
||||
sessionId: patientInfo.value.sessionId,
|
||||
imageData: base64Image,
|
||||
head_pose:{},
|
||||
body_pose:{},
|
||||
foot_data:{}
|
||||
head_pose: {},
|
||||
body_pose: {},
|
||||
foot_data: {}
|
||||
})
|
||||
|
||||
// 显示成功消息和文件路径
|
||||
@ -786,13 +830,13 @@ function generateSessionId() {
|
||||
async function saveScreenshot(data) {
|
||||
try {
|
||||
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/collect`
|
||||
, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||
@ -901,10 +945,10 @@ async function startRecording() {
|
||||
}
|
||||
}
|
||||
|
||||
mediaRecorder.onstop = async () => {
|
||||
console.log('🎬 录像停止，开始保存...')
|
||||
await saveRecording()
|
||||
}
|
||||
// mediaRecorder.onstop = async () => {
|
||||
// console.log('🎬 录像停止，开始保存...')
|
||||
// await saveRecording()
|
||||
// }
|
||||
|
||||
// 开始录制
|
||||
mediaRecorder.start(1000) // 每秒收集一次数据
|
||||
@ -942,12 +986,12 @@ function startCapturingArea(element, canvas, ctx) {
|
||||
|
||||
// 继续下一帧
|
||||
if (isRecording.value) {
|
||||
setTimeout(captureFrame, 1000/30) // 30fps
|
||||
setTimeout(captureFrame, 1000 / 30) // 30fps
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('捕获帧失败:', error)
|
||||
if (isRecording.value) {
|
||||
setTimeout(captureFrame, 1000/30)
|
||||
setTimeout(captureFrame, 1000 / 30)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1046,6 +1090,7 @@ async function saveRecording() {
|
||||
message: `录像保存成功！文件路径: ${result.filepath}`,
|
||||
duration: 5000
|
||||
})
|
||||
isRecording.value = false
|
||||
dialogVisible.value = true
|
||||
// 更新会话的视频路径
|
||||
if (patientInfo.value.sessionId) {
|
||||
@ -1130,7 +1175,7 @@ async function startDetection() {
|
||||
body: JSON.stringify({
|
||||
patient_id: patientInfo.value.id,
|
||||
// 可以添加其他检测参数
|
||||
creator_id:creatorId.value,
|
||||
creator_id: creatorId.value,
|
||||
// settings: JSON.stringify({
|
||||
// frequency: 30, // 采样频率
|
||||
// // 其他设置参数
|
||||
@ -1177,9 +1222,9 @@ async function stopDetection() {
|
||||
}
|
||||
|
||||
// 如果正在录制，停止录制
|
||||
// if (isRecording.value) {
|
||||
// stopRecording()
|
||||
// }
|
||||
if (isRecording.value) {
|
||||
stopRecording()
|
||||
}
|
||||
saveRecording()
|
||||
isStart.value = false
|
||||
|
||||
@ -1274,6 +1319,31 @@ const handleBeforeUnload = () => {
|
||||
}
|
||||
}
|
||||
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(() => {
|
||||
// 加载患者信息
|
||||
loadPatientInfo()
|
||||
@ -1287,6 +1357,7 @@ onMounted(() => {
|
||||
console.log(authStore.currentUser)
|
||||
creatorId.value = authStore.currentUser.id
|
||||
}
|
||||
initchart()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -1414,7 +1485,7 @@ onUnmounted(() => {
|
||||
/* 核心内容网格布局 */
|
||||
.content-grid {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
padding: 0px 10px;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 130px);
|
||||
/* flex: 1;
|
||||
@ -1459,14 +1530,16 @@ onUnmounted(() => {
|
||||
color: #ffffff;
|
||||
padding: 2px;
|
||||
}
|
||||
.module-title-bg{
|
||||
|
||||
.module-title-bg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 116px;
|
||||
background: #2C2C2C;
|
||||
border-radius: 20px;
|
||||
padding: 0px 15px ;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@ -1482,7 +1555,7 @@ onUnmounted(() => {
|
||||
/* 身体姿态模块 */
|
||||
.body-posture {
|
||||
/* grid-row: 1 / 3; */
|
||||
width:30% ;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.posture-container {
|
||||
@ -1673,120 +1746,139 @@ onUnmounted(() => {
|
||||
--el-button-border-color: #A325B0 !important;
|
||||
}
|
||||
|
||||
.gauge-group-box{
|
||||
.gauge-group-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||||
}
|
||||
.gauge-group-box-text1{
|
||||
|
||||
.gauge-group-box-text1 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
.gauge-group-box-text2{
|
||||
|
||||
.gauge-group-box-text2 {
|
||||
font-size: 24px;
|
||||
color: #30F3FF;
|
||||
font-weight: 700;
|
||||
}
|
||||
.gauge-table-title{
|
||||
padding: 10px;
|
||||
|
||||
.gauge-table-title {
|
||||
padding: 0px 5px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
|
||||
writing-mode: vertical-rl;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* .foot-container-left{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.foot-container-right{
|
||||
margin-left: 10px;
|
||||
} */
|
||||
.foot-container-content{
|
||||
.foot-container-content {
|
||||
margin: 0px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.foot-container-margintop{
|
||||
|
||||
.foot-container-margintop {
|
||||
margin-top: 80px;
|
||||
}
|
||||
.foot-container-marginleft{
|
||||
margin-left:40px ;
|
||||
|
||||
.foot-container-marginleft {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.foot-container-paddingcolor{
|
||||
|
||||
.foot-container-paddingcolor {
|
||||
padding-left: 10px;
|
||||
color: rgb(48,205,223);
|
||||
color: #30F3FF;
|
||||
}
|
||||
.basic-info-content{
|
||||
|
||||
.basic-info-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.basic-info-text{
|
||||
|
||||
.basic-info-text {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
.basic-info-textcolor{
|
||||
color: rgb(48,205,223);
|
||||
|
||||
.basic-info-textcolor {
|
||||
color: rgb(48, 205, 223);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.basic-info-box{
|
||||
|
||||
.basic-info-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.dialog-title{
|
||||
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
justify-content:space-between ;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dialog-title-item{
|
||||
|
||||
.dialog-title-item {
|
||||
display: flex;
|
||||
width: 200px;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-dialog){
|
||||
|
||||
:deep(.el-dialog) {
|
||||
background-color: #1D1b26;
|
||||
}
|
||||
:deep(.el-dialog__title){
|
||||
|
||||
:deep(.el-dialog__title) {
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-form-item__label){
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.el-textarea__inner){
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
background: #1D1b26;
|
||||
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>
|
||||
|
||||
.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{
|
||||
.top-bar .el-button {
|
||||
height: 44px;
|
||||
border-radius: 25px;
|
||||
font-size: 28px;
|
||||
border-radius:20px;
|
||||
border-radius: 20px;
|
||||
width: 220px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user