CN115691772A - 运营可视化系统及相应计算机设备和存储介质 - Google Patents

Abstract

本申请公开了运营可视化系统及相应计算机设备和存储介质，其中所述系统包括可视化编辑器，所述可视化编辑器用于编辑查看单位运营情况的用户界面并用于：响应于新增用户界面设计，加载预先设置的基础组件、业务组件和/或数据源组件；响应于拖拽一基础组件或业务组件，在编辑区域创建相应基础组件或业务组件；调整所创建的基础组件或业务组件的属性；响应于拖拽数据源组件到所创建的基础组件或业务组件上，将数据源组件与相应基础组件或业务组件绑定；将创建的基础组件和/或业务组件及其相应属性和布局、绑定的数据源组件及其属性序列化为用户界面描述性文件并保存。本发明系统使用过程简单、对计算机专业知识要求低、适用范围广。

Description

运营可视化系统及相应计算机设备和存储介质

技术领域

本申请涉及电数字数据处理领域，尤其涉及运营可视化系统及相应计算机设备和存储介质。

背景技术

为了能够进行精细化的医院运营管理，必须对医院运营过程进行直观准确的展示，例如将人员、材料、设备、流程等运行情况进行直观的呈现，为进一步的预判未来发展形势提供服务。目前大部分医院采用了由不同厂家研发的异构软硬件系统，再结合医疗活动自身的业务复杂度，从而导致医疗数据表现出数据量大、维度高、存储格式繁杂等特点。单独查看任何一方的数据均无法直观地掌握全局的情况以及数据之间的关系。

做可视化的系统通常有以下3个痛点：

-通常是以项目为单位，根据需求方的业务需求与设计需求进行针对性定制开发。后台工程师对医院中运行的管理系统逐个编写SQL脚本提取数据，由前端工程师根据UI设计完成前端页面的开发，同时根据产品需求接入业务数据。这样做的问题在于一个项目的开发涉及到四个不同的角色，角色之间由于知识背景的不同，对于需求的理解不同，可能在沟通中存在理解偏差，导致研发的实际产出与客户原始需求不符；

-需要适配多个平台，在数据的呈现上目前主流的平台包括PC电脑、iOS、Android，前端工程师还要再对不同的展示平台做定制的独立开发；

-开发的技术门槛较高，且呈现形式有着较高的同质性。如，需要多种常见的统计图表、需要导入BIM模型展示设备分布情况、需要常规文字性内容展示等。

发明内容

本发明提供一种运营可视化系统及相应计算机设备和存储介质，其解决了现有可视化系统使用过程复杂、对计算机专业知识要求高、适用范围窄而无法适应医院运营管理的现实需要的问题。

在本发明的第一方面，提供一种运营可视化系统，所述系统包括可视化编辑器，所述可视化编辑器用于编辑查看单位运营情况的用户界面并包括：

加载模块，用于响应于新增用户界面设计，加载预先设置的基础组件、业务组件和/或数据源组件，其中每一基础组件对应于完成相应功能的代码模块，每一业务组件由两个以上基础组件形成，数据源组件用于取回相应的数据；

创建模块，用于响应于拖拽一基础组件或业务组件，在编辑区域创建相应基础组件或业务组件；

属性控制面板，用于调整所创建的基础组件或业务组件的属性；

绑定模块，用于响应于拖拽数据源组件到所创建的基础组件或业务组件上，将数据源组件与相应基础组件或业务组件绑定，其中所述属性控制面板还用于选取数据源中字段并设置与相应基础组件或业务组件中属性的对应关系；

存储模块，用于将创建的基础组件和/或业务组件及其相应属性和布局、绑定的数据源组件及其属性序列化为用户界面描述性文件并保存。

在本发明的第二方面，提供一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现根据本发明的第一方面的系统的功能。

根据本发明的第三方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据本发明的第一方面的系统的功能。

按照本发明，通过包括可视化编辑器，可视化编辑器用于：响应于新增用户界面设计，加载预先设置的基础组件；响应于拖拽一基础组件或业务组件，在编辑区域创建相应基础组件或业务组件；调整所创建的基础组件或业务组件的属性；响应于拖拽数据源组件到所创建的基础组件或业务组件上，将数据源组件与相应基础组件或业务组件绑定；将创建的基础组件和/或业务组件及其相应属性和布局、绑定的数据源组件及其属性序列化为用户界面描述性文件并保存，以拖拽与配置属性的方式取代传统的代码编写方式，使得业务人员以在可视化界面拖拽的形式即可完成一些需要专业技术人员定制开发的展示效果与操作交互，降低了制作/定制可视化系统的门槛，提升了效率，并使得可视化系统能很好地适应不同医院的运营管理需要。

结合附图阅读本发明实施方式的详细描述后，本发明的其它特点和优点将变得更加清楚。

附图说明

图1为根据本发明系统的一实施例的框图。

为清晰起见，这些附图均为示意性及简化的图，它们只给出了对于理解本发明所必要的细节，而省略其他细节。

具体实施方式

下面参照附图对本发明的实施方式和实施例进行详细说明。

通过下面给出的详细描述，本发明的适用范围将显而易见。然而，应当理解，在详细描述和具体例子表明本发明优选实施例的同时，它们仅为说明目的给出。

图1示出了根据本发明的运营可视化系统的一优选实施例的框图。该运营可视化系统包括数据采集处理模块100、可视化编辑器200和渲染模块300。

数据采集处理模块100连接医院科室管理系统，包含HIS、ERP、LIS、EMR、PACS等，采集的数据包含关系型数据库、大数据平台、NoSQL数据库、EXCEL文件、JSON文件、CSV文件、RestAPI数据源、WebSocket数据源。数据采集处理模块100对采集的各种不同数据进行有效性的清理和结构变换，使之成为一套有效且结构一致的数据。数据采集处理模块100可向可视化编辑器200和/或渲染模块300提供数据。

数据采集是可视化的第一步，数据采集的方法和质量，很大程度上就决定了数据可视化的最终效果。数据处理是进行数据可视化的前提条件，包括数据清洗、数据变换两个过程。一方面，通过前期数据采集得到的数据，不可避免地含有噪声和误差，数据质量较低；另一方面，数据的特征、模式往往隐藏在海量的数据中，需要进一步的数据抽象才能提取出来。常见的数据质量问题包括：

-数据收集错误，遗漏了数据对象，或者包含了本不应包含的其他数据对象；

-数据中的离群点，即不同于数据集中其他大部分数据对象特征的数据对象；

-存在遗漏值，数据对象的一个或多个属性值缺失，导致数据收集不全；

-数据不一致，收集到的数据明显不合常理，或者多个属性值之间互相矛盾。例如，体重是负数，或者所填的邮政编码和城市之间并没有对应关系；

-重复值的存在，数据集中包含完全重复或几乎重复的数据。

由于以上问题的存在，直接拿采集的数据可视化，得出的结论往往会误导用户做出错误的决策。因此，对采集到的原始数据进行数据清洗和变化，是数据可视化流程中不可缺少的一环。

数据可视化的显示空间通常是二维的，比如电脑屏幕、大屏显示器等。3D图形绘制技术解决了在二维平面显示三维物体的问题。但在大数据时代，所采集到的数据通常具有4V特性：Volume(大量)、Variety(多样)、Velocity(高速)、Value(价值)。如何从高维、海量、多样化的数据中，挖掘有价值的信息来支持决策，除了需要对数据进行清洗、去除噪声之外，还需要依据业务目的对数据进行二次变换处理。常用的数据变换处理方法包括降维、数据聚类和切分、抽样等统计学和机器学习中的方法。由于数据采集和处理并非本发明的重点，在此不对具体的数据采集处理方案进行描述。

可视化编辑器200用于编辑查看单位运营情况的用户界面，采用拖拽的操作方式，进行可视化界面的设计。编辑器可提供预先设置的最细粒度"积木"的基础组件和数据源组件，基础组件是通用且可组合可联动的组件，每一基础组件对应于完成相应功能的代码模块，数据源组件用于取回相应的数据。编辑器还可提供业务组件，业务组件通常是与某个具体的业务流程展示或某个具体的医疗装备相关，每一业务组件根据实际使用场景用两个以上基础组件组合形成并绑定数据源。

基础组件例如可包括：文本、时间、通知、内嵌网页、轮播、视频、直播、按钮、图表、修饰、地图、3D交互等基础组件。基础组件可根据需要预先设置。示例性的基础组件所实现的功能及可配置属性如下表所示：

业务组件例如可包括：监控、设备统计、告警、人员分析、能耗、环境检测、设备控制等业务组件。示例性的业务组件所实现的功能、组成、可配置属性及基础组件之间的关系如下表所示：

数据源组件的可配置属性包括名称、类型等。类型包括静态数据、接口数据、地理信息、关系数据库、非关系数据库、外部平台等。静态数据例如为CSV、JSON、EXCEL等，接口数据类型例如可配置接口地址、请求参数、鉴权信息等，地理信息类型例如可配置经纬度坐标信息，关系数据库类型例如可配置数据库类型、服务地址、鉴权信息、SQL脚本，非关系数据库类型例如可配置数据库类型、服务地址、鉴权信息、数据集合，外部平台类型例如可配置服务地址、鉴权信息、对接参数。

加载模块202用于响应于新增用户界面设计，加载预先设置的基础组件、业务组件和数据源组件，供用户进行选择、拖拽。

创建模块204用于响应于拖拽一基础组件或业务组件，在编辑区域创建相应基础组件或业务组件。编辑区域的任何位置和功能都能由组件替代。创建组件时，需要获取对应的组件类型，比如图表、3D交互组件，所以需要一个组件的类型映射表，根据组件的Type获取对应的类型，创建实例。关于组件的布局能力，布局功能抽到容器里，所以组件在创建时会包裹对应的容器，组件的定位由容器负责，拖拽过程的位置检测由容器来实现，通过鼠标位置确定组件的安放位置。可捕获click hover等鼠标事件，由于组件不一定将回调透传，可通过ReactDOM.findDOMNode拿到组件的dom节点直接监听。不同的容器提供不同的功能。不对组件进行dom结构的包装，以适应任何平台。

属性控制面板206用于调整所创建的基础组件或业务组件的属性。例如，数据表格组件(图表组件的一种)与科室数据绑定，在数据表格组件中可对其展示的数据列属性进行设置，比如对于绩效场景，可设置其展示的属性为科室名称、提成金额、评分。在图表组件与人员和业绩数据绑定时，可设置图表组件的展示属性为表现形式为柱状图，排列为纵向排列，Y轴数据为姓名，X轴数据为业绩，排序方式为逆序，排序字段为业绩，等等。

绑定模块208用于响应于拖拽数据源组件到所创建的基础组件或业务组件上，将数据源组件与相应基础组件或业务组件绑定，在该情形下，属性控制面板还用于选取数据源中字段并设置与相应基础组件或业务组件中属性的对应关系。基础组件或业务组件记录数据源组件的ID(一个数据源组件可被多个基础组件或业务组件引用)，通过ID可查到对应的数据源组件，根据基础或业务组件的字段配置去数据源组件中提取数据，将提取的数据更新到基础或业务组件本身的属性上，一旦属性发生变化，重新计算并渲染新的界面。多个基础组件绑定同一个数据源时，基础组件控制并监听数据源，数据发生变化时基础组件也对应作出响应与变化，数据源可看作基础组件之间的纽带。

上述创建模块204、属性控制面板206和绑定模块208的工作可根据需要重复进行，即在进行完一组件的创建、属性调整、数据源绑定之后，继续进行下一组件的创建、属性调整、数据源绑定，直到整体设计完成为止。

存储模块210用于将所有创建的基础组件和/或业务组件及其相应属性和布局、绑定的数据源组件及其属性序列化为用户界面描述性文件并保存。序列化是将可视化编辑器的状态信息(创建的基础组件和/或业务组件及其相应属性和布局、绑定的数据源组件及其属性)转换为可以存储与传输的形式的过程，首先取得编辑器内所有组件的状态，然后按照添加时间排序，组成数组，之后调用系统函数将数组转化为JSON数据格式的用户界面描述性文件，该文件的示例性的一段如下所示：

{"ROOT":{"type":{"resolvedName":"Container"},"isCanvas":true,"props":{},"displayName":"Container","custom":{},"hidden":false,"nodes":["Ke9v6jFxpD"],"linkedNodes":{}},"Ke9v6jFxpD":{"type":{"resolvedName":"HeaderV1"},"isCanvas":false,"props":{"btnMain":{"text":"部门概况","href":"","bgColor":"indigo","textColor":"white","visible":true},"btnSub":{"text":"运营情况","href":"","bgColor":"indigo","textColor":"indigo-700","visible":true},"headerImage":"/static/media/header_v1.32ff461004d58575bccb.jpeg","title":"智慧医院运营管理系统","subTitle":"信息聚合、数字建模","desc":"以数字孪生为理念，提升医院运营管理效率，打造医院智慧运营。"},"displayName":"HeaderV1","custom":{},"parent":"ROOT","hidden":false,"nodes":[],"linkedNodes":{}}}

渲染模块300，用于读取并根据预定义数据格式规则解析存储的用户界面描述性文件而渲染相应的用户界面。

在实施例中，可采用Flutter技术实现渲染。Flutter是Google推出的一项跨平台技术，使用Dart语言编写核心的解析与渲染功能，通过其可移植的GPU加速渲染以及高性能的本地arm代码运行时，达到跨设备、跨平台的高质量用户体验，提供在多种终端设备上呈现可视化界面的能力。从而不用再针对不同的平台重复开发同样的展示效果，节约了人员成本，提升了效率。

渲染是将处理后的数据信息映射成可视化元素的过程。可视化元素由3部分组成：空间+标记+视觉通道。

空间：通常是二维、三维物体的可视化，通过图形绘制技术，解决了在二维平面显示的问题，如3D环形图、3D地图等。

标记：是数据属性到可视化几何图形元素的映射，用来代表数据属性的归类。根据空间自由度的差别，标记可以分为点、线、面、体，分别具有零自由度、一维、二维、三维自由度。如常见的散点图、折线图、矩形树图、三维柱状图，分别采用了点、线、面、体这四种不同类型的标记。

视觉通道：数据属性的值到标记的视觉呈现参数的映射，通常用于展示数据属性的定量信息。常用的视觉通道包括：标记的位置、大小(长度、面积、体积...)、形状(三角形、圆、立方体...)、方向、颜色(色调、饱和度、亮度、透明度...)等。

可视化/渲染的目的，是为了反映数据的数值、特征和模式，以更加直观、易于理解的方式，将数据背后的信息呈现给目标用户，辅助其作出正确的决策。但是通常，我们面对的数据复杂，数据所蕴含的信息丰富，如果在可视化图形中，将所有的信息不经过组织和筛选，全部机械地摆放出来，不仅会让整个页面显得特别臃肿和混乱，缺乏美感；而且模糊了重点，分散用户的注意力，降低用户单位时间获取信息的能力。为此，提供多种交互方式来解决该问题。常见的交互方式包括：

滚动和缩放：当数据在当前分辨率的设备上无法完整展示时，滚动和缩放是一种非常有效的交互方式，比如地图、折线图的信息细节等。

颜色映射的控制：提供调色板，可以根据自己的喜好，去进行可视化图形颜色的配置。

数据映射方式的控制：指用户对数据可视化映射元素的选择，一般一个数据集，是具有多组特征的，提供灵活的数据映射方式给用户，可以方便用户按照自己感兴趣的维度去探索数据背后的信息。

数据细节层次控制：比如隐藏数据细节，hover或点击才出现。

渲染过程在Framework层会有Build、Widget Tree、Element Tree、RenderObjectTree、Layout、Paint、Composited Layer等几个阶段。在Flutter的C++层，使用Skia库，将Layer进行组合，生成纹理，使用OpenGL的接口向GPU提交渲染内容进行光栅化与合成。

在渲染引擎中，使用的是同步光栅化，在这种光栅化策略中：

-以直接光栅化为主，图层的DisplayList直接绘制到目标Surface上，光栅化生成的像素值直接写入目标Surface的像素缓冲区；

-部分图层会触发间接光栅化，渲染引擎会为这些图层分配额外的像素缓冲区，先将该图层的DisplayList绘制到图层本身的像素缓冲区，然后在绘制该图层时，再将图层的像素缓冲区输出到目标Surface的像素缓冲区；

-使用间接光栅化的主要目的是通过避免对内容没有发生变化的图层的重复光栅化，来减少每一帧的光栅化耗时。

渲染引擎在RasterCache中实现图层的间接光栅化，并且可采取以下措施来规避和减轻间接光栅化带来的一些副作用：

-每一帧最多只允许一定数量的图层完成间接光栅化，默认是3个，超过该数目后，该帧不再允许间接光栅化，从而避免对该帧的性能产生太大的影响；

-规避绘制指令比较简单的图层，内容会发生变化的图层，不可见的图层走间接光栅化，减少不必要的间接光栅化；

-进一步限制了只有图层的内容在连续多帧绘制中都没有发生变化，才允许图层间接光栅化，默认值为3，进一步减少了不必要的间接光栅化。

此外，为了便捷地与第三方系统进行无缝的嵌入式集成，可采用WebComponents技术对Flutter生成的Web运行时文件进行封装，生成一个无侵入的、不干扰页面上其他元素代码的标准Web组件。采用浏览器的原生组件即Web Components技术来实现可视化展示界面的嵌入式集成，具有集成简单直接、符合直觉、不用加载任何外部模块、不会对原系统造成样式污染的优点。

在实施例中，可视化编辑器还包括实时展示模块以实时展现编辑效果。该实时展示模块用于：

-对编辑区域的所有编辑元素(即组件)进行扁平化处理。UI(用户界面)的数据通常都是树形的结构，由于直接使用树形的结构，对节点的增、删、改、查不友好，因而进行扁平化处理。可以用一个大的JSON来表示，然后递归渲染。遍历查询JSON格式数据的最外层的节点，将每一项加入结果集合，如果有节点的自节点长度不为0，则递归遍历此节点。存储节点的关系，类似一个数据库的二维表，描述节点的父子关系，方便修改父子结构，同级排序。

-在渲染每个编辑元素时绑定其对应id的数据；

-接收属性控制面板中修改的组件属性；

-响应于相应组件具有子组件，将组件属性向下方子组件透传；

-修改后的组件属性根据id关联更新绑定的数据，即修改属性时直接修改对应数据；

-监听数据并根据数据实时渲染编辑区域的界面。每个组件根据相应数据接口进行数据注入，组件即便拆出来单独使用，但一旦部署到端上，也将会自动接入端上数据流。可视化编辑器与渲染模块都不需要额外处理，数据的处理由数据采集处理模块完成。

具体地，基于JavaScript语言下的React技术架构，`Map`中有一个根节点，从根节点开始渲染，每个节点从数据库中取到自身数据，如果有子元素，则会递归渲染，子元素再从数据库获取子元素自身的数据，依次循环，当循环完毕后，会得到一颗与`Map`数据一一对应绑定的`dom`树，`Map`中任何一个元素发生改变，`SWR`会通过之前`getter`记录的关联关系，主动找到绑定的实例执行`forceUpdate`刷新。

在实施例中，一个或多个基础组件还分别包裹一层高阶组件，该高阶组件用于维护相应子组件(基础组件)之间的相互通信。包裹是基于React的组合特性而形成的设计模式，是React中复用组件的一种高级技巧。该高阶组件可配置的属性包括x、y坐标，从而控制在编辑器上展示的坐标(位置)。例如，轮播组件轮流显示儿科、外科、内科等的照片。按钮组件的属性配置为指向儿科。通过对轮播组件和按钮组件包裹相应高阶组件，在用户点击按钮时，将直接显示儿科照片。

高阶组件用于：

-在初始化时监听事件，所述事件包括触发条件和动作效果；

-响应于所述触发条件在相应高阶组件初始化的生命周期中触发，相应高阶组件在自身生命周期调用相应基础组件，将相应基础组件的回调函数指向动态效果函数；动作效果：实例维护了一个事件实例，通过这个事件系统派发事件；

-通过事件修改相应高阶组件自身属性，调用注入方法。高阶组件会监听自身属性的变化，一旦属性发生变化，重新计算并渲染新的界面；

-触发渲染模块的回调函数，调用部署平台的功能，从而由高阶组件做兼容处理。例如，获取当前的“地址坐标”时，在手机设备Android和iOS上都需要调用其原始系统的功能，高阶组件会在组件渲染时得知其所在的部署平台，并调用对应平台的获取“地址坐标”的功能；

在实施例中，可视化编辑器还包括组合模块，用于将两个以上基础组件组合为业务组件。可视化编辑器中，除了菜单中设定好的组件，还可以让基础组件的任意组合形成业务组件，将形成的业务组件作为新组件放在组件菜单中。例如，在编辑器中同时选中两个以上的基础组件，在右键菜单中点击组合按钮从而组合为一个业务组件。

在另一实施例中，本发明提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现结合图1所示所述的系统实施例或其它相应系统实施例的功能，在此不再赘述。

在另一实施例中，本发明提供一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现结合图1所示所述的系统实施例或其它相应系统实施例的功能，在此不再赘述。

在此所述的多个不同实施方式或者其特定特征、结构或特性可在本发明的一个或多个实施方式中适当组合。另外，在某些情形下，只要适当，流程图中和/或流水处理描述的步骤顺序可修改，并不必须精确按照所描述的顺序执行。另外，本发明的多个不同方面可使用软件、硬件、固件或者其组合和/或执行所述功能的其它计算机实施的模块或装置进行实施。本发明的软件实施可包括保存在计算机可读介质中并由一个或多个处理器执行的可执行代码。计算机可读介质可包括计算机硬盘驱动器、ROM、RAM、闪存、便携计算机存储介质如CD-ROM、DVD-ROM、闪盘驱动器和/或具有通用串行总线(USB)接口的其它装置，和/或任何其它适当的有形或非短暂计算机可读介质或可执行代码可保存于其上并由处理器执行的计算机存储器。本发明可结合任何适当的操作系统使用。

除非明确指出，在此所用的单数形式“一”、“该”均包括复数含义(即具有“至少一”的意思)。应当进一步理解，说明书中使用的术语“具有”、“包括”和/或“包含”表明存在所述的特征、步骤、操作、元件和/或部件，但不排除存在或增加一个或多个其他特征、步骤、操作、元件、部件和/或其组合。如在此所用的术语“和/或”包括一个或多个列举的相关项目的任何及所有组合。

前面说明了本发明的一些优选实施例，但是应当强调的是，本发明不局限于这些实施例，而是可以本发明主题范围内的其它方式实现。本领域技术人员可以在本发明技术构思的启发和不脱离本发明内容的基础上对本发明做出各种变型和修改，这些变型或修改仍落入本发明的保护范围之内。

Claims (10)

1.一种运营可视化系统，其特征在于，所述系统包括可视化编辑器，所述可视化编辑器用于编辑查看单位运营情况的用户界面并包括：

加载模块，用于响应于新增用户界面设计，加载预先设置的基础组件、业务组件和/或数据源组件，其中每一基础组件对应于完成相应功能的代码模块，每一业务组件由两个以上基础组件形成，数据源组件用于取回相应的数据；

创建模块，用于响应于拖拽一基础组件或业务组件，在编辑区域创建相应基础组件或业务组件；

属性控制面板，用于调整所创建的基础组件或业务组件的属性；

绑定模块，用于响应于拖拽数据源组件到所创建的基础组件或业务组件上，将数据源组件与相应基础组件或业务组件绑定，其中所述属性控制面板还用于选取数据源中字段并设置与相应基础组件或业务组件中属性的对应关系；

存储模块，用于将创建的基础组件和/或业务组件及其相应属性和布局、绑定的数据源组件及其属性序列化为用户界面描述性文件并保存。

2.根据权利要求1所述的系统，其特征在于，所述系统还包括：

渲染模块，用于读取并根据预定义数据格式规则解析所述用户界面描述性文件而渲染相应的用户界面。

3.根据权利要求1所述的系统，其特征在于，所述可视化编辑器还包括实时展示模块，用于：

对编辑区域的所有编辑元素进行扁平化处理；

在渲染每个编辑元素时绑定其对应id的数据；

接收属性控制面板中修改的组件属性；

响应于相应组件具有子组件，将组件属性向子组件透传；

修改后的组件属性根据id关联更新绑定的数据；

监听数据并根据数据实时渲染编辑区域的界面。

4.根据权利要求1所述的系统，其特征在于，一个或多个基础组件还分别包裹一层高阶组件，所述高阶组件用于维护相应基础组件之间的相互通信。

5.根据权利要求4所述的系统，其特征在于，所述高阶组件用于：

在初始化时监听事件，所述事件包括触发条件和动作效果；

响应于所述触发条件在相应高阶组件初始化的生命周期中触发，相应高阶组件在自身生命周期调用相应基础组件，将相应基础组件的回调函数指向动态效果函数；

通过事件修改相应高阶组件自身属性，调用注入方法；

触发渲染模块的回调函数，调用部署平台的功能。

6.根据权利要求1所述的系统，其特征在于，每个组件根据相应数据接口进行数据注入。

7.根据权利要求1所述的系统，其特征在于，所述用户界面描述性文件为JSON数据格式。

8.根据权利要求7所述的系统，其特征在于，所述存储模块用于：

取得可视化编辑器内所有组件的状态信息；

按照添加时间排序，组成数组；

调用系统函数将数组转化为JSON数据格式的用户界面描述性文件。

9.一种计算机设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中所述处理器执行所述计算机程序时实现根据权利要求1-8任一所述的系统的功能。

10.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据权利要求1-8任一所述的系统的功能。

Images