Project-Vital
/
VitalWebManagement


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人基本信息表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        table {
            border-collapse: collapse;
            margin: 10px auto;
        }

        th,
        tr,
        td {
            border: 1px solid #000;
            border-collapse: collapse;
            padding: 6px 5px;
            page-break-inside: avoid;
        }

        h3 {
            font-size: 24px;
        }

        thead {
            border: none;
        }

        thead tr {
            border: none;
        }

        thead tr th {
            border: none;
            border-collapse: separate;
        }

        .textAlign,
        th {
            text-align: center;
        }

        .textRight {
            display: flex;
            justify-content: flex-end;
        }

        h3 {
            font-size: 24px;
        }

        .boxPosition {
            display: inline-flex;
            float: inline-end;
        }

        .checkBox {
            display: flex;
            /* justify-content: end; */
        }

        .box {
            width: 16px;
            height: 16px;
            display: inline-block;
            border: 1px solid black;
            text-align: center;
            line-height: 16px;
            margin-right: 15px;
            position: relative;
        }

        .box:not(:last-child)::after {
            content: "/";
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
            padding: 0 5px;
        }

        @page {
            margin-top: 1.4cm;
            /* 设置其他页的上边距为2cm */
            margin-bottom: 1.2cm;
            /* 设置其他页的下边距为2cm */
        }

        @page :first {
            margin-top: 0;
            margin-bottom: 10mm;
            /* 设置第一页的下边距为2cm */
        }

        input {
            border-bottom: 1px solid #000;
            border-top: 0px;
            border-left: 0px;
            border-right: 0px;
            outline: none;
            width: 80px;
            text-indent: 1em;
            color: #000;
        }

        .boxDiagnosisTime {
            width: 16px;
            height: 16px;
            display: inline-flex;
            border: 1px solid black;
            text-align: center;
            line-height: 16px;
            margin-right: 15px;
            position: relative;
        }

        .slash {
            display: inline;
        }
    </style>
</head>

<body>
    <div>
        <h3 class="textAlign" style="font-weight:bold;">个人基本信息表</h3>
        <p>
            <span style="font-weight: bold;">姓名：<span style="font-weight: bold;" id="patientName"></span></span>
        <div class="textRight">
            <span style="font-weight: bold;">编号：</span>
            <div id="tableNumber" class="checkBox" data-param="8">
            </div>
        </div>
        </p>
        <table>
            <tbody>
                <tr>
                    <td colspan="2" class="textAlign">性别</td>
                    <td colspan="3"><span>1 男 2 女 9 未说明的性别 0 未知的性别</span>
                        <div class="boxPosition">
                            <span id="patientGender" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                    <td class="textAlign" style="width: 80px;">出生日期</td>
                    <td class="textAlign" id="birthday"></td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">身份证号</td>
                    <td colspan="2" class="textAlign" id="cardNo"></td>
                    <td class="textAlign">工作单位</td>
                    <td colspan="2" class="textAlign" id="workUnit"></td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">本人电话</td>
                    <td class="textAlign" id="phone">15161972410</td>
                    <td class="textAlign">联系人姓名</td>
                    <td id="contactName" class="textAlign"></td>
                    <td class="textAlign">联系人电话</td>
                    <td id="contactPhone" class="textAlign"></td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">常住类型</td>
                    <td colspan="2"><span> 1户籍 2非户籍</span>
                        <div class="boxPosition">
                            <span id="permanentlyResideType" class="box">
                            </span>
                        </div>
                    </td>
                    <td class="textAlign">民族</td>
                    <td colspan="2"><span>01 汉族 99 少数民族<input id="nationality" type="text" disabled></span>
                        <div class="boxPosition">
                            <span id="nationalityBox" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                                <span>/</span>
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">血型</td>
                    <td colspan="5"><span> 1 A 型 2 B 型 3 O 型 4 AB 型 5 不详 / RH：1 阴性 2 阳性 3 不详</span>
                        <div class="boxPosition">
                            <span id="bloodType" class="box">
                            </span>
                            <span id="rh" class="box">
                            </span>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">文化程度</td>
                    <td colspan="5"><span> 1 研究生 2 大学本科 3 大学专科和专科学校 4 中等专业学校 5 技工学校 6 高中 7 初中
                            8 小学 9 文盲或半文盲 10 不详</span>
                        <div class="boxPosition">
                            <span id="educationLevel" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">职业</td>
                    <td colspan="5"><span>
                            0 国家机关、党群组织、企业、事业单位负责人 1 专业技术人员 2 办事人员和有关人员
                            3 商业、服务业人员 4 农、林、牧、渔、水利业生产人员 5 生产、运输设备操作人
                            员及有关人员 6军人 7不便分类的其他从业人员 8无职业
                        </span>
                        <div class="boxPosition">
                            <span id="career" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">婚姻状况</td>
                    <td colspan="5"><span>
                            1 未婚 2 已婚 3 丧偶 4 离婚 5 未说明的婚姻状况
                        </span>
                        <div class="boxPosition">
                            <span id="maritalStatus" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">医疗费用<br />支付方式</td>
                    <td colspan="5"><span>
                            1 城镇职工基本医疗保险 2 城镇居民基本医疗保险 3 新型农村合作医疗
                            4 贫困救助 5 商业医疗保险 6 全公费 7 全自费 8 其他<input id="providerPaymentsOther" type="text" disabled>
                        </span>

                        <div class="boxPosition">
                            <span id="providerPayments" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">药物过敏史</td>
                    <td colspan="5"><span>
                            1 无 2 青霉素 3 磺胺 4 链霉素 5 其他<input id="historyDrugAllergiesOther" type="text" disabled>
                        </span>
                        <div class="textRight">
                            <div id="historyDrugAllergies" class="checkBox" data-param="1">
                                <!-- 使用JavaScript生成10个方框 -->
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">暴露史</td>
                    <td colspan="5"><span> 1 无 2 化学品 3 毒物 4 射线</span>
                        <div class="textRight">
                            <div id="historyExposure" class="checkBox" data-param="1">
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="4" class="textAlign">既往史</td>
                    <td class="textAlign" style="width: 40px;">疾病</td>
                    <td colspan="5"><span> 1 无 2 高血压 3 糖尿病 4 冠心病 5 慢性阻塞性肺疾病 6 恶性肿瘤<input
                                id="historyPreviousDiseaseMalignancy" type="text" disabled> 7 脑卒中
                            8 严重精神障碍 9 结核病 10 肝炎 11 其他法定传染病 <br /> 12 职业病<input
                                id="historyPreviousDiseaseOccupationalDisease" type="text" disabled> 13 其他<input
                                id="historyPreviousDiseaseOther" type="text" disabled>
                            <br /><br />
                            <div style="white-space: nowrap;">
                                <div id="diseaseDuration1" class="boxDiagnosisTime">
                                </div> <span>
                                    确诊时间<span id="diseaseDuration1Year">&nbsp; &nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>年<span id="diseaseDuration1Month">&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>月
                                </span>
                                /&nbsp;<div id="diseaseDuration2" class="boxDiagnosisTime">
                                </div><span>
                                    确诊时间<span id="diseaseDuration2Year">&nbsp;&nbsp;&nbsp; &nbsp;
                                        &nbsp;&nbsp;</span>年<span id="diseaseDuration2Month">&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>月
                                </span>
                                /&nbsp;<div id="diseaseDuration3" class="boxDiagnosisTime">
                                </div><span>
                                    确诊时间<span id="diseaseDuration3Year"> &nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>年<span id="diseaseDuration3Month">&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>月
                                </span>
                                <br /><br />
                                <div id="diseaseDuration4" class="boxDiagnosisTime">
                                </div><span>
                                    确诊时间<span id="diseaseDuration4Year">&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                                    </span>年<span id="diseaseDuration4Month">&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>月
                                </span>
                                /&nbsp;<div id="diseaseDuration5" class="boxDiagnosisTime">
                                </div><span>
                                    确诊时间<span id="diseaseDuration5Year">&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
                                    </span>年<span id="diseaseDuration5Month">&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>月
                                </span>
                                /&nbsp;<div id="diseaseDuration6" class="boxDiagnosisTime">
                                </div><span>确诊时间<span id="diseaseDuration6Year"> &nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>年<span id="diseaseDuration6Month">&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;</span>月</span>
                            </div>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">手术</td>
                    <td colspan="5"><span>1 无 2 有：名称①<input id="operationOneName" type="text" disabled> 时间 <input
                                id="operationOneTime" type="text" disabled>
                            / 名称②<input id="operationTwoName" type="text" disabled> 时间 <input id="operationTwoTime"
                                type="text" disabled> </span>
                        <div class="boxPosition">
                            <span id="operation" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">外伤</td>
                    <td colspan="5"><span>1 无 2 有：名称①<input id="traumaOneName" type="text" disabled> 时间 <input
                                id="traumaOneTime" type="text" disabled>
                            / 名称②<input id="traumaTwoName" type="text" disabled> 时间 <input id="traumaTwoTime"
                                type="text" disabled> </span>
                        <div class="boxPosition">
                            <span id="trauma" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">输血</td>
                    <td colspan="5"><span>1 无 2 有：名称①<input id="transfusionOneName" type="text" disabled> 时间 <input
                                id="transfusionOneTime" type="text" disabled>
                            / 名称②<input id="transfusionTwoName" type="text" disabled> 时间 <input id="transfusionTwoTime"
                                type="text" disabled> </span>
                        <div class="boxPosition">
                            <span id="transfusion" class="box">
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" rowspan="3" class="textAlign">家族史</td>
                    <td class="textAlign">父亲</td>
                    <td colspan="2" style="white-space: nowrap;">
                        <div id="father" data-param="6" style="display: inline-flex;">
                        </div>
                        <input id="fatherOther" type="text" disabled style="display: inline-flex;">
                    </td>
                    <td class="textAlign">母亲</td>
                    <td style="white-space: nowrap;">
                        <div id="mother" class="checkBox" data-param="6" style="display: inline-flex;">
                        </div>
                        <input id="motherOther" type="text" disabled style="display: inline-flex;">
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">兄弟姐妹</td>
                    <td colspan="2" style="white-space: nowrap;">
                        <div id="sibling" data-param="6" class="checkBox" style="display: inline-flex;">
                        </div>
                        <input id="siblingOther" type="text" disabled style="display: inline-flex;">
                    </td>
                    <td class="textAlign">子女</td>
                    <td style="white-space: nowrap;">
                        <div id="children" class="checkBox" data-param="6" style="display: inline-flex;">
                        </div>
                        <input id="childrenOther" type="text" disabled style="display: inline-flex;">
                    </td>
                </tr>
                <tr>
                    <td colspan="5">1 无 2 高血压 3 糖尿病 4 冠心病 5 慢性阻塞性肺疾病 6 恶性肿瘤 7 脑卒中
                        8 严重精神障碍 9 结核病 10 肝炎 11 先天畸形<br /> 12 其他<input id="providerPaymentsOther" type="text" disabled>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">遗传病史</td>
                    <td colspan="5"><span>1 无 2 有：疾病名称<input id="historyGeneticName" type="text" disabled></span>
                        <div class="boxPosition">
                            <span id="historyGenetic" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="textAlign">残疾情况</td>
                    <td colspan="5"><span> 1 无残疾 2 视力残疾 3 听力残疾 4 言语残疾 5 肢体残疾
                            6 智力残疾 7 精神残疾 8 其他残疾<input id="disabilitySituationOther" type="text" disabled></span>
                        <div class="textRight">
                            <div id="disabilitySituation" class="checkBox" data-param="6">
                                <!-- 使用JavaScript生成10个方框 -->
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="5" colspan="2" class="textAlign">生活环境*</td>
                    <td class="textAlign">厨房排风设施</td>
                    <td colspan="4"><span>1 无 2 油烟机 3 换气扇 4 烟囱</span>
                        <div class="boxPosition">
                            <span id="kitchenExhaustFacilities" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">燃料类型</td>
                    <td colspan="4"><span>1 液化气 2 煤 3 天然气 4 沼气 5 柴火 6 其他<input id="fuelOther" type="text"
                                disabled></span>
                        <div class="boxPosition">
                            <span id="fuel" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">饮水</td>
                    <td colspan="4"><span>1 自来水 2 经净化过滤的水 3 井水 4 河湖水 5 塘水 6 其他<input id="drinkingWaterOther" type="text"
                                disabled></span>
                        <div class="boxPosition">
                            <span id="drinkingWater" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">厕所</td>
                    <td colspan="4"><span>1 卫生厕所 2 一格或二格粪池式 3 马桶 4 露天粪坑 5 简易棚厕</span>
                        <div class="boxPosition">
                            <span id="toilet" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="textAlign">禽畜栏</td>
                    <td colspan="4"><span>1 无 2 单设 3 室内 4 室外</span>
                        <div class="boxPosition">
                            <span id="animalPen" class="box">
                                <!-- 使用JavaScript生成10个方框 -->
                            </span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // // 获取容器元素
        document.getElementById("patientName").innerHTML =
            window.parent.globalData.patientInfo.patientName;
        document.getElementById("birthday").innerHTML =
            window.parent.globalData.patientInfo.birthday;
        document.getElementById("cardNo").innerHTML =
            window.parent.globalData.patientInfo.cardNo;

        document.getElementById("patientGender").innerHTML =
            window.parent.globalData.patientInfo.patientGender;
        if (window.parent.globalData.examData["operationOne"]) {
            var operationOneJson = JSON.parse(window.parent.globalData.examData["operationOne"]);
            document.getElementById("operationOneName").value =
                operationOneJson.name;
            document.getElementById("operationOneTime").value =
                operationOneJson.time;
        }
        if (window.parent.globalData.examData["operationTwo"]) {
            var operationOneJson = JSON.parse(window.parent.globalData.examData["operationTwo"]);
            document.getElementById("operationTwoName").value =
                operationOneJson.name;
            document.getElementById("operationTwoTime").value =
                operationOneJson.time;
        }
        if (window.parent.globalData.examData["traumaOne"]) {
            var operationOneJson = JSON.parse(window.parent.globalData.examData["traumaOne"]);
            document.getElementById("traumaOneName").value =
                operationOneJson.name;
            document.getElementById("traumaOneTime").value =
                operationOneJson.time;
        }
        if (window.parent.globalData.examData["traumaTwo"]) {
            var operationOneJson = JSON.parse(window.parent.globalData.examData["traumaTwo"]);
            document.getElementById("traumaTwoName").value =
                operationOneJson.name;
            document.getElementById("traumaTwoTime").value =
                operationOneJson.time;
        }
        if (window.parent.globalData.examData["transfusionOne"]) {
            var operationOneJson = JSON.parse(window.parent.globalData.examData["transfusionOne"]);
            document.getElementById("transfusionOneName").value =
                operationOneJson.name;
            document.getElementById("transfusionOneTime").value =
                operationOneJson.time;
        }
        if (window.parent.globalData.examData["transfusionTwo"]) {
            var operationOneJson = JSON.parse(window.parent.globalData.examData["transfusionTwo"]);
            document.getElementById("transfusionTwoName").value =
                operationOneJson.name;
            document.getElementById("transfusionTwoTime").value =
                operationOneJson.time;
        }
        //nationality
        if (window.parent.globalData.patientInfo.nationality) {
            if (window.parent.globalData.patientInfo.nationality == '汉族') {
                document.getElementById("nationalityBox").innerHTML = "01";
            }
            else {
                document.getElementById("nationalityBox").innerHTML = "99";
                document.getElementById("nationality").value =
                    window.parent.globalData.patientInfo.nationality;
            }
        }

        ///编号
        const container = document.getElementById("tableNumber");
        if (container) {
            let length = 0;
            if (container.getAttribute('data-param')) {
                length = container.getAttribute('data-param');
            }
            // 生成10个方框，并填充值
            for (let i = 0; i < length; i++) {
                const box = document.createElement("div");
                box.className = "box";
                box.innerText = " ";
                container.appendChild(box);
            }
        }


        if (window.parent.globalData.examData['diseaseDiagnosisTime']) {
            var diseaseDiagnosisTimeJson = JSON.parse(window.parent.globalData.examData['diseaseDiagnosisTime']);
            var index = 1;
            for (var key in diseaseDiagnosisTimeJson) {
                var value = diseaseDiagnosisTimeJson[key];
                var date = new Date(value);
                document.getElementById(`diseaseDuration${index}`).innerHTML = key;
                document.getElementById(`diseaseDuration${index}Year`).innerHTML = `  ${date.getFullYear()}  `;
                document.getElementById(`diseaseDuration${index}Month`).innerHTML = `  ${date.getMonth() + 1}  `;
                index++;
            }
        }

        for (let key in window.parent.globalData.examData) {
            if (
                Object.prototype.hasOwnProperty.call(
                    window.parent.globalData.examData,
                    key
                )
            ) {
                if (document.getElementById(key)) {
                    if (
                        Array.isArray(
                            window.parent.globalData.examData[key]
                        )
                    ) {
                        const arr = window.parent.globalData.examData[key];
                        const isObjectArray = arr.some(item => typeof item === 'object');
                        /// 判断是否为普通的多选框
                        if (!isObjectArray) {
                            const container = document.getElementById(key);
                            let length = 0;
                            if (container.getAttribute('data-param')) {
                                length = container.getAttribute('data-param');
                            }
                            // 生成10个方框，并填充值
                            for (let i = 0; i < length; i++) {
                                const box = document.createElement("div");
                                box.className = "box";
                                if (window.parent.globalData.examData[key][i]) {
                                    box.innerText =
                                        window.parent.globalData.examData[key][
                                        i
                                        ];
                                }
                                else {
                                    box.innerText = " ";
                                }
                                container.appendChild(box);
                            }
                        }
                    } else {
                        // 元素存在
                        var element = document.getElementById(key);
                        if (element.tagName === "INPUT") {
                            document.getElementById(key).value =
                                window.parent.globalData.examData[key];
                        }
                        else {
                            document.getElementById(key).innerHTML =
                                window.parent.globalData.examData[key];
                        }

                    }
                } else {
                    // 元素不存在
                    console.log("未找到具有ID " + key + " 的元素");
                }
            }
        }
    </script>
</body>

</html>