<template>
|
<div class="blood-test-report">
|
<van-popup v-model:show="showPopup" position="bottom" :style="{ height: '100%' }">
|
<van-nav-bar
|
title=""
|
left-text="返回"
|
left-arrow
|
@click-left="onClickLeft"
|
/>
|
|
<div class="report-container">
|
<div class="report-headerda">
|
<div class="report-header">
|
<div class="title">{{reportData.itemGroupName}}</div>
|
<div class="hospital"></div>
|
<img src="@/assets/xueye.png" alt="Blood Icon" class="blood-icon" />
|
</div>
|
<div class="report-details">
|
<div class="doctor">申请医生:</div>
|
<div class="date">报告时间：{{reportData.date}}</div>
|
</div>
|
</div>
|
<table class="report-table">
|
<thead>
|
<tr>
|
<th>检查项</th>
|
<th>结果</th>
|
<th>参考值/单位</th>
|
<!-- <th>趋势图</th> -->
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in reportData.itemGroupItems" :key="index">
|
<td>{{ item.item_name }}</td>
|
:'↓' <td>{{ item.item_result }} <b v-if="item.item_result_flag === 'g' || item.item_result_flag === 'd'" :style="{ color: item.item_result_flag === 'g' ? '#F56C6C' : '#409EFF' }">{{item.item_result_flag === 'g' ? '↑' : '↓'}}</b></td>
|
<td>{{ item.item_result_ref }}/{{item.item_result_unit}}</td>
|
<!-- <td><img :src="item.trendIcon" alt="Trend Icon" /></td> -->
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
// import listIoc from '@/assets/listIoc.png';
|
|
const showPopup = ref(false)
|
|
const reportData=ref({
|
date:'',
|
itemGroupName:'',
|
itemGroupItems:[]
|
})
|
const onClickLeft = () => {
|
showPopup.value = false
|
}
|
const showSet=(viveData)=>{
|
console.log(viveData)
|
reportData.value=Object.assign({},viveData)
|
showPopup.value=true
|
}
|
defineExpose ({
|
showSet
|
})
|
</script>
|
|
<style scoped>
|
.blood-test-report {
|
text-align: center;
|
background-color: #f0f4f8;
|
}
|
|
.report-container {
|
padding: 10pt;
|
background-color: #f0f4f8;
|
min-height: 100%;
|
}
|
|
.report-headerda {
|
border: 1px solid #ddd;
|
padding: 8px;
|
margin-bottom: 10px;
|
}
|
|
.report-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10px;
|
padding-bottom: 10px;
|
border-bottom: 1pt solid #707070;
|
}
|
|
.title {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
|
.hospital {
|
font-size: 14px;
|
color: #666;
|
}
|
|
.blood-icon {
|
width: 50px;
|
height: 50px;
|
}
|
|
.report-details {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
|
.doctor,
|
.date {
|
font-size: 14px;
|
color: #666;
|
}
|
|
.report-table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
.report-table th,
|
.report-table td {
|
border: 1px solid #ddd;
|
padding: 8px;
|
text-align: center;
|
}
|
|
.report-table th {
|
background-color: #e6f2ff;
|
}
|
</style>
|
