CN106295912B - Method and device for configuring and displaying transaction path based on business logic - Google Patents
Method and device for configuring and displaying transaction path based on business logic Download PDFInfo
- Publication number
- CN106295912B CN106295912B CN201610778722.9A CN201610778722A CN106295912B CN 106295912 B CN106295912 B CN 106295912B CN 201610778722 A CN201610778722 A CN 201610778722A CN 106295912 B CN106295912 B CN 106295912B
- Authority
- CN
- China
- Prior art keywords
- transaction
- path
- data
- configuring
- transaction path
- 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
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q10/00—Administration; Management
- G06Q10/04—Forecasting or optimisation specially adapted for administrative or management purposes, e.g. linear programming or "cutting stock problem"
- G06Q10/047—Optimisation of routes or paths, e.g. travelling salesman problem
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
Abstract
The invention relates to the technical field of network analysis, in particular to a method and a device for configuring and displaying a transaction path based on business logic. The technical problem to be solved by the invention is as follows: aiming at the problems in the prior art, the method and the device for configuring and displaying the transaction path based on the service logic are provided, the transaction path is drawn, the configuration information is added, and a plurality of corresponding transaction names and transaction codes are set for the corresponding paths; the transaction path is set more intuitively, and the analysis of the later-stage business of the user is played to be very important. In the invention, data in the D3.js database is directly displayed back to a designated display area on a page through an insert method, an apend method and a data method of a D3 algorithm; and clicking a business transaction path adding button to perform addition configuration, namely filling a path name and setting a connecting line color, and clicking 2 nodes respectively to correspondingly draw a curve with an arrow to finish the drawing of a transaction path.
Description
Technical Field
The invention relates to the technical field of network analysis, in particular to a method and a device for configuring and displaying a transaction path based on business logic.
Background
Transaction paths in today's social networking services are the ring of most concern to specific workers. Because the transaction path is virtualized, the transaction path in the whole business is clarified through related configuration, and the visualization plays a crucial role in the later analysis of the business for users.
In order to visually see the transaction flow of the whole business, quite a lot of analysis software represents the transaction flow through text description or one and the same flow chart. The consequences of this approach are that the logical association with the business itself is not strong and intuitive, and the user-specific transaction codes and other information cannot be displayed and stored in detail.
Disclosure of Invention
The technical problem to be solved by the invention is as follows: aiming at the problems in the prior art, the method and the device for configuring and displaying the transaction path based on the service logic are provided, the transaction path is drawn, the configuration information is added, and a plurality of corresponding transaction names and transaction codes are set for the corresponding paths; the transaction path is set more intuitively, and the analysis of the later-stage business of the user is played to be very important.
The technical scheme adopted by the invention is as follows:
a method for configuring and displaying a transaction path based on business logic comprises the following steps:
step 1: configuring a service logic diagram of a network path in service logic, acquiring and storing all coordinates and data in the service logic diagram through a database, and then displaying the data back to a designated display area on a page;
step 2: clicking an add service transaction path button, performing add configuration, namely filling in a path name and setting a connecting line color, and clicking 2 nodes respectively to correspondingly draw a curve with an arrow to finish the drawing of a transaction path;
and step 3: repeating the step 2, and drawing n transaction paths; clicking the trade setting, setting a plurality of corresponding trade names and trade codes for corresponding paths, and storing the trade paths;
and 4, step 4: and checking the transaction path configured by the user through checking a check box in the first column of the list.
Further, the step 1 includes configuring a service logic diagram of the network path in the service logic, acquiring all coordinates and data in the service logic diagram through a database, and then storing related data in a force method in a d3.js plug-in and storing the related data in a corresponding element object; displaying the data in the D3.js plug-in element object back to a designated display area on a page through an insert method, an apend method and a data method of a D3 algorithm; the transaction name transaction code in the step 3 is stored in an element object of the D3.js plug-in through a data method in a D3 algorithm;
furthermore, a curve with an arrow can be correspondingly drawn by clicking 2 nodes in the step 2, which indicates that the specific process of the transaction path is as follows:
step 21: when a node is clicked, respectively calculating coordinate values of X and Y axes of two nodes in the SVG canvas according to the D3 plug-in, obtaining the coordinate values of the X and Y axes of the two nodes, obtaining an X coordinate and a Y coordinate of a curve with a first node as an initial position and simultaneously obtaining an X coordinate and a Y coordinate of a curve with a second node as an end point by a quadratic Bezier curve formula;
step 22: drawing a corresponding connecting line from the first node to the second node on the SVG canvas according to the connecting line color by using a D3 algorithm, and drawing a curve with an arrow point, namely a transaction path, from the first node to the second node;
the specific process of the step 4 is as follows: i.e., by clicking on the transaction path connection, the data saved in the element object of the D3.js plug-in is called by the data method of the D3 algorithm and then the path is echoed by the apend or insert method.
A method for configuring and displaying a transaction path based on business logic further comprises a step 5, and the specific process is as follows:
step 51: clearing data of a certain transaction path in an element object of the D3.js plug-in by a remove method in the DS algorithm, and then clearing the data of the transaction path;
step 52: and storing all the residual transaction paths after clearing the transaction paths by a data method in the D3 algorithm, and simultaneously storing the service logic diagram data on the element object of the D3.js plug-in.
The transaction path does not allow a loop to appear, and the loop is judged as follows: a continuous transaction path which comprises n nodes and forms n-1 continuous transaction paths; when the end point of any transaction path coincides with the start point or the end point of any previous connecting line, the transaction path is a loop.
A device for configuring and displaying transaction paths based on business logic comprises:
the service logic diagram drawing module is used for configuring a service logic diagram of a network path in service logic, acquiring and storing all coordinates and data in the service logic diagram through a database, and then displaying the data back to a designated display area on a page;
the transaction path drawing module is used for clicking a transaction path adding button to add configuration, namely filling a path name and setting a connecting line color, and respectively clicking 2 nodes to correspondingly draw a curve with an arrow to finish the drawing of a transaction path; drawing n transaction paths;
the transaction path setting module is used for clicking a transaction setting button and setting a plurality of corresponding transaction names and transaction codes for corresponding paths; wherein the trade name trade code is stored on the line drawing element by a data method in the D3 algorithm; saving transaction paths
And the transaction path query module is used for checking the transaction path configured by the user through checking the check boxes in the first column of the list.
The specific implementation process of the business logic diagram drawing module is as follows: configuring a service logic diagram of a network path in service logic, acquiring all coordinates and data in the service logic diagram through a database, and then storing related data into corresponding element objects by using a force method in a d3.js plug-in; displaying the data in the D3.js plug-in element object back to a designated display area on a page through an insert method, an apend method and a data method of a D3 algorithm; and the transaction name transaction code in the transaction path setting module is stored to an element object of the D3.js plug-in through a data method in the D3 algorithm.
The transaction path drawing module is implemented in the following specific process:
when a node is clicked, respectively calculating coordinate values of X and Y axes of two nodes in the SVG canvas according to the D3 plug-in, obtaining the coordinate values of the X and Y axes of the two nodes, obtaining an X coordinate and a Y coordinate of a curve with a first node as an initial position and simultaneously obtaining an X coordinate and a Y coordinate of a curve with a second node as an end point by a quadratic Bezier curve formula;
then drawing a corresponding connecting line from the first node to the second node on the SVG canvas according to the connecting line color by using a D3 algorithm, and drawing a curve with an arrow point, namely a transaction path, from the first node to the second node; drawing n transaction paths in the same process;
the transaction path query module is implemented in the following steps: by clicking on the transaction path connection, the data saved in the element object of the D3.js plug-in is called by the data method of the D3 algorithm and then the path is displayed back by the apend or insert method.
The device for configuring and displaying the transaction path based on the service logic also comprises a transaction path clearing module, a transaction path analysis module and a transaction path display module, wherein the transaction path clearing module is used for clearing data of a certain transaction path in an element object of a D3.js plug-in by a remove method in a DS algorithm and then clearing the data of the transaction path; and storing all the residual transaction paths after clearing the transaction paths by a data method in the D3 algorithm, and simultaneously storing the service logic diagram data on the element object of the D3.js plug-in.
Further, the transaction path does not allow a loop to appear, and the loop is determined as follows: a continuous transaction path which comprises n nodes and forms n-1 continuous transaction paths; when the end point of any transaction path coincides with the start point or the end point of any previous connecting line, the transaction path is a loop.
In summary, due to the adoption of the technical scheme, the invention has the beneficial effects that:
1) a method for configuring a transaction path based on business logic in a Web page.
2) The curves with selectable colors and arrows represent different traffic transaction paths.
3) And quickly drawing a transaction path by clicking a node.
4) Information such as a transaction code can be configured in the transaction path and can be provided for a user to view.
5) And displaying the configured transaction path in real time by checking a check box.
Drawings
The invention will now be described, by way of example, with reference to the accompanying drawings, in which:
FIG. 1: a configuration map is applied.
FIG. 2: application addition completion schematic.
FIG. 3: and (4) customizing the IP graph.
FIG. 4: and (4) customizing the network segment diagram.
FIG. 5: the client adds a completion map.
FIG. 6: setting a communication path.
Fig. 7 is a communication path selection diagram.
FIG. 8 is a business logic diagram.
Fig. 9 is a partial enlarged view of a traffic transaction path configuration.
Fig. 10 is a traffic transaction path addition and partial enlargement.
Fig. 11 is a transaction setup diagram.
FIG. 12 is a path and a partial enlarged view of the arrangement.
Detailed Description
All of the features disclosed in this specification, or all of the steps in any method or process so disclosed, may be combined in any combination, except combinations of features and/or steps that are mutually exclusive.
Any feature disclosed in this specification may be replaced by alternative features serving equivalent or similar purposes, unless expressly stated otherwise. That is, unless expressly stated otherwise, each feature is only an example of a generic series of equivalent or similar features.
Description of the invention:
1) an element object refers to an arbitrary minimum area such as a point, a line or a square block in the SVG canvas, and the position is a code label.
2) Insert and apend are the meaning of adding elements in a source method provided by D3. Respectively and correspondingly realized through an Insert () function and an open () function;
and adding related styles to the events by an inster method, an apend method and the like, and binding corresponding click or mouse hovering events by an on method.
The Data method is a method for storing and acquiring element object Data provided by the D3 algorithm (the storing is only storing Data into corresponding element objects and is not actually storing Data into a database). Realized through a data () function;
the force is used for drawing a mechanical graph in the d3 algorithm, and the data format is defined to be the format of the force (mechanical graph); implemented by a force () function.
3) After the clearing, the rest of the whole svg canvas elements except the business logic diagram are all cleared;
4) js database is a javascript database of data operation type, and can also be regarded as a plug-in.
5) The specific process of saving the transaction path is as follows: storing the coordinates, colors, parameters and the like corresponding to the path obtained by the data method in D3.js into a database
The first embodiment is as follows: the specific process of configuring the service logic diagram is as follows:
1. the application is configured first (the application is configured in advance).
2. Then configuring a client (the client can help a user to obtain the IP/network segment associated with the application in the real environment through data)
3. Configuring a communication path (used for later multi-path analysis, determination of a data acquisition source and the like), if a user does not configure the communication path, if automatically acquired default, selecting a shortest path as the communication path of the user; if not, the communication path must first be configured in another module, since no path is the wrong path, i.e. the path representing no data acquisition source
4. And associating the service. I.e. user configuration, if the client or application is perceived to be associated with other services. (for fast jumps to other traffic for analysis at analysis time).
5. Merged display of business logic diagrams (this is for greater convenience for the user to customize the logic diagrams for later analysis)
Based on the Web page, fig. 1 configures the application relationship in the business logic for the user (the application data is configured by the user in other configuration pages). When configuring the service logic, the user has great importance to the selection of the application, so the system can obtain the application configured by the user, and the user can conveniently select the application. After the application is added (see fig. 2), both the logic diagram and the right tree structure show the application. When the logical graph nodes and the tree structure nodes are generated, the configuration, analysis and the like of the user late alarm of the unique encryption ID are generated in a specific mode (time + application ID or client IP address or network segment + MD 5). the circles in the logical graph represent a host, and the squares represent the application, namely the application exists on the host (the application is drawn by the data of an apend or insert element and the element data in the svg element through D3. js). The server in the tree structure configures the address of the server when the application is configured for the user, and the system in the client can automatically acquire the address of the added client configured when the application is configured for the user. The adding button can be seen at the client, and the user can conveniently define the client under the application. After the add button is clicked (see fig. 3 and fig. 4), the user can configure the name and type (including the IP address, the network segment, and all the clients) of the client in the opened pop-up box, automatically acquire the IP, automatically acquire the network segment, the IP address, the network segment, the NAT mapping, the associated service, and the like (the user can edit the relevant configuration by clicking the edit button on the corresponding column of the client). It should be noted that the automatic IP acquisition and the automatic network segment acquisition are performed, and the IP address and the network segment in the configuration are both the real client IP address and the network segment of the user acquired by the system through the probe (the acquisition mode needs to be kept secret and is not provided), so that the user can conveniently select the configuration, and the configuration error of the user can be avoided.
After the configuration of the client is completed, it can be seen (see fig. 5), and the clients in the tree structure have more clients that have just been configured. (in this step, the unique encrypted ID of the client is generated by the parameters of the application, time, etc. where the client is located, and this ID is also the unique ID of the client node when the logic diagram is drawn by D3.JS, including the following analysis, and the alarm generation is related by this ID, and this is the same as the above application addition And (5) analyzing by a user. And if no path exists or the path needs to be reselected, clicking a communication path setting button and then opening a pop-up box for configuration. As can be seen from the figure (see fig. 6), the edit button in the path map configuration operation can edit the path (this step is configured in other pages). The get communications path button automatically gets all the paths to provide user selection (see fig. 7) (this communications path diagram is a kind of path presentation drawn by itself in svg by d3.js the user can place different devices, probes in the path for post analysis, and these parameters can be placed in each device and probe's element for post analysis.
After the path is determined, the check box in front of the client column is checked to be visible (see fig. 8), and the logic diagram from the user-defined client node to the application node appears in the logic diagram. When the added node client IP address/segment is absolutely the same as the existing client IP address/segment, the system automatically merges nodes, and when the application server IP address has an inclusion relationship with the added client, the system also automatically merges nodes (see the following figure (fig. 8: the client segment in CRM application is a segment client, and the range of the segment during configuration is 192.168.5.0/24, i.e. it represents that the client segment includes IP addresses of all 5 segments; and the server IP address of 157 backtracking server application is exactly 192.168.5.157 included in 5 segments; therefore, the system automatically merges 157 backtracking service nodes in the logic graph as appserver (the client having CRM application and upserver application in appserver) for connection).
The logic graph node can be dragged to facilitate the user to define the layout of the business logic, when the node is dragged to be close to another node, the node can be judged that the user is carrying out the operation of merging the nodes, and the user can be supported to define a new name after the node is merged. After two nodes are merged, if a plurality of hosts of the node are represented by hollow circles, a plurality of applications are represented by hollow squares (see the following figure (see fig. 8), an appMerge node is a manual merging node of a CRM application and an upmserver, and since a plurality of applications exist, the applications are marked as hollow squares, and a client Merge is a manual merging node of a client under the CRM application and a client under the 157 backtracking server application, and no application is a hollow circle, while neither the 157 backtracking server application nor the client segment thereof has a manual merging operation, so that the applications are shown as a solid circle and a square). (Manual merging back-end implementation [ all the following coordinates, data and the like are obtained by a data method after restoring data in a mongodb database through D3.js for logic diagram display ] that the X and Y coordinates of a dragging node and the X and Y coordinates of a merged point are within 5 pixels, when a user selects to cancel merging, the X and Y coordinates of the dragging node are far away from the merged point, when merging is determined, firstly, the merged point is found through the filter method of D3.js, the style of the merged point is forcibly modified into a hollow circle, when the dragging point and the merged point are applied, the merged point is changed into the hollow circle and a hollow square, then some important data [ such as ID, TYPE and the like ] of the dragging point are obtained and then added into a designated object merge node of the merged point, if the merge node of the A and the B are merged, then the merge node of the A has A-ID, A-TYPE, B-ID, B, B-TYPE, and the like, and directly modify some related data of the merged point and then delete the dragging point. And after the modification of the point is finished, judging whether the merging point has a connection relation with other nodes. And if so, changing the source or target object in the connecting line data to find the merged node. If the merged connecting line has overlap, deleting the connecting line existing in the previous dragging point, and adding 1 to the mergeLink object data in the connecting line of the merged point. Because the logic diagram and the tree diagram have an association relationship. Therefore, when the user cancels the check of the client or deletes the application, the system traverses all the IDs in the node data mergeNode object while traversing all the IDs of all the nodes [ i.e., the IDs generated by the upper application and the client ], and if the ID exists in the mergeNode, deletes the data in the mergeNode first, and then deletes the corresponding merge connection. After the operations are completed, whether the number of the remaining mergenodes is multiple and what type is determined. If there are more than one node and the type is still consistent with the previous node, the node is not changed, and if only one node or one application is left, the corresponding node style is modified, and the specific judgment is shown in the upper column. After the node information is deleted, whether the corresponding mergeLink is overlapped or not is judged, the overlapped mergeLink data is subtracted by 1, and if the mergeLink is 0, the connection line is directly deleted).
Example two:
step 1: the service path is based on a Web page, and FIG. 9 is an overall effect diagram of a network path configured by a user in service logic (the service logic diagram of the network path is configured in the service logic, all coordinates and data in the service logic diagram are obtained through a database, then related data are stored by using a force method in a d3.js plug-in and are stored in a corresponding element object, and the data in the element object of the d3.js plug-in is displayed back to a designated display area on the page through an insert method, an apend method and a data method of a D3 algorithm).
Step 2: clicking the top left add traffic path button sees (figure 10) that an add configuration occurs. Filling in path name, setting connection line color, clicking 2 nodes respectively to draw a curve with arrow to indicate transaction path (the concrete process is, step 21: when clicking node, according to D3 plug-in, calculating coordinate values of X and Y axes of two nodes in SVG canvas respectively, obtaining coordinate values of X and Y axes of two nodes, obtaining X coordinate and Y coordinate of curve first node as starting position by using quadratic Bezier curve formula, and obtaining X coordinate and Y coordinate of second node as ending point, step 22: drawing corresponding connection line from first node to second node by using D3 algorithm according to connection line color to SVG canvas, drawing a curve with arrow pointing from first node to second node, i.e. transaction path), where the single path is not allowed (the loop judgment is as follows: a continuous transaction path, the system comprises n nodes and n-1 continuous transaction paths; when the end point of any transaction path coincides with the start point or the end point of any previous connecting line, the transaction path is a loop).
And step 3: repeating the step 2, and drawing n transaction paths; after the path drawing is completed, the transaction setting can be clicked to set a plurality of corresponding transaction names and transaction codes (fig. 11) for the corresponding paths (wherein the transaction codes of the transaction names are stored in the element object of the D3.js plug-in through the data method in the D3 algorithm). Upon clicking the save button, it can be seen (FIG. 12) that the just added transaction path has appeared in the right hand list
And 4, step 4: in fig. 12, the check boxes in the first column of the list can be checked to check the path configured by the user at the same time, and the corresponding transaction setting information just configured can be checked by clicking the path connection (the specific checking method is that by clicking the transaction path connection, the data stored in the element object of the D3.js plug-in is called by the data method of the D3 algorithm, and then the path is displayed back by the apend or insert method).
And 5: and (4) the drawn transaction path can be cleared by clicking a clear path button (data is cleared by a remove method of the D3.js database, and the rest of the whole SVG canvas elements except the service logic diagram are completely cleared after clearing).
The invention is not limited to the foregoing embodiments. The invention extends to any novel feature or any novel combination of features disclosed in this specification and any novel method or process steps or any novel combination of features disclosed.
Claims (10)
1. A method for configuring and displaying transaction paths based on business logic is characterized by comprising the following steps:
step 1: configuring a service logic diagram of a network path in service logic, acquiring and storing all coordinates and data in the service logic diagram through a database, and then displaying the data back to a designated display area on a page; the specific process of configuring the service logic diagram comprises the following steps: firstly, configuring an application; then configuring a client which helps a user to acquire an IP/network segment associated with the application in a real environment through data, and then configuring a communication path associated service;
step 2: clicking an add service transaction path button, performing add configuration, namely filling in a path name and setting a connecting line color, and clicking 2 nodes respectively to correspondingly draw a curve with an arrow to finish the drawing of a transaction path; wherein, clicking 2 nodes in step 2 can draw a curve with an arrow to indicate a transaction path; the specific process comprises the following steps of 21: when a node is clicked, respectively calculating coordinate values of X and Y axes of two nodes in the SVG canvas according to the D3.js plug-in, obtaining the coordinate values of the X and Y axes of the two nodes, obtaining an X coordinate and a Y coordinate with a first node of a curve as a starting point and simultaneously obtaining an X coordinate and a Y coordinate with a second node as an ending point through a quadratic Bezier curve formula;
step 22: drawing a corresponding connecting line from the first node to the second node on the SVG canvas according to the connecting line color by using a D3 algorithm, and drawing a curve with an arrow point, namely a transaction path, from the first node to the second node;
and step 3: repeating the step 2, and drawing n transaction paths; clicking the transaction setting, setting a plurality of corresponding transaction names and transaction codes for corresponding paths, and storing the transaction paths; the transaction name and the transaction code are stored in an element object of the D3.js plug-in through a data method in a D3 algorithm; the transaction path storage means that path information acquired through the D3.js plug-in and self-defined name, color and transaction setting are stored in a corresponding hidden domain;
and 4, step 4: and checking the transaction path configured by the user through checking a check box in the first column of the list.
2. The method for configuring and displaying the transaction path based on the service logic according to claim 1, wherein the step 1 comprises configuring a service logic diagram of the network path in the service logic, acquiring all coordinates and data in the service logic diagram through a database, and then storing the related data in a force method in a D3.js plug-in and storing the related data in a corresponding element object; and displaying the data in the D3.js plug-in element object back to the designated display area on the page through an insert method, an apend method and a data method of the D3 algorithm.
3. The method for configuring and displaying transaction paths based on business logic according to claim 1, wherein the specific process of the step 4 is as follows: i.e., by clicking on the transaction path connection, the data saved in the element object of the D3.js plug-in is called by the data method of the D3 algorithm and then the transaction path is echoed by the apend or insert method.
4. The method for configuring and displaying transaction paths based on business logic according to claim 1, 2 or 3, further comprising a step 5, wherein the specific process is as follows:
step 51: clearing data of a certain transaction path in an element object of the D3.js plug-in by a remove method in the D3 algorithm, and then clearing the data of the transaction path;
step 52: all the remaining transaction paths are stored through the data method in the D3 algorithm after the transaction paths are cleared in the storage step 51, and the business logic diagram data is stored on the element object of the D3.js plug-in.
5. The business logic-based transaction path configuration and presentation method of claim 4, wherein the transaction path is not allowed to have a loop; the loop judgment method comprises the following steps: when the end point of any transaction path is coincident with the starting point or the end point of any previous connecting line, the transaction path is a loop; wherein, a continuous transaction path comprises n nodes to form n-1 continuous transaction paths.
6. A device for configuring and displaying transaction paths based on business logic is characterized by comprising:
the service logic diagram drawing module is used for configuring a service logic diagram of a network path in service logic, acquiring and storing all coordinates and data in the service logic diagram through a database, and then displaying the data back to a designated display area on a page; the specific process of configuring the service logic diagram comprises the following steps: firstly, configuring an application; then configuring a client which helps a user to acquire an IP/network segment associated with the application in a real environment through data, and then configuring a communication path associated service;
the transaction path drawing module is used for clicking a transaction path adding button to add configuration, namely filling a path name and setting a connecting line color, and respectively clicking 2 nodes to correspondingly draw a curve with an arrow to finish the drawing of a transaction path; drawing n transaction paths; the transaction path drawing module can correspondingly draw a curve with an arrow by clicking 2 nodes, and the specific implementation process for finishing the drawing of the transaction path is as follows: when a node is clicked, respectively calculating coordinate values of X and Y axes of two nodes in the SVG canvas according to the D3.js plug-in, obtaining the coordinate values of the X and Y axes of the two nodes, obtaining an X coordinate and a Y coordinate with a first node of a curve as a starting point and simultaneously obtaining an X coordinate and a Y coordinate with a second node as an ending point through a quadratic Bezier curve formula; then drawing a corresponding connecting line from the first node to the second node on the SVG canvas according to the connecting line color by using a D3 algorithm, and drawing a curve with an arrow point, namely a transaction path, from the first node to the second node;
the transaction path setting module is used for clicking a transaction setting button, setting a plurality of corresponding transaction names and transaction codes for corresponding paths, and storing the transaction paths; the transaction name transaction code in the transaction path setting module is stored in an element object of the D3.js plug-in through a data method in a D3 algorithm; saving the transaction path; the transaction path storage means that path information acquired through the D3.js plug-in and self-defined name, color and transaction setting are stored in a corresponding hidden domain;
and the transaction path query module is used for checking the transaction path configured by the user through checking the check boxes in the first column of the list.
7. The device for configuring and displaying transaction paths based on business logic according to claim 6, wherein the business logic drawing module is implemented in the following steps: configuring a service logic diagram of a network path in service logic, acquiring all coordinates and data in the service logic diagram through a database, then storing related data by using a force method in a D3.js plug-in and storing the related data into a corresponding element object; and displaying the data in the D3.js plug-in element object back to the designated display area on the page through an insert method, an apend method and a data method of the D3 algorithm.
8. The device for configuring and displaying the transaction path based on the business logic according to claim 6, wherein the transaction path query module is implemented by the following steps: by clicking on the transaction path connection line, the data saved in the element object of the D3.js plug-in is called through the data method of the D3 algorithm, and then the transaction path is displayed back through the apend or insert method.
9. The apparatus for configuring and displaying transaction path based on business logic of claim 6, 7 or 8, further comprising a transaction path clearing module, configured to clear data of a transaction path in an element object of the D3.js plug-in by removing data of the transaction path through a remove method in the D3 algorithm; all the remaining transaction paths after the transaction paths are cleared are stored through a data method in a D3 algorithm; and storing the business logic diagram data on the element object of the D3.js plug-in.
10. The device for configuring and displaying transaction path based on business logic of claim 9, wherein the transaction path is not allowed to have a loop, and the loop determination method is as follows: when the end point of any transaction path is coincident with the starting point or the end point of any previous connecting line, the transaction path is a loop; wherein, a continuous transaction path comprises n nodes to form n-1 continuous transaction paths.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610778722.9A CN106295912B (en) | 2016-08-30 | 2016-08-30 | Method and device for configuring and displaying transaction path based on business logic |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610778722.9A CN106295912B (en) | 2016-08-30 | 2016-08-30 | Method and device for configuring and displaying transaction path based on business logic |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106295912A CN106295912A (en) | 2017-01-04 |
| CN106295912B true CN106295912B (en) | 2021-10-22 |
Family
ID=57672627
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610778722.9A Active CN106295912B (en) | 2016-08-30 | 2016-08-30 | Method and device for configuring and displaying transaction path based on business logic |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106295912B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108572954B (en) * | 2017-03-07 | 2023-04-28 | 上海颐为网络科技有限公司 | Method and system for recommending approximate entry structure |
| CN112506976B (en) * | 2020-12-14 | 2023-05-12 | 杭州趣链科技有限公司 | Data flow display method and device, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103035146A (en) * | 2012-11-27 | 2013-04-10 | 四川省电力公司技术技能培训中心 | Intelligent prompt method of electric power enterprise resource planning (EPR) service simulation system |
| CN103745015A (en) * | 2014-01-25 | 2014-04-23 | 温州大学 | Foreign affairs information management and release system |
| CN105550202A (en) * | 2015-12-02 | 2016-05-04 | 成都科来软件有限公司 | Graphic display method and system based on network access relation |
| CN105765502A (en) * | 2013-11-19 | 2016-07-13 | 株式会社和冠 | Method and system for ink data generation, ink data rendering, ink data manipulation and ink data communication |
| CN105868323A (en) * | 2016-03-28 | 2016-08-17 | 浪潮通信信息系统有限公司 | Patterning configuring method of networking resources |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7917391B2 (en) * | 2006-04-19 | 2011-03-29 | Market Hardware, Inc. | Integrated marketing portal for businesses |
-
2016
- 2016-08-30 CN CN201610778722.9A patent/CN106295912B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103035146A (en) * | 2012-11-27 | 2013-04-10 | 四川省电力公司技术技能培训中心 | Intelligent prompt method of electric power enterprise resource planning (EPR) service simulation system |
| CN105765502A (en) * | 2013-11-19 | 2016-07-13 | 株式会社和冠 | Method and system for ink data generation, ink data rendering, ink data manipulation and ink data communication |
| CN103745015A (en) * | 2014-01-25 | 2014-04-23 | 温州大学 | Foreign affairs information management and release system |
| CN105550202A (en) * | 2015-12-02 | 2016-05-04 | 成都科来软件有限公司 | Graphic display method and system based on network access relation |
| CN105868323A (en) * | 2016-03-28 | 2016-08-17 | 浪潮通信信息系统有限公司 | Patterning configuring method of networking resources |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106295912A (en) | 2017-01-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107818162B (en) | Bury a processing method, device, computer equipment and storage medium | |
| CN110929201B (en) | Complex network topology editing and visualization system based on Web | |
| US9712551B2 (en) | Methods and systems for architecture-centric threat modeling, analysis and visualization | |
| CN108345456A (en) | Page code generation method, device, computer equipment and storage medium | |
| US20130321458A1 (en) | Contextual visualization via configurable ip-space maps | |
| CN103413002A (en) | Topological graph editing method and topological graph editor | |
| CN106341265B (en) | The methods of exhibiting and device of network data | |
| CN106156350A (en) | The big data analysing method of a kind of visualization and system | |
| CN107861655A (en) | Control matching process, device, computer equipment and storage medium | |
| CN109657067A (en) | Methods of exhibiting, device, computer equipment and the storage medium of knowledge mapping | |
| US8159971B2 (en) | System and method for inferring connectivity among network segments in the absence of configuration information | |
| US9948679B2 (en) | Object-relation user interface for viewing security configurations of network security devices | |
| CN110505079A (en) | For the visual system and method for multidimensional network based on context | |
| CN103064584A (en) | Method and device for pasting | |
| CN102929552B (en) | Terminal and information searching method | |
| CN106844458B (en) | Method, computing device and storage medium for displaying online behavior track of user | |
| CN110308962A (en) | Manage method, electronic equipment and the medium of block chain network | |
| CN105550202A (en) | Graphic display method and system based on network access relation | |
| US10756984B2 (en) | Method and apparatus for creating and managing network device port VLAN configurations | |
| CN106295912B (en) | Method and device for configuring and displaying transaction path based on business logic | |
| CN106301945B (en) | A kind of service condition setting, methods of exhibiting and device based on service logic | |
| CN109002334A (en) | A kind of operation platform and its data processing method | |
| CN109165362A (en) | Equity penetrates the mask method and device of enterprise attributes in figure | |
| CN107396142A (en) | Interface navigation data processing method | |
| CN108369590A (en) | For commending system, the devices and methods therefor for instructing Self-Service to analyze |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: B6-7, Tianfu Software Park, 99 Tianhua 1st Road, high tech Zone, Chengdu, Sichuan 610041 Applicant after: Chengdu Shumo Technology Co.,Ltd. Address before: B6-7, Tianfu Software Park, 99 Tianhua 1st Road, high tech Zone, Chengdu, Sichuan 610041 Applicant before: COLASOFT Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210924 Address after: 610041 floor 14, unit 1, building 4, No. 966, north section of Tianfu Avenue, Chengdu hi tech Zone, China (Sichuan) pilot Free Trade Zone, Chengdu, Sichuan 41401-41406 Applicant after: Chengdu Kelai Network Technology Co.,Ltd. Address before: B6-7, Tianfu Software Park, 99 Tianhua 1st Road, high tech Zone, Chengdu, Sichuan 610041 Applicant before: Chengdu Shumo Technology Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address |
Address after: 610041 12th, 13th and 14th floors, unit 1, building 4, No. 966, north section of Tianfu Avenue, Chengdu hi tech Zone, China (Sichuan) pilot Free Trade Zone, Chengdu, Sichuan Patentee after: Kelai Network Technology Co.,Ltd. Address before: 610041 floor 14, unit 1, building 4, No. 966, north section of Tianfu Avenue, Chengdu hi tech Zone, China (Sichuan) pilot Free Trade Zone, Chengdu, Sichuan 41401-41406 Patentee before: Chengdu Kelai Network Technology Co.,Ltd. |
|
| CP03 | Change of name, title or address |