基于Vue.js的智能诊所网络应用前端的开发
摘 要
我国医疗体系存在诸多问题，智能自动化和计算机网络的快速发展为解决这些难题提供了有效的途径。而诊所的数量正在增加，通过分级诊断和治疗来分散大医院的病人数量。因此迫切需要提高初级诊所的能力，为此目的，为临床经理和医生开发了这种功能齐全、易于使用的工作台软件。本文讨论了web前端开发的经验，根据系统功能的需求，选择了轻量级框架Vue.js。强调了MVVM模式、组件化和单页支持的特点。通过实例说明了该实现方法，并给出了系统功能的一些测试结果。对智能医学的发展做了有益的尝试。
关键词：智能诊所，前端，Vue.js
- 介 绍
我国医疗体系存在低效、质量差、成本高、医生增长缓慢等诸多问题。造成这些问题的根源是：医疗资源短缺和发展不均衡；缺乏现代手段和分级医疗制度，医疗效率低；信息和知识隔离。智能自动化和计算机网络的快速发展，为解决这些难题提供了有效的途径。2017年国务院发布《新一代人工智能发展计划》，提出发展智能医学，建设安全便捷的智能社会。近年来，福州医院[1]总医院、内蒙古自治区人民医院[2]等大型医院启动了以电子病历为核心的智能数字医院建设。目前，一流医院信息化建设十分普遍，但中国是一个人口较大的国家，如果每个病人去大医院看病，就会出现“三长一短”的困境：注册等待时间长、排队等候时间长、查诊时间短，受到社会长期的广泛批评。为此，国家政策鼓励更多的基层诊所实现分级诊断和治疗，分散病人。然而，90%的初级诊所的基本信息信息仍然是空白的。初级诊所存在着环境拥挤、病历制度落后、专业水平低、医生人数差距等问题。因此，我们借鉴临床工作的经验和建议，引入了先进的国际概念和技术，包括开发智能临床软件的技术和在线教育。本文仅初步讨论了前端开发，分别介绍了系统需求、Vue.js框架特性、系统实现和部分效果。
- 系统需求
如图1所示、技术智能诊所软件是一种为大量注册诊所用户提供网络服务的智能信息。临床使用者的属性包括：临床医生（全科医生、护士、药剂师）、行政管理人员（库存管理员、财务管理员、行政专员）、和管理主管（诊所操作人员、诊所所有者）。工作平台的智能信息处理需要系统管理、电子病历、库存管理和财务管理四个功能模块。
图 1 基本功能草图
系统管理功能模块由具有诊所管理员权限的用户操作，支持“新增用户”、“新增诊所角色”和“设置权限”等功能。系统管理员是附属诊所与智能软件技术服务中心之间的桥梁，负责诊所内各类用户注册应用的检查、权限和文件管理。
电子病历功能模块由授权的临床医师用户操作，支持“健康病历”、“基本身体数据”、“新病历”、“旧病历”等功能。它充分体现了SOAP病历流程的先进概念。
库存管理功能模块由用户根据授权操作权限操作，支持“药品库”、“追逐记录”、“本地药房”、“库存项目”、“临床处方”等功能。
财务管理功能模块由用户根据授权运营权限运行，支持“定价”、“收入”、“支出”、“聚合”等功能。
除四个基本功能模块外，系统还提供两种增值服务：包含部分全科医生在线课程的在线继续教育服务，以及用户无需注册即可搜索和获取医疗知识的智能助理查询服务。
- Vue.js特性
根据系统要求，前端开发采用了轻量级、高效的前端集成方案Vue.js框架[3,4]。因此，后端采用了基于JavaScript语言的快速框架，使前端和后端开发可以分离。本文特别强调了Vue.js的以下三个特点。
-
- MVVM模式
MVVM，模型视图视图模型，是一种软件架构模式，它帮助将用户界面开发与后端逻辑开发分开。模型是在后端传输的数据，视图是指页面上显示的内容，视图模型是连接模型和视图的桥梁。通过视图与模型之间的数据绑定，将数据更改自动映射到视图更新，降低DOM操作，提高视图层与数据层之间的通信效率。
-
- 组件化
在使用Vue.js的前端开发中，一个页面是由组件组成的。每个组件都由模板、脚本和样式组成。模板使用HTML5来声明数据和DOM之间的映射关系。在脚本中，使用Java-脚本定义了所需的数据初始值、数据的计算属性和逻辑关系。在样式中，我们使用CSS3来修改元素的样式。在不同的页面中，如果我们需要使用相同的组件，我们可以轻松地导入它。组件特性在很大程度上减少了开发中的代码和文件，使文件结构更清晰，并便于代码的重用和维护。
-
- 单页
在过去，大多数传统的应用程序都是多页的应用程序。每个页面跳转都需要一个HTTP请求。当网络变慢时，就很容易被卡住。单个页面应用程序在切换页面时不会创建新的HTML请求。其原理是，当JS注意到URL更改时，它将动态切换页面。在Vue.js中，我们使用官方的插件Vue路由器在路径之间进行切换。
-
系统实现及部分结果
- 项目结构
该项目最初需要安装vue-cli脚手架，它提供了vue所需的大部分配置环境。图2显示了src文件夹，该文件夹中资产存储本地使用的图像，JSON数据文件，组件存储页面中使用的组件，混合组件存储多个组件共享的一些功能，页面存储所有显示页面，路由器存储视频路由器逻辑，存储vuex逻辑，样式存储由支持者共享的一些CSS文件，App.vue是页面输入文件的页面输入文件，main.js是程序输入文件，它初始化Vue实例并使用所需的插件加载各种通用组件。
图 2. 文件结构 图 3. 患者vuex模块正在存储中
-
- 实例
本节说明如何以电子病历中的患者信息组件为例，应用vuex来同步和有效地更新多个组件中的同一状态变量。Vuex是Vue的一种状态管理模式。Js的应用程序。它使用集中式存储来管理应用程序的所有组件的状态，以确保状态在可预测的[9]中发生变化。在vuex存储中有四个部分：状态、获取者、改变、操作。在本例中，将应用状态和获取器。驱动该应用程序的数据将按状态定义。每当状态中的变量更改时，重新计算计算属性，并触发相关的DOM。网格可以看作是计算属性，过滤和计数数据状态。例如，在图中3状态下的患者基础信息数组定义了数据状态，并在获取器中定义了患者，以过滤和计算该状态。
如图4和5所示，组件需要使用的状态及其计算属性可以通过vuex中的MapGetters函数从存储中的获取器进行映射。通过v模型，对数据状态和用户输入值进行双向绑定。
图 4.在EHR中的病人基本信息组件 图 5.在vital中的病人基本信息组件
该界面的效果如图6和7所示，当用户在EHR中输入患者信息时，生命信息中的患者信息将会相应更新。
图 6.健康状况文件中的患者信息 图 7.生命特征中的患者信息
一旦该系统正式发布，任何人都可以通过url访问它，点击页面标题上的“家庭医生在线继续教育”，进入在线继续教育功能的界面(图8.).我们计划为心血管疾病、儿科医学、女性健康、男性健康、老年健康等临床课程提供课程材料；非临床课程包括如何成为家庭医生、医疗实践咨询、患者健康管理和护理质量、如何建立家庭医生与患者之间的信任关系等。点击页面标题上的“智能决策支持”，任何人都可以搜索标准的临床路径、疾病信息、药物信息(图9.)。
图 8.在线继续教育页面 图 9.智能决策支持页面
点击页面标题上的“家庭医生工作平台”，进入智能诊所工作平台界面。软件后端服务器可以为许多诊所提供智能信息处理技术服务。
图 10.工作平台主页
注册后，用户可根据其角色输入“电子病历”、“库存管理”、“财务管理”和“系统管理”四个功能模块(图 10)。
图11为“电子病历”功能模块中“新病历”操作的部分测试界面。该系统严格采用美国临床药剂师协会推荐的SOAP病历书写格式。它标准有序地记录患者的所有必要信息。方便医疗专业人员收集患者的相关信息，推断患者存在的问题。S（主观资料）：主观资料资料，包括患者的主诉情况、病史、药物过敏史、药物不良反应史、既往病史等。O（目标）：客观数据，包括患者生命体征、临床生化试验值、影像学结果、血、尿、粪便培养结果、血药浓度监测值；A（评价）：药物治疗过程的临床诊断、分析和评价；P（方案）：治疗方案，包括选择具体药物名称、剂量、给药途径、时间间隔、疗程及药物指导的相关建议。
图 11.电子病历接口
图12显示了“库存管理”功能中药品、消耗品或其他项目采购记录的部分测试界面。
图 12.库存管理界面 图 13.财务管理界面
图13显示了“财务管理”功能中的“定价”和“聚合”操作的测试部分界面。
系统通过运行智能信息处理算法，实现不同功能模块间相关信息的有序传输，如临床医生开药时，库存中相关药物信息可自动跳出；库存管理人员进行定价和给药操作时，相关患者门诊处方信息会自动跳出；财务管理操作结果与电子病历和库存管理密切相关。
- 结论
本文介绍了CHAVE TECH智能门诊软件2.0版前端开发过程的一些经验和成果。由于Vue.js框架较轻，充分利用了MVVM模式、组件化和单页支持的特点，大大节省了开发成本，提高了效率。目前，临时家庭医生的离线团队(SLP)和在中国的几家诊所对CHAVE TECH智能诊所2.0软件进行了试用，效果很好。
IBM认为，智能医学的特点应包括互联、协作、预防、普及、创新、可靠性、控制不稳定性、安全和稳定性。今后，它将根据试验情况进行进一步优化，更充分地体现智能医疗的特点。
致谢
这项工作受到国家自然科学基金资助。61733017。感谢搭档王晓月参与了一些前端渲染的功能。刘晓先生领导项目团队，负责后端开发、前端和后端交互和测试。
参考文献
[1] Wang H, Chen J, Xian R (2010) Building intelligent digital hospital taking EMR as the core.China Digit Med 5(7):14–16 (in Chinese)
[2] He L (2013) Construction of digital hospital taking electronic medical re
剩余内容已隐藏，支付完成后下载完整资料
英语原文共 8 页，剩余内容已隐藏，支付完成后下载完整资料
资料编号：[596062]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
