CN111078169A - 一种可视化大屏系统的前端装置及其搭建方法 - Google Patents

Abstract

本发明公开了一种可视化大屏系统的前端装置及其搭建方法，该前端装置包括：自定义背景层，用于封装多个供用户选择的动态主题并提供标准接口，通过标准接口将渲染后的动态主题呈现在地图层的底层；地图层，用于根据地图信息绘制地图图形和LBS位置数据，并基于业务数据信息实时显示人员、楼宇、设备或业务的参数信息；数据交互呈现层，用于根据地图层传输的地图图形和事件响应数据绘制数据图表并进行显示；本发明突破了以往C/S版大屏系统一屏一版的限制，采用三层结构前端装置完成B/S架构大屏搭建，自动适配现场分辨率；在相似的框架及工具条件下实现可视化大屏系统的三层式标准化重构，使“大屏”产品具有易适配、好扩展、能推广的优点。

Description

一种可视化大屏系统的前端装置及其搭建方法

技术领域

本发明属于数据可视化技术领域，更具体地，涉及一种可视化大屏系统的前端装置及其搭建方法。

背景技术

近年来随着4G、互联网+、IOT物联网的海量运用，数据可视化因直观易懂、精准透析核心信息的优势，逐渐成为辅助决策与传递信息的热门方式。在众多数据可视化产品中，大屏系统以其可视面积大、视觉冲击力强的特点广泛运用到各类监控中心、IOT物联网后台、智慧城市建设中。面对纷繁复杂的市场需求，如何打造一款产品，使其能适配各类大屏硬件，能修改与自定义视觉风格，能实现信息主体与图表的数据实时交互，成为一个前沿课题。

大屏可视化系统早期采用C/S架构窗口，一般依据现场硬件分辨率设置画布大小、采用与拼接屏同比例的宫格布局方式，如3×3、3×4、3×5、4×5等。在插件的表现形式上受限于VS2008工具包，可供选择的Chart图类型少，样式自定义程度低；在信息主体的选择上，以离线式模型文件为主，且模型文件需要做单体化处理才能设置交互事件，工作量繁重；在程序的容量与安装方式上，EXE安装包文件大、必须安装才能试用；且需要做环境配置，不适合异地演示；在运维修改方式上，需重做模型文件及事件响应后，二次打包分发；正是如上的种种不便，催生了新的重构方式。

B/S架构的大屏系统逐步成为业界主流；网络的互联互通，标准化的Html协议为各种终端设备浏览大屏系统提供了可能。智能硬件产品日益增多，“大屏”已经不仅局限于拼接屏，越来越多的客户采用大尺寸电视机/智慧屏产品(内置Android系统)作为演示终端。H5页面能在APP、小程序中内嵌的特性，决定了开发者既可以开发相应的APP、小程序产品也可以普通的网页形式存在；多样化的产品形式将B/S架构的优势进一步放大直至成为主流。

在B/S结构中，每个节点都分布在网络上，这些网络节点可以分为浏览器端、服务器端和中间件，通过它们之间的链接和交互来完成系统的功能任务。三个层次的划分是从逻辑上分的，在实际应用中多根据实际物理网络进行不同的物理划分。本发明所涉及的正是前后端分离后的前端部分-“浏览器端”页面信息搭建方法。

B/S架构的“大屏”产品前端构建方法各异、尚无统一约定或规范说明；目前常用的前端重构方法多采用MVVM框架(vue)、DIV+css预编译语言、类库包含Echarts数据图表工具、Flexible适配插件、Lodash-js函数库、Element ui-ui库。在相似的框架及工具条件下实现可视化大屏系统的3层式标准化重构，使“大屏”产品具有易适配、好扩展、能推广的特点是本发明的一大诉求。

发明内容

针对现有技术的至少一个缺陷或改进需求，本发明提供了一种可视化大屏系统的前端装置及其搭建方法，将B/S架构大屏数据可视化系统的前端重构分解为三个标准化结构：底部自定义背景层预设多款主题，用户可自由选择主题及配置动画参数，结果云端存储；中间Gis层包含区块位置信息和业务数据两部分、通过标准接口向上传输结果；顶部数据交互呈现层依照设计好的Chart图类型绘制图形，可选择开关，可拖拽布局，可实现与Gis层的数据双向交互；依照本发明方法实现搭建大屏可视化系统的流程可复制性；具有良好的兼容性、高度的自由性、标准的扩展性。

为实现上述目的，按照本发明的一个方面，提供了一种可视化大屏系统的前端装置，包括：

自定义背景层，用于封装多个供用户选择的动态主题并提供标准接口，通过所述标准接口用于将渲染后的动态主题呈现在地图层的底层；

地图层，用于根据地图信息绘制地图图形和LBS位置数据，并基于业务数据信息实时显示人员、楼宇、设备、业务的参数信息；

数据交互呈现层，用于根据地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。

优选的，上述前端装置，所述数据交互呈现层包括背景编辑器和至少一个图表模块；

所述背景编辑器响应于用户输入的动态主题切换指令从自定义背景层中选择封装好的动态主题，生成新的主题类型并进行渲染显示；所述动态主题选择指令中包括主题ID、该主题ID的配置参数以及背景色；

所述图表模块用于根据渲染的主题背景以及地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。

优选的，上述前端装置，所述数据交互呈现层还包括图表控制器；

所述图表控制器用于生成图表模块菜单并显示，响应于用户绘制的图表模块拖拽轨迹调整各图表模块的位置分布。

优选的，上述前端装置，所述地图层和数据交互呈现层之间具有数据双向传输；

数据交互呈现层将绘制的数据图表呈现在地图层上，根据所述数据图表反向在地图层上绘制时间、位置、概要信息；地图层响应于用户设置的数据筛查范围对地图信息和/或业务信息进行筛选，并将筛选结果呈现在数据交互呈现层上。

优选的，上述前端装置，所述图表模块菜单中包含每个图表模块的名称、ID、显示方法。

按照本发明的另一个方面，还提供了一种可视化大屏系统的前端装置的搭建方法，包括以下步骤：

创建自定义背景层：封装预置的多个动态主题并为其设置标准接口；

创建地图层：配置地图信息和业务数据信息，根据所述地图信息绘制地图数据图表及根据所述业务数据信息制作事件响应；封装地图层并定义内部数据接口；

创建数据交互呈现层：配置背景编辑器和图表模块，所述背景编辑器支持用户选择自定义背景层中封装的动态主题及参数，渲染主题背景；所述图表模块用于根据渲染的主题背景以及地图层传输的地图数据图表和事件响应数据绘制数据图表；封装图表子模块并设置通用字段接口。

优选的，上述搭建方法，创建自定义背景层具体包括：

创建主题管理对象，设置默认动态主题的配置参数；

封装所述动态主题的各图层并提供标准接口；

渲染默认动态主题及背景参数。

优选的，上述搭建方法，创建地图层具体包括：

采用地图管理对象管理地图事件，包括地图信息和业务数据信息；

根据所述地图信息绘制区级行政区、街道行政区和社区，根据经纬度信息形成周界范围；

依据筛选条件查询所选范围内的数据项，并根据设置数据接口将所述数据项传输给数据交互呈现层来绘制界面图形。

优选的，上述搭建方法，创建数据交互呈现层包括：

创建图表类管理数据呈现，封装图表模块对应的配置文件并将每个图表模块对应的id、title、以及模块显示方法method等保存到变量unit；

根据所述配置文件生成显示模块菜单、界面模块显示以及各图表模块的共用方法；

在每个图表模块外嵌套两个div标签，分别用于与拖拽模块、接收拖拽模块进行交互响应。

优选的，上述搭建方法，所述动态主题的标准接口包括动画html元素dom获取、动画效果相关参数定义、动画效果相关参数设置、启动动画和停止动画。

总体而言，通过本发明所构思的以上技术方案与现有技术相比，能够取得下列有益效果：

(1)本发明以大屏信息呈现可划分为3个层级为依据，将B/S架构大屏数据可视化系统的前端重构分解为三个标准化结构：底部自定义背景层预设多款主题，用户可自由选择主题及配置动画参数，结果云端存储；中间Gis层包含区块位置信息和业务数据两部分、通过标准接口向上传输结果；顶部数据交互呈现层依照设计好的Chart图类型绘制图形，可选择开关，可拖拽布局，可实现与Gis层的数据双向交互；依照本发明方法实现搭建大屏可视化系统的流程可复制性；具有良好的兼容性、高度的自由性、标准的扩展性。

(2)本发明突破了以往C/S版大屏系统一屏一版的限制，采用三层结构前端装置完成B/S架构大屏搭建，自动适配现场分辨率；三层结构因应客户需求，可对背景层、Gis地图层、数据交互呈现层做单一或全局修改。在相似的框架及工具条件下实现可视化大屏系统的三层式标准化重构，使“大屏”产品具有易适配、好扩展、能推广的优点。

附图说明

图1是本发明实施例提供的一种可视化大屏系统的前端装置的结构图。

图2是本发明实施例提供的一种可视化大屏系统的前端装置搭建方法的流程图。

图3是本发明实施例提供的创建自定义背景层的流程图。

图4是本发明实施例提供的地图层的结构示意图。

图5是本发明实施例提供的创建数据交互呈现层的流程图。

图6是本发明实施例提供的数据交互呈现层和地图层之间数据双向交互的结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。此外，下面所描述的本发明各个实施方式中所涉及到的技术特征只要彼此之间未构成冲突就可以相互组合。

本实施例提供的一种可视化大屏系统的前端装置的结构图，参见图1所示，该前端装置由自定义背景层、Gis地图层和数据交互呈现层封装而成；

其中，自定义背景层作为最底层，以基于HTML5+CSS3+canvas制作的特效为背景，封装多个动态主题供用户选择，并提供参数配置、动画启动/停止的API接口给Gis地图层；

Gis地图层为中间层，包括地图信息和业务数据信息；用于地图数据信息绘制地图图形和基于位置的服务(Location Based Services，LBS)位置数据，业务数据信息用于实时显示人员/楼宇/设备/业务的参数信息；

数据交互呈现层为页面最顶层也是主控制层，以Charts数据图表为核心；数据交互呈现层包括背景编辑器、多个图表模块和图表控制器；用户可在背景编辑器中选择主题并设置背景参数，背景编辑器将用户选择的主题和参数传递给自定义背景层，从自定义背景层中选择动态主题，生成新的主题类型并进行渲染显示，实现背景主题的动态切换；具体的，背景编辑器响应于用户输入的动态主题切换指令从自定义背景层中选择动态主题，生成新的主题类型并进行渲染显示；所述动态主题选择指令中包括主题ID、该主题ID的配置参数以及背景色；

图表模块用于根据渲染的主题背景以及地图层传输的地图图形和事件响应数据绘制具有用户自定义主题背景的数据图表并进行显示；不同图表模块用于生成不同类型的数据图表；

图表控制器用于生成图表模块菜单，该图表模块菜单中包含每个图表模块的名称、ID、显示方法；图表控制器可控制各图表模块的显示与否，并响应于用户绘制的图表模块拖拽轨迹调整各图表模块的位置分布。

数据交互呈现层支持与Gis地图层的双向数据交互；数据交互呈现层将绘制的数据图表呈现在地图层上，根据所述数据图表反向在地图层上绘制时间、位置、概要信息；地图层响应于用户设置的数据筛查范围对地图信息和/或业务信息进行筛选，并将筛选结果呈现在数据交互呈现层上。

本实施例还提供了一种可视化大屏系统的前端装置搭建方法，如图2所示，该搭建方法主要包括以下步骤：

(1)依照三层式结构原则搭建最底层背景层，用ThemeManager()类管理主题，完成主题封装、设置通用字段接口，然后加载默认主题项；具体的，

封装预设的多款JS主题并为其设置通用字段接口()；保存默认的或用户选择的动态主题及背景参数至云端；

(2)依照三层式结构原则搭建中间Gis地图层，包含地图信息和业务数据信息；用MapManager()类管理地图事件；通过经纬度数据绘制地图区域，完成行政区、街道、社区周界范围界定；设定统一的数据接口，制作事件响应，便于将结果传输给数据交互呈现层的图表模块；封装Gis地图层，以统一的数据接口传输地图图形及事件数据；

(3)创建数据交互呈现层，采用ChartManager()类管理图表数据；包括背景编辑器、多个图表模块和图表控制器；

用户可选择开关相应的图表模块；将每个图表模块对应的id、title以及模块显示方法method等保存到变量Unit，用于指定该图表模块执行相关操作；

(4)顶层的背景编辑器采用ThemeManager()类提供的getThemeObj()接口控制自定义背景层传输的主题及相关参数，并保存各类参数到云端；

(5)顶层图表模块与Gis地图层的双向数据交互，图表模块依据用户输入的查询条件(区域信息、起始时间、计算的截止时间)累加所选范围内的数据项(工单数、人员、告警)，实时绘制数据图表；亦可根据数据图表反向在Gis地图层上绘制时间、位置和概要信息；

(6)完成三层式前端框架搭建，与数据库对接，依照步骤(5)操作实时显示业务信息。

图3是本实施例提供的创建自定义背景层的流程图，如图3所示，自定义背景层的创建过程包括：

(1)创建ThemeManager()类管理主题，用ThemeManager()类管理所有动画对象；一张图页面初始化时，将所有的背景动画对象创建并添加到themetypes数组中，ThemeManager()类提供接口getThemeObj()，取得动态主题切换时所需要的动画对象；

(2)封装主题各图层，设置通用字段接口；封装的背景动画类须向外提供如下接口：①动画html元素(如canvas)dom获取；②动画效果相关参数定义；③动画效果相关参数设置；④启动动画；⑤停止动画；背景动画接口命名与此保持一致；

(3)渲染初始化主题及背景参数；定时绘图渲染动画效果，执行startAnimate()方法时初始化动画背景效果相关参数，然后启动定时，切换动画时关闭上套主题对象的定时，执行stopAnimate()方法；执行动态主题及背景动画初始化，Var themeobjs＝{name:“…”，value:“…”}设置主题初始值；

(4)用户通过背景编辑器修改主题时，需要包含以下3步：调整参数设置；选择切换主题；选择切换背景色；

当用户点击切换主题按钮后，背景编辑器采集用户输入的设置参数、主题和背景色，通过oldthemeType保存上套主题name(用于取得主题对象)，设置新主题name，并生成参数设置的box；根据封装的动画插件中的getOptionsDefine()方法中定义的参数，取得默认值和变化范围；设置好参数后，如果用户点击“保存”按钮，则清除上套主题div和定时，设置新主题参数信息，启动动画，最后localstorage方法保存新主题类型(canvas的id)；如果用户点击“取消”按钮，恢复当前主题对象，设置框消失。

(5)生成新主题类型(canvas的id)，并判断是否保存，若不保存，则渲染初始化主题及背景参数；若保存，则存储新主题及对应参数，显示新主题的渲染结果。

图4是本实施例提供的Gis地图层的结构示意图，参见图4，该Gis地图层401包含经纬度地图信息和业务数据信两部分，其创建过程包括：

(1)用MapManager()类管理地图事件，包含地图信息及业务数据信息两部分；

(2)绘制区级行政区、街道行政区、社区；根据经纬度信息形成周界范围、完成上述单位的范围界定；

(3)设定接口规范(newsUnit、warnchartUnit、passrecordUnit、typeindexUnit、generalpowerUnit、housepowerUnit、pandhUnit、personinfoUnit)；配置数据双向传输的标准化接口，完成封装；该数据双向传输的标准化接口作为Gis地图层与数据交互呈现层之间的公共接口，主要用于传输Gis地图层与数据交互呈现层之间存在业务交叉的数据内容，如重点人员轨迹信息、在线离线状态、所在点位、监控信息图像等；

(4)依据用户设置的筛选条件(选择范围、起始时间、截止时间)累加查询所选范围内的数据项；Map<String,Integer>resultMap＝new HashMap<String,Integer>()；

(5)依据步骤(3)中配置的标准化接口传输数据项给图表模块，绘制界面图形。

图5是本实施例提供的创建数据交互呈现层的流程图，数据交互呈现层的创建过程包括：

(1)创建ChartManager()类管理数据呈现，包含Chart图模块、Chart图控制器、背景编辑器三部分；

(2)封装Chart图模块，数据交互显示层中的一个Chart图模块对应一个js文件，相互独立，存放相对路径js/unitsmgr/，每个Chart图模块对应的id、title、以及模块显示方法method等保存到变量unit，用于指定Chart图模块执行相关操作；

(3)管理Chart图模块的文件units_manager.js负责生成显示模块菜单、界面模块显示以及子模块的共用的方法等；

(4)每个Chart图模块外面套有两个div，分别用于与拖拽模块、接收拖拽模块进行交互相应；可拖动任意Chart图模块与其他Chart图模块互换位置，或拖动到无Chart图模块且允许的位置。界面位置编辑完成后缓存body.innerHTML，刷新或重新打开页面时，显示上次编辑后的页面。

(5)Chart图模块的title使用固定元素'<p class＝"title"><span></span><s></s></p>',标题名称设置到该元素中,并且标题下方div盒子采用固定class＝”msgcontent”,其子元素中内容样式根据实际需要进行定义；

(6)依据得到的值绘制数据图表。

如图5所示，用户启动背景编辑器后，修改背景主题和动效参数；将背景编辑器主题ID、设置的属性值传输给自定义背景层，自定义背景层执行新主题的背景渲染并呈现在地图层的底层。用户点击Chart图控制器，利用Units manager.js负责生成模块菜单、控制模块显示；利用双层嵌套，支持Chart图模块拖拽互换位置，重新绘制Chart图模块；封装Chart图模块并为其设置通用字段接口，该通用字段接口作为数据交互呈现层内部的数据接口，主要用于传输数据表现的各类数据，如列表文案、柱状图、饼状图、折线图、tab页签状态以及各类汇总数据值；依据得到的数值，各Chart图模块绘制各自对应的数据图表；

图6是本发明实施例提供的数据交互呈现层和地图层之间数据双向交互的结构图；数据交互呈现层将绘制的数据图表呈现在地图层上，根据所述数据图表反向在地图层上绘制时间、位置、概要信息；地图层响应于用户设置的数据筛查范围对地图信息和/或业务信息进行筛选，并将筛选结果呈现在数据交互呈现层上。具体的交互过程如下：(1)设置需要的Chart图例，将不需要的图例关闭；(2)在Gis地图层中查阅相应区域的业务数据在Chart图表中的变化；(3)点击反向指标，可在Gis地图层中显示符合Chart业务的数据源；(4)在数据交互呈现层中点击某一数据源标签，查看其对应的地理位置及业务数据详情。

本领域的技术人员容易理解，以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种可视化大屏系统的前端装置，其特征在于，包括：

自定义背景层，用于封装多个供用户选择的动态主题并提供标准接口，渲染默认或用户自定义的动态主题并将其呈现在地图层的底层；

地图层，用于根据地图信息绘制地图图形和LBS位置数据，并基于业务数据信息实时显示人员、楼宇、设备或业务的参数信息；

数据交互呈现层，用于根据地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。

2.如权利要求1所述的前端装置，其特征在于，所述数据交互呈现层包括背景编辑器和至少一个图表模块；

所述背景编辑器响应于用户输入的动态主题切换指令从自定义背景层中选择动态主题，生成新的主题类型并进行渲染显示；所述动态主题选择指令中包括主题ID、该主题ID的配置参数以及背景色；

所述图表模块用于根据渲染的主题背景以及地图层传输的地图图形和事件响应数据绘制具有用户自定义主题背景的数据图表并进行显示。

3.如权利要求2所述的前端装置，其特征在于，所述数据交互呈现层还包括图表控制器；

所述图表控制器用于生成图表模块菜单并显示，响应于用户绘制的图表模块拖拽轨迹调整各图表模块的位置分布。

4.如权利要求1或3所述的前端装置，其特征在于，所述地图层和数据交互呈现层之间具有数据双向传输；

数据交互呈现层将绘制的数据图表呈现在地图层上，根据所述数据图表反向在地图层上绘制时间、位置、概要信息；地图层响应于用户设置的数据筛查范围对地图信息和/或业务信息进行筛选，并将筛选结果呈现在数据交互呈现层上。

5.如权利要求3所述的前端装置，其特征在于，所述图表模块菜单中包含每个图表模块的名称、ID、显示方法。

6.一种可视化大屏系统的前端装置的搭建方法，其特征在于，包括以下步骤：

创建自定义背景层：封装预置的多个动态主题并为其设置标准接口；

创建地图层：配置地图信息和业务数据信息，根据所述地图信息绘制地图数据图表及根据所述业务数据信息制作事件响应；封装地图层并定义内部数据接口；

创建数据交互呈现层：配置背景编辑器和图表模块，所述背景编辑器支持用户选择自定义背景层中封装的动态主题及参数，渲染主题背景；所述图表模块用于根据渲染的主题背景以及地图层传输的地图数据图表和事件响应数据绘制数据图表；封装图表模块并设置内部通用字段接口。

7.如权利要求6所述的搭建方法，其特征在于，创建自定义背景层具体包括：

创建主题管理对象，设置默认动态主题的配置参数；

封装所述动态主题的各图层并提供标准接口；

渲染默认动态主题及背景参数。

8.如权利要求6或7所述的搭建方法，其特征在于，创建地图层具体包括：

创建地图管理对象管理地图事件，包括地图信息和业务数据信息；

根据所述地图信息绘制区级行政区、街道行政区和社区，根据经纬度信息形成周界范围；

依据筛选条件查询所选范围内的数据项，并将所述数据项传输给数据交互呈现层来绘制界面图形。

9.如权利要求6所述的搭建方法，其特征在于，创建数据交互呈现层包括：

创建图表类管理数据呈现，封装图表模块对应的配置文件并将每个图表模块对应的id、名称以及模块显示方法等保存到变量unit；

根据所述配置文件生成显示模块菜单、界面模块显示以及各图表模块的共用方法；

在每个图表模块外嵌套两个div标签，分别用于与拖拽模块、接收拖拽模块进行交互响应。

10.如权利要求7所述的搭建方法，其特征在于，所述动态主题的标准接口包括动画html元素dom获取、动画效果相关参数定义、动画效果相关参数设置、启动动画和停止动画。

Images