一种可视化组件数据交互的方法、系统、设备及介质与流程

本发明涉及可视化组件领域，更具体地，特别是指一种可视化组件数据交互的方法、系统、计算机设备及可读介质。

背景技术：

工业大数据分析，就是将服务端处理后的工业数据，通过图表的形式展现到客户端。传统的方式，只能采取手动开发，将固定的图表展示固定的数据，期间一旦图表展示发生改变，只能通过修改代码或者重新开发一份数据可视化分析界面，对于开发资源，造成大量的浪费；

在可视化组件方面，传统的可视化组件之间的数据传递是通过props。当组件的层级嵌套超过3级及以上时，会导致数据进行反复的传递，对于数据方面，在传递过程中可能存在某条数据未处理完成或者未传递过去而造成报错；在代码方面，大量的数据传递代码，对于后期的维护或者功能改动，会存在极大的稳定隐患。

在可视化组件与服务端的数据传递方面，传统的方式就是采用htttp请求方式，如果需要实时展示数据，只能通过轮询的方式。如果一个可视化界面中存在大量的轮询请求，不仅会造成客户端的卡顿，而且会向服务端发送cookie等一些不必要的数据，从而浪费了大量带宽，进而导致用户体验较差。

技术实现要素：

有鉴于此，本发明实施例的目的在于提出一种可视化组件数据交互的方法、系统、计算机设备及计算机可读存储介质，通过将共享数据储存到公共区域中，可以对数据进行全局的查询和操作，极大地提高了数据的利用率，从而避免了数据层级传递带来的数据冗余。

基于上述目的，本发明实施例的一方面提供了一种可视化组件数据交互的方法，包括如下步骤：将多个可视化组件的数据存放到公共区域；响应于第一可视化组件向第二可视化组件发送获取或修改数据的请求，对所述公共区域的所述第二可视化组件的数据进行克隆，并将克隆后的数据返回到所述第一可视化组件；响应于所述第一可视化组件对所述克隆后的数据进行修改，将修改后的数据同步到所述公共区域；以及响应于所述公共区域的数据与所述第二可视化组件的数据不同，将所述公共区域的数据同步到所述第二可视化组件中。

在一些实施方式中，还包括：使用网页套接字将可视化组件所在的客户端与服务端进行第一次连接，并判断所述第一次连接是否成功。

在一些实施方式中，还包括：响应于所述第一次连接成功，基于所述客户端中的数据分析组件向所述服务端进行第二次连接。

在一些实施方式中，还包括：响应于所述第二次连接成功，基于所述服务端主动向所述客户端推送接收到的最新数据。

本发明实施例的另一方面，还提供了一种可视化组件数据交互系统，包括：存储模块，配置用于将多个可视化组件的数据存放到公共区域；克隆模块，配置用于响应于第一可视化组件向第二可视化组件发送获取或修改数据的请求，对所述公共区域的所述第二可视化组件的数据进行克隆，并将克隆后的数据返回到所述第一可视化组件；第一同步模块，配置用于响应于所述第一可视化组件对所述克隆后的数据进行修改，将修改后的数据同步到所述公共区域；以及第二同步模块，配置用于响应于所述公共区域的数据与所述第二可视化组件的数据不同，将所述公共区域的数据同步到所述第二可视化组件中。

在一些实施方式中，还包括：连接模块，配置用于使用网页套接字将可视化组件所在的客户端与服务端进行第一次连接，并判断所述第一次连接是否成功。

在一些实施方式中，还包括：第二连接模块，配置用于响应于所述第一次连接成功，基于所述客户端中的数据分析组件向所述服务端进行第二次连接。

在一些实施方式中，还包括：推送模块，配置用于响应于所述第二次连接成功，基于所述服务端主动向所述客户端推送接收到的最新数据。

本发明实施例的又一方面，还提供了一种计算机设备，包括：至少一个处理器；以及存储器，所述存储器存储有可在所述处理器上运行的计算机指令，所述指令由所述处理器执行时实现如上方法的步骤。

本发明实施例的再一方面，还提供了一种计算机可读存储介质，计算机可读存储介质存储有被处理器执行时实现如上方法步骤的计算机程序。

本发明具有以下有益技术效果：通过将共享数据储存到公共区域中，可以对数据进行全局的查询和操作，极大地提高了数据的利用率，从而避免了数据层级传递带来的数据冗余。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的实施例。

图1为本发明提供的可视化组件数据交互的方法的实施例的示意图；

图2为本发明提供的可视化组件数据交互的计算机设备的实施例的硬件结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。

需要说明的是，本发明实施例中所有使用“第一”和“第二”的表述均是为了区分两个相同名称非相同的实体或者非相同的参量，可见“第一”“第二”仅为了表述的方便，不应理解为对本发明实施例的限定，后续实施例对此不再一一说明。

基于上述目的，本发明实施例的第一个方面，提出了一种可视化组件数据交互的方法的实施例。图1示出的是本发明提供的可视化组件数据交互的方法的实施例的示意图。如图1所示，本发明实施例包括如下步骤：

s1、将多个可视化组件的数据存放到公共区域；

s2、响应于第一可视化组件向第二可视化组件发送获取或修改数据的请求，对公共区域的第二可视化组件的数据进行克隆，并将克隆后的数据返回到第一可视化组件；

s3、响应于第一可视化组件对克隆后的数据进行修改，将修改后的数据同步到公共区域；以及

s4、响应于公共区域的数据与第二可视化组件的数据不同，将公共区域的数据同步到第二可视化组件中。

可视化编辑系统分为操作区、组件区、画布区和编辑区四个区域，每个区域的功能如下，操作区：主要是画布的导入、导出、记录点、保存、预览等功能，多组件的不同对齐操作；组件区：也可以称之为可视化组件菜单，主要用来区分不同类型的可视化组件；画布区：可视化组件的载体，在此区域，可以对组件进行各种排列、组合以及进行删除、复制、剪切、粘贴、成组、锁定等一系列的操作；编辑区：只要针对画布区域选中的可视化组件进行样式美化和展示数据的绑定。

可视化编辑系统将可视化图表进行了组件化，包含图表、表格、工业图形、素材、地图等等。将组件拖拽到画布中，可以对组件大小、位置进行拖拽调整，并且通过编辑区对当前选中的可视化组件进行样式美化和数据绑定。

将多个可视化组件的数据存放到公共区域。初始化画布，将画布的数据储存到公共区域(store)中。将可视化组件拖拽到画布上，同时将组件的默认数据初始化到画布的层级信息中，并保存到store中。选中可视化组件，选择样式属性，进行组件的样式美化，将美化的配置数据，更新到组件的styleconfig中，选择数据属性，将组件与数据源进行关联，将关联信息储存到组件的dataconfig中。画布保存，将store中的画布配置信息、组件配置信息整理成json数据储存到数据库中。

根据画布id，获取数据可视化分析界面的json数据，获取期中的画布配置信息及组件配置信息，依据画布信息，初始化界面，依据组件配置信息，生成可视化图表，读取组件信息中的dataconfig，将组件与服务端建立关联，将服务端的数据展现到分析界面上。

响应于第一可视化组件向第二可视化组件发送获取或修改数据的请求，对公共区域的第二可视化组件的数据进行克隆，并将克隆后的数据返回到第一可视化组件。例如，当第一可视化组件a需要第二可视化组件b的某条信息时，可以由组件a发起获取数据行为，将组件b的id传入到数据处理层的获取数据方法，由该方法去store中筛选组件b的数据进行深度克隆，并返回给组件a。

响应于对克隆后的数据进行修改，将修改后的数据同步到公共区域。当组件a需要修改组件b中的数据时，将获取的组件b的数据进行修改处理后，调用数据处理层的修改数据方法，将修改后的组件b数据更新到store中。

响应于公共区域的数据与第二可视化组件的数据不同，将公共区域的数据同步到第二可视化组件中。组件b中可以监听store中的数据变化，从而自动将最新的数据更新到组件b中。此流程不允许组件a直接对store中组件b的数据进行处理，必须通过数据处理层的方法进行操作，这样控制了数据可变性的途径，有效的控制了数据的安全性，对于数据的变化信息了如指掌。

在当下工业大数据形式下，面对高频率的数据传输及处理，仅仅依靠http请求是满足不了需求，不能仅仅由客户端发起请求，这样对数据的时效性将大打折扣，这时便需要websocket(网页套接字)进行数据交互，将客户端与服务器进行连接，由服务器主动推送数据到客户端。

判断客户端是否支持websocket，如果不支持，则使用http请求数据，并将数据渲染到组件，如果支持则判断当前可视化界面是否开启websocket，如果未开启，则使用http请求。

在一些实施方式中，还包括：使用网页套接字将可视化组件所在的客户端与服务端进行第一次连接，并判断所述第一次连接是否成功。当前可视化界面开启websocket则可以尝试建立客户端与服务端的连接通道。

在一些实施方式中，还包括：响应于所述第一次连接成功，基于所述客户端中的数据分析组件向所述服务端进行第二次连接。

在一些实施方式中，还包括：响应于所述第二次连接成功，基于所述服务端主动向所述客户端推送接收到的最新数据。组件随时接收服务器传输的数据，并将数据渲染到可视化分析界面上

本发明实施例将可视化图表进行组件化，方便自由排列、组合。将各种图表、表格、地图、工业图形、素材等进行组件化，可以将其拖拽到画布区域，进行位置调整、样式美化及数据绑定，将画布信息及组件信息整合成json数据储存到数据库中，预览时，通过解析json数据，完成画布的初始化，以及组件的配置信息，自动生成html代码，并与服务端建立关联，完成数据可视化分析界面开发。

本发明实施例的组件与组件之间的数据达到共享，避免的层级传递。将可视化组件的数据信息初始化到store中，当可视化组件的数据发生改变时，调用数据处理层的方法，将数据进行处理并替换到store中的旧数据，此流程只能通过数据处理层的方法对store的数据进行修改，不允许可视化组件直接对store的数据进行修改，这样即控制了数据可变性的途径，也控制了数据的安全性。

本发明实施例的组件与服务端的数据传递不仅支持http，而且支持websocket，对于数据的及时展示，有了更加稳定的保障。在数据可视化界面中与服务端通过websocket建立数据传递通道，通过可视化组件订阅相关展示数据，服务端会向客户端传递数据，可视化组件在依据组件id，将数据渲染到指定的可视化组件，从而达到客户端与服务端达到数据实时传递。

需要特别指出的是，上述可视化组件数据交互的方法的各个实施例中的各个步骤均可以相互交叉、替换、增加、删减，因此，这些合理的排列组合变换之于可视化组件数据交互的方法也应当属于本发明的保护范围，并且不应将本发明的保护范围局限在实施例之上。

基于上述目的，本发明实施例的第二个方面，提出了一种可视化组件数据交互系统，包括：存储模块，配置用于将多个可视化组件的数据存放到公共区域；克隆模块，配置用于响应于第一可视化组件向第二可视化组件发送获取或修改数据的请求，对所述公共区域的所述第二可视化组件的数据进行克隆，并将克隆后的数据返回到所述第一可视化组件；第一同步模块，配置用于响应于第一可视化组件对所述克隆后的数据进行修改，将修改后的数据同步到所述公共区域；以及第二同步模块，配置用于响应于所述公共区域的数据与所述第二可视化组件的数据不同，将所述公共区域的数据同步到所述第二可视化组件中。

在一些实施方式中，还包括：连接模块，配置用于使用网页套接字将可视化组件所在的客户端与服务端进行第一次连接，并判断所述第一次连接是否成功。

在一些实施方式中，还包括：第二连接模块，配置用于响应于所述第一次连接成功，基于所述客户端中的数据分析组件向所述服务端进行第二次连接。

在一些实施方式中，还包括：推送模块，配置用于响应于所述第二次连接成功，基于所述服务端主动向所述客户端推送接收到的最新数据。

基于上述目的，本发明实施例的第三个方面，提出了一种计算机设备，包括：至少一个处理器；以及存储器，存储器存储有可在处理器上运行的计算机指令，指令由处理器执行以实现如下步骤：s1、将多个可视化组件的数据存放到公共区域；s2、响应于第一可视化组件向第二可视化组件发送获取或修改数据的请求，对公共区域的第二可视化组件的数据进行克隆，并将克隆后的数据返回到第一可视化组件；s3、响应于第一可视化组件对克隆后的数据进行修改，将修改后的数据同步到公共区域；以及s4、响应于公共区域的数据与第二可视化组件的数据不同，将公共区域的数据同步到第二可视化组件中。

在一些实施方式中，还包括：使用网页套接字将可视化组件所在的客户端与服务端进行第一次连接，并判断所述第一次连接是否成功。

在一些实施方式中，还包括：响应于所述第一次连接成功，基于所述客户端中的数据分析组件向所述服务端进行第二次连接。

在一些实施方式中，还包括：响应于所述第二次连接成功，基于所述服务端主动向所述客户端推送接收到的最新数据。

如图2所示，为本发明提供的上述可视化组件数据交互的计算机设备的一个实施例的硬件结构示意图。

以如图2所示的装置为例，在该装置中包括一个处理器301以及一个存储器302，并还可以包括：输入装置303和输出装置304。

处理器301、存储器302、输入装置303和输出装置304可以通过总线或者其他方式连接，图2中以通过总线连接为例。

存储器302作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本申请实施例中的可视化组件数据交互的方法对应的程序指令/模块。处理器301通过运行存储在存储器302中的非易失性软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例的可视化组件数据交互的方法。

存储器302可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据可视化组件数据交互的方法的使用所创建的数据等。此外，存储器302可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器302可选包括相对于处理器301远程设置的存储器，这些远程存储器可以通过网络连接至本地模块。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置303可接收输入的用户名和密码等信息。输出装置304可包括显示屏等显示设备。

一个或者多个可视化组件数据交互的方法对应的程序指令/模块存储在存储器302中，当被处理器301执行时，执行上述任意方法实施例中的可视化组件数据交互的方法。

执行上述可视化组件数据交互的方法的计算机设备的任何一个实施例，可以达到与之对应的前述任意方法实施例相同或者相类似的效果。

本发明还提供了一种计算机可读存储介质，计算机可读存储介质存储有被处理器执行时执行如上方法的计算机程序。

最后需要说明的是，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关硬件来完成，可视化组件数据交互的方法的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，程序的存储介质可为磁碟、光盘、只读存储记忆体(rom)或随机存储记忆体(ram)等。上述计算机程序的实施例，可以达到与之对应的前述任意方法实施例相同或者相类似的效果。

此外，根据本发明实施例公开的方法还可以被实现为由处理器执行的计算机程序，该计算机程序可以存储在计算机可读存储介质中。在该计算机程序被处理器执行时，执行本发明实施例公开的方法中限定的上述功能。

此外，上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储介质实现。

此外，应该明白的是，本文的计算机可读存储介质(例如，存储器)可以是易失性存储器或非易失性存储器，或者可以包括易失性存储器和非易失性存储器两者。作为例子而非限制性的，非易失性存储器可以包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦写可编程rom(eeprom)或快闪存储器。易失性存储器可以包括随机存取存储器(ram)，该ram可以充当外部高速缓存存储器。作为例子而非限制性的，ram可以以多种形式获得，比如同步ram(dram)、动态ram(dram)、同步dram(sdram)、双数据速率sdram(ddrsdram)、增强sdram(esdram)、同步链路dram(sldram)、以及直接rambusram(drram)。所公开的方面的存储设备意在包括但不限于这些和其它合适类型的存储器。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现的功能，但是这种实现决定不应被解释为导致脱离本发明实施例公开的范围。

结合这里的公开所描述的各种示例性逻辑块、模块和电路可以利用被设计成用于执行这里功能的下列部件来实现或执行：通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的组合，例如，dsp和微处理器的组合、多个微处理器、一个或多个微处理器结合dsp和/或任何其它这种配置。

结合这里的公开所描述的方法或算法的步骤可以直接包含在硬件中、由处理器执行的软件模块中或这两者的组合中。软件模块可以驻留在ram存储器、快闪存储器、rom存储器、eprom存储器、eeprom存储器、寄存器、硬盘、可移动盘、cd-rom、或本领域已知的任何其它形式的存储介质中。示例性的存储介质被耦合到处理器，使得处理器能够从该存储介质中读取信息或向该存储介质写入信息。在一个替换方案中，存储介质可以与处理器集成在一起。处理器和存储介质可以驻留在asic中。asic可以驻留在用户终端中。在一个替换方案中，处理器和存储介质可以作为分立组件驻留在用户终端中。

在一个或多个示例性设计中，功能可以在硬件、软件、固件或其任意组合中实现。如果在软件中实现，则可以将功能作为一个或多个指令或代码存储在计算机可读介质上或通过计算机可读介质来传送。计算机可读介质包括计算机存储介质和通信介质，该通信介质包括有助于将计算机程序从一个位置传送到另一个位置的任何介质。存储介质可以是能够被通用或专用计算机访问的任何可用介质。作为例子而非限制性的，该计算机可读介质可以包括ram、rom、eeprom、cd-rom或其它光盘存储设备、磁盘存储设备或其它磁性存储设备，或者是可以用于携带或存储形式为指令或数据结构的所需程序代码并且能够被通用或专用计算机或者通用或专用处理器访问的任何其它介质。此外，任何连接都可以适当地称为计算机可读介质。例如，如果使用同轴线缆、光纤线缆、双绞线、数字用户线路(dsl)或诸如红外线、无线电和微波的无线技术来从网站、服务器或其它远程源发送软件，则上述同轴线缆、光纤线缆、双绞线、dsl或诸如红外线、无线电和微波的无线技术均包括在介质的定义。如这里所使用的，磁盘和光盘包括压缩盘(cd)、激光盘、光盘、数字多功能盘(dvd)、软盘、蓝光盘，其中磁盘通常磁性地再现数据，而光盘利用激光光学地再现数据。上述内容的组合也应当包括在计算机可读介质的范围内。

以上是本发明公开的示例性实施例，但是应当注意，在不背离权利要求限定的本发明实施例公开的范围的前提下，可以进行多种改变和修改。根据这里描述的公开实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明实施例公开的元素可以以个体形式描述或要求，但除非明确限制为单数，也可以理解为多个。

应当理解的是，在本文中使用的，除非上下文清楚地支持例外情况，单数形式“一个”旨在也包括复数形式。还应当理解的是，在本文中使用的“和/或”是指包括一个或者一个以上相关联地列出的项目的任意和所有可能组合。

上述本发明实施例公开实施例序号仅仅为了描述，不代表实施例的优劣。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本发明实施例公开的范围(包括权利要求)被限于这些例子；在本发明实施例的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，并存在如上的本发明实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。