电子病历编辑器源码（Springboot+原生HTML）

浅浅的花香味﹌ 2024-02-17 08:55 66阅读 0赞

## **一、系统简介** ##

本系统主要面向医院医生、护士，提供对住院病人的电子病历书写、保存、修改、打印等功能。本系统基于云端SaaS服务方式，通过浏览器方式访问和使用系统功能，提供电子病历在线制作、管理和使用的一体化电子病历解决方案，为医院的电子病历业务开展提供支撑。

![dd4b35af361e4764a6e55c8e2a6fdc9f.png][]

## **二、总体框架** ##

1、技术选型  
本系统采用前后端分离模式开发和部署。  
前端技术选型：原生HTML、JS、CSS，Jquery、BootStrap、layui、Swf插件、Clipboard剪切板、Echarts、PagedJS打印插件、Prince打印插件、Wkhtmltopdf打印插件等。  
后端技术选型：SpringBoot框架、Mybatis-Plus、WebSocket、Stomp、Vintage-Engine页面解析模板引擎、Thymeleaf页面解析模板引擎、Fileupload文件上传组件等。  
数据库：MySQL数据库。

![b1f2118ff3f143d09111aa51625a7cc2.png][]

2、框架结构图

3、系统优势

一体化电子病历系统基于云端SaaS服务的方式，采用B/S（Browser/Server）架构提供，使用用户通过浏览器即能访问，无需关注系统的部署、维护、升级等问题，系统充分考虑了模板化、配置化、扩展化的设计方法，覆盖了医疗机构电子病历模板制作到管理使用的的整个流程。除实现在线制作内容丰富、图文并茂、功能完善的电子病历模板外，还可按照医疗机构的特色，根据不同业务的需求，使用该系统定制个性化、实用化、特色化电子病历模板；该系统能对电子病历模板进行统一集中管理，通用的电子病历模板能直接提供给不同的医疗机构直接使用，避免重复制作；提供了功能齐备的控件元素，实现电子病历在业务使用中数据的自动获取功能，简化了人工的大量填报。

4、电子病历编辑器应用场景  
应用场景包括：电子病历书写、体温单录入、全平台信息采集、检验检查报告、不良事件上报等。  
此外，电子病历编辑器软件还适用于医生工作站的病历编辑、护士工作站的护理记录输入、PASC/LIS/RIS报告编辑打印、病案首页、出院小结、病程记录、手术记录、各种知情书、康复及精神学科用的量表、临床路径用表单界面等等。  
这些应用场景都涉及到了医疗文书编辑的需求，因此电子病历编辑器软件在这些场景中具有广泛的应用价值。  
5、汉密尔顿抑郁量表（HAMD）模板  
汉密尔顿抑郁量表（Hamilton Depression Scale, HAMD）是由Hamilton于1960年编制的一种量表，是临床上评定抑郁状态时应用最为普遍的量表。本量表有17项、21项和24项3种版本。

6、电子病历系统，是医学专用系统。医院通过电子病历以电子化方式记录患者就诊的信息，包括：首页、病程记录、检查检验结果、医嘱、手术记录、护理记录等等，其中既有结构化信息，也有非结构化的自由文本，还有图形图象信息。涉及病人信息的采集、存储、传输、质量控制、统计和利用。  
7、电子病历是信息化建设的重要组成部分，也是医疗质量管理的重要依据之一。完整、及时、高质量的电子病历不仅可以促进医疗质量管理精细化，更可为提高公共卫生质量提供重要参考依据。  
以下针对云HIS系统的电子病历子系统作简单介绍，电子病历系统采用前后端分离模式开发和部署。B/S版电子病历系统，支持电子病历四级，云HIS与电子病历系统均拥有自主知识产权。  
电子病历编辑器，简称EMRE（EMR Editor），是电子病历系统的核心关键基础技术。它在医疗信息技术（HIT）大市场中已经成为一个专业子市场。

![b9ab1dfb0adf48b2b5f843e6a165ac40.png][]

## **三、功能介绍：** ##

1、合并预览：  
该功能仅在住院病程中使用，目的是将某个患者的住院病程中所有的病历聚合在一起形成一张大的病历并能够打印，合并预览后的病历仅支持打印功能，不支持保存以及控件编辑功能。  
2、普通病历：  
在该模式下，可以对单个患者的病历数据进行新建、编辑、预览、保存，以及打印的操作，是医院比较常用和重要的功能模块，暂不支持在同一窗口下打开多张病历的相关操作。  
3、自定义模板：  
模板编辑：医疗机构涉及的病历模板均可以按需设计制作，可通过运维运营分系统模板管理子模块病历模板中的‘编辑’功能实现该操作。  
存为模板：医师将当前病历通过存为模板的方式设置为医师的个人病历模板，以便相同患者的同一病历后续能够得到复用。  
4、数据同步：  
针对同一个患者不同病历之间的数据共享而存在的，同步功能主要是针对病历中的6类控件（提纲元素、宏元素、日期元素、选择元素、单选元素、复选元素）数据进行同步。  
5、病历打印：  
常规打印、PDF打印。  
6、辅助输入：  
辅助输入提供当前日期、当前时间、医师签名等便捷操作。  
7、页面布局：  
调节纸张方向、大小；设置边距、打印方式。  
8、导出PDF：  
将当前任意病历（普通病历、自定义个人模板、合并预览、历史病历）直接导出成PDF下载到本地。

![ab9707b3c7c94049b1af82e4498d0f54.png][]

## **四、编辑器使用流程**   模板编辑与预览工具构成和使用 ##

模板编辑与预览界面从上至下依次是菜单栏，工具栏和内容编辑区，菜单包括文件、编辑、插入、表格、视图、工具、病历控件和页面布局，可以将该界面认为是一种在线的电子病历模板编辑器。

1.文件菜单  
文件菜单下包括文件管理和打开两类工具，主要实现病历文档的载入、保存和下载。  
●文件管理工具包括：  
■打开xml：打开通过该编辑器下载好的xml文件；  
■下载xml：将编辑好的病历文档以xml的格式保存为本地的xml文件。

●打开工具包括：  
■打开：打开原有病历文档，支持文档格式为.doc .docx；  
■保存：将编辑好的病历文档保存到数据库中。

2.编辑菜单  
编辑菜单提供历史记录、剪切板、字体和段落四类工具，对病历文档在编辑过程中遇到的与文档内容相关的字体、格式、样式等进行调整和优化。

●历史记录工具包括：  
■草稿箱：存放打开操作前的编辑文档；  
■撤销：撤销之前的操作；  
■恢复：恢复已撤销的操作。  
●剪切板工具包括：

■复制：将选中的内容复制；  
■剪切：将选中的内容剪切；  
■粘贴：将复制或剪切的内容粘贴到当前位置。  
●字体工具包括：  
■样式：更改选中文字的字体样式；  
■清除格式：清除选中文字的格式；  
■自动格式化：清除文字的段落格式；  
■格式刷：使用选中文字的格式并作用到下次选择的文字；  
■大小：改变选中文字的大小；  
■增大：选中文字放大一个等级；  
■减小：选中文字缩小一个等级；  
■上角标：将光标移至前一文字的右上角添加内容；  
■下角标：将光标移至前一文字的右下角添加内容；  
■加粗：将选中文字加粗显示；  
■倾斜：将选中文字倾斜显示；  
■分隔线：在当前光标下方添加一条整个页面长度的分隔线；  
■下划线：选中文字底部显示一条横线；  
■删除线：选中文字中部显示一条横线；  
■文字颜色：更改选中文字的颜色，点击图标旁倒三角选择颜色；  
■背景颜色：更改选中文字的背景颜色，点击图标旁倒三角选择颜色。  
●段落工具包括：  
■向左对齐：将选中的段落左对齐；  
■居中对齐：将选中的段落居中对齐；  
■向右对齐：将选中的段落右对齐；  
■两端对齐：将选中的段落两端对齐；  
■引用：将选中的段落左右均缩进居中；  
■增加缩进：将选中段落整体向右缩进；  
■减少缩进：将选中段落整体向左缩进；  
■项目符号：为选中段落添加空心圆/实心圆/实心方形符号；  
■有序编号：为选中段落添加阿拉伯/罗马/英文字母有序编号；  
■段前距：设置选中段落与前面段落的距离；  
■段后距：设置选中段落与前面段落的距离；  
■行高：设置段落中行的高度。

![e5a02765e2e8454c9244ba3ffd115373.png][]

3.插入菜单  
插入菜单提供分页符、字符、链接、图片、地图、代码、表格、公式和批注的插入工具，实现不同元素的插入功能。

●分页符工具：点击插入分页符号，分页符后的内容显示到下一页。  
●字符工具：插入特定字符。点击打开字符对话框，选择需要的字符（包括特殊字符、罗马字符、数学字符、日文字符、希腊字母、俄文字符、拼音字母、英语音标和其他），点击需要的字符将该字符插入到光标位置。  
●链接工具包括：  
■添加链接：为选中的文字添加链接信息。点击弹出添加链接对话框，点击对话框中【确认】按键后添加链接成功，链接文字显示蓝色并带下划线；  
■修改链接：为已添加链接的文字修改链接信息，点击后操作同添加链接；  
■取消链接：取消已添加链接文字的连接信息。

4.表格菜单

表格菜单提供表格、合并单元格、对齐方向和表格线样式工具，实现制作不同类型表格及表内元素排版功能。  
●表格工具包括：  
■插入表格：在内容编辑区光标位置插入指定行数和列数的表格；  
■删除表格：删除已经插入的表格；  
■插入行：在表格中插入一行，新行插入到光标所在行的上方；  
■插入列：在表格中插入一列，新列插入到光标所在列的左方；  
■删除行：删除光标所在的行；  
■删除列：删除光标所在的列。  
●合并单元格工具包括：  
■合并单元格：将选中的单元格（大于两个）合并；  
■向下合并单元格：将光标所在的单元格与下方的单元格合并；  
■向右合并单元格：将光标所在的单元格与右方的单元格合并；  
■拆分单元格：将光标所在的已经合并的单元格还原，行列均还原；  
■单元格拆分成列：将光标所在的已经合并的单元格按照列还原；  
■单元格拆分成行：将光标所在的已经合并的单元格按照行还原。  
●对齐方向工具包括：  
■顶端对齐：将单元格内元素在垂直方向与格子顶部平齐显示；  
■垂直居中：将单元格内元素在垂直方向与格子中间对齐显示；  
■底端对齐：将单元格内元素在垂直方向与格子底部平齐显示；  
■左对齐：将单元格内元素在水平方向与格子左边平齐显示；  
■居中：将单元格内元素在垂直方向与格子中间平齐显示；  
■右对齐：将单元格内元素在垂直方向与格子右边平齐显示。  
●表格线样式工具包括：  
■表格样式：设置表格线条显示样式；  
点击该图标，弹出下拉菜单，包含三个选项：隐藏表格线、设为实线和设为虚线，点击选项分别隐藏、实线显示和虚线显示表格线条；  
■下框线：将选中的单元格底边线实线化显示；  
■上框线：将选中的单元格顶边线实线化显示；  
■左框线：将选中的单元格左边线实线化显示；  
■右框线：将选中的单元格右边线实线化显示；

![6c09051865604774b8612b1ca2f4a418.png][]

5.视图菜单

视图菜单提供目录、批注、修订、预览文档工具，提供视图展示功能。

●目录工具：当内容编辑区内容较长时，可根据序号排布自动生成目录，点击显示目录图标将在光标所在位置显示目录。  
●批注工具：用以显示/隐藏插入的批注。  
●预览文档：预览编辑的病历文档。

6.工具菜单

工具菜单包括草稿箱、打印、搜索和字数统计工具，如所示，提供各种辅助功能。  
●打印工具包括：  
■普通打印：直接打印编辑好的病历文档；  
■高级打印：在普通打印的基础上增加续打的功能；

7.病历控件菜单

病历控件提供新增模板控件工具，提供制作病历所需的各类模板控件。

●新增控件工具包括：  
■提纲元素：为电子病历添加定义好的病历模块标签字段；  
■宏元素：为电子病历添加定义好的标签字段及对应的键值，该元素在业务系统可自动获取键值填充；  
■日期元素：为电子病历添加定义好的日期标签字段及对应的键值，该元素在业务系统可自动获取系统日期键值填充；操作方法与宏元素操作类同；  
■选择元素：为电子病历添加定义好的选择标签字段及对应的选项值，该元素在业务系统可自动获取对应选项以下拉菜单的方式选择；操作方法与宏元素操作类同；  
■单选元素：为电子病历添加定义好的选择标签字段及对应的选项值，该元素在业务系统可自动获取对应选项并在各选项前添加单选控件提供单项选择；操作方法与宏元素操作类同；  
■复选元素：为电子病历添加定义好的选择标签字段及对应的选项值，该元素在业务系统可自动获取对应选项并在各选项前添加多选控件提供多项选择；操作方法与宏元素操作类同。  
●自定义控件为用户自己定义控件名称和控件值，自定义保存后与预定义控件功能一致

8.页面布局菜单

●纸张选择：包括纸张方向和纸张大小两个选项。  
■纸张方向：可以选择纸张打印时为横向或者纵向。  
■纸张大小：可以选择常用纸张大小。  
●边距：调整打印时纸张页边距。  
■页边距：快速选择系统定义好的页边距。或者旁边输入框中自定义页边距。  
●打印：可以预览打印的效果

[dd4b35af361e4764a6e55c8e2a6fdc9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/e1af695e416b4ba1ba86e5ef003c591a.png
[b1f2118ff3f143d09111aa51625a7cc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/3a345741fc314798bb71544556a891ca.png
[b9ab1dfb0adf48b2b5f843e6a165ac40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/39d9fc7df6974d59b0c0de71e5b20c8e.png
[ab9707b3c7c94049b1af82e4498d0f54.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/ff648eea4ad64dcbb8c3a8b148235eab.png
[e5a02765e2e8454c9244ba3ffd115373.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/7ed2764720c14e08a9b6ab21ddaf8c8e.png
[6c09051865604774b8612b1ca2f4a418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d2666a32c61648e39ccd156b53b48812.png