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

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

A front-end device of visual large screen system and its construction method

【技术实现步骤摘要】
一种可视化大屏系统的前端装置及其搭建方法
本专利技术属于数据可视化
，更具体地，涉及一种可视化大屏系统的前端装置及其搭建方法。
技术介绍
近年来随着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函数库、Elementui-ui库。在相似的框架及工具条件下实现可视化大屏系统的3层式标准化重构，使“大屏”产品具有易适配、好扩展、能推广的特点是本专利技术的一大诉求。
技术实现思路
针对现有技术的至少一个缺陷或改进需求，本专利技术提供了一种可视化大屏系统的前端装置及其搭建方法，将B/S架构大屏数据可视化系统的前端重构分解为三个标准化结构：底部自定义背景层预设多款主题，用户可自由选择主题及配置动画参数，结果云端存储；中间Gis层包含区块位置信息和业务数据两部分、通过标准接口向上传输结果；顶部数据交互呈现层依照设计好的Chart图类型绘制图形，可选择开关，可拖拽布局，可实现与Gis层的数据双向交互；依照本专利技术方法实现搭建大屏可视化系统的流程可复制性；具有良好的兼容性、高度的自由性、标准的扩展性。为实现上述目的，按照本专利技术的一个方面，提供了一种可视化大屏系统的前端装置，包括：自定义背景层，用于封装多个供用户选择的动态主题并提供标准接口，通过所述标准接口用于将渲染后的动态主题呈现在地图层的底层；地图层，用于根据地图信息绘制地图图形和LBS位置数据，并基于业务数据信息实时显示人员、楼宇、设备、业务的参数信息；数据交互呈现层，用于根据地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。优选的，上述前端装置，所述数据交互呈现层包括背景编辑器和至少一个图表模块；所述背景编辑器响应于用户输入的动态主题切换指令从自定义背景层中选择封装好的动态主题，生成新的主题类型并进行渲染显示；所述动态主题选择指令中包括主题ID、该主题ID的配置参数以及背景色；所述图表模块用于根据渲染的主题背景以及地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。优选的，上述前端装置，所述数据交互呈现层还包括图表控制器；所述图表控制器用于生成图表模块菜单并显示，响应于用户绘制的图表模块拖拽轨迹调整各图表模块的位置分布。优选的，上述前端装置，所述地图层和数据交互呈现层之间具有数据双向传输；数据交互呈现层将绘制的数据图表呈现在地图层上，根据所述数据图表反向在地图层上绘制时间、位置、概要信息；地图层响应于用户设置的数据筛查范围对地图信息和/或业务信息进行筛选，并将筛选结果呈现在数据交互呈现层上。优选的，上述前端装置，所述图表模块菜单中包含每个图表模块的名称、ID、显示方法。按照本专利技术的另一个方面，还提供了一种可视化大屏系统的前端装置的搭建方法，包括以下步骤：创建自定义背景层：封装预置的多个动态主题并为其设置标准接口；创建地图层：配置地图信息和业务数据信息，根据所述地图信息绘制地图数据图表及根据所述业务数据信息制作事件响应；封装地图层并定义内部数据接口；创建数据交互呈现层：配置背景编辑器和图表模块，所述背景编辑器支持用户选择自定义背景层中封装的动态主题及参数，渲染主题背景；所述图表模块用于根据渲染的主题背景以及地图层传输的地图数据图表和事件响应数据绘制数据图表；封装图表子模块并设置通用字段接口。优选的，上述搭建方法，创建自定义背景层具体包括：创建主题管理对象，设置默认动态主题的配置参数；封装所述动态主题的各图层并提供标准接口；渲染默认动态主题及背景参数。优选的，上述搭建方法，创建地图层具体包括：采用地图管理对象管理地图事件，包括地图信息和业务数据信息；根据所述地图信息绘制区级行政区、街道行政区和社区，根据经纬度信息形成周界范围；依据筛选条件查询所选范围内的数据项，并根据设置数据接口将所述数据项传输给数据交互呈现层来绘制界面图形。优选的，上述搭建方法，创建数据交互呈现层包括：创建图表类管理数据呈现，封装图表模块对应的配置文件并将每个图表模块对应的id、title、以及模块显示方法method等保存到变量unit；根据所述配置文件生成显示模块菜单、界面模块显示以及各图表模块的共用方法；在每个图表模块外嵌套两个div标签，分别用于与拖拽模块、接收拖拽模块进行交互响应。优选的，上述搭建方法，所述动态主题的标准接口包括动画html元素dom获取、动画效果相关参数定义、动画效果相关参数设置、启动动画和停止动画。总体而言，通过本专利技术所构思的以上技术方案与现有技术相比，能够取得下列有益效果：(1)本专利技术以大屏信息呈现可划分为3个层级为依据，将B/S架构大屏数据可视化系统的前端重构分解为三个标准化结构：底部自定义背景层预设多款主题，用户可自由选择主题及配置动画参本文档来自技高网...

【技术保护点】
1.一种可视化大屏系统的前端装置，其特征在于，包括：/n自定义背景层，用于封装多个供用户选择的动态主题并提供标准接口，渲染默认或用户自定义的动态主题并将其呈现在地图层的底层；/n地图层，用于根据地图信息绘制地图图形和LBS位置数据，并基于业务数据信息实时显示人员、楼宇、设备或业务的参数信息；/n数据交互呈现层，用于根据地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。/n

【技术特征摘要】
1.一种可视化大屏系统的前端装置，其特征在于，包括：
自定义背景层，用于封装多个供用户选择的动态主题并提供标准接口，渲染默认或用户自定义的动态主题并将其呈现在地图层的底层；
地图层，用于根据地图信息绘制地图图形和LBS位置数据，并基于业务数据信息实时显示人员、楼宇、设备或业务的参数信息；
数据交互呈现层，用于根据地图层传输的地图图形和事件响应数据绘制数据图表并进行显示。


2.如权利要求1所述的前端装置，其特征在于，所述数据交互呈现层包括背景编辑器和至少一个图表模块；
所述背景编辑器响应于用户输入的动态主题切换指令从自定义背景层中选择动态主题，生成新的主题类型并进行渲染显示；所述动态主题选择指令中包括主题ID、该主题ID的配置参数以及背景色；
所述图表模块用于根据渲染的主题背景以及地图层传输的地图图形和事件响应数据绘制具有用户自定义主题背景的数据图表并进行显示。


3.如权利要求2所述的前端装置，其特征在于，所述数据交互呈现层还包括图表控制器；
所述图表控制器用于生成图表模块菜单并显示，响应于用户绘制的图表模块拖拽轨迹调整各图表模块的位置分布。


4.如权利要求1或3所述的前端装置，其特征在于，所述地图层和数据交互呈现层之间具有数据双向传输；
数据交互呈现层将绘制的数据图表呈现在地图层上，根据所述数据图表反向在地图层上绘制时间、位置、概要信息；地图层响应于用户设置的数据筛查范围对地图信息和/或业务信息进行筛选，并将筛选结果呈现在数据交互呈现层上。


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


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

【专利技术属性】
技术研发人员：陈亮，钟卫为，曾珏，张龙，曾华，李炽银，黄晓艳，
申请(专利权)人：武汉虹信技术服务有限责任公司，
类型：发明
国别省市：湖北;42