动态血氧的查看模版
This commit is contained in:
parent
713c9f5b71
commit
990dcf4fdf
@ -7,7 +7,7 @@
|
||||
<style>
|
||||
body { background: #f5f7fa; margin: 0; font-family: 'Microsoft YaHei', Arial, sans-serif; }
|
||||
.spo2-report-template { max-width: 900px; margin: 0 auto; padding: 0; }
|
||||
.report-page { background: white; margin: 0 auto 40px auto; max-width: 900px; min-height: 900px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); border-radius: 12px; padding: 48px 56px 32px 56px; page-break-after: always; }
|
||||
.report-page { background: white; margin: 0 auto 40px auto; max-width: 900px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); border-radius: 12px; padding: 48px 56px 32px 56px; page-break-after: always; display: flex; flex-direction: column; position: relative; padding-bottom: 60px; }
|
||||
.report-title { text-align: center; font-size: 28px; font-weight: bold; margin-bottom: 32px; }
|
||||
.report-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; font-size: 16px; margin-bottom: 32px; }
|
||||
.report-info-item { display: flex; }
|
||||
@ -27,6 +27,8 @@
|
||||
.diagnosis-content { margin: 48px 0 32px 0; padding: 32px; background: #f8f9fa; border-radius: 8px; min-height: 300px; }
|
||||
.diagnosis-text { font-size: 18px; white-space: pre-wrap; color: #303133; font-family: inherit; }
|
||||
.report-footer { display: flex; justify-content: space-between; margin-top: 80px; font-size: 16px; }
|
||||
.page-number { text-align: center; margin-top: auto; padding-top: 20px; font-size: 14px; color: #909399; position: absolute; left: 0; right: 0; bottom: 20px; background: white; z-index: 2; }
|
||||
.report-page { background: white; margin: 0 auto 40px auto; max-width: 900px; min-height: 900px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); border-radius: 12px; padding: 48px 56px 32px 56px; page-break-after: always; display: flex; flex-direction: column; }
|
||||
.pie-charts-group { display: flex; gap: 32px; justify-content: center; margin-top: 32px; }
|
||||
.pie-chart-block { display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 24px 16px; min-width: 260px; }
|
||||
.pie-chart-title { font-size: 18px; font-weight: bold; margin-bottom: 12px; }
|
||||
@ -45,10 +47,38 @@
|
||||
#print-button:hover { background-color: #337ecc; }
|
||||
#print-button svg { margin-right: 6px; }
|
||||
|
||||
@page {
|
||||
margin: 20mm 15mm 30mm 15mm;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { background: white; }
|
||||
.report-page { box-shadow: none; margin: 0; padding: 20px; page-break-after: always; }
|
||||
body { background: white; overflow: visible !important; height: auto !important; }
|
||||
html { overflow: visible !important; height: auto !important; }
|
||||
.report-page {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
page-break-after: always;
|
||||
position: relative;
|
||||
min-height: 700px;
|
||||
}
|
||||
#print-button, #loading-mask { display: none !important; }
|
||||
/* 打印时页码固定在页面底部 */
|
||||
.page-number {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 5mm !important;
|
||||
text-align: center !important;
|
||||
color: #606266 !important;
|
||||
font-size: 12px !important;
|
||||
background: white !important;
|
||||
z-index: 9999 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -142,6 +172,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="page-number">第 1 页</div>
|
||||
</div>
|
||||
<div class="report-page report-diagnosis">
|
||||
<h2 class="report-title">诊断结论</h2>
|
||||
@ -152,6 +183,7 @@
|
||||
<div>报告医生：________________</div>
|
||||
<div>报告日期：<span class="report-date">--</span></div>
|
||||
</div>
|
||||
<div class="page-number">第 2 页</div>
|
||||
</div>
|
||||
<div class="report-page report-pie-chart">
|
||||
<h2 class="report-title">血氧分布饼状图</h2>
|
||||
@ -198,6 +230,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-number">第 3 页</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
@ -500,9 +533,64 @@
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
// 打印时调整页码位置
|
||||
window.addEventListener('beforeprint', function() {
|
||||
const pageNumbers = document.querySelectorAll('.page-number');
|
||||
pageNumbers.forEach((pageNum, index) => {
|
||||
// 使用fixed定位确保页码始终在页面底部
|
||||
pageNum.style.position = 'fixed';
|
||||
pageNum.style.left = '0';
|
||||
pageNum.style.right = '0';
|
||||
pageNum.style.bottom = '5mm'; // 与@media print中的设置一致
|
||||
pageNum.style.textAlign = 'center';
|
||||
pageNum.style.color = '#606266';
|
||||
pageNum.style.fontSize = '12px';
|
||||
pageNum.style.background = 'white';
|
||||
pageNum.style.zIndex = '9999';
|
||||
pageNum.style.margin = '0';
|
||||
pageNum.style.padding = '0';
|
||||
});
|
||||
});
|
||||
|
||||
// 打印后恢复样式
|
||||
window.addEventListener('afterprint', function() {
|
||||
// 不重置页码样式，保持在底部显示
|
||||
// 在打印环境中，页码会保持在底部
|
||||
// 在非打印环境中，恢复原始样式
|
||||
if (!window.matchMedia('print').matches) {
|
||||
const pageNumbers = document.querySelectorAll('.page-number');
|
||||
pageNumbers.forEach((pageNum) => {
|
||||
pageNum.style.position = 'absolute';
|
||||
pageNum.style.left = '0';
|
||||
pageNum.style.right = '0';
|
||||
pageNum.style.bottom = '0';
|
||||
pageNum.style.textAlign = 'center';
|
||||
pageNum.style.color = '#909399';
|
||||
pageNum.style.fontSize = '14px';
|
||||
pageNum.style.background = 'white';
|
||||
pageNum.style.zIndex = '2';
|
||||
pageNum.style.margin = '0';
|
||||
pageNum.style.padding = '20px 0';
|
||||
});
|
||||
}
|
||||
});
|
||||
// 支持独立打开时自动填充测试数据
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
showLoading();
|
||||
|
||||
// 确保页码始终在正确位置
|
||||
const pageNumbers = document.querySelectorAll('.page-number');
|
||||
pageNumbers.forEach((pageNum) => {
|
||||
pageNum.style.position = 'absolute';
|
||||
pageNum.style.left = '0';
|
||||
pageNum.style.right = '0';
|
||||
pageNum.style.bottom = '20px';
|
||||
pageNum.style.textAlign = 'center';
|
||||
pageNum.style.width = '100%';
|
||||
pageNum.style.boxSizing = 'border-box';
|
||||
});
|
||||
|
||||
if (!window.opener && !window.parent) {
|
||||
setTimeout(() => {
|
||||
fillData({
|
||||
|
||||
@ -294,11 +294,12 @@
|
||||
<!-- 报告模版弹窗（iframe方式） -->
|
||||
<el-dialog
|
||||
v-model="iframeDialogVisible"
|
||||
title="血氧监测报告"
|
||||
title=""
|
||||
fullscreen
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="true"
|
||||
destroy-on-close
|
||||
class="spo2-report-dialog"
|
||||
>
|
||||
<iframe
|
||||
ref="reportIframe"
|
||||
@ -306,7 +307,7 @@
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
style="min-height: 100vh"
|
||||
style="width: 100%; height: 100vh; border: none; display: block"
|
||||
@load="onIframeLoad"
|
||||
></iframe>
|
||||
</el-dialog>
|
||||
@ -1004,3 +1005,29 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
:deep(.spo2-report-dialog .el-dialog__body) {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 只在弹窗全屏时生效，隐藏外层滚动条 */
|
||||
body,
|
||||
html {
|
||||
overflow: hidden !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
.spo2-report-dialog.el-dialog,
|
||||
.spo2-report-dialog .el-dialog__body {
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user