[发明专利]基于Vuex的web页面大屏数据处理方法

说明书

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

技术领域

本发明涉及一种基于Vuex的web页面大屏数据处理方法。

背景技术

目前随着互联网云时代的的来临，大数据的直观展示也越来越多的出现在人们的需求中，对此可视化大屏成为满足次需求的最优选择。

在目前已知的现有技术中，可视化大屏数据来源主要依靠后端接口形式传递，当大屏需求数据过大或者需要展示的内容过多，会造成大量的接口请求交互，导致前端流畅性降低，可读性变差。

发明内容

本发明提供了一种基于Vuex的web页面大屏数据处理方法解决上述提到的技术问题，具体采用如下的技术方案：

一种基于Vuex的web页面大屏数据处理方法，包含以下步骤：

基于业务需求建立多个数据大屏页面；

为每个所述数据大屏页面建立显示组件；

基于Vuex建立多个分别与所述数据大屏页面相对应的前端数据存储区；

针对所述显示组件设置对应的数组变量；

通过后端接口获取基础数据；

根据获取的基础数据的情况来确定vue页面渲染的策略。

进一步地，所述根据获取的基础数据的情况来确定vue页面渲染的策略的具体方法为：

在初始状态下：

从所述基础数据中提取出不同所述数据大屏页面所对应的第一数据并分别存储在不同所述数据大屏页面所对应的前端数据存储区；

对所述第一数据进行处理得到所述数据大屏页面对应的显示组件的数组变量；

根据计算得到的数组变量触发vue页面渲染对每个所述数据大屏页面的显示组件进行刷新。

进一步地，在非初始状态下：

从所述基础数据中提取出不同所述数据大屏页面所对应的第一数据并分别存储在不同所述数据大屏页面所对应的前端数据存储区；

对所述第一数据进行处理得到所述数据大屏页面对应的显示组件的新的数组变量；

对于数组变量未发生变化的显示组件，不触发vue页面渲染。

进一步地，对于数组变量发生变化的显示组件，根据计算得到的数组变量触发vue页面渲染，对数组变量发生变化的显示组件进行刷新。

进一步地，对于数组变量发生变化的显示组件，根据数组变量的变化幅度确定vue页面渲染的策略。

进一步地，对于数组变量发生变化的显示组件，若数组变量的改变的比例不超过预设值，则不触发vue页面渲染，若数组变量的改变的比例超过预设值，则触发vue页面渲染，对数组变量发生变化的显示组件进行刷新。

进一步地，在确定数组变量的改变的比例时，将新的数组变量与上一次进行vue页面渲染时的数组变量进行比较。

进一步地，对于数组变量发生变化的显示组件，当数组变量的改变的比例不超过预设值的时间超过预设的最大时间时，则触发vue页面渲染，对该数组变量发生变化的显示组件进行刷新。

进一步地，所述通过后端接口获取基础数据的具体方法为：