CN112130943A - 一种自定义可视化布局设计的方法 - Google Patents

Abstract

本发明公开一种自定义可视化布局设计的方法，该方法包括：布局设置界面初始化加载；选择好需要显示的组件及初始化的网格属性后，按属性值和选择的组件按顺序显示在网格中，此时编排显示组件的二次设置，上述编排随时改变配置数据，最终用户保存好设置数据；在对布局组件的二次设置结束后，对每个组件的功能进行设置；无需预览，编排即所见，保存可视化组件布局数据，即完成一份用户自定义的可视化页面的设计；最终用户登录系统显示的可视化页面根据登录用户的鉴权信息显示的即为该用户之前设置的组件布局页面。该方法对于根据业务数据具备展现能力的图表，在布局中可以灵活调整宽高、位置、操作等，并最终实现一个完整的可视化页面。

Description

一种自定义可视化布局设计的方法

技术领域

本发明涉及IT可视化领域，尤其是一种自定义可视化布局设计的方法，主要应用于IT领域中的可视化展现的布局设计配置功能，服务于应用中实际展现的可视化图表。

背景技术

当下IT系统中，可视化图表的展现形式越来越复杂，而每一个图表的开发基本是以组件的形式进行开发，从UI设计到生成完整页面渲染的整体可视化视图；根据用户需求经常会反复对视图进行修改，甚至有的系统需求会将不同的视图组件进行编排和组合形成用户个性化的视图。传统可视化的页面中缺乏灵活的调整以及对视图的组合编配能力，而开发中除了要对视图组件进行打磨外，仍需要对整体视图外部容器的布局进行调整，增加了整体视图网格和业务组件的耦合，导致每一个业务视图组件无法合理抽离复用，而可支持用户的编排更无从谈起。

目前传统可视化布局存在以下五个问题：

1.可视化视图无法按组件形式进行抽象封装，所有组件和最终展现的全局网格紧耦合，只能满足定制的场景，在进行修改时，需要抽出精力调整布局，并需要承担由此给视图组件带来的修改工作量。

2.无组件配置功能或数据和视图布局配置分离，无法很好的达到所见即所得的效果，反复的配置预览无法很顺畅地进行配置，进而增加了工作量；在可以支持视图组件的前提下，仍旧无法合理编配每一个视图的大小宽高、位置、操作等信息，不能满足用户视图编排的需求。

3.整体布局方法给在网格中的所有组件没有约定属性，不同组件规范不统一，不利于后期组件维护和复用。

4.对浏览器的自适应和展现形式不友好，由于可视化的页面对数据、节点渲染操作较频繁，导致整体渲染慢，浏览器缩放整体视图布局容易变形。

5.没有提供一些公共的对视图组件的操作，针对通用场景提供通用的视图组件。

发明内容

为克服目前传统可视化布局存在的上述问题，本发明提供一种自定义可视化布局设计的方法。

为实现上述目的，本发明采用下述技术方案：

在本发明一实施例中，提出了一种自定义可视化布局设计的方法，该方法包括：

布局设置界面初始化加载，加载可供选择的业务模块中的组件及对应初始化布局网格的设置；

选择好需要显示的组件及初始化的网格属性后，按属性值和选择的组件按顺序显示在网格中，此时编排显示组件的二次设置，上述编排随时改变配置数据，最终用户保存好设置数据；

在对布局组件的二次设置结束后，对每个组件的功能进行设置；

无需预览，编排即所见，保存可视化组件布局数据，即完成一份用户自定义的可视化页面的设计；

最终用户登录系统显示的可视化页面根据登录用户的鉴权信息显示的即为该用户之前设置的组件布局页面。

进一步地，初始化布局网格的设置中包括全屏的网格宽度、每个网格的高度、具体每个拖拽组件之间间隔和主题颜色。

更进一步地，全屏的网格宽度为屏幕的显示像素，默认分为24等分；所述每个网格的高度，默认20px；所述具体每个拖拽组件之间间隔，默认30px。

更进一步地，主题颜色包括柱、线图的渐变颜色以及字体颜色。

更进一步地，具体每个拖拽的组件按照当前浏览器宽度计算出实际渲染的组件宽度。

进一步地，可供选择的业务模块中的组件是多选的，同时选择多个需要显示的组件。

进一步地，编排显示组件的二次设置，包括：

任意拖拽组件的位置及大小，默认24等分，在默认显示时每行显示三个组件，当调整每个组件的宽度时，若超过24等分，第三个组件将无法在第一行显示下，被自动放置到第二行，后续组件将自动向后移动，或者减小第三个组件所占空间；当调整每个组件的高度时，将下面的组件向下自动移动，每次组件的位置移动会自动计算组件所占的BoundingBox的所占空间，盒子大小空间超过排布空间的大小，会顺序往后移动。

进一步地，配置数据中是按等分来记录组件在布局网格中的占比。

进一步地，最终用户保存好设置数据包含初始化数据、显示组件数据以及通过组件位置变化和拖拽组件大小设置的宽高而保存的布局数据。

进一步地，对每个组件的功能进行设置，包括：

开放哪些组件具有最大化、重新加载数据或组件显示内部的设置。

有益效果：

1.更好地支持了组件视图的自适应，按组件方式渲染提升整体页面体验。

2.优化了视图组件的基础配置，更简单地接入业务数据进行展现，提升组件复用性，组织更规范。

3.支持视图的编排，操作直观、简单，可以任意进行缩放和拖拽，并且使布局数据和视图效果一致。

4.支持基本的最大化、刷新数据、变更主题等功能，可灵活配置是否开放这些操作。

附图说明

图1是本发明一实施例的自定义可视化布局设计的方法流程示意图；

图2是本发明一实施例的组件的布局变化示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神，应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种自定义可视化布局设计的方法，主要为了给可视化的视图页面提供一种布局灵活调整的手段，对于根据业务数据具备展现能力的图表，在布局中可以灵活调整宽高、位置、操作等，并最终实现一个完整的可视化页面。当下前端的开发中，基本是以业务数据和视图Dom双向绑定的形式存在，因此为了让开发可以将更多的精力集中在数据处理上，提供了公共的基于Echarts的配置项内置于布局组件中，包括饼图、折线图、柱状图等基本的配置，外部只需要将展现图表的类型和灵活的配置项及业务数据传递即可；另外由于Dom和数据的双向绑定，编排布局的过程中可以支持随时记录不同组件的宽高(实际像素值或比例)和位置，并将此部分的配置数据和视图的配置项数据合并最终持久化保存为配置数据，业务数据都是通过外部的业务接口进行获取传递，布局组件主要负责视图的布局数据和视图展现配置项数据，这样可以达到组件的合理抽象，另外组件内部也是需要满足外部布局方法中的一些约定，比如需要支持内部视图的监听浏览器缩放事件；另外开放了一些展现的操作，包括：组件最大化展示、组件数据刷新、皮肤切换等，内部组件可以不用实现这些方法，但是如果需要可以支持，并且支持内部的自定义这些方法。

本发明的具体步骤如下：

1.布局设置界面初始化加载，在此步骤中，主要是加载可供选择的业务模块中的组件及对应初始化布局网格的设置，默认设置中包括了默认全屏的网格宽度，即将屏幕的显示像素默认分为24等分，每个网格的高度，默认20px，具体每个拖拽组件之间间隔，默认30px，默认的主题颜色，主题颜色包括柱、线图的渐变颜色(渐变起始、渐变终止)及字体颜色等，可选业务组件是多选的，可以同时选择多个需要展示的组件。

2.选择好需要显示的组件及初始化的网格属性后，点击确定，就会按属性值和选择的组件按顺序显示在网格中，这个时候是灵活编排显示组件的二次编辑过程，可以任意拖拽组件的位置及大小，默认24等分，会在默认显示时每行显示三个组件，当调整每个组件的宽度时，如果超过24等分，比如第一个为栅格为10时，第三个组件将无法在第一行显示下，会被自动放置到第二行，后续组件将自动向后移动；或者减小第三个组件所占空间；同样调整一个组件的高度会将下面的组件向下自动移动，每次组件的位置移动都会自动计算组件所占的BoundingBox的所占空间，盒子大小空间超过排布空间的大小都会顺序往后移动，以上的编排都会随时改变配置数据，而最终用户保存的设置数据除了包含初始化数据、展示组件数据，最重要的就是通过组件位置变化和拖拽组件大小设置的宽高而保存的布局数据。

3.在对布局组件的二次设置结束后，对每个组件的功能进行设置，即可以开放哪些组件具有最大化、重新加载数据或组件显示内部的设置(比如：是否显示图表图例)。

4.无需预览，编排即所见，最终编排的结果基本没有通过表单或数据输入形式进行微调设置，而且可以达到自适应的效果，即不会出现在显示和编排页面窗口大小不同而显示异常的问题，最终用户点击确认，保存可视化组件布局数据，这样一份用户自定义的可视化页面就设计好了。

5.最终用户登录系统显示的可视化页面根据登录用户的鉴权信息显示的就是该用户之前设置的组件布局页面。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

图1是本发明一实施例的自定义可视化布局设计的方法流程示意图。如图1所示，具体流程如下：

1.布局初始设置：主要操作选择需要显示的业务组件，布局网格的一些初始参数设置，比如：主题颜色设置，宽度网格设置即屏幕像素等分及高度网格设置即每个高度代表多少像素，组件显示的间隔，拖拽或缩放是否开放。

2.初始化设置好后组件的默认布局就生成了，此时需要进行二次编辑，即拖拽变换组件布局位置及缩放每个组件的宽度和高度来达到用户要求的布局样式，当然此时也可以改变第一步的设置信息。

3.布局设置好后，对每个组件的开放功能进行设置，比如包括组件最大化展示和数据刷新，如果设置为是，则会在每个组件的工具条栏显示对应操作的图标供用户操作使用。

4.保存对应的初始设置、布局设置、操作权限设置的数据，此部分的数据和用户的登录信息关联，即在显示该用户最终视图的配置数据。

图2是本发明一实施例的组件的布局变化示意图。如图2所示，通过拖拽对布局中的组件位置和大小进行了重新布局展示；通过参数配置调整了整体的组件间距。

需要说明的是，尽管在上述实施例及附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

为了对上述自定义可视化布局设计的方法进行更为清楚的解释，下面结合一个具体的实施例来进行说明，然而值得注意的是该实施例仅是为了更好地说明本发明，并不构成对本发明不当的限定。

下面举例来展示本发明的自定义可视化布局设计的方法，具体如下：

某项目的大屏可视化展现

1.打开布局配置控制台页面，页面中会下拉框显示出当前可以选择展现的组件列表，另外初始化配置显示：宽度网格数，默认24；高度网格像素，默认20；组件间隔，默认30Px；默认主题颜色，主题颜色为可选，组件内部可以不接受外部的主题颜色设置。勾选需要大屏中显示的业务组件，并设置初始化布局数据，点击确定，网格区域或直接显示格局默认网格配置的组件，目前是按照勾选组件的顺序和初始化设置默认显示的布局。

2.直接拖拽每一个组件进行位置的变化，每个组件的左下角进行拉伸调整每个组件的宽高，拖拽、缩放方式直接取代原来的表单数据设置每个组件的位置和宽高，这样带来的直接好处是可以所见即所得，即不用每次调整数据后反复预览微调，这样配置繁琐且不够直观，而且对于布局网格中组件的拖拽和拉伸动作都有监听，目的是达到用户操作组件调整和配置数据变化的联动，这样最终可视化配置的结果会最终体现在布局数据上。

3.组件操作配置，对每个组件的最大化功能、数据刷新、组件展现设置进行权限分配，比如某些组件不需要给用户开放最大化的功能，可以在这个组件的配置中关闭此功能。

4.点击保存布局数据，从而保存最终用户的初始化数据、布局数据、操作配置数据，用以最终大屏设置的内容和用户设置对应，由于最终保存的数据是初始设置的网格单元大小和所占宽高网格数，所以最终显示的时候不会受制于屏幕分辨率的变化，即每个组件都是根据网格划分的像素大小自动分配的空间，这样就不会带来因为分辨率不同而导致的组件位置不正确或布局错位的现象。

本发明提出的自定义可视化布局设计的方法的优点如下：

1.视图组件化，合理和承载的布局页面隔离，减小耦合，提升渲染

(1)将不同组件的公共属性，即布局时会用到的宽度、高度、位置信息抽象为公共属性，在给每一个视图中的组件增加拖拽事件监听和组件元素resize缩放监听，在进行视图组件开发的时候支持以上公共属性和事件用以拖拽编排的变更，给以上公共属性均设置默认值避免在视图进行编排时展现效果不正确。

(2)由于是按组件进行加载，缩小了页面的渲染片元，原来是通过整体页面的dom变化会影响浏览器加载速度，而每个组件的渲染不会影响整体的页面打开速度提升用户体验。

2.布局适应，灵活拖拽变更位置及缩放来满足视图组件的编配

(1)布局按整体浏览器的内部宽度默认均分为24等分，这个等分数量可以灵活设置，拖拽配置的组件可以按照当前浏览器宽度计算出实际渲染的组件宽度，但是配置数据中是按等分来记录组件在布局网格中的占比，比如6代表宽度为当前浏览器宽度的1/4。

(2)高度同样是按单元进行计算，即一个单元的所占像素值来进行计算，默认是按一个单元10像素来计算，高度单元像素值可以灵活设置，配置记录的布局信息中高度也同样是按单位单元来进行记录，比如10代表100像素。

(3)可以设置组件布局间隔，默认间隔10像素，可以灵活设置，一般组件间都是需要有一定间隔的，这部分数据可以通过网格进行统一设置，保证布局统一，而在设置间隔后对于整体布局中的宽度和高度会统一重新计算，视图组件会根据之前的宽高单位进行位置的变化。

(4)碰撞检测，即在进行不同组件的缩放和位置移动时触发的布局网格计算，在进行某一组件的缩放时，会根据给当前组件设置的宽度和高度，再依据行等分和高度像素值进行计算，如果当前行的组件合计宽度已经超越等分数量，则会发生组件dom碰撞，计算发生碰撞后需要将后面的组件自动移动至下一行展现。

(5)缩放监听是针对图表的resize支持，如果不是图表类的组件，则需要满足内部Dom元素的自适应即可正常显示。

(6)配置可视化操作和布局配置数据是所见即所得的，原因是数据和视图的双向绑定，在编排操作时就对宽度、高度、位置信息进行了计算，最终的保存数据不需要在进行处理，便于对配置数据进行持久化保存。

3.支持组件外部操作

视图组件加组件操作区为一个整体的组件单元，外部操作即指组件操作区提供的功能，支持功能如下：

(1)支持组件内部数据刷新，刷新是组件内部对外暴露的方法，也是视图组件和布局组件的约定方法，如果不允许刷新可以屏蔽组件的刷新配置。

(2)组件主题变更，主题颜色可以根据设置进行变化，外部提供给视图组件颜色的设置功能，内部组件可以使用设置的颜色属性。

(3)最大化操作，即将网格中的视图组件放大在网格之前显示，此时要保证在视图中移除了组件后，网格中的组件布局不能打乱，即需要缓存当前视图中最大化视图的宽高、位置等信息，在取消最大化后将缓存的数据应用在当前组件上以保证正确还原布局效果

(4)操作支持配置，即可否支持缩放和拖拽，在进行可视化页面编排时需要支持缩放和移动，而在最终的展示时需要将其关闭，即支持取消缩放和拖拽事件的监听。

虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包含的各种修改和等同布置。

对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (10)

1.一种自定义可视化布局设计的方法，其特征在于，该方法包括：

布局设置界面初始化加载，加载可供选择的业务模块中的组件及对应初始化布局网格的设置；

选择好需要显示的组件及初始化的网格属性后，按属性值和选择的组件按顺序显示在网格中，此时编排显示组件的二次设置，上述编排随时改变配置数据，最终用户保存好设置数据；

在对布局组件的二次设置结束后，对每个组件的功能进行设置；

无需预览，编排即所见，保存可视化组件布局数据，即完成一份用户自定义的可视化页面的设计；

最终用户登录系统显示的可视化页面根据登录用户的鉴权信息显示的即为该用户之前设置的组件布局页面。

2.根据权利要求1所述的自定义可视化布局设计的方法，其特征在于，所述初始化布局网格的设置中包括全屏的网格宽度、每个网格的高度、具体每个拖拽组件之间间隔和主题颜色。

3.根据权利要求2所述的自定义可视化布局设计的方法，其特征在于，所述全屏的网格宽度为屏幕的显示像素，默认分为24等分；所述每个网格的高度，默认20px；所述具体每个拖拽组件之间间隔，默认30px。

4.根据权利要求2所述的自定义可视化布局设计的方法，其特征在于，所述主题颜色包括柱、线图的渐变颜色以及字体颜色。

5.根据权利要求2所述的自定义可视化布局设计的方法，其特征在于，所述具体每个拖拽的组件按照当前浏览器宽度计算出实际渲染的组件宽度。

6.根据权利要求1所述的自定义可视化布局设计的方法，其特征在于，所述可供选择的业务模块中的组件是多选的，同时选择多个需要显示的组件。

7.根据权利要求1所述的自定义可视化布局设计的方法，其特征在于，所述编排显示组件的二次设置，包括：

任意拖拽组件的位置及大小，默认24等分，在默认显示时每行显示三个组件，当调整每个组件的宽度时，若超过24等分，第三个组件将无法在第一行显示下，被自动放置到第二行，后续组件将自动向后移动，或者减小第三个组件所占空间；当调整每个组件的高度时，将下面的组件向下自动移动，每次组件的位置移动会自动计算组件所占的BoundingBox的所占空间，盒子大小空间超过排布空间的大小，会顺序往后移动。

8.根据权利要求1所述的自定义可视化布局设计的方法，其特征在于，所述配置数据中是按等分来记录组件在布局网格中的占比。

9.根据权利要求1所述的自定义可视化布局设计的方法，其特征在于，所述最终用户保存好设置数据包含初始化数据、显示组件数据以及通过组件位置变化和拖拽组件大小设置的宽高而保存的布局数据。

10.根据权利要求1所述的自定义可视化布局设计的方法，其特征在于，所述对每个组件的功能进行设置，包括：

开放哪些组件具有最大化、重新加载数据或组件显示内部的设置。

Images