检查页修改功能
This commit is contained in:
jingna
parent
ae3ea342a1
commit
980cc00b0e
@ -1012,8 +1012,10 @@ function delClick(id) {
|
||||
.main-dashboard-top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 15px 20px 0px;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
gap: 20px;
|
||||
background-color: #292929;
|
||||
}
|
||||
|
||||
.main-dashboard-top-title {
|
||||
|
||||
@ -25,12 +25,12 @@
|
||||
<!-- 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-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);
|
||||
--el-button-border-color: #409EFF;
|
||||
--el-button-border-color: transparent ">
|
||||
--el-button-border-color: transparent;width: 120px;height: 30px;font-size: 20px;">
|
||||
保存数据
|
||||
</el-button>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@
|
||||
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#ffffff' }" style="font-size: 14px;">{{
|
||||
<div :style="{ color: imuStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
|
||||
imuStatus
|
||||
}}</div>
|
||||
<el-button type="primary" class="start-btn" @click="clearAndStartTracking" :disabled="isRecording"
|
||||
@ -165,7 +165,7 @@
|
||||
足部压力
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#ffffff' }" style="font-size: 14px;">{{
|
||||
<div :style="{ color: pressureStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
|
||||
pressureStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -239,7 +239,7 @@
|
||||
基础信息
|
||||
</div>
|
||||
</div>
|
||||
<el-icon class="edit-icon" style="width: 24px;height: 24px;font-size: 24px;">
|
||||
<el-icon class="edit-icon" style="width: 24px;height: 24px;font-size: 24px;" @click="editPatient">
|
||||
<Edit />
|
||||
</el-icon>
|
||||
</div>
|
||||
@ -320,7 +320,7 @@
|
||||
视频
|
||||
</div>
|
||||
</div>
|
||||
<div :style="{ color: videoStatus == '已连接' ? '#00CC33' : '#ffffff' }" style="font-size: 14px;">{{
|
||||
<div :style="{ color: videoStatus == '已连接' ? '#00CC33' : '#808080' }" style="font-size: 14px;">{{
|
||||
videoStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,8 +331,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" center title="诊断信息" width="600" :before-close="handleClose">
|
||||
<div>
|
||||
<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">
|
||||
<div>用户ID:</div>{{ patientInfo.sessionId }}
|
||||
@ -358,9 +358,116 @@
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button @click="handleDiagnosticInfo('diagnosed')">暂存</el-button>
|
||||
<el-button type="primary" @click="handleDiagnosticInfo('completed')">
|
||||
<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>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog class="tsDialog" v-model="dialogVisible" title="编辑基础信息" width="50%" :before-close="handleClose">
|
||||
<div class="form-box" style="margin-top: 20px;">
|
||||
<el-form ref="patientFormRef" :model="patientForm" :rules="formRules" label-width="100px" class="patient-form">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="测试者ID" prop="testerId">
|
||||
<el-input v-model="patientForm.id" disabled placeholder="请输入测试者ID" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name" required>
|
||||
<el-input v-model="patientForm.name" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别" prop="gender" required>
|
||||
<el-select v-model="patientForm.gender" placeholder="请选择">
|
||||
<el-option label="男" value="男" />
|
||||
<el-option label="女" value="女" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="出生日期" prop="birth_date" required>
|
||||
<el-date-picker v-model="patientForm.birth_date" type="date" placeholder="请选择" style="width: 100%"
|
||||
@change="calculateAge" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="年龄">
|
||||
<el-input v-model="calculatedAge" placeholder="自动计算" readonly suffix-icon="Calendar" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="民族" prop="nationality">
|
||||
<el-select v-model="patientForm.nationality" placeholder="请选择">
|
||||
<el-option v-for="item in nationalityOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="长期居住地" prop="residence">
|
||||
<el-input v-model="patientForm.residence" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="身高" prop="height" required>
|
||||
<el-input v-model="patientForm.height" placeholder="请输入" clearable>
|
||||
<template #suffix>cm</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="体重" prop="weight" required>
|
||||
<el-input v-model="patientForm.weight" placeholder="请输入" clearable>
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="鞋码" prop="shoe_size">
|
||||
<el-input v-model="patientForm.shoe_size" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电话号码" prop="phone" required>
|
||||
<el-input v-model="patientForm.phone" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电子邮箱" prop="email">
|
||||
<el-input v-model="patientForm.email" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="职业" prop="occupation">
|
||||
<el-select v-model="patientForm.occupation" placeholder="请选择">
|
||||
<el-option v-for="item in occupationOptions" :key="item.value" :label="item.label"
|
||||
:value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="单位" prop="workplace">
|
||||
<el-input v-model="patientForm.workplace" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</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 type="primary" style="background: #0099ff;" @click="handleSave" :loading="saveLoading">
|
||||
保存
|
||||
</el-button>
|
||||
</span>
|
||||
@ -378,7 +485,7 @@ import html2canvas from 'html2canvas'
|
||||
import Header from '@/views/Header.vue'
|
||||
import { useAuthStore } from '../stores/index.js'
|
||||
import * as echarts from 'echarts'
|
||||
import { getBackendUrl } from '../services/api.js'
|
||||
import { getBackendUrl ,patientAPI} from '../services/api.js'
|
||||
const authStore = useAuthStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
@ -418,15 +525,47 @@ let frameCount = 0
|
||||
|
||||
// 后端服务器地址配置
|
||||
const BACKEND_URL = getBackendUrl()
|
||||
const resDialogVisible = ref(false)
|
||||
const reshandleClose = () => {
|
||||
resDialogVisible.value = false
|
||||
}
|
||||
const dialogVisible = ref(false)
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
// 表单引用
|
||||
const patientFormRef = ref()
|
||||
// 表单数据
|
||||
const saveLoading = ref(false)
|
||||
const patientForm = ref({
|
||||
id: '',
|
||||
name: '',
|
||||
gender: '',
|
||||
birth_date: '',
|
||||
nationality: '',
|
||||
residence: '',
|
||||
height: '',
|
||||
weight: '',
|
||||
shoe_size: '',
|
||||
phone: '',
|
||||
occupation: '',
|
||||
workplace: '',
|
||||
email: ''
|
||||
})
|
||||
const occupationOptions = ref([
|
||||
{ label: '学生', value: '学生' }
|
||||
])
|
||||
const nationalityOptions = ref([
|
||||
{ label: '汉族', value: '汉族' }
|
||||
])
|
||||
const diagnosticForm = ref({
|
||||
diagnosis_info: '',
|
||||
treatment_info: '',
|
||||
suggestion_info: ''
|
||||
})
|
||||
const calculatedAge = ref(null)
|
||||
//修改
|
||||
|
||||
// 模拟历史数据
|
||||
const historyData = ref([
|
||||
// { id: 3, rotLeft: '-55.2°', rotRight: '54.2°', tiltLeft: '-17.7°', tiltRight: '18.2°', pitchDown: '-20.2°', pitchUp: '10.5°' },
|
||||
@ -434,14 +573,14 @@ const historyData = ref([
|
||||
// { id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
|
||||
])
|
||||
const chartoption = ref({
|
||||
backgroundColor: '#000000',
|
||||
backgroundColor: '#242424',
|
||||
grid: { top: 0, right: 0, bottom: 0, left: 0 },
|
||||
animation: false,
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '180%',
|
||||
center: ['50%', '90%'],
|
||||
center: ['50%', '91%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: -90,
|
||||
@ -511,7 +650,7 @@ const chartoption = ref({
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 20
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -560,6 +699,60 @@ const resetTimer = () => {
|
||||
seconds.value = 0;
|
||||
blinkState.value = false;
|
||||
};
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
await patientFormRef.value.validate()
|
||||
return true
|
||||
} catch (error) {
|
||||
ElMessage.error('请完善必填信息')
|
||||
return false
|
||||
}
|
||||
}
|
||||
//保存基础信息
|
||||
const handleSave = async () => {
|
||||
if (!(await validateForm())) return
|
||||
saveLoading.value = true
|
||||
try {
|
||||
await savePatient()
|
||||
ElMessage.success('修改成功')
|
||||
dialogVisible.value = false
|
||||
saveLoading.value = false
|
||||
loadPatientInfo()
|
||||
} catch (error) {
|
||||
ElMessage.error('修改失败：' + error.message)
|
||||
saveLoading.value = false
|
||||
} finally {
|
||||
saveLoading.value = false
|
||||
}
|
||||
}
|
||||
const savePatient = async () => {
|
||||
const patientData = {
|
||||
id: patientForm.value.id,
|
||||
name: patientForm.value.name,
|
||||
gender: patientForm.value.gender,
|
||||
age: calculatedAge.value,
|
||||
birth_date: patientForm.value.birth_date,
|
||||
height: patientForm.value.height,
|
||||
weight: patientForm.value.weight,
|
||||
shoe_size: patientForm.value.shoe_size,
|
||||
phone: patientForm.value.phone,
|
||||
occupation: patientForm.value.occupation,
|
||||
email: patientForm.value.email,
|
||||
nationality: patientForm.value.nationality,
|
||||
residence: patientForm.value.residence,
|
||||
workplace: patientForm.value.workplace
|
||||
}
|
||||
try {
|
||||
const response = await patientAPI.updatePatient(patientForm.value.id, patientData)
|
||||
if (response.success) {
|
||||
return response.data
|
||||
} else {
|
||||
throw new Error(response.message || '修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
function routeTo(path) {
|
||||
router.push(`/`)
|
||||
}
|
||||
@ -578,7 +771,14 @@ const calculateAge = (birthDate) => {
|
||||
const handleBack = () => {
|
||||
console.log('返回上一页')
|
||||
}
|
||||
|
||||
const editPatient = () => {
|
||||
// 修改患者信息
|
||||
patientForm.value = JSON.parse(JSON.stringify(patientInfo.value))
|
||||
if (patientForm.value.birth_date) {
|
||||
calculatedAge.value = calculateAge(patientForm.value.birth_date)
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// WebSocket连接函数
|
||||
function connectWebSocket() {
|
||||
try {
|
||||
@ -1604,7 +1804,7 @@ async function saveRecording() {
|
||||
treatment_info: '',
|
||||
suggestion_info: ''
|
||||
}
|
||||
dialogVisible.value = true
|
||||
resDialogVisible.value = true
|
||||
} else {
|
||||
throw new Error(result.message || '保存失败')
|
||||
}
|
||||
@ -1794,13 +1994,6 @@ const initchart = () => {
|
||||
}
|
||||
rotationCharts = echarts.init(chartDom);
|
||||
rotationCharts.setOption(chartoption.value);
|
||||
|
||||
// 添加窗口大小调整监听器
|
||||
window.addEventListener('resize', () => {
|
||||
if (rotationCharts) {
|
||||
rotationCharts.resize();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('找不到 ID 为 的 DOM 元素');
|
||||
}
|
||||
@ -1812,12 +2005,6 @@ const initchart = () => {
|
||||
}
|
||||
pitchCharts = echarts.init(chartDom2);
|
||||
pitchCharts.setOption(chartoption.value);
|
||||
// 添加窗口大小调整监听器
|
||||
window.addEventListener('resize', () => {
|
||||
if (pitchCharts) {
|
||||
pitchCharts.resize();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('找不到 ID 为 的 DOM 元素');
|
||||
}
|
||||
@ -1829,15 +2016,21 @@ const initchart = () => {
|
||||
}
|
||||
tiltCharts = echarts.init(chartDom3);
|
||||
tiltCharts.setOption(chartoption.value);
|
||||
} else {
|
||||
console.warn('找不到 ID 为 的 DOM 元素');
|
||||
}
|
||||
// 添加窗口大小调整监听器
|
||||
window.addEventListener('resize', () => {
|
||||
if (rotationCharts) {
|
||||
rotationCharts.resize();
|
||||
}
|
||||
if (pitchCharts) {
|
||||
pitchCharts.resize();
|
||||
}
|
||||
if (tiltCharts) {
|
||||
tiltCharts.resize();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('找不到 ID 为 的 DOM 元素');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -2403,10 +2596,6 @@ onUnmounted(() => {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
background: #1D1b26;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.el-table .el-table__cell) {
|
||||
padding: 4px 0px;
|
||||
@ -2521,6 +2710,42 @@ onUnmounted(() => {
|
||||
:deep(.el-scrollbar__wrap){
|
||||
background: #282828 !important;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog){
|
||||
background-color: #323232;
|
||||
padding:0px;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog .el-input__wrapper){
|
||||
background-color: #242424;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog .el-select__wrapper){
|
||||
background-color: #242424;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog .el-input__inner){
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog .el-select__placeholder){
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog .el-dialog__header){
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
padding:10px 20px;
|
||||
}
|
||||
:deep(.tsDialog.el-dialog .el-textarea__inner) {
|
||||
background: #242424;
|
||||
color: #ffffff;
|
||||
box-shadow:none;
|
||||
}
|
||||
:deep( .el-dialog__body){
|
||||
padding:20px;
|
||||
}
|
||||
:deep(.el-dialog__footer){
|
||||
padding:0px 20px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.dashboard-container.dashboard-container-home .el-table--border .el-table__inner-wrapper:after,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user