Interface display method and system

Abstract

The present invention discloses an interface display method, comprising: receiving a target subsystem page loading instruction triggered by a user; obtaining a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, the configuration file including the development type, configuration data and loading address of the target subsystem; if the development type is an Iframe nested type, obtaining a subsystem interface corresponding to the target subsystem according to the loading address, and filling the configuration data into the subsystem interface to obtain a display interface; if the development type is a non-Iframe nested type, obtaining an API interface corresponding to the target subsystem according to the loading address; receiving drawing data returned by the target subsystem through the API interface, drawing an interface according to the drawing data and the configuration data, and obtaining a display interface. The beneficial effect of the present invention is that different pages customized according to different needs can be laid out and displayed in a more flexible manner.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of Internet technology applications, and in particular to an interface display method and system. Technical Background

[0002] At present, there are many systems on the market, especially OA systems. There are many cards on the workbench, but they are generally one system, and the data source and card definition are completed by the OA system.

[0003] When the client determines the layout of the displayed page, in the prior art, the layout design such as the typesetting and color matching of the different contents in the page can be determined first, and then the corresponding layout can be implemented by writing code, and then after various tests, the page to be displayed can be finally published. For the published page, the front-end browser or client can send a page request to the back-end server, and the back-end can directly return the page data so that the front-end can layout and display the page according to the page data. However, when multiple systems are integrated, each subsystem must have its own card corresponding to different pages and assigned to different groups of people, which is difficult to achieve for the original single-configuration subsystem. Summary of the invention

[0004] In view of this, an object of an embodiment of the present invention is to provide an interface display method and system, which can layout and display different pages customized according to different requirements in a more flexible manner.

[0005] To achieve the above object, an embodiment of the present invention provides an interface display method, comprising:

[0006] Receive a target subsystem page loading instruction triggered by a user;

[0007] Acquire a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, wherein the configuration file includes the development type, configuration data and loading address of the target subsystem;

[0008] Determine whether the development type is an Iframe nested type or a non-Iframe nested type;

[0009] If the development type is an Iframe nested type, the subsystem interface corresponding to the target subsystem is obtained according to the loading address, and the configuration data is filled into the subsystem interface to obtain a display interface of the target subsystem;

[0010] If the development type is a non-Iframe nested type, obtaining an API interface corresponding to the target subsystem according to the loading address;

[0011] The drawing data returned by the target subsystem through the API interface is received, and an interface is drawn according to the drawing data and the configuration data to obtain a display interface of the target subsystem.

[0012] Furthermore, before receiving the target subsystem page loading instruction triggered by the user, the method includes:

[0013] Receiving a login instruction from the user;

[0014] Acquire a workbench main interface according to the login instruction, wherein the workbench main interface includes a subsystem card list;

[0015] receiving a configuration instruction of a target subsystem card selected by the user in the subsystem card list;

[0016] A configuration file corresponding to the target subsystem card is generated according to the configuration instruction.

[0017] Further, acquiring the subsystem interface corresponding to the target subsystem according to the loading address includes:

[0018] A subsystem gateway linking the subsystem interface via the loading address;

[0019] Receiving an authentication result of the subsystem gateway authenticating the loading address through single sign-on;

[0020] If the authentication result is authentication passed, the subsystem interface corresponding to the target subsystem is obtained.

[0021] Furthermore, before acquiring the API interface corresponding to the target subsystem according to the loading address, the method further includes:

[0022] Obtain the key of the system account currently logged in by the user;

[0023] The key is uploaded to the target subsystem, so that the target subsystem uses the key as a salt value for encryption, and uses the salt value to encrypt the drawing data to obtain transmission data.

[0024] Further, the receiving the drawing data returned by the target subsystem through the API interface includes:

[0025] The drawing data is received after the target subsystem decrypts the transmission data through the API interface.

[0026] Further, the receiving the drawing data returned by the target subsystem through the API interface includes:

[0027] Obtain the transmission format of the API interface;

[0028] The drawing data transmitted by the target subsystem through the API interface according to the transmission format is received.

[0029] Furthermore, the drawing of the interface according to the drawing data and the configuration data to obtain the display interface of the target subsystem includes:

[0030] Calling Echarts component to draw graphics for the drawing data;

[0031] The configuration data is used to fill the drawn graphics interface to obtain the display interface of the target subsystem.

[0032] To achieve the above purpose, an embodiment of the present invention further provides an interface display system, including:

[0033] A receiving module, used for receiving a target subsystem page loading instruction triggered by a user;

[0034] A first acquisition module, configured to acquire a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, wherein the configuration file includes a development type, configuration data, and a loading address of the target subsystem;

[0035] A judgment module, used for judging whether the development type is an Iframe nested type or a non-Iframe nested type;

[0036] A second acquisition module is used for acquiring a subsystem interface corresponding to the target subsystem according to the loading address if the development type is an Iframe nested type, and filling the configuration data into the subsystem interface to obtain a display interface of the target subsystem;

[0037] A third acquisition module is used to acquire the API interface corresponding to the target subsystem according to the loading address if the development type is a non-Iframe nested type;

[0038] The drawing module is used to receive the drawing data returned by the target subsystem through the API interface, and to draw an interface according to the drawing data and the configuration data to obtain a display interface of the target subsystem.

[0039] To achieve the above-mentioned purpose, an embodiment of the present invention further provides a computer device, which includes a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the computer program is executed by the processor, the steps of the interface display method described above are implemented.

[0040] To achieve the above objectives, an embodiment of the present invention further provides a computer-readable storage medium, in which a computer program is stored. The computer program can be executed by at least one processor so that the at least one processor performs the steps of the interface display method as described above.

[0041] The interface display method and system provided by the embodiment of the present invention obtains the configuration file in the user's subsystem page loading instruction, and then judges the development type in the configuration file to determine whether the development type is an Iframe nested type. If the development type is an Iframe nested type, the subsystem interface corresponding to the loading address can be displayed; if the development type is a non-Iframe nested type, the corresponding API interface is called to transmit the drawing data, and the interface drawing is performed on the drawing data; the client can layout and display different pages customized according to different needs in a more flexible way with less repetitive work. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 This is a flow chart of Embodiment 1 of the interface display method of the present invention.

[0043] Figure 2 This is a flow chart of step S10 in the first embodiment of the present invention.

[0044] Figure 3 This is a flowchart of step S106 in the first embodiment of the present invention.

[0045] Figure 4 This is a flowchart of step S108 in the first embodiment of the present invention.

[0046] Figure 5 This is a flowchart of step S107 in the first embodiment of the present invention.

[0047] Figure 6 This is a flowchart of step S110 in the first embodiment of the present invention.

[0048] Figure 7 This is a schematic diagram of program modules of the second embodiment of the interface display system of the present invention.

[0049] Figure 8 This is a schematic diagram of the hardware structure of the computer device embodiment 3 of the present invention. DETAILED DESCRIPTION

[0050] In order to make the purpose, technical scheme and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0051] Embodiment 1

[0052] See also Figure 1 , showing a flowchart of the steps of the interface display method of the first embodiment of the present invention. It can be understood that the flowchart in the embodiment of the method is not used to limit the order of executing the steps. The following is an exemplary description with the computer device 2 as the execution subject. The details are as follows.

[0053] Step S100, receiving a target subsystem page loading instruction triggered by a user.

[0054] Specifically, the user selects the target subsystem in the workbench main interface and sets the target subsystem. After the setting is completed, the target subsystem page loading instruction is triggered. The target subsystem page loading instruction is used to load the display page of the set target subsystem. The target subsystem page loading instruction includes the user's system account and password.

[0055] For example, see Figure 2 , before step S100, comprising step S10:

[0056] Step S10A, receiving a login instruction from the user.

[0057] Specifically, before receiving the subsystem page loading instruction triggered by the user, the user logs in to the system. When the user fills in the user's system account and password, the login request and the system account and password generate a login instruction. When the user logs in, the system identifies the user's tag. If the user's tag is a card administrator user, customize the card list of the main interface according to the preset card template, and then configure the subsystem, URL, user tag and other information connected to each card. If the subsystem also has a card, the card template of the main interface is configured to the card template of the subsystem's subinterface. If the user's tag is a non-card administrator user, the corresponding card list is loaded in the main interface according to the preset conditions, and the non-card administrator user can make further settings on the card list. The user's tag can also be a tag such as user type, user role, or the organization to which the user belongs.

[0058] Step S10B, obtaining a workbench main interface according to the login instruction, wherein the workbench main interface includes a subsystem card list.

[0059] Specifically, after the user successfully logs in, the system displays the main interface of the workbench, which includes a card list pre-set by the user, and the card type is pre-set. The user can call the configuration file of the card list to set the display type and display content of each card in the card list; the display type of the card can be: pie chart, column chart, bar chart, ranking list, etc.; the display content of the card can be: calendar, news, to-do tasks, to-do summary, etc. When defining the card, a check box will be configured to select whether to display by default. If checked, it will be matched according to the label corresponding to the user's account (which can be an account), and the card (or card list) with the matching label will be displayed.

[0060] Step S10C: receiving a configuration instruction of a target subsystem card selected by the user in the subsystem card list.

[0061] Specifically, select the target subsystem card in the subsystem card list, and after clicking the target subsystem card, the configuration instruction of the target subsystem card is triggered. The configuration instruction is to configure the display page of the target subsystem corresponding to the target subsystem card. According to the configuration instruction, the configuration file of the target subsystem is obtained to configure the display interface of the target subsystem displayed corresponding to the target subsystem card.

[0062] Step S10D: generating a configuration file corresponding to the target subsystem card according to the configuration instruction.

[0063] Specifically, define the target subsystem card, including the size of the target subsystem card, whether to display by default, the display format of the subsystem, the URL of the data source, and the user's tag (such as whether to display based on the user type, whether to display the user role, this item is extensible), and obtain the configuration file

[0064] Step S102: acquiring a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, wherein the configuration file includes a development type, configuration data and a loading address of the target subsystem.

[0065] Specifically, according to the target subsystem page loading instruction, the configuration file is linked to the xml file, the development type is the interface type, the loading address is the address of the corresponding card link, and the configuration data is the data that the user needs to display in the development type.

[0066] Step S104, determining whether the development type is an Iframe nested type or a non-Iframe nested type.

[0067] Specifically, it is determined whether the interface type is an Iframe nested type, indicating whether a pre-drawn subsystem interface is called into the current main interface; if a prepared subsystem interface needs to be called, it is an Iframe nested type; if a prepared subsystem interface does not need to be called, it is a non-Iframe nested type. If it is a non-Iframe nested type, it is necessary to obtain the corresponding drawing data through the API interface, and draw the drawing data according to the setting data; if it is an Iframe nested type, it is not necessary to draw graphics, and only the user data needs to be filled into the corresponding subsystem interface. When it is necessary to nest the original set page into the current page, Iframe nesting can be used. There are two ways to use Iframe nesting: 1) direct nesting without logging in to other websites; 2) You need to log in to other websites to obtain the nested page; the embodiment of the present invention adopts the second method.

[0068] Step S106, if the development type is an Iframe nested type, the subsystem interface corresponding to the target subsystem is obtained according to the loading address, and the configuration data is filled into the subsystem interface to obtain the display interface of the target subsystem.

[0069] Specifically, if the development type is an Iframe nested type, the corresponding target subsystem interface is called. When the loading address is linked to the corresponding subsystem interface, the loading address first passes through the system gateway of the subsystem interface, and the system gateway authenticates the loading address, wherein the authentication method is SSO (Single Sign-On) authentication.

[0070] For example, see Figure 3 , the step S106 comprises:

[0071] Step S106A: linking the subsystem gateway of the subsystem interface through the loading address.

[0072] Specifically, the loading address can be linked to the storage address of the subsystem interface, and the subsystem interface can be obtained after passing through the subsystem gateway.

[0073] Step S106B, receiving the authentication result of the subsystem gateway authenticating the loading address through single sign-on.

[0074] Specifically, the authentication result is whether the authentication loading address can pass through the subsystem gateway of the corresponding target subsystem. Single sign-on is a one-time authentication login by the user. After the user logs in once on the identity authentication server, he can obtain the permission to access other related systems and application software in the single sign-on system. At the same time, this implementation does not require the administrator to modify the user's login status or other information. This means that in multiple application systems, users only need to log in once to access all mutually trusted application systems. This method reduces the time consumption caused by login, assists user management, and is currently more popular. To realize the SSO function and allow users to log in only once, the application system must be able to identify users who have logged in. The application system should be able to identify and extract the ticket, and through communication with the authentication system, it can automatically determine whether the current user has logged in, thereby completing the single sign-on function.

[0075] in addition:

[0076] (1) A single user information database is not necessary. Many systems cannot store all user information centrally. User information should be allowed to be placed in different storages. In fact, as long as the authentication system is unified and the ticket generation and verification are unified, single sign-on can be achieved regardless of where the user information is stored.

[0077] (2) A unified authentication system does not mean that there is only a single authentication server.

[0078] When a user accesses application system 1, he is authenticated by the first authentication server and obtains a ticket generated by the server. When he accesses application system 2, authentication server 2 can recognize that the ticket is generated by the first server, and exchanges authentication information through a standard communication protocol (such as SAML) between authentication servers, and the SSO function can still be completed.

[0079] Step S106C: if the authentication result is authentication passed, then obtain the subsystem interface corresponding to the target subsystem.

[0080] Specifically, if the authentication is passed, the corresponding subsystem interface is called, and the configuration data is filled into the corresponding subsystem interface to obtain the display interface of the subsystem; if the SSO authentication is not passed, the corresponding subsystem interface is not called.

[0081] Step S108: If the development type is a non-Iframe nested type, the API interface corresponding to the target subsystem is obtained according to the loading address.

[0082] Specifically, if the development type is a non-Iframe nested type, the API interface is called to obtain the drawing data of the interface, and the loading address can be linked to the corresponding API interface.

[0083] Exemplarily, the step S108 includes:

[0084] The drawing data is received after the target subsystem decrypts the transmission data through the API interface.

[0085] Specifically, before calling the API interface, obtain the key of the system account currently logged in by the user, encrypt the key and drawing data, and obtain the transmission data. When calling the API interface, obtain the transmission data, transmit the transmission data through the API interface, and determine whether the API interface can decrypt and verify the transmission data. When decrypting, obtain the key according to the account ID of the system currently logged in by the user, and decrypt the transmission data. If the decryption is successful, it proves that the API interface is legal, and the API interface can return the corresponding data. If the decryption fails, it is determined that the call is an illegal request. This ensures that the API interface will not be illegally accessed. Ensure the security of the API interface and prevent data leakage. If the API interface successfully decrypts the transmission data, obtain the drawing data corresponding to the development type; if the API interface fails to decrypt the transmission data, it means that the subsystem page loading instruction is illegally loaded, and the API interface does not transmit data.

[0086] For example, see Figure 4 , the step S108 further includes:

[0087] Step S108A, obtaining the transmission format of the API interface.

[0088] Specifically, in the configuration file, the transmission format of the output parameters and the transmission format of the input parameters of the API interface are set, and when data is transmitted, the transmission format of the output parameters is obtained.

[0089] Step S108B: receiving the drawing data transmitted by the target subsystem through the API interface according to the transmission format.

[0090] Specifically, the API interface returns the drawing data according to the transmission format of the output parameters on the configuration document without the need for data conversion.

[0091] For example, see Figure 5 , before step S108, step S107 is included:

[0092] Step S107A, obtaining the key of the system account currently logged in by the user.

[0093] Specifically, the user's key is obtained and decrypted according to the account ID of the system that the user is currently logged in.

[0094] Step S107B: uploading the key to the target subsystem, so that the target subsystem uses the key as an encryption salt value, and uses the salt value to encrypt the drawing data to obtain transmission data.

[0095] Specifically, data encryption is to encrypt the requested drawing data using the key as the encrypted salt value. For example, the card configuration interface API is (A1, A2, A3), A1 and A2 are the real input parameters, A3 is the signature verification (key), then A1 and A2 are the configuration parameters, and A3 is to encrypt A1=XXX&A2=XXX to obtain the configuration data of A3, that is, the transmission data.

[0096] Step S110 , receiving drawing data returned by the target subsystem through the API interface, performing interface drawing according to the drawing data and the configuration data, and obtaining a display interface of the target subsystem.

[0097] Specifically, the drawing data and the data of the interface corresponding to the drawing development type are drawn through the Echarts component. The drawing data is cut according to the format of the interface through the Echarts component. Most of the remaining data is related to the configuration data, and it is necessary to obtain the corresponding drawing data and setting data for graphics drawing.

[0098] For example, see Figure 6 , the step S110 comprises:

[0099] Step S110A, calling the Echarts component to draw graphics for the drawing data.

[0100] Specifically, the Echarts component draws the overall framework of the interface based on the drawing data. It can also load the schedule module on the interface, add schedules, to-do items, etc. by loading the calendar plug-in. The calendar plug-in uses the plug-in of the vue official website. And when there are important events or important dates, set whether to send message reminders on the calendar. Set the level and content of important events on the data of the calendar plug-in, call the message interface according to the level of important events, and then send content messages to users for users to view.

[0101] Step S110B: Filling the drawn graphics with the configuration data to obtain a display interface of the target subsystem.

[0102] Specifically, the drawing data is filled into the drawn interface framework to obtain the display interface of the target subsystem. The interface can also be rendered by a rendering engine to make the display interface more flexible and vivid. The rendering engine can be implemented by a dynamic language (such as JavaScript language), that is, the functions contained in the rendering engine are written in a dynamic language (such as JavaScript language). The implementation of the rendering engine can be divided into two parts, where part of it is implemented in natural languages ​​such as c / c++ for performance considerations and multi-threading, and the other part is implemented in dynamic languages, such as JavaScript language. Of course, the rendering engine can also be implemented entirely in natural languages ​​such as c / c++.

[0103] Embodiment 2

[0104] Please continue reading Figure 7 , showing a schematic diagram of the program modules of the second embodiment of the interface display system of the present invention. In this embodiment, the interface display system 20 may include or be divided into one or more program modules, one or more program modules are stored in a storage medium, and are executed by one or more processors to complete the present invention and implement the above-mentioned interface display method. The program module referred to in the embodiment of the present invention refers to a series of computer program instruction segments that can complete specific functions, and is more suitable for describing the execution process of the interface display system 20 in the storage medium than the program itself. The following description will specifically introduce the functions of each program module of this embodiment:

[0105] The receiving module 200 is used to receive a target subsystem page loading instruction triggered by a user.

[0106] Specifically, the user selects the target subsystem in the workbench main interface and sets the target subsystem. After the setting is completed, the target subsystem page loading instruction is triggered. The target subsystem page loading instruction is used to load the display page of the set target subsystem. The target subsystem page loading instruction includes the user's system account and password.

[0107] The first acquisition module 202 is used to acquire a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, wherein the configuration file includes the development type, configuration data and loading address of the target subsystem.

[0108] Specifically, according to the target subsystem page loading instruction, the configuration file is linked to the xml file, the development type is the interface type, the loading address is the address of the corresponding card link, and the configuration data is the data that the user needs to display in the development type.

[0109] The judgment module 204 is used to judge whether the development type is an Iframe nesting type or a non-Iframe nesting type.

[0110] Specifically, it is determined whether the interface type is an Iframe nested type, indicating whether a pre-drawn subsystem interface is called into the current main interface; if a prepared subsystem interface needs to be called, it is an Iframe nested type; if a prepared subsystem interface does not need to be called, it is a non-Iframe nested type. If it is a non-Iframe nested type, it is necessary to obtain the corresponding drawing data through the API interface, and draw the drawing data according to the setting data; if it is an Iframe nested type, it is not necessary to draw graphics, and only the user data needs to be filled into the corresponding subsystem interface. When it is necessary to nest the original set page into the current page, Iframe nesting can be used. There are two ways to use Iframe nesting: 1) direct nesting without logging in to other websites; 2) You need to log in to other websites to obtain the nested page; the embodiment of the present invention adopts the second method.

[0111] The second acquisition module 206 is used to acquire the subsystem interface corresponding to the target subsystem according to the loading address if the development type is an Iframe nested type, and fill the configuration data into the subsystem interface to obtain the display interface of the target subsystem.

[0112] Specifically, if the development type is an Iframe nested type, the corresponding target subsystem interface is called. When the loading address is linked to the corresponding subsystem interface, the loading address first passes through the system gateway of the subsystem interface, and the system gateway authenticates the loading address, wherein the authentication method is SSO (Single Sign-On) authentication.

[0113] Exemplarily, the second acquisition module 206 is further used for:

[0114] A subsystem gateway of the subsystem interface is linked via the loading address.

[0115] Specifically, the loading address can be linked to the storage address of the subsystem interface, and the subsystem interface can be obtained after passing through the subsystem gateway.

[0116] An authentication result of the subsystem gateway authenticating the loading address through single sign-on is received.

[0117] Specifically, the authentication result is whether the authentication loading address can pass through the subsystem gateway of the corresponding target subsystem. Single sign-on is a one-time authentication login by the user. After the user logs in once on the identity authentication server, he can obtain the permission to access other related systems and application software in the single sign-on system. At the same time, this implementation does not require the administrator to modify the user's login status or other information. This means that in multiple application systems, users only need to log in once to access all mutually trusted application systems. This method reduces the time consumption caused by login, assists user management, and is currently more popular. To realize the SSO function and allow users to log in only once, the application system must be able to identify users who have logged in. The application system should be able to identify and extract the ticket, and through communication with the authentication system, it can automatically determine whether the current user has logged in, thereby completing the single sign-on function.

[0118] in addition:

[0119] (1) A single user information database is not necessary. Many systems cannot store all user information centrally. User information should be allowed to be placed in different storages. In fact, as long as the authentication system is unified and the ticket generation and verification are unified, single sign-on can be achieved regardless of where the user information is stored.

[0120] (2) A unified authentication system does not mean that there is only a single authentication server.

[0121] When a user accesses application system 1, he is authenticated by the first authentication server and obtains a ticket generated by the server. When he accesses application system 2, authentication server 2 can recognize that the ticket is generated by the first server, and exchanges authentication information through a standard communication protocol (such as SAML) between authentication servers, and the SSO function can still be completed.

[0122] If the authentication result is authentication passed, the subsystem interface corresponding to the target subsystem is obtained.

[0123] Specifically, if the authentication is passed, the corresponding subsystem interface is called, and the configuration data is filled into the corresponding subsystem interface to obtain the display interface of the subsystem; if the SSO authentication is not passed, the corresponding subsystem interface is not called.

[0124] The third acquisition module 208 is used to acquire the API interface corresponding to the target subsystem according to the loading address if the development type is a non-Iframe nested type.

[0125] Specifically, if the development type is a non-Iframe nested type, the API interface is called to obtain the drawing data of the interface, and the loading address can be linked to the corresponding API interface.

[0126] Exemplarily, the third acquisition module 208 is further used for:

[0127] The drawing data is received after the target subsystem decrypts the transmission data through the API interface.

[0128] Specifically, before calling the API interface, obtain the key of the system account currently logged in by the user, encrypt the key and drawing data, and obtain the transmission data. When calling the API interface, obtain the transmission data, transmit the transmission data through the API interface, and determine whether the API interface can decrypt and verify the transmission data. When decrypting, obtain the key according to the account ID of the system currently logged in by the user, and decrypt the transmission data. If the decryption is successful, it proves that the API interface is legal, and the API interface can return the corresponding data. If the decryption fails, it is determined that the call is an illegal request. This ensures that the API interface will not be illegally accessed. Ensure the security of the API interface and prevent data leakage. If the API interface successfully decrypts the transmission data, obtain the drawing data corresponding to the development type; if the API interface fails to decrypt the transmission data, it means that the subsystem page loading instruction is illegally loaded, and the API interface does not transmit data.

[0129] Exemplarily, the third acquisition module 208 is further used for:

[0130] Get the transmission format of the API interface.

[0131] Specifically, in the configuration file, the transmission format of the output parameters and the transmission format of the input parameters of the API interface are set, and when data is transmitted, the transmission format of the output parameters is obtained.

[0132] The drawing data transmitted by the target subsystem through the API interface according to the transmission format is received.

[0133] Specifically, the API interface returns the drawing data according to the transmission format of the output parameters on the configuration document without the need for data conversion.

[0134] The drawing module 210 is used to receive the drawing data returned by the target subsystem through the API interface, and perform interface drawing according to the drawing data and the configuration data to obtain a display interface of the target subsystem.

[0135] Specifically, the drawing data and the data of the interface corresponding to the drawing development type are drawn through the Echarts component. The drawing data is cut according to the format of the interface through the Echarts component. Most of the remaining data is related to the configuration data, and it is necessary to obtain the corresponding drawing data and setting data for graphics drawing.

[0136] Exemplarily, the drawing module 210 is further used for:

[0137] The Echarts component is called to draw graphics for the drawing data.

[0138] Specifically, the Echarts component draws the overall framework of the interface based on the drawing data. It can also load the schedule module on the interface, add schedules, to-do items, etc. by loading the calendar plug-in. The calendar plug-in uses the plug-in of the vue official website. And when there are important events or important dates, set whether to send message reminders on the calendar. Set the level and content of important events on the data of the calendar plug-in, call the message interface according to the level of important events, and then send content messages to users for users to view.

[0139] The configuration data is used to fill the drawn graphics interface to obtain the display interface of the target subsystem.

[0140] Specifically, the drawing data is filled into the drawn interface framework to obtain the display interface of the target subsystem. The interface can also be rendered by a rendering engine to make the display interface more flexible and vivid. The rendering engine can be implemented by a dynamic language (such as JavaScript language), that is, the functions contained in the rendering engine are written in a dynamic language (such as JavaScript language). The implementation of the rendering engine can be divided into two parts, where part of it is implemented in natural languages ​​such as c / c++ for performance considerations and multi-threading, and the other part is implemented in dynamic languages, such as JavaScript language. Of course, the rendering engine can also be implemented entirely in natural languages ​​such as c / c++.

[0141] Embodiment 3

[0142] See also Figure 8 , is a schematic diagram of the hardware architecture of the computer device of the third embodiment of the present invention. In this embodiment, the computer device 2 is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions. The computer device 2 can be a rack server, a blade server, a tower server or a cabinet server (including an independent server, or a server cluster composed of multiple servers), etc. Figure 8As shown, the computer device 2 at least includes, but is not limited to, a memory 21, a processor 22, a network interface 23, and an interface display system 20 that can be interconnected and communicated via a system bus. Among them:

[0143] In this embodiment, the memory 21 includes at least one type of computer-readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 21 can be an internal storage unit of the computer device 2, such as a hard disk or memory of the computer device 2. In other embodiments, the memory 21 can also be an external storage device of the computer device 2, such as a plug-in hard disk equipped on the computer device 2, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. Of course, the memory 21 can also include both the internal storage unit of the computer device 2 and its external storage device. In this embodiment, the memory 21 is generally used to store the operating system and various application software installed on the computer device 2, such as the program code of the interface display system 20 of the second embodiment. In addition, the memory 21 can also be used to temporarily store various types of data that have been output or are to be output.

[0144] The processor 22 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 22 is generally used to control the overall operation of the computer device 2. In this embodiment, the processor 22 is used to run the program code stored in the memory 21 or process data, such as running the interface display system 20 to implement the interface display method of the first embodiment.

[0145] The network interface 23 may include a wireless network interface or a wired network interface, and the network interface 23 is generally used to establish a communication connection between the server 2 and other electronic devices. For example, the network interface 23 is used to connect the server 2 to an external terminal through a network, to establish a data transmission channel and a communication connection between the server 2 and the external terminal, etc. The network may be an intranet, the Internet, the Global System of Mobile communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi and other wireless or wired networks. It should be pointed out that Figure 8 Computer device 2 is shown only with components 20 - 23 , but it should be understood that implementation of all of the components shown is not a requirement, and more or fewer components may alternatively be implemented.

[0146] In this embodiment, the interface display system 20 stored in the memory 21 can also be divided into one or more program modules, and the one or more program modules are stored in the memory 21 and executed by one or more processors (processor 22 in this embodiment) to complete the present invention.

[0147] For example, Figure 7 The program module schematic diagram of the second embodiment of the interface display system 20 is shown. In this embodiment, the interface display system 20 can be divided into a receiving module 200, a first acquisition module 202, a judgment module 204, a second acquisition module 206, a third acquisition module 208 and a drawing module 210. Among them, the program module referred to in the present invention refers to a series of computer program instruction segments that can complete specific functions, which is more suitable for describing the execution process of the interface display system 20 in the computer device 2 than a program. The specific functions of the program modules 200-210 have been described in detail in the second embodiment and will not be repeated here.

[0148] Embodiment 4

[0149] This embodiment also provides a computer-readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (for example, an SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a disk, an optical disk, a server, an App application store, etc., on which a computer program is stored, and the program realizes the corresponding function when executed by the processor. The computer-readable storage medium of this embodiment is used to store the interface display system 20, and when executed by the processor, the interface display method of the first embodiment is realized.

[0150] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0151] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method.

[0152] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. An interface display method, characterized in that: include: Receive a target subsystem page loading instruction triggered by a user; Acquire a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, wherein the configuration file includes the development type, configuration data and loading address of the target subsystem; Determine whether the development type is an Iframe nested type or a non-Iframe nested type, and whether the development type is an Iframe nested type indicates whether to call a pre-drawn subsystem interface to the current main interface; If the development type is an Iframe nested type, the subsystem interface corresponding to the target subsystem is obtained according to the loading address, and the configuration data is filled into the subsystem interface to obtain a display interface of the target subsystem; If the development type is a non-Iframe nested type, obtaining an API interface corresponding to the target subsystem according to the loading address; Receiving drawing data returned by the target subsystem through the API interface, and performing interface drawing according to the drawing data and the configuration data to obtain a display interface of the target subsystem; Wherein, before receiving the target subsystem page loading instruction triggered by the user, the following steps are included: Receiving a login instruction from the user; Acquire a workbench main interface according to the login instruction, wherein the workbench main interface includes a subsystem card list; receiving a configuration instruction of a target subsystem card selected by the user in the subsystem card list; A configuration file corresponding to the target subsystem card is generated according to the configuration instruction.

2. The interface display method according to claim 1, characterized in that: The acquiring the subsystem interface corresponding to the target subsystem according to the loading address comprises: A subsystem gateway linking the subsystem interface via the loading address; Receiving an authentication result of the subsystem gateway authenticating the loading address through single sign-on; If the authentication result is authentication passed, the subsystem interface corresponding to the target subsystem is obtained.

3. The interface display method according to claim 1, characterized in that: Before acquiring the API interface corresponding to the target subsystem according to the loading address, the method includes: Obtain the key of the system account currently logged in by the user; The key is uploaded to the target subsystem, so that the target subsystem uses the key as a salt value for encryption, and uses the salt value to encrypt the drawing data to obtain transmission data.

4. The interface display method according to claim 3, characterized in that: The receiving the drawing data returned by the target subsystem through the API interface includes: The drawing data is received after the target subsystem decrypts the transmission data through the API interface.

5. The interface display method according to claim 4, characterized in that: The receiving the drawing data returned by the target subsystem through the API interface includes: Obtain the transmission format of the API interface; The drawing data transmitted by the target subsystem through the API interface according to the transmission format is received.

6. The interface display method according to claim 1, characterized in that: Drawing the interface according to the drawing data and the configuration data to obtain the display interface of the target subsystem includes: Calling Echarts component to draw graphics for the drawing data; The configuration data is used to fill the drawn graphics interface to obtain the display interface of the target subsystem.

7. An interface display system, characterized in that: include: A receiving module, used for receiving a target subsystem page loading instruction triggered by a user; A first acquisition module, configured to acquire a configuration file corresponding to the target subsystem according to the target subsystem page loading instruction, wherein the configuration file includes a development type, configuration data, and a loading address of the target subsystem; A judgment module, used for judging whether the development type is an Iframe nested type or a non-Iframe nested type, and whether the development type is an Iframe nested type indicates whether to call a pre-drawn subsystem interface to the current main interface; A second acquisition module is used for acquiring a subsystem interface corresponding to the target subsystem according to the loading address if the development type is an Iframe nested type, and filling the configuration data into the subsystem interface to obtain a display interface of the target subsystem; A third acquisition module is used to acquire the API interface corresponding to the target subsystem according to the loading address if the development type is a non-Iframe nested type; A drawing module, used for receiving drawing data returned by the target subsystem through the API interface, and performing interface drawing according to the drawing data and the configuration data to obtain a display interface of the target subsystem; Wherein, before receiving the target subsystem page loading instruction triggered by the user, the following steps are included: Receiving a login instruction from the user; Acquire a workbench main interface according to the login instruction, wherein the workbench main interface includes a subsystem card list; receiving a configuration instruction of a target subsystem card selected by the user in the subsystem card list; A configuration file corresponding to the target subsystem card is generated according to the configuration instruction.

8. A computer device, characterized in that: The computer device includes a memory and a processor. The memory stores a computer program that can be run on the processor. When the computer program is executed by the processor, the steps of the interface display method according to any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and the computer program can be executed by at least one processor so that the at least one processor executes the steps of the interface display method according to any one of claims 1 to 6.

Images