CN116108814B - 甘特图处理方法、装置、计算机设备及存储介质 - Google Patents

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

Info

Publication number
CN116108814B
CN116108814B CN202310391582.XA CN202310391582A CN116108814B CN 116108814 B CN116108814 B CN 116108814B CN 202310391582 A CN202310391582 A CN 202310391582A CN 116108814 B CN116108814 B CN 116108814B
Authority
CN
China
Prior art keywords
gantt chart
text
input
component
cells
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202310391582.XA
Other languages
English (en)
Other versions
CN116108814A (zh
Inventor
黎广鑫
林群贺
张玉成
孙帅
李雅堂
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Fulin Technology Co Ltd
Original Assignee
Shenzhen Fulin Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Fulin Technology Co Ltd filed Critical Shenzhen Fulin Technology Co Ltd
Priority to CN202310391582.XA priority Critical patent/CN116108814B/zh
Publication of CN116108814A publication Critical patent/CN116108814A/zh
Application granted granted Critical
Publication of CN116108814B publication Critical patent/CN116108814B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请属于数据处理技术领域，涉及一种甘特图处理方法、装置、计算机设备及存储介质。该甘特图处理方法通过预定义的React组件对甘特图的单元格添加监听事件，在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到当前文本输入的光标位置失去焦点后，将输入文本传输至单元格内，并删除单元格内的原始文本；若输入文本为动态信息，基于Reactive‑elements转换库，将预定义的React组件转换为Web Component组件，将Web Component组件放置于甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格，如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格呈现复杂的动态和交互式内容，提高甘特图的显示和功能。

Description

甘特图处理方法、装置、计算机设备及存储介质
技术领域
本申请涉及数据处理技术领域，尤其涉及一种甘特图处理方法、装置、计算机设备及存储介质。
背景技术
甘特图是一种常见的项目管理工具，一般用于显示项目进度和资源排期。但是传统的甘特图单元格渲染能力有限，通常只能通过传入HTML字符串来呈现一些简单的文字图案，此时，若需要在甘特图单元格中呈现复杂的需求，比如：动画、点击出现悬浮窗口、动态表单输入等，就难以实现交互效果，从而导致甘特图单元格的功能受到了很大的限制。
发明内容
本申请实施例的目的在于提出一种甘特图处理方法、装置、计算机设备及存储介质，以解决甘特图单元格难以实现交互效果的问题。
为了解决上述技术问题，本申请实施例提供一种甘特图处理方法，采用了如下所述的技术方案：
通过预定义的React组件对甘特图的单元格添加监听事件；
当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；
判断所述甘特图的单元格内的所述输入文本是否为动态信息；
若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件；以及
将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
进一步的，所述基于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类渲染在所述甘特图的单元格内的步骤。
进一步的，所述将所述预定义的React组件定义Element类的步骤之后，还包括：
将所述Element类继承HTML Element类，以匹配后续浏览器的MutationObserver接口和浏览器的customElements.define方法。
进一步的，所述当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内的步骤，包括：
当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置，并确定当前输入位置；
在所述当前文本输入的光标位置插入标签，并将所述光标设置于所述标签内；
通过所述标签接收输入的文本，且在文本输入过程中使所述光标保持在所述标签内；以及
当监测到当前输入位置失去焦点时，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本。
进一步的，所述将所述光标设置于所述标签内的步骤，包括：
在所述光标内填充预定字符，使所述光标位于所述标签内，且使所述标签非空。
进一步的，所述判断所述甘特图的单元格内的所述输入文本是否为动态信息的步骤之后，还包括：
若所述输入文本为静态信息，将所述预定义的React组件设置为React无状态函数式组件，调用React.renderToString方法，并对所述React无状态函数式组件声明的render函数内容进行解析，得到所述React无状态函数式组件对应的标签元素以及组件参数，所述元素标签包括块标签或行内标签，所述组件参数包括组件数据、组件颜色或组件样式，所述静态信息为文字标签信息或图标信息；以及
将所述标签元素以及所述组件参数组装成HTML字符串，以供浏览器解析。
进一步的，所述形成最终甘特图的单元格的步骤之后，还包括：
构建甘特图的动态区域以及静态区域；以及
将所述最终甘特图的单元格显示在所述动态区域，以及将所述HTML字符串显示在所述静态区域。
为了解决上述技术问题，本申请实施例还提供一种甘特图处理装置，包括：
监听模块，用于通过预定义的React组件对甘特图的单元格添加监听事件；
传输模块，用于当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；
判断模块，用于判断所述甘特图的单元格内的所述输入文本是否为动态信息；
转换模块，用于若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件；以及
处理模块，用于将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
为了解决上述技术问题，本申请实施例还提供一种计算机设备， 所述计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的甘特图处理方法的步骤。
为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的甘特图处理方法的步骤。
与现有技术相比，本申请实施例主要有以下有益效果：
本申请通过预定义的React组件对甘特图的单元格添加监听事件，以在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息，若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件，并将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格中呈现复杂的动态和交互式内容，从而提高甘特图的显示和功能。
附图说明
为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请可以应用于其中的示例性系统架构图；
图2 根据本申请的甘特图处理方法的一个实施例的流程图；
图3是根据本申请的甘特图处理装置的一个实施例的结构示意图；
图4是根据本申请的计算机设备的一个实施例的结构示意图。
具体实施方式
除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器( Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3 )、MP4( Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4 )播放器、膝上型便携计算机和台式计算机等等。
服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。
需要说明的是，本申请实施例所提供的甘特图处理方法一般由服务器/终端设备执行，相应地，甘特图处理装置一般设置于服务器/终端设备中。
应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面将结合一些具体的实施例来对该甘特图处理方法进行说明。在此之前，先对本申请提及的主要术语进行解释或定义。
React 是一种由多个可重用的组件构成的框架，可以用于创建具有复杂交互性的Web应用程序，以及可以用其来编写单元格所需的原始内容。
Web Component组件是一种自定义的Web元素的标准，允许用户将其封装为独立的、可重用的组件，经过注册后被浏览器直接使用。
Reactive-elements 转换库是支持将一些规则的组件转化为Web Component组件，比如，可以将复杂的React组件转化为Web Component组件。
React组件：是指利用React框架设计/定义的组件。
HTML：是指通过HTML格式描述的界面内容。
React.renderToString方法是React库内置的一个API方法。
customElements.define方法是浏览器提供的一个API方法。
MutationObserver接口是浏览器提供的一个监听接口。
React.render是React库内置的渲染函数。
DOM，Document Object Model，文档对象模型；在浏览器网页上，组织页面（或文档）的各个对象被组织在一个树形结构中，形成一个包含多个节点的DOM Tree（DOM树），用来表示页面或文档中对象的标准模型。
下面对本申请的甘特图处理方法的具体过程进行详细说明。
继续参考图2，示出了根据本申请的甘特图处理方法的一个实施例的流程图。所述的甘特图处理方法，包括以下步骤：
步骤S201，通过预定义的React组件对甘特图的单元格添加监听事件。
在本实施例中，甘特图处理方法运行于其上的电子设备(例如图1所示的服务器/终端设备)可以通过有线连接方式或者无线连接方式来连接。需要指出的是，上述无线连接方式可以包括但不限于3G/4G/5G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband )连接、以及其他现在已知或将来开发的无线连接方式。
本实施例中，以甘特图处理方法运行于服务器上为例，服务器预定义一个React组件。具体地，在一个甘特图界面中，会存在多个内容部分，组件就是甘特图界面上的一内容部分，其中，在React框架设计的渲染方式下，一个React组件的定义是根据业务数据返回一个DOM树的数据描述，示范性地，对于目标网页界面中的每个内容，可以基于React框架分别设计出对应的React组件。
进一步地，服务器在获取到预定义的React组件后，通过所述React组件对甘特图的单元格添加监听事件。本实施例中，React组件先对甘特图的单元格添加用户的点击监听事件onClick（该监听事件onClick由React框架提供），如此，服务器就能监听到用户点击甘特图的单元格。
步骤S202，当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本。
在本实施例中，当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本。具体如下：
当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置，并确定当前输入位置，然后在所述当前文本输入的光标位置插入标签，并将所述光标设置于所述标签内，以通过所述标签接收输入的文本，且在文本输入过程中使所述光标保持在所述标签内，最后在监测到当前输入位置失去焦点时，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本。
本实施例中，服务器通过React组件设置监听事件onClick监听当前是否触发文本输入开始的事件，若文本输入开始的事件被触发，通过document.getSelection()方法获取当前光标位置，定位当前文本输入的光标位置并确定当前输入位置；为了防止光标移动，在当前文本输入的光标位置插入标签，并将光标设置于标签内，然后通过标签接收输入的文本，文本输入过程中使光标保持在标签内；实时监测当前输入位置是否失去焦点，当监测到当前输入位置失去焦点时，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本，即将原始文本替换成输入文本。本实施例中，输入文本可以是文字、图片、表情、标点符号等，且输入文本还可以是语音文本、视频文本等，在此并不进行限制。
进一步地，标签可以是span标签，span标签是超文本标记语言(HTML)的行内标签，被用来组合文档中的行内元素，span标签没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。
在一实施例中，所述将光标设置于所述标签内，包括在所述光标内填充预定字符，使所述光标位于所述标签内，且使所述标签非空。具体地，以span标签为例，为了使光标设置在span标签内，在span标签内填充'\u200B'字符，使光标位于标签内，其中，'\u200B'字符是一个特殊的字符，使用'\u200B'字符既能保证span标签内非空，又不会影响视觉效果。
该方法通过定位光标位置，利用插入的标签锁定光标位置，通过标签接收输入的文本，保证文本输入过程中光标位置固定，使光标不会因更新输入文本内容时改变位置而导致本地原始文本的输入位置改变。
步骤S203，判断所述甘特图的单元格内的所述输入文本是否为动态信息；
在本实施例中，识别所述输入文本是否为动态信息，这里，动态信息为可实时编辑以改变其内容的信息，比如：嵌入视频、音频、动态表单输入等信息。
步骤S204，若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件；
步骤S205，将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
在本实施例中，若所述输入文本为动态信息，则基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件，并将所述Web Component组件放置于所述甘特图的单元格的renderFn返回函数中并返回结果，以形成最终甘特图的单元格，这样，浏览器就能识别复杂React组件的单元格功能，既保留了原本 React组件丰富的能力，又能让很好的兼容不同版本浏览器，又不影响甘特图本身的实现，使得开发人员可以专注在甘特图强大功能的React组件开发上，后续经过转化直接展示在甘特图的单元格上，不需要太关注甘特图内部的实现。
在实际应用中，通过将所述React组件转换为Web Component组件（浏览器能够识别的组件），从而赋予甘特图的单元格渲染React组件的能力，使得用户可以在甘特图的单元格中呈现复杂的动态和交互式内容，例如：嵌入视频、音频、动态表单输入等元素，这样，用户可以更好地管理和控制甘特图的显示和功能。
本申请通过预定义的React组件对甘特图的单元格添加监听事件，以在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息，若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件，并将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格中呈现复杂的动态和交互式内容，从而提高甘特图的显示和功能。
在本实施例可选的实现方式中，所述基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件的步骤，包括：
调用所述Reactive-elements转换库中的reactiveElements方法，将所述预定义的React组件定义Element类；
通过预置React.render的渲染函数对所述Element类进行渲染，以将所述Element类渲染在所述甘特图的单元格内，并且，在所述Element类的渲染过程中，通过浏览器提供的MutationObserver接口监听所述Element类是否发生变化；以及
若所述Element类未发生变化，则通过调用浏览器提供的customElements.define方法，将所述ElementA类转化为所述Web Component组件。
示例性地，调用所述Reactive-elements转换库中的reactiveElements方法，将所述预定义的React组件定义Element类，Element类里面加入预置React.render的渲染函数，将Element类渲染在甘特图的单元格内，如下为实现的代码：
React.render(Element，position)。
而在所述Element类的渲染过程中，通过浏览器提供的MutationObserver接口监听所述Element类是否发生变化，实现的代码如下：
var a = new MutationObserver()；
a.observe({true，subtree: true， characterData: true，attributes: })。
若所述Element类未发生变化，则通过调用浏览器提供的customElements.define方法，将所述Element类转化为所述Web Component组件，实现的代码如下：
customElementsdefine(‘componentA’，Element)。
若所述Element类发生变化，则返回执行所述通过预置React.render的渲染函数对所述Element类进行渲染，以将所述Element类渲染在所述甘特图的单元格内的步骤。
当然，所述将所述预定义的React组件定义Element类的步骤之后，还包括将所述Element类继承HTML Element类，以匹配后续浏览器的MutationObserver接口和浏览器的customElements.define方法，即将所述Element类继承HTML Element，以匹配后续浏览器的MutationObserver接口和浏览器的customElements.define方法。实现的代码如下：
class Element extends HTML Element。
本实施例中，将所述Element类转化为所述Web Component组件，使得浏览器能够识别复杂React组件的单元格功能，既保留了原本 React组件丰富的能力，又能让很好的兼容不同版本浏览器，又不影响甘特图本身的实现，使得开发人员可以专注在甘特图强大功能的React组件开发上，后续经过转化直接展示在甘特图的单元格上，不需要太关注甘特图内部的实现。
进一步地，所述判断所述甘特图的单元格内的所述输入文本是否为动态信息的步骤之后，还包括：
若所述输入文本为静态信息，将所述预定义的React组件设置为React无状态函数式组件，调用React.renderToString方法，并对所述React无状态函数式组件声明的render函数内容进行解析，得到所述React无状态函数式组件对应的标签元素以及组件参数，所述元素标签包括块标签或行内标签，所述组件参数包括组件数据、组件颜色或组件样式，所述静态信息为文字标签信息或图标信息；
将所述标签元素以及所述组件参数组装成HTML字符串，以供浏览器解析。
即HTML字符串能够直接被浏览器解析，所以可以直接将内容放置在到甘特图的单元格的renderFn返回函数中返回结果，使得甘特图能够将直接渲染出单元格内容。
此方法与React组件的区别是：经过转换后的HTML字符串是可以直接被浏览器解析使用的，而不需要经过Reactive-elements转化库进行转换，所以在性能表现上比前者直接用表现更好。因此，可以通过识别输入文本为静态信息，该静态信息为不可编辑的信息，比如：文字标签信息、图标信息或总结信息等，可将所述React组件预定义为React无状态函数式组件，该React无状态函数式组件则适用于甘特图的单元格内不需要实时交互的、静态的场景。
本实施例中，所述形成最终甘特图的单元格的步骤之后，还包括构建甘特图的动态区域以及静态区域，并将所述最终甘特图的单元格显示在所述动态区域，以及将所述HTML字符串显示在所述静态区域，从而可以为甘特图提供了更多的定制和管理选项，方便不同的类型项目使，也能够增强甘特图单元格的可编辑功能和灵活性，及增强甘特图可维护性，提高开发人员的效率；且通过动态区域和静态区域的设置，可以呈现丰富的静态和动态内容。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）等非易失性存储介质，或随机存储记忆体（Random Access Memory，RAM）等。
应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
进一步参考图3，作为对上述图2所示方法的实现，本申请提供了一种甘特图处理装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图3所示，本实施例所述的甘特图处理装置300包括：监听模块301、传输模块302、判断模块303、转换模块304以及处理模块305，其中：
监听模块301，用于通过预定义的React组件对甘特图的单元格添加监听事件；
传输模块302，用于当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；
判断模块303，用于判断所述甘特图的单元格内的所述输入文本是否为动态信息；
转换模块304，用于若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件；以及
处理模块305，用于将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
本实施例中，通过监听模块301中的预定义的React组件对甘特图的单元格添加监听事件，以在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，通过传输模块302将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；以及通过判断模块303判断所述甘特图的单元格内的所述输入文本是否为动态信息，若所述输入文本为动态信息，基于Reactive-elements转换库，通过转换模块304将所述预定义的React组件转换为Web Component组件，并通过处理模块305将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格中呈现复杂的动态和交互式内容，从而提高甘特图的显示和功能。
为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。
所述计算机设备4包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备4，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器 (Digital Signal Processor，DSP)、嵌入式设备等。
所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。
所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器（例如，SD或DX存储器等）、随机访问存储器（RAM）、静态随机访问存储器（SRAM）、只读存储器（ROM）、电可擦除可编程只读存储器（EEPROM）、可编程只读存储器（PROM）、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备4的内部存储单元，例如该计算机设备4的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备4的外部存储设备，例如该计算机设备4上配备的插接式硬盘，智能存储卡（Smart Media Card, SMC），安全数字（Secure Digital, SD）卡，闪存卡（FlashCard）等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备4的操作系统和各类应用软件，例如甘特图处理方法的计算机可读指令等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器42在一些实施例中可以是中央处理器（Central Processing Unit，CPU）、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备4的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的计算机可读指令或者处理数据，例如运行所述甘特图处理方法的计算机可读指令。
所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备4与其他电子设备之间建立通信连接。
本实施例中提供的计算机设备可以执行上述甘特图处理方法。此处甘特图处理方法可以是上述各个实施例的甘特图处理方法。
本实施例中，通过所述预定义的React组件对甘特图的单元格添加监听事件，以在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息，若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件，并将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格中呈现复杂的动态和交互式内容，从而提高甘特图的显示和功能。
本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的甘特图处理方法的步骤。
本实施例中，通过预定义的React组件对甘特图的单元格添加监听事件，以在监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；判断所述甘特图的单元格内的所述输入文本是否为动态信息，若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件，并将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。如此，赋予甘特图的单元格渲染React组件的能力，使得甘特图的单元格中呈现复杂的动态和交互式内容，从而提高甘特图的显示和功能。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（所述存储介质可以是非易失性存储介质，也可以是易失性存储介质，例如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端设备（可以是手机，计算机，服务器，空调器，或者网络设备等）执行本申请各个实施例所述的方法。
显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

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所述的甘特图处理方法，其特征在于，所述当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内的步骤，包括：
当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置，并确定当前输入位置；
在所述当前文本输入的光标位置插入标签，并将所述光标设置于所述标签内；
通过所述标签接收输入的文本，且在文本输入过程中使所述光标保持在所述标签内；以及
当监测到当前输入位置失去焦点时，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本。
5.根据权利要求4所述的甘特图处理方法，其特征在于，所述将所述光标设置于所述标签内的步骤，包括：
在所述光标内填充预定字符，使所述光标位于所述标签内，且使所述标签非空。
6.根据权利要求1所述的甘特图处理方法，其特征在于，所述判断所述甘特图的单元格内的所述输入文本是否为动态信息的步骤之后，还包括：
若所述输入文本为静态信息，将所述预定义的React组件设置为React无状态函数式组件，调用React.renderToString方法，并对所述React无状态函数式组件声明的render函数内容进行解析，得到所述React无状态函数式组件对应的标签元素以及组件参数，所述元素标签包括块标签或行内标签，所述组件参数包括组件数据、组件颜色或组件样式，所述静态信息为文字标签信息或图标信息；以及
将所述标签元素以及所述组件参数组装成HTML字符串，以供浏览器解析。
7.根据权利要求6所述的甘特图处理方法，其特征在于，所述形成最终甘特图的单元格的步骤之后，还包括：
构建甘特图的动态区域以及静态区域；以及
将所述最终甘特图的单元格显示在所述动态区域，以及将所述HTML字符串显示在所述静态区域。
8.一种甘特图处理装置，其特征在于，包括：
监听模块，用于通过预定义的React组件对甘特图的单元格添加监听事件；
传输模块，用于当监听到文本输入开始的事件触发时，定位当前文本输入的光标位置并接收输入文本，并在监测到所述当前文本输入的光标位置失去焦点后，将所述输入文本传输至所述甘特图的单元格内，并删除所述甘特图的单元格内的原始文本；
判断模块，用于判断所述甘特图的单元格内的所述输入文本是否为动态信息；
转换模块，用于若所述输入文本为动态信息，基于Reactive-elements转换库，将所述预定义的React组件转换为Web Component组件；以及
处理模块，用于将所述Web Component组件放置于所述甘特图的单元格的返回函数中并返回结果，以形成最终甘特图的单元格。
9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的甘特图处理方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的甘特图处理方法的步骤。
CN202310391582.XA 2023-04-13 2023-04-13 甘特图处理方法、装置、计算机设备及存储介质 Active CN116108814B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310391582.XA CN116108814B (zh) 2023-04-13 2023-04-13 甘特图处理方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310391582.XA CN116108814B (zh) 2023-04-13 2023-04-13 甘特图处理方法、装置、计算机设备及存储介质

Publications (2)

Publication Number Publication Date
CN116108814A CN116108814A (zh) 2023-05-12
CN116108814B true CN116108814B (zh) 2023-06-06

Family

ID=86261998

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310391582.XA Active CN116108814B (zh) 2023-04-13 2023-04-13 甘特图处理方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN116108814B (zh)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115543142A (zh) * 2022-11-02 2022-12-30 深圳复临科技有限公司 文本实时编辑方法、装置、计算机设备及存储介质
CN115809056A (zh) * 2023-02-07 2023-03-17 深圳复临科技有限公司 组件复用实现方法、装置和终端设备、可读存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7050056B2 (en) * 2002-12-20 2006-05-23 Sap Aktiengesellschaft Interactive and web-based Gantt Chart

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115543142A (zh) * 2022-11-02 2022-12-30 深圳复临科技有限公司 文本实时编辑方法、装置、计算机设备及存储介质
CN115809056A (zh) * 2023-02-07 2023-03-17 深圳复临科技有限公司 组件复用实现方法、装置和终端设备、可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于React的资源甘特图组件设计与实现;滕国栋;杭州师范大学学报（自然科学版）;第21卷(第1期);第101-106页 *

Also Published As

Publication number Publication date
CN116108814A (zh) 2023-05-12

Similar Documents

Publication Publication Date Title
US20090100321A1 (en) Universal contextual actions menu across windows applications
CN110795649A (zh) 目标页面展示方法、装置、系统及电子设备
CN113536185B (zh) 应用页面的加载方法、存储介质、及其相关设备
CN114996619A (zh) 一种页面显示的方法、装置、计算机设备及存储介质
CN103530338A (zh) 在计算设备上进行页面渲染的框架及生成页面的方法
CN111552463A (zh) 一种页面跳转方法、装置、计算机设备及存储介质
CN110795180A (zh) 二维码管理方法、系统、电子设备及存储介质
CN113391808A (zh) 页面的配置方法、装置及电子设备
CN109240664A (zh) 一种采集用户行为信息的方法及终端
CN116644213A (zh) Xml文件读取方法、装置、设备及存储介质
CN108319474B (zh) 一种页面信息生成方法、装置和设备
CN111797297B (zh) 页面数据处理方法、装置、计算机设备及存储介质
CN110765610B (zh) Pdm集成方法、装置、计算机设备及存储介质
CN116108814B (zh) 甘特图处理方法、装置、计算机设备及存储介质
CN116450723A (zh) 数据提取方法、装置、计算机设备及存储介质
CN115687826A (zh) 页面刷新方法、装置、计算机设备及存储介质
CN114090066A (zh) 用户界面卡片视图生成方法、装置、计算机设备及介质
CN115809363A (zh) 内容推送方法、装置、电子设备和存储介质
CN111880698A (zh) 智能终端的信息处理方法、装置、电子设备和存储介质
CN107704491B (zh) 消息处理方法和装置
CN110851346A (zh) 查询语句边界问题的检测方法、装置、设备及存储介质
CN116467145A (zh) 页面性能数据采集方法、装置、计算机设备及存储介质
CN117115307A (zh) 基于Flutter的富文本编辑方法、装置、设备及介质
CN117435267A (zh) 基于配置文件的表单加载方法、装置、计算机设备及介质
CN117290019A (zh) 一种接口调用方法、装置、计算机设备和存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant