ThbTech/BodyBalanceEvaluation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加开始检测，停止检测，修改开始录屏，停止录屏方法，优化样式方法

Browse Source
This commit is contained in:
limengnan 2025-09-10 15:12:35 +08:00
parent 03c3f0a6c9
commit aaf12babc3
3 changed files with 206 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@
<!-- <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 style="padding-left: 10px;">检测中</div>
<img src="@/assets/sz.png" alt="" title="编辑相机参数" v-if="isConnected == true" <img src="@/assets/sz.png" alt="" title="编辑相机参数" v-if="isConnected == true"
style="margin-left: 20px;cursor: pointer; width: 24px;height: 24px;" style="margin-left: 20px;cursor: pointer; width: 24px;height: 24px;"
@click="cameraUpdate"> @click="cameraUpdate">
@ -41,12 +42,12 @@
</div> </div>
<div class="top-bar-right"> <div class="top-bar-right">
<el-icon class="top-icon"> <el-icon class="top-icon" @click="routerClick">
<Clock /> <Clock />
</el-icon> </el-icon>
<el-icon class="top-icon"> <!-- <el-icon class="top-icon">
<Grid /> <Grid />
</el-icon> </el-icon> -->
</div> </div>
</header> </header>
@ -61,10 +62,11 @@
身体姿态 身体姿态
</div> </div>
</div> </div>
<div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;"> <div :style="{ color: femtoboltStatus == '已连接' ? '#00CC33' : '#808080' }"
style="font-size: 14px;">
{{ femtoboltStatus }}</div> {{ femtoboltStatus }}</div>
</div> </div>
<div ref="wholeBodyRef" style="display: flex;justify-content: center;height: 100%;padding-top: 0px;"> <div ref="wholeBodyRef" style="display: flex;justify-content: center;height:calc( 100% - 40px);padding-top: 0px;">
<!-- 使用深度相机视频流替换静态图片 --> <!-- 使用深度相机视频流替换静态图片 -->
<img :src="(femtoboltStatus === '已连接' && depthCameraImgSrc) ? depthCameraImgSrc : noImageSvg" alt="深度相机视频流" <img :src="(femtoboltStatus === '已连接' && depthCameraImgSrc) ? depthCameraImgSrc : noImageSvg" alt="深度相机视频流"
style="width: 100%;height: calc(100% - 40px);object-fit:contain;background:#323232;"> style="width: 100%;height: calc(100% - 40px);object-fit:contain;background:#323232;">
@ -75,7 +77,7 @@
align-content: space-between; align-content: space-between;
"> ">
<div class="module-card" style=" height:50%;min-height: 425px;margin-bottom: 1px;"> <div class="module-card" style=" height:calc( 45%);margin-bottom: 1px;">
<!-- 头部姿态模块 --> <!-- 头部姿态模块 -->
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
@ -108,66 +110,54 @@
</div> </div>
<!-- 仪表盘区域 --> <!-- 仪表盘区域 -->
<div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;"> <div style="height:calc(100% - 40px) ; display: flex;justify-content: space-between;align-items: center; padding:10px;">
<div style="width: 33%;position: relative;"> <div style="width: 33%;position: relative;">
<div class="chart-title">旋转角</div> <div class="chart-title">旋转角</div>
<div class="chart-titles">{{ headlist.rotation }}</div>
<div id="rotationChartId" style="width: 100%;height: 140px;"></div> <div id="rotationChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="rotation-titles">{{ headlist.rotation }}°</div>
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{ <div class="gauge-group-box" style="justify-content: center;">
<div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div> headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">{{
headPoseMaxValues.rotationRightMax.toFixed(1) }}°</span></div> </div>
<div class="gauge-group-box" style="justify-content: center;">
<div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
headPoseMaxValues.rotationLeftMax.toFixed(1) }}°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;position: relative;"> <div style="width: 33%;position: relative;">
<div class="chart-title">倾斜角</div> <div class="chart-title">倾斜角</div>
<div class="chart-titles">{{ headlist.tilt }}</div>
<div id="tiltChartId" style="width: 100%;height: 140px;"></div> <div id="tiltChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="rotation-titles">{{ headlist.tilt }}°</div>
<div class="gauge-group-box-text1">左：<span class="gauge-group-box-text2">{{ <div class="gauge-group-box" style="justify-content: center;">
<div class="gauge-group-box-text1">左最大：<span class="gauge-group-box-text2">{{
headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div> headPoseMaxValues.tiltLeftMax.toFixed(1) }}°</span></div>
<div class="gauge-group-box-text1" style="margin-left: 20px;">右：<span class="gauge-group-box-text2">{{
</div>
<div class="gauge-group-box" style="justify-content: center;">
<div class="gauge-group-box-text1" style="">右最大：<span class="gauge-group-box-text2">{{
headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span></div> headPoseMaxValues.tiltRightMax.toFixed(1) }}°</span></div>
</div> </div>
</div> </div>
<div style="width: 33%;position: relative;"> <div style="width: 33%;position: relative;">
<div class="chart-title">俯仰角</div> <div class="chart-title">俯仰角</div>
<div class="chart-titles">{{ headlist.pitch }}</div>
<div id="pitchChartId" style="width: 100%;height: 140px;"></div> <div id="pitchChartId" style="width: 100%;height: 140px;"></div>
<div class="gauge-group-box"> <div class="rotation-titles">{{ headlist.pitch }}°</div>
<div class="gauge-group-box-text1">俯：<span class="gauge-group-box-text2">{{ <div class="gauge-group-box" style="justify-content: center;">
<div class="gauge-group-box-text1">俯最大：<span class="gauge-group-box-text2">{{
headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div>
</div>
<div class="gauge-group-box" style="justify-content: center;">
<div class="gauge-group-box-text1">俯最大：<span class="gauge-group-box-text2">{{
headPoseMaxValues.pitchDownMax.toFixed(1) }}°</span></div> headPoseMaxValues.pitchDownMax.toFixed(1) }}°</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>
<div class="icon-box">
<div class="icon-box-mark"></div>
<div class="icon-box-text">历史数据</div>
</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-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" />
<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>
<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>
</el-table>
</div>
</div> </div>
<!-- 足部压力模块 --> <!-- 足部压力模块 -->
<div class="module-card" style=" height:50%;"> <div class="module-card" style=" height:calc( 55% - 1px);overflow: hidden;">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
@ -180,68 +170,75 @@
pressureStatus }}</div> pressureStatus }}</div>
</div> </div>
</div> </div>
<div class="foot-container"> <div style="
<div class="foot-container-left" style="font-size: 18px;"> height: calc(100% - 40px);
<div style="width: 190px;"> display: flex;
<span>左前足</span> align-items: center;
<span class="foot-container-paddingcolor">{{ footPressure.left_front justify-content: center;">
}}%</span> <div class="foot-container" style="height:calc(100%) ">
</div> <div class="foot-container-left" style="font-size: 18px;text-align: right;">
<div class="foot-container-margintop" style="width: 190px;"> <div style="width: 190px;">
<span>左后足</span> <span>左前足</span>
<span class="foot-container-paddingcolor">{{ footPressure.left_rear }}%</span> <span class="foot-container-paddingcolor">{{ footPressure.left_front
</div> }}%</span>
</div>
<div class="foot-container-content">
<div style="display: flex;justify-content: center;margin-bottom: 8px;font-size: 20px;">
<div>
<span>左足</span>
</div> </div>
<div class="foot-container-marginleft"> <div class="foot-container-margintop" style="width: 190px;">
<span>右足</span> <span>左后足</span>
<span class="foot-container-paddingcolor">{{ footPressure.left_rear }}%</span>
</div> </div>
</div> </div>
<div style="position: relative;width: 300px;height: 300px;"> <div class="foot-container-content">
<img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 300px;height: 300px;" alt=""> <div style="display: flex;justify-content: center;margin-bottom: 8px;font-size: 20px;">
<div class="xline"></div> <div>
<div class="yline"></div> <span>左足</span>
</div> </div>
<div <div class="foot-container-marginleft">
style="display: flex;justify-content: center;margin-top: 8px;font-size: 18px;width: 470px;margin-left: -85px;"> <span>右足</span>
<div style="width: 215px;display: flex;align-items: center;"> </div>
<div style="width:95px;">左足总压力</div>
<div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.left_total
}}%</div>
</div> </div>
<div class="foot-container-marginleft" style="width: 215px;display: flex;align-items: center;"> <div style="position: relative;width: 100%;height:calc(100% - 80px) ;">
<div style="width:95px;">右足总压力</div> <img :src="(pressureStatus === '已连接' && footImgSrc) ? footImgSrc : noImageSvg" style="width: 100%;height: 100%;" alt="">
<div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.right_total <div class="xline"></div>
}}%</div> <div class="yline"></div>
</div>
<div
style="display: flex;justify-content: center;font-size: 18px;width: 100%;">
<div style="width: 215px;display: flex;align-items: center;">
<div style="width:95px;">左足总压力</div>
<div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.left_total
}}%</div>
</div>
<div class="foot-container-marginleft" style="width: 215px;display: flex;align-items: center;">
<div style="width:95px;">右足总压力</div>
<div style="width:130px;" class="foot-container-paddingcolor">{{ footPressure.right_total
}}%</div>
</div>
</div> </div>
</div> </div>
</div> <div class="foot-container-right" style="font-size: 18px;">
<div class="foot-container-right" style="font-size: 18px;"> <div style="width: 190px;">
<div style="width: 190px;"> <span>右前足</span>
<span>右前足</span> <span class="foot-container-paddingcolor">{{ footPressure.right_front
<span class="foot-container-paddingcolor">{{ footPressure.right_front }}%</span>
}}%</span> </div>
</div> <div class="foot-container-margintop" style="width: 190px;">
<div class="foot-container-margintop" style="width: 190px;"> <span>右后足</span>
<span>右后足</span> <span class="foot-container-paddingcolor">{{ footPressure.right_rear
<span class="foot-container-paddingcolor">{{ footPressure.right_rear }}%</span>
}}%</span> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="body-posture" style="width: 30%;display: flex; <div class="body-posture" style="width: 30%;display: flex;height:calc(100vh - 100px);
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-between; align-content: space-between;
"> ">
<!-- 基础信息模块 --> <!-- 基础信息模块 -->
<div class="module-card" style="padding-bottom: 40px; height: 50%;min-height: 425px;margin-bottom: 1px;"> <div class="module-card" style="height:calc( 45%);margin-bottom: 1px;">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
@ -322,7 +319,7 @@
</div> </div>
<!-- 视频模块 --> <!-- 视频模块 -->
<div class="module-card" style="height: 50%;"> <div class="module-card" style="height: calc( 55% - 1px)">
<div style="display: flex;"> <div style="display: flex;">
<div class="module-header"> <div class="module-header">
<div class="module-title"> <div class="module-title">
@ -334,7 +331,7 @@
<div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div> <div :style="{ color: cameraStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{ cameraStatus }}</div>
</div> </div>
</div> </div>
<div ref="videoImgRef" style="width: 100%;height: calc(100% - 40px)"> <div ref="videoImgRef" style="width: 100%;height: calc(100% - 47px)">
<img :src="(cameraStatus === '已连接' && rtspImgSrc) ? rtspImgSrc : noImageSvg" alt="" <img :src="(cameraStatus === '已连接' && rtspImgSrc) ? rtspImgSrc : noImageSvg" alt=""
style="width: 100%;height: calc(100%);object-fit:contain;background:#323232;" /> style="width: 100%;height: calc(100%);object-fit:contain;background:#323232;" />
</div> </div>
@ -586,19 +583,13 @@ const screenshotLoading = ref(false)
const dataCollectionLoading = ref(false) const dataCollectionLoading = ref(false)
const isRecording = ref(false) const isRecording = ref(false)
const cameraDialogVisible =ref(false) // 设置相机参数弹框 const cameraDialogVisible =ref(false) // 设置相机参数弹框
const contenGridRef =ref(null) // 实时检查整体box const contenGridRef =ref(null) // 实时检查整体box
const wholeBodyRef = ref(null) // 身体姿态ref const wholeBodyRef = ref(null) // 身体姿态ref
const videoImgRef =ref(null) // 视频流图片ref const videoImgRef =ref(null) // 视频流图片ref
// 录像相关变量 // 录像相关变量
let mediaRecorder = null let mediaRecorder = null
let recordedChunks = [] let recordedChunks = []
let recordingStream = null let recordingStream = null
// 患者信息（从页面获取或通过API获取） // 患者信息（从页面获取或通过API获取）
const patientInfo = ref({ const patientInfo = ref({
id: '', id: '',
@ -693,11 +684,7 @@ const calculatedAge = ref(null)
//修改 //修改
// 模拟历史数据 // 模拟历史数据
const historyData = ref([ const historyData = ref([])
// { id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' },
// { 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°' }
])
const chartoption = ref({ const chartoption = ref({
backgroundColor: '#242424', backgroundColor: '#242424',
grid: { top: 0, right: 0, bottom: 0, left: 0 }, grid: { top: 0, right: 0, bottom: 0, left: 0 },
@ -825,7 +812,7 @@ const startTimer = () => {
if (seconds.value >= 60) { if (seconds.value >= 60) {
console.log('⏰ 检测时长超过10分钟，自动停止检测'); console.log('⏰ 检测时长超过10分钟，自动停止检测');
ElMessage.warning('检测时长已达到10分钟，自动停止检测'); ElMessage.warning('检测时长已达到10分钟，自动停止检测');
stopDetection(); stopRecord()
return; return;
} }
@ -1683,28 +1670,23 @@ async function handleStartStop() {
} }
if (isStart.value) { if (isStart.value) {
// 停止检测 // 停止录制视频
await stopDetection() await stopRecord()
} else { } else {
patientInfo.value.sessionId = null patientInfo.value.sessionId = null
// 开始检测 // 开始录制视频
await startDetection() await startRecord()
} }
} }
// 开始检测 // 开始检测
async function startDetection() { async function startDetection() {
try { try {
console.log('🚀 正在开始检测...') console.log('🚀 正在开始检测...')
isRecording.value = true
startTimer() startTimer()
// 验证患者信息 // 验证患者信息
if (!patientInfo.value || !patientInfo.value.id) { if (!patientInfo.value || !patientInfo.value.id) {
throw new Error('缺少患者信息，无法开始检测') throw new Error('缺少患者信息，无法开始检测')
} }
let screen_location = contenGridRef.value.getBoundingClientRect()
let femtobolt_location = wholeBodyRef.value.getBoundingClientRect()
let camera_location = videoImgRef.value.getBoundingClientRect()
let titile_height = 24
// 调用后端API开始检测 // 调用后端API开始检测
const response = await fetch(`${BACKEND_URL}/api/detection/start`, { const response = await fetch(`${BACKEND_URL}/api/detection/start`, {
method: 'POST', method: 'POST',
@ -1715,10 +1697,6 @@ async function startDetection() {
patient_id: patientInfo.value.id, patient_id: patientInfo.value.id,
// 可以添加其他检测参数 // 可以添加其他检测参数
creator_id: creatorId.value, creator_id: creatorId.value,
screen_location:[Math.round(screen_location.x), Math.round(screen_location.y) + titile_height, Math.round(screen_location.width), Math.round(screen_location.height-titile_height)],
camera_location:[Math.round(camera_location.x), Math.round(camera_location.y)+ titile_height, Math.round(camera_location.width), Math.round(camera_location.height-titile_height)],
femtobolt_location:[Math.round(femtobolt_location.x), Math.round(femtobolt_location.y) + titile_height, Math.round(femtobolt_location.width), Math.round(femtobolt_location.height-titile_height)],
}) })
}) })
if (!response.ok) { if (!response.ok) {
@ -1729,14 +1707,8 @@ async function startDetection() {
if (result.success) { if (result.success) {
console.log('✅ 检测开始成功') console.log('✅ 检测开始成功')
// 保存会话ID和检测开始时间 // 保存会话ID和检测开始时间
patientInfo.value.sessionId = result.session_id patientInfo.value.sessionId = result.session_id
patientInfo.value.detectionStartTime = Date.now()
console.log('✅ 检测会话创建成功，会话ID:', patientInfo.value.sessionId)
isStart.value = true
ElMessage.success('检测已开始')
} else { } else {
throw new Error(result.message || '开始检测失败') throw new Error(result.message || '开始检测失败')
} }
@ -1751,14 +1723,8 @@ async function startDetection() {
// 停止检测 // 停止检测
async function stopDetection() { async function stopDetection() {
try { try {
console.log('🛑 停止检测，会话ID:', patientInfo.value.sessionId)
resetTimer()
// 计算检测持续时间 // 计算检测持续时间
let duration = 0 let duration = 0
if (patientInfo.value.detectionStartTime) {
duration = Math.floor((Date.now() - patientInfo.value.detectionStartTime) / 1000)
}
// 调用后端API停止检测 // 调用后端API停止检测
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop`, { const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop`, {
method: 'POST', method: 'POST',
@ -1773,8 +1739,6 @@ async function stopDetection() {
throw new Error(`HTTP ${response.status}: ${response.statusText}`) throw new Error(`HTTP ${response.status}: ${response.statusText}`)
} }
isRecording.value = false isRecording.value = false
isStart.value = false
} catch (error) { } catch (error) {
console.error('❌ 停止检测失败:', error) console.error('❌ 停止检测失败:', error)
ElMessage.error(`停止检测失败: ${error.message}`) ElMessage.error(`停止检测失败: ${error.message}`)
@ -1979,15 +1943,11 @@ const getDevicesInit = async () => {
} }
onMounted(() => { onMounted(() => {
console.log(wholeBodyRef.value.getBoundingClientRect())
console.log(videoImgRef.value.getBoundingClientRect())
// 加载患者信息 // 加载患者信息
loadPatientInfo() loadPatientInfo()
// 页面加载时自动连接WebSocket // 页面加载时自动连接WebSocket
connectWebSocket() connectWebSocket()
startDetection()
// 监听页面关闭或刷新事件 // 监听页面关闭或刷新事件
window.addEventListener('beforeunload', handleBeforeUnload) window.addEventListener('beforeunload', handleBeforeUnload)
if (authStore.currentUser) { if (authStore.currentUser) {
@ -2005,11 +1965,12 @@ onUnmounted(() => {
if (isRecording.value) { if (isRecording.value) {
stopRecording() stopRecording()
} }
// 停止检测（如果正在检测） if(isStart.value == true){
if (isStart.value) {
stopDetection() stopRecord()
} }
stopDetection()
// 页面关闭时断开WebSocket连接 // 页面关闭时断开WebSocket连接
disconnectWebSocket() disconnectWebSocket()
@ -2042,6 +2003,90 @@ onUnmounted(() => {
// 移除页面关闭事件监听器 // 移除页面关闭事件监听器
window.removeEventListener('beforeunload', handleBeforeUnload) window.removeEventListener('beforeunload', handleBeforeUnload)
}) })
const startRecord = async () => { // 开始录屏
try {
console.log('🚀 正在开始录屏...')
// 验证患者信息
if (!patientInfo.value || !patientInfo.value.sessionId) {
throw new Error('缺少患者信息，无法开始录屏')
}
isRecording.value = true
let screen_location = contenGridRef.value.getBoundingClientRect()
let femtobolt_location = wholeBodyRef.value.getBoundingClientRect()
let camera_location = videoImgRef.value.getBoundingClientRect()
let titile_height = 24
// 调用后端API开始录屏
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/start_record`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
patient_id: patientInfo.value.sessionId,
// 可以添加其他录屏参数
creator_id: creatorId.value,
screen_location:[Math.round(screen_location.x), Math.round(screen_location.y) + titile_height, Math.round(screen_location.width), Math.round(screen_location.height-titile_height)],
camera_location:[Math.round(camera_location.x), Math.round(camera_location.y)+ titile_height, Math.round(camera_location.width), Math.round(camera_location.height-titile_height)],
femtobolt_location:[Math.round(femtobolt_location.x), Math.round(femtobolt_location.y) + titile_height, Math.round(femtobolt_location.width), Math.round(femtobolt_location.height-titile_height)],
})
})
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
}
const result = await response.json()
if (result.success) {
// 保存会话ID和检测开始时间
patientInfo.value.detectionStartTime = Date.now()
console.log('✅ 录屏会话创建成功，会话ID:', patientInfo.value.sessionId)
isStart.value = true
ElMessage.success('录屏已开始')
} else {
throw new Error(result.message || '开始录屏失败')
}
} catch (error) {
ElMessage.error(`开始录屏失败: ${error.message}`)
throw error
}
}
const stopRecord = async () => { // 停止录屏
try {
resetTimer()
// 计算检测持续时间
let duration = 0
if (patientInfo.value.detectionStartTime) {
duration = Math.floor((Date.now() - patientInfo.value.detectionStartTime) / 1000)
}
// 调用后端API停止检测
const response = await fetch(`${BACKEND_URL}/api/detection/${patientInfo.value.sessionId}/stop_record`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
duration: duration
})
})
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
}
isRecording.value = false
isStart.value = false
} catch (error) {
console.error('❌ 停止检测失败:', error)
ElMessage.error(`停止检测失败: ${error.message}`)
}
}
function routerClick(){
router.push(`/patient/${patientInfo.value.id}`)
}
</script> </script>
<style scoped> <style scoped>
@ -2458,7 +2503,8 @@ onUnmounted(() => {
.foot-container-content { .foot-container-content {
margin: 0px 20px; margin: 0px 20px;
text-align: center; text-align: center;
width: 300px; /* width: 300px; */
height: 100%;
} }
.foot-container-margintop { .foot-container-margintop {
@ -2480,7 +2526,7 @@ onUnmounted(() => {
display: flex; display: flex;
/* justify-content: center; /* justify-content: center;
box-sizing: border-box; */ box-sizing: border-box; */
padding-top: 15px; padding-top: 10px;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
} }
@ -2499,14 +2545,14 @@ onUnmounted(() => {
} }
.basic-info-text2 { .basic-info-text2 {
width: 180px; width: 80%;
font-size: 20px; font-size: 18px;
background-color: rgba(36, 36, 36, 1); background-color: rgba(36, 36, 36, 1);
border-radius: 4px; border-radius: 4px;
color: #FFFFFF; color: #FFFFFF;
text-align: left; text-align: left;
height: 46px; height: 40px;
line-height: 46px; line-height: 40px;
padding-left: 15px; padding-left: 15px;
} }
@ -2526,7 +2572,7 @@ onUnmounted(() => {
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; */ align-content: center; */
width: 100%; width: 100%;
height: 100%; height: calc(100% - 40px) ;
/* display: flex; */ /* display: flex; */
text-align: center; text-align: center;
display: flex; display: flex;
@ -2607,7 +2653,7 @@ onUnmounted(() => {
.xline { .xline {
position: absolute; position: absolute;
width: 350px; width: calc(100% + 50px) ;
/* height: 1px; */ /* height: 1px; */
border-top: 1px dashed red; border-top: 1px dashed red;
top: 50%; top: 50%;
@ -2617,7 +2663,7 @@ onUnmounted(() => {
.yline { .yline {
position: absolute; position: absolute;
/* width:1px; */ /* width:1px; */
height: 350px; height: calc(100% + 50px);
/* height: 1px; */ /* height: 1px; */
border-left: 1px dashed red; border-left: 1px dashed red;
top: -25px; top: -25px;
@ -2809,5 +2855,14 @@ onUnmounted(() => {
border-radius: 20px; border-radius: 20px;
width: 220px; width: 220px;
} }
.rotation-titles{
width: 100%;
text-align: center;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 24px;
color: #30F3FF;
text-align: center;
}
</style> </style>

1
frontend/src/renderer/src/views/PatientProfile.vue
View File

@ -1174,6 +1174,7 @@ onMounted(() => {
.main-content { .main-content {
padding: 10px; padding: 10px;
display: flex; display: flex;
flex-direction: column;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
} }

1
frontend/src/renderer/src/views/Recording.vue
View File

@ -983,6 +983,7 @@ onUnmounted(() => {
.main-content { .main-content {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column;
overflow: hidden; overflow: hidden;
} }