CN114003831B - 一种利用网页图形化展示项目进度的方法及系统 - Google Patents

Abstract

一种利用网页图形化展示项目进度的方法及系统，包括以下步骤：步骤1，构建基于标准甘特图的任务模型以及依赖模型；步骤2，构建基于标准甘特图的分组模型；步骤3，完成基于H5的甘特图插件设计；步骤4，完成基于标准甘特图的视图层与数据模型层的控制器设计；步骤5，完成基于标准甘特图可视化数据分析的设计，包括关键路径分析、偏差分析、层级依赖分析、时间纬度分析；步骤6，引入甘特图插件，作为第三方包在项目中安装后，与业务功能模块集成开发与部署；其系统包括有模型层、控制器、视图层；具有可配置性高、兼容性强、操作性好、方法易实现的特点。

Description

一种利用网页图形化展示项目进度的方法及系统

技术领域

本发明属于项目现场进度管理技术领域，具体涉及一种利用网页图形化展示项目进度的方法及系统。

背景技术

互联网飞速发展的当下，众多用户期望可以在浏览器中通过网页浏览查看项目的进度、规划信息。传统的项目信息展示主要有两种：

1)展示项目内任务分解的层级结构，非图形化的展示，无法直观的看到项目进展的全貌以及任务的颗粒度规划细分。

2)为浏览器安装插件，利用插件绘图，以图形化的方式展示任务层级、跨度、完成情况等信息，但这种方法依赖浏览器插件，不但出错率以及安装费时，且不够通用，仅可以再windows下的浏览下安装，苹果MAC操作系统等浏览器访问就会受限。

发明内容

为克服上述现有技术的不足，本发明的目的在于提供一种利用网页图形化展示项目进度的设计方法及系统，可使用户在任何浏览器下可以像访问普通的网页一样，图形化的展示项目的进度信息，具有可配置性高、兼容性强、操作性好的特点。

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

一种利用网页图形化展示项目进度的设计方法，包括以下步骤：

步骤1，构建基于标准甘特图的任务模型以及依赖模型，设计生成任务数据的基本数据结构，包括：WBS编号、计划开始结束时间、实际开始结束实际、父任务信息、清单信息、负责人信息，使得任务之间可通过WBS编号绑定前后续关联关系，通过父任务ID构建父子任务关系；

步骤2，构建基于标准甘特图的分组模型，依据步骤1所述任务模型的不同字段属性，将任务数据进行分组，并根据分组下任务数据的最早开始时间、最晚结束时间，计算出分组的时间范围，最后以分组的形式在甘特图上展示任务数据；

步骤3，完成基于H5的甘特图插件设计，甘特图插件采用原生JS、H5的技术来设计控制器、以及视图层，甘特图插件首先接收配置参数，构建甘特图实例，包含表格视图、条形图控制器，生成图形化操作界面；然后通过构建的控制器接收并处理步骤1、步骤2构建的数据模型，使任务数据能够在视图层展示，并依据任务数据的类型和状态，展示不同的操作按钮，并通过事件处理器同步不同操作引起的数据变化；

步骤4，完成基于标准甘特图的视图层与数据模型层的控制器设计，

先任务导入甘特图插件后，再依据数据模型的定义，生成对应的甘特图界面，表格组件与条形图组件之间通过数据唯一标识符id进行关联，修改其中一个组件中的数据，即可通过控制器通知另一个组件同步更新显示；

步骤5，完成基于标准甘特图可视化数据分析的设计，包括关键路径分析、偏差分析、层级依赖分析、时间纬度分析；

所述的关键路径分析：根据任务计划在时间轴上生成条形图，设置关键任务节点的里程碑，链接两个或多个任务绑定关联关系，生成存在任务依赖关系的路径，分析任务的进度，设置依赖任务的提前滞后时间，帮助有效直观的管理任务进度；

所述的偏差分析：基于任务的计划完成时间与实际完成时间，以不同颜色的条形图区分，通过可视化的方式区分时间偏差，以特定色彩定义需预警任务，辅助完成任务的进度管理与控制。

所述的数据层级分析：基于任务分组模型、依赖模型，可以直观的展现任务的分类以及任务的所属结构，辅助任务的分类管理与分配。

所述的时间纬度分析：基于甘特图时间模型，可以依据不同任务的时间跨度，分析任务的难易或复杂程度；也通过按日、按周、按月、按季、按年等不同纬度的时间单位，更简洁有效的展现任务在时间轴上的分布；

步骤6，引入甘特图插件，其作为第三方包在项目中安装后，与业务功能模块集成开发与部署。

所述的视图层包含树状表格组件以及条形图组件，在浏览器中，通过树状表格组件，清晰地展示任务数据的层级结构；通过条形图组件，直观地展示任务数据的进度情况、依赖关系，可满足不同类型项目的进度管理与分析。

一种利用网页图形化展示项目进度的系统，包括有模型层、控制器、视图层；模型层由任务模型、依赖模型及分组模型组成；控制器由数据处理模块与事件订阅模块组成；视图层包括树状表格组件和条形图组件。

所述的模型层用于数据的载体，规范和约束数据结构；任务模型用于任务数据的载体，规范和约束任务数据的结构；依赖模型用于任务关系的载体，规范和约束任务关系的结构；分组模型用于分组的载体，规范和约束分组的结构。

所述的控制器用于数据的更新，组件间数据同步，视图层的操作回调；数据处理模块用于数据的更新，处理配置项、数据源的变化，处理视图操作引起的数据变化；事件订阅模块用于组件间数据同步，视图层的操作回调。

所述的视图层用于甘特图的UI展示；树状表格组件用于展示任务数据的层级结构，提供组件操作、数据编辑的功能；条形图组件用于展示任务数据的进度情况、依赖关系，提供视图时间纬度切换、进度调整、依赖关系编辑的功能。

本发明的有益效果是：

本发明的装置由于采用了原生JS的技术，所以具有兼容性强的优点；由于采用了图形可视化的技术，所以具有操作性好的优点；本发明的方法由于采用了数据模型构建、控制器与可视化分离实现的步骤，所以具有可配置性高的优点；本发明的一种利用网页图形化展示项目进度的方法，可以方便展示项目内任务的层级结构，并根据任务的规划情况在绘图区展示出图形化的界面，全程仅需要浏览器访问即可，无需安装图形插件。用户也可以通过可视化的操作方便快捷的调整任务的规划时间。

接收项目任务分解信息：基于项目的任务分解，展示出项目内所分解任务的WBS序号以及任务名称、负责人等信息。以表格的形式展示，并配置表头所显示的列。

图形化展示任务信息：基于已经展示出的任务数据，在绘图区以图形的形式绘制出任务数据；绘图区可以按照年、月、季、周、日的颗粒度区分间隔。每个任务的计划开始时间和计划截止时间为时间跨度。根据当前绘图区所选的颗粒度大小，用横道图的形式画出具体的任务跨度并展示；任务的名称信息在任务区块的旁边显示；绿色的区块表示任务进行中，紫色区块表示任务尚处于待指派无负责人的状态，灰色区块表示任务已经完成。

任务关系展示：在任务表格任务的层级关系采用展开的方式展示，任务的协作关系不予以展示；在任务的绘图区，任务的前序任务、后序任务则通过箭头连线的方式展示，即B有前序任务A，后序任务B，则在图形中展示箭头连线，A的尾部指向B的头部，B的尾部指向C的头部。形成任务的关系图网。

任务的可视化操作：基于任务的时间跨度，在任务绘图区描绘出任务的具体跨度区域、任务之间的连线，让用户可以更方面的看到任务执行、分解的状态。任务的区块在鼠标经过时展示出可拖拉拽的图标提示，用户可通过鼠标的拖拉拽形式改变任务区块头部或尾部的位置，则可以改变任务的计划和计划截止时间。若当前任务还没有分配计划开始和计划截止时间，则在绘图区不描绘任务的跨度区块。但通过点击该任务行的某一点时，可快速创建出任务的计划开始和计划截止时间。

自动编排：基于任务与任务的前后序关联，打开自动编排开关后，所有的后续任务的计划开始时间将在其前序任务的时间之后。图形区将根据新的计划开始时间进行任务区块跨度的重新描绘。已达到自动编排的目的。

附图说明

图1是本发明的系统原理框架图。

图2是本发明的流程图。

图3是本发明的算法逻辑图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施方式。虽然附图中显示了本公开的示例性实施方式，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

如图1所示，一种利用网页图形化展示项目进度的设计方法，包括以下步骤：

步骤1，构建基于标准甘特图的任务模型以及依赖模型，设计生成任务数据的基本数据结构，包括：WBS编号、计划开始结束时间、实际开始结束实际、父任务信息、清单信息、负责人信息，使得任务之间可通过WBS编号绑定前后续关联关系，通过父任务ID构建父子任务关系；具体如表1所示：

步骤2，构建基于标准甘特图的分组模型，依据步骤1所述任务模型的不同字段属性，将任务数据进行分组，并根据分组下任务数据的最早开始时间、最晚结束时间，计算出分组的时间范围，最后以分组的形式在甘特图上展示任务数据；具体如表2所示：

字段名称	编码	数据类型	说明
				标识符	id	string	分组唯一标识符
名称	name	string	分组名称
				开始日期	rangeBeginTime	string	分组开始日期
结束日期	rangeEndTime	string	分组任务结束日期
				前缀	abbrev	string	分组前缀
统计值	total	number	分组任务数量
				分组任务	children	object[]	分组任务，以对象数组的方式传递

步骤3，完成基于H5的甘特图插件设计：甘特图插件采用原生JS、H5的技术来设计控制器、以及视图层，如图3所示，插件首先接收配置参数，构建甘特图实例，包含表格视图、条形图控制器，生成图形化操作界面；然后通过构建的控制器接收并处理步骤1、步骤2构建的数据模型，使任务数据能够在视图层展示，并依据任务数据的类型和状态，展示不同的操作按钮，并通过事件处理器同步不同操作引起的数据变化；

视图层包含树状表格组件以及条形图组件，在浏览器中，可以通过树状表格组件，清晰地展示任务数据的层级结构；通过条形图组件，直观地展示任务数据的进度情况、依赖关系，可以满足不同类型项目的进度管理与分析；

步骤4，完成基于标准甘特图的视图层与数据模型层的控制器设计：如图2所示，任务数据导入甘特图插件后，依据数据模型的定义，生成对应的甘特图界面，表格组件与条形图组件之间通过数据唯一标识符id进行关联，修改其中一个组件中的数据，即可通过控制器通知另一个组件同步更新显示；

步骤5，完成基于标准甘特图可视化数据分析的设计，包括关键路径分析、偏差分析、层级依赖分析、时间纬度分析；

所述关键路径分析：根据任务计划在时间轴上生成条形图，设置关键任务节点的里程碑，链接两个或多个任务绑定关联关系，生成存在任务依赖关系的路径，分析任务的进度，设置依赖任务的提前滞后时间，帮助有效直观的管理任务进度；

所述偏差分析：基于任务的计划完成时间与实际完成时间，以不同颜色的条形图区分，通过可视化的方式区分时间偏差，以特定色彩定义需预警任务，辅助完成任务的进度管理与控制；

所述数据层级分析：基于任务分组模型、依赖模型，可以直观的展现任务的分类以及任务的所属结构，辅助任务的分类管理与分配；

所述时间纬度分析：基于甘特图时间模型，可以依据不同任务的时间跨度，分析任务的难易或复杂程度；也通过按日、按周、按月、按季、按年等不同纬度的时间单位，更简洁有效的展现任务在时间轴上的分布；

步骤6，引入甘特图插件，其作为第三方包在项目中安装后，与业务功能模块集成开发与部署。

Claims (2)

1.一种利用网页图形化展示项目进度的设计方法，其特征在于，包括以下步骤：

步骤1，构建基于标准甘特图的任务模型以及依赖模型，设计生成任务数据的基本数据结构，包括：WBS编号、计划开始结束时间、实际开始结束实际、父任务信息、清单信息、负责人信息，使得任务之间可通过WBS编号绑定前后续关联关系，通过父任务ID构建父子任务关系；

步骤2，构建基于标准甘特图的分组模型，依据步骤1所述任务模型的不同字段属性，将任务数据进行分组，并根据分组下任务数据的最早开始时间、最晚结束时间，计算出分组的时间范围，最后以分组的形式在甘特图上展示任务数据；

步骤3，完成基于H5的甘特图插件设计，甘特图插件采用原生JS、H5的技术来设计控制器、以及视图层，甘特图插件首先接收配置参数，构建甘特图实例，包含表格视图、条形图控制器，生成图形化操作界面；然后通过构建的控制器接收并处理步骤1、步骤2构建的数据模型，使任务数据能够在视图层展示，并依据任务数据的类型和状态，展示不同的操作按钮，并通过事件处理器同步不同操作引起的数据变化；

步骤4，完成基于标准甘特图的视图层与数据模型层的控制器设计，

先将任务数据导入甘特图插件后，再依据数据模型的定义，生成对应的甘特图界面，表格组件与条形图组件之间通过数据唯一标识符id进行关联，修改其中一个组件中的数据，即可通过控制器通知另一个组件同步更新显示；

步骤5，完成基于标准甘特图可视化数据分析的设计，包括关键路径分析、偏差分析、层级依赖分析、时间纬度分析；

所述的关键路径分析：根据任务计划在时间轴上生成条形图，设置关键任务节点的里程碑，链接两个或多个任务绑定关联关系，生成存在任务依赖关系的路径，分析任务的进度，设置依赖任务的提前滞后时间，帮助有效直观的管理任务进度；

所述的偏差分析：基于任务的计划完成时间与实际完成时间，以不同颜色的条形图区分，通过可视化的方式区分时间偏差，以特定色彩定义需预警任务，辅助完成任务的进度管理与控制；

所述的数据层级分析：基于任务分组模型、依赖模型，可以直观的展现任务的分类以及任务的所属结构，辅助任务的分类管理与分配；

所述的时间纬度分析：基于甘特图时间模型，可以依据不同任务的时间跨度，分析任务的难易或复杂程度；也通过按日、按周、按月、按季、按年的时间单位，更简洁有效的展现任务在时间轴上的分布；

步骤6，引入甘特图插件，其作为第三方包在项目中安装后，与业务功能模块集成开发与部署；

所述的视图层包含树状表格组件以及条形图组件，在浏览器中，通过树状表格组件，清晰地展示任务数据的层级结构；通过条形图组件，直观地展示任务数据的进度情况、依赖关系，可满足不同类型项目的进度管理与分析。

2.一种利用网页图形化展示项目进度的系统，其特征在于，包括有模型层、控制器、视图层；模型层由任务模型、依赖模型及分组模型组成；控制器由数据处理模块与事件订阅模块组成；视图层包括树状表格组件和条形图组件；

所述的模型层用于数据的载体，规范和约束数据结构；任务模型用于任务数据的载体，规范和约束任务数据的结构；依赖模型用于任务关系的载体，规范和约束任务关系的结构；分组模型用于分组的载体，规范和约束分组的结构；

所述的控制器用于数据的更新，组件间数据同步，视图层的操作回调；数据处理模块用于数据的更新，处理配置项、数据源的变化，处理视图操作引起的数据变化；事件订阅模块用于组件间数据同步，视图层的操作回调；

所述的视图层用于甘特图的UI展示；树状表格组件用于展示任务数据的层级结构，提供组件操作、数据编辑的功能；条形图组件用于展示任务数据的进度情况、依赖关系，提供视图时间纬度切换、进度调整、依赖关系编辑的功能。