修改档案页和新增修改页面样式

This commit is contained in:
limengnan 2025-12-02 15:56:36 +08:00
parent 22e6a3f48a
commit c4cccfd3c2
10 changed files with 414 additions and 466 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 596 B

View File

@ -13,7 +13,7 @@ api.interceptors.request.use(
if (window.electronAPI) { if (window.electronAPI) {
config.baseURL = window.electronAPI.getBackendUrl() config.baseURL = window.electronAPI.getBackendUrl()
} else { } else {
config.baseURL = 'http://localhost:5000' config.baseURL = 'http://192.168.1.62:5000'
} }
// 为需要发送数据的请求设置Content-Type避免覆盖FormData // 为需要发送数据的请求设置Content-Type避免覆盖FormData
@ -660,7 +660,7 @@ export const getBackendUrl = () => {
if (window.electronAPI) { if (window.electronAPI) {
return window.electronAPI.getBackendUrl() return window.electronAPI.getBackendUrl()
} else { } else {
return 'http://localhost:5000' return 'http://192.168.1.62:5000'
} }
} }

View File

@ -10,17 +10,15 @@
<div class="patient-section"> <div class="patient-section">
<div class="section-header"> <div class="section-header">
<div class="search-box"> <div class="search-box">
<el-input v-model="search" placeholder="搜索患者姓名" clearable class="search-input"/> <el-input v-model="search" placeholder="搜索用户信息" clearable class="search-input"/>
<el-button type="primary" class="primary-view-buttons" @click="handleSearch"> <div class="primary-search-buttons" @click="handleSearch">
搜索 搜索
</el-button> </div>
</div> </div>
<div> <div>
<!-- <div class="action-view-buttons" style="width:338px;" @click="createNewPatient">+新患者建档</div> --> <div class="primary-add-buttons" @click="createNewPatient">
<el-button type="primary" class="primary-view-buttons" @click="createNewPatient"> <img src="@/assets/new/add.png" alt="" style="margin-right: 5px;"> 新建患者档案
<el-icon style="margin-right: 10px;color: #fff;font-size: 17px;"><Plus /></el-icon> </div>
新建患者档案
</el-button>
</div> </div>
</div> </div>
<el-table ref="tableRef" :data="patients" style="width: 100%;height: calc(100% - 100px);" <el-table ref="tableRef" :data="patients" style="width: 100%;height: calc(100% - 100px);"
@ -28,16 +26,10 @@
highlight-current-row> highlight-current-row>
<el-table-column type="index" label="序号" width="60" /> <el-table-column type="index" label="序号" width="60" />
<el-table-column prop="id" label="患者ID" min-width="120" align="center" /> <el-table-column prop="id" label="患者ID" min-width="120" align="center" />
<el-table-column prop="name" label="患者姓名" width="80" align="center" /> <el-table-column prop="name" label="患者姓名" width="100" align="center" />
<el-table-column prop="gender" label="性别" width="120" align="center"> <el-table-column prop="gender" label="性别" width="120" align="center" />
<template #default="scope">
<span>{{ scope.row.gender || '—' }}</span>
</template>
</el-table-column>
<el-table-column prop="num" label="测试次数" width="100" align="center" /> <el-table-column prop="num" label="测试次数" width="100" align="center" />
<el-table-column prop="updated_at" label="最近测试时间" min-width="100" align="center" /> <el-table-column prop="updated_at" label="最近测试时间" min-width="100" align="center" />
<el-table-column prop="status" label="状态" align="center" width="100"> <el-table-column prop="status" label="状态" align="center" width="100">
<template #default="scope"> <template #default="scope">
<div v-if="!scope.row.status" <div v-if="!scope.row.status"
@ -52,7 +44,6 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- :total="patienttotal" -->
<el-pagination background layout="prev, pager, next" <el-pagination background layout="prev, pager, next"
:size="size" :size="size"
:page-size="size" :page-size="size"
@ -63,144 +54,166 @@
<!-- 患者详情区域 --> <!-- 患者详情区域 -->
<div class="patient-detail"> <div class="patient-detail">
<div class="patient-detail-header"> <div class="patient-detail-box">
<img src="@/assets/new/u253.svg" alt="" style="margin-right:10px ;"> <img src="@/assets/new/homeedit.png"
<div>用户信息</div> v-if="selectedPatient!=null &&
</div> selectedPatient.name!=null&&
selectedPatient.name!=''"
style="position: absolute;
top: 10px;right: 10px; cursor: pointer;" @click="editClick">
<img src="@/assets/new/bigavatar.svg" alt="" style="margin-right:10px ;">
<div>
<div v-if="selectedPatient" class="patient-detail-name">
{{ selectedPatient.name == '' || selectedPatient.name == null ?'—':selectedPatient.name }}
<div class="patient-detail-avatar">
<img src="@/assets/new/u249.svg" alt="">
</div>
<div class="patient-detail-name">
<span v-if="selectedPatient">{{ selectedPatient.name }}</span>
<span v-if="!selectedPatient"></span>
<div v-if="selectedPatient" class="edit-icon-box" style="cursor: pointer;" @click="editClick">
<img src="@/assets/new/u257.svg" alt="" >
</div>
</div> </div>
<div class="patient-detail-userid"> <div class="patient-detail-userid">
<span>用户ID</span> <span>用户ID</span>
<span v-if="selectedPatient">{{ selectedPatient.id }}</span> <span v-if="selectedPatient">{{ selectedPatient.id }}</span>
<span v-if="!selectedPatient"></span> <span v-if="!selectedPatient"></span>
</div> </div>
<el-scrollbar height="calc(100%)">
<div class="patient-detail-display">
<div class="patient-detail-contentleft">性别</div>
<div class="patient-detail-contentright">
<span v-if="selectedPatient && selectedPatient.gender">
{{ selectedPatient.gender }}
</span>
<span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-header">
<img src="@/assets/new/u253.svg" alt="" style="margin-right:10px ;">
<div>详细信息</div>
</div>
<div style="height: 450px;">
<div class="patient-detail-display"> <div class="patient-detail-display">
<div class="patient-detail-contentleft">出生日期</div> <div class="patient-detailinfo-leftbox">
<div class="patient-detail-contentright"> <div class="patient-detailinfo-key">性别</div>
<div class="patient-detailinfo-value">
{{ selectedPatient.gender== null || selectedPatient.gender== '' ? '—':selectedPatient.gender }}
</div>
</div>
<div class="patient-detailinfo-rightbox">
<div class="patient-detailinfo-key">出生日期</div>
<div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.birth_date"> <span v-if="selectedPatient && selectedPatient.birth_date">
{{ formatDate(selectedPatient.birth_date) }} {{ formatDate(selectedPatient.birth_date) }}
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
</div>
<div class="patient-detail-display"> <div class="patient-detail-display">
<div class="patient-detail-contentleft">年龄</div> <div class="patient-detailinfo-leftbox">
<div class="patient-detail-contentright"> <div class="patient-detailinfo-key">年龄</div>
<div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.birth_date"> <span v-if="selectedPatient && selectedPatient.birth_date">
{{ calculateAge(selectedPatient.birth_date) }} {{ calculateAge(selectedPatient.birth_date) }}
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-display"> <div class="patient-detailinfo-rightbox">
<div class="patient-detail-contentleft">民族</div> <div class="patient-detailinfo-key">民族</div>
<div class="patient-detail-contentright"> <div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.nationality"> {{ selectedPatient.nationality== null || selectedPatient.nationality== '' ? '—':selectedPatient.nationality }}
{{ selectedPatient.nationality }} </div>
</span>
<span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-display"> <div class="patient-detail-display">
<div class="patient-detail-contentleft">居住地</div> <div class="patient-detailinfo-leftbox">
<div class="patient-detail-contentright"> <div class="patient-detailinfo-key">居住地</div>
<span v-if="selectedPatient && selectedPatient.residence"> <div class="patient-detailinfo-value">
{{ selectedPatient.residence }} {{ selectedPatient.residence== null || selectedPatient.residence== '' ? '—':selectedPatient.residence }}
</span>
<span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-display"> <div class="patient-detailinfo-rightbox">
<div class="patient-detail-contentleft">身高</div> <div class="patient-detailinfo-key">身高</div>
<div class="patient-detail-contentright"> <div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.height"> <span v-if="selectedPatient && selectedPatient.height">
{{ selectedPatient.height }}cm {{ selectedPatient.height }}cm
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
</div>
<div class="patient-detail-display"> <div class="patient-detail-display">
<div class="patient-detail-contentleft">体重</div> <div class="patient-detailinfo-leftbox">
<div class="patient-detail-contentright"> <div class="patient-detailinfo-key">体重</div>
<div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.weight"> <span v-if="selectedPatient && selectedPatient.weight">
{{ selectedPatient.weight }}kg {{ selectedPatient.weight }}kg
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-display"> <div class="patient-detailinfo-rightbox">
<div class="patient-detail-contentleft">鞋码</div> <div class="patient-detailinfo-key">鞋码</div>
<div class="patient-detail-contentright"> <div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.shoe_size"> <span v-if="selectedPatient && selectedPatient.shoe_size">
{{ selectedPatient.shoe_size }} {{ selectedPatient.shoe_size }}
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
</div>
<div class="patient-detail-display"> <div class="patient-detail-display">
<div class="patient-detail-contentleft">电话</div> <div class="patient-detailinfo-leftbox">
<div class="patient-detail-contentright"> <div class="patient-detailinfo-key">电话</div>
<div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.phone"> <span v-if="selectedPatient && selectedPatient.phone">
{{ selectedPatient.phone }} {{ selectedPatient.phone }}
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-display"> <div class="patient-detailinfo-rightbox">
<div class="patient-detail-contentleft">邮箱</div> <div class="patient-detailinfo-key">邮箱</div>
<div class="patient-detail-contentright"> <div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.email"> <span v-if="selectedPatient && selectedPatient.email">
{{ selectedPatient.email }} {{ selectedPatient.email }}
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
</div>
<div class="patient-detail-display"> <div class="patient-detail-display">
<div class="patient-detail-contentleft">职业</div> <div class="patient-detailinfo-leftbox">
<div class="patient-detail-contentright"> <div class="patient-detailinfo-key">证件号</div>
<div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.idcode">
{{ selectedPatient.idcode }}
</span>
<span v-else></span>
</div>
</div>
<div class="patient-detailinfo-rightbox">
<div class="patient-detailinfo-key">职业</div>
<div class="patient-detailinfo-value">
<span v-if="selectedPatient && selectedPatient.occupation"> <span v-if="selectedPatient && selectedPatient.occupation">
{{ selectedPatient.occupation }} {{ selectedPatient.occupation }}
</span> </span>
<span v-else></span> <span v-else></span>
</div> </div>
</div> </div>
<div class="patient-detail-display">
<div class="patient-detail-contentleft">证件号</div>
<div class="patient-detail-contentright">
<span v-if="selectedPatient && selectedPatient.workplace">
{{ selectedPatient.workplace }}
</span>
<span v-else></span>
</div> </div>
</div> </div>
</el-scrollbar> <div class="patient-detail-buttonbox">
<el-button v-if="selectedPatient" type="primary" class="primary-view-profile" <div v-if="selectedPatient.name != null && selectedPatient.name != ''"
class="primary-view-profile"
@click="viewPatientProfile">
查看档案
</div>
<div v-if="selectedPatient.name != null && selectedPatient.name != ''"
class="primary-view-profile"
style="color:#fff;background: rgb(11, 148, 213);"
@click="startDetection">
开始检测
</div>
<!-- <el-button v-if="selectedPatient" type="primary" class="primary-view-profile"
@click="viewPatientProfile"> @click="viewPatientProfile">
查看档案 查看档案
</el-button> </el-button>
<el-button v-if="selectedPatient" type="primary" class="primary-view-profile" <el-button v-if="selectedPatient" type="primary" class="primary-view-profile"
@click="startDetection"> @click="startDetection">
开始检测 开始检测
</el-button> </el-button> -->
</div>
</div> </div>
</div> </div>
@ -248,9 +261,6 @@ const userInfo = reactive({
const tableRef = ref(null) const tableRef = ref(null)
const dialogVisible = ref(false) const dialogVisible = ref(false)
// //
const patientFormRef = ref()
//
const saveLoading = ref(false)
const patientForm = ref({ const patientForm = ref({
id: '', id: '',
name: '', name: '',
@ -263,60 +273,9 @@ const patientForm = ref({
shoe_size: '', shoe_size: '',
phone: '', phone: '',
occupation: '', occupation: '',
workplace: '', idcode: '',
email: '' email: ''
}) })
const occupationOptions = ref(["学生", "教师", "医生", "护士", "工程师", "程序员", "设计师",
"会计师", "律师", "警察", "消防员", "军人", "公务员", "销售", "市场营销",
"人力资源", "行政", "财务", "咨询师", "建筑师", "科研人员", "记者", "编辑",
"作家", "艺术家", "音乐家", "演员", "导演", "摄影师", "厨师", "服务员",
"司机", "快递员", "外卖员", "农民", "工人", "电工", "焊工", "机械师",
"飞行员", "空乘", "船员", "导游", "翻译", "心理咨询师", "社会工作者",
"运动员", "教练", "经纪人", "投资人", "企业家", "自由职业者"])
const residenceOptions = ref([
{ label: '北京', value: '北京' }
])
const nationalityOptions = ref(["汉族", "满族", "蒙古族", "回族", "藏族", "维吾尔族", "苗族", "彝族", "壮族",
"布依族", "朝鲜族", "侗族", "瑶族", "白族", "土家族", "哈尼族", "哈萨克族", "傣族",
"黎族", "傈僳族", "佤族", "畲族", "高山族", "拉祜族", "水族", "东乡族", "纳西族",
"景颇族", "柯尔克孜族", "土族", "达斡尔族", "仫佬族", "羌族", "布朗族", "撒拉族",
"毛南族", "仡佬族", "锡伯族", "阿昌族", "普米族", "塔吉克族", "怒族", "乌孜别克族",
"俄罗斯族", "鄂温克族", "德昂族", "保安族", "裕固族", "京族", "塔塔尔族", "独龙族",
"鄂伦春族", "赫哲族", "门巴族", "珞巴族", "基诺族"])
//
const formRules = {
name: [
{ required: true, message: '请输入患者姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
birthDate: [
{ required: true, message: '请选择出生日期', trigger: 'change' }
],
height: [
{ required: true, message: '请输入身高', trigger: 'blur' },
{ pattern: /^\d+(\.\d+)?$/, message: '请输入有效的身高', trigger: 'blur' }
],
weight: [
{ required: true, message: '请输入体重', trigger: 'blur' },
{ pattern: /^\d+(\.\d+)?$/, message: '请输入有效的体重', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入联系电话', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
]
}
const validateForm = async () => {
try {
await patientFormRef.value.validate()
return true
} catch (error) {
ElMessage.error('请完善必填信息')
return false
}
}
const calculatedAge = ref('') const calculatedAge = ref('')
// calculateAgeres // calculateAgeres
const calculateAgeres = (date) => { const calculateAgeres = (date) => {
@ -330,16 +289,6 @@ const calculateAgeres = (date) => {
} }
calculatedAge.value = age calculatedAge.value = age
} }
//
const filteredPatients = computed(() => {
// if (!searchKeyword.value) {
// return patients.value
// }
// return patients.value.filter(patient =>
// patient.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
// )
})
// //
const handleSearch = () => { const handleSearch = () => {
@ -347,92 +296,25 @@ const handleSearch = () => {
loadPatients() loadPatients()
} }
const rowIndex = ref(-1)
// const selectPatient = (patient) => { const selectPatient = (patient,column,cell) => {
// selectedPatient.value = patient const selectIndex = patients.value.indexOf(patient);
// } rowIndex.value = selectIndex
const selectPatient = (patient) => {
selectedPatient.value = patient selectedPatient.value = patient
} }
const editPatient = () => {
// router.push(`/patient/edit/${selectedPatient.value.id}`)
//
patientForm.value = JSON.parse(JSON.stringify(selectedPatient.value))
if (patientForm.value.birth_date) {
calculatedAge.value = calculateAgeres(patientForm.value.birth_date)
}
dialogVisible.value = true
}
const handleSave = async () => {
if (!(await validateForm())) return
saveLoading.value = true
try {
await savePatient()
ElMessage.success('修改成功')
dialogVisible.value = false
saveLoading.value = false
await loadPatients()
if (patients.value.length > 0 && selectedPatient.value.id) {
for (var i = 0; i < patients.value.length; i++) {
if (patients.value[i].id === selectedPatient.value.id) {
selectedPatient.value = patients.value[i]
break
}
}
}
setTimeout(() => {
tableRef.value.setCurrentRow(selectedPatient.value)
}, 300)
} 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
}
}
const viewPatientProfile = () => { const viewPatientProfile = () => {
if (selectedPatient.value ==null ||selectedPatient.value.id == null || selectedPatient.value.id =='') {
ElMessage.warning('请先选择患者')
return
}
isPatientProfile.value = true isPatientProfile.value = true
// router.push(`/patient/${selectedPatient.value.id}`)
} }
const startDetection = () => { const startDetection = () => {
if (!selectedPatient.value) { if (selectedPatient.value ==null ||selectedPatient.value.id == null || selectedPatient.value.id =='') {
ElMessage.warning('请先选择患者') ElMessage.warning('请先选择患者')
return return
} }
isDetection.value = true isDetection.value = true
// router.push(`/detection/${selectedPatient.value.id}`)
} }
const createNewPatient = async () => { const createNewPatient = async () => {
@ -551,10 +433,6 @@ const loadPatients = async () => {
patients.value = [] patients.value = []
} }
} }
const handleClose = () => {
patientFormRef.value?.resetFields()
dialogVisible.value = false
}
// //
onMounted(() => { onMounted(() => {
// //
@ -600,14 +478,18 @@ function delClick(id) {
}); });
} }
const isCloseCreat = ref(false) const isCloseCreat = ref(false)
function closecreatbox(e){ function closecreatbox(e,e2){
if(e == true){
loadPatients() if(e == '关闭'){
}else if(e != null && e.id != null) {
selectedPatient.value = e
loadPatients()
isDetection.value = true isDetection.value = true
}else if(e == '新建') {
loadPatients()
}else if(e == '编辑') {
// patients.value[rowIndex.value] = e2
selectedPatient.value = e2
} }
isCloseCreat.value = false isCloseCreat.value = false
} }
function endChange(){ function endChange(){
@ -631,7 +513,7 @@ function editClick(){
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #000; background: #191028;
} }
.header { .header {
@ -770,11 +652,12 @@ function editClick(){
} }
.patient-section { .patient-section {
width: calc(100% - 350px); width: calc(100% - 500px);
background: rgb(51, 51, 51); background: #1D2330;
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
border:1px solid #292f3c;
} }
.section-header { .section-header {
@ -790,11 +673,6 @@ function editClick(){
font-size: 18px; font-size: 18px;
} }
.search-box {
/* width: 250px; */
display: flex;
align-items: center;
}
.patient-list { .patient-list {
flex: 1; flex: 1;
@ -852,21 +730,24 @@ function editClick(){
} }
.patient-detail { .patient-detail {
width: 350px; width: 500px;
background: #282828;
border-radius: 4px; border-radius: 4px;
height: 100%; height: 100%;
/* background: #fff; */ background: #1f2533;
border-radius: 8px;
padding: 20px 23px;
border:1px solid #292f3c;
} }
.patient-detail-box { .patient-detail-box {
background: rgb(51, 51, 51); position: relative;
width: 452px;
height: 122px;
background: rgba(55, 65, 81, 0.5);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-direction: column;
color: #fff; color: #fff;
} }
@ -980,10 +861,6 @@ function editClick(){
padding: 0px 25px; padding: 0px 25px;
} }
:deep(.el-input__wrapper) {
background: transparent;
}
.basic-info-box { .basic-info-box {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -1032,23 +909,16 @@ function editClick(){
margin-right: 4px; margin-right: 4px;
} }
:deep(.el-input__wrapper) {
background-color: rgba(51, 51, 51, 1);
border-width: 1px;
border-style: solid;
border-color: rgba(127, 127, 127, 1);
border-radius: 4px;
box-shadow: none;
}
.patient-section :deep(.el-table th .cell){
:deep(.el-table th .cell){ font-weight: 700;
font-size: 14px; font-style: normal;
font-size: 16px;
color: #9CA3AF;
} }
:deep(.el-table--border .el-table__inner-wrapper){ :deep(.el-table--border .el-table__inner-wrapper){
border-right: 1px solid #434343; border-right: 1px solid #434343;
@ -1056,6 +926,33 @@ function editClick(){
:deep(.el-table .cell){ :deep(.el-table .cell){
font-size: 18px; font-size: 18px;
} }
/* 搜索框样式 */
.search-box {
width: 372px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #191D28;
border-radius: 4px;
}
.search-box :deep(.el-input__wrapper) {
background-color: transparent;
border-width: 0;
border-radius: 4px;
box-shadow: none;
color:#fff
}
.search-box :deep(.el-input__inner) {
color:#D1D5DB;
font-size: 14px;
}
</style> </style>
<style> <style>
.dashboard-container .main-dashboard-content .el-table { .dashboard-container .main-dashboard-content .el-table {
@ -1071,19 +968,23 @@ function editClick(){
} }
.dashboard-container .main-dashboard-content .cell { .dashboard-container .main-dashboard-content .cell {
color: #fff; font-weight: 400;
font-style: normal;
font-size: 16px;
color: #D1D5DB;
text-align: center;
} }
.dashboard-container .main-dashboard-content .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { .dashboard-container .main-dashboard-content .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: transparent !important; background-color: #1f2c45 !important;
} }
.dashboard-container .main-dashboard-content .el-table th.el-table__cell.is-leaf { .dashboard-container .main-dashboard-content .el-table th.el-table__cell.is-leaf {
background-color: rgb(70, 70, 70) !important; background-color: #374151 !important;
} }
.dashboard-container .main-dashboard-content .el-table td.el-table__cell { .dashboard-container .main-dashboard-content .el-table td.el-table__cell {
background-color: #282828 !important; background-color: #1c212e !important;
} }
@ -1095,12 +996,12 @@ function editClick(){
.el-table--border:after, .el-table--border:after,
.el-table--border:before, .el-table--border:before,
.el-table__inner-wrapper:before { .el-table__inner-wrapper:before {
background-color: #787878; background-color: rgba(55, 65, 81, 1);
} }
.dashboard-container .main-dashboard-content .el-table__border-bottom-patch, .dashboard-container .main-dashboard-content .el-table__border-bottom-patch,
.el-table__border-left-patch { .el-table__border-left-patch {
background-color: #787878; background-color: rgba(55, 65, 81, 1);
} }
.dashboard-container .main-dashboard-content .el-input__wrapper { .dashboard-container .main-dashboard-content .el-input__wrapper {
@ -1108,15 +1009,15 @@ function editClick(){
} }
.dashboard-container .main-dashboard-content .el-table__cell { .dashboard-container .main-dashboard-content .el-table__cell {
border-bottom: 1px solid #787878; border-bottom: 1px solid rgba(55, 65, 81, 1);
} }
.dashboard-container .main-dashboard-content .el-table__cell { .dashboard-container .main-dashboard-content .el-table__cell {
border-bottom: 1px solid #787878; border-bottom: 1px solid rgba(55, 65, 81, 1);
} }
.dashboard-container .main-dashboard-content .el-table__header th { .dashboard-container .main-dashboard-content .el-table__header th {
border-color: #787878; border-color: rgba(55, 65, 81, 1);
} }
.dashboard-container .main-dashboard-content .el-dialog { .dashboard-container .main-dashboard-content .el-dialog {
@ -1146,6 +1047,7 @@ function editClick(){
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
} }
.search-input{ .search-input{
width: 270px;
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
margin-right: 10px; margin-right: 10px;
@ -1169,7 +1071,7 @@ function editClick(){
} }
.dashboard-container .main-dashboard-content .el-table .el-table__row.current-row td{ .dashboard-container .main-dashboard-content .el-table .el-table__row.current-row td{
background-color: #282f3d !important; background-color: #194764 !important;
border-top:1px solid rgba(38, 111, 255, 1); border-top:1px solid rgba(38, 111, 255, 1);
border-bottom:1px solid rgba(38, 111, 255, 1) border-bottom:1px solid rgba(38, 111, 255, 1)
} }
@ -1180,46 +1082,42 @@ function editClick(){
border-left:1px solid rgba(38, 111, 255, 1); border-left:1px solid rgba(38, 111, 255, 1);
} }
.dashboard-container .main-dashboard-content .el-table .el-table__row.current-row:last-child td{ .dashboard-container .main-dashboard-content .el-table .el-table__row.current-row:last-child td{
border-bottom:2px solid rgba(38, 111, 255, 1) border-bottom:1px solid rgba(38, 111, 255, 1)
} }
.dashboard-container .main-dashboard-content .el-table .el-table__body tr td { .dashboard-container .main-dashboard-content .el-table .el-table__body tr td {
height: 50px !important; height: 60px !important;
} }
/* 设置表头行高 */ /* 设置表头行高 */
.dashboard-container .main-dashboard-content .el-table .el-table__header tr th { .dashboard-container .main-dashboard-content .el-table .el-table__header tr th {
height: 50px !important; height: 60px !important;
} }
.unprocessed-status{ .unprocessed-status{
margin: auto; margin: auto;
width: 60px; width: 72px;
height: 26px; height: 31px;
line-height: 26px; line-height: 31px;
background-color: #543544; background-color: rgba(228, 74, 74, 0.3);
border: #FF3300 1px solid;
border-radius: 4px; border-radius: 4px;
font-family: 'Noto Sans SC';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 16px;
color: #FF3300; color: rgb(209, 213, 219);
text-align: center; text-align: center;
} }
.processed-status{ .processed-status{
margin: auto; margin: auto;
width: 60px; width: 72px;
height: 26px; height: 31px;
line-height: 26px; line-height: 31px;
background-color: #243824; background-color: rgba(59, 242, 198, 0.1);
border: #00CC00 1px solid;
border-radius: 4px; border-radius: 4px;
font-family: 'Noto Sans SC';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 16px;
color: #00CC00; color: rgb(209, 213, 219);
text-align: center; text-align: center;
} }
@ -1228,13 +1126,14 @@ function editClick(){
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 20px 5px;
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #FFFFFF;
border-bottom: 1px solid #000; border-bottom: 1px solid #374151;
margin-top: 20px;
} }
.patient-detail-avatar{ .patient-detail-avatar{
width: 120px; width: 120px;
@ -1249,15 +1148,11 @@ function editClick(){
} }
.patient-detail-name{ .patient-detail-name{
width: 100%; width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Noto Sans SC';
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
color: #FFFFFF; color: rgb(255, 255, 255);
font-size: 24px; font-size: 24px;
padding-top: 10px; padding-top: 5px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.edit-icon-box{ .edit-icon-box{
@ -1283,9 +1178,10 @@ function editClick(){
.patient-detail-display{ .patient-detail-display{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px; padding: 10px 20px;
padding-left: 30px;
padding-right: 0;
} }
.patient-detail-contentleft{ .patient-detail-contentleft{
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
@ -1305,48 +1201,45 @@ function editClick(){
.pagination-box.el-pagination.is-background .btn-next, .pagination-box.el-pagination.is-background .btn-next,
.pagination-box.el-pagination.is-background .btn-prev, .pagination-box.el-pagination.is-background .btn-prev,
.pagination-box.el-pagination.is-background .el-pager li{ .pagination-box.el-pagination.is-background .el-pager li{
background: #282828; background: rgb(55, 65, 81);
color: #fff; color: #fff;
border: 1px solid rgba(80, 80, 80, 1); border: 1px solid rgb(55, 65, 81);
} }
.pagination-box.el-pagination.is-background .btn-next:hover, .pagination-box.el-pagination.is-background .btn-next:hover,
.pagination-box.el-pagination.is-background .btn-prev:hover, .pagination-box.el-pagination.is-background .btn-prev:hover,
.pagination-box.el-pagination.is-background .el-pager li:hover{ .pagination-box.el-pagination.is-background .el-pager li:hover{
color: rgba(38, 111, 255, 1); color: rgb(20, 170, 255);
} }
.pagination-box.el-pagination.is-background .btn-next.is-active, .pagination-box.el-pagination.is-background .btn-next.is-active,
.pagination-box.el-pagination.is-background .btn-prev.is-active, .pagination-box.el-pagination.is-background .btn-prev.is-active,
.pagination-box.el-pagination.is-background .el-pager li.is-active{ .pagination-box.el-pagination.is-background .el-pager li.is-active{
background: rgba(38, 111, 255, 1); background: #1e5173;
border: 1px solid rgba(38, 111, 255, 1); border: 1px solid rgb(20, 170, 255);
color:#fff; color:#fff;
} }
.pagination-box{ .pagination-box{
margin-top: 10px; margin-top: 10px;
justify-content: flex-end;
} }
.patient-detail .el-scrollbar{ .patient-detail .el-scrollbar{
height: calc(100% - 420px); height: calc(100% - 420px);
} }
.primary-view-profile{ .primary-view-profile{
width: 310px; width: 200px;
height: 50px; height: 46px;
background-color: rgba(38, 111, 255, 1); line-height: 46px;
background-color: #597194;
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 16px;
color: #FFFFFF; border-radius: 4px;
border: 1px solid rgba(38, 111, 255, 1); font-weight: 400;
margin: auto; font-style: normal;
} font-size: 16px;
.primary-view-profile:hover{ color: rgb(239, 245, 253);
background-color: rgb(62, 126, 254); text-align: center;
border: 1px solid rgb(62, 126, 254); cursor: pointer;
}
.primary-view-profile.el-button{
margin-left: 20px;
margin-top: 10px;
} }
.creat-patient-box{ .creat-patient-box{
position: fixed; position: fixed;
@ -1357,4 +1250,64 @@ function editClick(){
height: 100vh; height: 100vh;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
.primary-search-buttons{
width: 65px;
height: 32px;
background-color: rgba(55, 65, 81, 1);
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-style: normal;
color: #FFFFFF;
text-align: center;
font-size: 14px;
margin-right: 5px;
}
.primary-add-buttons{
width: 126px;
height: 32px;
background-color: rgba(11, 148, 213, 1);
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-style: normal;
color: #FFFFFF;
text-align: center;
font-size: 14px;
}
.patient-detailinfo-key{
font-weight: 400;
font-style: normal;
font-size: 14px;
color: rgb(148, 148, 148);
padding-bottom: 3px;
}
.patient-detailinfo-value{
font-weight: 400;
font-style: normal;
font-size: 16px;
color: rgb(255, 255, 255);
}
.patient-detailinfo-leftbox{
width: 235px;
height: 48px;
}
.patient-detailinfo-rightbox{
height: 48px;
}
.patient-detail-buttonbox{
display: flex;
justify-content: space-between;
}
</style> </style>

View File

@ -2560,7 +2560,7 @@ function refreshClick(type) {
.video-preview { .video-preview {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; /* object-fit: cover; */
} }
.video-time { .video-time {

View File

@ -213,7 +213,7 @@
.header { .header {
height: 60px; height: 60px;
background: #323232; background: #191028;
border-bottom: none; border-bottom: none;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@ -6,12 +6,12 @@
<div>{{ patienttitle }} </div> <div>{{ patienttitle }} </div>
<img src="@/assets/new/u264.svg" alt="" style="cursor: pointer;" @click="handleCancel"> <img src="@/assets/new/u264.svg" alt="" style="cursor: pointer;" @click="handleCancel">
</div> </div>
<el-form ref="patientFormRef" :model="patientForm" :rules="formRules" label-width="120px" class="patient-form"> <el-form ref="patientFormRef" :model="patientForm" :rules="formRules" label-width="80px" class="patient-form">
<div class="form-section"> <div class="form-section">
<el-row :gutter="20"> <el-row :gutter="80">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="测试者ID" prop="testerId"> <el-form-item label="者ID" prop="testerId">
<el-input v-model="patientForm.id" disabled placeholder="请输入测试者ID" clearable /> <el-input v-model="patientForm.id" disabled placeholder="自动生成患者ID" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -89,8 +89,8 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="证件号" prop="workplace"> <el-form-item label="证件号" prop="idcode">
<el-input v-model="patientForm.workplace" placeholder="请输入" clearable /> <el-input v-model="patientForm.idcode" placeholder="请输入" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -100,21 +100,11 @@
<el-button @click="handleCancel" class="formreturnCancel">退出</el-button> <el-button @click="handleCancel" class="formreturnCancel">退出</el-button>
<el-button type="primary" :loading="saveLoading" @click="handleSave" <el-button type="primary" :loading="saveLoading" @click="handleSave"
class="formsaveCancel"> class="formsaveCancel">
保存 确定
</el-button>
<el-button type="primary" :loading="saveLoading" @click="handleSaveAndDetect"
class="formsaveCancel">
保存并开始检测
</el-button> </el-button>
</div> </div>
</div> </div>
<!-- 底部操作按钮 -->
<!-- <div class="footer-actions">
<el-button type="success" :loading="saveAndDetectLoading">
保存并开始检测
</el-button>
</div> -->
</div> </div>
</template> </template>
@ -152,19 +142,21 @@ const patientForm = reactive({
shoe_size: '', shoe_size: '',
phone: '', phone: '',
occupation: '', occupation: '',
workplace: '', idcode: '',
email: '' email: ''
}) })
// //
const saveLoading = ref(false) const saveLoading = ref(false)
const saveAndDetectLoading = ref(false) const saveAndDetectLoading = ref(false)
const patienttitle = ref("新建患者信息") const patienttitle = ref("新建档案")
// //
onMounted(() => { onMounted(() => {
// //
if (props.patienttype == 'edit') { if (props.patienttype == 'edit') {
patienttitle.value = '编辑患者信息' patienttitle.value = '编辑个人信息'
Object.assign(patientForm, props.selectedPatient) let tempInfo = props.selectedPatient
tempInfo.age = calculateAgeres(tempInfo.birth_date )
Object.assign(patientForm, tempInfo)
} }
@ -227,7 +219,7 @@ const calculateAgeres = (date) => {
calculatedAge.value = age calculatedAge.value = age
} }
const handleCancel = async () => { const handleCancel = async () => {
emit('closecreatbox',false) emit('closecreatbox','关闭','')
} }
const validateForm = async () => { const validateForm = async () => {
@ -253,7 +245,7 @@ const savePatient = async () => {
email: patientForm.email, email: patientForm.email,
nationality: patientForm.nationality, nationality: patientForm.nationality,
residence: patientForm.residence, residence: patientForm.residence,
workplace: patientForm.workplace, idcode: patientForm.idcode,
medical_history: '', // medical_history: '', //
notes: '' // notes: '' //
} }
@ -261,7 +253,7 @@ const savePatient = async () => {
try { try {
const response = await patientAPI.create(patientData) const response = await patientAPI.create(patientData)
if (response.success) { if (response.success) {
emit('closecreatbox',true) emit('closecreatbox','新建',response.data)
return response.data return response.data
} else { } else {
@ -274,24 +266,25 @@ const savePatient = async () => {
} }
const updatePatient = async () => { const updatePatient = async () => {
const patientData = { const patientData = {
id: patientForm.value.id, id: patientForm.id,
name: patientForm.value.name, name: patientForm.name,
gender: patientForm.value.gender, gender: patientForm.gender,
age: calculatedAge.value, age: calculatedAge.value,
birth_date: patientForm.value.birth_date, birth_date: patientForm.birth_date,
height: patientForm.value.height, height: patientForm.height,
weight: patientForm.value.weight, weight: patientForm.weight,
shoe_size: patientForm.value.shoe_size, shoe_size: patientForm.shoe_size,
phone: patientForm.value.phone, phone: patientForm.phone,
occupation: patientForm.value.occupation, occupation: patientForm.occupation,
email: patientForm.value.email, email: patientForm.email,
nationality: patientForm.value.nationality, nationality: patientForm.nationality,
residence: patientForm.value.residence, residence: patientForm.residence,
workplace: patientForm.value.workplace idcode: patientForm.idcode
} }
try { try {
const response = await patientAPI.updatePatient(patientForm.value.id, patientData) const response = await patientAPI.updatePatient(patientForm.id, patientData)
if (response.success) { if (response.success) {
emit('closecreatbox','编辑',patientData)
return response.data return response.data
} else { } else {
throw new Error(response.message || '修改失败') throw new Error(response.message || '修改失败')
@ -305,35 +298,22 @@ const handleSave = async () => {
saveLoading.value = true saveLoading.value = true
try { try {
if(patientForm.value.id == null){ if(patientForm.id == null){
await savePatient() await savePatient()
}else[ }else{
await updatePatient () await updatePatient()
] }
ElMessage.success('患者档案保存成功') ElMessage.success('患者档案保存成功')
} catch (error) { } catch (error) {
ElMessage.error('保存失败:' + error.message) ElMessage.error('保存失败:' + error.message)
} finally { } finally {
saveLoading.value = false saveLoading.value = false
} }
} }
const handleSaveAndDetect = async () => {
if (!(await validateForm())) return
saveAndDetectLoading.value = true
try {
const patient = await savePatient()
ElMessage.success('患者档案保存成功,即将开始检测')
emit('closecreatbox',patient)
// router.push(`/detection/${patient.id}`)
} catch (error) {
ElMessage.error('保存失败:' + error.message)
} finally {
saveAndDetectLoading.value = false
}
}
</script> </script>
<style scoped> <style scoped>
@ -346,7 +326,9 @@ const handleSaveAndDetect = async () => {
left: 0; left: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
background: #1b1b1b; background: #465367;
border-radius: 10px;
box-shadow: 0px 0px 16px rgba(17, 24, 33, 1);
} }
.nav-container { .nav-container {
@ -400,7 +382,6 @@ const handleSaveAndDetect = async () => {
.patient-form { .patient-form {
margin: 0 auto; margin: 0 auto;
padding: 30px; padding: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.form-section { .form-section {
@ -460,9 +441,9 @@ const handleSaveAndDetect = async () => {
:deep(.el-form-item__label) { :deep(.el-form-item__label) {
font-size: 14px !important; font-size: 14px !important;
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
font-weight: 700 !important; font-weight: 400 !important;
font-style: normal !important; font-style: normal !important;
color: #787878 !important; color: #FFFFFF !important;
} }
:deep(.el-form-item__content) { :deep(.el-form-item__content) {
@ -494,7 +475,7 @@ const handleSaveAndDetect = async () => {
} }
.patient-create-container :deep(.el-input__wrapper) { .patient-create-container :deep(.el-input__wrapper) {
background-color: #282828; background-color: #2a3649;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: rgb(54, 54, 54); border-color: rgb(54, 54, 54);
@ -504,21 +485,17 @@ const handleSaveAndDetect = async () => {
} }
:deep(.el-select__wrapper) { :deep(.el-select__wrapper) {
background-color: #282828; background-color: #2a3649;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: rgb(54, 54, 54); border-color: transparent;
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
height: 40px; height: 40px;
} }
:deep(.el-select__wrapper:hover){
:deep(.el-form-item__label) { border-color: #3d4c65;
font-size: 14px; box-shadow: 0 0 0 1px transparent inset;
font-family: 'Noto Sans SC';
font-weight: 700;
font-style: normal;
color: #FFFFFF;
} }
:deep(.el-col-12) { :deep(.el-col-12) {
@ -527,22 +504,24 @@ const handleSaveAndDetect = async () => {
:deep(.el-input__inner) { :deep(.el-input__inner) {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 14px;
height: 40px; height: 40px;
} }
:deep(.el-input.is-disabled .el-input__inner) {
color: #787878;
}
:deep(.el-select__placeholder) { :deep(.el-select__placeholder) {
color: #ffffff; color: #ffffff;
font-size: 16px; font-size: 14px;
} }
:deep(.el-input.is-disabled .el-input__wrapper) { :deep(.el-input.is-disabled .el-input__wrapper) {
background-color: rgba(127, 127, 127, 1); background-color: #2a3649;
box-shadow: none; box-shadow: none;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: rgba(215, 215, 215, 1); border-color: transparent;
color: #FFFFFF;
} }
</style> </style>
<style> <style>
@ -571,13 +550,12 @@ const handleSaveAndDetect = async () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: rgba(46, 52, 59, 1);
box-sizing: border-box; box-sizing: border-box;
padding: 0 20px; padding: 0 30px;
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-size: 16px; font-size: 20px;
color: #FFFFFF; color: #FFFFFF;
text-align: left; text-align: left;
} }
@ -589,29 +567,35 @@ const handleSaveAndDetect = async () => {
.formreturnCancel{ .formreturnCancel{
width: 80px; width: 80px;
height: 40px; height: 40px;
background: #313131; background: rgba(89, 113, 148, 1);
border: 1px solid rgb(148, 148, 148); border: 1px solid rgba(89, 113, 148, 1);
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: rgb(148, 148, 148); color: rgba(255, 255, 255, 0.6);
} }
.formreturnCancel:hover{ .formreturnCancel:hover{
background: #1e2c49; background: #425b89;
color: #266fff; color: #266fff;
border: 1px solid #266fff; border: 1px solid #266fff;
} }
.formsaveCancel{ .formsaveCancel{
width: 80px; width: 80px;
height: 40px; height: 40px;
background: #266fff; background: #0b94d5;
font-family: 'Noto Sans SC'; font-family: 'Noto Sans SC';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 14px; font-size: 14px;
color: #FFFFFF; color: #FFFFFF;
} }
.formsaveCancel:hover{
background: #5189ff;
border: 1px solid #5189ff;
}
.el-date-editor.el-input{ .el-date-editor.el-input{
height: 40px; height: 40px;
} }

View File

@ -1372,7 +1372,7 @@ onMounted(() => {
.screenshot-item img { .screenshot-item img {
width: 100%; width: 100%;
height: 150px; height: 150px;
object-fit: cover; /* object-fit: cover; */
} }
.screenshot-overlay { .screenshot-overlay {

View File

@ -1200,7 +1200,7 @@ onUnmounted(() => {
.preview-video { .preview-video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; /* object-fit: contain; */
} }
.recording-overlay { .recording-overlay {