甘特图处理方法、装置、计算机设备及存储介质制造方法及图纸

本申请属于数据处理技术领域，涉及一种甘特图处理方法、装置、计算机设备及存储介质。该甘特图处理方法通过预定义的React组件对甘特图的单元格添加监听事件，在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到当前文本输入的光标位置失去焦点后，将输入文本传输至单元格内，并删除单元格内的原始文本；若输入文本为动态信息，基于Reactive

【技术实现步骤摘要】
甘特图处理方法、装置、计算机设备及存储介质


[0001]本申请涉及数据处理
，尤其涉及一种甘特图处理方法、装置、计算机设备及存储介质。

技术介绍

[0002]甘特图是一种常见的项目管理工具，一般用于显示项目进度和资源排期。但是传统的甘特图单元格渲染能力有限，通常只能通过传入HTML字符串来呈现一些简单的文字图案，此时，若需要在甘特图单元格中呈现复杂的需求，比如：动画、点击出现悬浮窗口、动态表单输入等，就难以实现交互效果，从而导致甘特图单元格的功能受到了很大的限制。

技术实现思路

[0003]本申请实施例的目的在于提出一种甘特图处理方法、装置、计算机设备及存储介质，以解决甘特图单元格难以实现交互效果的问题。
[0004]为了解决上述技术问题，本申请实施例提供一种甘特图处理方法，采用了如下所述的技术方案：通过预定义的React组件对甘特图的单元格添加监听事件；当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息；若所述输入文本为动态信息，基于Reactive
‑
elements转换库，将所述预定义的React组件转换为Web Component组件；以及将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
[0005]进一步的，所述基于Reactive
‑
elements转换库，将所述预定义的React组件转换为Web Component组件的步骤，包括：调用所述Reactive
‑
elements转换库中的reactiveElements方法，将所述预定义的React组件定义Element类；通过预置React.render的渲染函数对所述Element类进行渲染，以将所述Element类渲染在所述甘特图的单元格内，并且，在所述Element类的渲染过程中，通过浏览器提供的MutationObserver接口监听所述Element类是否发生变化；若所述Element类未发生变化，则通过调用浏览器提供的customElements.define方法，将所述Element类转化为所述Web Component组件；以及若所述Element类发生变化，则返回执行所述通过预置React.render的渲染函数对所述Element类进行渲染，以将所述Element类渲染在所述甘特图的单元格内的步骤。
[0006]进一步的，所述将所述预定义的React组件定义Element类的步骤之后，还包括：
将所述Element类继承HTML Element类，以匹配后续浏览器的MutationObserver接口和浏览器的customElements.define方法。
[0007]进一步的，所述当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内的步骤，包括：当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置，并确定当前输入位置；在所述当前文本输入的光标位置插入标签，并将所述光标设置于所述标签内；通过所述标签接收输入的文本，且在文本输入过程中使所述光标保持在所述标签内；以及当监测到当前输入位置失去焦点时，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本。
[0008]进一步的，所述将所述光标设置于所述标签内的步骤，包括：在所述光标内填充预定字符，使所述光标位于所述标签内，且使所述标签非空。
[0009]进一步的，所述判断所述甘特图的单元格内的所述输入文本是否为动态信息的步骤之后，还包括：若所述输入文本为静态信息，将所述预定义的React组件设置为React无状态函数式组件，调用React.renderToString方法，并对所述React无状态函数式组件声明的render函数内容进行解析，得到所述React无状态函数式组件对应的标签元素以及组件参数，所述元素标签包括块标签或行内标签，所述组件参数包括组件数据、组件颜色或组件样式，所述静态信息为文字标签信息或图标信息；以及将所述标签元素以及所述组件参数组装成HTML字符串，以供浏览器解析。
[0010]进一步的，所述形成最终甘特图的单元格的步骤之后，还包括：构建甘特图的动态区域以及静态区域；以及将所述最终甘特图的单元格显示在所述动态区域，以及将所述HTML字符串显示在所述静态区域。
[0011]为了解决上述技术问题，本申请实施例还提供一种甘特图处理装置，包括：监听模块，用于通过预定义的React组件对甘特图的单元格添加监听事件；传输模块，用于当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断模块，用于判断所述甘特图的单元格内的所述输入文本是否为动态信息；转换模块，用于若所述输入文本为动态信息，基于Reactive
‑
elements转换库，将所述预定义的React组件转换为Web Component组件；以及处理模块，用于将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
[0012]为了解决上述技术问题，本申请实施例还提供一种计算机设备， 所述计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的甘特图处理方法的步骤。
[0013]为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的甘特图处理方法的步骤。
[0014]与现有技术相比，本申请实施例主要有以下有益效果：本申请通过预定义的React组件对甘特图的单元格添加监听事件，以在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息，若所述输入文本为动态信息，基于Reactive
‑
elements转换库，将所述预定义的React组件转换为Web Component组件，并将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格中呈现复杂的动态和交互式内容，从而提高甘特本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种甘特图处理方法，其特征在于，包括下述步骤：通过预定义的React组件对甘特图的单元格添加监听事件；当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息；若所述输入文本为动态信息，基于Reactive
‑
elements转换库，将所述预定义的React组件转换为Web Component组件；以及将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。2.根据权利要求1所述的甘特图处理方法，其特征在于，所述基于Reactive
‑
elements转换库，将所述预定义的React组件转换为Web Component组件的步骤，包括：调用所述Reactive
‑
elements转换库中的reactiveElements方法，将所述预定义的React组件定义Element类；通过预置React.render的渲染函数对所述Element类进行渲染，以将所述Element类渲染在所述甘特图的单元格内，并且，在所述Element类的渲染过程中，通过浏览器提供的MutationObserver接口监听所述Element类是否发生变化；若所述Element类未发生变化，则通过调用浏览器提供的customElements.define方法，将所述Element类转化为所述Web Component组件；以及若所述Element类发生变化，则返回执行所述通过预置React.render的渲染函数对所述Element类进行渲染，以将所述Element类渲染在所述甘特图的单元格内的步骤。3.根据权利要求2所述的甘特图处理方法，其特征在于，所述将所述预定义的React组件定义Element类的步骤之后，还包括：将所述Element类继承HTML Element类，以匹配后续浏览器的MutationObserver接口和浏览器的customElements.define方法。4.根据权利要求1所述的甘特图处理方法，其特征在于，所述当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内的步骤，包括：当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置，并确定当前输入位置；在所述当前文本输入的光标位置插入标签，...

【专利技术属性】
技术研发人员：黎广鑫，林群贺，张玉成，孙帅，李雅堂，
申请(专利权)人：深圳复临科技有限公司，
类型：发明
国别省市：