一种分页面板数据展示方法、装置、电子设备及存储介质与流程

1.本技术涉及数据处理技术领域，具体而言，涉及一种分页面板数据展示方法、装置、电子设备及存储介质。

背景技术：

2.现有的数据展示界面是通过自动触发分页点击完成切换行为，展示当前子级数据，但未能可视展示关联关系，在各级界面轮播过程中，无法清晰展示各级数据的关联关系，在展示界面层级过多、数据量较大的情况下，数据间关联关系混乱。

技术实现要素：

3.本技术实施例的目的在于提供一种分页面板数据展示方法、装置、电子设备及存储介质，对父级展开项以及对应的子级展开项建立关联关系，当轮播至父级展开项的第二页及以下多页时，对当前页进行数据更新、重组处理，达到数据联动展示效果，解决了现有方法数据间关联关系混乱的问题。
4.本技术实施例提供了一种分页面板数据展示方法，所述方法包括：
5.获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；
6.基于所述树形数据结构建立所述设备数据的各级集合；
7.利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；
8.对一级集合中的分页数据进行重组更新，并展示数据界面。
9.在上述实现过程中，利用唯一标识符建立设备数据之间的关联关系，对一级集合中的分页数据进行重组更新，使得当一级面板中的某个设备展开时，自动轮播至下一个分页页码时，二级展开项的父级元素(一级展开项)仍然保持于相同的下标位置，使得各级数据之间的关联关系清晰、明了，解决了现有方法数据间关联关系混乱的问题。
10.进一步地，所述建立所述设备数据之间的关联关系，生成树形数据结构，包括：
11.通过随机数、时间戳和返回状态值生成唯一标识符；
12.基于所述唯一标识符和属性信息生成树形节点，所述属性信息包括子级数据，所述子级数据包括设备名称、设备数量和设备状态。
13.在上述实现过程中，通过唯一标识符建立树形数据结构，利用树形数据结构可直观表示各个设备数据之间的关联关系。
14.进一步地，基于所述树形数据结构建立所述设备数据的各级集合，包括：
15.将所述树形数据结构的父节点对应的一级数据利用预设的分页规则进行分页，得到分页数据；
16.将各分页数据作为所述设备数据的一级集合进行展示；
17.将所述父节点对应的子级数据作为所述一级集合的子级集合进行展示。
18.在上述实现过程中，将树形数据结构表示的设备数据之间的关联关系以父级集合、对应的子级集合的形式展示出来，使得每个层级之间的设备数据的关联关系更加直观。
19.进一步地，在所述利用树形数据结构渲染设备之间的关联关系的步骤之前，所述方法还包括：
20.利用three.js参数初始化分页面板，以创建分页容器并进行分页轮播。
21.在上述实现过程中，创建分页容器，便于同级别的设备数据的分页显示。
22.进一步地，所述利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示，包括：
23.对所述树形数据结构中的一级数据进行三维模型创建；
24.将创建的所述三维模型挂载于视图上进行展示。
25.在上述实现过程中，通过html渲染出设备间关联关系并进行三维模型展示，更加清晰、明了。
26.进一步地，所述对一级集合中的分页数据进行重组更新，包括：
27.轮播至第二分页时，在第一分页的一级展开项处于展开状态下，将第一分页数据排列至第二分页展开项的相应位置处。
28.在上述实现过程中，将第一分页数据在第二分页展开项的相应位置处进行显示，可明确第一分页数据和第二分页数据两者之间的关系。
29.进一步地，所述将第一分页数据排列至第二分页展开项的相应位置处，包括：
30.获取所述第一分页数据在所述树形数据结构中的下标位置；
31.将所述第一分页数据在所述第二分页展开项的相同的下标位置处进行显示。
32.在上述实现过程中，第一分页数据在第二分页展开项的相同的下标位置处进行显示，可更加直观地展示数据关联关系，使得用户能够更加快速地了解设备之间的关联关系以及设备状态。
33.本技术实施例还提供一种分页面板数据展示装置，所述装置包括：
34.数据关联模块，用于获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；
35.数据分级模块，用于基于所述树形数据结构建立所述设备数据的各级集合；
36.渲染模块，用于利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；
37.重组更新模块，用于对一级集合中的分页数据进行重组更新，并展示数据界面。
38.在上述实现过程中，利用唯一标识符建立设备数据之间的关联关系，对一级集合中的分页数据进行重组更新，使得当一级面板中的某个设备展开时，自动轮播至下一个分页页码时，二级展开项的父级元素(一级展开项)仍然保持于相同的下标位置，使得各级数据之间的关联关系清晰、明了，解决了现有方法数据间关联关系混乱的问题。
39.本技术实施例还提供一种电子设备，所述电子设备包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行计算机程序以使所述电子设备执行上述中任一项所述的分页面板数据展示方法。
40.本技术实施例还提供一种可读存储介质，所述可读存储介质中存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行上述中任一项所述的分页面板数据展示方法。
附图说明
41.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本技术的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
42.图1为本技术实施例提供的一种分页面板数据展示方法的流程图；
43.图2为本技术实施例提供的树形数据结构的生成流程图；
44.图3为本技术实施例提供的各级集合的建立流程图；
45.图4为本技术实施例提供的显示界面的示意图；
46.图5为本技术实施例提供的渲染流程图；
47.图6为本技术实施例提供的重组更新流程图；
48.图7为本技术实施例提供的分页面板数据展示装置的结构框图；
49.图8为本技术实施例提供的另一种分页面板数据展示装置的结构框图。
50.图标：
51.100-数据关联模块；101-标识生成模块；102-树形结构生成模块；200-数据分级模块；201-分页模块；202-一级集合模块；203-子级集合模块；300-渲染模块；310-面板初始化模块；301-模型创建模块；302-展示模块；400-重组更新模块；401-下标获取模块；402-重组模块。
具体实施方式
52.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行描述。
53.应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本技术的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。
54.实施例1
55.请参看图1，图1为本技术实施例提供的一种分页面板数据展示方法的流程图。该方法将设备数据之间的关联关系更加清晰的展示出来，通过对各级集合数据进行唯一标识，对当前父级展开项以及对应的子级展开项建立关联关系，父级数据在展开状态下，在父级分页面板轮播过程中，通过记录当前分页面板的展开状态，当轮播至下一页时，对下一页数据进行数据更新、重组处理，达到数据联动展示效果。
56.该方法可通过web浏览器进行可视化展示，生成用于观察设备运行的可视化界面，结合超文本传输协议通信，可以更好的与设备状态关联起来，使其通过web浏览器监控设备和查看设备状态，极大的降低人工成本，实现直观一人多设备监控、实时展示设备状态，出现告警等特殊情况能够及时解决。
57.该方法具体包括以下步骤：
58.步骤s100：获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；
59.如图2所示，为树形数据结构的生成流程图，具体包括以下步骤：
60.步骤s101：通过随机数、时间戳和返回状态值生成唯一标识符；
61.步骤s102：基于所述唯一标识符和属性信息生成树形节点，所述属性信息包括子级数据，所述子级数据包括设备名称、设备数量和设备状态。
62.具体地，通过唯一标识符建立设备数据之间的关联关系，即建立树形数据结构：
63.树形数据结构的父节点为一级数据，还包括属性信息，属性信息包括但不限于域/设备节点的设备名称、设备数量、设备在其所属单位内的状态等，这些属性信息属于子级数据，使得各级设备数据之间建立了关联关系。
64.其中，唯一标识符(id)是通过“随机数+时间戳+返回状态值”生成的唯一字符串，将该字符串作为该数据节点的唯一标识符，将生成的唯一标识符和节点建立组合关系，存储到树形数据结构上，从而建立设备数据的树形数据结构。
65.父级数据通过唯一标识符保证一级数据结构的唯一性，二级数据根据父级设置children属性，且包含其子级数据，依次类推，建立树形结构。
66.步骤s200：基于所述树形数据结构建立所述设备数据的各级集合；
67.如图3所示，为各级集合的建立流程图，具体地：
68.步骤s201：将所述树形数据结构的父节点对应的一级数据利用预设的分页规则进行分页，得到分页数据；
69.步骤s202：将各分页数据作为所述设备数据的一级集合进行展示；
70.步骤s203：将所述父节点对应的子级数据作为所述一级集合的子级集合进行展示。
71.如图4所示，为显示界面的示意图，可通过网络请求获得展示界面进行展示所需的所有设备数据，再根据实际场景所需的分页规则将设备数据进行分页，如将一级数据按照8个为一组进行分页，也可以按照其他任意数为一组进行分页，在此不做任何限定。分页后，可通过点击分页面板上的页数显示当前页面上的设备数据。如图4中的一级数据分页后在一级分页面板对应的页面上进行显示，一级展开项子集合即子级数据分页后在二级分页面板对应的页面(子级集合)上进行显示。
72.树形数据结构的父节点对应的一级数据在一级集合中显示和分页，子节点对应的子级数据在子集合中显示和分页，依次类推，可将树形结构数据在图中进行关联和显示。
73.步骤s300：利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；
74.在步骤s300之前，需要利用three.js参数初始化分页面板，以创建分页容器并进行分页轮播。
75.首先进行分页轮播行为创建，具体实现为：首先，将一级集合中的设备数据根据8个设备/域为一个分页，处理好数据结构后，利用three.js进行场景创建，光源设置，相机机位摆放，并利用渲染器完成界面渲染；将其通过three.js创建平面集合的方式，创建出各分页容器，分页容器设计轮播平面板用于展示当前数据页码，将上述创建添加到场景的视图层。
76.如图5所示，为渲染流程图，步骤s300具体可以包括：
77.步骤s301：对所述树形数据结构中的一级数据进行三维模型创建；
78.步骤s302：将创建的所述三维模型挂载于视图上进行展示。
79.将建立好相互关联关系的树形数据结构，其中的一级数据所含的设备数据进行三维模型创建，导入包括带有设备状态、设备标识文字、设备数量等的数据，结合光源以及相
机等渲染所需元素；创建完成后挂载于视图之上。
80.创建模型时，通过旋转变换方法将三维模型进行位置调整，使得展示模型旋转至合理展示角度。
81.步骤s400：对一级集合中的分页数据进行重组更新，并展示数据界面。
82.轮播至第二分页时，在第一分页的一级展开项处于展开状态下，将第一分页数据排列至第二分页展开项的相应位置处，如图6所示，为重组更新流程图，具体地：
83.步骤s401：获取所述第一分页数据在所述树形数据结构中的下标位置；
84.步骤s402：将所述第一分页数据在所述第二分页展开项的相同的下标位置处进行显示。
85.当点击一级集合中某个设备的设备数据(一级展开项)及其关联子级项时，通过建立的树形数据结构中各节点唯一标识符的关联关系，循环查出当前展开项对应的子级数据，并于一级数据结构中加入请求到的二级数据，建立展开项及其子级数据展示界面。
86.树形数据结构中子级通过父级唯一id建立关联，父级根据其之前关系生成children树形存储子级数据。如：在一级数据展示于一级集合的界面之后，点击一级展开项，出现一级展开项子集合数据时，需要动态请求，即根据其父级标识进行关联获取数据。
87.一级集合中的一级分页面板轮播至第二页时，重组、更新第二页数据项，将第一页中的一级展开项即二级展开项的父级元素，排列至第二页数据的相同下标位置，依次类推，后续页码在一级展开项保持展开状态下，一直显示于后续页码的相同下标位置，下标即一级数据在树形数据结构中所属的位置。
88.其中，数据重组的具体实现过程为：
89.遍历所有的一级数据，并将所有数据按8个一组分成若干组，并出每一组对应一级面板展开项的下标位置，将一级展开数据项进行插入数组操作；完成上述处理后，进行数据合并，重新按8个一组进行数据分组，完成整个数据更新，因此在第二页显示的是第一页数据和第二页数据重组之后的结果。
90.对于每个分组中的个数，可根据设计面板的大小确定，例如，在本技术中的面板所属界面放置8个正好为一屏，为最佳展示状态。
91.数据界面的显示可通过浏览器展示可视化数据界面，通过three.js将三维世界坐标转换成屏幕坐标，通过以上数据计算完成界面初始化，使其被浏览器渲染，展示监控设备可视化界面及实时设备状态信息。本技术结合three.js可实现控制缩放界面大小及界面拖动、缩放等功能。
92.将设备数据进行可视化显示后，用户可直观通过web浏览器观察、监测设备运行情况，结合超文本传输协议通信，可以更好的、更快速的了解到设备状态，及时发现设备各状态，实现直观、同步监控设备。
93.作为其中一种实施方式，该方法可应用于展示关联性数据级联关系的任意布局及方案中，通过请求获取数据库一级数据集合，根据场景所需分页规则，将数据划分为多页，并通过基于three.js创建平面几何作为分页面板，基于three.js创建分页页码文本，当一级面板中的某个设备展开时，自动轮播至下一个分页页码时，一级面板中的设备数据仍然保持于相同的关联位置，用户可直观的查看展示数据关联关系，便于用户更好、更快锁定设备问题。
94.实施例2
95.本技术实施例提供一种分页面板数据展示装置，如图7所示，为分页面板数据展示装置的结构框图，所述装置包括但不限于：
96.数据关联模块100，用于获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；
97.数据分级模块200，用于基于所述树形数据结构建立所述设备数据的各级集合；
98.渲染模块300，用于利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；
99.重组更新模块400，用于对一级集合中的分页数据进行重组更新，并展示数据界面。
100.如图8所示，为另一种分页面板数据展示装置的结构框图，其中，数据关联模块100包括但不限于：
101.标识生成模块101，用于通过随机数、时间戳和返回状态值生成唯一标识符；
102.树形结构生成模块102，用于基于所述唯一标识符和属性信息生成树形节点，所述属性信息包括子级数据，所述子级数据包括设备名称、设备数量和设备状态。
103.通过唯一标识符建立树形数据结构，利用树形数据结构可直观表示各个设备数据之间的关联关系。
104.数据分级模块200包括但不限于：
105.分页模块201，用于将所述树形数据结构的父节点对应的一级数据利用预设的分页规则进行分页，得到分页数据；
106.一级集合模块202，用于将各分页数据作为所述设备数据的一级集合进行展示；
107.子级集合模块203，用于将所述父节点对应的子级数据作为所述一级集合的子级集合进行展示。
108.将树形数据结构表示的设备数据之间的关联关系以父级集合、对应的子级集合的形式展示出来，使得每个层级之间的设备数据的关联关系更加直观。
109.该装置还包括面板初始化模块310，用于利用three.js参数初始化分页面板，以创建分页容器并进行分页轮播。
110.渲染模块300包括但不限于：
111.模型创建模块301，用于对所述树形数据结构中的一级数据进行三维模型创建；
112.展示模块302，用于将创建的所述三维模型挂载于视图上进行展示。
113.重组更新模块400包括但不限于：
114.下标获取模块401，用于获取所述第一分页数据在所述树形数据结构中的下标位置；
115.重组模块402，用于将所述第一分页数据在所述第二分页展开项的相同的下标位置处进行显示。
116.第一分页数据在第二分页展开项的相同的下标位置处进行显示，可更加直观地展示数据关联关系，使得用户能够更加快速地了解设备之间的关联关系以及设备状态。
117.利用唯一标识符建立设备数据之间的关联关系，对一级集合中的分页数据进行重组更新，使得当一级面板中的某个设备展开时，自动轮播至下一个分页页码时，二级展开项
的父级元素(一级展开项)仍然保持于相同的下标位置，使得各级数据之间的关联关系清晰、明了，解决了现有方法数据间关联关系混乱的问题。
118.通过唯一标识符建立树形数据结构，可通过直观界面展示数据关联关系；通过可视化界面及超文本传输协议，实施展示设备当前状态，便于用户更好、更快锁定设备问题。
119.本技术实施例还提供一种电子设备，所述电子设备包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行计算机程序以使所述电子设备执行实施例1所述的分页面板数据展示方法。
120.本技术实施例还提供一种可读存储介质，所述可读存储介质中存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行实施例1所述的分页面板数据展示方法。
121.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本技术的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
122.另外，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
123.所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
124.以上所述仅为本技术的实施例而已，并不用于限制本技术的保护范围，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
125.以上所述，仅为本技术的具体实施方式，但本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本技术的保护范围之内。因此，本技术的保护范围应所述以权利要求的保护范围为准。
126.需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存
在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

技术特征：

1.一种分页面板数据展示方法，其特征在于，所述方法包括：获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；基于所述树形数据结构建立所述设备数据的各级集合；利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；对一级集合中的分页数据进行重组更新，并展示数据界面。2.根据权利要求1所述的分页面板数据展示方法，其特征在于，所述建立所述设备数据之间的关联关系，生成树形数据结构，包括：通过随机数、时间戳和返回状态值生成唯一标识符；基于所述唯一标识符和属性信息生成树形节点，所述属性信息包括子级数据，所述子级数据包括设备名称、设备数量和设备状态。3.根据权利要求1所述的分页面板数据展示方法，其特征在于，基于所述树形数据结构建立所述设备数据的各级集合，包括：将所述树形数据结构的父节点对应的一级数据利用预设的分页规则进行分页，得到分页数据；将各分页数据作为所述设备数据的一级集合进行展示；将所述父节点对应的子级数据作为所述一级集合的子级集合进行展示。4.根据权利要求1所述的分页面板数据展示方法，其特征在于，在所述利用树形数据结构渲染设备之间的关联关系的步骤之前，所述方法还包括：利用three.js参数初始化分页面板，以创建分页容器并进行分页轮播。5.根据权利要求1所述的分页面板数据展示方法，其特征在于，所述利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示，包括：对所述树形数据结构中的一级数据进行三维模型创建；将创建的所述三维模型挂载于视图上进行展示。6.根据权利要求3所述的分页面板数据展示方法，其特征在于，所述对一级集合中的分页数据进行重组更新，包括：轮播至第二分页时，在第一分页的一级展开项处于展开状态下，将第一分页数据排列至第二分页展开项的相应位置处。7.根据权利要求6所述的分页面板数据展示方法，其特征在于，所述将第一分页数据排列至第二分页展开项的相应位置处，包括：获取所述第一分页数据在所述树形数据结构中的下标位置；将所述第一分页数据在所述第二分页展开项的相同的下标位置处进行显示。8.一种分页面板数据展示装置，其特征在于，所述装置包括：数据关联模块，用于获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；数据分级模块，用于基于所述树形数据结构建立所述设备数据的各级集合；渲染模块，用于利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；重组更新模块，用于对一级集合中的分页数据进行重组更新，并展示数据界面。9.一种电子设备，其特征在于，所述电子设备包括存储器以及处理器，所述存储器用于存储计算机程序，所述处理器运行计算机程序以使所述电子设备执行根据权利要求1至7中
任一项所述的分页面板数据展示方法。10.一种可读存储介质，其特征在于，所述可读存储介质中存储有计算机程序指令，所述计算机程序指令被一处理器读取并运行时，执行权利要求1至7任一项所述的分页面板数据展示方法。

技术总结

本申请实施例提供一种分页面板数据展示方法、装置、电子设备及存储介质，涉及数据处理技术领域。该方法包括获取设备数据，建立所述设备数据之间的关联关系，生成树形数据结构；基于所述树形数据结构建立所述设备数据的各级集合；利用树形数据结构渲染设备之间的关联关系，以利用三维模型展示；对一级集合中的分页数据进行重组更新，并展示数据界面；对父级展开项以及对应的子级展开项建立关联关系，当轮播至父级展开项的第二页及以下多页时，对当前页进行数据更新、重组处理，达到数据联动展示效果，解决了现有方法数据间关联关系混乱的问题。问题。问题。