<template>
|
<div class="dietarySurvey-home">
|
<div v-if="patientsInfo.id" v-loading="state.loading">
|
<el-card class="box-card" >
|
<div class="clearfix" >
|
<el-icon size="16" color="#409efc"><Briefcase /></el-icon> <span> 服务套餐</span>
|
</div>
|
<div>
|
基础服务100套餐
|
膳食套餐，
|
体检套餐，
|
</div>
|
</el-card>
|
<el-card class="box-card" style="margin-top:10px;">
|
<div class="clearfix" >
|
<el-icon size="16" color="#409efc"><CreditCard /></el-icon> <span> 患者基本信息</span>
|
</div>
|
<div>
|
<table class="gridtable">
|
<tr>
|
<td>姓名：{{patientsInfo.patientName}}</td>
|
<td>年龄：<span v-if="patientsInfo.age">{{patientsInfo.age}} 岁</span></td>
|
<td>性别：{{patientsInfo.patientGenderText}}</td>
|
<td>身高：{{patientsInfo.patientHeight}}</td>
|
<td>干体重:<span v-if="state.patientData.干体重">{{state.patientData.干体重}} (kg)</span></td>
|
|
</tr>
|
<tr>
|
<td>透析龄：<span v-if="patientsInfo.medHistoryStatByMonth">{{patientsInfo.medHistoryStatByMonth}} (月)</span></td>
|
|
<td colspan="4">证件号：{{patientsInfo.patientIdentityNo}}</td>
|
|
</tr>
|
<tr>
|
<td >电话号码：{{patientsInfo.patientTelNo}}</td>
|
<td >家属电话：{{patientsInfo.patientTelNoRelative}}</td>
|
<td colspan="3">家庭地址：{{patientsInfo.patientAddress}}</td>
|
|
</tr>
|
<tr>
|
<td colspan="5">患者诊断：{{state.patientData.诊断}}</td>
|
</tr>
|
</table>
|
</div>
|
</el-card>
|
<el-card class="box-card" style="margin-top:10px;">
|
<div class="clearfix" >
|
<el-icon size="16" color="#409efc"><CreditCard /></el-icon> <span> 最新生化数据</span>
|
</div>
|
<div >
|
<el-row :gutter="10" v-if="state.listData.length">
|
<el-col :xs="8" :sm="8" :md="6" :lg="6" :xl="4" v-for="(item, key) in state.listData" :key="key">
|
<div class="itemLis" v-if="item?.item_result" >
|
<div class="title">
|
{{key}}
|
</div>
|
<div class="itemRes">
|
<div class="itemResDtile" >
|
<div style="text-align: center;width: 100%;">
|
{{ item?.item_name }}
|
</div>
|
<div>
|
{{ item?.item_result }}<span class="tdate">{{item?.item_result_unit}}</span>
|
</div>
|
</div>
|
</div>
|
<div class="tdate" >
|
{{item?.sample_date_str}}
|
</div>
|
|
</div>
|
|
</el-col>
|
</el-row>
|
</div>
|
</el-card>
|
|
</div>
|
<el-empty v-else description="无数据，请先选择患者"></el-empty>
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
import { storeToRefs } from 'pinia';
|
import { usePatientsInfo } from '/@/stores/patientsInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { computed, onMounted, reactive } from 'vue';
|
import { getPatData,getLisResults } from '/@/api/Patients';
|
import { userInfo } from 'os';
|
import dayjs from 'dayjs';
|
const storesPat = usePatientsInfo();
|
const stores = useUserInfo();
|
|
const { patientsInfo } = storeToRefs(storesPat);
|
const { userInfos } = storeToRefs(stores);
|
const props = defineProps(['tableHeight'])
|
const state = reactive({
|
tableData: [],
|
loading: false,
|
patientData:{
|
姓名:'',
|
干体重:'',
|
证件号:"",
|
诊断:'',
|
身高:''
|
},
|
listData:<any>{}
|
})
|
const tableHe = computed(() => {
|
return props.tableHeight - 130
|
})
|
// 第一步：定义子组件里面的方法
|
const getData = async (str: string) => {
|
var pam = {
|
patCode: patientsInfo.value.code,
|
}
|
const pam2={
|
clientCode:userInfos.value.clientCode,
|
patCode:patientsInfo.value.code,
|
date1:dayjs().add(-30, 'day').format('YYYY-MM-DD'),
|
date2:dayjs().format('YYYY-MM-DD'),
|
}
|
try{
|
state.loading = true
|
const [res1,res2]=await Promise.all([
|
getPatData(pam),
|
getLisResults(pam2)
|
])
|
state.patientData=res1.data
|
state.listData=res2.data
|
console.log('lis数据',state.listData)
|
state.loading = false
|
}
|
catch(error){
|
state.loading = false
|
}
|
|
}
|
onMounted(()=>{
|
// console.log(dayjs().add(-7, 'day').format('YYYY-MM-DD'),'---shan')
|
})
|
const formatResKeys = (obj: Object) => {
|
return Object.keys(obj).filter((k) => k !== '标本日期');
|
};
|
const formatResKeysDate = (obj: Object) => {
|
return Object.keys(obj).filter((k) => k === '标本日期');
|
};
|
|
// 第二步：暴露方法
|
defineExpose({ getData })
|
</script>
|
|
<style lang="scss">
|
.gridtable {font-family: verdana,arial,sans-serif;font-size:14px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;width: 100%;}
|
|
.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}
|
|
.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}
|
.clearfix{
|
font-weight: 800;
|
flex: 1;
|
height: inherit;
|
display: flex;
|
align-items: center;
|
margin-top: -10px;margin-bottom: 10px;
|
}
|
|
.itemLis{
|
margin-bottom: 10px;
|
width: 100%;
|
padding-left: 10px;
|
padding-right: 10px;
|
height: 100px;
|
// margin-top: 10px;
|
// line-height: 33px;
|
border: 1px solid #c7c9cd;
|
border-left: 3px solid #409EFF;
|
border-radius: 5px;
|
text-align: center;
|
margin-left: 10px;
|
.title{
|
text-align: left;
|
color: #909399;
|
font-size: 13px;
|
height: 20px;
|
line-height: 20px;
|
}
|
.itemRes{
|
height: 60px;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
color: #303133;
|
font-size: 16px;
|
div{
|
width: 100%;
|
line-height: 30px;text-align: center; padding-left: 10px; padding-right: 10px;
|
}
|
.itemResDtile:not(:first-child) {
|
width: 100%;
|
/* 在这里添加你想要的样式 */
|
border-left: 1px solid #909399; /* 示例样式：为除第一个div外的所有div添加红色边框 */
|
}
|
}
|
.tdate{
|
color: #909399;
|
font-size: 13px;
|
height: 20px;
|
line-height: 20px;
|
}
|
}
|
|
|
</style>
|
