前端大屏数据展示的系统

技术领域

本发明涉及一种前端大屏数据展示的系统。

背景技术

在大屏数据展示的项目开发过程中，通常在前端针对该项目绘制页面，然后后台接口直接通过页面请求数据。对于同一类型的项目，后续也只是在原有代码基础上复制一份出来，改接口，改样式。后续样式变更，接口变更等微调需求变更问题，只能通过修改代码等方式来实现。对此多个项目，就需要每个项目去改一遍代码，操作起来枯燥且浪费时间。

发明内容

为解决现有技术的不足，本发明提供了一种前端大屏数据展示的系统，通过预设模板配置相关信息的方式，在后端只需提供数据接口，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。

为了实现上述目标，本发明采用如下的技术方案：

一种前端大屏数据展示的系统，包括；前端和管理后台；前端用于进行前端大屏数据展示；管理后台用于提供数据接口和展示模板并配置前端的前端展示项；

其中，

前端对于大屏数据展示包括以下步骤：

步骤1、通过HTTP获取指定的项目配置；

步骤2、绘制页面，通过配置信息设置页面背景图；

步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型。

进一步地，前端对于大屏数据展示还包括以下步骤：

步骤4、根据配置颜色信息，标题，利用echar绘制图形，展示步骤3获取的信息。

进一步地，展示模板包括：自定义模板和系统模板。

进一步地，管理后台对于大屏数据展示包括以下步骤：

步骤1、进入项目管理页面，配置项目信息；

步骤2、选择展示模板；

步骤3、保存配置。

进一步地，选择展示模板包括以下步骤：

对于自定义模板，自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板，直接选择展示位置；

配置项目数据列表，需要绘制的图像类型，图像类型的信息，接口地址。

进一步地，配置项目信息包括：项目名称、项目类目列表、数据接口列表和项目背景图。

进一步地，配置项目信息时，每个项目仅能选用一种模板。

进一步地，根据配置信息里面的接口地址，获取对应的数据及展示图像类型包括以下步骤；

步骤1、对于自定义模板读取用户自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板读取用户选择的展示位置获得系统预设位置信息；

步骤2、根据图像类型，拼接当前图像类型所需的数据格式；

步骤3、判断模板类型，根据模板类型选择对应的渲染方式。

进一步地，配置项目类目列表后，出现统计图类型列表以对区域统计图进行配置；

区域统计图包括：柱状图、折线图、饼图和地图。

进一步地，对于地图类型的操作包括以下步骤：

判断是否需要打点，若判断结果为否，则直接数据接口，若判断结果为是，则打开打点地图；

在打点地图上点击后，管理后台识别点击的点作为预录入点并向前端推送到预录入点预设距离内的数据库已存档点作为参考点，其中预录入点和多个参考点以单排列表的方式展示且预录入点位于单排列表的第一列；

若用户点击单排列表的预录入点，则将预录入点确定为正式录入点，接收用户配置的预录入点的信息，保存打点数据；

若用户点击单排列表的参考点，则展示参考点的信息并弹出是否修改信息的窗口；

若用户在是否修改信息的窗口选择是，则等待用户修改信息并将修改后的信息存储至数据库；用户在是否修改信息的窗口选择否，则关闭单排列表。

本发明的有益之处在于，通过预设模板配置相关信息的方式，在后端只需提供数据接口，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。

地图打点的方式，相比传统的直接录入打点的方式，在打点过程中提供新增点与数据库已存档点的比对，有效避免冗余数据的产生。

附图说明

图1是一种前端大屏数据展示的系统的示意图；

图2是图1中前端大屏数据展示的系统的地图类型的地图打点的流程图。

具体实施方式

以下结合附图和具体实施例对本发明作具体的介绍。

如图1和图2所示，一种前端大屏数据展示的系统，包括；前端和管理后台。前端用于进行前端大屏数据展示。管理后台用于提供数据接口和展示模板并配置前端的前端展示项。具体而言，展示模板包括：自定义模板和系统模板。

前端对于大屏数据展示包括以下步骤：

步骤1、通过HTTP获取指定的项目配置；

步骤2、绘制页面，通过配置信息设置页面背景图；

步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型；

步骤4、根据配置颜色信息，标题，利用echar绘制图形，展示步骤3获取的信息；

步骤5、页面渲染完成。

作为一种优选的实施方式，根据配置信息里面的接口地址，获取对应的数据及展示图像类型包括以下步骤；

步骤1、对于自定义模板读取用户自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板读取用户选择的展示位置获得系统预设位置信息；

步骤2、根据图像类型，拼接当前图像类型所需的数据格式；

步骤3、判断模板类型，根据模板类型选择对应的渲染方式。

作为一种优选的实施方式，管理后台对于大屏数据展示包括以下步骤：

步骤1、进入项目管理页面，配置项目信息；

步骤2、选择展示模板；

步骤3、保存配置。

进一步地，选择展示模板包括以下步骤：

对于自定义模板，自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板，直接选择展示位置(对于系统模板不用配置宽高以及相对于页面的X轴和Y轴的位置)；

配置项目数据列表，需要绘制的图像类型，图像类型的信息，接口地址。图像类型的信息包括图像类型(饼图，折线图，地图等类型)，以及当前图像类型位置、宽高、配色等信息。

作为一种具体的实施方式，配置项目信息包括：项目名称、项目类目列表、数据接口列表和项目背景图。配置项目信息时，每个项目仅能选用一种模板。

作为一种具体的实施方式，配置项目类目列表后，出现统计图类型列表以对区域统计图进行配置；区域统计图包括：柱状图、折线图、饼图和地图。

作为一种优选的实施方式，对于地图类型的操作包括以下步骤：

判断是否需要打点，若判断结果为否，则直接数据接口，若判断结果为是，则打开打点地图；

在打点地图上点击后，管理后台识别点击的点作为预录入点并向前端推送到预录入点预设距离内的数据库已存档点作为参考点，其中预录入点和多个参考点以单排列表的方式展示且预录入点位于单排列表的第一列；

若用户点击单排列表的预录入点，则将预录入点确定为正式录入点，接收用户配置的预录入点的信息，保存打点数据；

若用户点击单排列表的参考点，则展示参考点的信息并弹出是否修改信息的窗口；

若用户在是否修改信息的窗口选择是，则等待用户修改信息并将修改后的信息存储至数据库；用户在是否修改信息的窗口选择否，则关闭单排列表。

以上显示和描述了本发明的基本原理、主要特征和优点。本行业的技术人员应该了解，上述实施例不以任何形式限制本发明，凡采用等同替换或等效变换的方式所获得的技术方案，均落在本发明的保护范围内。