CN115344243A - Component packaging method and system of X6 flow chart - Google Patents
Component packaging method and system of X6 flow chart Download PDFInfo
- Publication number
- CN115344243A CN115344243A CN202211265745.1A CN202211265745A CN115344243A CN 115344243 A CN115344243 A CN 115344243A CN 202211265745 A CN202211265745 A CN 202211265745A CN 115344243 A CN115344243 A CN 115344243A
- Authority
- CN
- China
- Prior art keywords
- vue
- node
- component
- virtual
- assembly
- 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.)
- Granted
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 the 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 the virtual vue component, so as to obtain a corresponding vue component node with the actual service component; s5, a rendering template and a style in the virtual vue assembly are constructed through a template method of vue, and the actual service assembly realizes data bidirectional binding through a v-model method of vue, so that data in vue assembly 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 official part of the antvX6 flow diagram only has a return component support library and does not have a general vue component library, so that the antvX6 does not have corresponding vue component library expansion; moreover, the number of developers using the vue technology is huge, and in some service scenes, corresponding flow chart control functions also need to be used; therefore, the traditional canvas mode generation node not only has low development efficiency, but also cannot support some complex business logics.
Currently, the vue component can be placed on the node of the flow chart by using an X6-vue-shape extended library of an X6 flow chart, but the scheme has the following defects: the vue component nodes generated by the extension 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 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 need 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 an assembly packaging method for 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 the 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 the 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 the virtual vue assembly through a template method of vue, wherein the virtual vue assembly refers to the actual service assembly and carries out assignment through a components method of vue, and the actual service assembly realizes data bidirectional binding through a v-model method of vue, so that data in the vue assembly node can be synchronized to a data structure of the flow chart, thereby obtaining a vue assembly node for realizing data binding, and enabling the vue assembly node to 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 entry of the abstract function includes a graph object that needs to be added to the node and a data object that needs to be initialized to the node.
Preferably, in step S4, the virtual vue component generates logic by abstractly encapsulating corresponding nodes, and generates dynamic nodes in batch by directly calling the abstractly encapsulated node generation logic of the virtual vue component.
Preferably, in step S5, the template method of vue specifically includes: and (5) taking the html code of the corresponding node as a character string and transmitting the html code into a template attribute of the 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 then converts the abstract lexical tree into an executable code.
The present invention also provides an assembly packaging system of an X6 flow chart, the system comprising:
an actual service component module: 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 the vue framework,
an abstract function module: the method comprises the steps that an abstract function is constructed for the same type of flow chart nodes, parameters of the abstract function are configured, a virtual vue component is constructed according to the constructed abstract function, corresponding node generation logic is abstractly packaged, and then an actual service component is mounted inside the virtual vue component;
an assignment module: the method comprises the steps that a template and a style inside a virtual 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 data bidirectional binding module: and the v-model method for the actual service component realizes data bidirectional binding through the vue, so that data in the vue component node can be synchronized to the 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 invention provides a vue assembly convenient to use for developers, and is used for realizing graph analysis application or graph editor application built based on vue foundation, so that the developers are assisted to quickly and conveniently build corresponding application, development threshold can be reduced, and development efficiency is improved;
compared with the 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, and on the other hand, the internal data of the vue component node can be exported, so that 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 size, with 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 technical solutions of the present invention are further described in detail with reference to the drawings and specific embodiments so that those skilled in the art can better understand the present invention and can implement the present invention, but the embodiments are not limited to the present invention.
As shown in fig. 1 and fig. 2, in one aspect, the embodiment of the present invention provides an assembly packaging method of 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 the vue framework; in actual business, besides ordinary common flow chart nodes (a pure word expression and no interactive scene), 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 the virtual vue component, thereby obtaining 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 the virtual vue assembly through a template method of vue, wherein the virtual vue assembly refers to the actual service assembly and carries out assignment through a components method of vue, and the actual service assembly realizes data bidirectional binding through a v-model method of vue, so that data in the vue assembly node can be synchronized to a data structure of the flow chart, thereby obtaining a vue assembly node for realizing data binding, and enabling the vue assembly node to be applied to corresponding service scenes.
And for the service component, monitoring an input event of the DOM element at the outermost layer, and assigning the value of $ event. And when the outer-layer variable is modified, triggering a set method in object. Thus, data within the vue component nodes 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 main data of a flow chart in real time through a data bidirectional binding model of vue, so that multi-node data linkage and other outer-layer component data linkage 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 synchronously rendered simply, 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 dynamic component is created by using the method, the same basic meta-component can be used for the same type of nodes, and the corresponding node component can be created as if the vue component is normally created, and the component contains the corresponding life cycle of the normal 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 from each other and cannot interfere with each other, and the data change in other nodes cannot be influenced by operating single node data change, so that the components can be dynamically independent from 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 entry of the abstract function includes 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 nodes 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 example, when the whole data of the flow chart is stored and cached, the internal data of the nodes 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: and (5) taking the html code of the corresponding node as a character string and transmitting the html code into a template attribute of the 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 an assembly packaging system of an X6 flow chart, the system comprising:
an actual service component module: 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 the vue framework,
an abstract function module: the method comprises the steps that an abstract function is constructed aiming at the same type of flow chart nodes, parameters of the abstract function are configured, a virtual vue component is constructed according to the constructed abstract function, corresponding nodes are abstractly packaged to generate logic, and then an actual service component is mounted inside the virtual vue component;
an assignment module: the method comprises the steps that a template and a style inside a virtual 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 data bidirectional binding module: and the v-model method for the actual service component realizes data bidirectional binding through the vue, so that data in the vue component node can be synchronized to the 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 comprises a function parameter module, and the function parameter module comprises a graph object which needs to add the node of the flow chart and a data object which needs to be initialized to the node of the flow chart.
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 is not intended to limit the scope of the present invention, and all equivalent structures or equivalent processes performed by the present invention or directly or indirectly applied to other related technical fields are also included in the scope of the present invention.
Claims (9)
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 the 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 the virtual vue component to obtain a corresponding vue component node with the actual service component;
s5, constructing a rendering template and a style inside the virtual vue assembly through a template method of vue, wherein the virtual vue assembly refers to the actual service assembly and carries out assignment through a components method of vue, and the actual service assembly realizes data bidirectional binding through a v-model method of vue, so that data in the vue assembly node can be synchronized to a data structure of the flow chart, the vue assembly node for realizing data binding is obtained, and the vue assembly node can be applied to corresponding service scenes.
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 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.
3. The method according to claim 1, wherein in step S3, the function entries of the abstract functions include a graph object that needs to be added to the node, and a data object that needs to be initialized to the node.
4. The method according to claim 1, wherein in step S4, the virtual vue component abstractly encapsulates the corresponding node generation logic, and the dynamic nodes are generated in batch by directly calling the node generation logic abstractly encapsulated by the virtual vue component.
5. The method of claim 1, wherein in step S5, the template method of vue specifically includes: 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 specification by the compiler, optimizing the abstract lexical tree, and converting the abstract lexical tree into an executable code.
6. An X6 flow diagram component packaging system, the system comprising:
an actual service component module: the system comprises a form, a service module and a service module, wherein the form is used for constructing a corresponding form according to service scene requirements and is packaged into a corresponding actual service component based on a vue framework;
an abstract function module: the method comprises the steps that an abstract function is constructed for the same type of flow chart nodes, parameters of the abstract function are configured, a virtual vue component is constructed according to the constructed abstract function, corresponding node generation logic is abstractly packaged, and then an actual service component is mounted inside the virtual vue component;
an assignment module: the virtual assembly method comprises the steps that a rendering template and a style in a virtual assembly are constructed through a template method of vue, the virtual vue assembly refers to an actual service assembly and is assigned through a components method of vue;
the data bidirectional binding module: and the v-model method for the actual service component realizes data bidirectional binding through the vue, so that data in the vue component node can be synchronized to the data structure of the flow chart.
7. The system of claim 6, wherein the abstract function module further comprises a parameter configuration module, wherein the parameter configuration module comprises 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.
8. The system of claim 6, 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.
9. The system of claim 6, wherein the abstract function modules further comprise a dynamic node generation module that generates dynamic nodes in batches by directly calling the node generation logic encapsulated by the virtual vue component abstraction.
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 true CN115344243A (en) | 2022-11-15 |
| CN115344243B 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) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542450A (en) * | 2018-11-08 | 2019-03-29 | 国网河南省电力公司电力科学研究院 | Transformer station process layer intelligent assembly implementation method and device |
| CN112685011A (en) * | 2020-12-21 | 2021-04-20 | 福建新大陆软件工程有限公司 | 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 |
| CN113760251A (en) * | 2020-11-09 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Form development method and device based on Vue |
| CN113835701A (en) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN113900628A (en) * | 2021-12-09 | 2022-01-07 | 中邮消费金融有限公司 | 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
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542450A (en) * | 2018-11-08 | 2019-03-29 | 国网河南省电力公司电力科学研究院 | Transformer station process layer intelligent assembly implementation method and device |
| CN113760251A (en) * | 2020-11-09 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Form development method and device based on Vue |
| CN112685011A (en) * | 2020-12-21 | 2021-04-20 | 福建新大陆软件工程有限公司 | 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 |
| WO2022141724A1 (en) * | 2020-12-31 | 2022-07-07 | 南威软件股份有限公司 | Visual configuration rendering method and system based on vue componentization, and terminal |
| CN113835701A (en) * | 2021-09-22 | 2021-12-24 | 上海妙一生物科技有限公司 | Code generation method and device based on componentization |
| CN113900628A (en) * | 2021-12-09 | 2022-01-07 | 中邮消费金融有限公司 | Vue-based multi-page label instance caching method |
| CN114968220A (en) * | 2022-06-10 | 2022-08-30 | 浪潮软件科技有限公司 | Dynamic portal design method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115344243B (en) | 2023-02-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6385661B1 (en) | System and method for dynamic generation of remote proxies | |
| CN102609248B (en) | Integrated avionics system modeling and simulation platform based on MDA (model driven architecture) | |
| CN101840334B (en) | Software component service packaging method | |
| US8074201B2 (en) | Deployment and execution of a program on an embedded device | |
| CN101477461A (en) | Dynamic generation apparatus and method for application program interface | |
| CN109947422B (en) | Business entity implementation method and system based on domain-driven design | |
| WO2002061576A2 (en) | System, method and article of manufacture for interface constructs in a programming language capable of programming hardware architectures | |
| KR20040096577A (en) | Component model for real time system control | |
| JPH08115209A (en) | System and method for creation of source code | |
| CN102566984B (en) | Method and device for configuring parameters | |
| CN111507020A (en) | Graphical display method for distributed simulation results of electromechanical systems of multi-electric aircraft | |
| CN102141991A (en) | Method and system for web server | |
| CN113312046A (en) | Sub-application page processing method and device and computer equipment | |
| CN105468793A (en) | Automated management method for simulation model data | |
| CN104063231B (en) | Test resource rapid access method based on HIT-TENA | |
| CN117539490B (en) | Low-code engine page rendering method and system running at browser end | |
| 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 | |
| CN115758789A (en) | Software architecture design and architecture transmission method of complex real-time embedded system | |
| CN114168151B (en) | Container-based program compiling method and device, electronic equipment and storage medium | |
| 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 | |
| CN100405293C (en) | Dot matrix graphic interface development method |
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 |