一种报表数据处理方法和装置与流程

1.本公开涉及计算机技术领域，尤其涉及一种报表数据处理方法和装置。


背景技术：

2.报表作为信息管理的重要组成，目前广泛应用于日常工作中。企业利用报表工具对业务数据进行统计分析，将经过筛选、统计的数据进行可视化展示，为生产管理提供数据支持，报表工具能够帮助企业在海量的信息中提取有效信息数据，满足企业的信息化管理需要，促进企业竞争力的提升。
3.然而，目前报表的形式较为单一，无法对现有的业务数据进行灵活配置，不同项目之间的可维护性差，数据接入成本较高，针对大数据量报表，页面加载时间长，存在页面卡顿的现象，导致用户体验较差。


技术实现要素：

4.有鉴于此，本公开实施例提供了一种报表数据处理方法、装置、电子设备及计算机可读存储介质，以解决现有技术中的报表形式较为单一，不同项目之间的可维护性差，数据接入成本较高，用户体验差的问题。
5.本公开实施例的第一方面，提供了一种报表处理方法，包括：
6.从源数据端获取报表数据，并获取用户设置的包含多层级的表头数据，利用预定的数据转换配置方法，对报表数据以及表头数据进行配置，得到配置数据；
7.根据报表容器对配置数据进行节点标记，并将已标记节点作为待推断的目标节点，根据报表容器的窗口高度以及待推断的目标节点，对配置数据的数据量进行布局推断；
8.当推断数据量符合预定条件时，根据报表容器对应的首次展示区域，确定首次展示区域范围内的目标节点，将目标节点进行属性标记，并将目标节点进行缓存；
9.响应于用户对页面的下拉操作，根据配置数据的数据量以及首次展示区域对应的数据量，判断是否存在未渲染数据，当存在未渲染数据时，将未渲染数据添加到渲染队列中；
10.从首次展示区域对应的目标节点的缓存位置开始，对渲染队列中的预渲染数据进行节点标记，根据节点标记的位置对预渲染数据进行分割，将分割后的标记数据进行渲染，将渲染后的标记数据在前端报表页面进行展示。
11.本公开实施例的第二方面，提供了一种报表数据处理装置，包括：
12.获取模块，被配置为从源数据端获取报表数据，并获取用户设置的包含多层级的表头数据，利用预定的数据转换配置方法，对报表数据以及表头数据进行配置，得到配置数据；
13.标记模块，被配置为根据报表容器对配置数据进行节点标记，并将已标记节点作为待推断的目标节点，根据报表容器的窗口高度以及待推断的目标节点，对配置数据的数据量进行布局推断；
14.缓存模块，被配置为当推断数据量符合预定条件时，根据报表容器对应的首次展示区域，确定首次展示区域范围内的目标节点，将目标节点进行属性标记，并将目标节点进行缓存；
15.判断模块，被配置为响应于用户对页面的下拉操作，根据配置数据的数据量以及首次展示区域对应的数据量，判断是否存在未渲染数据，当存在未渲染数据时，将未渲染数据添加到渲染队列中；
16.渲染模块，被配置为从首次展示区域对应的目标节点的缓存位置开始，对渲染队列中的预渲染数据进行节点标记，根据节点标记的位置对预渲染数据进行分割，将分割后的标记数据进行渲染，将渲染后的标记数据在前端报表页面进行展示。
17.本公开实施例的第三方面，提供了一种电子设备，包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，该处理器执行计算机程序时实现上述方法的步骤。
18.本公开实施例的第四方面，提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。
19.本公开实施例与现有技术相比存在的有益效果是：通过从源数据端获取报表数据，并获取用户设置的包含多层级的表头数据，利用预定的数据转换配置方法，对报表数据以及表头数据进行配置，得到配置数据，根据报表容器对配置数据进行节点标记，并将已标记节点作为待推断的目标节点，根据报表容器的窗口高度以及待推断的目标节点，对配置数据的数据量进行布局推断，当推断数据量符合预定条件时，根据报表容器对应的首次展示区域，确定首次展示区域范围内的目标节点，将目标节点进行属性标记，并将目标节点进行缓存，响应于用户对页面的下拉操作，根据配置数据的数据量以及首次展示区域对应的数据量，判断是否存在未渲染数据，当存在未渲染数据时，将未渲染数据添加到渲染队列中，从首次展示区域对应的目标节点的缓存位置开始，对渲染队列中的预渲染数据进行节点标记，根据节点标记的位置对预渲染数据进行分割，将分割后的标记数据进行渲染，将渲染后的标记数据在前端报表页面进行展示。本公开利用统一的报表展示工具，实现大数据量下的可视化展示，有利于提高数据的可维护性，为用户提供优质的体验。
附图说明
20.为了更清楚地说明本公开实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
21.图1是本公开实施例提供的一种报表数据处理方法的流程示意图；
22.图2是本公开实施例提供的一种报表数据处理装置的结构示意图；
23.图3是本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
24.以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本公开实施例。然而，本领域的技术人员应当清楚，在没有这些具体
to config方法，转换为符合预设格式要求的配置数据。
36.s102,根据报表容器对配置数据进行节点标记，并将已标记节点作为待推断的目标节点，根据报表容器的窗口高度以及待推断的目标节点，对配置数据的数据量进行布局推断。
37.获取报表容器的相关信息，至少包括可视窗口高度、可视窗口宽度、背景颜色，根据可视窗口高度、宽度，确定报表容器的页面展示区域的大小，根据页面展示区域的大小以及配置数据中的数据长度，将页面展示区域内每一行显示的配置数据作为一个目标节点进行标记，将目标节点在初始状态下作为待推断的目标节点。
38.根据报表容器的窗口高度以及待推断的目标节点，进行布局推断，确定数据量大小，将数据量大小作为判断是否符合预定条件的依据，根据数据量确定相应的数据处理策略。
39.具体地，确定报表容器的窗口高度所容纳的目标节点的数量，当待推断的目标节点的数量少于报表容器的窗口高度所容纳的目标节点的数量，且将待推断的目标节点放入报表容器的窗口后，配置数据的最后一个待推断的目标节点已被标记，则推断当前配置数据的数据量为小数据量，不符合预定条件，此时进行配置数据的全量展示。
40.当待推断的目标节点的数量不少于报表容器的窗口高度所容纳的目标节点的数量，且将待推断的目标节点放入报表容器的窗口后，配置数据的最后一个待推断的目标节点未被标记，则确定当前配置数据的数据量为大数据量符合预设条件，执行步骤s103。
41.s103，当推断数据量符合预定条件时，根据报表容器对应的首次展示区域，确定首次展示区域范围内的目标节点，将目标节点进行属性标记，并将目标节点进行缓存。
42.当推断当前配置数据的数据量为大数据量时，将数据传输至worker进行数据处理。本实施例中，需要创建worker容器，worker可以实现多线程任务处理。利用worker监听消息，用户根据需要向worker发送运行指令，worker接收指令从配置数据中获取数据信息。
43.根据报表容器对应的首次展示区域，确定首次展示区域范围内的目标节点，将首次展示区域内所能容纳的目标节点进行属性标记，将目标节点的属性标记为已标记状态，作为示例，属性标记可以为before node和after node，确定前后节点，并将已标记状态的目标节点进行缓存，记录已标记状态的目标节点的位置。缓存的方式可以为内存，也可以为其他的存储方式。用户后续进行滚动操作时，已经标记的节点不需要浏览器重新读取。
44.s104,响应于用户对页面的下拉操作，根据配置数据的数据量以及首次展示区域对应的数据量，判断是否存在未渲染数据，当存在未渲染数据时，将未渲染数据添加到渲染队列中。
45.响应于用户对页面的下拉操作，报表工具执行对应的处理逻辑。基于用户对页面的下拉操作量，确定本次展示区域的大小。根据本次展示区域的大小以及配置数据的数据量，对执行队列中的数据量进行判断，判断是否存在未渲染数据当存在未渲染数据时，将未渲染数据添加到渲染队列中，执行相应的渲染操作。
46.渲染操作的流程包括计算css(层叠样式表)，然后构建渲染树，确定布局，根据渲染树对页面进行渲染。对未渲染数据进行渲染，得到渲染输出的结果。将渲染结果传送至前端页面进行展示。当渲染队列中的未渲染数据不足时，继续获取目标节点，作为未渲染数据等待渲染操作。
47.s105，从首次展示区域对应的目标节点的缓存位置开始，对渲染队列中的预渲染数据进行节点标记，根据节点标记的位置对预渲染数据进行分割，将分割后的标记数据进行渲染，将渲染后的标记数据在前端报表页面进行展示。
48.将缓存的已标记目标节点添加到节点标记集合中，根据首次展示区域对应的目标节点的缓存位置，从节点标记集合中查询已标记目标节点在节点标记集合中的位置，从该位置开始依次对渲染队列中的预渲染数据进行节点标记。
49.并且根据预渲染数据的节点标记位置，对执行队列中的预渲染数据进行分割，通过分割，确定了节点的指定区域，从而控制节点数量，避免因前端页面节点过多层级嵌套，造成需要渲染的节点过多而出现页面卡顿甚至白屏。
50.控制节点数量也有利于优化页面性能，减少组件的加载时间，实现报表地快速展示。本实施例中，在完成渲染后，选择以数据量1万条为例，利用chrome devtools的timeline分析页面性能，确定使用本发明的应用效果，为进一步优化提供依据。具体地，使用timeline中的事件模式(event model)计算渲染各种事件消耗的时间，得到由不同颜色组成的事件模式图，以及渲染事件的时间记录。未使用本发明前，渲染需要48325ms。使用本发明后，渲染需要41ms。组件加载时间大幅缩短，同时页面卡顿现象出现较少。
51.将分割后的标记数据进行渲染，渲染后的标记数据在前端报表页面进行展示，作为展示的基础，前端框架可以选择使用vue.js框架、react native、angular.js。作为示例，选择vue.js框架作为框架解决方案，包括界面设计、菜单、组件以及文档结构等。
52.本公开实施例提供的一种报表数据处理方法，通过从源数据端获取报表数据，并获取用户设置的包含多层级的表头数据，利用预定的数据转换配置方法，对报表数据以及表头数据进行配置，得到配置数据，配置数据进行节点标记，根据报表容器的窗口高度以及待推断的目标节点，对配置数据的数据量进行布局推断，确定目标节点，将目标节点进行属性标记，并将目标节点进行缓存，响应于用户对页面的下拉操作，根据配置数据的数据量以及首次展示区域对应的数据量，判断是否存在未渲染数据，当存在未渲染数据时，将未渲染数据添加到渲染队列中，对渲染队列中的预渲染数据进行节点标记，根据节点标记的位置对预渲染数据进行分割，将分割后的标记数据进行渲染，将渲染后的标记数据在前端报表页面进行展示。本公开利用统一的报表展示工具，根据用户业务场景进行数据配置，减少了数据的接入成本，增加数据的可维护性，开发效率大幅提升。同时针对报表中大数据量的情况，通过控制节点数量，节省了运算量，页面掉帧现象、卡顿情况大大减少，为用户提供优质的体验，实现大数据场景下报表的高性能展示。
53.上述所有可选技术方案，可以采用任意结合形成本技术的可选实施例，在此不再一一赘述。
54.图2是本公开实施例提供的一种报表数据处理装置的结构示意图，如图2所示，该报表数据处理装置包括：获取模块201、标记模块202、缓存模块203、判断模块204、渲染模块205。获取模块201，被配置为从源数据端获取报表数据，并获取用户设置的包含多层级的表头数据，利用预定的数据转换配置方法，对报表数据以及表头数据进行配置，得到配置数据；标记模块202，被配置为根据报表容器对配置数据进行节点标记，并将已标记节点作为待推断的目标节点，根据报表容器的窗口高度以及待推断的目标节点，对配置数据的数据量进行布局推断；缓存模块203，被配置为当推断数据量符合预定条件时，根据报表容器对
应的首次展示区域，确定首次展示区域范围内的目标节点，将目标节点进行属性标记，并将目标节点进行缓存；判断模块204，被配置为响应于用户对页面的下拉操作，根据配置数据的数据量以及首次展示区域对应的数据量，判断是否存在未渲染数据，当存在未渲染数据时，将未渲染数据添加到渲染队列中；渲染模块205，被配置为从首次展示区域对应的目标节点的缓存位置开始，对渲染队列中的预渲染数据进行节点标记，根据节点标记的位置对预渲染数据进行分割，将分割后的标记数据进行渲染，将渲染后的标记数据在前端报表页面进行展示。
55.进一步地，获取模块201被具体配置为：将报表数据以及表头数据输入到预定的格式转换工具中，利用格式转换工具对应的数据转换配置方法，将报表数据以及表头数据配置成符合预设格式要求的配置数据。
56.进一步地，标记模块202被具体配置为：确定报表容器的页面展示区域的大小，根据页面展示区域的大小以及配置数据中的数据长度，将页面展示区域内每一行显示的配置数据作为一个目标节点进行标记，目标节点在初始状态下为待推断的目标节点；确定报表容器的窗口高度所容纳的目标节点的数量，当待推断的目标节点的数量少于报表容器的窗口高度所容纳的目标节点的数量，且将待推断的目标节点放入报表容器的窗口后，配置数据的最后一个待推断的目标节点已被标记，则推断数据量不符合预定条件，此时将配置数据进行全量展示。
57.进一步地，缓存模块203被具体配置为：根据报表容器的首次展示区域的大小，将首次展示区域内所能容纳的目标节点进行属性标记，将目标节点的属性标记为已标记状态，并将已标记状态的目标节点进行缓存，记录已标记状态的目标节点的位置。
58.进一步地，判断模块204被具体配置为：响应于用户对页面的下拉操作，根据用户对页面的下拉操作量，确定本次展示区域的大小，根据本次展示区域的大小以及配置数据的数据量，对执行队列中的数据量进行判断，根据判断结果确定执行队列中是否包含未渲染数据。
59.进一步地，渲染模块205被具体配置为：将缓存的已标记目标节点添加到节点标记集合中，根据首次展示区域对应的目标节点的缓存位置，从节点标记集合中查询已标记目标节点在节点标记集合中的位置，从该位置开始依次对渲染队列中的预渲染数据进行节点标记，并且根据预渲染数据的节点标记位置，对执行队列中的预渲染数据进行分割，得到分割后的标记数据。
60.图3是本公开实施例提供的电子设备3的结构示意图。如图3所示，该实施例的电子设备3包括：处理器301、存储器302以及存储在该存储器302中并且可以在处理器301上运行的计算机程序303。处理器301执行计算机程序303时实现上述各个方法实施例中的步骤。或者，处理器301执行计算机程序303时实现上述各装置实施例中各模块/单元的功能。
61.示例性地，计算机程序303可以被分割成一个或多个模块/单元，一个或多个模块/单元被存储在存储器302中，并由处理器301执行，以完成本公开。一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述计算机程序303在电子设备3中的执行过程。
62.电子设备3可以是桌上型计算机、笔记本、掌上电脑及云端服务器等电子设备。电子设备3可以包括但不仅限于处理器301和存储器302。本领域技术人员可以理解，图3仅仅
是电子设备3的示例，并不构成对电子设备3的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如，电子设备还可以包括输入输出设备、网络接入设备、总线等。
63.处理器301可以是中央处理单元(central processing unit，cpu)，也可以是其它通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现场可编程门阵列(field-programmable gate array，fpga)或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
64.存储器302可以是电子设备3的内部存储单元，例如，电子设备3的硬盘或内存。存储器302也可以是电子设备3的外部存储设备，例如，电子设备3上配备的插接式硬盘，智能存储卡(smart media card，smc)，安全数字(secure digital，sd)卡，闪存卡(flash card)等。进一步地，存储器302还可以既包括电子设备3的内部存储单元也包括外部存储设备。存储器302用于存储计算机程序以及电子设备所需的其它程序和数据。存储器302还可以用于暂时地存储已经输出或者将要输出的数据。
65.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本技术的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
66.在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。
67.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。
68.在本公开所提供的实施例中，应该理解到，所揭露的装置/计算机设备和方法，可以通过其它的方式实现。例如，以上所描述的装置/计算机设备实施例仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。
69.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
70.另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
71.集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本公开实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，计算机程序可以存储在计算机可读存储介质中，该计算机程序在被处理器执行时，可以实现上述各个方法实施例的步骤。计算机程序可以包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机可读介质可以包括：能够携带计算机程序代码的任何实体或装置、记录介质、u盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、电载波信号、电信信号以及软件分发介质等。需要说明的是，计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如，在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。
72.以上实施例仅用以说明本公开的技术方案，而非对其限制；尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例技术方案的精神和范围，均应包含在本公开的保护范围之内。