vue 绘制体温单与三测单组件实现前端js打印

体温单体温单又称为三测单，是电子病历的一部分。主要用于记录患者的生命体征及有关情况，内容包括患者姓名、年龄、性别、科别、床号、入院日期、住院号、日期、住院天数、手术后天数、脉搏、呼吸、体温、血压、出入量、大便次数、体重、身高、页码等。一周（7天）一张，每天记录6次病人信息在线访问地址：https://2guliang.top/temperature组件使用vue 技术栈开发，使用d3进行图表渲染。

slate很强

7799人浏览 · 2021-04-22 17:28:36

slate很强 · 2021-04-22 17:28:36 发布

更新：代码开源 https://github.com/mydaoyuan/my-development

有帮助请帮忙点个 start 。企鹅：1534815114

新上麻醉单和患者时间轴在下面地址就可以看到。

------------------------------------------------------------

新的一个版本完全重写了体温单，完全使用svg绘制。访问地址：新版三测单

特点：

纯svg开发，兼容各类主流框架，如 react 、Vue、 angular、 jsp 、HTML等等
开箱即用，数据抽离，直接对接接口数据即可引入
支持打印，可以选pdf 或者图片下载
灵活二开，自定义字段配置化 ：直接修改配置即可进行自定义扩展字段，代码注释齐全
支持自定义尺寸。

更新线条================================================================

在线访问地址：三测单体温单体温图

本文介绍如何使用 vue 绘制体温单（又名三测单）

体温单

体温单又称为三测单，是电子病历的一部分。医院体温单绘制主要用于记录患者的生命体征及有关情况，内容包括患者姓名、年龄、性别、科别、床号、入院日期、住院号、日期、住院天数、手术后天数、脉搏、呼吸、体温、血压、出入量、大便次数、体重、身高、页码等。一周（7天）一张，每天记录6次病人信息。

组件使用vue 技术栈开发，使用d3进行图表渲染。

体温单数据结构

数据机构方面主要分为3大块。分别为患者信息数据、图表展示数据、每日数据展示。

患者信息

患者信息只有一份，所以使用简单的keyvalue形式存储即可，例如： {name:'患者名称’, hospital: '测试医院名称’}，在vue中获取数据进行渲染即可。

图表展示

图表数据存储了每一次记录的数据方便绘制图表，我们需要知道每个绘制点的坐标信息，坐标信息由X轴时间， Y轴数值构成，所以我们必须包含时间和数值两个字段，再加上一个类型字段，就可以把图表的所有数据塞入一个List中，一起渲染。

例如体温一周就是 7 * 6 = 42条数据。每条数据里面包含了日期、时间、类型、类型数值这4个值。

例如

{
    date: '2020-12-25',
    time: '03:00:00',
    code: ' 体温',
    value: '30'
}

每日数据

每日数据和图表数据类似，都是需要重复渲染的，所以也需要一个List进行保存，按照时间纬度区分。

例如：

{
    date: '2020-12-25',
    times: null,
    code:  '体重',
    value: ’86'
}

打印

打印功能实现利用window print原生 api实现。核心思想是采用一个 iframe 标签，动态渲染出需要打印的 DOM范围。

// 生成iframe代码
function generateHtmlCodeInfo(option) {
    option = option || {}
    var id = 'iframeId'
    var style = `
body {
overflow: hidden;
}
`
    const code =
        `
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
function removeIframe(id) {
var child = window.parent.document.getElementById(id)
child.parentElement.removeChild(child)
}
</script>
<script type="text/javascript">
var insertFunc = ${option.insertFunc} || function () {}
var events
window.addEventListener('beforeprint', function(event) {
console.log('beforeprint');
});
window.addEventListener('afterprint', (event) => {
console.log('afterprint');
// 清除iframe
removeIframe('${id}')
});
var reportViewer
function window_onload() {
printtable()
}

function printtable() {
setTimeout(() => {
printtable()
}, 10);
}
</script>
<style>
${style}
</style>
</head>
<body onload="window_onload()">
<div id="report_holder"></div>
</body>
</html>`

    return {
        id,
        code
    }
}

// 生成打印iframe
function htmlRuilangGenerateIframe(reportUrl, rowData, option) {
    var codeInfo = generateHtmlCodeInfo(reportUrl, rowData, option, keys)
    var iframe = document.createElement('iframe')
    iframe.setAttribute(
        'style',
        'position:absolute;width:0px;height:0px;border: 0;'
    )
    iframe.id = codeInfo.id
    document.body.appendChild(iframe)
    var ifrmaeDoc = iframe.contentWindow.document
    ifrmaeDoc.write(codeInfo.code)
    ifrmaeDoc.close()
}

需要注意打印完成后需要清理 iframe元素，及时清理不必要的内存，也可以使用单例模式，选择复用一个iframe做打印功能，本次采用了打印后清理的方式。

使用了vue router的同学也可以选择直接指定 iframe地址，指向需要打印的页面。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^