一种基于社区的数据大屏可视化系统的构建方法与流程

1.本发明涉及数据可视化技术领域，更具体地说，涉及一种基于社区的数据大屏可视化系统的构建方法。


背景技术：

2.目前市场上有较多的数据大屏可视化系统。可视化系统一般以配置独立大屏作为目标，丰富大屏的内容并发布，以完成用户对于数据可视化需求的实现。
3.但是在社区的大屏数据可视化需求场景中，存在以下缺点：
4.1.社区维度包含不同类型的用户权限划分，如社区-街道-园区级角色，每一级角色均有不同的数据可视化需求；
5.2.社区级垂直管理权限需求，如社区级角色可以看到社区、街道以及园区的数据大屏，街道级角色可以看到街道以及园区级大屏，园区级只能看到自己的大屏；
6.3.每一级角色会有不同的大屏场景需求，如综合态势、教育版块、生活版块等等，需要将若干个大屏组合为一个综合数据展示大屏。
7.综合以上三个方面，传统的大屏可视化系统将无法很好的适用于社区的场景中，基于此问题，需要开发能够更好的适配于社区维度的数据可视化大屏系统构建的方法。


技术实现要素：

8.1.要解决的技术问题
9.针对现有技术中存在的问题，本发明的目的在于提供一种基于社区的数据大屏可视化系统的构建方法，它可以实现大屏可视化同社区更好的融合，匹配社区场景的工作空间、版本、场景需求，便于社区的垂直管理。
10.2.技术方案
11.为解决上述问题，本发明采用如下的技术方案。
12.一种基于社区的数据大屏可视化系统的构建方法，包括以下步骤：
13.s1、建立多层级的树状工作空间管理维度；
14.s2、基于工作空间建立多版本管理，以满足社区的不同版本的大屏需求；
15.s3、基于版本建立树状多场景管理，以满足同一大屏显示不同空间层级不同场景的大屏需求；
16.s4、基于场景建立大屏管理，每个场景下可以存在多个大屏，但是同时只能发布一个大屏；
17.s5、对场景下的大屏根据用户自身的数据可视化需求进行管理配置，在此之前需要先完成数据可视化最小单元即可视化组件的封装；
18.s6、建立可视化大屏编辑器；
19.s7、选择组件，并将组件在大屏编辑器中进行组合，配置组件宽高、图层顺序、组件属性、组件数据源；
20.s8、通过数据大屏可视化系统提供的环境变量的功能可快速的完成组件数据源的配置过程；
21.s9、操作完成预览大屏，确认无误之后发布大屏即可；
22.s10、发布之后，用户可以选择在数据大屏可视化系统直接预览或者使用数据大屏可视化系统提供的npm edata-preview接入到三方系统中。
23.edata-preview用于将基于园区的数据可视化大屏以组件化的方式接入到第三方系统的插件中，相比于页面嵌套的方式，该方式的接入会有更好的交互体验以及较高的性能。
24.进一步的，s2中基于工作空间下的版本可以创建一个或多个环境，每个环境下可以新增一个或多个当前环境下的变量映射，变量为variable值为value；在基于工作空间下的版本下的环境之外，定义一个基于系统级的全局环境，全局环境可以在任意工作空间的版本下使用。
25.进一步的，s5中可视化组件的封装包括以下步骤：
26.a1、对常用的组件进行封装，确定组件分组及分类，如图表类-柱状图；
27.a2、设计组件属性及组件属性对应的渲染配置组件类型；
28.a3、设计组件数据源；
29.a4、发布组件到npm仓库；
30.a5、将已发布的组件添加到大屏可视化系统的组件列表，供可视化大屏编辑器选择并使用。
31.进一步的，a3中将组件发布到npm仓库中的方式为：将组件通过npm run build命令进行组件代码语法校验及组件单元测试，组件代码语法校验及组件单元测试均通过之后会进行组件代码编译，随后可通过npm run publish选择需要发布的组件版本发布到npm edata-charts仓库中。
32.进一步的，s6中的可视化大屏编辑器包括以下模块：
33.b1、图层管理：管理编辑器中已经添加的可视化组件，图层包含置顶、置底、上移一层、下移一层、成组、取消成组、锁定、解锁、显示、隐藏、复制样式、应用样式、复制数据、应用数据、重命名、复制、收藏和删除功能；
34.b2、组件管理：显示所有支持的数据可视化组件，包含常规图表(柱状图、折线图、饼图等)、文本、媒体、事件、应用区、列表等模块；
35.b3、可视化操作管理：从组件列表中拖动组件到该区域，可任意组合组件并进行组件样式及数据源配置进行自定义大屏；
36.b4、属性面板管理：对大屏、组件/组属性、数据源进行自定义配置；
37.b5、工具栏：滤镜、过滤器、组件检索、辅助线、跨屏拷贝、快照、发布管理、帮助中心及预览。
38.进一步的，通过数据过滤器的过滤器规则完成对数据源的自定义配置，以满足不同社区不同业务场景的需求。
39.进一步的，通过b5工具栏中快照模块为保证大屏的稳定版本的保障，用户可以将任意时间节点编辑的大屏保存为快照并发布，生产环境接入的大屏显示的版本为该快照对应的版本，后续下一次快照发布之前的任意操作均不会影响当前稳定版本的数据展现。
40.进一步的，s7中选择组件的方式为：包括以下步骤：
41.c1、从标准组件库中选择图表、文本、列表或交互基础组件；
42.c2、从用户收藏的组件中选择一个基础组件或一组组合组件；
43.c3、从其他数据可视化大屏选择一个或多个需要的组件通过“跨屏拷贝”功能拷贝到用户的数据可视化大屏中；
44.c4、从组件市场中选择官方、其他用户发布的一个或多个组件的组合并点击复制，在用户的数据可视化大屏中粘贴即可使用组件市场的组件。
45.进一步的，s7中组件数据源包括静态数据、api接口、websocket推送和csv数据；可通过字段映射对数据源做字段转换，以满足不同组件对数据格式的不同需求。
46.进一步的，s10中使用数据大屏可视化系统提供的npm edata-preview接入到三方系统中的步骤为：首先通过npm install edata-preview安装插件；安装完成后通过import previewer from
‘
edata-preview’引入组件；最后引入《previewer{...props}/》即可完成系统的接入；
47.其中props属性描述如下：
48.d1、提供一个可供可视化大屏显示的容器，如document.getelementbyid(“screen”)；
49.d2、可视化大屏实例id，此id在数据大屏可视化系统中可以直接拷贝；
50.d3、图表是否可见visible，通过此属性可控制是否显示可视化大屏中的图表；
51.d4、接入可视化大屏模式：preview-预览模式；publish-发布模式，同时满足用户在调试阶段的所见即所得及线上环境的稳定发布版本的需求；
52.d5、接入可视化大屏环境：dev-测试环境；prod-线上环境，同时满足用户在测试环境调试可视化大屏组件属性及数据源以及线上环境的稳定发布版本的需求；
53.d6、是否开始调试模式：开启后将会在控制台打印调试信息，以辅助用户更好的完成可视化大屏的制作过程。
54.3.有益效果
55.相比于现有技术，本发明的优点在于：
56.(一)本方案可以实现大屏可视化同社区更好的融合，匹配社区场景的工作空间、版本、场景需求，便于社区的垂直管理。
57.(二)基于社区的数据大屏可视化系统发明了组件市场的概念。用户可以方便地从组件市场中选择自己需要的组件，同时也可以把自己的组件发布到组件市场，避免了用户每次需要花费大量的时间调整大屏组件的属性、数据源以及布局等。
58.(三)基于社区的数据大屏可视化系统发明了将数据大屏可视化作为服务接入到三方系统的模式。一般数据大屏可视化系统使用均需要基于可视化平台，无法独立运行。本系统通过npm edata-preview插件可以非常方便地将数据大屏可视化服务接入到任意三方系统中。
59.(四)基于社区的数据大屏可视化系统发明了环境变量融入数据大屏可视化的管理方式，解决了用户在配置数据大屏可视化的过程中所遇到的组件数据源重复定义耗时较多及调试成本高的问题。
附图说明
60.图1为本发明的流程图；
61.图2为本发明的编辑器组件数据源数据处理过程图。
具体实施方式
62.请参阅图1-2的一种基于社区的数据大屏可视化系统的构建方法，它包括以下步骤：
63.s1、建立多层级的树状工作空间管理维度(如社区-街道-园区)；
64.s2、基于工作空间建立多版本管理，以满足社区的不同版本的大屏需求；
65.s3、基于版本建立树状多场景管理，以满足同一大屏显示不同空间层级不同场景的大屏需求；
66.s4、基于场景建立大屏管理，每个场景下可以存在多个大屏，但是同时只能发布一个大屏；
67.s5、对场景下的大屏根据用户自身的数据可视化需求进行管理配置，在此之前需要先完成数据可视化最小单元即可视化组件的封装；
68.s6、建立可视化大屏编辑器；
69.s7、选择组件，并将组件在大屏编辑器中进行组合，配置组件宽高、图层顺序、组件属性、组件数据源；
70.s8、通过数据大屏可视化系统提供的环境变量的功能可快速的完成组件数据源的配置过程；
71.s9、操作完成预览大屏，确认无误之后发布大屏即可；
72.s10、发布之后，用户可以选择在数据大屏可视化系统直接预览或者使用数据大屏可视化系统提供的npm edata-preview接入到三方系统中。
73.s2中基于工作空间下的版本可以创建一个或多个环境，每个环境下可以新增一个或多个当前环境下的变量映射，变量为variable值为value；在基于工作空间下的版本下的环境之外，定义一个基于系统级的全局环境，全局环境可以在任意工作空间的版本下使用。
74.一般数据大屏可视化系统用户在配置组件数据的过程中，会包含大量重复的数据，比如：数据源请求地址、数据权限校验码等。在数据大屏可视化的编辑过程中，在任意组件数据源的编辑过程中对于需要重复定义的数据可以使用变量映射来替代。如在配置过程中可以使用类似：{{base_api_path}}/api/chart/linechartsdata的定义组件数据源的api配置，解析的过程中会将{{base_api_path}}替换为用户定义的实际路径，从而解决用户在配置数据大屏可视化的过程中所遇到的重复定义的问题。在切换环境的过程中{{base_api_path}}会被替换为当前所选择的环境中此变量映射的实际值，从而解决用户在多环境中需要频繁修改组件数据源配置的过程。
75.s5中可视化组件的封装包括以下步骤：
76.a1、对常用的组件进行封装，确定组件分组及分类，如图表类-柱状图；
77.a2、设计组件属性及组件属性对应的渲染配置组件类型；
78.a3、设计组件数据源；
79.a4、发布组件到npm仓库(组件版本遵循semver规范，组件根据组件类型按单独对
象导出，如export{default as basiclinechart}from'./components/charts/basiclinechart'；便于使用的同时保持较高的渲染性能)；
80.a5、将已发布的组件添加到大屏可视化系统的组件列表，供可视化大屏编辑器选择并使用。
81.a2中的组件属性渲染方式如下表：
[0082][0083][0084]
a3中组件数据源的源代码如下：
[0085]
{
[0086]
description:string；//描述
[0087]
data:any；//静态数据
[0088]
fields:record《string,any》；//字段定义
[0089]
fieldsmap？:record《string,any》；//字段动态映射
[0090]
usefilter？:boolean；//是否使用过滤器
[0091]
filters？:{id:string；enable:boolean}[]；//当前图层使用的过滤器
[0092]
type:'static'|'api'|'websocket'；//当前使用的数据源类型
[0093]
api？:string；//api地址
[0094]
usewebsocket？:boolean；//是否使用websocket数据源
[0095]
websocketurl？:string；//websocket地址
[0096]
headers？:string；//headers
[0097]
useproxy？:boolean；//是否使用服务器代理
[0098]
autoupdate？:{//自动更新接口配置
[0099]
enable？:boolean；
[0100]
interval？:number；
[0101]
}；
[0102]
}
[0103]
a3中将组件发布到npm仓库中的方式为：将组件通过npm run build命令进行组件代码语法校验及组件单元测试，组件代码语法校验及组件单元测试均通过之后会进行组件代码编译，随后可通过npm run publish选择需要发布的组件版本发布到npm edata-charts仓库中。
[0104]
s6中的可视化大屏编辑器包括以下模块：
[0105]
b1、图层管理：管理编辑器中已经添加的可视化组件，图层包含置顶、置底、上移一层、下移一层、成组、取消成组、锁定、解锁、显示、隐藏、复制样式、应用样式、复制数据、应用数据、重命名、复制、收藏和删除功能；
[0106]
b2、组件管理：显示所有支持的数据可视化组件，包含常规图表(柱状图、折线图、饼图等)、文本、媒体、事件、应用区、列表(等)模块；
[0107]
b3、可视化操作管理：从组件列表中拖动组件到该区域，可任意组合组件并进行组件样式及数据源配置进行自定义大屏；
[0108]
b4、属性面板管理：对大屏、组件/组属性、数据源进行自定义配置；
[0109]
b5、工具栏：滤镜、过滤器、组件检索、辅助线、跨屏拷贝、快照、发布管理、帮助中心及预览。
[0110]
大屏的任意配置属性更新，及组件的新增、删除、缩放、移动、属性变更、数据源变更等任意操作，均会同步到服务端进行更新，保持大屏编辑面板的数据同步；同时，基于单向数据流下的数据结构，组件的任何操作均是可以撤销/回退的；如下源代码中的撤销栈状态树：
[0111]
{
[0112]
past:[],//撤销栈的历史状态
[0113]
present:object,//当前的状态
[0114]
feature:[],//撤销栈的未来状态
[0115]
}
[0116]
在组件状态变更的时候均会记录状态树的past历史状态，preset当前状态以及feature未来的状态，可以方便的实现撤销/重做的功能。
[0117]
通过数据过滤器的过滤器规则完成对数据源的自定义配置，以满足不同社区不同业务场景的需求；其中过滤器规则如下所示：
[0118]
过滤器写法:
[0119]
1、接口定义如下，框架只传入一个变量data，过滤器需要返回经过处理后的data：
[0120]
function(data){
[0121]
//do something...
[0122]
return data；
[0123]
}
[0124]
2、只需要写函数体(function body)，如上例只需要写入：
[0125]
//do something...
[0126]
return data；
[0127]
3、已内置moment(moment)、lodash(_)工具类支持，可直接使用。
[0128]
4、仅允许访问部分全局对象:
[0129]
object、array、date、math、parseint、parsefloat、string、regexp、boolean、json.
[0130]
通过b5工具栏中快照模块为保证大屏的稳定版本的保障，用户可以将任意时间节点编辑的大屏保存为快照并发布，生产环境接入的大屏显示的版本为该快照对应的版本，后续下一次快照发布之前的任意操作均不会影响当前稳定版本的数据展现；其中生产环境指的是测试环境和稳定运行的环境。
[0131]
s7中选择组件的方式为：包括以下步骤：
[0132]
c1、从标准组件库中选择图表、文本、列表或交互(等)基础组件；
[0133]
c2、从用户收藏的组件中选择一个基础组件或一组组合组件；
[0134]
c3、从其他数据可视化大屏选择一个或多个需要的组件通过“跨屏拷贝”功能拷贝到用户的数据可视化大屏中；
[0135]
c4、从组件市场中选择官方、其他用户发布的一个或多个组件的组合并点击复制，在用户的数据可视化大屏中粘贴即可使用组件市场的组件。
[0136]
s7中组件数据源包括静态数据、api接口、websocket推送和csv数据；可通过字段映射对数据源做字段转换，以满足不同组件对数据格式的不同需求。
[0137]
s10中使用数据大屏可视化系统提供的npm edata-preview接入到三方系统中的步骤为：首先通过npm install edata-preview安装插件；安装完成后通过import previewer from
‘
edata-preview’引入组件；最后引入《previewer{...props}/》即可完成系统的接入；
[0138]
其中props属性描述如下：
[0139]
d1、提供一个可供可视化大屏显示的容器，如document.getelementbyid(“screen”)；
[0140]
d2、可视化大屏实例id，此id在数据大屏可视化系统中可以直接拷贝；
[0141]
d3、图表是否可见visible，通过此属性可控制是否显示可视化大屏中的图表；
[0142]
d4、接入可视化大屏模式：preview-预览模式；publish-发布模式，同时满足用户在调试阶段的所见即所得及线上环境的稳定发布版本的需求；
[0143]
d5、接入可视化大屏环境：dev-测试环境；prod-线上环境，同时满足用户在测试环境调试可视化大屏组件属性及数据源以及线上环境的稳定发布版本的需求；
[0144]
d6、是否开始调试模式：开启后将会在控制台打印调试信息，以辅助用户更好的完成可视化大屏的制作过程。
[0145]
下表为三方系统接入方式表：
[0146][0147]
本发明适用于包含社区的多场景的大屏管理：
[0148]
(1)自定义空间结构：将空间结构设计为自定义的层级结构，将更容易同社区实际空间、管理结构同步，实现垂直化管理。
[0149]
(2)空间多版本支持：作为数据大屏可视化系统在接入社区管理体系可以实现不同阶段下管理者对于同一个空间的不同数据展现维度的需求。
[0150]
(3)版本自定义场景支持：用户自由添加需要展示的场景，可以在同一张大屏中从不同的维度展现园区的大屏数据。
[0151]
本发明的数据大屏可视化系统的构建方法可完成基础大屏可视化的功能，可完成了6类54个组件的接入，以及部分社区级组件的接入。