Project-Vital
/
VitalApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
							<html>
	<head>
		<meta charset="UTF-8" />

		<title>高血压患者随访服务记录表</title>
		<style type="text/css" media="all">
			* {
				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;
			}

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

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

			h3 {
				font-size: 24px;
			}
			.boxPosition {
				display: inline-block;
				float: inline-end;
			}
			.checkBox {
				display: flex;
				/* justify-content: end; */
			}
			.box {
				width: 14px;
				height: 14px;
				display: inline-block;
				border: 1px solid black;
				text-align: center;
				line-height: 14px;
				position: relative;
			}
			.box:not(:last-child) {
	            margin-right: 10px;
			}
			.box:not(:last-child)::after {
				content: "/";
				position: absolute;
				top: 50%;
				left: 90%;
				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 */
			}
		</style>
	</head>
	<body style="margin: 32px 10px">
		<div id="content">
			<!-- <div class="header">
				<span>档案号：</span>
				<div class="line"></div>
				<button type="button" class="btn hid">打印</button>
				<div>
					<button type="button" class="btn">导出</button>
					<button type="button" class="btn">作废</button>
				</div>
				<button type="button" class="btn hid">保存</button>
			</div> -->
			<div class="main">
				<h3 class="textAlign" style="font-weight: bold">
					高血压患者随访服务记录表
				</h3>
				<p>
					<span style="font-weight: bold"
						>姓名：<span id="patientName" style="font-weight: bold"
							></span
						></span
					>
				</p>
				<table style="width: 100%">
					<tbody>
						<tr>
							<td colspan="2" class="boldTd require">随访日期</td>
							<td colspan="2" class="boldTd">
								<span id="Follow_Time1"></span>
							</td>
							<td colspan="2" class="boldTd">
								<span id="Follow_Time2"></span>
							</td>
							<td colspan="2" class="boldTd">
								<span id="Follow_Time3"></span>
							</td>
							<td colspan="2" class="boldTd">
								<span id="Follow_Time4"></span>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd require">随访方式</td>
							<td colspan="2">
								<span>1 门诊 2 家庭 3 电话</span>
								<div class="boxPosition">
									<span id="Follow_Type1" class="box"></span>
								</div>
							</td>
							<td colspan="2">
								<span>1 门诊 2 家庭 3 电话</span>
								<div class="boxPosition">
									<span id="Follow_Type2" class="box"></span>
								</div>
							</td>
							<td colspan="2">
								<span>1 门诊 2 家庭 3 电话</span>
								<div class="boxPosition">
									<span id="Follow_Type3" class="box"></span>
								</div>
							</td>
							<td colspan="2">
								<span>1 门诊 2 家庭 3 电话</span>
								<div class="boxPosition">
									<span id="Follow_Type4" class="box"></span>
								</div>
							</td>
						</tr>
						<tr>
							<td rowspan="2" class="boldTd2 require">症 状</td>
							<td rowspan="2" class="boldTd require">
								1 无症状 <br />2 头痛头晕<br />3 恶心呕吐<br />4
								眼花耳鸣<br />5 呼吸困难<br />6 心悸胸闷<br />7
								鼻衄出血不止<br />8 四肢发麻<br />9 下肢水肿<br />10
								其他
							</td>
							<td colspan="2" >
								<div class="textRight">
								<div id="Symptom1" class="checkBox" data-param="4">
									<!-- 使用JavaScript生成10个方框 -->
								</div>
							</div>
							</td>
							<td colspan="2" >
								<div class="textRight">
								<div id="Symptom2" class="checkBox" data-param="4">
									<!-- 使用JavaScript生成10个方框 -->
								</div>
							</td>
							<td colspan="2">
								<div class="textRight">
								<div id="Symptom3" class="checkBox" data-param="4">
									<!-- 使用JavaScript生成10个方框 -->
								</div>
							</td>
							<td colspan="2">
								<div class="textRight">
								<div id="Symptom4" class="checkBox" data-param="4">
									<!-- 使用JavaScript生成10个方框 -->
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd3">
								其他：<span></span>
							</td>
							<td colspan="2" class="boldTd3">
								其他：<span></span>
							</td>
							<td colspan="2" class="boldTd3">
								其他：<span></span>
							</td>
							<td colspan="2" class="boldTd3">
								其他：<span></span>
							</td>
						</tr>


						<tr>
							<td rowspan="8" class="boldTd2 require">体征</td>
							<td class="boldTd">血压(mmHg)</td>
							<td colspan="2" id="Right1"><span></span></td>
							<td colspan="2" id="Right2"><span></span></td>
							<td colspan="2" id="Right3"><span></span></td>
							<td colspan="2" id="Right4"><span></span></td>
						</tr>
						<tr>
							<td class="boldTd require">体重（kg）</td>
							<td colspan="2" id="Weight1"></td>
							<td colspan="2" id="Weight2"></td>
							<td colspan="2" id="Weight3"></td>
							<td colspan="2" id="Weight4"></td>
						</tr>
						<tr>
							<td class="boldTd require">下次随访目标（kg）</td>
							<td colspan="2" id="Weight_Next1"></td>
							<td colspan="2" id="Weight_Next2"></td>
							<td colspan="2" id="Weight_Next3"></td>
							<td colspan="2" id="Weight_Next4"></td>
						</tr>
						<tr>
							<td class="boldTd require">身高（cm）</td>
							<td colspan="2" id="Height1"></td>
							<td colspan="2" id="Height2"></td>
							<td colspan="2" id="Height3"></td>
							<td colspan="2" id="Height4"></td>
						</tr>
						<tr>
							<td class="boldTd">体质指数（BMI）kg/m²</td>
							<td colspan="2" id="Bmi1"></td>
							<td colspan="2" id="Bmi2"></td>
							<td colspan="2" id="Bmi3"></td>
							<td colspan="2" id="Bmi4"></td>
						</tr>
						<tr>
							<td class="boldTd">下次随访目标(kg/m²)</td>
							<td colspan="2" id="Bmi_Next1"></td>
							<td colspan="2" id="Bmi_Next2"></td>
							<td colspan="2" id="Bmi_Next3"></td>
							<td colspan="2" id="Bmi_Next4"></td>
						</tr>
						<tr>
							<td class="boldTd require">
								心率<br />
								（次/分钟）
							</td>
							<td colspan="2" id="Heart_Rate1"></td>
							<td colspan="2" id="Heart_Rate2"></td>
							<td colspan="2" id="Heart_Rate3"></td>
							<td colspan="2" id="Heart_Rate4"></td>
						</tr>
						<tr>
							<td class="boldTd require">其他</td>
							<td colspan="2" id="Sign_Other1"></td>
							<td colspan="2" id="Sign_Other2"></td>
							<td colspan="2" id="Sign_Other3"></td>
							<td colspan="2" id="Sign_Other4"></td>
						</tr>
						<tr>
							<td rowspan="10" class="boldTd2 require">
								生活方式指导
							</td>
							<td class="boldTd">日吸烟量(支)</td>
							<td colspan="2" id="Smoking_Daily1"></td>
							<td colspan="2" id="Smoking_Daily2"></td>
							<td colspan="2" id="Smoking_Daily3"></td>
							<td colspan="2" id="Smoking_Daily4"></td>
						</tr>
						<tr>
							<td class="boldTd">下次随访目标(支)</td>
							<td colspan="2">
								<span id="Goal_Smoking1"></span>
							</td>
							<td colspan="2">
								<span id="Goal_Smoking2"></span>
							</td>
							<td colspan="2">
								<span id="Goal_Smoking3"></span>
							</td>
							<td colspan="2">
								<span id="Goal_Smoking4"></span>
							</td>
						</tr>
						<tr>
							<td class="boldTd require">日饮酒量(两)</td>
							<td colspan="2" id="Drinking_Daily1"></td>
							<td colspan="2" id="Drinking_Daily2"></td>
							<td colspan="2" id="Drinking_Daily3"></td>
							<td colspan="2" id="Drinking_Daily4"></td>
						</tr>
						<tr>
							<td class="boldTd require">下次随访目标(两)</td>
							<td colspan="2">
								<span id="Goal_Drinking1"></span>
							</td>
							<td colspan="2">
								<span id="Goal_Drinking2"></span>
							</td>
							<td colspan="2">
								<span id="Goal_Drinking3"></span>
							</td>
							<td colspan="2">
								<span id="Goal_Drinking4"></span>
							</td>
						</tr>
						<tr>
							<td class="boldTd require">运动</td>
							<td colspan="2">
								<span><span id="">1</span>次/周</span
								>&nbsp;&nbsp;&nbsp;&nbsp;<span
									><span id="">1</span>分钟/次</span
								>
							</td>
							<td colspan="2">
								<span> <span id="">1</span>次/周</span
								>&nbsp;&nbsp;&nbsp;&nbsp;<span
									><span id="">1</span>分钟/次</span
								>
							</td>
							<td colspan="2">
								<span><span id="">1</span>次/周</span
								>&nbsp;&nbsp;&nbsp;&nbsp;<span
									><span id="">1</span>分钟/次</span
								>
							</td>
							<td colspan="2">
								<span><span id="">1</span>次/周</span
								>&nbsp;&nbsp;&nbsp;&nbsp;<span
									><span id="">1</span>分钟/次</span
								>
							</td>
						</tr>
						<tr>
							<td class="boldTd require">下次随访目标</td>
							<td colspan="2">
								<span>5次/周</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
									>60分钟/次</span
								>
							</td>
							<td colspan="2">
								<span>5次/周</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
									>60分钟/次</span
								>
							</td>
							<td colspan="2">
								<span>5次/周</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
									>60分钟/次</span
								>
							</td>
							<td colspan="2">
								<span>5次/周</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
									>60分钟/次</span
								>
							</td>
						</tr>
						<tr>
							<td class="boldTd require">
								摄盐情况<br />（咸淡）
							</td>
							<td colspan="2" id="Salt_Intake1"></td>
							<td colspan="2" id="Salt_Intake2"></td>
							<td colspan="2" id="Salt_Intake3"></td>
							<td colspan="2" id="Salt_Intake4"></td>
						</tr>
						<tr>
							<td class="boldTd require">下次随访目标（咸淡）</td>
							<td colspan="2" id="Goal_Salt_Intake1"></td>
							<td colspan="2" id="Goal_Salt_Intake2"></td>
							<td colspan="2" id="Goal_Salt_Intake3"></td>
							<td colspan="2" id="Goal_Salt_Intake4"></td>
						</tr>
						<tr>
							<td class="boldTd require">心理调整</td>
							<td colspan="2" id="Psychol_Adjust1"></td>
							<td colspan="2" id="Psychol_Adjust2"></td>
							<td colspan="2" id="Psychol_Adjust3"></td>
							<td colspan="2" id="Psychol_Adjust4"></td>
						</tr>
						<tr>
							<td class="boldTd require">遵医行为</td>
							<td colspan="2" id="Compliance1"></td>
							<td colspan="2" id="Compliance2"></td>
							<td colspan="2" id="Compliance3"></td>
							<td colspan="2" id="Compliance4"></td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd require">
								辅助检查*
							</td>
							<td colspan="2" id="Auxiliary_Other1"></td>
							<td colspan="2" id="Auxiliary_Other2"></td>
							<td colspan="2" id="Auxiliary_Other3"></td>
							<td colspan="2" id="Auxiliary_Other4"></td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd require">
								服药依从性
							</td>
							<td colspan="2" id="Compliance_Drug1"></td>
							<td colspan="2" id="Compliance_Drug2"></td>
							<td colspan="2" id="Compliance_Drug3"></td>
							<td colspan="2" id="Compliance_Drug4"></td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd require">
								药物不良反应
							</td>
							<td colspan="2" id="Adverse1"></td>
							<td colspan="2" id="Adverse2"></td>
							<td colspan="2" id="Adverse3"></td>
							<td colspan="2" id="Adverse4"></td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd require">
								此次随访分类
							</td>
							<td colspan="2" id="Follow_Up_Classify1"></td>
							<td colspan="2" id="Follow_Up_Classify2"></td>
							<td colspan="2" id="Follow_Up_Classify3"></td>
							<td colspan="2" id="Follow_Up_Classify4"></td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd">药物名称</td>
							<td colspan="2" class="boldTd" id="Appraisal1"></td>
							<td colspan="2" class="boldTd" id="Appraisal2"></td>
							<td colspan="2" class="boldTd" id="Appraisal3"></td>
							<td colspan="2" class="boldTd" id="Appraisal4"></td>
						</tr>
						<tr>
							<td rowspan="2" class="boldTd2">转诊</td>
							<td class="boldTd require">原因</td>
							<td colspan="2" id="Referral_Hospital1"></td>
							<td colspan="2" id="Referral_Hospital2"></td>
							<td colspan="2" id="Referral_Hospital3"></td>
							<td colspan="2" id="Referral_Hospital4"></td>
						</tr>
						<tr>
							<td class="boldTd require">机构及科别</td>
							<td colspan="2" id="Referral_Hospital1"></td>
							<td colspan="2" id="Referral_Hospital2"></td>
							<td colspan="2" id="Referral_Hospital3"></td>
							<td colspan="2" id="Referral_Hospital4"></td>
						</tr>
						<tr>
							<td colspan="2" class="boldTd">下次随访日期</td>
							<td colspan="2" class="require">2019-07-06</td>
							<td colspan="2" class="require">2019-07-06</td>
							<td colspan="2" class="require">2019-07-06</td>
							<td colspan="2" class="require">2019-07-06</td>
						</tr>
						<!-- <tr>
							<td colspan="2" class="boldTd require">
								随访医生签名
							</td>
							<td colspan="2">
								<img
									alt=""
									class="sign-name"
									src="https://img.health.gagctv.com//open/file/download?data=yr2aRn1UUQ8kLh1v%2Fch92F3kevhJrvfSuUVW6DISwOO4WanynpnmOPyYIJYYSnfy"
								/>
							</td>
						</tr> -->
					</tbody>
				</table>
				<!-- <img
					src="https://img.health.gagctv.com//open/file/download?data=yr2aRn1UUQ8kLh1v%2Fch92AZEp9NRmllwWh5I52wQ9dDxSEhkCc5d3%2Fs4HYHRorMa"
				/>
				<img
					src="https://img.health.gagctv.com//open/file/download?data=yr2aRn1UUQ8kLh1v%2Fch92AZEp9NRmllw2iNBf94D%2FObVSj1lf6OtTpK0a7N8wta4"
				/> -->
			</div>
		</div>
		<script>
			const data = window.parent.tableData;
			for (let i in data) {
				console.log("%c Line:405 🍢 key", "color:#fca650", i);
				if (data[i]) {
					for (let j in data[i]) {
                        /// 这是表格的写法，可以再优化
						if (document.getElementById(j + `${parseInt(i) + 1}`)) {
							if(Array.isArray(data[i][j]
							)){
								const container = document.getElementById(j + `${parseInt(i) + 1}`);
								let length = 0;
								if(container.getAttribute('data-param')) {
									length = container.getAttribute('data-param') ;
								}
								// 生成10个方框，并填充值
								for (let m = 0; m <= length; m++) {
									const box = document.createElement("div");
									box.className = "box";
									if (data[i][j][m]) {
										box.innerText =
											data[i][j][m];
									}
									container.appendChild(box);
								}
							}else {
								document.getElementById(
									j + `${parseInt(i) + 1}`
								).innerHTML = data[parseInt(i)][j];
							}
						} else {
							// 元素不存在
							console.log(
								"未找到具有ID " +
									j +
									`${parseInt(i) + 1}` +
									" 的元素"
							);
						}
					}
				}

				// if (document.getElementById(key)) {
				// 	// 元素存在
				// 	document.getElementById(key).innerHTML =
				// 		window.parent.globalData.examData[key];
				// } else {
				// 	// 元素不存在
				// 	console.log("未找到具有ID " + key + " 的元素");
				// }
			}
		</script>
	</body>
</html>