CN116245319A - 一种网页端可视化批次调度排产的方法及组件 - Google Patents

Abstract

本发明提供了一种网页端可视化批次调度排产的方法及组件，所述方法包括如下步骤：根据选定时间范围，基于预设映射规则生成甘特图时间轴；对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级；对原始工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，进行工单甘特图元的配置；基于所述甘特图时间轴、甘特图元分布层级和工单甘特图元，绘制并渲染排产甘特图。本发明的网页端可视化批次调度排产的方法及组件，可有效提高化工行业批次调度排产的效率。

Description

一种网页端可视化批次调度排产的方法及组件

技术领域

本发明涉及精细化工生产调度排产领域，具体涉及一种网页端可视化批次调度排产的方法及组件。

背景技术

大多数化工企业在生产计划和生产执行层面已经实现信息化。但是在计划和执行的过程中却存在一定程度的脱节，导致计划需求与生产能力不匹配，生产执行无法及时响应市场需求。为提高市场竞争力，给用户创造更大的价值，解决供应链下游精细化工行业多工序、多产线的批次生产排产优化和调度优化问题就尤为重要。目前化工行业对于调度排产结果的工作、任务、资源占用情况的展示与交互大多是通过表格的形式，不够直观，使生产调度效益效率受到了一定程度的限制。

针对上述问题，一些第三方可视化甘特图开发工具不断涌现。但是仍存在行业通用性不高，配置繁琐，交互功能不完备等问题。目前部分网页端甘特图开发组件的封装过于集中，无法实现自定义配置等需求，可配置项少；部分组件在页面渲染中的表现不够稳定，当数据量过大时会出现明显卡顿；进一步地，业内可视化调度排产组件交互功能较少，无法全面展示工单的所属产线与生产单元等信息，且通用性较弱，排产效率提升不明显。

比如公开号为CN 114003831A的中国专利《一种利用网页图形化展示项目进度的方法及系统》，公开了一种利用网页图形化展示项目进度的方法及系统，构建基于标准甘特图的任务模型以及依赖模型，完成基于标准甘特图的视图层与数据模型层的控制器设计，并进行基于标准甘特图可视化数据分析的设计与分析，最终引入甘特图插件，其作为第三方包在项目中安装后，与业务功能模块集成开发与部署。但该专利的侧重点在于数据模型的规范与设计，而展示层主要依赖第三方甘特图插件。

又如公开号为CN 112818459A的中国专利《基于BIM和甘特图的工程建设期可视化进度管理方法》，公开了一种基于BIM和甘特图的工程建设期可视化进度管理方法，内容涉及基于BIM和甘特图的数据结构、布局、分析功能的设计与平台的集成发布。该发明优点体现在提供甘特图WEB端的高性能解决方案，无需安装插件；实现进度甘特图数据与BIM模型数据的双向联动，交互性强，可视化程度高。但该发明基于BIM模型，即建筑信息模型，在该模型的设计上进行拆分进度，并采用甘特图方式展示，用于建筑施工领域，适用领域较窄，无法适用于化工等领域。

又如公开号为CN 111652463A的中国专利《基于分形自相似原理的APS递归系统、方法及设备》，公开了一种基于分形自相似原理的APS递归系统、方法及设备，所述系统包括：数据层、构建层、与展示层。其中展示层用于提供人机交互界面，完成加工数据的输入，根据所述方案树完成APS甘特图绘制和展示。但该专利的展示层较为简单，描述的内容仅包含时间、位置、工段，且同样不适用于化工等领域。

发明内容

针对化工行业对于批次调度排产系统展示层的功能交互设计形式不够直观、不易交互的问题，结合现有第三方可视化甘特图开发工具存在的行业通用性不高、配置繁琐、交互功能不完备等问题，以及业内可视化调度排产组件对于展示层的设计交互功能较少，无法全面展示工单的所属产线与生产单元等信息的问题，本发明提供了一种网页端可视化批次调度排产的方法及组件，在解决以上问题的同时，可有效提高化工行业批次调度排产的效率。

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

一种网页端可视化批次调度排产的方法，包括如下步骤：

根据选定时间范围，基于预设映射规则生成甘特图时间轴；

对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级；

对原始工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，进行工单甘特图元的配置；

基于所述甘特图时间轴、甘特图元分布层级和工单甘特图元，绘制并渲染排产甘特图。

进一步的，所述预设映射规则包括基于不同时间模式确定时间轴单位长度所映射的时间范围及实际像素值。

进一步的，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级具体包括：

解析原始数据，提取工单数据并去重；

以产线作为纵轴的最小单位，根据不同产线区分各工单甘特图元在纵轴上的分布层级。

进一步的，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级还包括：

将工单数据的产线和生产单元字段依次排列到各层级左侧，以表格的形式展示各层级工单数据的详细信息。

进一步的，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级还包括：

对各工单甘特图元进行图元属性交互事件绑定，生成拖拽规则，所述拖拽规则用于限制各工单内部甘特图元的移动范围，并禁止其跨产线的拖拽行为。

进一步的，对原始工单数据进行排产时间分析具体包括：

解析原始工单数据，提取工单数据并去重；

基于工单数据获取排产开始时间和排产结束时间；

根据时间模式进行相应的坐标转换，计算甘特图元x坐标与宽度width：

x＝TABLE_WIDTH+timeGap1×timeModeRate

Width＝timeGap2×timeModeRate

其中TABLE_WIDTH表示纵轴表格的宽度，timeGap1表示工单排产开始时间与时间轴起始时间的差，单位是分；timeGap2表示工单排产结束时间与排产开始时间的差，单位是分，timeModeRate表示不同时间模式的转换比率。

进一步的，所述自定义配置解析具体包括：

解析原始工单数据，提取工单数据并去重；

抽取工单图元的自定义配置信息，并将抽取的信息整合于各图元配置中；

其中，所述自定义配置信息包括图元的默认背景色，边框的颜色和宽度，以及展示字体的类型、尺寸和颜色。

进一步的，所述交互事件绑定具体包括：

响应于鼠标移入移出事件，触发消息弹框展示工单信息，所述工单信息至少包括产线、车间、工单号、排产量和排产时间；

以及响应于图元的拖拽事件，动态计算并展示排产时间。

进一步的，响应于图元的拖拽事件，动态计算并展示排产时间具体包括：

实时读取被拖拽图元的坐标x，结合时间模式timeMode，进行移动距离到时间字符串的转换，实现消息弹框内排产时间的开始时间与结束时间的动态计算与展示：

newStartTime＝positionXtoTime(x,timeMode)

newEndTime＝newStartTime+pxToTime(width,timeMode)。

本发明还提供了一种网页端可视化批次调度排产组件，基于浏览器网页实现，用于实现如上所述的方法，包括：

数据获取模块，用于获取并解析原始工单数据，提取工单数据并去重；

时间轴生成模块，用于根据选定时间范围，基于预设映射规则生成甘特图时间轴；

层级分析模块，用于对工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级；

图元生成模块，用于对工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，配置甘特图元；

UI交互界面，用于基于时间轴生成模块、层级分析模块和图元生成模块输出的数据绘制并渲染排产甘特图，并响应于鼠标移入移出或图元拖拽事件，展示消息弹框。

本发明的有益技术效果如下：

1)适用于批次与精细化工领域；

2)能够实现解析原始工单数据、绘制时间轴与纵轴层级的过程自动化，同时提供图元自定义配置项，保证其具有一定的通用性；

3)能够提高丰富的展示层交互设计，使工单数据信息的展示更全面。

附图说明

图1为本发明所述方法实施例的流程示意图。

图2为本发明所述方法实施例中层级分析示意图。

图3为本发明所述方法实施例中消息弹框示意图。

图4为本发明所述组件实施例的UI界面展示示意图。

具体实施方式

为了进一步理解本发明，下面结合实施例对本发明优选实施方案进行描述，但是应当理解，这些描述只是为进一步说明本发明的特征和优点，而不是对本发明权利要求的限制。

实施例1

本实施例提供了一种网页端可视化批次调度排产的方法，参见附图1，其包括如下步骤：

首先，根据选定时间范围，基于预设映射规则生成甘特图时间轴。所述的预设映射规则包括基于不同时间模式确定时间轴单位长度所映射的时间范围及实际像素值。

在一个示出实例中，可根据用户所选时间范围，生成可视化排产组件的时间轴。针对不同时间范围，本实例中共设计hour、day和default三种时间模式。其中day模式下，考虑到展示效果与交互体验，对于不同天数还可设置多种不同展示模式。

时间模式决定了横轴单位长度所映射的时间范围及实际像素值(单位px)，本示出实例中，映射规则如下：

然后，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级。

在一个示出实例中，该步骤具体包括：

解析原始数据，提取工单数据并去重；

为体现出各条产线的工作先后顺序，以产线作为纵轴的最小单位，根据不同产线区分各工单甘特图元在纵轴上的分布层级，并获取可视化排产组件的行配置项。

以及，对各工单甘特图元进行图元属性交互事件绑定，生成拖拽规则，以限制各工单内部甘特图元的移动范围，并禁止其跨产线的拖拽行为。

本示出实例中，为了更全面地展示各层级的详细信息，参见附图2，将工单数据的产线、生产单元等字段依次排列到各层级左侧，以表格的形式展示各层级工单数据的详细信息。

接下来，对原始工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，进行工单甘特图元的绘制。

工单图元的绘制主要依赖工单数据的排产开始时间ScheduleStartDate与排产结束时间ScheduleEndDate。

在一个示出实例中，对原始工单数据进行排产时间分析具体包括：

解析原始工单数据，提取工单数据并去重；

基于工单数据获取排产开始时间和排产结束时间；

根据时间模式进行相应的坐标转换，计算甘特图元x坐标与宽度width：

x＝TABLE_WIDTH+timeGap1×timeModeRate

Width＝timeGap2×timeModeRate

其中TABLE_WIDTH表示纵轴表格的宽度，timeGap1表示工单排产开始时间与时间轴起始时间的差，单位是分；timeGap2表示工单排产结束时间与排产开始时间的差，单位是分，timeModeRate表示不同时间模式的转换比率(day模式下1min＝1/24px)。

本实施例中，可采用timeGap、timeToPositionX及时区转换等计算方法，实现图元与原始数据的自动化转换。

在一个示出实例中，自定义配置解析具体包括：

解析原始工单数据，提取工单数据并去重；

抽取工单图元的自定义配置信息，并将抽取的信息整合于各图元配置中。

本示出实例中，自定义配置信息包括图元的默认背景色，边框的颜色和宽度，以及展示字体的类型、尺寸和颜色等信息。其中，图元的默认背景色根据投入物料的类型进行配置。

在一个示出实例中，交互事件绑定具体包括：

响应于鼠标移入移出事件，触发消息弹框展示工单信息，包括产线、车间、工单号、排产量和排产时间等信息；

以及响应于图元的拖拽事件，动态计算并展示排产时间。

本示出实例中，响应于图元的拖拽事件，动态计算并展示排产时间采用如下方法：

实时读取被拖拽图元的坐标x，结合时间模式timeMode，进行移动距离到时间字符串的转换，实现消息弹框内排产时间的开始时间与结束时间的动态计算与展示：

newStartTime＝positionXtoTime(x,timeMode)

newEndTime＝newStartTime+pxToTime(width,timeMode)。

具体展示效果参见附图3。

最后，基于所述甘特图时间轴、甘特图元分布层级和工单甘特图元，即可绘制并渲染排产甘特图。

实施例2

本实施例提供了一种网页端可视化批次调度排产组件，基于浏览器网页实现，用于实现上述实施例1所述的方法，包括：

数据获取模块，用于获取并解析原始工单数据，提取工单数据并去重；

时间轴生成模块，用于根据选定时间范围，基于预设映射规则生成甘特图时间轴；

层级分析模块，用于对工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级；

图元生成模块，用于对工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，配置甘特图元；

UI交互界面，用于基于时间轴生成模块、层级分析模块和图元生成模块输出的数据绘制并渲染排产甘特图，并响应于鼠标移入移出或图元拖拽事件，展示消息弹框。

本示出实例中，上述组件基于AntV-X6高性能图编辑引擎实现。参见附图4，对某精细化工企业的批次调度排产软件，其资源甘特图展示层应用到本发明的可视化排产组件，支持根据原始数据的产线及时间范围自动生成资源甘特图，支持工单排产结果的展示以及工单动态调整等功能。解析原始数据绘制坐标轴的过程自动化，使得兼容的原始数据结构更丰富，保证组件的易用性与通用性；同时，相对于第三方工具库，本发明的组件对精细化工领域的适用程度要优于其他工具类库，同时AntV-X6丰富的自定义配置项也使得其扩展性得到大幅提升。

以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。

Claims (10)

1.一种网页端可视化批次调度排产的方法，其特征在于，包括如下步骤：

根据选定时间范围，基于预设映射规则生成甘特图时间轴；

对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级；

对原始工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，进行工单甘特图元的配置；

基于所述甘特图时间轴、甘特图元分布层级和工单甘特图元，绘制并渲染排产甘特图。

2.如权利要求1所述的网页端可视化批次调度排产的方法，其特征在于，所述预设映射规则包括基于不同时间模式确定时间轴单位长度所映射的时间范围及实际像素值。

3.如权利要求1所述的网页端可视化批次调度排产的方法，其特征在于，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级具体包括：

解析原始数据，提取工单数据并去重；

以产线作为纵轴的最小单位，根据不同产线区分各工单甘特图元在纵轴上的分布层级。

4.如权利要求3所述的网页端可视化批次调度排产的方法，其特征在于，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级还包括：

将工单数据的产线和生产单元字段依次排列到各层级左侧，以表格的形式展示各层级工单数据的详细信息。

5.如权利要求3所述的网页端可视化批次调度排产的方法，其特征在于，对原始工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级还包括：

对各工单甘特图元进行图元属性交互事件绑定，生成拖拽规则，所述拖拽规则用于限制各工单内部甘特图元的移动范围，并禁止其跨产线的拖拽行为。

6.如权利要求2-5任一项所述的网页端可视化批次调度排产的方法，其特征在于，对原始工单数据进行排产时间分析具体包括：

解析原始工单数据，提取工单数据并去重；

基于工单数据获取排产开始时间和排产结束时间；

根据时间模式进行相应的坐标转换，计算甘特图元x坐标与宽度width：

x＝TABLE_WIDTH+timeGap1×timeModeRate

Width＝timeGap2×timeModeRate

其中TABLE_WIDTH表示纵轴表格的宽度，timeGap1表示工单排产开始时间与时间轴起始时间的差，单位是分；timeGap2表示工单排产结束时间与排产开始时间的差，单位是分，timeModeRate表示不同时间模式的转换比率。

7.如权利要求6所述的网页端可视化批次调度排产的方法，其特征在于，所述自定义配置解析具体包括：

解析原始工单数据，提取工单数据并去重；

抽取工单图元的自定义配置信息，并将抽取的信息整合于各图元配置中；

其中，所述自定义配置信息包括图元的默认背景色，边框的颜色和宽度，以及展示字体的类型、尺寸和颜色。

8.如权利要求6所述的网页端可视化批次调度排产的方法，其特征在于，所述交互事件绑定具体包括：

响应于鼠标移入移出事件，触发消息弹框展示工单信息，所述工单信息至少包括产线、车间、工单号、排产量和排产时间；

以及响应于图元的拖拽事件，动态计算并展示排产时间。

9.如权利要求8所述的网页端可视化批次调度排产的方法，其特征在于，响应于图元的拖拽事件，动态计算并展示排产时间具体包括：

实时读取被拖拽图元的坐标x，结合时间模式timeMode，进行移动距离到时间字符串的转换，实现消息弹框内排产时间的开始时间与结束时间的动态计算与展示：

newStartTime＝positionXtoTime(x,timeMode)

newEndTime＝newStarTime+pxToTime(width,timeMode)。

10.一种网页端可视化批次调度排产组件，基于浏览器网页实现，用于实现如权利要求1-9任一项所述的方法，其特征在于，包括：

数据获取模块，用于获取并解析原始工单数据，提取工单数据并去重；

时间轴生成模块，用于根据选定时间范围，基于预设映射规则生成甘特图时间轴；

层级分析模块，用于对工单数据进行依赖层级分析，生成甘特图元在纵轴方向的分布层级；

图元生成模块，用于对工单数据进行排产时间分析，以及自定义配置解析和交互事件绑定，配置甘特图元；

UI交互界面，用于基于时间轴生成模块、层级分析模块和图元生成模块输出的数据绘制并渲染排产甘特图，并响应于鼠标移入移出或图元拖拽事件，展示消息弹框。

Images