基于Vuex的web页面大屏数据处理方法技术

本发明专利技术公开了一种基于Vuex的web页面大屏数据处理方法，包含：基于业务需求建立多个数据大屏页面；为每个数据大屏页面建立显示组件；针对显示组件设置对应的数组变量；基于Vuex建立多个分别与数据大屏页面相对应的前端数据存储区；通过后端接口获取基础数据；根据获取的基础数据的情况来确定vue页面渲染的策略。本发明专利技术的基于Vuex的web页面大屏数据处理方法，在Vuex状态管理下做后端接口请求，分类保存数据，设置全局变量。当Vuex变量发生变化，重新渲染对应使用的大屏模块，变量未发生变化，则不渲染对应使用的大屏模块。从而减少页面重构次数，减少接口请求次数，降低页面多模块无效渲染造成的性能消耗。模块无效渲染造成的性能消耗。模块无效渲染造成的性能消耗。

【技术实现步骤摘要】
基于Vuex的web页面大屏数据处理方法


[0001]本专利技术涉及一种基于Vuex的web页面大屏数据处理方法。

技术介绍

[0002]目前随着互联网云时代的的来临，大数据的直观展示也越来越多的出现在人们的需求中，对此可视化大屏成为满足次需求的最优选择。
[0003]在目前已知的现有技术中，可视化大屏数据来源主要依靠后端接口形式传递，当大屏需求数据过大或者需要展示的内容过多，会造成大量的接口请求交互，导致前端流畅性降低，可读性变差。

技术实现思路

[0004]本专利技术提供了一种基于Vuex的web页面大屏数据处理方法解决上述提到的技术问题，具体采用如下的技术方案：一种基于Vuex的web页面大屏数据处理方法，包含以下步骤：基于业务需求建立多个数据大屏页面；为每个所述数据大屏页面建立显示组件；基于Vuex建立多个分别与所述数据大屏页面相对应的前端数据存储区；针对所述显示组件设置对应的数组变量；通过后端接口获取基础数据；根据获取的基础数据的情况来确定vue页面渲染的策略。
[0005]进一步地，所述根据获取的基础数据的情况来确定vue页面渲染的策略的具体方法为：在初始状态下：从所述基础数据中提取出不同所述数据大屏页面所对应的第一数据并分别存储在不同所述数据大屏页面所对应的前端数据存储区；对所述第一数据进行处理得到所述数据大屏页面对应的显示组件的数组变量；根据计算得到的数组变量触发vue页面渲染对每个所述数据大屏页面的显示组件进行刷新。
[0006]进一步地，在非初始状态下：从所述基础数据中提取出不同所述数据大屏页面所对应的第一数据并分别存储在不同所述数据大屏页面所对应的前端数据存储区；对所述第一数据进行处理得到所述数据大屏页面对应的显示组件的新的数组变量；对于数组变量未发生变化的显示组件，不触发vue页面渲染。
[0007]进一步地，对于数组变量发生变化的显示组件，根据计算得到的数组变量触发vue页面渲染，对数组变量发生变化的显示组件进行刷新。
[0008]进一步地，对于数组变量发生变化的显示组件，根据数组变量的变化幅度确定vue页面渲染的策略。
[0009]进一步地，对于数组变量发生变化的显示组件，若数组变量的改变的比例不超过预设值，则不触发vue页面渲染，若数组变量的改变的比例超过预设值，则触发vue页面渲染，对数组变量发生变化的显示组件进行刷新。
[0010]进一步地，在确定数组变量的改变的比例时，将新的数组变量与上一次进行vue页面渲染时的数组变量进行比较。
[0011]进一步地，对于数组变量发生变化的显示组件，当数组变量的改变的比例不超过预设值的时间超过预设的最大时间时，则触发vue页面渲染，对该数组变量发生变化的显示组件进行刷新。
[0012]进一步地，所述通过后端接口获取基础数据的具体方法为：设定获取周期，每间隔预设的获取周期定时获取所述基础数据。
[0013]进一步地，针对不同的时间段，设定多个不完全相同的获取周期，根据当前的时间，根据对应的获取周期定时获取所述基础数据。
[0014]进一步地，所述为每个所述数据大屏页面建立显示组件的具体方法为：为每个所述数据大屏页面建立多个所述显示组件。
[0015]本专利技术的有益之处在于所提供的基于Vuex的web页面大屏数据处理方法，在Vuex状态管理下做后端接口请求，分类保存数据，设置全局变量。当Vuex变量发生变化，重新渲染对应使用的大屏模块，变量未发生变化，则不渲染对应使用的大屏模块。从而减少页面重构次数，减少接口请求次数，降低页面多模块无效渲染造成的性能消耗。
附图说明
[0016]图1是本专利技术的一种基于Vuex的web页面大屏数据处理方法的示意图；图2是本专利技术的一种基于Vuex的web页面大屏数据处理方法的具体应用实施例的示意图。
具体实施方式
[0017]以下结合附图和具体实施例对本专利技术作具体的介绍。如图1所示本申请的一种基于Vuex的web页面大屏数据处理方法，具体包含以下步骤：S1:基于业务需求建立多个数据大屏页面。S2:为每个数据大屏页面建立显示组件。S3:基于Vuex建立多个分别与数据大屏页面相对应的前端数据存储区。S4:针对显示组件设置对应的数组变量。S5:通过后端接口获取基础数据。S6:根据获取的基础数据的情况来确定vue页面渲染的策略。通过以上步骤，本申请的的基于Vuex的web页面大屏数据处理方法能够减少页面重构次数，减少接口请求次数，降低页面多模块无效渲染造成的性能消耗。以下结合图2中的一种具体实施例具体介绍上述步骤。
[0018]对于步骤S1:基于业务需求建立多个数据大屏页面。
[0019]如图2所示，数据大屏被用于统计学校的学生的社团报名情况。根据数据统计需要，首先建立数据大屏页面A和数据大屏页面B。其中，数据页面大屏A用于显示女生报名社团的情况，数据页面大屏B用于显示男生报名社团的情况。
处理分类得到新的数据对象boyData（第一数据），并储存与前端数据储存区B。前端数据储存区B中，对数据对象boyData进行处理得到舞蹈组男生每日报名人数，并赋值给变量a。对数据对象boyData进行处理得到声乐组男生每日报名人数，并赋值给变量b。通过这两个变量对数据大屏页面B中的两个显示组件，即舞蹈组男生每日报名人数线性图表组件和声乐组男生每日报名人数线性图表组件进行渲染刷新。
[0038]通过上述过程，完成每个显示组件的初始化。
[0039]在非初始状态下，即初始化之后的情况下，再通过后端接口获取基础数据时，从基础数据中提取出不同数据大屏页面所对应的第一数据并分别存储在不同数据大屏页面所对应的前端数据存储区。对第一数据进行处理得到数据大屏页面对应的显示组件的新的数组变量。对于数组变量未发生变化的显示组件，不触发vue页面渲染。对于数组变量发生变化的显示组件，根据计算得到的数组变量触发vue页面渲染，对数组变量发生变化的显示组件进行刷新。
[0040]上述的具体实施方式中，对于数组变量发生变化的显示组件，无论变化的幅度多大，都进行渲染刷新。然而，可以预见的是，在一些使用场景中，对于数据的敏感性强。因此，当数据变化非常小时，可以考虑不进行刷新。
[0041]在这种情况下，具体地，对于数组变量发生变化的显示组件，若数组变量的改变的比例不超过预设值，则不触发vue页面渲染。若数组变量的改变的比例超过预设值，则触发vue页面渲染，对数组变量发生变化的显示组件进行刷新。这里的预设值可以根据实际情况进行设定。
[0042]并且，在确定数组变量的改变的比例时，将新的数组变量与上一次进行vue页面渲染时的数组变量进行比较。举例说明，变量a当前数值为100，设定的预设值为5%，假设第二次更新后的变量a为103，由于没有超过预设值5%，因此不作更新。假设第三次更新后的变量a为106，若将106与103进行计算，则结果还将不超过5%，不作更新。然而106相对100则已经超过5%，需要进行更新。可以本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Vuex的web页面大屏数据处理方法，其特征在于，包含以下步骤：基于业务需求建立多个数据大屏页面；为每个所述数据大屏页面建立显示组件；基于Vuex建立多个分别与所述数据大屏页面相对应的前端数据存储区；针对所述显示组件设置对应的数组变量；通过后端接口获取基础数据；根据获取的基础数据的情况来确定vue页面渲染的策略。2.根据权利要求1所述的基于Vuex的web页面大屏数据处理方法，其特征在于，所述根据获取的基础数据的情况来确定vue页面渲染的策略的具体方法为：在初始状态下：从所述基础数据中提取出不同所述数据大屏页面所对应的第一数据并分别存储在不同所述数据大屏页面所对应的前端数据存储区；对所述第一数据进行处理得到所述数据大屏页面对应的显示组件的数组变量；根据计算得到的数组变量触发vue页面渲染对每个所述数据大屏页面的显示组件进行刷新。3.根据权利要求2所述的基于Vuex的web页面大屏数据处理方法，其特征在于，在非初始状态下：从所述基础数据中提取出不同所述数据大屏页面所对应的第一数据并分别存储在不同所述数据大屏页面所对应的前端数据存储区；对所述第一数据进行处理得到所述数据大屏页面对应的显示组件的新的数组变量；对于数组变量未发生变化的显示组件，不触发vue页面渲染。4.根据权利要求3所述的基于Vuex的web页面大屏数据处理方法，其特征在于，对于数组变量发生变化的显示组件，根据计算得到的数组...

【专利技术属性】
技术研发人员：董超，周远兵，龚友涛，
申请(专利权)人：杭州乾冠数字物联技术有限公司，
类型：发明
国别省市：