CN115344243B - Component packaging method and system of X6 flow chart - Google Patents
Component packaging method and system of X6 flow chart Download PDFInfo
- Publication number
- CN115344243B CN115344243B CN202211265745.1A CN202211265745A CN115344243B CN 115344243 B CN115344243 B CN 115344243B CN 202211265745 A CN202211265745 A CN 202211265745A CN 115344243 B CN115344243 B CN 115344243B
- Authority
- CN
- China
- Prior art keywords
- vue
- component
- node
- virtual
- abstract
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The invention relates to an assembly packaging method and system of an X6 flow chart, which comprises the following steps: s1, constructing a corresponding form according to the requirements of a service scene; s2, packaging the form into a corresponding actual service component based on a vue framework; s3, aiming at the same type of flow chart nodes, constructing corresponding abstract functions and configuring parameters of the abstract functions; s4, constructing a virtual vue component according to the constructed abstract function, and mounting the actual service component into a virtual vue component, so as to obtain a corresponding vue component node with the actual service component; s5, a rendering template and a pattern in the virtual vue component are constructed through a template method of vue, and the actual service component realizes data bidirectional binding through a v-model method of vue, so that data in vue component nodes can be synchronized to a data structure of the flow chart.
Description
Technical Field
The invention relates to the technical field of antvX6 application, in particular to an assembly packaging method and system of an X6 flow chart.
Background
The Antv X6 is a simple and easy-to-use graph visualization engine, the Antv X6 provides a series of graph visualization solutions which are elegant in design and convenient to use on the basis of high customization capacity, and a developer can be helped to build own graph analysis application or graph editor application by means of the Antv X6.
However, the graphics capability provided by the antv X6 native is a traditional canvas mode, so that the method has the defects of difficult calling, low development efficiency and the like; the anti vX6 flow chart official part only has a react component support library and does not have a universal vue component library, so that the anti vX6 has no corresponding vue component library expansion; moreover, the number of developers using the vue technology is large, and in some service scenarios, corresponding flow chart control functions also need to be used; therefore, the traditional canvas method for generating nodes is not only slow in development efficiency, but also incapable of supporting some complex business logics.
At present, the vue component can be placed on a flow chart node by using an X6-vue-shape extension library of an X6 flow chart, but the scheme has the following defects: the vue component nodes generated by the extended library are closed, internal data cannot be exported, and when the whole graph data is stored or cached, the data in the nodes cannot be cached together, so that the requirements of service scenes cannot be met;
if different nodes use the same component, only one component instance is created, and the internal data of different nodes cannot be isolated from each other and can affect each other; if different components are created and used by different nodes, the same type of components cannot be abstracted, so that the development and maintenance workload is greatly increased, and the dynamic increase of the same type of nodes cannot be supported;
because the abstraction degree is low, for the scene needing to dynamically increase the nodes, the codes of new nodes which are repeatedly increased are required to be continuously written, and the development cost and the maintenance cost are increased.
Disclosure of Invention
In view of the above, there is a need to provide a method and system for packaging components in an X6 flowchart.
An embodiment of the present invention provides a method for packaging an assembly in an X6 flowchart, including the following steps: s1, constructing a corresponding form according to the requirements of a service scene;
s2, packaging the form into a corresponding actual service component based on a vue framework;
s3, aiming at the same type of flow chart nodes, constructing corresponding abstract functions and configuring parameters of the abstract functions;
s4, constructing a virtual vue component according to the constructed abstract function, and mounting the actual service component into a virtual vue component, so as to obtain a corresponding vue component node with the actual service component;
s5, constructing a rendering template and a style inside a virtual vue component through a template method of vue, wherein the virtual vue component refers to an actual service component and is assigned through a components method of vue, the actual service component realizes data bidirectional binding through a v-model method of vue, so that data in vue component nodes can be synchronized to a data structure of a flow chart, vue component nodes for realizing data binding are obtained, and vue component nodes can be applied to corresponding service scenes.
Preferably, in step S3, the parameters of the configured abstract function include: the method comprises the steps of a graph object of a flow graph node, a data object needing to be initialized to the node, the name of the node, the size of the node, the position of the node on the graph and a method set necessary for the node.
Preferably, in step S3, the function entries of the abstract function include a graph object to which the node needs to be added and a data object to be initialized to the node.
Preferably, in step S4, the virtual vue component abstractly encapsulates corresponding node generation logic, and the node generation logic abstractly encapsulated by the virtual vue component is directly called, so as to generate dynamic nodes in batch.
Preferably, in step S5, the template method of vue specifically includes: the html code of the corresponding node is taken as a character string and is transmitted into Vue compiler's template attribute. The compiler converts the character string into an abstract lexical tree according to the html language specification, optimizes the abstract lexical tree and converts the abstract lexical tree into an executable code.
The present invention also provides a component packaging system of an X6 flow chart, the system comprising:
an actual service component module: the system is used for constructing a corresponding form according to the requirements of the business scene, and encapsulating the form into a corresponding actual business component based on a vue framework,
an abstract function module: the method is used for constructing an abstract function aiming at the same type of flow chart nodes, configuring parameters of the abstract function, constructing a virtual vue component according to the constructed abstract function, abstractively packaging corresponding node generation logic, and then mounting an actual business component into the virtual vue component;
an assignment module: the template method is used for constructing a rendering template and a style inside a virtual component through a template method of vue, wherein the virtual vue component refers to an actual business component and is assigned through a components method of vue;
the data bidirectional binding module: the v-model method used for the actual service component vue is used for realizing data bidirectional binding, so that data in a vue component node can be synchronized to a data structure of the flow chart.
Preferably, the abstract function module further comprises a parameter configuration module, and the parameter configuration module comprises a graph object of the flow chart node, a data object to be initialized to the flow chart node, a name of the flow chart node, a size of the flow chart node, a position of the flow chart node on the graph, and a necessary partial method set of the flow chart node.
Preferably, the abstract function module further comprises a function parameter module, and the function parameter module comprises a graph object that needs to add the node of the flowchart and a data object that needs to be initialized to the node of the flowchart.
Preferably, the abstract function module further comprises a dynamic node generation module, and the dynamic node generation module generates dynamic nodes in batch by directly calling the node generation logic abstractly encapsulated by the virtual vue component.
The vue assembly convenient to use is provided for developers and used for realizing graph analysis application or graph editor application built on the basis of vue, so that the developers are assisted to build corresponding application quickly and conveniently, development thresholds can be reduced, and development efficiency is improved;
compared with a common vue component node, on one hand, the internal data of the vue component node are independent from each other, and the vue component nodes are isolated from each other and cannot influence each other, on the other hand, the internal data of the vue component nodes can be exported, and the synchronization with the whole data of the flow chart is realized; for the whole project, the code abstraction degree is high, the nodes support dynamic generation, the code amount is low, and the development and maintenance costs are low.
Drawings
The foregoing and other objects, features and advantages of the invention will be apparent from the following more particular description of preferred embodiments of the invention, as illustrated in the accompanying drawings. Like reference numerals refer to like parts throughout the drawings, and the drawings are not intended to be drawn to scale in actual dimensions, emphasis instead being placed upon illustrating the subject matter of the present application.
FIG. 1 is a flow chart of a method of an embodiment of the present invention;
fig. 2 is a schematic diagram of data isolation and synchronization of data bidirectional binding according to the method of the preferred embodiment of the present invention.
Detailed Description
The present invention will be better understood and implemented by those skilled in the art by the following detailed description of the embodiments taken in conjunction with the accompanying drawings, which are not intended to limit the scope of the present invention.
As shown in fig. 1 and fig. 2, in one aspect, an embodiment of the present invention provides a method for packaging an assembly in an X6 flowchart, including the following steps:
s1, constructing a corresponding form according to the requirements of a service scene;
s2, packaging the form into a corresponding actual service component based on a vue framework; in actual business, besides ordinary common flow chart nodes (pure word expression and no interactive scenes), flow chart nodes related to the business are also often encountered. For example, in a certain flowchart, fields such as node names and corresponding attributes need to be dynamically modified in nodes therein due to service requirements. The scene appeal is abstracted into different form fields, the corresponding scene is packaged into a small form control, and the small form control is constructed into the flow chart node through a node construction method.
S3, aiming at the same type of flow chart nodes, constructing corresponding abstract functions and configuring parameters of the abstract functions; the abstract function constructs a virtual vue component instance, abstractly encapsulates a corresponding node generation method, and only generates a blank vue instance.
S4, constructing a virtual vue component according to the constructed abstract function, mounting the actual service component into a virtual vue component to obtain a corresponding vue component node with the actual service component, and applying the obtained vue component node to the flow chart service scene;
s5, constructing a rendering template and a style inside a virtual vue component through a template method of vue, wherein the virtual vue component refers to an actual service component and is assigned through a components method of vue, the actual service component realizes data bidirectional binding through a v-model method of vue, so that data in vue component nodes can be synchronized to a data structure of a flow chart, vue component nodes for realizing data binding are obtained, and vue component nodes can be applied to corresponding service scenes.
And for the business component, monitoring an input event of the DOM element at the outermost layer, and after the event is sent out, assigning the value of $ event. And when the outer-layer variable is modified, triggering a set method in object. Thus, vue the data in the node of the component can be synchronized to the data structure of the graph. The application scenario is that if a node component needs to realize a complex form, data can be synchronized to the main data of the flow chart in real time through a data bidirectional binding model of vue, so that multi-node data linkage and data linkage of other outer-layer components are realized. Meanwhile, aiming at the scene that the interior of the component needs to be constructed by a complex form, compared with the traditional method, the scheme can more simply, conveniently, safely and more controllably synchronize data flow.
In addition, by using the scheme, when the graph structure data is serialized, the data in the component nodes can be rendered synchronously, and the data generated by temporary operation cannot be lost. Compared with the traditional scheme, if the internal data information of the component nodes in the graph needs to be synchronized, the node data needs to be cached independently and copied through additional operation, so that the efficiency is low, and meanwhile, the operation is complicated and the maintenance cost is high. When the graphic data interface is deserialized, the method can also be used for synchronizing the data in the assembly into the graphic structure, so that the dynamic cache of the data is realized, and the behavior data generated when a user operates and edits the flow chart can not be lost.
In addition, when the method is used for creating the dynamic component, the same basic meta-component can be used for the same type of nodes, the corresponding node component can be created as the vue component is normally created, and the component comprises the corresponding life cycle of the vue component.
For the scene needing to dynamically increase the nodes, the method can be directly called to generate the dynamic nodes in batches by packaging the abstract method.
Moreover, because the runtime mode of vue is used, the data in the nodes are stored in different vue instances and are independent of each other, the data cannot interfere with each other, the data change in other nodes cannot be influenced by operating the single node data change, and therefore the components can be dynamically independent of each other.
In a preferred embodiment, in step S1, the parameters of the configured abstract function include:
the method comprises the steps of a graph object of a flow graph node, a data object needing to be initialized to the node, the name of the node, the size of the node, the position of the node on the graph and a part of method set necessary for the node.
In a preferred embodiment, in step S3, the function entries of the abstract function include a graph object to which the node needs to be added and a data object to be initialized to the node.
Compared with the common vue component nodes, on one hand, the internal data of the vue component node are independent from each other, and the vue component nodes are isolated from each other and do not affect each other, on the other hand, the internal data of the vue component node can be exported, and the synchronization with the whole data of the flow chart is realized, for example, when the whole data of the flow chart is stored and cached, the internal data of the node can be cached together.
In a preferred embodiment, in step S4, the virtual vue component abstractly encapsulates the corresponding node generation logic, and the node generation logic corresponding to the virtual vue component is directly called, so as to generate dynamic nodes in batch. And because the code abstraction degree is high and the code amount is low, the node supports dynamic generation.
In a preferred embodiment, in step S5, the template method of vue specifically includes: the html code of the corresponding node is taken as a character string and is transmitted into a template attribute of a Vue compiler. The compiler converts the character string into an abstract lexical tree according to the html language specification, optimizes the abstract lexical tree and converts the abstract lexical tree into an executable code.
The flow chart node with the actual service component obtained by the method has the following advantages:
1. the internal data of the components can be serialized to the main data of the flow chart together; meanwhile, the internal data of the node component can be restored through deserialization, so that the node component can be conveniently applied to some scenes needing to sort the cache map data;
2. for some scenes needing to create components in the same form and the same type in batch, node components can be created quickly in batch; meanwhile, each node is independent, data structures cannot influence each other, and data cannot pollute each other. The node supports dynamic generation and has low code quantity;
3. for the whole project, the code abstraction degree is high, and the development and maintenance costs are low.
The present invention also provides a component packaging system of an X6 flow chart, the system comprising:
an actual service component module: the system is used for constructing a corresponding form according to the requirements of the business scene, and encapsulating the form into a corresponding actual business component based on a vue framework,
an abstract function module: the method is used for constructing an abstract function aiming at the same type of flow chart nodes, configuring parameters of the abstract function, constructing a virtual vue component according to the constructed abstract function, abstractively packaging corresponding node generation logic, and then mounting an actual business component into the virtual vue component;
an assignment module: the template method is used for constructing a rendering template and a style inside a virtual component through a template method of vue, wherein the virtual vue component refers to an actual business component and is assigned through a components method of vue;
the data bidirectional binding module: the v-model method used for the actual service component vue is used for realizing data bidirectional binding, so that data in a vue component node can be synchronized to a data structure of the flow chart.
In a preferred embodiment, the abstract function module further includes a parameter configuration module, where the parameter configuration module includes a graph object of the flowchart node, a data object to be initialized to the flowchart node, a name of the flowchart node, a size of the flowchart node, a position of the flowchart node on the graph, and a necessary partial method set of the flowchart node.
In a preferred embodiment, the abstract function module further includes a function parameter module, and the function parameter module includes a graph object that needs to be added to the flow graph node and a data object that needs to be initialized to the flow graph node.
In a preferred embodiment, the abstract function module further includes a dynamic node generation module, and the dynamic node generation module generates dynamic nodes in batch by directly calling the node generation logic abstractly encapsulated by the virtual vue component.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (7)
1. An assembly packaging method of an X6 flow chart is characterized by comprising the following steps:
s1, constructing a corresponding form according to the requirements of a service scene;
s2, packaging the form into a corresponding actual service component based on a vue framework;
s3, aiming at the same type of flow chart nodes, constructing corresponding abstract functions, and configuring parameters of the abstract functions;
s4, constructing a virtual vue component according to the constructed abstract function, and mounting the actual service component into a virtual vue component to obtain a corresponding vue component node with the actual service component; the virtual vue component generates logic through nodes corresponding to abstract packaging, and generates dynamic nodes in batches by directly calling the node generating logic abstractly packaged by the virtual vue component;
s5, a rendering template and a style inside a virtual vue component are constructed through a template method of vue, the virtual vue component refers to an actual service component and is assigned through a components method of vue, the actual service component realizes data bidirectional binding through a v-model method of vue, data in vue component nodes can be synchronized to a data structure of a flow diagram, a vue component node for realizing data binding is obtained, and the vue component node can be applied to a corresponding service scene.
2. The method of claim 1, wherein in step S3, the parameters of the configured abstract function include:
the method comprises the steps of a graph object of a flow graph node, a data object needing to be initialized for the node, the name of the node, the size of the node, the position of the node on the graph and the necessary method set of the node.
3. The method according to claim 1, wherein in step S3, the functional entries of the abstract functions include a graph object to which the node needs to be added and a data object to which the node needs to be initialized.
4. The method of claim 1, wherein the template method of vue in step S5 specifically comprises: and taking the corresponding node html code as a character string, transmitting the character string into a template attribute of a vue compiler, converting the character string into an abstract lexical tree according to html language specifications by the compiler, optimizing the abstract lexical tree, and converting the abstract lexical tree into an executable code.
5. An X6 flow diagram component packaging system, the system comprising:
the form generation module: the system is used for constructing a corresponding form according to the requirements of the service scene;
an actual service component module: the system is used for encapsulating the form into a corresponding actual business component based on a vue framework;
an abstract function module: the method comprises the steps of constructing corresponding abstract functions aiming at the same type of flow chart nodes, and configuring parameters of the abstract functions;
mounting a module: the system comprises a virtual vue component, a virtual vue component and a virtual vue component node, wherein the virtual vue component is constructed according to a constructed abstract function, and an actual service component is mounted in the virtual vue component to obtain a corresponding vue component node with the actual service component; the virtual vue component generates logic through nodes corresponding to abstract packaging, and generates dynamic nodes in batches by directly calling the node generating logic abstractly packaged by the virtual vue component;
the data bidirectional binding module: the method is used for constructing rendering templates and styles inside a virtual vue component through a template method of vue, the virtual vue component refers to an actual service component, and is assigned through a components method of vue, the actual service component realizes data bidirectional binding through a v-model method of vue, so that data in a vue component node can be synchronized to a data structure of a flow chart, a vue component node for realizing data binding is obtained, and the vue component node can be applied to a corresponding service scene.
6. The system of claim 5, wherein the abstract function modules further comprise parameter configuration modules, wherein the parameter configuration modules comprise a graph object of the flow graph node, a data object to be initialized to the flow graph node, a name of the flow graph node, a size of the flow graph node, a position of the flow graph node on the graph, and a necessary partial method set of the flow graph node.
7. The system of claim 5, wherein the abstract function module further comprises a function reference module comprising a graph object that requires the addition of a flow graph node, and a data object that requires initialization to a flow graph node.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211265745.1A CN115344243B (en) | 2022-10-17 | 2022-10-17 | Component packaging method and system of X6 flow chart |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211265745.1A CN115344243B (en) | 2022-10-17 | 2022-10-17 | Component packaging method and system of X6 flow chart |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115344243A CN115344243A (en) | 2022-11-15 |
| CN115344243B true CN115344243B (en) | 2023-02-03 |
Family
ID=83957347
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211265745.1A Active CN115344243B (en) | 2022-10-17 | 2022-10-17 | Component packaging method and system of X6 flow chart |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115344243B (en) |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542450B (en) * | 2018-11-08 | 2021-10-01 | 国网河南省电力公司电力科学研究院 | Method and device for realizing intelligent component of process layer of intelligent substation |
| CN112685011B (en) * | 2020-12-21 | 2022-06-07 | 福建新大陆软件工程有限公司 | AI application visualization arrangement method based on Vue |
| CN112711408A (en) * | 2020-12-31 | 2021-04-27 | 南威软件股份有限公司 | Vue componentization-based visualization configuration rendering method, system and terminal |
| CN113835701B (en) * | 2021-09-22 | 2024-04-02 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN113900628B (en) * | 2021-12-09 | 2022-02-18 | 中邮消费金融有限公司 | Vue-based multi-page label instance caching method |
| CN114968220A (en) * | 2022-06-10 | 2022-08-30 | 浪潮软件科技有限公司 | Dynamic portal design method and device |
-
2022
- 2022-10-17 CN CN202211265745.1A patent/CN115344243B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN115344243A (en) | 2022-11-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6385661B1 (en) | System and method for dynamic generation of remote proxies | |
| CN101840334B (en) | Software component service packaging method | |
| US6622175B1 (en) | System and method for communications in a distributed processing environment | |
| CN101339500B (en) | Data binding application program interface creation method based on XML mode | |
| US8074201B2 (en) | Deployment and execution of a program on an embedded device | |
| CN103279373B (en) | The update method and device of browser case function | |
| CN102609248B (en) | Integrated avionics system modeling and simulation platform based on MDA (model driven architecture) | |
| CN101477461A (en) | Dynamic generation apparatus and method for application program interface | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| JPH08115209A (en) | System and method for creation of source code | |
| CN113064593B (en) | Method and device for dynamic mobile APP, computer equipment and storage medium | |
| CN105159670A (en) | Universal cockpit display control system software development framework | |
| CN111880777A (en) | Program information issuing method and device and electronic equipment | |
| CN102141991A (en) | Method and system for web server | |
| CN111813814A (en) | Universal model management method and device supporting multiple machine learning frameworks | |
| CN104063231B (en) | Test resource rapid access method based on HIT-TENA | |
| CN113312046A (en) | Sub-application page processing method and device and computer equipment | |
| CN114371850A (en) | Management method for project construction compiling and code development | |
| CN115344243B (en) | Component packaging method and system of X6 flow chart | |
| CN116521181B (en) | Script data processing method, device, equipment and medium based on game system | |
| CN115237415B (en) | Method for realizing situation duplication under GIS platform | |
| CN115495081A (en) | Method and system for generating and loading low-code page component based on JSON data | |
| CN109240672B (en) | Artificial intelligence writing method for information transmission source code of single machine component of digital aircraft | |
| CN113485687B (en) | Rapid building method and system based on ICE distributed cross-language application | |
| CN115712793A (en) | Panoramic front-end document site generation method and system |
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 |