358 lines
21 KiB
Vue
358 lines
21 KiB
Vue
<template>
|
||
<div class="user-detail">
|
||
<el-descriptions title="患者信息">
|
||
<el-descriptions-item label="姓名：">{{ userInfo.username }}</el-descriptions-item>
|
||
<el-descriptions-item label="性别：">
|
||
<el-tag v-if="userInfo.sex == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.sex == 1" type="success">男</el-tag>
|
||
<el-tag v-if="userInfo.sex == 2" type="danger">女</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="年龄：">{{ userInfo.age }}</el-descriptions-item>
|
||
<el-descriptions-item label="账号：">{{ userInfo.mobile }} </el-descriptions-item>
|
||
<el-descriptions-item label="胆道闭锁手术时间：">{{ userInfo.operative_date }} </el-descriptions-item>
|
||
<el-descriptions-item label="术后时长：">{{ userInfo.postoperative_duration }} </el-descriptions-item>
|
||
<el-descriptions-item label="当前风险：">
|
||
<el-tag v-if="userInfo.risk_type == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.risk_type == 1" type="success">低危</el-tag>
|
||
<el-tag v-if="userInfo.risk_type == 2" type="warning">中危</el-tag>
|
||
<el-tag v-if="userInfo.risk_type == 3" type="danger">高危</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="身高生长曲线：">
|
||
<el-tag v-if="userInfo.height_growth_curve_type == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.height_growth_curve_type == 1" type="warning">轻度偏离</el-tag>
|
||
<el-tag v-if="userInfo.height_growth_curve_type == 2" type="success">正常</el-tag>
|
||
<el-tag v-if="userInfo.height_growth_curve_type == 3" type="danger">重度偏离</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="体重生长曲线：">
|
||
<el-tag v-if="userInfo.weight_growth_curve_type == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.weight_growth_curve_type == 1" type="warning">轻度偏离</el-tag>
|
||
<el-tag v-if="userInfo.weight_growth_curve_type == 2" type="success">正常</el-tag>
|
||
<el-tag v-if="userInfo.weight_growth_curve_type == 3" type="danger">重度偏离</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="下次随访时间：">{{ userInfo.next_follow_date }} </el-descriptions-item>
|
||
<el-descriptions-item label="出生体重(g）：">{{ userInfo.birth_weight }} （g）</el-descriptions-item>
|
||
<el-descriptions-item label="胎次：">{{ userInfo.parity_number }} </el-descriptions-item>
|
||
<el-descriptions-item label="产次：">{{ userInfo.birth_number }} </el-descriptions-item>
|
||
<el-descriptions-item label="受孕方式：">
|
||
<el-tag v-if="userInfo.conception_type == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.conception_type == 1" type="success">自然受孕</el-tag>
|
||
<el-tag v-if="userInfo.conception_type == 2" type="warning">辅助生殖技术</el-tag>
|
||
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="孕周：">{{ userInfo.gestational_week }}（周）</el-descriptions-item>
|
||
<el-descriptions-item label="产检是否异常：">
|
||
<el-tag v-if="userInfo.prenatal_check_type == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.prenatal_check_type == 2" type="success">无</el-tag>
|
||
<span v-if="userInfo.prenatal_check_type == 1">{{ userInfo.prenatal_check_remark }}</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="分娩方式：">
|
||
<el-tag v-if="userInfo.delivery_type == 0" type="info">未知</el-tag>
|
||
<el-tag v-if="userInfo.delivery_type == 1" type="success">顺产</el-tag>
|
||
<el-tag v-if="userInfo.delivery_type == 2" type="warning">剖腹产</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<div class="title">
|
||
<h2>随访记录</h2>
|
||
</div>
|
||
<div class="table">
|
||
<el-table :data="tableData" style="width: 100%" v-loading="isLoading">
|
||
<el-table-column prop="follow_name" label="随访周期" />
|
||
<el-table-column prop="follow_date" label="随访日期" />
|
||
<el-table-column prop="follow_hospital" label="随访医院" />
|
||
<el-table-column label="操作" width="100">
|
||
<template #default="scope">
|
||
<el-link type="primary" @click="handleCheck(scope.row)" size="small">查看问卷</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="title">
|
||
<h2>身高曲线</h2>
|
||
</div>
|
||
<div class="echats" v-loading="isLoading">
|
||
<myEchartsSh v-if="!isLoading" ref="heightEcharts" id="heightEcharts" :sex="userInfo.conception_type"
|
||
:legendData="['实际身高', '标准范围']" :actual-height="chatData.height" :x-axis="chatData.age" :label="'身高'" />
|
||
</div>
|
||
<div class="title">
|
||
<h2>体重曲线</h2>
|
||
</div>
|
||
<div class="echats" v-loading="isLoading">
|
||
<myEchartsSh v-if="!isLoading" ref="weightEcharts" id="weightEcharts" :sex="userInfo.conception_type"
|
||
:legendData="['实际体重', '标准范围']" :actual-height="chatData.weight" :x-axis="chatData.age" :label="'体重'" />
|
||
</div>
|
||
<div class="title">
|
||
<h2>总胆红素趋势</h2>
|
||
</div>
|
||
<div class="echats" v-loading="isLoading">
|
||
<myEcharts v-if="!isLoading" ref="totalBilirubinEcharts" id="totalBilirubinEcharts"
|
||
:dataX="chatData.totalBilirubin" :x-axis="chatData.age" :label="'总胆红素'" />
|
||
</div>
|
||
<div class="title">
|
||
<h2>直接胆红素趋势</h2>
|
||
</div>
|
||
<div class="echats" v-loading="isLoading">
|
||
<myEcharts v-if="!isLoading" ref="directBilirubinEcharts" id="directBilirubinEcharts"
|
||
:dataX="chatData.directBilirubin" :x-axis="chatData.age" :label="'直接胆红素'" />
|
||
</div>
|
||
<el-dialog v-model="dialogVisible" title="随访详情" width="850px">
|
||
<div style="padding-left: 20px;">
|
||
<el-descriptions title="随访信息" :column="3">
|
||
<el-descriptions-item label="随访名称：">{{ sfData.follow_name }}</el-descriptions-item>
|
||
<el-descriptions-item label="随访医院：">{{ sfData.follow_hospital }}</el-descriptions-item>
|
||
<el-descriptions-item label="随访日期：">{{ sfData.follow_date }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="生长指数" :column="3">
|
||
<el-descriptions-item label="身高(CM)：">{{ sfData.height }}</el-descriptions-item>
|
||
<el-descriptions-item label="体重(KG)：">{{ sfData.weight }}</el-descriptions-item>
|
||
<el-descriptions-item label="头围(CM)：">{{ sfData.head_circumference }}</el-descriptions-item>
|
||
<el-descriptions-item label="上臀围(CM)：">{{ sfData.high_hip }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="肝功能" :column="3">
|
||
<el-descriptions-item label="总胆红素(µmol/L)：">{{ sfData.total_bilirubin }}</el-descriptions-item>
|
||
<el-descriptions-item label="直接胆红素(µmol/L)：">{{ sfData.direct_bilirubin }}</el-descriptions-item>
|
||
<el-descriptions-item label="总胆汁酸(g/L)：">{{ sfData.total_bile_acid }}</el-descriptions-item>
|
||
<el-descriptions-item label="白蛋白（g/L）：">{{ sfData.albumin }}</el-descriptions-item>
|
||
<el-descriptions-item label="谷丙（U/L）：">{{ sfData.gu_bing }}</el-descriptions-item>
|
||
<el-descriptions-item label="谷草（U/L）：">{{ sfData.grain_grass }}</el-descriptions-item>
|
||
<el-descriptions-item label="GGT（U/L）：">{{ sfData.ggt }}</el-descriptions-item>
|
||
<el-descriptions-item label="ALP（U/L）：">{{ sfData.alp }}</el-descriptions-item>
|
||
<el-descriptions-item label=""></el-descriptions-item>
|
||
<el-descriptions-item label="报告照片：" width="100%">
|
||
<span v-if="!sfData.liver_function_image">无</span>
|
||
<div v-else style="display: inline-block;">
|
||
|
||
<el-image v-for="(url, index) in sfData.liver_function_image?.split(',')" :key="index"
|
||
:src="url" :initial-index="index"
|
||
:preview-src-list="sfData.liver_function_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px;" />
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="凝血功能" :column="3">
|
||
<el-descriptions-item label="CRP (mg/L)：">{{ sfData.crp }}</el-descriptions-item>
|
||
<el-descriptions-item label="DDR：">{{ sfData.ddr }}</el-descriptions-item>
|
||
<el-descriptions-item label="INR：">{{ sfData.inr }}</el-descriptions-item>
|
||
<el-descriptions-item label="PT (s)：">{{ sfData.pt }}</el-descriptions-item>
|
||
<el-descriptions-item label="PTA (%)：">{{ sfData.pta }}</el-descriptions-item>
|
||
<el-descriptions-item label="APTT (s)：">{{ sfData.aptt }}</el-descriptions-item>
|
||
<el-descriptions-item label="TT (s)：">{{ sfData.tt }}</el-descriptions-item>
|
||
<el-descriptions-item label="FIB (g/L)：">{{ sfData.fib }}</el-descriptions-item>
|
||
<el-descriptions-item label="NPDP(mg/L)：">{{ sfData.npdp }}</el-descriptions-item>
|
||
<el-descriptions-item label="MMP-7(ng/mL)：">{{ sfData.mmp_7 }}</el-descriptions-item>
|
||
<el-descriptions-item label=""></el-descriptions-item>
|
||
<el-descriptions-item label=""></el-descriptions-item>
|
||
<el-descriptions-item label="报告照片：">
|
||
<span v-if="!sfData.coagulation_function_image">无</span>
|
||
<div v-else>
|
||
|
||
<el-image v-for="(url, index) in sfData.coagulation_function_image?.split(',')" :key="index"
|
||
:src="url" :initial-index="index"
|
||
:preview-src-list="sfData.coagulation_function_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="血常规" :column="3">
|
||
<el-descriptions-item label="血小板（10^9/L)：">{{ sfData.platelets }}</el-descriptions-item>
|
||
<el-descriptions-item label="血红蛋白 (g/L)：">{{ sfData.hemoglobin }}</el-descriptions-item>
|
||
<el-descriptions-item label="白细胞 (10^9/L)：">{{ sfData.white_blood_cells }}</el-descriptions-item>
|
||
<el-descriptions-item label="红细胞 (10^9/L)：">{{ sfData.red_blood_cells }}</el-descriptions-item>
|
||
<el-descriptions-item label=""></el-descriptions-item>
|
||
<el-descriptions-item label=""></el-descriptions-item>
|
||
<el-descriptions-item label="报告照片：">
|
||
<span v-if="!sfData.blood_routine_image">无</span>
|
||
<div v-else>
|
||
|
||
<el-image v-for="(url, index) in sfData.blood_routine_image?.split(',')" :key="index"
|
||
:src="url" :initial-index="index"
|
||
:preview-src-list="sfData.blood_routine_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<el-descriptions title="B超" :column="3">
|
||
<el-descriptions-item label="肝肋下(mm)：">{{ sfData.under_the_liver_rib }}</el-descriptions-item>
|
||
<el-descriptions-item label="肝剑突下(mm)：">{{ sfData.under_the_xiphoid_liver }}</el-descriptions-item>
|
||
<el-descriptions-item label="脾肋下(mm)：">{{ sfData.spleen_rib_area }}</el-descriptions-item>
|
||
<el-descriptions-item label="门静脉主干内径(mm)：">{{ sfData.main_portal_vein }}</el-descriptions-item>
|
||
<el-descriptions-item label="肝回声：">{{ sfData.liver_echo }}</el-descriptions-item>
|
||
<el-descriptions-item label="胆囊大小 (mm)：">{{ sfData.gallbladder_size }}</el-descriptions-item>
|
||
<el-descriptions-item label="胆总管 (mm)：">{{ sfData.common_bile_duct }}</el-descriptions-item>
|
||
<el-descriptions-item label="纤维块大小：">{{ sfData.fiber_block_size }}</el-descriptions-item>
|
||
<el-descriptions-item label="门静脉流速：">{{ sfData.pvv }}</el-descriptions-item>
|
||
<el-descriptions-item label="肝弹性值：">{{ sfData.liver_elasticity_value }}</el-descriptions-item>
|
||
<el-descriptions-item label="有无腹水：">{{ sfData.is_have_ascites === 1 ? '是' :
|
||
'否' }}</el-descriptions-item>
|
||
<el-descriptions-item label="有无肝囊肿：">{{ sfData.is_have_cyst === 1 ? '是' : '否'
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="弹性成像最小值 (kPa)：">{{ sfData.elastography_median }}</el-descriptions-item>
|
||
<el-descriptions-item label="弹性成像最大值 (kPa)：">{{ sfData.elastography_maximum
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="弹性成像中位数 (kPa)：">{{ sfData.elastography_median }}</el-descriptions-item>
|
||
<el-descriptions-item label="报告照片：">
|
||
<span v-if="!sfData.b_mode_image">无</span>
|
||
<div v-else>
|
||
|
||
<el-image v-for="(url, index) in sfData.b_mode_image?.split(',')" :key="index" :src="url"
|
||
:initial-index="index" :preview-src-list="sfData.b_mode_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="营养指标" :column="3">
|
||
<el-descriptions-item label="25（OH）D3 (ng/ml)：">{{ sfData.oh_d3 }}</el-descriptions-item>
|
||
<el-descriptions-item label="25（OH）D2 (ng/ml)：">{{ sfData.oh_d2 }}</el-descriptions-item>
|
||
<el-descriptions-item label="25（OH）D (ng/ml)：">{{ sfData.oh_d }}</el-descriptions-item>
|
||
<el-descriptions-item label="维生素A (ng/ml)：">{{ sfData.vitamin_a }}</el-descriptions-item>
|
||
<el-descriptions-item label="维生素E (ng/ml)：">{{ sfData.vitamin_e }}</el-descriptions-item>
|
||
<el-descriptions-item label="维生素K (ng/ml)：">{{ sfData.vitamin_k }}</el-descriptions-item>
|
||
<el-descriptions-item label="报告照片：">
|
||
<span v-if="!sfData.nutritional_indicator_image">无</span>
|
||
<div v-else>
|
||
|
||
<el-image v-for="(url, index) in sfData.nutritional_indicator_image?.split(',')"
|
||
:key="index" :src="url" :initial-index="index"
|
||
:preview-src-list="sfData.nutritional_indicator_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="MDT电子病历：" :column="3">
|
||
<el-descriptions-item label="电子病历：">
|
||
<span v-if="!sfData.mdt_image">无</span>
|
||
<div v-else>
|
||
|
||
<el-image v-for="(url, index) in sfData.mdt_image?.split(',')" :key="index" :src="url"
|
||
:initial-index="index" :preview-src-list="sfData.mdt_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</div>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<!-- <el-descriptions title="检查报告" :column="1">
|
||
<el-descriptions-item label="B超报告：">
|
||
<span v-if="!sfData.b_mode_image">无</span>
|
||
<el-image v-else v-for="(url, index) in sfData.b_mode_image?.split(',')" :key="index" :src="url"
|
||
:preview-src-list="sfData.b_mode_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="血常规检查报告：">
|
||
<span v-if="!sfData.blood_routine_image">无</span>
|
||
<el-image v-else v-for="(url, index) in sfData.blood_routine_image?.split(',')" :key="index" :src="url"
|
||
:preview-src-list="sfData.blood_routine_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="凝血功能检查报告：">
|
||
<span v-if="!sfData.coagulation_function_image">无</span>
|
||
<el-image v-else v-for="(url, index) in sfData.coagulation_function_image?.split(',')" :key="index"
|
||
:src="url" :preview-src-list="sfData.coagulation_function_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="肝功能检查报告：">
|
||
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="营养指标检查报告：">
|
||
<span v-if="!sfData.nutritional_indicator_image">无</span>
|
||
<el-image v-else v-for="(url, index) in sfData.nutritional_indicator_image?.split(',')" :key="index"
|
||
:src="url" :preview-src-list="sfData.nutritional_indicator_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</el-descriptions-item>
|
||
|
||
</el-descriptions> -->
|
||
</div>
|
||
<template v-slot:footer>
|
||
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { exportUsersBasic, questionnaires, chat, questionnaire_info } from '@/api/user'
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import myEcharts from '@/components/myEcahts.vue'
|
||
import myEchartsSh from '@/components/myEcahtsSh.vue'
|
||
const route = useRoute()
|
||
const id = ref('')
|
||
const tableData = ref([])
|
||
const userInfo = ref({})
|
||
const isLoading = ref(true)
|
||
|
||
const chatData = ref({
|
||
height: [],
|
||
weight: [],
|
||
totalBilirubin: [],
|
||
directBilirubin: [],
|
||
age: [],
|
||
})
|
||
const getTableData = async () => {
|
||
try {
|
||
isLoading.value = true
|
||
const [basicRes, questionnairesRes, chatRes] = await Promise.all([
|
||
exportUsersBasic(id.value),
|
||
questionnaires(id.value),
|
||
chat(id.value)
|
||
])
|
||
|
||
userInfo.value = basicRes
|
||
tableData.value = questionnairesRes.list
|
||
|
||
chatData.value = {
|
||
height: [],
|
||
weight: [],
|
||
totalBilirubin: [],
|
||
directBilirubin: [],
|
||
age: []
|
||
}
|
||
|
||
chatRes.list.forEach(item => {
|
||
chatData.value.height.push(item.height)
|
||
chatData.value.weight.push(item.weight)
|
||
chatData.value.totalBilirubin.push(item.total_bilirubin)
|
||
chatData.value.directBilirubin.push(item.direct_bilirubin)
|
||
chatData.value.age.push(item.age)
|
||
})
|
||
} catch (error) {
|
||
console.error('Error fetching data:', error)
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
}
|
||
|
||
const dialogVisible = ref(false)
|
||
const sfData = ref({})
|
||
const handleCheck = async (row) => {
|
||
const res = await questionnaire_info({ questionnaire_id: row.id, patient_id: Number(id.value) })
|
||
sfData.value = res
|
||
dialogVisible.value = true
|
||
}
|
||
onMounted(() => {
|
||
id.value = route.query.id
|
||
getTableData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-detail {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.title {
|
||
color: var(--el-text-color-primary);
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-top: 30px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.echats {
|
||
height: 400px;
|
||
}
|
||
|
||
.el-image {
|
||
vertical-align: top;
|
||
}
|
||
</style> |