245 lines
13 KiB
Vue
245 lines
13 KiB
Vue
<template>
|
||
<div class="user-detail">
|
||
<el-descriptions title="患者信息">
|
||
<el-descriptions-item label="姓名">{{ userInfo.username }}</el-descriptions-item>
|
||
<el-descriptions-item label="性别">{{ userInfo.sex === 1 ? '男' : '女' }}</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 === 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.growth_curve_type === 0" type="">未知</el-tag>
|
||
<el-tag v-if="userInfo.growth_curve_type === 1" type="warning">轻度偏高</el-tag>
|
||
<el-tag v-if="userInfo.growth_curve_type === 2" type="success">正常</el-tag>
|
||
<el-tag v-if="userInfo.growth_curve_type === 3" type="danger">重度偏高</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="下次随访时间">{{ userInfo.next_follow_date }} </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"
|
||
:legendData="['实际身高', '正常身高范围']"
|
||
:actual-height="chatData.height"
|
||
:normal-height-min="[70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81]"
|
||
:normal-height-max="[80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91]" :label="'身高'" />
|
||
</div>
|
||
<div class="title">
|
||
<h2>体重曲线</h2>
|
||
</div>
|
||
<div class="echats" v-loading="isLoading">
|
||
<myEchartsSh v-if="!isLoading" ref="weightEcharts" id="weightEcharts"
|
||
:legendData="['实际体重', '正常体重范围']"
|
||
:actual-height="chatData.weight"
|
||
:normal-height-min="[70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81]"
|
||
:normal-height-max="[80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91]" :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" :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" :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-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-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="谷丙（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="白蛋白（g/L）">{{ sfData.albumin }}</el-descriptions-item>
|
||
|
||
<el-descriptions-item label="白细胞 (10^9/L)">{{ sfData.white_blood_cells }}</el-descriptions-item>
|
||
<el-descriptions-item label="血红蛋白 (g/L)">{{ sfData.hemoglobin }}</el-descriptions-item>
|
||
<el-descriptions-item label="血小板（10^9/L)">{{ sfData.platelets }}</el-descriptions-item>
|
||
|
||
<el-descriptions-item label="凝血酶原时间（s）">{{ sfData.prothrombin_time }}</el-descriptions-item>
|
||
<el-descriptions-item label="活化的部分凝血酶时间（s）">{{ sfData.activated_partial_thrombin_time
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label="国际标准化比">{{ sfData.international_normalized_ratio
|
||
}}</el-descriptions-item>
|
||
|
||
<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.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="维生素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="25（OH）D3 (ng/ml)">{{ sfData.oh_d3 }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<el-descriptions title="检查报告" :column="1">
|
||
<el-descriptions-item label="B超报告">
|
||
<el-image 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="血常规检查报告">
|
||
<el-image 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="凝血功能检查报告">
|
||
<el-image 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-image v-for="(url, index) in sfData.liver_function_image?.split(',')" :key="index"
|
||
:src="url" :preview-src-list="sfData.liver_function_image?.split(',')"
|
||
style="width: 100px; height: 100px; margin-right: 10px" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="营养指标检查报告">
|
||
<el-image 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-item label="MDT电子病历">
|
||
<el-image v-for="(url, index) in sfData.mdt_image?.split(',')" :key="index" :src="url"
|
||
:preview-src-list="sfData.mdt_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: []
|
||
})
|
||
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: []
|
||
}
|
||
|
||
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)
|
||
})
|
||
} 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> |