CN106682218B - 一种工业企业Web数据图形化系统及生成方法 - Google Patents

Abstract

一种工业企业Web数据图形化系统及生成方法，涉及工业企业数据展示技术领域。包括报表模块、图形服务模块、图形配置模块和图形浏览模块、图形展示模块。报表模块、图形配置模块、图形服务模块和图形展示模块全部部署在局域网的Web服务器中，客户端通过局域网利用Http协议与服务器进行连接。客户端是计算机系统中浏览器软件。通过在浏览器的地址栏中输入Web服务器的IP地址，访问本发明所述的系统。另外，本发明依赖关系数据库，需要在局域网的Web服务器中，或者局域网的其他支持关系数据库软件的服务器中安装数据库软件，为图形展示模块和报表模块提供数据支持。优点：图形类型丰富，可以满足工业生产过程中需要的各种图形展示模块。大大提高了用户的工作效率，方便各种浏览器使用。

Description

一种工业企业Web数据图形化系统及生成方法

技术领域

本发明涉及工业企业数据展示技术领域，尤其是涉及一种工业企业Web数据图形化系统和方法，是一种简易高效的工业企业数据图形化系统及生成方法

背景技术

数据展示一直是各行各业普遍使用一种重要工具。在工业企业中尤其重要。使用者利用图形可以及时直观的发现生产中存在的问题。目前普遍数据展示方法是，在应用系统中嵌入图形控件，然后根据选择的数据和图形类型(柱状、饼图、折线等)进行绘制。这种方法的缺点是，数据和控件分离，每次打开系统都要重新选择数据和图形类型，然后才能绘制，对于个别数据点的关注者，此过程相当繁琐，且每次只能看一种图形或者一张图，对于多方位、多数据点的观察，只能通过打开多个客户端进行使用。

发明内容

本发明的目的是提供一种简易高效的工业企业Web数据图形化系统和方法。通过对网页上的数据与图形控件的绑定、配置与存储，实现数据点和数据源的分离，数据点与图形控件可以自由的实现绑定和订阅，使用户可以直接通过图形到达使用数据的目的。

本发明中的工业企业Web数据图形化系统包括报表模块、图形服务模块、图形配置模块和图形浏览模块、图形展示模块。

本发明中报表模块、图形配置模块、图形服务模块和图形展示模块全部部署在局域网的Web服务器中，客户端通过局域网利用Http协议与服务器进行连接。客户端是计算机系统中浏览器软件。通过在浏览器的地址栏中输入Web服务器的IP地址，访问本发明所述的系统。另外，本发明依赖关系数据库，需要在局域网的Web服务器中，或者局域网的其他支持关系数据库软件的服务器中安装数据库软件，为本发明图形展示模块和报表模块提供数据支持。

本发明中报表模块，图形配置模块、图形展示模块分别与图形服务模块通过图形服务模块提供的Web API接口，使用Ajax技术进行连接。其中图形浏览模块通过浏览器中的事件模型触发调用图形展示模块。

本发明中的报表模块为报表数据的展示模块，其中报表表格中的单元格数据以{Id:123,Value:object}形式出现，在报表模块渲染的时候，取Value的值进行渲染。报表服务模块作为图形配置模块的输入，图形配置模块取报表模块中单个单元格中数据Id作为绘图配置项。图形配置模块通过订阅报表中的数据，并选择预生成的图形类型(柱状图、折线图)等图形类型，并以JSON形式，提交给图形服务模块。图形服务模块以JSON文件格式将其保存。图形浏览模块，通过图形服务模块获取所有已经配置的图形配置文件，然后通过解析图形配置文件，以SVG形式，展示所有的配置图形。图形展示模块，通过图形浏览模块中鼠标事件(如双击SVG图)，获取图形的配置的相关信息，并以Ajax请求图形配置服务模块，获取图形配置信息，然后根据图形配置信息，解析图形信息，生成图形，并可以根据图形展示模块中的查询条件，生成查询条件下的数据图形信息。

本发明中报表模块，负责提供图形订阅的数据源，且报表中的单元格中的数据以{Id:123,Value:object}形式出现，在图形模块点击订阅的时候可以订阅报表单元格中数据Id。

其中图形配置模块负责订阅需要展示的数据点，以及配置数据展示的图形的类型，其中类型包括常见的图形类型，例如折线图，柱状图，饼图，组合柱状图等，还包括坐标轴的配置和系列的配置。系列指展示的图形中包括几个图，如两条折线，就是两个系列。配置完成之后，将配置的结果以JSON格式保存在文件中，然后用户根据数据图形展示根据配置的文件的中的配置参数(数据源，图形类型，坐标轴，系列)将图形绘制出来，并可根据图形展示中的时间控件查询不同的时间范围内的数据。

图形配置包括，图形导航区，图形展示区。其中图形展示区包括工具栏区和展示区。工具栏区包括周期选择，时间范围选择，图形配置设置，图形类型选择，添加新图形，查询和保存。

所述的图形导航区指以树状结构展示所有的图形分类情况。方便用户快速定位到图形模板。

所述的图形展示区指图形配置好后，用户可以通过预览界面展示数据的图形趋势。

所述的展示区为图形展示区中展示已配置好的图形的。

所述的工具栏区，用来测试和配置图形的。其中周期选择，是用来确认图形是用什么周期的数据来绘制图形。这个周期是指系统存储数据的一个配置，用来方便统计企业中各个财务周期的实物量的情况。比如一小时，一个班次，一天，一周，一月某种物质的消耗量，把每个周期的量分别存储，方便后续查询。所以在绘制图形的时候，向数据库请求数据时，需要携带统计周期。

所述的时间范围，指选择数据的时间范围，要制定绘制图形的数据查询时间范围，即从某个时间点，到某个时间点的数据。

所示的图形配置设置，为一个按钮，当点击它时，弹出一个界面，该界面会显示一个类似表单的配置画面。填写项包括，标题，分组，周期，坐标轴，标识线，系列和数据。其中标题指该图形的名称。分组为根据使用情况，对图形根据分组名称进行归类分组，一个图形可以分属若干种组称，分组名称以“，”间隔多个分类，以“>”表示分组中的子分组。例如：高炉煤气日消耗图形的分类：炼铁厂>1#高炉，介质。说明高炉煤气属于两个分类，分别是炼铁厂1号高炉和介质两个类别，其中炼铁厂和1#高炉是两个类别，但是1#高炉从属于炼铁厂。周期为模板周期，次周期用来确定在没有选择工具栏的周期的情况下，默认模板用什么周期作为数据的查询周期。

坐标轴配置，指图形区的坐标轴，该项可配置多个坐标轴，目的是用来显示不同量级的数据。该项为一个表格控件，控件的上方有两个按钮分别用来添加和删除坐标轴。每一个坐标轴的选项包括坐标轴标题，最小值，最大值，是否位于右侧，是否启用。坐标轴的最小值表示数据在图形上显示的最小值。最大值，表示图形区的最大可展示数据值。坐标轴根据最小值和最大值等分坐标轴刻度。为于右侧表示该坐标轴是否位于右侧，该项提供是与否两个选择。以及每一项坐标轴是否启用。

系列指图形类型，用来管理一个图形中有多组图形的类型情况，如多条折线，多个柱状图，多个饼图。每一个系列对应多组数据。该选项通过在抓取数据之前的图形类型选项和抓取的数据确定。

单元格是绘图所需要的。数据是从报表中抓取的。其中每一行数据都由图形名称，属性ID,报表ID,数据类型,数据周期，函数，偏移量和偏移周期数据组成。属性ID是数据在报表单元格的ID。报表ID为数据所在报表的ID。数据类型表示要获取什么类型的数据，可选类型包括差值，表底值，当前值，其中差值表示某个时间范围内仪表在结束时间的显示值和起始时间显示值差值；表底值表示某个时间的仪表的显示值；当前值表示仪表当前值。函数指从数据库中请求一段时间的数据后的处理方式，例如求和、平均等。偏移量：表示按照某个数据周期进行时间偏移，改变该数据的查询时间。偏移周期数表示：偏移多少个周期，确定查询数据的结束时间，根据开始时间和周期算出该数据点的结束时间。

所述的图形类型选择，是指在图形配置中选择需要绘制的图形类型，当在下拉菜单中选择时，将会对系统中所有打开的报表的单元格数据添加订阅事件，当点击报表的某一单元格时，图形配置就会抓取该单元格的内容，将其作为图形绘制的数据源。

所述查询是指根据图形类型，查询条件(开始时间和结束时间)，以及从报表中订阅的单元格数据，从数据库中查询数据，并将查询的结果根据图形类型绘制在图形配置窗口的绘图区。

所述的保存是指将图形配置窗口配置的结果以JSON文件格式的形式存储在网站的文件系统中，并将图形配置区的绘图结果，将绘图结果已SVG的格式也保存在网站的文件系统中。

本发明所述的图形服务模块，是为图形配置模块、图形浏览模块和图形展示模块服务的模块。其功能是为图形配置模块提供保存结果，为图形浏览模块提供获取所有已配置的模块，为图形展示模块提供根据查询条件获取图形绘制所需的数据服务。

本发明所述的图形浏览模块是指将图形配置的结果进行展示，方便用户使用。它是根据提取所有已配置图形文件的分组信息，根据分组信息生成导航信息。根据已配置图形的SVG文件生成预览图片。

本发明所述的图形展示模块，根据图形浏览模块中的图形预览图片，用户点击后，图形浏览模块调用图形展示模块，图形展示模块根据预览信息，向图形服务模块发出请求，图形服务模块返回图形配置信息，图形展示模块解析图形配置信息，将图形绘制出来。并可根据图形展示模块提供查询条件，向图形服务模块发出查询数据的请求，图形服务模块根据图形配置模块的配置的报表单元格的Id和查询条件，向数据库中查找对应时间范围内和Id的数据，并以JSON形式返回个图形展示模块，图形展示模块根据返回的数据，对图形进行重新绘制。

本发明提供的是这样一种图形生成方法，包含下列步骤：

(1)打开系统中需要绘制图形的所有报表，为图形配置提供数据源。

(2)打开图形配置模块，在图形类型下拉菜单中选择需要绘制的图形类型。

(3)点击添加按钮，然后在报表的表格中点击需要绘制的单元格。

(4)然后在图形配置模块中，选择配置按钮，在图形配置窗口中，配置图形的标题，查询条件，坐标轴，标示线，系列，以及对从报表中抓取的数据进行配置。

(5)配置完成后，保存配置结果，配置结果以JSON和SVG的格式存储，其中JSON中存储的是图形配置信息，包含(4)中的配置结果，SVG中保存的是图形配置中在图形区生产的结果的图片信息。

(6)根据步骤(5)中结果，图形展示模块，分析(5)中JSON文件的Group信息，生成图形的导航信息，根据(5)中SVG图片生成图形展示区的图形预览图片。

(7)根据步骤(6)的结果，点击图片，根据图片中携带的信息，向网站服务请求Ajax请求，读取图形的配置信息，将返回的结果，提交给图形配置模块，图形配置模块根据图形的配置信息，将图形绘制出来，用户根据图形配置模块的查询条件，选择一定时间范围内的数据进行绘制。

本发明的优点：

1、本发明中图形类型丰富，可以满足工业生产过程中需要的各种图形展示模块。

2、本发明中图形在配置完成之后，不依赖数据，可以在系统中任何地方进行展示。

3、本发明中图形配置完成之后，用户不在需要在系统中找数据，然后在系统的固定绘图区进行绘制，直接点击自己业务关心的图片，点击即可查看，大大提高了用户的工作效率。

4、本发明中信息存储以浏览器通用交互格式JSON保存数据，统一了前后台交互协议，方便各种浏览器使用。

5、本发明使用Web模式，不需要其他安装文件，只需操作系统中有浏览器即可。

附图说明

图1为本发明系统结构图。

图2为本发明图形配置程序结构图。

图3位本发明图形展示程序结构图。

具体实施方式

本发明中的工业企业Web数据图形化系统包括报表模块、图形服务模块、图形配置模块和图形浏览模块、图形展示模块。

本发明中报表模块、图形配置模块、图形服务模块和图形展示模块全部部署在局域网的Web服务器中，客户端通过局域网利用Http协议与服务器进行连接。客户端是计算机系统中浏览器软件。通过在浏览器的地址栏中输入Web服务器的IP地址，访问本发明所述的系统。另外，本发明依赖关系数据库，需要在局域网的Web服务器中，或者局域网的其他支持关系数据库软件的服务器中安装数据库软件，为本发明图形展示模块和报表模块提供数据支持。

本发明中报表模块，图形配置模块、图形展示模块分别与图形服务模块通过图形服务模块提供的Web API接口，使用Ajax技术进行连接。其中图形浏览模块通过浏览器中的事件模型触发调用图形展示模块。

本发明中的报表模块为报表数据的展示模块，其中报表表格中的单元格数据以{Id:123,Value:object}形式出现，在报表模块渲染的时候，取Value的值进行渲染。报表服务模块作为图形配置模块的输入，图形配置模块取报表模块中单个单元格中数据Id作为绘图配置项。图形配置模块通过订阅报表中的数据，并选择预生成的图形类型(柱状图、折线图)等图形类型，并以JSON形式，提交给图形服务模块。图形服务模块以JSON文件格式将其保存。图形浏览模块，通过图形服务模块获取所有已经配置的图形配置文件，然后通过解析图形配置文件，以SVG形式，展示所有的配置图形。图形展示模块，通过图形浏览模块中鼠标事件(如双击SVG图)，获取图形的配置的相关信息，并以Ajax请求图形配置服务模块，获取图形配置信息，然后根据图形配置信息，解析图形信息，生成图形，并可以根据图形展示模块中的查询条件，生成查询条件下的数据图形信息。

下面通过具体实施例对本发明做进一步说明。

以配置国内某钢铁企业各工序一段时间峰谷平用电比叠加柱状图为例。

实施例1：宽厚板一车间，宽厚板二车间，热卷板一车间，热卷板二车间的峰谷平用电对比

(1)打开尖峰平谷结算统计日报表。

(2)在图形配置窗体中，在图形类型菜单中选择叠加柱状图。

(3)在(1)步中打开的报表中，选择本日尖作为第一组叠加柱状图的绘图数据。

(4)在(2)中选择图形配置按钮，打开，填写图形标题，分组，查询条件，周期，单元格信息，在单元格信息中选择函数，选择平均值，一段时间内各个车间的尖峰平谷的平均值作为统计数据的依据。

(5)重复(2)，(3)，(4)绘制本日峰。

(6)重复(2)，(3)，(4)绘制本日平。

(6)重复(2)，(3)，(4)绘制本日谷。

(7)修改图例，打开图形配置，在系列中根据绘图顺序，尖，峰，平，谷，对系列表格中的名称列进行修改。

(8)在图形配置窗口中选择一段时间，进行查询，生成预览图。

(9)在图形配置窗口中选择保存按钮，保存图形配置文件和图形预览文件。

(10)在图形展示窗口中会展示(9)中保存的结果。

(11)在(10)中点击图形预览后，打开图形配置窗口，绘制图形配置结果。

Claims (3)

1.一种工业企业Web数据图形化系统，其特征在于，包括报表模块、图形服务模块、图形配置模块和图形浏览模块、图形展示模块；

报表模块、图形配置模块、图形服务模块和图形展示模块全部部署在局域网的Web服务器中，客户端通过局域网利用Http协议与服务器进行连接；客户端是计算机系统中浏览器软件，通过在浏览器的地址栏中输入Web服务器的IP地址，访问所述的系统；依赖关系数据库，需要在局域网的Web服务器中，或者局域网的其他支持关系数据库软件的服务器中安装数据库软件，为图形展示模块和报表模块提供数据支持；

图形配置模块、图形展示模块分别与图形服务模块通过图形服务模块提供的Web API接口，使用Ajax技术进行连接,报表模块通过浏览器的操作在内存中与图形配置模块进行链接；报表模块通过浏览器的操作；

报表模块为报表数据的展示模块，其中报表表格中的单元格数据以{Id:123,Value:object}形式出现，在报表模块渲染的时候，取Value的值进行渲染；报表模块作为图形配置模块的输入，图形配置模块取报表模块中单个单元格中数据Id作为绘图配置项；图形配置模块通过订阅报表中的数据，并选择预生成的图形类型，并以JSON形式，提交给图形服务模块，图形服务模块以JSON文件格式将其保存；图形浏览模块，通过图形服务模块获取所有已经配置的图形配置文件，然后通过解析图形配置文件，以SVG形式，展示所有的配置图形；图形展示模块，通过图形浏览模块中鼠标事件，获取图形的配置的相关信息，并以Ajax请求图形配置模块，获取图形配置信息，然后根据图形配置信息，解析图形信息，生成图形，并根据图形展示模块中的查询条件，生成查询条件下的数据图形信息；

报表模块，负责提供图形订阅的数据源，且报表中的单元格中的数据以{Id:123,Value:object}形式出现，在图形配置模块点击订阅的时候可以订阅报表单元格中数据Id；

图形配置模块负责订阅需要展示的数据点，以及配置数据展示的图形的类型，类型包括常见的图形类型：折线图，柱状图，饼图，组合柱状图；还包括坐标轴的配置和系列的配置；系列指展示的图形中包括几个图，两条折线，就是两个系列；配置完成之后，将配置的结果以JSON格式保存在文件中；

图形配置模块包括，图形导航区，图形展示区；其中图形展示区包括工具栏区和展示区；工具栏区包括周期选择，时间范围选择，图形配置设置，图形类型选择，添加新图形，查询和保存；

所述的图形导航区指以树状结构展示所有的图形分类情况，方便用户快速定位到图形模板；

所述的图形展示区指图形配置好后，用户可以通过预览界面展示数据的图形趋势；

所述的展示区为展示已完成配置的图形；

所述的工具栏区，用来测试和配置图形的；其中周期选择，是用来确认图形是用什么周期的数据来绘制图形；这个周期是指系统存储数据的一个配置，用来方便统计一小时，一个班次，一天，一周，一月某种物质的消耗量；在绘制图形的时候，向数据库请求数据时，需要携带统计周期；

所述的时间范围，指选择数据的时间范围，要制定绘制图形的数据查询时间范围，即从某个时间点，到某个时间点的数据；

所述的图形配置设置，为一个按钮，当点击它时，弹出一个界面，该界面会显示一个类似表单的配置画面；填写项包括，标题，分组，周期，坐标轴，标识线，系列和数据；

坐标轴配置，指图形区的坐标轴，该项可配置多个坐标轴，目的是用来显示不同量级的数据；

系列指图形类型，用来管理一个图形中有多组图形的类型情况：多条折线，多个柱状图，多个饼图；每一个系列对应多组数据；该选项通过在抓取数据之前的图形类型选项和抓取的数据确定；

单元格是绘图所需要的，数据是从报表中抓取的，其中，每一行数据都由图形名称，属性ID,报表ID,数据类型,数据周期，函数，偏移量和偏移周期数据组成；属性ID是数据在报表单元格的ID，报表ID为数据所在报表的ID，数据类型表示要获取什么类型的数据，可选类型包括差值，表底值，当前值，其中，差值表示某个时间范围内仪表在结束时间的显示值和起始时间显示值差值；表底值表示某个时间的仪表的显示值；当前值表示仪表当前值；函数指从数据库中请求一段时间的数据后的处理方式，偏移量：表示按照某个数据周期进行时间偏移，改变该数据的查询时间；偏移周期数表示：偏移多少个周期，确定查询数据的结束时间，根据开始时间和周期算出该数据点的结束时间；

所述的图形类型选择，是指在图形配置中选择需要绘制的图形类型，当在下拉菜单中选择时，将会对系统中所有打开的报表的单元格数据添加订阅事件，当点击报表的某一单元格时，图形配置就会抓取该单元格的内容，将其作为图形绘制的数据源；

所述查询是指根据图形类型，配置图形的数据查询条件：开始时间和结束时间，以及从报表中订阅的单元格数据，从数据库中查询的数据；

所述的保存是指将图形配置窗口配置的结果以JSON文件格式的形式存储在网站的文件系统中，并将图形配置的绘图结果以SVG的文件格式也保存在网站的文件系统中。

2.根据权利要求1所述的工业企业Web数据图形化系统，其特征在于，所述的图形服务模块，是为图形配置模块、图形浏览模块和图形展示模块服务的模块；其功能是为图形配置模块提供保存结果，为图形浏览模块提供获取所有已配置的模块，为图形展示模块提供根据查询条件获取图形绘制所需的数据服务；

所述的图形浏览模块是指将图形配置的结果进行展示，方便用户使用；它是根据提取所有已配置图形文件的分组信息，根据分组信息生成导航信息；根据已配置图形的SVG文件生成预览图片；

所述的图形展示模块，根据图形浏览模块中的图形预览图片，用户点击后，图形浏览模块调用图形展示模块，图形展示模块根据预览信息，向图形服务模块发出请求，图形服务模块返回图形配置信息，图形展示模块解析图形配置信息，将图形绘制出来；并根据图形展示模块提供查询条件，向图形服务模块发出查询数据的请求，图形服务模块根据图形配置模块的配置的报表单元格的Id和查询条件，向数据库中查找对应时间范围内和Id的数据，并以JSON形式返回给图形展示模块，图形展示模块根据返回的数据，对图形进行重新绘制。

3.根据权利要求1所述系统的图形生成方法，其特征在于，包含下列步骤：

(1)打开系统中需要绘制图形的所有报表，为图形配置提供数据源；

(2)打开图形配置模块，在图形类型下拉菜单中选择需要绘制的图形类型；

(3)点击添加按钮，然后在报表的表格中点击需要绘制的单元格；

(4)然后在图形配置模块中，选择配置按钮，在图形配置窗口中，配置图形的标题，查询条件，坐标轴，标示线，系列，以及对从报表中抓取的数据进行配置；

(5)配置完成后，保存配置结果，配置结果以JSON和SVG的格式存储，其中JSON中存储的是图形配置信息，包含步骤(4)中的配置结果，SVG中保存的是图形配置中在图形区生产的结果的图片信息；

(6)根据步骤(5)中结果，图形展示模块，分析步骤(5)中JSON文件得分组信息的生成图形的导航信息，根据步骤(5)中SVG图片生成图形展示区的图形预览图片；

(7)根据步骤(6)的结果，点击图片，根据图片中携带的信息，向网站服务请求Ajax请求，读取图形的配置信息，将返回的结果，提交给图形配置模块，图形配置模块根据图形的配置信息，将图形绘制出来，用户根据图形配置模块的查询条件，选择一定时间范围内的数据进行绘制。

Images