修改显示样式

This commit is contained in:
Euni4U 2025-03-21 14:07:36 +08:00
parent 6f871a315e
commit 421651b048
2 changed files with 151 additions and 13 deletions

View File

@ -943,7 +943,7 @@
</div>
</br>
<!-- 汇总 -->
<div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
<div class="report-item" id="summary-page-1" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span></span>
@ -957,8 +957,38 @@
<div class="notice-line"></div>
</div>
<div class="paragraph-group">
<p id="summary-year" class="summary-content">
<span class="year-value">
<p id="summary-content-1" class="summary-content">
<!-- 第一页汇总内容 -->
</p>
</div>
<div class="summary-tip">
<p id="summary-tip-1">温馨提示:本次体检未发现异常的部分,不代表完全没有潜在性疾病,如有疾病或身体不适,要立即就医。</p>
</div>
</div>
<div class="report-footer">
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">第3页</div>
</div>
<p> </p>
<!-- 汇总续页 -->
<div class="report-item" id="summary-page-2" style="width: 800px;height: 1123px;margin:0 auto;position: relative; display: none;">
<div class="report-title">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span></span>
<span>填充值</span>
</div>
</div>
<div class="summary-section">
<h2 class="summary-title">检查结果汇总</h2>
<div class="summary-notice">
<p class="notice-text">在本次体检的项目中,您有以下几方面的情况敬请注意:</p>
<div class="notice-line"></div>
</div>
<div class="paragraph-group">
<p id="summary-content-2" class="summary-content">
<!-- 第二页汇总内容 -->
</p>
</div>
<div class="summary-tip">
@ -969,7 +999,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">3</div>
<div class="page-number">4</div>
</div>
<p> </p>
<!-- 一般检查部分 -->
@ -1032,7 +1062,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">4</div>
<div class="page-number">5</div>
</div>
<!-- 超声检查报告 -->
@ -1070,7 +1100,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">5</div>
<div class="page-number">6</div>
</div>
<!-- 尿常规检查报告 -->
@ -1102,7 +1132,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">6</div>
<div class="page-number">7</div>
</div>
<!-- 生化检查报告 -->
@ -1134,7 +1164,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">7</div>
<div class="page-number">8</div>
</div>
<!-- 血常规检查报告 -->
@ -1166,7 +1196,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">8</div>
<div class="page-number">9</div>
</div>
<!-- 心电图检查报告 -->
@ -1192,7 +1222,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">9</div>
<div class="page-number">10</div>
</div>
<!-- 中医体质辨识 -->
<div class="report-item" style="width: 800px;height: 1123px;margin:0 auto;position: relative;">
@ -1216,7 +1246,7 @@
<p class="report-footer-text">定期体检,尊享健康</p>
</div>
<!-- 添加页码 -->
<div class="page-number">第10</div>
<div class="page-number">第11</div>
</div>
</div>
@ -1394,6 +1424,109 @@
});
}
});
// 更新后续页码
function updatePageNumbers() {
// 获取所有页码元素
const pageNumbers = document.querySelectorAll('.page-number');
const summaryPage2Visible = document.getElementById('summary-page-2').style.display !== 'none';
// 从第1页开始计数
let pageIndex = 1;
pageNumbers.forEach((element) => {
// 更新页码文本
element.textContent = `第${pageIndex}页`;
pageIndex++;
// 如果第二页汇总不显示,并且这是第四页的页码元素(即原本应该是汇总第二页),则跳过该元素
if (!summaryPage2Visible && element.closest('#summary-page-2')) {
// 不增加pageIndex因为这一页不会显示
pageIndex--;
}
});
}
// 处理汇总内容分页修改
function handleSummaryPagination(summaryText) {
if (!summaryText || summaryText === '--') {
// 如果没有汇总内容,隐藏第二页
document.getElementById('summary-page-2').style.display = 'none';
document.getElementById('summary-content-1').textContent = '--';
document.getElementById('summary-tip-1').style.display = '';
// 更新页码
updatePageNumbers();
return;
}
// 创建临时元素测量内容高度
const testElement = document.createElement('div');
testElement.className = 'summary-content';
testElement.style.position = 'absolute';
testElement.style.visibility = 'hidden';
testElement.style.width = document.getElementById('summary-content-1').offsetWidth + 'px';
testElement.textContent = summaryText;
document.body.appendChild(testElement);
// 获取第一页汇总内容区域的可用高度 (调整这个值根据实际布局)
const availableHeight = 800; // 大约可用高度,根据实际情况调整
if (testElement.offsetHeight <= availableHeight) {
// 内容不超过一页,隐藏第二页
document.getElementById('summary-content-1').textContent = summaryText;
document.getElementById('summary-page-2').style.display = 'none';
document.getElementById('summary-tip-1').style.display = '';
// 更新页码
updatePageNumbers();
} else {
// 内容超过一页,需要分割
// 计算每个字符占用的平均高度
const avgCharHeight = testElement.offsetHeight / summaryText.length;
// 计算第一页可容纳的字符数
const firstPageChars = Math.floor(availableHeight / avgCharHeight);
// 分割文本
let firstPageText = summaryText.substring(0, firstPageChars);
let secondPageText = summaryText.substring(firstPageChars);
// 尝试在更合适的位置分割,如句号或逗号
const breakPoints = ['.', '。', '\n'];
for (let i = 30; i > 0; i--) {
const checkPos = firstPageChars - i;
if (checkPos <= 0) continue;
const char = summaryText.charAt(checkPos);
if (breakPoints.includes(char)) {
firstPageText = summaryText.substring(0, checkPos + 1);
secondPageText = summaryText.substring(checkPos + 1);
break;
}
}
// 更新内容并显示第二页
document.getElementById('summary-content-1').textContent = firstPageText;
document.getElementById('summary-content-2').textContent = secondPageText;
document.getElementById('summary-page-2').style.display = 'block';
document.getElementById('summary-tip-1').style.display = 'none';
// 更新页码
updatePageNumbers();
}
// 移除测试元素
document.body.removeChild(testElement);
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
// 现有代码...
// 等待数据填充后处理汇总分页
setTimeout(() => {
const summaryText = document.getElementById('summary-content-1').textContent;
handleSummaryPagination(summaryText);
}, 2000);
});
</script>
</body>

View File

@ -281,9 +281,14 @@ const handleIframeLoad = async () => {
}
//
const summaryElement = doc.getElementById('summary-year')
const summaryElement = doc.getElementById('summary-content-1')
if (summaryElement) {
summaryElement.textContent = reportData.summaryResult || '--'
//
if (iframe?.contentWindow && 'handleSummaryPagination' in iframe.contentWindow) {
(iframe.contentWindow as any).handleSummaryPagination(reportData.summaryResult || '--');
}
}