制造业生产监控报表系统的制作方法

本发明涉及半导体集成电路制造领域，具体涉及一种基于web数据可视化的制造业生产监控报表系统及方法。

背景技术：

在传统的制造业中，生产数据大多数以记录和office报表为主，这直接导致文档数量繁多，无法集中化管理，而且反映生产数据的报表往往以表格的形式扎堆呈现给用户，这使得用户难于对数据进行分析，无法快速准确地捕捉到其中隐含的可用于调度生产的价值信息。鉴于上述情况，采用系统的方式对生产数据进行管理存在极大的必要性，然而目前的报表系统一般采用c/s架构搭建，这种架构的报表系统存在以下弊端：

1、对于存在报表curd(创建create、更新update、读取retrieve和删除delete)需求的用户来说，必须安装客户端软件应用才能进行操作；

2、当系统进行阶段性升级维护时，客户端需要根据服务器端频繁地对原有的版本进行卸载升级；

3、报表系统支持的图形形式单一，无法达到用户对图形自定义的需求；

4、报表系统的图形多数以静态方式展现，用户的体验感得不到满足；

5、报表系统不具备支持双浏览模式的条件，有的重点关注全屏展示特效，有的侧重于用于curd操作；

6、部分系统将生产指标独立在各自的模块当中，无法实现集中化统一管理。

技术实现要素：

本发明要解决的技术问题是提供一种制造业生产监控报表系统及方法，可以改善现有架构的报表系统存在的缺陷。

为了解决上述问题，本发明提供的制造业生产监控报表系统，所述系统采用网页化b/s架构，包括前端的应用层以及后台的门户层和基础层；

所述应用层用于向用户提供应用模块并显示对应的生产指标图表；

所述基础层用于对原始生产数据进行抽取并进行后台对象持久化处理；

所述门户层连接所述基础层和所述应用层，其用于对所述用户在所述应用层的访问请求进行身份验证，且当验证通过时将所述应用层的应用模块与所述基础层的后端数据建立联系。

其中，所述前端采用bootstrap+echarts实现，所述后台采用springboot+mybatis+shrio实现。

其中，所述应用层提供的应用模块包括各平台产品完成率模块、今日产品流通量模块、瓶颈情况模块、自动派工率模块、在制品状态分布模块、各区域制品量对比模块，所述生产指标图表包括各平台产品完成率图形、今日产品流通量图形、瓶颈情况图形、自动派工率图形、在制品状态分布图形、各区域制品量对比图形。

进一步的，所述各平台产品完成率模块需要从所述基础层获取的后端数据为平台名称、当月计划投入的在制品数量、当月实际投入的在制品数量；

所述今日产品流通量模块需要从所述基础层获取的后端数据为在制品名称、在制品数量、在制品作业事件、作业时间、预测在制品流通量；

所述瓶颈情况模块需要从所述基础层获取的后端数据为机台名称、机台的负荷能力、在制品名称、在制品数量、在制品的作业机台名称；

所述自动派工率模块需要从所述基础层获取的后端数据为区域名称、当日自动派货在制品move量、当日总的在制品move量；

所述在制品状态分布模块需要从所述基础层获取的后端数据为在制品名称、在制品数量、在制品的状态、在制品作业日期；

所述各区域制品量对比模块需要从所述基础层获取的后端数据为在制品作业日期、在制品名称、在制品所在区域、在制品数量。

进一步的，当平台的产品数量超过设定阈值时，所述应用层采用纵向轮播的方式显示用于表示各平台产品当月完成率与时间进度的关系比的所述各平台产品完成率图形；

所述应用层采用单点数值变化的方式表示当日流通总量的变化情况，并以折线图的方式表示每小时的流通量与目标流通量的比较；

所述应用层采用钟表图与环形图相结合的层叠方式显示用于表示机台能力与实践的进度对比关系的所述瓶颈情况图形；

所述应用层采用雷达图的方式显示用于表示各区域的自动派工的程度的自动派工率图形；

所述应用层采用环形图的方式显示用于表示线上各状态的在制品的数量的在制品状态分布图形；

所述应用层采用html5支持的底层canvas网页绘图技术绘制用户自定义的突出表达各区域的制品量在今日、昨日、上个月的当前日期的对比情况的各区域制品量对比图，且当区域的数量超出设定阈值时，采用横向轮播的方式显示。

其中，所述纵向轮播的实现方法如下：

将需要呈现的指标内容通过ajax按照设定时间间隔定期更新到一卡片数组中；

定义一个用于遍历数组的索引指针indexpoint；

采用卡片存储索引指针指向的指标内容，卡片按照设定的移动距离在底部区域、中部区域、顶部区域三个位置切换，其中，处于底部区域和顶部区域的卡片为不可见的状态，处于中部区域的卡片为可见的状态，且处于中部区域的卡片存储的指标内容始终为所述索引指针指向的指标内容；

第一个卡片的起始位置为中间区域所在位置，其余新增的卡片始于底部区域且终于顶部区域；

所述索引指针和所述卡片依次循环，完成纵向轮播。

其中，所述单点数值变化的实现方法如下：

根据当日产品流通量的平均峰值的位数确定对应数量的槽位，并在每个槽位中纵向设置分别标识“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”的十张大小相同的卡片，且在最初状态时每个槽位的标识“0”的卡片处于可见位置；

随着当日产品流通量的变化，每个槽位将相应数字标识的卡片分别移动到可见位置，且其它卡片都处于不可见的状态。

进一步的，用户可以通过大屏模式或浏览器模式查看所述在制品状态分布图形，当用户选择全屏模式时，对各状态的扇环进行轮播，环形中间显示各状态的在制品数量；当用户选择浏览器模式时，同时显示各状态的扇环，环形中间显示在制品的总数量。

其中，报表页面采用浏览器模式显示时，页面左侧为菜单栏区，页面右侧为生产指标内容区，并采用浏览器渲染样式；报表页面采用全屏模式显示时，页面只包括生产指标内容区，其中包含头部标题，并采用全屏渲染样式。

其中，所述后台包括服务器和数据库。

本发明的生产监控报表系统采用网页化b/s框架，结合统计学原理、可视化技术和工厂实际需求，自动根据原始生产数据绘制相应的生产指标图表，包括各平台产品完成率图形、今日产品流通量图形、瓶颈情况图形、自动派工率图形、在制品状态分布图形、各区域制品量对比图形。本发明的生产监控报表系统具备以下优势：

第一，本发明的报表系统使得用户无需安装客户端应用软件，显著地降低了报表维护和升级的成本，提高了用户的体验舒适感。

第二，本发明的报表系统布局合理，分别采用横向和纵向卡片轮播的手段完成指标内容的展现，并且突出显示对单个生产指标数据变化的动作过程，从而使得布局更加活跃。

第三，本发明的报表系统采用了双浏览模式看板，既能满足普通用户在浏览器模式下，通过折叠左侧菜单栏，扩大主界面观察视野，同时也可以模拟全屏看板，用于监控中心指导生产调控，确保达成工厂准时交货率(otdo)，给企业带来经济效益。

附图说明

图1为本发明的制造业生产监控报表系统的架构图；

图2a至图2e为本发明的纵向轮播的实现过程的示意图；

图3为本发明的单点数值变化的实现过程的示意图；

图4a为本发明的浏览器模式的显示示意图；

图4b为本发明的全屏模式的显示示意图；

图5为本发明的双浏览模式的实现流程图。

具体实施方式

以下通过特定的具体实施例说明本发明的实施方式，本领域技术人员可由本说明书所公开的内容充分地了解本发明的其他优点与技术效果。本发明还可以通过不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点加以应用，在没有背离发明总的设计思路下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。本发明下述示例性实施例可以多种不同的形式来实施，并且不应当被解释为只限于这里所阐述的具体实施例。应当理解的是，提供这些实施例是为了使得本发明的公开彻底且完整，并且将这些示例性具体实施例的技术方案充分传达给本领域技术人员。

本领域技术人员可以由本说明书所揭示的内容轻易地了解本发明的其它优点与功效。在以下描述中阐述了具体细节以便于充分理解本发明，但是本发明亦可通过其它不同的具体实施例加以施行或应用，本说明书中的各项细节亦可基于不同观点与应用，本领域技术人员在不背离本发明的精神下可以进行各种类似推广和替换。

本发明实施例的制造业生产监控报表系统，所述系统采用网页化b/s架构，如图1所示，包括前端的应用层以及后台的门户层和基础层；

所述应用层用于向用户提供应用模块并显示对应的生产指标图表；

所述基础层用于对原始生产数据进行抽取并进行后台对象持久化处理；

所述门户层连接所述基础层和所述应用层，其用于对所述用户在所述应用层的访问请求进行身份验证，且当验证通过时将所述应用层的应用模块与所述基础层的后端数据建立联系。

在本发明一较佳实施例中，所述前端采用bootstrap+echarts实现，所述后台采用springboot+mybatis+shrio实现。

其中，所述后台包括服务器和数据库。

其中，所述应用层提供的应用模块包括各平台产品完成率模块、今日产品流通量模块、瓶颈情况模块、自动派工率模块、在制品状态分布模块、各区域制品量对比模块，所述生产指标图表包括各平台产品完成率图形、今日产品流通量图形、瓶颈情况图形、自动派工率图形、在制品状态分布图形、各区域制品量对比图形。

进一步的，所述各平台产品完成率模块需要从所述基础层获取的后端数据为平台名称、当月计划投入的在制品数量、当月实际投入的在制品数量；

所述今日产品流通量模块需要从所述基础层获取的后端数据为在制品名称、在制品数量、在制品作业事件、作业时间、预测在制品流通量；

所述瓶颈情况模块需要从所述基础层获取的后端数据为机台名称、机台的负荷能力、在制品名称、在制品数量、在制品的作业机台名称；

所述自动派工率模块需要从所述基础层获取的后端数据为区域名称、当日自动派货在制品move量、当日总的在制品move量；

所述在制品状态分布模块需要从所述基础层获取的后端数据为在制品名称、在制品数量、在制品的状态、在制品作业日期；

所述各区域制品量对比模块需要从所述基础层获取的后端数据为在制品作业日期、在制品名称、在制品所在区域、在制品数量。

进一步的，当平台的产品数量超过设定阈值时，所述应用层采用纵向轮播的方式显示用于表示各平台产品当月完成率与时间进度的关系比的所述各平台产品完成率图形；

所述应用层采用单点数值变化的方式表示当日流通总量的变化情况，并以折线图的方式表示每小时的流通量与目标流通量的比较；

所述应用层采用钟表图与环形图相结合的层叠方式显示用于表示机台能力与实践的进度对比关系的所述瓶颈情况图形；

所述应用层采用雷达图的方式显示用于表示各区域的自动派工的程度的自动派工率图形；

所述应用层采用环形图的方式显示用于表示线上各状态的在制品的数量的在制品状态分布图形；

所述应用层采用html5支持的底层canvas网页绘图技术绘制用户自定义的突出表达各区域的制品量在今日、昨日、上个月的当前日期的对比情况的各区域制品量对比图，且当区域的数量超出设定阈值时，采用横向轮播的方式显示。

为了改善传统报表的缺陷，本发明的生产监控报表系统采用网页化b/s框架，根据实际生产数据进行etl(数据抽取extract——转换transform——装载load)处理，再结合统计学原理、可视化技术、页面渲染技术css以及浏览器端脚本javascript等，自动根据原始生产数据绘制相应的生产指标图表，以达到网页报表系统界面对生产指标图表、动态特效和双浏览模式的需求目的。

后台完成数据抽取后，利用mybatis对当前主题数据进行后台对象持久化处理，然后通过ajax(asynchronousjavascriptandxml)异步获取数据到前端，进行数据映射并转换成图元数据，最后利用可视化技术对图元数据进行可视化装载成像。

具体地，在整个数据etl处理过程中，数据抽取是将生产业务数据库的内容通过计算和转化更新到数据分析数据库中的一个过程，其中抽取的数据主要包括在制品的名称、数量、所在区域、作业状态、作业事件名称、作业时间、机台负荷能力等。在数据应用的过程中，数据有必要持久化处理，就是将关系型数据映射为对象，对象经过一系列增、删、改操作后重新映射到关系型数据库中。当前端页面有数据请求时，前端需要异步获取后端数据，这样可以避免页面刷新，并同时支持前端其他操作。在一般情况下，后台返回的数据并不能直接生成图像，需要经过一系列javascript计算处理后才能成为真正的图元数据，然后再利用可视化echarts装载成像。

其中，横向轮播的实现方法为：1)采用bootstrap前端框架的轮播carousel技术，将同类不同源的图形标签，按卡片的方式分别存储，然后设置轮播间隔时间；2)修改bootstrap源码，让左右指示箭头在鼠标悬停时才呈现出来；3)将默认状态下bootstrap设置的左右两端的灰色背景色修改透明背景色。

其中，所述纵向轮播的实现方法如下：

将需要呈现的指标内容通过ajax按照设定时间间隔定期更新到一卡片数组中；

定义一个用于遍历数组的索引指针indexpoint；

采用卡片存储索引指针指向的指标内容，卡片按照设定的移动距离在底部区域、中部区域、顶部区域三个位置切换，其中，处于底部区域和顶部区域的卡片为不可见的状态，处于中部区域的卡片为可见的状态，且处于中部区域的卡片存储的指标内容始终为所述索引指针指向的指标内容；

第一个卡片的起始位置为中间区域所在位置，其余新增的卡片始于底部区域且终于顶部区域；

所述索引指针和所述卡片依次循环，完成纵向轮播。

在该纵向轮播的方法中，轮播的内容并非是图片，而是指标数据内容，而且在纵向轮播过程中，每个阶段涉及的卡片至多为两个，这样可以有效地减小浏览器的储存容量负荷。

具体地，如图2a至图2e所示，纵向轮播的实现过程包括：

1)准备工作：

准备一个容器数组cartarray，由前端通过ajax定期从后端异步获取数据并更新填入cartarray；

准备一个class＝cart的div高度固定为相对高度carheight＝10rem，初始化内容为cararray[0]；

准备一个class＝parentcarts的父容器div用于盛放卡片cart；

准备一个设定了样式class＝outercontainer、overflow＝hidden、height＝carheight的div用于盛放parentcarts；

创建全局索引指针pointindex，初始化值pointindex＝0；

初始化标志flag＝true，用于交替parentcarts的过渡样式，并设定parentcarts的transform＝translate3d(0,-10rem,0)；

初始化标志initflag＝true，用于判断是否为第一次初始化卡片；

设定css过渡动画样式.cart_rolling_01和.cart_rolling_10，用于将parentcarts向上过渡移动10rem；

2)创建cartcarousel()函数

3)定期循环2)中定义的函数。

其中，所述单点数值变化的实现方法如下：

根据当日产品流通量的平均峰值的位数确定对应数量的槽位，并在每个槽位中纵向设置分别标识“0”、“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”的十张大小相同的卡片，且在最初状态时每个槽位的标识“0”的卡片处于可见位置；

随着当日产品流通量的变化，每个槽位将相应数字标识的卡片分别移动到可见位置，且其它卡片都处于不可见的状态。

具体地，纵向轮播的实现过程包括：

1)准备工作：

如图3所示，假设定期从服务器上获取的数据分别为123、1352、4028，数值位数为4；

根据数值位数来决定创建class＝parentcart的div个数parentcartnum＝4，且每个div中包含10张卡片cart，如图3所示，卡片的定义方式为：

<divclass＝”cart”>0</div>

<divclass＝”cart”>1</div>

<divclass＝”cart”>2</div>

<divclass＝”cart”>3</div>

<divclass＝”cart”>4</div>

<divclass＝”cart”>5</div>

<divclass＝”cart”>6</div>

<divclass＝”cart”>7</div>

<divclass＝”cart”>8</div>

<divclass＝”cart”>9</div>

且固定卡片高度carheight为某一具体相对值，将所有的parentcart并排放入设定了样式class＝outercontainer、overflow＝hidden、height＝carheight的div中；

定义一系列的css过渡动画样式num_rollingxy，其中x、y代表集合n＝{0，1，2，3，4，5，6，7，8，9}中的一个元素，例如当x＝0、y＝9时，过渡样式.num_rolling_09；

2)创建函数fillzero(number,digits)，作用就是将number的位数补齐到digits位数，不足的话，前面补0，如果number不存在，那么补digits个0，例如当number＝123、digits＝4时，函数的返回结果为0123；

3)创建函数str2arr(numstr)，作用就是将numstr转化为数组，例如numstr＝0123，函数的返回值为[0,1,2,3]；

4)创建函数init_datastatistics(curnum,lastnum,digists)

5)通过ajax定期从后台数据库中获取当前值curnum，初次默认lastnum为空值，然后调用init_datastatistics函数，并将lastnum设置为curnum；

6)循环执行过程5)。

在显示所述在制品状态分布图形时，应用层提供双浏览模式。用户可以通过大屏模式或浏览器模式查看所述在制品状态分布图形，即报表页面为双浏览模式。当用户选择全屏模式时，对各状态的扇环进行轮播，环形中间显示各状态的在制品数量；当用户选择浏览器模式时，同时显示各状态的扇环，环形中间显示在制品的总数量。

其中，报表页面采用浏览器模式显示时，页面左侧为菜单栏区，页面右侧为生产指标内容区，并采用浏览器渲染样式；报表页面采用全屏模式显示时，页面只包括生产指标内容区，其中包含头部标题，并采用全屏渲染样式。

具体地，如图5所示，上述双浏览模式的实现过程如下：

1)准备工作：

定义两种不同浏览模式风格的css样式，以是否由fullscreen开头来区分当前所处的模式风格；

基于html5支持的canvas底层画图技术，绘制出全屏(大屏)模式下的头部内容，包括系统名称、当前日期以及换肤按钮等，在浏览器(非大屏)模式下设置为不可见display＝none；

2)创建fullscreenchange事件监听函数screeneventlistener()：

3)创建函数launchintofullscreen(element)：

4)创建函数exitfullscreen()：

5)在网页界面中创建触发全屏的按钮单击事件或者监听键盘上enter键敲击事件，当用户触发了这些事件后，事件将被捕捉并调用launchintofullscreen函数，以达到对网页中的核心内容全屏展现，即进入大屏模式，整个显示器可视区只显示生产指标内容区(包含头部标题，由系统名称以及时间组成)，如图4b所示。当用户想进入非大屏模式时，默认情况下用户可以通过触发esc键退出全屏，同样也可以监听空格键space敲击事件，来触发exitfullscreen()函数，完成退出全屏，进入非大屏模式(浏览器)模式，如图4a所示。

本发明的生产监控报表系统具备以下优势：

第一，本发明的报表系统使得用户无需安装客户端应用软件，显著地降低了报表维护和升级的成本，提高了用户的体验舒适感。

第二，本发明的报表系统布局合理，分别采用横向和纵向卡片轮播的手段完成指标内容的展现，并且突出显示对单个生产指标数据变化的动作过程，从而使得布局更加活跃。

第三，本发明的报表系统采用了双浏览模式看板，既能满足普通用户在浏览器模式下，通过折叠左侧菜单栏，扩大主界面观察视野，同时也可以模拟全屏看板，用于监控中心指导生产调控，确保达成工厂准时交货率(otdo)，给企业带来经济效益。

以上通过具体实施例对本发明进行了详细的说明，上述实施例仅仅是本发明的较佳实施例，本发明并不局限于上述实施方式。在不脱离本发明原理的情况下，本领域的技术人员做出的等效置换和改进，均应视为在本发明所保护的技术范畴内。