Method and system for realizing process dynamic visual view under final assembly link of manufacturing industry

Abstract

The invention belongs to the technical field of production and manufacturing industry data processing, and discloses a method and a system for realizing a process dynamic visual view under a final assembly link of the manufacturing industry. The method comprises the steps of performing structural data arrangement on process relation data, and establishing a data structural body; on the basis of the established data structure body, a process relation graph is constructed through a process node implementation method; according to the constructed process relation graph, through a process path SVG implementation method, obtaining an SVG path with added attributes; and on the basis of the obtained SVG path with the added attributes, a method of manually setting a process path is utilized, a user manually sets and relieves the process path according to the dependency relationship between the processes, the adjusted relationship data between the processes is stored, and the processes are dynamically and visually shown. The method is of great significance to intuitively understanding the production process, improving the training efficiency and quality, improving the decision-making efficiency and optimizing the resource configuration through the accuracy of the process relation graph.

Description

Technical Field

[0001] The present invention belongs to the technical field of data processing in manufacturing industry, and in particular to a method and system for realizing dynamic visualization view of working procedures in final assembly link of manufacturing industry. Background Art

[0002] In the large-scale equipment manufacturing industry, the final assembly process is the last step in product production, and its efficiency and quality are directly related to the output of the entire production line and the market competitiveness of the enterprise. The accurate expression and optimization of process relationships are of great significance for improving production efficiency, reducing production costs, and optimizing resource allocation. With the continuous development of information technology, visualization technology has become a powerful tool for expressing and analyzing process relationships. At the same time, dynamic process visualization, as a new management method, enables managers and operators to intuitively understand the production process, thereby achieving precise control and optimization of the production process.

[0003] Through the above analysis, the problems and defects of the existing technology are: the existing technology cannot effectively realize the rapid generation and clear display of process relationship diagrams; the precise control and optimization effect of the production process is poor. Summary of the invention

[0004] In order to overcome the problems existing in the related art, the disclosed embodiments of the present invention provide a method and system for realizing a dynamic visualization view of a process in the final assembly link of a manufacturing industry, and specifically relate to a method for realizing a dynamic visualization view of a process in the final assembly link of a large-scale equipment manufacturing industry. The purpose of the present invention is to combine SVG (scalable vector graphics) with the optimal display method, and propose a new method for optimizing process relationship drawing. By realizing the visualization expression of process relationships through SVG, complex process relationships can be presented to users intuitively and clearly, which is conducive to improving the production managers' cognition and understanding of the production process, and more quickly discovering problems and making adjustments.

[0005] The technical solution is as follows: A method for realizing a dynamic visualization view of a process in a manufacturing assembly link includes the following steps: S1, arranging the structure data of the process relationship data, and establishing a data structure including the process, the minimum work unit, the relationship between the process, the relationship between the process and the minimum work unit, and the relationship between the minimum work unit and the minimum work unit; S2, based on the established data structure, construct a process relationship diagram through a process node implementation method; S3, according to the constructed process relationship diagram, obtain the SVG path with added attributes through the process path SVG implementation method; S4, based on the obtained SVG path with added attributes, using the method of manually setting the process path, the user manually sets and releases the dependency relationship between the processes, saves the adjusted relationship data between the processes, and dynamically visualizes the processes.

[0006] In step S1, the data structure is divided into process data, process relationship data, and minimum work unit relationship data; wherein the process data includes a unique key, process name, process number, process location, and minimum work unit data under the process; the minimum work unit under the process includes a unique key and a minimum work unit name, and the unique key is process name-minimum work unit ID; The process relationship data includes the name of the previous process and the name of the next process; The minimum work unit relationship contains the first minimum work unit unique key and the second minimum work unit unique key.

[0007] In step S2, the method for implementing the process node includes: (a) Use HTML and CSS to define the layout and appearance of the process nodes, and use JSON structured data to present specific and unique processes and minimum work units; (b) Bind the interface view to the JSON structure data bidirectionally. Figure 1 Once the data changes, the JSON structure data will be updated accordingly; once the JSON structure data changes, the interface view will be updated accordingly; (c) Create a SimpleDataBinding instance and implement two-way binding between data and the interface by monitoring data changes, creating document fragments, binding data nodes, and re-rendering.

[0008] Furthermore, the method for implementing the process node also includes: Use HTML table tags to generate layer DIV tags according to the data structure process data to represent each process node, add custom data attributes data-pid and data-uid to bind with the data, and determine the process relationship between the previous process and the next process; bind draggable events and right-click to associate or disconnect the previous and next process events to complete the operation of the subsequent process relationship; add process node elements to TD, add custom data attributes data-row to TD to represent rows, and data-col to TD to represent columns.

[0009] Furthermore, the data structure of the process node element uses the procedures object array, in which the id in the object array indicates uniqueness, the name shows the process name, and the position shows the process position; the units object array indicates the minimum work unit information under the process, the id is the unique key, and the name shows the minimum work unit information; The process nodes without process relationship use the temporary storage area in the process relationship diagram to adjust the process sequence, store the process nodes without process relationship in the process temporary storage area, adjust the exchanged process nodes to the position of the original process nodes, and then adjust the original process nodes to the position of the exchanged nodes; add draggable attributes to the process element nodes and bind drag events to complete the functions of process temporary storage and process sequence change.

[0010] In step S3, after the process relationship graph is constructed by the process node implementation method, the data structure of the process path is represented as follows: prelation represents an object array, head represents the previous process, and tail represents the next process; the data structure of the minimum work unit is urelation, head represents the previous minimum work unit, and tail represents the next minimum work unit; The process path SVG implementation method includes: (S3.1) The order of the processes is confirmed through the head and tail of the process data in the data structure, and then the position of the process is calculated to obtain its coordinate data; then the position of the minimum operation unit is obtained according to the relationship between the process and the minimum operation unit, and its coordinate data is obtained; the SVG path is drawn according to the process data before and after the process and the minimum operation units before and after the minimum operation unit; (S3.2) svg adds corresponding attributes, wherein the corresponding attributes include: id represents the uniqueness of the process or the minimum working unit, the value bound to data-hid is the id of the previous process or the previous minimum working unit, and the value bound to data-tid is the id of the next process or the next minimum working unit.

[0011] In step S4, the method of manually setting the process path includes: S401, there is a direct dependency between two processes, one process is directly connected to another process without going through other processes, and the created <path>Add to the SVG path to generate a direct path; S402, generate a path through cross-node direct connection, and create <path>Add to SVG path; S403, adding a new connection line to represent a cross-connection direct connection, so that the connection paths are superimposed.

[0012] In step S401, a direct connection path is generated, including: Identify direct connection relationship: When the relative position of a process and another process on the web page is determined to be the same height and adjacent to each other, a direct connection relationship is determined; Construct a direct optimal path display method: if two adjacent processes are on the same horizontal line, a straight line is the optimal path display method; <path>The required M value includes the Y value, which is the width of the relative position of the end of the starting process node, and the X value, which is the height of the relative position of the middle position of the starting process node; the end of a process node is <path>The Y value of the starting position of the required L value, the middle position of the horizontal coordinate of the process node is used as <path>The X value of the starting position of the required L value; The beginning of another process node is <path>The Y value of the end position of the required L value, the middle position of the horizontal coordinate of the sequence node is used as <path>The X value of the end position of the required L value; Will create <path>Add to SVG to generate direct paths.

[0013] In step S402, a path is generated by directly connecting across nodes, including: Identify cross-node direct connection: When the relative position of a process and another process on the web page is determined to be the same height between the two processes, and the positions are not adjacent, then it is determined to be a cross-node direct connection; Build cross-node direct connection: For two non-adjacent processes that are on the same horizontal line, it is necessary to build a broken line as the optimal path display method to link the two processes. <path>The required M value includes the width of the Y value relative to the end of the starting process node, and the height of the X value relative to the middle of the starting process node; the cross-node direct connection includes at least 5 line segments, including: The first one is the end of a process node. <path>The Y value of the starting position of the required L value, the middle position of the horizontal coordinate of the process node is used as <path>The X value of the starting position of the required L value; the average distance of the horizontal coordinates between the two processes plus the relative position of the end of a process node is taken as the Y value of the target position of the L value, and the middle position of the horizontal coordinate of the process node is taken as <path>The X value of the target position of the required L value; The second one is the target X value of the first one, the target Y value of the first one is the starting position's X value, and the target Y value of the first one is the starting position's Y value, and also the target position's Y value; and the target position's X value is the average of the relative position height of the process node's middle position, the fixed height, and the process node height; The third target X value is the X value of the starting position of the second target, and is also the X value of the target position; the second target Y value is the Y value of the starting position; and the Y value of the target position is the left value of the relative position of the end of another process; The starting position of the fourth item is the same as the target position of the third item. The X value of the target value is the X value of the starting position, and the Y value is the Y value of the target position, which is the Top value of the relative position of the head of another process - the fixed height. The starting position of the fifth item is the same as the target position of the fourth item. The Y value of the target value is the Y value of the starting position, and the X value is the left value of the relative position of the head of the target process node. The above completes the cross-node direct connection and generates a path.

[0014] Another object of the present invention is to provide a system for realizing dynamic visualization view of processes in the final assembly link of manufacturing industry, which is realized by the method for realizing dynamic visualization view of processes in the final assembly link of manufacturing industry, and the system comprises: The process relationship diagram data preparation module is used to organize the process relationship data structure and establish a data structure including processes, minimum work units, the relationship between processes, the relationship between processes and minimum work units, and the relationship between minimum work units and minimum work units; A process node realization module is used to construct a process relationship diagram based on the established data structure through a process node realization method; The process path SVG implementation module is used to obtain the SVG path with added attributes through the process path SVG implementation method according to the constructed process relationship diagram; The process path setting module is used to manually set and release the dependency relationship between processes based on the acquired SVG path with added attributes, save the adjusted relationship data between processes, and dynamically visualize the processes.

[0015] Combined with all the above technical solutions, the beneficial effects of the present invention are as follows: through the rapid generation and clear display of the process relationship diagram, the production management personnel can intuitively understand the production process under the assembly link of the large-scale equipment manufacturing industry, quickly identify the bottlenecks and problems in production, and thus make timely adjustments to improve production efficiency. A clear process relationship diagram helps decision makers quickly grasp the overall situation of production, optimize the allocation of production resources, and improve decision-making efficiency and accuracy. As training materials, the process relationship diagram can intuitively display the various links in the production process and their interrelationships, so that new employees can become familiar with and master the production process more quickly and improve training efficiency. Through functions such as dragging processes, adding or changing process relationship paths, trainers can flexibly simulate different production scenarios, enhance the interactivity and practicality of training, and improve the quality of training. An accurate process relationship diagram helps enterprises discover waste and redundant links in the production process. By optimizing these links, enterprises can use resources more effectively and reduce production costs. At the same time, the process relationship diagram can also be used as a basis for resource allocation to ensure the rational allocation and efficient use of production resources. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The accompanying drawings herein are incorporated in and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description, serve to explain the principles of the present disclosure; Figure 1 It is a process relationship construction flow chart provided by an embodiment of the present invention; Figure 2 It is a diagram of a method for realizing a dynamic visualization view of a process in a manufacturing assembly link provided by an embodiment of the present invention; Figure 3 It is an overall flow chart of the process node implementation provided by the embodiment of the present invention; Figure 4 is a flowchart of the process path SVG implementation provided by an embodiment of the present invention; Figure 5 is a flow chart of a manually set process path provided by an embodiment of the present invention; Figure 6 It is a schematic diagram of a process path connection method provided by an embodiment of the present invention; Figure 7 It is a schematic diagram of a system for realizing a dynamic visualization view of a process in a final assembly link of a manufacturing industry provided by an embodiment of the present invention; In the figure: 1. Process relationship diagram data preparation module; 2. Process node implementation module; 3. Process path SVG implementation module; 4. Process path setting module. DETAILED DESCRIPTION

[0017] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein, and those skilled in the art can make similar improvements without violating the connotation of the present invention, so the present invention is not limited by the specific implementation disclosed below.

[0018] Example 1: Products in large-scale equipment manufacturing industry are often complex in structure, involving different materials, processes and technologies. Therefore, highly precise and meticulous operations are required in the final assembly process to ensure that the components can be assembled together accurately and firmly. At the same time, with the diversity of market demand, products in large-scale equipment manufacturing industry are increasingly inclined to personalized customization. This requires the final assembly process to be able to flexibly adjust according to the specific needs of customers to meet the assembly requirements of different products.

[0019] As crucial parts of the final assembly process, processes and minimum work units ensure the continuity and integrity of the product through correct and clear presentation of processes, minimum work units, and process relationships.

[0020] Modern production systems often include a large number of processes, and these processes form an intricate network relationship. Each process may have dependencies on multiple other processes, which increases the complexity of the problem. At the same time, the production environment is constantly changing, and factors such as equipment failure, raw material shortages, and personnel changes may lead to adjustments to production plans. This dynamic nature means that the originally planned path may no longer be applicable due to changes in the production environment, and it needs to be recalculated and adjusted.

[0021] The overall process of building process relationships involves all aspects from demand analysis to implementation. Figure 1 , the process relationship realization is divided into data preparation, automatic drawing of process relationship diagram, user manual setting of process relationship, user adjustment of process sequence, and finally saving process relationship data.

[0022] Example 2, as another embodiment of the present invention, Figure 2 As shown, the method for realizing the dynamic visualization view of the process in the final assembly link of the manufacturing industry provided by the embodiment of the present invention includes: S1, arranging the structure data of the process relationship data, and establishing a data structure including the process, the minimum work unit, the relationship between the process, the relationship between the process and the minimum work unit, and the relationship between the minimum work unit and the minimum work unit; S2, based on the established data structure, construct a process relationship diagram through a process node implementation method; S3, according to the constructed process relationship diagram, obtain the SVG path with added attributes through the process path SVG implementation method; S4, based on the obtained SVG path with added attributes, using the method of manually setting the process path, the user manually sets and releases the dependency relationship between the processes, saves the adjusted relationship data between the processes, and dynamically visualizes the processes.

[0023] Exemplarily, step S1 specifically includes: preparing process relationship diagram data. Before constructing the process relationship diagram, it is necessary to organize the process relationship data into structural data and establish a data structure including processes, minimum working units, relationships between processes, relationships between processes and minimum working units, and relationships between minimum working units and minimum working units.

[0024] The data structure is divided into three parts: process data, process relationship data, and minimum work unit relationship data. The process data includes a unique key, process name, process number, process location, and minimum work unit data under the process. The minimum work unit under the process includes a unique key (process name-minimum work unit ID) and a minimum work unit name. The process relationship data includes the name of the previous process and the name of the next process. The minimum work unit relationship includes the unique key of the previous minimum work unit and the unique key of the next minimum work unit. The overall structure of the data structure is fixed, but the content of the structure can be adjusted according to different businesses. The exemplary data structure code is: { procedures:[{ code:”Process number”, id: "unique key", name:"Process name", position: "process position", units:[{ id: "unique key", name: "Minimum work unit name" }], prelation:[{ head: "previous process unique key", tail: "Unique key for the subsequent process" }], urelation:[{ head: "the unique key of the previous minimum operation unit", tail: "The smallest unit unique key after" }], }] } Exemplarily, the method for implementing the process node of step S2 includes: Use HTML and CSS to define the layout and appearance of the process nodes, and use JSON structure data to present the specific and unique process and the smallest work unit; bind the interface view to the JSON structure data in a two-way manner, that is: Figure 1 Once the data changes, the JSON structure data is updated accordingly; when the JSON structure data changes, the interface view is updated accordingly. Create a SimpleDataBinding instance, and implement two-way binding between data and interface by monitoring data changes, creating document fragments, binding data nodes, executing, and re-rendering.

[0025] Among them, HTML attributes always appear in the start tag of HTML elements, and are used to provide additional information about HTML elements or specify the behavior of elements. However, HTML attributes are limited, and common attributes include id, class, style, title, and tabindex. In cases where they cannot meet the needs, custom data attributes (data-) are also provided. For example, data-pid=”process unique key”.

[0026] Use common HTML table tags to generate layer (DIV) tags according to the data structure process data to represent each process node, add custom data attributes such as data-pid and data-uid to bind with the data to determine the process relationship between the previous process and the next process. At the same time, bind the draggable event and right-click to associate or disconnect the previous and next process events to complete the operation of the subsequent process relationship. Add the process node element to TD, and add custom data attributes data-row to TD to represent rows and data-col to represent columns.

[0027] The process node data structure uses the procedures object array, where the id in the object array indicates uniqueness, the name shows the process name, and the position shows the process position. The units object array indicates the minimum work unit information under the process, the id is the unique key, and the name shows the minimum work unit information.

[0028] The process nodes without process relationship can use the temporary storage area in the process relationship diagram to adjust the process order. Drag the process node without process relationship and place it in the process temporary storage area. Drag the process node to be exchanged to the position of the original process node, and then drag the original process node to the position of the exchange node. Add draggable attributes to the process element node and bind the drag event to complete the process temporary storage and process order change functions.

[0029] It is understandable that the present invention is not implemented using a mainstream framework, but rather a customized monitoring data model and view update class. The traditional manufacturing industry may have some old terminals, and the mainstream framework may not support some old browsers well.

[0030] Exemplarily, the method for implementing the process path SVG in step S3 includes: Figure 4 shown.

[0031] Compared with the traditional use of DOM to draw, SVG, as an XML-based vector graphics language, can be enlarged or reduced without loss of quality, which is very suitable for scenes that require high-quality graphics and has high editability and flexibility. <path>Element drawing process paths are a very powerful and flexible way to use SVG. <path>The element allows complex shapes to be drawn, including straight lines, broken lines, arrows, etc., by defining a series of commands and parameters. These commands and parameters are contained in the d attribute. The instructions of the d attribute include M or m, L or l, H or h, V or v, etc. This invention briefly introduces the SVG attributes used, namely M or m, L or l.

[0032] M or m: moveTo, moves the brush to the specified coordinates. Capital M indicates absolute positioning, and lowercase m indicates relative positioning relative to the current position.

[0033] L or l: lineTo, draw a straight line from the current position to the specified coordinates. Similarly, uppercase L indicates absolute positioning, and lowercase m indicates relative positioning relative to the current position.

[0034] After the process node is realized, the data structure of the process path (process relationship) is represented as: prelation represents an object array, head represents the previous process, and tail represents the next process; the data structure of the minimum work unit is urelation, head represents the previous minimum work unit, and tail represents the next minimum work unit. (Through the head and tail of the process data in the data structure, the order of the processes is confirmed, and then the position of the process is calculated to obtain its coordinate data. Then, according to the relationship between the process and the minimum work unit, the position of the minimum work unit is obtained, and its coordinate data is obtained. Draw the svg path based on the process data before and after the process and the minimum work unit before and after the minimum work unit. At the same time, add corresponding attributes to svg, and the corresponding attributes include: id represents the uniqueness of the process or the minimum work unit, the value bound to data-hid is the id of the previous process or the previous minimum work unit, and the value bound to data-tid is the id of the next process or the next minimum work unit to ensure subsequent operations.

[0035] like Figure 4 The path instruction for drawing SVG can be followed by multiple parameters. For example, id represents the uniqueness of the process or minimum work unit, the value bound to data-hid is the id of the previous process or the previous minimum work unit, and the value bound to data-tid is the id of the next process or the next minimum work unit. These attributes are used to bind to the listening data model.

[0036] Exemplarily, the method of manually setting the process path in step S4 includes: In order to reduce the chaos in the production process, balance the production load between the processes, avoid certain processes becoming bottlenecks that hinder production, reduce resource waste, and ensure product quality, it is necessary to manually set and release the process path to adapt to production changes. At the same time, you can also put the process into the temporary storage area to adjust the process order when there is no relationship between the processes.

[0037] Manual process path setting usually involves dependencies between processes, that is, one process must be completed before or after another process. In this case, the user needs to set this dependency. The operation process is as follows: Open the web page containing the process and the minimum work unit.

[0038] Select a process to be associated: On the web page, the user selects the process by clicking on it and it is highlighted.

[0039] Set the previous process or the next process: Select "Set previous process" or "Set next process" in the pop-up menu when you right-click the process.

[0040] Select another process that needs to be associated: Select the process that needs to be associated on the web page to set the association relationship.

[0041] The above settings are completed and you can view the process path. If the settings are incorrect, you can also clear the current process relationship.

[0042] Specifically, the manual process path setting process is as follows: Figure 5 shown.

[0043] Specifically include: S401, direct connection: A direct connection relationship usually indicates that there is a direct dependency between two processes, that is, one process can be directly connected to another process without going through other processes.

[0044] Under direct connection, the construction of the optimal path representation is relatively simple, because the path only contains directly adjacent edges. For a given starting process and target process, there is a direct path, and this direct path is the optimal path representation.

[0045] Identify direct connection relationship: When the relative position of one process and another process on the web page is determined to be the same height and adjacent to each other, a direct connection relationship is determined.

[0046] Construct a direct optimal path display method: if two adjacent processes are on the same horizontal line, a straight line is the optimal path display method. Figure 6 The path line in the process path connection method is shown as follows. <path>The required M value includes the width of the Y value, which is the relative position of the end of the starting process node, and the height of the X value, which is the relative position of the middle of the starting process node. <path>The Y value of the starting position of the required L value, the middle position of the horizontal coordinate of the process node is used as <path>The X value of the starting position of the desired L value.

[0047] The beginning of another process node is <path>The Y value of the end position of the required L value, the middle position of the horizontal coordinate of the sequence node is used as <path>The X value of the desired ending position of the L value.

[0048] Will create <path>Add to SVG to generate direct paths.

[0049] S402, cross-node direct connection: cross-node direct connection refers to a direct dependency relationship established between two process nodes that are not directly adjacent in the process relationship due to some reason or demand. In the traditional process flow, the processes are usually carried out in a predetermined order and dependency relationship, that is, the next process can only be started after one process is completed. However, in some cases, in order to optimize the process, improve efficiency or meet special needs, it may be necessary to skip some intermediate processes to establish a direct connection between the originally non-adjacent processes.

[0050] Identify cross-node direct connections: When the relative positions of one process and another process on the web page are determined to be the same height and the positions are not adjacent, a cross-node direct connection is determined.

[0051] Build cross-node direct connection: For two non-adjacent processes that are on the same horizontal line, you need to build a broken line as the optimal path display method to connect the two processes, such as Figure 6 The process path connection method is shown as line Path2. <path>The required M value includes the width of the Y value, which is the relative position of the end of the starting process node, and the height of the X value, which is the relative position of the middle position of the starting process node.

[0052] A direct connection across nodes requires at least five line segments, including: The first one is the end of a process node. <path>The Y value of the starting position of the required L value, the middle position of the horizontal coordinate of the process node is used as <path>The X value of the starting position of the required L value. The average distance of the horizontal coordinates between the two processes plus the relative position of the end of a process node is taken as the Y value of the target position of the L value, and the middle position of the horizontal coordinate of the process node is taken as <path>The X value of the target position for the desired L value.

[0053] The second target X value is the X value of the starting position, and the first target Y value is the Y value of the starting position, and also the Y value of the target position. The X value of the target position is the average value of the height of the relative position of the middle position of the process node - the fixed height (border and outer margin, inner margin) - the height of the process node.

[0054] The third line is the X value of the second target X value of the starting position, and the second target Y value is the Y value of the starting position. The Y value of the target position is the left value of the relative position of the end of another process.

[0055] The starting position of the fourth item is the same as the target position of the third item. The X value of the target value is the X value of the starting position, and the Y value is the Y value of the target position, which is the Top value of the relative position of the head of another process - fixed height (border and outer margin, inner margin).

[0056] The starting position of the fifth item is the same as the target position of the fourth item. The Y value of the target value is the Y value of the starting position, and the X value is the left value of the relative position of the head of the target process node.

[0057] The above completes the cross-node direct connection and generates the path. <path>Add to SVG.

[0058] S403, cross-line direct connection: In the process relationship, two process nodes that are not directly adjacent or even not in the same dimension are connected due to some special requirements or optimization. This connection is complex and may go through multiple processes in the middle. One process connects multiple processes. Figure 6 As shown by the path3 line in the process path connection method, new lines are added to indicate direct connection across lines. Not only on the same horizontal line, the processes may be distributed in various positions, which may cause the connection paths to overlap.

[0059] The difference between cross-line direct connection and cross-node direct connection is that one of the cross-line direct connection is that the starting process is above the target process; the other is the opposite; this requires a comparison between the starting position and the target position.

[0060] In short, as an advanced technical means in the final assembly link of large-scale equipment manufacturing industry, the dynamic visualization view of the process can intuitively display the relationship between processes. By analyzing it, users can operate and explore the process relationship diagram more flexibly, and further deepen their understanding of the process relationship. It provides a clear and accurate decision-making basis for production managers. The present invention can be applied in more fields, bringing more convenience and value to the production and management of enterprises.

[0061] Embodiment 3, as Figure 7 As shown, a system for realizing dynamic visualization view of processes in the final assembly link of manufacturing industry includes: The process relationship diagram data preparation module 1 is used to organize the process relationship data structure and establish a data structure including processes, minimum work units, relationships between processes, relationships between processes and minimum work units, and relationships between minimum work units and minimum work units; A process node realization module 2 is used to construct a process relationship diagram through a process node realization method based on the established data structure; The process path SVG implementation module 3 is used to obtain the SVG path with added attributes through the process path SVG implementation method according to the constructed process relationship diagram; The process path setting module 4 is used to manually set and release the process path based on the acquired SVG path with added attributes, so that the user can manually set and release the process path for the dependency relationship between the processes, save the adjusted relationship data between the processes, and dynamically visualize the processes.

[0062] The technical solution of the present invention provides an advanced visualization tool for the final assembly of large-scale equipment manufacturing industry, which helps to promote technological innovation and industrial upgrading in the industry. With the continuous development of technology and the expansion of application scenarios, process relationship diagram drawing tools can be further integrated with other technologies (such as artificial intelligence, big data, etc.) to provide enterprises with more comprehensive and intelligent production management solutions. The present invention proposes an innovative process relationship drawing method based on SVG (scalable vector graphics), which can clearly show the relationship between various links in the production process under the final assembly of large-scale equipment manufacturing industry.

[0063] The present invention implements a process relationship diagram drawing tool, which supports interactive operations such as dragging processes, adding or changing process relationship paths, etc. The implementation of this tool makes the drawing of process relationship diagrams more intuitive and convenient, greatly improving the drawing efficiency and accuracy. This is also an efficient tool that was previously lacking in the industry.

[0064] In the final assembly of large-scale equipment manufacturing industry, the visualization of processes and process relationships has always been a complex and critical issue. Traditional visualization methods often have difficulty in dealing with large-scale, complex and dynamically changing data sets, resulting in low efficiency in drawing process relationship diagrams and the inability to guarantee accuracy. The technical solution of the present invention proposes a process relationship drawing method based on SVG and implements a process relationship diagram drawing tool. This method not only supports interactive operations such as user dragging processes, adding or changing process relationship paths, but also ensures that the process relationship diagram maintains clarity and accuracy during operations such as zooming and panning.

[0065] In the process of technology research and development, the embodiments of the invention solve problems that are difficult to overcome in the prior art through innovative methods or technical paths. This innovation is not only reflected in breakthroughs at the technical level, but also in the in-depth understanding and grasp of the essence of the problem. By introducing new technical concepts or optimizing the existing technical framework, the embodiments of the invention successfully improve the performance and efficiency of the technology and make important contributions to the technological progress in related fields.

[0066] Secondly, during use, the embodiments of the present invention have shown extremely high stability and reliability. This is due to the fact that various complex factors in actual application scenarios were fully considered at the beginning of its design, and targeted optimization was carried out. Therefore, in actual applications, the embodiments of the present invention can stably perform the expected functions, effectively reduce the failure rate and maintenance costs, and improve user satisfaction and trust.

[0067] Compared with the prior art, the advantages of the embodiments of the present invention are mainly reflected in the following aspects: ‌Technological innovation‌: The embodiments of the present invention adopt a brand-new technical idea or method, breaking the limitations of traditional technology and achieving a technological leap. This innovation is not only reflected in the innovation of the technical level, but also in the fundamental change of the problem-solving method, thus bringing a more efficient and convenient technical experience.

[0068] ‌Performance Improvement‌: By optimizing the technical framework and algorithm, the embodiments of the present invention have achieved significant performance improvements. Whether in terms of processing speed, accuracy or stability, they have made significant progress compared to the existing technology. This performance improvement makes the embodiments of the present invention more capable of handling complex tasks or high-demand scenarios.

[0069] ‌Cost reduction‌: In the process of research and development and use, the embodiments of the present invention effectively reduce costs by optimizing resource allocation and reducing energy consumption. This cost reduction is not only reflected in direct economic benefits, but also in increasing the popularity and application scope of technology, so that more people can enjoy the convenience brought by technology.

[0070] ‌User Experience Optimization‌: The embodiments of the present invention fully consider the needs and habits of users when designing, and greatly improve the user experience by optimizing the interface design, improving the interactive experience, etc. This optimization makes the user more relaxed and pleasant during use, thereby enhancing the user's dependence on and loyalty to the technology.

[0071] In summary, the embodiments of the present invention have achieved significant positive effects in the process of research and development and use, and have obvious advantages over the prior art. These advantages and positive effects are not only reflected in technical innovation, performance improvement, cost reduction and user experience optimization, but also in making important contributions to the technological progress and application promotion in related fields.

[0072] The above description is only a preferred specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any modifications, equivalent substitutions and improvements made by any technician familiar with the technical field within the technical scope disclosed by the present invention and within the spirit and principles of the present invention should be covered within the protection scope of the present invention.< / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path> < / path>

Claims

1. A method for realizing dynamic visualization of processes in the final assembly link of manufacturing industry, characterized in that: The method comprises the following steps: S1, arranging the structure data of the process relationship data, and establishing a data structure including the process, the minimum work unit, the relationship between the process, the relationship between the process and the minimum work unit, and the relationship between the minimum work unit and the minimum work unit; S2, based on the established data structure, construct a process relationship diagram through a process node implementation method; S3, according to the constructed process relationship diagram, obtain the SVG path with added attributes through the process path SVG implementation method; S4, based on the obtained SVG path with added attributes, using the method of manually setting the process path, the user manually sets and releases the dependency relationship between the processes, saves the adjusted relationship data between the processes, and dynamically visualizes the processes.

2. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 1 is characterized in that: In step S1, the data structure is divided into process data, process relationship data, and minimum work unit relationship data; wherein the process data includes a unique key, process name, process number, process location, and minimum work unit data under the process; the minimum work unit under the process includes a unique key and a minimum work unit name, and the unique key is process name-minimum work unit ID; The process relationship data includes the name of the previous process and the name of the next process; The minimum work unit relationship contains the first minimum work unit unique key and the second minimum work unit unique key.

3. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 1 is characterized in that: In step S2, the method for implementing the process node includes: (a) Use HTML and CSS to define the layout and appearance of the process nodes, and use JSON structured data to present specific and unique processes and minimum work units; (b) Bind the interface view to the JSON structure data in a two-way manner. Once the interface view changes, the JSON structure data will be updated accordingly; when the JSON structure data changes, the interface view will be updated accordingly. (c) Create a SimpleDataBinding instance and implement two-way binding between data and the interface by monitoring data changes, creating document fragments, binding data nodes, and re-rendering.

4. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 3 is characterized in that: The method of implementing the process node also includes: Use HTML table tags to generate layer DIV tags according to the data structure process data to represent each process node, add custom data attributes data-pid and data-uid to bind with the data, and determine the process relationship between the previous process and the next process; bind draggable events and right-click to associate or disconnect the previous and next process events to complete the operation of the subsequent process relationship; add process node elements to TD, add custom data attributes data-row to TD to represent rows, and data-col to TD to represent columns.

5. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 4 is characterized in that: The data structure of the process node element uses the procedures object array, in which the id in the object array indicates uniqueness, the name shows the process name, and the position shows the process position; the units object array indicates the minimum work unit information under the process, the id is the unique key, and the name shows the minimum work unit information; The process nodes without process relationship use the temporary storage area in the process relationship diagram to adjust the process sequence, store the process nodes without process relationship in the process temporary storage area, adjust the exchanged process nodes to the position of the original process nodes, and then adjust the original process nodes to the position of the exchanged nodes; add draggable attributes to the process element nodes and bind drag events to complete the functions of process temporary storage and process sequence change.

6. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 1 is characterized in that: In step S3, after the process relationship graph is constructed by the process node implementation method, the data structure of the process path is represented as follows: prelation represents an object array, head represents the previous process, and tail represents the next process; the data structure of the minimum work unit is urelation, head represents the previous minimum work unit, and tail represents the next minimum work unit; The process path SVG implementation method includes: (S3.1) The order of the processes is confirmed through the head and tail of the process data in the data structure, and then the position of the process is calculated to obtain its coordinate data; then the position of the minimum operation unit is obtained according to the relationship between the process and the minimum operation unit, and its coordinate data is obtained; the SVG path is drawn according to the process data before and after the process and the minimum operation units before and after the minimum operation unit; (S3.2) svg adds corresponding attributes, wherein the corresponding attributes include: id represents the uniqueness of the process or the minimum working unit, the value bound to data-hid is the id of the previous process or the previous minimum working unit, and the value bound to data-tid is the id of the next process or the next minimum working unit.

7. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 1 is characterized in that: In step S4, the method of manually setting the process path includes: S401, there is a direct dependency between two processes, one process is directly connected to another process without going through other processes, and the created <path> Add to SVG path to generate direct path;< / path> S402, generate a path through cross-node direct connection, and create <path> Add to SVG path;< / path> S403, adding a new connection line to represent a cross-connection direct connection, so that the connection paths are superimposed.

8. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 7 is characterized in that: In step S401, a direct connection path is generated, including: Identify direct connection relationship: When the relative position of a process and another process on the web page is determined to be the same height and adjacent to each other, a direct connection relationship is determined; Construct a direct optimal path display method: if two adjacent processes are on the same horizontal line, a straight line is the optimal path display method; <path>The required M value includes the Y value, which is the width of the relative position of the end of the starting process node, and the X value, which is the height of the relative position of the middle position of the starting process node; the end of a process node is <path>The Y value of the starting position of the required L value, the middle position of the horizontal coordinate of the process node is used as <path> The X value of the starting position of the required L value;< / path> < / path> < / path> The beginning of another process node is <path>The Y value of the end position of the required L value, the middle position of the horizontal coordinate of the sequence node is used as <path> The X value of the end position of the required L value;< / path> < / path> Will create <path> Add to SVG to generate direct paths.< / path> 9. The method for realizing dynamic visualization view of the process in the final assembly link of the manufacturing industry according to claim 7 is characterized in that: In step S402, a path is generated by directly connecting across nodes, including: Identify cross-node direct connection: When the relative position of a process and another process on the web page is determined to be the same height between the two processes, and the positions are not adjacent, then it is determined to be a cross-node direct connection; Build cross-node direct connection: For two non-adjacent processes that are on the same horizontal line, it is necessary to build a broken line as the optimal path display method to link the two processes. <path> The required M value includes the width of the Y value relative to the end of the starting process node, and the height of the X value relative to the middle of the starting process node; the cross-node direct connection includes at least 5 line segments, including:< / path> The first one is the end of a process node. <path>The Y value of the starting position of the required L value, the middle position of the horizontal coordinate of the process node is used as <path>The X value of the starting position of the required L value; the average distance of the horizontal coordinates between the two processes plus the relative position of the end of a process node is taken as the Y value of the target position of the L value, and the middle position of the horizontal coordinate of the process node is taken as <path> The X value of the target position of the required L value;< / path> < / path> < / path> The second one is the target X value of the first one, the target Y value of the first one is the starting position's X value, and the target Y value of the first one is the starting position's Y value, and also the target position's Y value; and the target position's X value is the average of the relative position height of the process node's middle position, the fixed height, and the process node height; The third target X value is the X value of the starting position of the second target, and is also the X value of the target position; the second target Y value is the Y value of the starting position; and the Y value of the target position is the left value of the relative position of the end of another process; The starting position of the fourth item is the same as the target position of the third item. The X value of the target value is the X value of the starting position, and the Y value is the Y value of the target position, which is the Top value of the relative position of the head of another process - the fixed height. The starting position of the fifth item is the same as the target position of the fourth item. The Y value of the target value is the Y value of the starting position, and the X value is the left value of the relative position of the head of the target process node. The above completes the cross-node direct connection and generates a path.

10. A system for realizing dynamic visualization of processes in the final assembly process of manufacturing industry, characterized in that: The system is implemented by the method for realizing the dynamic visualization view of the process in the final assembly link of the manufacturing industry as described in any one of claims 1 to 9, and the system includes: The process relationship diagram data preparation module (1) is used to organize the process relationship data into structural data and establish a data structure including processes, minimum work units, relationships between processes, relationships between processes and minimum work units, and relationships between minimum work units and minimum work units; A process node realization module (2), used for constructing a process relationship diagram through a process node realization method based on the established data structure; The process path SVG implementation module (3) is used to obtain the SVG path with added attributes according to the constructed process relationship diagram through the process path SVG implementation method; The process path setting module (4) is used to manually set and release the process path based on the acquired SVG path with added attributes, so that the user can manually set and release the process path for the dependency relationship between the processes, save the adjusted relationship data between the processes, and dynamically visualize the processes.

Images