CN111753227B - 一种基于异步加载数据信息的屏幕展示***和方法 - Google Patents

Abstract

本发明提供了一种基于异步加载数据信息展示的***和方法，该***包括：展示模块，其用于显示数据页面及交互结果页面；搜索模块，其根据用户输入的指令在数据存储模块内进行数据搜索；交互处理(逻辑控制)模块，其用于监控用户操作，按照设定的步骤运行用户操作并输出交互结果；数据存储模块，其用于存储设定的数据。该***在用户登陆后进入展示模块中设定的默认页面，并首先显示出缓存中的数据，以异步加载的方式，通过线程建立与后台的链接，逐步向默认页面中载入所需的数据。所述***和方法在保证用户操作流畅的前提下，加快了数据加载的速度，通过异步加载提升了用户体验。

Description

一种基于异步加载数据信息的屏幕展示***和方法

技术领域

本发明涉及互联网信息处理技术，属于互联网信息处理领域，特别涉及基于异步加载数据信息的屏幕展示***和方法。

背景技术

随着信息化的逐步提高，企业、事业单位、政府部门等用工单位对信息***使用需求的增加，***中数据积累量级不断扩大，数据种类不断增加。用工单位中特别是企业作为社会经济的主体，在经济活动中具有举足轻重的角色，企业数据的大屏幕信息展示是体现企业自身价值，了解企业运营情况的重要方式。数据展示是数据分析的重要一环，在数据分析中具有重要的意义。

然而，现有的公用企业大屏幕数据展示***均有不同程度的不足之处：没有适合的展示图形、表格划分不够清晰、图表的图例调整繁琐、内容搜索结果适配不理想等。

现在移动设备普及度很高，在移动设备上查看数据内容也逐渐成为一项趋势。但由于目前移动设备性能参差不齐、网络信号时好时坏、数据流量控制严格等因素大大降低了用户的使用体验。目前现有的手机APP数据展示工具，会一次性加载出所有数据供用户查看，当数据量较大，数据内容层次更多时，现有的技术方案就无法适用。

因此，在众多的数据和种类中，如何清晰明了、高效便捷的显示数据，就成为迫切需要解决的问题。

基于现有技术中存在的上述问题，在现有技术的基础上，研究出了基于异步加载数据信息展示的***和方法。

发明内容

为了解决上述问题，本发明人进行了锐意研究，结果发现：采用异步加载的方式实现信息的展示，在用户进入设定的默认页面时，首先展示缓存内的数据，然后通过线程异步加载接下来的表格或图表内的数据。该方法在保证用户操作流畅的前提下，加快了数据加载的速度，提升了用户体验，从而完成了本发明。

本发明的目的在于提供以下方面：

第一方面，本发明提供了一种基于异步加载数据信息的屏幕展示***，该***包括：

展示模块，其用于显示数据页面及交互结果页面；

搜索模块，其根据用户输入的指令在数据存储模块内进行数据搜索；

交互处理(逻辑控制)模块，其用于监控用户操作，按照设定的步骤运行用户操作并输出交互结果；

数据存储模块，其用于存储设定的数据。

所述展示模块中浏览器的分辨率为1366x768～5464x1536，最好为5464x1536；

所述展示模块的展示网页使用VUE.js框架进行网页排版，设置有多个显示不同数据内容的展示窗口；

优选在展示窗口中设置有下拉选择框，选择框内设置有不同内容以供选择。

所述屏幕展示***中，不同展示窗口内展示的数据信息存储于数据库中与该展示窗口内容类别相同命名的文件夹中；

同一个展示窗口中，与选择框对应的数据信息以子文件夹的方式存储于数据库中与展示窗口内容类别相同命名的文件夹中；优选所述子文件夹的命名或名称属性与选择框内容相同；

所述数据存储模块为关系型数据库存储数据，优选为Oracle、MySQL或SQLServer。

所述屏幕展示***中，所述展示模块与交互模块通过Restful API进行交互；

优选使用VUE.js框架中的Canvas技术使展示窗口内的数据信息以设定的速度循环上移；和/或，

使用VUE.js框架中的JavaScript技术捕获鼠标的位置，当用户移动鼠标至设定元素上时，通过canvas技术使该元素所在的图形或表格产生动画效果；和/或，

使用JavaScript技术捕获鼠标移动至设定元素上时，浏览器通过html文件获取所述元素对应的数据信息，并通过canvas技术将该数据信息展示于展示模块上。

所述屏幕展示***中，进入所述异步加载数据信息展示***时，首先进入展示模块中设定的默认页面；

在该默认页面中首先显示出缓存中的数据，自通过线程读取后台数据库中的数据，并在已显示的默认页面上进行数据的更新显示。

所述屏幕展示***中，所述搜索模块为搜索引擎，优选使用选自ElasticSearch、SOLR、Hbase或MySQL中的任一种；

通过在默认展示页面中设置搜索框，用户通过搜索框输入待搜索信息的关键词。

第二方面，本发明还提供了一种使用上述***的基于异步加载数据信息的屏幕展示方法，所述方法包括以下步骤：

1)用户登录/进入屏幕展示***后在展示模块中显示设置的默认页面，该默认页面中首先显示出最近一次进入该***时展示的内容；

2)以异步加载的方式，通过线程建立与后台服务器的链接，逐步向默认页面中载入所需的最新数据；并展示模块展示获取的数据。

在步骤2)中，

在展示模块中，设定页面的浏览器通过接口向交互模块发起异步加载数据的请求；

交互模块收到异步加载数据的请求后，启动一个独立的线程从数据存储模块特别是数据库中请求数据，根据数据的时间属性搜索最新时间的数据；

当请求到数据后，线程将数据传送给前端展示模块，优选为浏览器，特别是浏览器的html文件；

前端浏览器特别是浏览器的html文件接收数据后刷新数据，显示更新后的数据。

其中，

用户在搜索模块的搜索框内输入关键字后，浏览器通过JavaScript技术捕获鼠标的点击事件和键盘的输入事件，并将获取的关键字传输给后台服务器，服务器与数据库的接口建立链接，在数据库中检索与该关键字匹配的数据，并通过展示模块的浏览器展现出来。

根据本发明提供的基于异步加载数据信息展示的***和方法，具有以下有益效果：

(1)在保证用户操作流畅的前提下，加快了数据加载的速度，通过异步加载提升了用户体验；

(2)通过定制化图表可以提升页面表现力，降低搜索功能查找数据的难度，为用户提供了一站式数据浏览与查询方式。

附图说明

图1示出本发明基于异步加载数据信息展示的***的示意图；

图2示出实施例1中展示窗口中下拉选择框的示意图；

图3示出实施例1中展示窗口中鼠标滑过柱状图时出现动画效果的示意图；

图4示出实施例1中展示窗口中鼠标点击饼图时出现动画效果的示意图；

图5示出实施例1中展示窗口中展示地图的示意图；

图6示出实施例1中在搜索框中搜索后出现带有定位信息和数据信息的示意图；

图7示出实施例1中展示窗口中搜索框的示意图；

图8示出实施例1中基于异步加载数据信息的屏幕展示***的屏幕界面的示意图。

具体实施方式

下面通过对本发明进行详细说明，本发明的特点和优点将随着这些示例性说明而变得更为清楚、明确。

在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。

以下详述本发明。

本发明提供了一种基于异步加载数据信息的屏幕展示***，如图1所示，所述***包括：

展示模块，其用于显示数据页面及交互结果页面；

搜索模块，其根据用户输入的指令在数据存储模块内进行数据搜索；

交互处理(逻辑控制)模块，其用于监控用户操作，按照设定的步骤运行用户操作并输出交互结果；

数据存储模块，其用于存储设定的数据。

本发明提供的所述基于异步加载数据信息的屏幕展示***优选在联网的环境下使用，更优选在联网时通过浏览器展示并使用。

其中，所述展示模块为浏览器，用于向用户展示存储于数据存储模块中的数据、图表和文字内容等；所述展示模块还可以展示浏览器展示网页中的排版内容，以及经服务器计算后的数据信息等。

为了更好地展示大量数据信息，所述展示模块，特别是浏览器，其分辨率为1366x768～5464x1536，优选为5464x1536。

在所述基于异步加载数据信息的屏幕展示***中，所述展示模块的展示网页根据信息展示需求进行不同的排版设置。在对网页进行排版时，可以选用现有技术中常用的技术或方法进行设置，优选使用VUE.js框架进行网页排版的构建。

所述VUE.js框架包括JavaScript文件、html文件和CSS文件其中，在本发明提供的展示***网页文件中，文字、字母或数字为网页的内容，存储于html文件中；html文件中引用CSS文件，网页的样式包括排版、布局、框线、字体、颜色、位置、图案等信息，存储于CSS文件中；在所述网页文件中还具有JS(JavaScript)文件，所述JS文件根据来自电脑键盘或鼠标的指令执行动作。

较好地，在展示网页上设置有多个展示窗口，不同的展示窗口内展示不同的数据信息，所述数据信息包括质量趋势、规模趋势、潜力趋势、营业收入分产业发展占比、经济运行概述、区域地图、企业数量对比和企业评价等。

所述数据信息还可以包括企业运营报表数据、能耗数据、人员数据、固定资产数据等，根据需要，还可以包括营业额、利润、纳税额、工资、待收欠款等。

更优选地，还可以在不同的展示窗口内设置选择框，在选择框内设置不同统计内容的数据信息，用户根据自己的需求在该展示窗口内的选择框中选择数据展示内容。

所述选择框内的统计内容根据需求设定，例如包括工业增加值增长、主营业务收入、利润总额、税收总额、研发投入、综合能耗、工业总产值、时间、工业增加值和营业收入等。

在展示窗口内的数据信息可以是文字、表格、数字、柱状图、饼图、线条图和/或地图。

由于不同用户使用的浏览器可能不同，导致不同浏览器下同一个展示页面的展示效果不一致，出现例如展示页面不全面、无法显示进度条、数据或图形无法显示等情况。

为了避免这种浏览器不适配的问题，保持不同浏览器中展示页面的一致性，优选通过调整CSS文件中展示页面的样式，使不同浏览器的展示页面保持一致。

目前，常用的浏览器有IE、火狐(ff)、opera、safari等，不同浏览器中都可能存在文本上下垂直居中或显示边距不统一、字体显示高度不相同、图片空隙不协调、排版错误等问题。例如，IE6-7本中文本和嵌套的块元素居中，但ff/opera/safari/IE8等会存在文本居中，嵌套块不居中的问题；又例如，IE6中div标签高度及文本边距和其他浏览器不同。

为了解决这些问题，优选地，使用适用多种浏览器的CSS文件设置展示页面的排版样式，以利于保持不同浏览器展示页面的一致性，也便于后期修改和维护CSS文件。

在一种优选的实施方式中，通过设置块元素的左外边距和右外边距，使得块元素在不同浏览器中保持水平居中。

在另一种优选的实施方式中，还可以通过对块元素设置div标签设定对齐方式，例如，居中，保持块元素在不同浏览器中水平居中。

例如，块元素可以这样设置：margin-left:auto；margin-right:auto，或margin:0auto；或外层嵌套div设置\<div align＝”center>\</div>

同时，通过设置div标签还可以设置浮动块元素的外边距，漂浮方向等，使浮动块元素保持设定的对齐方式，最好为居中。例如，可以这样设置：\<div style＝"margin:0pxauto；">\<div style＝"float:left；">\</div>\</div>

在一种优选的实施方式中，通过对容器标签设置行高，可以使不同浏览器保持垂直居中，优选设置为与容器标签高度相同的行高。

为了使不同浏览器中div标签高度相同，在一种优选的实施方式中，可以通过设置容器标签的高度确定字体的显示高度。例如，定义高度为1px的容器标签，显示的是一个字体的高度。所述容器标签的属性可以通过设置溢出控制、行高或缩放比例(zoom)值进行调整。例如，可以设置为：overflow:hidden；还可以设置为：line-height:1px；也可以设置设置为zoom:0.08。

在多种浏览器的div标签中往往还嵌套有p标签，相互兼容时会出现空白行的问题。优选对p标签的外边距进行设置，再对div标签的上内边距和下内边距进行设定。例如：设置p标签的margin:0px，再设置div标签的padding-top和padding-bottom<br/><br/>。

研究发现，当浏览器为IE6-7时，在图片下面会留有空隙。为了解决这个问题，优选采用以下方法中的一种或多种进行设置：

(1)、在源代码中让\</div>和\<img>在同一行；

(2)将图片转换为块级对象display:block；

(3)设置图片的垂直对齐方式，优选为vertical-align:top/middle/bottom；

(4)如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置：例如，overflow:hidden；

(5)设置图片的浮动属性，例如，float:left。

另外，通过设置行内元素值，还可以调整个别浏览器，如IE6，的双倍边距问题，使本发明提供的展示***兼容性更高。

在不同浏览器中，指示标识可能不同，通过改变显示标识或显示手型的描述，使得所有浏览器都能识别。例如，将cursor:hand描述为cursor:pointer。

在浏览页面中，涉及到数据时往往还会以表格的形式呈现，然而，表格内容是否自动换行在不同浏览器中并不总是相同的。优选通过设置table-layout属性，例如，table-layout:fixed，使表格保持自动换行；优选table-layout属性为word-wrap:break-word。

研究发现，在IE浏览器中有关列表的标签，li标签，被指定了高度，这导致本发明提供的展示***在使用IE浏览器时会出现排版错误。优选通过对列表设置行高，代替li标签高度，可以避免列表排版错误。

进一步地，浏览器的容器标签，父容器用来包含目标元素；在目标元素内的元素就是子容器。当子容器浮动后，父容器无法自适应，存在扩展问题。

优选通过clear属性对浮动元素进行设置，更优选通过div标签下的clear:both设置实现，例如：<br/>

\<div style＝"border:1px solid#333；width:204px"><br/>

\<div style＝"width:100px；border:1px solid#333；float:left；">子容器a</div><br/>

\<div style＝"width:100px；border:1px solid#333；float:left；">子容器b</div><br/>

\<div style＝"clear:both"></div><br/>

\</div>

其中，所述数据存储模块中存储有设定领域的数据，优选存储经过处理的符合数据分析需求的数据。

所述数据信息存储于数据存储模块中，特别指服务器，优选存储于服务器的数据库中，更优选以数据展示时的样式存储于数据库中。

例如，当需要使用表格展示数据时，优用结构更合理、表格划分更清晰的表格存储于服务器的数据库中；当数据种类较多，分类展示数据更清楚和明确时，可以选用柱状图汇总和展示数据；当展示数据趋势时，可以使用线条图展示；当表现数据占比时，可以使用饼图进行展示；当需要定位时，可以使用地图进行展示。

为了更好地展示图形和表格，优选根据行业特点和展示数据的需求设定符合数据分析特点的展示图形，例如不同内容分类的柱状图、线条图、饼图等；进一步地，还可以设置适用于图形或表格的图例，以辅助说明数据信息，可以使展示效果更好，展示内容更符合业务需求和用户需求。

也可以将收集的数据按照设定的要求进行存储，例如统一数据单位，或者将数据设置为不同的维度，如使用月数据生成季度、年度数据、业务所需汇总数据等。最好将数据按照设定的格式进行存储，有利于搜索模块提高检索速度。

在不同展示窗口内展示的数据优选以不同的名称属性存储于数据库中，优选所述名称属性和相应展示窗口展示的内容类别相同。例如，展示窗口展示的内容是某市发展潜力趋势图，可以在数据中以“某市发展潜力趋势图”为名称属性存储该展示窗口内展示的数据信息。

在一种优选的实施方式中，不同展示窗口内展示的数据信息存储于数据库中与该展示窗口内容类别相同命名的文件夹中。

在同一个展示窗口中还可以设置不同内容的选择框，优选将与选择框对应的数据信息以子文件夹的方式存储于数据库中与展示窗口内容类别相同命名的文件夹中；

优选所述子文件夹的命名或名称属性与选择框内容相同。

所述选择框优选以下拉选择框的形式存在。

优选地，在本发明中，将地图或图形使用echart文件存储于数据库相应文件夹中，便于交互处理和美化网页展示。

在本发明提供的屏幕展示***中，每个展示窗口和选择框都设置有链接数据库中文件夹和展示页面浏览器的接口，所述接口分别和不同的文件夹建立一一对应关系。即，对于不同的展示窗口和选择框而言，每个展示窗口和选择框对应的接口都是固定和唯一的。这样可以准确地建立展示内容和数据库内相应数据内容的对应关系，使得***在展示时加载速度更快。

在本发明数据存储模块中存储的数据信息，包括文字、数字、图形、表格、地图等，还设置有时间属性，以区别相同名称属性内数据的时间前后关系。

在本发明提供的屏幕展示***中，用户选定展示内容后，数据存储模块中相应的数据经过计算将结果展示于相应的展示窗口内。由于所述***中数据存储和计算量非常大，在调用和展示选定数据时非常占用***资源。

为了提高屏幕展示***中数据的处理性能，使数据占用资源小，服务器或后台根据设定计算方法计算数据时通过设置多个过滤条件获取数据存储模块中的数据，减少获取数据的量，提高获取数据的准确度，从而减少参与计算的数据的量，进而降低数据占用的资源。

设置过滤条件时，任选地，可以根据数据的属性设定过滤条件，例如，名称属性、时间属性等。

在本发明提供的屏幕展示***中，可以设定任意时间进行数据维护和更新，一般通过人工输入最新数据实现该***的维护和更新。

进一步地，为了提高所述***对数据的可读性，可以使用统一的代码对不同的数据进行命名；优选使用易于区分数据来源并具有唯一标识数据种类的代码进行命名。

所述可读性是指，项目接手人能够在接触数据代码并参照文档的情况下快速看懂项目并且快速上手，进行***功能迭代和继续开发维护。数据命名代码具备清楚的注释和清晰的逻辑，不同功能之间代码分离，耦合度低。较好地，所述数据存储模块可以选用关系型数据库存储数据，优选为Oracle、MySQL或SQL Server。

在本发明提供的展示***中，所述交互处理模块用于监控用户操作，并根据用户的操作，按照设定的步骤运行并输出交互结果。

在交互处理模块中，通过利用VUE.js框架，特别是浏览器中的JavaScript技术获取用户的鼠标点击事件和键盘输入事件，建立和服务器的链接，并将结果反馈到展示模块中。

优选所述交互处理模块通过Restful API进行交互。

在一种更优选的实施方式中，用户通过鼠标进行点击、划过或输入框输入等操作时，浏览器中的JavaScript技术捕获用户的点击事件、划过事件或输入事件，并将获取到的事件发送给交互处理模块，根据用户的操作判断是否要查询数据库；将交互处理模块处理的结果展示到展示模块上。

在进入展示页面进行数据展示时，浏览器优选通过接口向交互模块发起异步加载数据的请求，交互模块通过线程建立数据库中文件夹和展示页面浏览器的链接，将数据库中各个接口所对应的数据传送给浏览器，浏览器刷新后展示更新的数据。

优选所述交互处理模块和数据存储模块通过驱动程序实现链接，所述驱动程序可以选用现有技术中适用本发明数据库的驱动包中的任一种。

同时，通过交互处理模块还可以使浏览器呈现不同的页面交互方式。

在一种优选的实施方式中，可以使用VUE.js框架中的Canvas技术使展示窗口内的数据信息以设定的速度循环上移，呈现出动画效果。

在另一种优选的实施方式中，使用VUE.js框架中的JavaScript技术捕获鼠标的位置，当用户移动鼠标至设定元素上时，通过canvas技术使该元素所在的图形或表格产生动画效果。

所述元素包括图形、柱状图的柱宽、线条图的折点、地图上的任意点、饼图的组成部分等，根据各个展示窗口的不同展示需求选择性设定。

优选地，当JavaScript技术捕获鼠标移动至设定元素上时，浏览器通过html文件获取所述元素对应的数据信息，并通过canvas技术将该数据信息展示于展示模块上。

当所述元素对应的数据信息有多个维度时，例如包括时间、同比值和总额等，优选通过canvas技术设置多个动画效果，以便将全部数据同时展示出来。

特别地，所述地图优选与展示窗口中的内容存在对应关系，当JavaScript技术捕获鼠标对设定元素的点击事件时，浏览器通过JavaScript文件获取所述元素对应的eachart文件，并将该数据信息展示于展示模块上。

当使用搜索模块时，浏览器的JavaScript技术捕获键盘的输入事件并获取用户输入的内容，浏览器通过html文件获取所述内容在数据库中对应的eachart文件，并将该数据信息展示于展示模块上。

更优选地，在所述关系型数据库中，将收集到的信息进行整理、分类、索引形成索引库，以便于搜索模块进行检索。

为了获得特定数据内容，优选在所述展示***中设置具有搜索功能的搜索模块，通过搜索获取存储于数据库中的数据信息。

在一种优选的实施方式中，在展示***的展示网页上设置有搜索框，通过用户输入的关键字可以精确或模糊检索到存储于数据库中与该关键字匹配的全部数据，并通过展示模块的浏览器展现出来。

优选的，用户在搜索框内输入关键字后，浏览器通过JavaScript技术捕获鼠标的点击事件和键盘的输入事件，浏览器将获取的关键字传输给服务器，服务器与数据库的接口建立链接，在数据库中检索与该关键字匹配的数据，并通过展示模块的浏览器展现出来。

所述搜索模块优选为搜索引擎，其可以使用选自ElasticSearch、SOLR、Hbase或MySQL中的任一种。

优选使用ElasticSearch作为搜索引擎，存储索引数据将设定领域的相关数据存储于数据库中，和执行搜索功能。

所述ElasticSearch具有浏览器功能，实时查询性能好，数据存放结构适合搜索，文档充足，生态圈完善便于用于浏览展示模块展示的内容和利用其进行数据检索。

所述搜索引擎可以使用现有技术中的开源框架构建，也可以根据需求自行按照常用方法进行构建。例如，展示模块可以通过使用Restful API的形式实现数据库和浏览器的交互。

在搜索模块中，任选地，还可以根据行业特点构建字典库，所述字典库为含有众多行业相关的关键词的集合，以便对输入的内容进行语义分析，提高检索的准确性。

在一种优选的实施方式中，当在搜索框内搜索特定内容时，浏览器通过JavaScript技术捕获键盘的输入事件，浏览器通过使用Restful API框架将获取的关键字传输给服务器，服务器与数据库建立链接，在数据库中检索与该关键字匹配的地图信息和数据信息，分别展示在显示地图的展示窗口中和展示搜索结果的展示窗口中。

本发明提供的一种基于异步加载屏幕信息的***基于浏览器检索功能和服务器的存储功能加以实现，可以为用户提供准确详实的数据、流畅的用户体验和丰富的界面展示。

在所述***中，最好设置有登陆界面，根据输入的用户名称和密码进入基于异步加载数据信息展示***中。

在一种优选的实施方式中，所述***中根据用户名称设置用户查阅数据的权限。

当用户登陆所述异步加载数据信息展示***时，通过数据异步加载将最新数据提供给用户。

较好地，当用户登陆/进入所述异步加载数据信息展示***时，首先进入展示模块中设定的默认页面。

该默认页面中首先显示出最近一次进入该***时展示的内容，由于这些内容在上次展示时已经经过了缓存，所以用户在登陆/进入所述异步加载数据信息展示***时可以很快的看到展示模块中展示的数据内容。

所述***在默认页面中显示缓存数据后，浏览器的JavaScript文件通过特定接口建立线程读取后台数据库中的数据，通过数据的时间属性，判断缓存的数据是否为最新时间的数据；当缓存的数据不是最新时间的数据时，该线程将获得的最新数据传送给显示模块，特别是浏览器的html文件，并在已显示的默认页面上进行数据的更新显示。

研究发现，数据展示时，同步加载可能由于网络、数据量大等原因，在展示界面会等上10～20秒才能显示，有时还会因为超时无法加载。

因此，本发明还提供了一种使用上述屏幕展示***的基于异步加载数据信息的屏幕展示方法，所述方法包括以下步骤：

1)登录/进入屏幕展示***后在展示模块中显示设定的默认页面，该默认页面中首先显示出最近一次进入该***时展示的内容；

2)通过异步加载的方式，通过线程建立与后台服务器的链接，逐步向默认页面中载入所需的最新数据；并通过展示模块展示获取的数据。

进一步地，在步骤2)中，

i.在展示模块中，设定页面的浏览器通过接口向交互处理模块特别是RestfulAPI发起异步加载数据的请求；

ii.交互处理模块收到异步加载数据的请求后，启动一个独立的线程从数据存储模块特别是数据库中请求数据，根据数据的时间属性搜索最新时间的数据；

iii.当请求到数据后，线程将数据传送给前端展示模块，优选为浏览器，特别是浏览器的html文件；

iv.前端展示模块特别是浏览器的html文件接收数据后刷新数据，显示更新后的数据。

在一种优选的实施方式中，用户在搜索模块的搜索框内输入关键字后，浏览器通过JavaScript技术捕获鼠标的点击事件和键盘的输入事件，并将获取的关键字传输给后台服务器，服务器与数据库的接口建立链接，在数据库中检索与该关键字匹配的数据，并通过展示模块的浏览器展现出来。

本发明提供的一种基于异步加载屏幕信息的展示方法可以一步到位展示数据，响应速度更快，对于使用到的设备要求低，因而可以降低使用该方法的***的成本。

通过异步加载可直接打开展示界面，等数据更新送达后再显示新的数据，不必等待展示界面的响应。该方法使得所述基于异步加载数据信息的屏幕展示***显示数据时更流畅，没有卡顿感，用户体验感上升，数据显示的顺滑感较常规展示方法提高了10～20％。

实施例

实施例1

一种基于异步加载数据信息的屏幕展示***，所述***在联网时通过浏览器展示使用，浏览器的分辨率为5464x1536。

使用CSS文件设置展示页面的排版样式。其中，通过div标签设置块元素和浮动块元素的边距，使其左右居中；设置文本高度为容器标签高度，使文本保持垂直居中；并对容器标签的高度进行设置为，1px时显示一个字体的高度，使div标签高度相同；div标签中嵌套有p标签时，设置p标签的margin:0px，再设置div标签的padding-top和padding-bottom<br/><br/>；对于图片，在源代码中让\</div>和\<img>在同一行；将图片转换为块级对象display:block；设置图片的垂直对齐方式为vertical-align:top/middle/bottom；设置图片的浮动属性为float:left；对于表格，设置为自动换行。设置clear属性为clear:both，实现子容器浮动父容器自适应和扩展。存在列表时，对列表设置行高，代替li标签高度，避免列表排版错误。使用cursor:pointer描述显示手型。

使用VUE.js框架进行网页排版，设置有多个显示不同数据内容的展示窗口，如图8所示。在展示窗口中还设置有下拉选择框，如图2所示的所述***的屏幕界面。

其中，将收集的数据按需求统计后绘制成柱状图、线条图、饼图，将该数据的图形、文字和数字以展示窗口的类别命名后存储于MySQL数据库中。在该数据库中将地图以echart文件存储于数据库中，存储文件以展示窗口的类别命名。

设置接口，使数据库中的信息和浏览器中的设定展示窗口建立一一对应关系。

其中，使用VUE.js框架中的Canvas技术使展示窗口内的数据信息以设定的速度循环上移；

使用VUE.js框架中的JavaScript技术捕获鼠标的位置，当用户移动鼠标至设定元素上时，通过canvas技术使该元素所在的图形或表格产生动画效果；如图3所示，鼠标滑过柱状图柱宽时产生多维度数据的动画效果。

使用JavaScript技术捕获鼠标移动至设定元素上时，浏览器通过html文件获取所述元素对应的数据信息，并通过canvas技术将该数据信息展示于展示模块上。如图4所示，鼠标点击饼图时出现数据内容的动画效果。

所述地图优选与展示窗口中的内容存在对应关系，当JavaScript技术捕获鼠标对设定元素的点击事件时，浏览器通过JavaScript文件获取所述元素对应的eachart文件，并将该数据信息展示于展示模块上。如图5所示，在展示窗口内展示有设定地区的地图。

当使用搜索模块时，浏览器的JavaScript技术捕获键盘的输入事件并获取用户输入的内容，浏览器通过html文件获取所述内容在数据库中对应的eachart文件，并将该数据信息展示于展示模块上。如图6所示，搜索后展示地图的展示窗口中呈现带有定位和数据信息的地图。

所述搜索模块中设置有搜索框，用户可以在搜索框内输入查询内容，可精确搜索也可模糊匹配。如图7所示。

用户在搜索框内输入内容并点击搜索按钮时，浏览器通过JavaScript技术捕获键盘的输入事件，浏览器将获取的关键字传输给Restful API框架实现交互，启动一个线程从数据库内搜索数据，搜索模块将匹配的搜索结果输送给浏览器，并展示在展示页面上。

所述基于异步加载数据信息的屏幕展示***采用异步加载的形式展示数据信息，包括：

1)登录/进入屏幕展示***后在展示模块中显示设定的默认页面，该默认页面中首先显示出最近一次进入该***时展示的内容；

2)通过异步加载的方式，通过线程建立与后台服务器的链接，逐步向默认页面中载入所需的最新数据；

其中，在步骤2)中，

i.在展示模块中，设定页面的浏览器通过接口向RestfulAPI发起异步加载数据的请求；

ii.交互模块收到异步加载数据的请求后，启动一个独立的线程从数据存储模块特别是数据库中请求数据，根据数据的时间属性搜索最新时间的数据；

iii.当请求到数据后，线程将数据传送给前端展示模块，优选为浏览器，特别是浏览器的html文件；

iv.前端展示模块特别是浏览器的html文件接收数据后刷新数据，显示更新后的数据。

该方法显示数据更流畅，不卡顿，提升了用户体验。

以上结合具体实施方式和范例性实例对本发明进行了详细说明，不过这些说明并不能理解为对本发明的限制。本领域技术人员理解，在不偏离本发明精神和范围的情况下，可以对本发明技术方案及其实施方式进行多种等价替换、修饰或改进，这些均落入本发明的范围内。本发明的保护范围以所附权利要求为准。

Claims (6)

1.一种基于异步加载数据信息的屏幕展示***，其特征在于，该***包括：

展示模块，其用于显示数据页面及交互结果页面；

搜索模块，其根据用户输入的指令在数据存储模块内进行数据搜索；

交互模块，其用于监控用户操作，按照设定的步骤运行用户操作并输出交互结果；

数据存储模块，其用于存储设定的数据；

所述展示模块中浏览器的分辨率为为5464x1536；

所述展示模块的展示网页使用VUE.js框架网页排版，设置有多个显示不同数据内容的展示窗口；所述数据内容包括质量趋势、规模趋势、潜力趋势、营业收入分产业发展占比、经济运行概述、区域地图、企业数量对比和企业评价；还包括企业运营报表数据、能耗数据、人员数据、固定资产数据、营业额、利润、纳税额、工资、待收欠款；在网页排版中，使用适用多种浏览器的CSS文件设置展示页面的排版样式；

在展示窗口中设置有下拉选择框，选择框内设置有不同内容以供选择；

通过设置块元素的左外边距和右外边距，使得块元素在不同浏览器中保持水平居中；或者通过对块元素设置div标签设定对齐方式，使得块元素在不同浏览器中保持水平居中；

通过设置div标签设置浮动块元素的外边距，漂浮方向，使浮动块元素保持设定的对齐方式；

通过设置容器标签的高度确定字体的显示高度；

所述交互模块使用Restful API进行交互；

使用VUE.js框架中的Canvas技术使展示窗口内的数据信息以设定的速度循环上移；和/或，

使用VUE.js框架中的JavaScript技术捕获鼠标的位置，当用户移动鼠标至设定元素上时，通过canvas技术使该元素所在的图形或表格产生动画效果；和/或，

使用JavaScript技术捕获鼠标移动至设定元素上时，浏览器通过html文件获取所述元素对应的数据信息，并通过canvas技术将该数据信息展示于展示模块上；

当所述元素对应的数据信息有多个维度时，包括时间、同比值和总额，通过canvas技术设置多个动画效果，以便将全部数据同时展示出来；

所述地图与展示窗口中的内容存在对应关系，当JavaScript技术捕获鼠标对设定元素的点击事件时，浏览器通过JavaScript文件获取所述元素对应的eachart文件，并将该数据信息展示于展示模块上；

当使用搜索模块时，浏览器的JavaScript技术捕获键盘的输入事件并获取用户输入的内容，浏览器通过html文件获取所述内容在数据库中对应的eachart文件，并将该数据信息展示于展示模块上；

进入所述异步加载数据信息展示***时，首先进入展示模块中设定的默认页面；

在该默认页面中首先显示出缓存中的数据，再通过线程读取后台数据库中的数据，并在已显示的默认页面上进行数据的更新显示。

2.根据权利要求1所述的屏幕展示***，其特征在于，

不同展示窗口内展示的数据信息存储于数据库中与该展示窗口内容类别相同命名的文件夹中；

同一个展示窗口中，与选择框对应的数据信息以子文件夹的方式存储于数据库中与展示窗口内容类别相同命名的文件夹中；

服务器或后台根据设定的计算方法计算数据时通过设置多个过滤条件获取数据存储模块中的数据，以减少数据占用资源；

所述数据存储模块为关系型数据库存储数据，为Oracle、MySQL或SQL Server。

3.根据权利要求1所述的屏幕展示***，其特征在于，

所述搜索模块为搜索引擎，使用选自ElasticSearch、SOLR、Hbase或MySQL中的任一种；

通过在默认展示页面中设置搜索框，用户通过搜索框输入待搜索信息的关键词。

4.一种使用权利要求1-3之一所述***的基于异步加载数据信息的屏幕展示方法，所述方法包括以下步骤：

1）用户登录/进入屏幕展示***后在展示模块中显示设置的默认页面，该默认页面中首先显示出最近一次进入该***时展示的内容；

2）以异步加载的方式，通过线程建立与后台服务器的链接，逐步向默认页面中载入所需的最新数据；并展示模块展示获取的数据。

5.根据权利要求4所述的展示方法，其特征在于，

在步骤2）中，

在展示模块中，设定页面的浏览器通过接口向交互模块发起异步加载数据的请求；

交互模块收到异步加载数据的请求后，启动一个独立的线程从数据库中请求数据，根据数据的时间属性搜索最新时间的数据；

当请求到数据后，线程将数据传送给前端展示模块，为浏览器的html文件；

前端浏览器的html文件接收数据后刷新数据，显示更新后的数据。

6.根据权利要求4或5所述的展示方法，其特征在于，

用户在搜索模块的搜索框内输入关键字后，浏览器通过JavaScript技术捕获鼠标的点击事件和键盘的输入事件，并将获取的关键字传输给后台服务器，服务器与数据库的接口建立链接，在数据库中检索与该关键字匹配的数据，并通过展示模块的浏览器展现出来。