A visualization method and system for automatic layout drawing

Abstract

The present application discloses a visualization method and system for automatic layout and drawing, which obtains the component data and relationship data of each view component by requesting the view domain and view level corresponding to the data, determines the style information and rendering information corresponding to each component, processes the component data and relationship data by view layout rules to obtain the layout position of each view component in the view, and draws the view based on the layout position, style information and rendering information to obtain the view drawing result and display it. Through the above, there is no need for manual view drawing, the view drawing efficiency is improved, the architecture view data is obtained and updated in real time, and the real-time drawing, automatic layout, and drawing display functions of various types of technical architecture views are realized in the browser, the same view style of the technical architecture is unified, the accuracy and completeness of the technical architecture view data are improved, and the multi-perspective and multi-level automatic drawing display of the technical architecture view is realized.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and more specifically, to a visualization method and system for automatic layout and mapping. Background Art

[0002] The technical architecture view is a graphical display of the IT system technical architecture from different perspectives, mainly including system view, storage view, network view, resource pool view, computer room environment view, etc. The technical architecture view is a graphical and visual expression of the components and the relationships between components contained in the system and its infrastructure.

[0003] At present, the traditional technical architecture Figure 1 Generally, architects use tools such as Visio and PPT to manually design and draw. This method has the following problems:

[0004] First, with the increase in system scale and the complexity of internal relationships, it is difficult to quickly and accurately identify and draw all the components and relationships that need to be drawn manually, resulting in inefficient drawing of architecture views. Second, the rapid development of business requires rapid changes in IT systems to cope with it. After the system changes, the data in the technical architecture view should also change synchronously, but the manually drawn views need to be manually updated by the architect, and the timeliness of data updates and the accuracy and completeness of the technical architecture view data cannot be guaranteed. Third, different architects have different understandings of architectural design, and each person draws a different architectural view. There are problems such as inconsistent view display specifications, inconsistent styles, poor architecture readability, and poor sharing of architectural views.

[0005] Therefore, the existing technology has the problems of low efficiency in manual view drawing, untimely data update, inconsistent styles of similar views, and a single viewing angle that cannot provide a panoramic view. Summary of the invention

[0006] In view of this, the present application discloses a visualization method and system for automatic layout drawing, which aims to improve the efficiency of view drawing, obtain and update architecture view data in real time, improve the accuracy and completeness of technical architecture view data, and realize multi-perspective and multi-level automatic drawing display of technical architecture views.

[0007] In order to achieve the above purpose, the disclosed technical solution is as follows:

[0008] In a first aspect, the present application discloses a visualization method for automatic layout drawing, the method comprising:

[0009] Obtain request data; the request data is the request data for initiating view access;

[0010] Obtain the view area and view level corresponding to the request data;

[0011] Based on the view domain and the view hierarchy, component data and relationship data of each view component are obtained; the relationship data is used to characterize the association relationship and / or inclusion relationship between each view component;

[0012] Processing the component data and the relationship data to obtain component data in a preset data format and relationship data in a preset data format and encapsulating them;

[0013] Based on the encapsulated data, determine the style information and rendering information corresponding to each component; the style information is used to display the node position, container position and relationship connection position corresponding to each view component;

[0014] Processing the component data and the relationship data according to the view layout rule to obtain the layout position of each view component in the view;

[0015] The view is drawn based on the layout positions of the various view components in the view, the style information and the rendering information, and the view drawing result is obtained and displayed.

[0016] Preferably, the processing of the component data and the relationship data to obtain the component data in a preset data format and the relationship data in a preset data format and encapsulating them comprises:

[0017] Parsing and processing the component data to obtain component data in a preset data format;

[0018] Parsing and processing the relationship data to obtain relationship data in a preset data format;

[0019] Encapsulating the component data in the preset data format into a component attribute data list;

[0020] The relationship data in the preset data format is encapsulated into a component relationship data list.

[0021] Preferably, the processing of the component data and the relationship data by using the view layout rule to obtain the layout position of each view component in the view includes:

[0022] Determine a container class component from each view component, and complete view partition division based on the container class component;

[0023] Sort the components in the divided view partitions according to the sorting rules to obtain preset fine-grained display components;

[0024] Determine the container position of the container class component based on the inclusion relationship between the preset fine-grained display component and other components; the other components have an inclusion relationship and / or an association relationship with the preset fine-grained display component;

[0025] Based on the association relationship between each view component, determine the position of the relationship line corresponding to each view component;

[0026] Based on the component data, the relationship data, the container position, the position of the relationship line and the pre-acquired node position corresponding to each view component, the layout position of each view component in the view is determined.

[0027] Preferably, the performing view drawing based on the layout position of each view component in the view, the style information and the rendering information, obtaining and displaying the view drawing result, includes:

[0028] By presetting the display parameters of the display device, the browser size parameters, the style information and the rendering information, the layout position of each view component in the view is subjected to view drawing to obtain a view drawing result;

[0029] The view drawing result is displayed in the browser.

[0030] Preferably, before obtaining the request data, the method further includes:

[0031] Define the components in the technical architecture and the relationships between them;

[0032] The process of defining the components in the technical architecture and the component relationships between the components includes:

[0033] Define the display perspective of each component and the technical architecture view layering, view name and entry object in the display perspective of each component; the display perspective at least includes the system view perspective, storage view perspective, network view perspective and resource pool view perspective;

[0034] Define the display elements and display standard styles of each layer of the view in the technical architecture view hierarchy; the display elements are used to characterize the association and inclusion relationship between the technical architecture components and each view component;

[0035] Define standard layout styles and view layout rules for components and their relationships in a view.

[0036] Preferably, after performing view drawing based on the layout positions of the view components in the view, the style information and the rendering information, obtaining the view drawing result and displaying it, the method further includes:

[0037] Obtaining operation data of each component in the view;

[0038] The operating data is displayed in a preset display format.

[0039] The second aspect of the present application discloses a visualization system for automatic layout and mapping, the system comprising:

[0040] A first acquisition unit is used to acquire request data; the request data is request data for initiating view access;

[0041] A second acquisition unit, used to acquire a view field and a view level corresponding to the request data;

[0042] A third acquisition unit is used to obtain component data and relationship data of each view component based on the view domain and the view hierarchy; the relationship data is used to represent the association relationship and / or inclusion relationship between each view component;

[0043] A processing and encapsulation unit, used to process the component data and the relationship data, obtain component data in a preset data format and relationship data in a preset data format, and encapsulate them;

[0044] A determination unit, used to determine style information and rendering information corresponding to each component based on the encapsulated data; the style information is used to display the node position, container position and relationship connection position corresponding to each view component;

[0045] A processing unit, used to process the component data and the relationship data according to the view layout rule to obtain the layout position of each view component in the view;

[0046] A drawing and display unit is used to perform view drawing based on the layout position of each view component in the view, the style information and the rendering information, obtain the view drawing result and display it.

[0047] Preferably, the processing encapsulation unit comprises:

[0048] A first parsing and processing module, used to parse and process the component data to obtain component data in a preset data format;

[0049] A second parsing and processing module is used to parse and process the relationship data to obtain relationship data in a preset data format;

[0050] A first encapsulation module, used for encapsulating the component data in the preset data format into a component attribute data list;

[0051] The second encapsulation module is used to encapsulate the relationship data in the preset data format into a component relationship data list.

[0052] Preferably, the processing unit comprises:

[0053] A first determination module is used to determine a container class component from each view component, and complete the view partition division based on the container class component;

[0054] A sorting module is used to sort the components in the divided view partitions according to the sorting rules to obtain preset fine-grained display components;

[0055] A second determination module is used to determine the container position of the container class component based on the inclusion relationship between the preset fine-grained display component and other components; the other components have an inclusion relationship or an association relationship with the preset fine-grained display component;

[0056] A third determination module is used to determine the position of the relationship line corresponding to each view component based on the association relationship between each view component;

[0057] The fourth determination module is used to determine the layout position of each view component in the view based on the container position, the position of the relationship line, the rendering information and the node position corresponding to each view component acquired in advance.

[0058] Preferably, the drawing display unit comprises:

[0059] A drawing module, used to perform view drawing on the layout position by presetting display parameters of the display device and browser size parameters to obtain a view drawing result;

[0060] The display module is used to display the view drawing result in the browser.

[0061] It can be known from the above technical scheme that the present application discloses a visualization method and system for automatic layout of drawings, obtaining request data; the request data is the request data for initiating view access, obtaining the view domain and view level corresponding to the request data, and obtaining component data and relationship data of each view component based on the view domain and the view level; the relationship data is used to characterize the association relationship and inclusion relationship between each view component, and the component data and the relationship data are processed to obtain component data in a preset data format and relationship data in a preset data format and encapsulate them, and based on the encapsulated data, determine the style information and rendering information corresponding to each component, and the style information is used to display the node position, container position and relationship connection position corresponding to each view component, and process the component data and relationship data through the view layout rules to obtain the layout position of each view component in the view, and draw the view based on the layout position, style information and rendering information to obtain and display the view drawing result. Through the above solution, there is no need for manual view drawing, which improves the view drawing efficiency, obtains and updates the architecture view data in real time, and realizes the real-time drawing, automatic layout, and drawing display of various types of technical architecture views in the browser, realizes the unification of the same view style of the technical architecture, improves the accuracy and completeness of the technical architecture view data, and realizes the multi-perspective and multi-level automatic drawing display of the technical architecture view. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0063] Figure 1 A schematic diagram of a flow chart of a visualization method for automatic layout and mapping disclosed in an embodiment of the present application;

[0064] Figure 2 A schematic diagram of a process for obtaining the layout position of each view component in a view disclosed in an embodiment of the present application;

[0065] Figure 3 A schematic diagram of a process for obtaining and displaying a view drawing result disclosed in an embodiment of the present application;

[0066] Figure 4 A schematic diagram of the structure of an automatic layout and mapping visualization system disclosed in an embodiment of the present application. DETAILED DESCRIPTION

[0067] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0068] In this application, the terms "comprises", "comprising" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element.

[0069] As can be seen from the background technology, the existing manual view drawing technology has low efficiency, untimely data update, inconsistent styles of similar views, and a single viewing angle that cannot provide a panoramic view.

[0070] In order to solve the above problems, the embodiment of the present application discloses a visualization method and system for automatic layout and drawing, which does not require manual view drawing, improves view drawing efficiency, obtains and updates architecture view data in real time, and implements real-time drawing, automatic layout, and drawing display functions of various types of technical architecture views in the browser, unifies the same view style of the technical architecture, improves the accuracy and completeness of the technical architecture view data, and implements multi-perspective and multi-level automatic drawing display of the technical architecture view. The specific implementation method is described by the following embodiment.

[0071] refer to Figure 1 FIG. 1 is a flow chart of a visualization method for automatic layout and mapping disclosed in an embodiment of the present application. The visualization method for automatic layout and mapping mainly includes the following steps:

[0072] S101: Obtain request data; the request data is request data for initiating view access.

[0073] In S101, a system in which a user enters a technical architecture view through a browser is obtained, and request data for initiating view access through view search or domain-level hierarchical navigation is initiated.

[0074] The technical architecture view is a graphical display of the IT system technical architecture from different perspectives, mainly including system view, storage view, network view, resource pool view, computer room environment view, etc.

[0075] Request data includes capacity request data, performance request data, work order request data, etc. in the request technical architecture view.

[0076] Before obtaining the request data, define the components in the technical architecture and the component relationships between them.

[0077] Components are the various elements that make up a graphical user interface. They complete interactions with users or interactions between components by responding to different events.

[0078] Components are divided into container components and non-container components.

[0079] The process of defining the components in the technical architecture and the component relationships between the components is shown in A1-A3.

[0080] A1: Define the display perspective of each component and the technical architecture view layering, view name and entry object in the display perspective of each component; the display perspective includes at least the system view perspective, storage view perspective, network view perspective and resource pool view perspective.

[0081] First, determine the display perspective of the technical architecture view. The display perspective is divided into the following categories according to the information system technical architecture field: system, storage, network, resource pool, and computer room equipment.

[0082] Secondly, determine the technical architecture view layering, view name and entry object in each perspective. The architecture view layering is mainly based on the user's display needs. It is recommended to go from macro to micro and go deeper layer by layer. Taking the system as an example, it is divided into the system distribution panoramic view of the technical architecture view, the system physical deployment diagram of the technical architecture view, and the system deployment instance diagram of the technical architecture view.

[0083] A2: Define the display elements and standard display styles of each layer of the technical architecture view hierarchy; the display elements are used to represent the association and / or inclusion relationship between the technical architecture components and various view components.

[0084] Among them, determine the display elements in each layer of the view, which specific architectural components and relationships are included, and clarify how to obtain data.

[0085] Determine the standard display style of each layer of the architectural view, including the display style, style and interaction effects of components and relationships.

[0086] Display styles include icons, containers, and relationship lines. Different display styles can be defined according to component type, brand, purpose, model, etc., and can be defined online according to component and relationship types in the technical architecture view system.

[0087] A3: Define the standard layout style and view layout rules for each component and the relationship between each component in the view.

[0088] Among them, view components and relationships specifically refer to the components and relationships included in the technical architecture view.

[0089] The standard style and view layout rules are different for each type of diagram.

[0090] To facilitate understanding of view layout rules, here is an example:

[0091] Taking the physical deployment diagram of the system as an example, the outermost container first displays the park, the network partition and the access switch in each park are displayed on the left, and then the deployment unit is displayed in each partition according to the deployment unit type, and finally the storage associated with the deployment unit in each partition is displayed. Different parks, network partitions, deployment units, and storage have specific view layout rules, and different devices with different data volumes are processed differently.

[0092] In the technical architecture view, the system domain of the system mainly includes components such as architecture hierarchy, physical subsystem, deployment unit, virtual machine, physical machine, etc.; the network domain includes components such as network nodes, network lines, routers, switches, firewalls, load balancing, ports, etc.; the resource pool domain includes components such as campus, resource pool, cluster, physical machine, basic physical architecture Vcenter, etc.; the storage domain includes components such as storage switch, SAN storage, NAS storage, storage port, etc.; the computer room equipment includes components such as campus, building, floor, computer room, cabinet, server.

[0093] The relationship between each component mainly refers to the connection relationship and inclusion relationship between the above components.

[0094] S102: Obtain the view area and view level corresponding to the requested data.

[0095] In S102, the view area, view level and view entry object selected by the user to be displayed are obtained in real time.

[0096] The view entry object is for the case where there are multiple views of the same type. Taking the system domain technical architecture view as an example, when a user accesses the first-level system panoramic distribution view, the system obtains the view domain selected by the user as the system domain in real time, and the view level is the system panoramic distribution view; when a user accesses a system in the system panoramic view, the system obtains the view domain selected by the user as the system domain in real time, and the view level is the system physical deployment diagram, and the entry CI is the system selected by the user.

[0097] S103: Based on the view domain and the view hierarchy, component data and relationship data of each view component are obtained; the relationship data is used to represent the association relationship and / or inclusion relationship between each view component.

[0098] In S103, component data and relationship data of corresponding view components are queried in the view domain and view hierarchy of the technical architecture view through the presentation elements of the technical architecture view.

[0099] The component data includes deployment unit information, the campus information, the network partition information, switch information, etc.

[0100] The relationship data includes the relationship data between the deployment unit and the deployment instance, the relationship data between the deployment unit and the park to which it belongs, the relationship data between the deployment unit and the network partition to which it belongs, the relationship data between the deployment unit and the associated storage, the relationship data between the deployment unit and the switch, etc.

[0101] Taking the system domain technical architecture view as an example, after obtaining the information system that needs to be displayed, according to the components and component relationships contained in the view in the view definition, obtain the relationship between the system and the deployment unit, the relationship between the deployment unit and the deployment instance, the relationship between the deployment unit and the park to which it belongs, the relationship between the deployment unit and the network partition to which it belongs, the relationship between the deployment unit and the associated storage, the relationship between the deployment unit and the switch, etc.; according to the relationship, obtain the attribute information of the park to which the system belongs, the network partition to which it belongs, the deployment unit, the deployment instance, the associated storage, the switch and other objects contained.

[0102] In order to facilitate understanding of the process of obtaining the relationship between the system and the deployment unit, the relationship between the deployment unit and the deployment instance, the relationship between the deployment unit and the park and network partition to which it belongs, and the relationship between the deployment unit and the associated storage and switch, the following example is used to illustrate the relationship:

[0103] For example: when a user needs to query the physical deployment diagram of a system, the user selects a physical subsystem in the system. The system selects the deployment unit that has an inclusion relationship with the physical subsystem, the deployment instance (virtual machine or physical machine) that has an inclusion relationship with the deployment unit, the campus that has an inclusion relationship with the deployment unit, the network partition, and the storage and switch that have an associated relationship with the deployment instance based on the primary key of the physical subsystem.

[0104] S104: Process the component data and the relationship data to obtain component data in a preset data format and relationship data in a preset data format and encapsulate them.

[0105] In S104, the component data and relationship data queried from the database table are uniformly processed (parsed, processed) to obtain component data in a preset data format and relationship data in a preset data format, and the component data in a preset data format and relationship data in a preset data format are encapsulated into their respective corresponding data lists.

[0106] The preset data format may be a jason data format or other types of data formats. The preset data format is determined by technicians according to actual conditions and is not specifically limited in this application. The preset data format of this application is preferably a jason data format.

[0107] The specific process of processing the component data and the relationship data to obtain the component data in a preset data format and the relationship data in a preset data format and encapsulating them is shown in B1-B4.

[0108] B1: parse and process the component data to obtain the component data in a preset data format.

[0109] Among them, component data includes deployment unit information, campus information, network partition information, switch information, etc.

[0110] B2: Parse and process the relational data to obtain relational data in a preset data format.

[0111] The relationship data includes the relationship data between the deployment unit and the deployment instance, the relationship data between the deployment unit and the park to which it belongs, the relationship data between the deployment unit and the network partition to which it belongs, the relationship data between the deployment unit and the associated storage, the relationship data between the deployment unit and the switch, etc.

[0112] B3: Encapsulate the component data in the preset data format into the component attribute data list.

[0113] For example, the deployment unit information in the jason data format is encapsulated into the component attribute data list.

[0114] B4: Encapsulate the relational data in the preset data format into the component relational data list.

[0115] For example, the relationship data between the deployment unit and the deployment instance in the jason data format is encapsulated into a component relationship data list.

[0116] S105: Based on the encapsulated data, determine the style information and rendering information corresponding to each component; the style information is used to display the node position, container position and relationship connection position corresponding to each view component.

[0117] In S105, based on the component data in a preset data format in the component attribute data list and the relationship data in a preset data format in the component attribute data list, rendering information corresponding to display icons and rendering effects of different types of components and relationships is read.

[0118] Rendering information mainly includes display color, shadow, light, background, etc.

[0119] Taking the system domain physical deployment diagram as an example, obtain the display icons or containers of the campus, switch, deployment unit, and storage, and obtain the style rendering information of the display relationship lines of the deployment unit, switch, storage, etc.

[0120] S106: Processing the component data and the relationship data according to the view layout rule to obtain the layout position of each view component in the view.

[0121] In S106, the corresponding perspective and hierarchical view including component data, relationship data and rendering information are obtained, and the layout position of the component in the view is calculated according to the component data, the relationship data between components (association relationship, inclusion relationship), the rendering requirements of the component style, etc. through the view layout rules.

[0122] The view layout rules are consistent with the view layout rules involved in A3 above, which can be referred to and will not be repeated here.

[0123] Specifically, the style information and rendering information are processed through the view layout rules to obtain the layout position of each view component in the view as shown in C1-C5.

[0124] C1: Determine the container class components from each view component and complete the view partitioning based on the container class components.

[0125] Among them, the container component refers to the one that can contain other user interface components (USER INTERFACE Module, UI).

[0126] Taking the physical deployment diagram as an example, the view partitions are mainly campus, network partitions, and server type partitions (WEB server, AP server, DB server), etc.

[0127] C2: Sort the components in the divided view partitions according to the sorting rules to obtain preset fine-grained display components.

[0128] Among them, the preset fine-grained display component is the finest-grained display component. The preset fine-grained display component is mainly a deployment unit in the physical deployment diagram. The deployment unit is first divided according to the partition, and then sorted according to the deployment unit name. At the same time, the number of deployment units and the number of rows placed in each row in each partition should be determined according to the page width and height and the number of deployment units placed in each row.

[0129] C3: Determine the container position of the container-type component based on the preset fine-grained display component and the containment relationship with other components; other components have a containment relationship and / or association relationship with the preset fine-grained display component.

[0130] The difference between container components and non-container components is that container components cannot be directly dragged and added to other UI components in the IDE design interface. Generally, multiple UI components are specified as templates through the attribute templates, and then data is loaded through data binding.

[0131] C4: Based on the association relationship between each view component, determine the position of the relationship line corresponding to each view component.

[0132] Among them, the association relationships between various view components include the association relationship between the deployment unit and the deployment instance, the association relationship between the deployment unit and the park to which it belongs, the association relationship between the deployment unit and the network partition to which it belongs, the association relationship between the deployment unit and the associated storage, the association relationship between the deployment unit and the switch, etc.

[0133] C5: Determine the layout position of each view component in the view based on component data, relationship data, container position, relationship line position, rendering information, and pre-acquired node positions corresponding to each view component.

[0134] Among them, based on the container position, the position of the relationship connection, the rendering information and the node positions corresponding to each view component acquired in advance, the relationship between components (association relationship, inclusion relationship), etc., the layout position of the component in the view is calculated through the view layout rules.

[0135] S107: Draw the view based on the layout position, style information and rendering information, obtain the view drawing result and display it.

[0136] The specific process of drawing the view based on the layout position, style information and rendering information, obtaining the view drawing result and displaying it is as follows:

[0137] First, by presetting the display parameters of the display device, the browser size parameters, the style information and the rendering information, the view drawing is performed on the layout position of each view component in the view to obtain the view drawing result.

[0138] Among them, the preset display device can be a display screen, a tablet computer, etc.

[0139] The browser obtains view component and relationship data, view display rendering data, and layout position data of components and relationships.

[0140] Then, the view drawing results are displayed in the browser.

[0141] Among them, according to the resolution of the user's computer, the size of the browser, etc., the view is finally drawn and visualized in the browser.

[0142] Visualization is the theory, method and technology that uses computer graphics and image processing technology to convert data into graphics or images and display them on the screen, and then perform interactive processing.

[0143] Optionally, based on the view drawing results and the operating data time that the view needs to query, and according to the rules for obtaining operating state data, call the interface to query the operating data involved in the components contained in the view and the relationships between components. The operating data includes alarm data, capacity data, performance data, work order data, etc.

[0144] Among them, the acquisition rules mainly acquire objects (which components and the relationships between components), acquire the types of operation data (alarms, capacity, performance, work orders, etc.), acquire the time range, acquire specific indicators of the operation data, and acquire the display style of the operation data (bar charts, donut charts, icons, etc.).

[0145] According to the display rules of running data, find the location where the CI entry is displayed in the browser, and display the running data in the form of icons, icons, highlights, etc. on the component and relationship icons, containers or relationship lines. The display of view running data is realized, which increases the display information of the architecture view.

[0146] This solution establishes a definition mechanism for the display style of technical architecture views, which improves the standardization and readability of architecture views; forms the ability to automatically draw, effectively improving the efficiency of drawing architecture views; view drawing is driven by real-time data, which improves the accuracy and real-time nature of view data; defines and displays views in multiple fields and at multiple levels, solving the problem that the original manual view had a single perspective and could not display the view in a panoramic manner.

[0147] In the embodiments of the present application, there is no need for manual view drawing, which improves view drawing efficiency, obtains and updates architecture view data in real time, and implements real-time drawing, automatic layout, and drawing display functions of various types of technical architecture views in the browser, unifies similar view styles of technical architectures, improves the accuracy and completeness of technical architecture view data, and implements multi-perspective and multi-level automatic drawing display of technical architecture views.

[0148] refer to Figure 2 As shown, the process of processing the component data and the relationship data by the view layout rule in the above S106 to obtain the layout position of each view component in the view mainly includes the following steps:

[0149] S201: Determine a container class component from various view components, and complete view partitioning based on the container class component.

[0150] S202: Sort the components in the divided view partitions according to the sorting rule to obtain preset fine-grained display components.

[0151] S203: Determine the container position of the container class component based on the preset fine-grained display component and the inclusion relationship with other components; other components have an inclusion relationship and / or association relationship with the preset fine-grained display component.

[0152] S204: Based on the association relationship between each view component, determine the position of the relationship line corresponding to each view component.

[0153] S205: Determine the layout position of each view component in the view based on the component data, relationship data, container position, position of relationship lines, rendering information and pre-acquired node positions corresponding to each view component.

[0154] The execution process and execution principle of S201-S205 are consistent with the execution process and execution principle of processing component data and relationship data through view layout rules in the above S106 to obtain the layout position of each view component in the view, which can be used as a reference and will not be repeated here.

[0155] In an embodiment of the present application, style information and rendering information are processed through view layout rules to achieve the purpose of obtaining the layout position of each view component in the view.

[0156] refer to Figure 3 As shown, the process of drawing a view based on the layout position, style information and rendering information involved in S107, obtaining and displaying the view drawing result mainly includes the following steps:

[0157] S301: By presetting display parameters of a display device, browser size parameters, style information and rendering information, a view drawing is performed on the layout position of each view component in the view to obtain a view drawing result.

[0158] S302: Display the view drawing result in the browser.

[0159] The execution process and execution principle of S301-S302 are consistent with the execution process and execution principle of the above-mentioned S107 of drawing the view based on the layout position, style information and rendering information, obtaining the view drawing result and displaying it, which can be used as a reference and will not be repeated here.

[0160] In the embodiment of the present application, by presetting the display parameters of the display device and the browser size parameters, view drawing is performed on the layout position of each view component in the view to obtain the view drawing result, thereby achieving the purpose of displaying the view drawing result.

[0161] Based on the above embodiments Figure 1The disclosed automatic layout visualization method, the embodiment of the present application also discloses a corresponding automatic layout visualization system, such as Figure 4 As shown, the automatic layout visualization method mainly includes a first acquisition unit 401, a second acquisition unit 402, a third acquisition unit 403, a processing and packaging unit 404, a determination unit 405, a processing unit 406 and a drawing and display unit 407.

[0162] The first acquisition unit 401 is used to acquire request data; the request data is request data for initiating view access.

[0163] The second obtaining unit 402 is used to obtain the view area and view level corresponding to the requested data.

[0164] The third acquisition unit 403 is used to obtain component data and relationship data of each view component based on the view domain and the view hierarchy; the relationship data is used to represent the association relationship and / or inclusion relationship between each view component.

[0165] The processing and encapsulation unit 404 is used to process the component data and the relationship data, obtain the component data in a preset data format and the relationship data in a preset data format, and encapsulate them.

[0166] The determination unit 405 is used to determine the style information and rendering information corresponding to each component based on the encapsulated data; the style information is used to display the node position, container position and relationship connection position corresponding to each view component.

[0167] The processing unit 406 is used to process the component data and the relationship data according to the view layout rule to obtain the layout position of each view component in the view.

[0168] The drawing and displaying unit 407 is used to draw the view based on the layout position, style information and rendering information of each view component in the view, obtain the view drawing result and display it.

[0169] Furthermore, the processing and packaging unit 404 includes a first analysis and processing module, a second analysis and processing module, a first packaging module and a second packaging module.

[0170] The first parsing and processing module is used to parse and process the component data to obtain the component data in a preset data format.

[0171] The second parsing and processing module is used to parse and process the relational data to obtain relational data in a preset data format.

[0172] The first encapsulation module is used to encapsulate component data in a preset data format into a component attribute data list.

[0173] The second encapsulation module is used to encapsulate the relationship data in a preset data format into a component relationship data list.

[0174] Further, the processing unit 406 includes a first determination module, a sorting module, a second determination module, a third determination module and a fourth determination module.

[0175] The first determination module is used to determine the container class components from various view components and complete the view partition division based on the container class components.

[0176] The sorting module is used to sort the components in the divided view partitions according to the sorting rules to obtain preset fine-grained display components.

[0177] The second determination module is used to determine the container position of the container class component based on the preset fine-grained display component and the inclusion relationship with other components; other components have an inclusion relationship and / or an association relationship with the preset fine-grained display component.

[0178] The third determination module is used to determine the position of the relationship line corresponding to each view component based on the association relationship between each view component.

[0179] The fourth determination module is used to determine the layout position of each view component in the view based on component data, relationship data, container position, position of relationship connection line, rendering information and pre-acquired node positions corresponding to each view component.

[0180] Furthermore, the drawing and displaying unit 407 includes a drawing module and a displaying module.

[0181] A drawing module, used to perform view drawing on the layout position by presetting display parameters of a display device, browser size parameters, style information and rendering information, and obtain a view drawing result;

[0182] The display module is used to display the view drawing results in the browser.

[0183] Furthermore, the automatic layout-to-diagram visualization system also includes a definition unit.

[0184] Definition unit, used to define the components in the technical architecture and the component relationships between them.

[0185] The definition unit includes a first definition module, a second definition module and a third definition module.

[0186] The first definition module is used to define the display perspective of each component and the technical architecture view hierarchy, view name and entry object in the display perspective of each component; the display perspective includes at least a system view perspective, a storage view perspective, a network view perspective, and a resource pool view perspective.

[0187] The second definition module is used to define the display elements and standard display styles of each layer of the technical architecture view hierarchy; the display elements are used to characterize the association and inclusion relationships between the technical architecture components and various view components.

[0188] The third definition module defines the standard layout style and view layout rules of each component and the relationship between each component in the view.

[0189] Furthermore, the automatic layout-to-graph visualization system also includes a fourth acquisition unit and a display unit.

[0190] The fourth acquisition unit is used to acquire the operation data of each component in the view.

[0191] The display unit is used to display the operation data in a preset display form.

[0192] In the embodiments of the present application, there is no need for manual view drawing, which improves view drawing efficiency, obtains and updates architecture view data in real time, and implements real-time drawing, automatic layout, and drawing display functions of various types of technical architecture views in the browser, unifies similar view styles of technical architectures, improves the accuracy and completeness of technical architecture view data, and implements multi-perspective and multi-level automatic drawing display of technical architecture views.

[0193] For the aforementioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the order of the actions described, because according to the present application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0194] It should be noted that each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the embodiments can be referred to each other. For system embodiments, since they are basically similar to method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0195] The steps in the methods of the embodiments of the present application can be adjusted in order, combined, and deleted according to actual needs.

[0196] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are merely used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations.

[0197] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

[0198] The above is only a preferred implementation of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A visualization method for automatic layout drawing, characterized in that: The method comprises: Obtain request data; the request data is the request data for initiating view access; Obtain the view area and view level corresponding to the request data; Based on the view domain and the view hierarchy, component data and relationship data of each view component are obtained; the relationship data is used to characterize the association relationship and / or inclusion relationship between each view component; Processing the component data and the relationship data to obtain component data in a preset data format and relationship data in a preset data format and encapsulating them; Based on the encapsulated data, determine the style information and rendering information corresponding to each component; the style information is used to display the node position, container position and relationship connection position corresponding to each view component; Processing the component data and the relationship data according to the view layout rule to obtain the layout position of each view component in the view; The view is drawn based on the layout positions of the various view components in the view, the style information and the rendering information, and the view drawing result is obtained and displayed.

2. The method according to claim 1, characterized in that The processing of the component data and the relationship data to obtain the component data in a preset data format and the relationship data in a preset data format and encapsulating them includes: Parsing and processing the component data to obtain component data in a preset data format; Parsing and processing the relationship data to obtain relationship data in a preset data format; Encapsulating the component data in the preset data format into a component attribute data list; The relationship data in the preset data format is encapsulated into a component relationship data list.

3. The method according to claim 1, characterized in that The processing of the component data and the relationship data by using the view layout rule to obtain the layout position of each view component in the view includes: Determine a container class component from each view component, and complete view partition division based on the container class component; Sort the components in the divided view partitions according to the sorting rules to obtain preset fine-grained display components; Determine the container position of the container class component based on the inclusion relationship between the preset fine-grained display component and other components; the other components have an inclusion relationship and / or an association relationship with the preset fine-grained display component; Based on the association relationship between each view component, determine the position of the relationship line corresponding to each view component; Based on the component data, the relationship data, the container position, the position of the relationship line and the pre-acquired node position corresponding to each view component, the layout position of each view component in the view is determined.

4. The method according to claim 1, characterized in that The performing view drawing based on the layout position of each view component in the view, the style information and the rendering information, obtaining and displaying the view drawing result, includes: By presetting the display parameters of the display device, the browser size parameters, the style information and the rendering information, the layout position of each view component in the view is subjected to view drawing to obtain a view drawing result; The view drawing result is displayed in the browser.

5. The method according to claim 1, characterized in that: Before obtaining the request data, the method further includes: Define the components in the technical architecture and the relationships between them; The process of defining the components in the technical architecture and the component relationships between the components includes: Define the display perspective of each component and the technical architecture view layering, view name and entry object in the display perspective of each component; the display perspective at least includes the system view perspective, storage view perspective, network view perspective and resource pool view perspective; Define the display elements and display standard styles of each layer of the view in the technical architecture view hierarchy; the display elements are used to characterize the association and inclusion relationship between the technical architecture components and each view component; Define standard layout styles and view layout rules for components and their relationships in a view.

6. The method according to claim 1, characterized in that After drawing the view based on the layout position of each view component in the view, the style information and the rendering information, obtaining the view drawing result and displaying it, the method further includes: Obtaining operation data of each component in the view; The operating data is displayed in a preset display format.

7. A visualization system for automatic layout and mapping, characterized in that: The system comprises: A first acquisition unit is used to acquire request data; the request data is request data for initiating view access; A second acquisition unit, used to acquire a view field and a view level corresponding to the request data; A third acquisition unit is used to obtain component data and relationship data of each view component based on the view domain and the view hierarchy; the relationship data is used to represent the association relationship and / or inclusion relationship between each view component; A processing and encapsulation unit, used to process the component data and the relationship data, obtain component data in a preset data format and relationship data in a preset data format, and encapsulate them; A determination unit, used to determine style information and rendering information corresponding to each component based on the encapsulated data; the style information is used to display the node position, container position and relationship connection position corresponding to each view component; A processing unit, used to process the component data and the relationship data according to the view layout rule to obtain the layout position of each view component in the view; A drawing and display unit is used to perform view drawing based on the layout position of each view component in the view, the style information and the rendering information, obtain the view drawing result and display it.

8. The system according to claim 7, characterized in that The processing encapsulation unit comprises: A first parsing and processing module, used to parse and process the component data to obtain component data in a preset data format; A second parsing and processing module is used to parse and process the relationship data to obtain relationship data in a preset data format; A first encapsulation module, used for encapsulating the component data in the preset data format into a component attribute data list; The second encapsulation module is used to encapsulate the relationship data in the preset data format into a component relationship data list.

9. The system according to claim 7, characterized in that The processing unit comprises: A first determining module is used to determine a container class component from each view component, and complete the view partition division based on the container class component; A sorting module is used to sort the components in the divided view partitions according to the sorting rules to obtain preset fine-grained display components; A second determination module is used to determine the container position of the container class component based on the inclusion relationship between the preset fine-grained display component and other components; the other components have an inclusion relationship or an association relationship with the preset fine-grained display component; A third determination module is used to determine the position of the relationship line corresponding to each view component based on the association relationship between each view component; The fourth determination module is used to determine the layout position of each view component in the view based on the container position, the position of the relationship connection line, the rendering information and the node position corresponding to each view component acquired in advance.

10. The system according to claim 7, characterized in that The drawing display unit comprises: A drawing module, used to perform view drawing on the layout position by presetting display parameters of the display device and browser size parameters to obtain a view drawing result; The display module is used to display the view drawing result in the browser.

Images