[发明专利]一种基于angular总分直观型展示数据的处理方法及系统

说明书

本发明公开了一种基于angular总分直观型展示数据的处理方法及系统，属于angular前端的软件开发服务代码托管领域；所述的方法具体步骤如下：S1获取后台数据；S2根据数组中时间日期进行分类；S3将数据根据选定元素处理为二维数组；S4使二维数组Data中的每一个数据包含的时间日期相同；S5自定义HTML展示规则，循环遍历二维数组Data；本发明方法采用二维数组存储数据，能够以总分直观型展示数据的处理方法，从而提高用户体验设计；与普通的table表格相比，本发明能够对特定元素进行分类，从而实现按照特定元素进行总‑分直观型地展示数据，能明显提高界面感官效果，更直观的根据特定元素来展示数据。

技术领域

本发明公开一种基于angular总分直观型展示数据的处理方法及系统，涉及angular前端的软件开发服务代码托管技术领域。

背景技术

在数据展示的页面设计中，大多数都使用table表格来展示数据，诚然，table表格展示数据能够将数据罗列出来，但是在一些需要根据特定元素来分类展示数据的场合不太适用；故现发明一种基于angular总分直观型展示数据的处理方法及系统，以解决上述问题。

发明内容

本发明针对现有技术的问题，提供一种基于angular总分直观型展示数据的处理方法及系统，所采用的技术方案为：一种基于angular总分直观型展示数据的处理方法，所述的方法具体步骤如下：

S1获取后台数据；

S2根据数组中时间日期进行分类；

S3将数据根据选定元素处理为二维数组；

S4使二维数组Data中的每一个数据包含的时间日期相同；

S5自定义HTML展示规则，循环遍历二维数组Data。

所述S1获取后台数据的具体步骤包括：

S101 HTTP请求从后台获取数据；

S102将数据转化成数组形式；

S103将数组命名为Item。

所述S2根据数组中时间日期进行分类的具体步骤包括：

S201将数组中第一个数据Item[0]拿出并将其放入二维数组Data的第一个数据Data[0]中；

S202循环遍历剩下的数据与第一个数据Item[0]进行对比；

S203将时间日期相同的数据放入Data[0]中；

S204遍历完毕后将放入Data[0]中的Item的数据删掉。

所述S3将数据根据选定元素处理为二维数组，即继续循环遍历得到Data[1]、Data[2]等，直到Item变为空数组。

一种基于angular总分直观型展示数据的处理系统，所述的系统具体包括获取模块、分类模块、处理模块、统一模块和展示模块：

获取模块：获取后台数据；

分类模块：根据数组中时间日期进行分类；

处理模块：将数据根据选定元素处理为二维数组；

统一模块：使二维数组Data中的每一个数据包含的时间日期相同；

展示模块：自定义HTML展示规则，循环遍历二维数组Data。

所述获取模块具体包括数据收集模块、格式转换模块和数组命名模块：

数据收集模块：HTTP请求从后台获取数据；

格式转换模块：将数据转化成数组形式；