患者检验检查增加

chenyc

2025-08-01 24ef032c4ef5dad3a4f4450810f054f8012bb93b

 src/views/report/item/index.vue

@@ -1,176 +1,139 @@
<template>
    <div class="reportItem">
        <van-nav-bar
            title=""
            left-text="返回"
            left-arrow
        />
        <div class="tou">
            <van-row>
                <van-col span="10">
                    <span class="lable">姓名：</span>
                    <span class="value">张三丰</span>
                </van-col>
                <van-col span="8">
                    <span class="lable">性别：</span>
                    <span class="value">男</span>
                </van-col>
                <van-col span="6">
                    <span class="lable">年龄：</span>
                    <span class="value">30</span>
                </van-col>
                <van-col span="10">
                    <span class="lable">科别：</span>
                    <span class="value">体检中心</span>
                </van-col>
                <van-col span="14">
                    <span class="lable">临床诊断:：</span>
                    <span class="value">职业健康查体</span>
                </van-col>
            </van-row>
        </div>
        <div class="listdiv">
            <div class="listrow">
                <van-row class="thclass">
                    <van-col span="12" style=" padding-left: 20px;">检验项目</van-col>
                    <van-col span="4">结果</van-col>
                    <van-col span="4">单位</van-col>
                    <van-col span="4">参考范围</van-col>
                </van-row>
                <van-row :class="{ 'tdclass': i % 2,'tdclassb': !(i % 2) }" v-for="i in 15" :key="i">
                    <van-col span="12" style=" padding-left: 20px;">嗜碱性粒细胞绝对值(BA#)</van-col>
                    <van-col span="4">0.1</van-col>
                    <van-col span="4">10∧9/L</van-col>
                    <van-col span="4">3.5-9.5</van-col>
                </van-row>
    <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 style="color: #f56c6c;">{{item.item_result_flag}}</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>
        </div>
        <div class="jiao">
            <van-row>
                <van-col span="12">
                    <span class="lable">送检时间：</span>
                    <span class="value">2022-09-27 16:20</span>
                </van-col>
                <van-col span="12">
                    <span class="lable">报告时间：</span>
                    <span class="value">2022-09-27 16:50</span>
                </van-col>
                <van-col span="12">
                    <span class="lable">检测医生：</span>
                    <span class="value">李四</span>
                </van-col>
                <van-col span="12">
                    <span class="lable">审核医生:</span>
                    <span class="value">王五</span>
                </van-col>
                <van-col span="24">
                    <span class="lable">备注：</span>
                    <span class="value">本报告仅对此次检验的样本负责</span>
                </van-col>
            </van-row>
        </div>
        </van-popup>
    </div>
</template>
<script lang="ts" setup>
    import {ref,reactive,watchEffect,watch} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter()
    const inputValue=ref('')
    const topath=(url:string)=>{
        console.log('sss')
        router.push(url)
    }
</script>
<style scoped lang="scss">
    .reportItem{
        background-color: #F6FAFF;
        padding: 0 0 10 0;
        .tou{
            padding-top: 20px;
            padding-left: 20px;
            height: 86px;
            box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
            border-radius: 8px;
            background: #FFFFFF;
            div {
                height: 30px;
                border-radius: 6px;
                line-height: 30px;
                .lable{
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .value{
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #AAAAAA;
                }
            }
        }
        .jiao{
            padding-top: 20px;
            padding-left: 20px;
            height: 96px;
            box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
            border-radius: 8px;
            background: #FFFFFF;
            div {
                height: 30px;
                border-radius: 6px;
                line-height: 30px;
                .lable{
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
                .value{
                    font-size: 13px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #AAAAAA;
                }
            }
        }
    }
    .listdiv{
        .listrow{
            margin-top: 10px;
            background: #FFFFFF;
            .thclass{
                // padding-left: 20px;
                height:40px;
                line-height: 40px;
                font-size: 13px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                // text-align: center;

            }
            .tdclass{
                // padding-left: 20px;
                height:30px;
                line-height: 30px;
                font-size: 13px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 400;
                background: #F0F6FF;
                color: #777777;
            }
            .tdclassb{
                // padding-left: 20px;
                height:30px;
                line-height: 30px;
                font-size: 13px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 400;
                background: #FFFFFF;
                color: #777777;
            }
        }
  <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
    }
</style>
    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>