CN114047915A - Configuration application display method and device, electronic equipment and storage medium - Google Patents
Configuration application display method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN114047915A CN114047915A CN202111462300.8A CN202111462300A CN114047915A CN 114047915 A CN114047915 A CN 114047915A CN 202111462300 A CN202111462300 A CN 202111462300A CN 114047915 A CN114047915 A CN 114047915A
- Authority
- CN
- China
- Prior art keywords
- configuration
- configuration application
- plug
- application
- configuration information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
The application provides a display method of configuration application, an electronic device and a storage medium, wherein the display method of the configuration application comprises the following steps: obtaining configuration information of the configuration application; packaging the configuration information of the configuration application to obtain a configuration application display plug-in; and calling the configuration application display plug-in through a processing terminal, and displaying the configuration application according to the configuration application display plug-in. The configuration application configuration information codes after drawing is extracted and packaged, the configuration application display plug-in is independently used as one configuration application display plug-in, and the processing terminals call the configuration application display plug-in to display, so that the configuration applications can be displayed simultaneously if the plurality of processing terminals call the configuration application display plug-in simultaneously, repeated research and development of the configuration applications are not needed for different processing terminals, the research and development flow is simplified, and the maintenance efficiency is improved.
Description
Technical Field
The present application relates to the field of data processing technologies, and in particular, to a method and an apparatus for displaying a configuration application, an electronic device, and a storage medium.
Background
Before the configuration concept appeared, the task was realized by writing custom programs using BASIC language, C language, etc., and writing a specific program not only has a large workload and a long cycle, but also is easy to make mistakes. The configuration application software can complete the software functions required by a user in a simple mode like building blocks without writing a computer program, and can complete the work which needs months in the past through configuration for several days.
At present, the configuration application can only be used at a PC end after the drawing is completed, if the configuration application needs to be used on a mobile terminal applet, the configuration application of a set of mobile terminal applet needs to be developed again, however, the configuration application of the mobile terminal applet needs to be developed and maintained simultaneously, time and labor are consumed, and the problem that the terminals are inconsistent easily occurs during maintenance.
Disclosure of Invention
In view of this, an object of the embodiments of the present application is to provide a method for displaying a configuration application, an electronic device, and a storage medium, which solve the problems that the configuration application cannot be used in multiple third party terminals at the same time after the configuration application is drawn, and needs to be repeatedly developed, simplify the development process, and facilitate maintenance.
In a first aspect, an embodiment of the present application provides a method for displaying a configuration application, where the method includes: obtaining configuration information of the configuration application; packaging the configuration information of the configuration application to obtain a configuration application display plug-in; and calling the configuration application display plug-in through a processing terminal, and displaying the configuration application according to the configuration application display plug-in.
In the implementation process, the configuration application configuration information after the drawing is completed is packaged and is independently a configuration application display plug-in, and the processing terminal calls the configuration application display plug-in to display, so that the configuration application display plug-in can be called by a plurality of different processing terminals, the generated configuration application and the configuration information thereof can be displayed on a plurality of different processing terminals and further processed or edited, repeated research and development of the configuration application for different processing terminals are not needed, the research and development flow is simplified, the maintenance efficiency is improved, and the consistency of the configuration application on different processing terminals is also ensured.
With reference to the first aspect, an embodiment of the present application provides a first possible implementation manner of the first aspect, where: the configuration application display plug-in is generated at a generating terminal, and the processing terminal comprises one or more terminals different from the generating terminal.
In the implementation process, the processing terminal calls the configuration application display plug-in to display, the display can be performed on the generating terminal generated by the configuration application display plug-in, the display can be performed on one or more other terminals at the same time, repeated research and development of configuration applications are not needed for different processing terminals, the research and development flow is simplified, and the maintenance efficiency is improved.
With reference to the first aspect, an embodiment of the present application provides a second possible implementation manner of the first aspect, where: the configuration application display plug-in is dynamically updated based on the configuration information of the configuration application.
In the implementation process, the functional requirements change when the configuration application is drawn, and the configuration application display plug-in is updated synchronously, so that if the configuration application is adjusted and released by one key again, only the configuration information of the configuration application changes, and the configuration information read by the plurality of processing terminals changes simultaneously based on the called configuration application display plug-in, thereby realizing the same configuration application display.
With reference to the first aspect, an embodiment of the present application provides a third possible implementation manner of the first aspect, where: packaging the configuration information of the configuration application to obtain a configuration application display plug-in, comprising: packaging the configuration information of the configuration application by adopting a Webpack module packager to obtain an Html static page file; and determining the configuration application display plug-in according to the Html static page file.
In the implementation process, a Webpack module packaging tool is adopted to compile and package scattered configuration information codes into a JS file to obtain an Html static page file, and a configuration application display plug-in is determined based on the compiled Html static page file, so that all configuration function modules in the configuration application are independently packaged into npm tool display plug-ins in a blocking mode according to the display requirements of a user, and the problem that all codes are packaged together to generate a single file which is too large to cause slow loading is solved; the Webpack overall architecture is reasonable in design, high in expansibility and low in development and expansion difficulty, and packaging efficiency is improved.
With reference to the first aspect, an embodiment of the present application provides a fourth possible implementation manner of the first aspect, where: before the configuration application display plug-in is called by the processing terminal, the method further includes: uploading the configuration application presentation plug-in to npm repository to store the configuration application presentation plug-in to npm repository for invocation by the processing terminal.
In the implementation process, the configuration application display plug-in is uploaded to the npm warehouse for storage, so that when an npm install instruction is used at the processing terminal, a dependent file of the configuration application display plug-in is downloaded from the npm warehouse preferentially without additional configuration, and the calling efficiency is improved.
With reference to the first aspect, an embodiment of the present application provides a fifth possible implementation manner of the first aspect, where: the displaying the configuration application according to the configuration application display plug-in includes: adding a dependent configuration of the configuration application presentation plug-in to the processing terminal, the dependent configuration comprising npm configuration information of a repository; initializing the configuration application display plug-in based on the configuration information of the npm warehouse called by the terminal to obtain the initialized configuration application display plug-in; performing inverse analysis on the initialized configuration application display plug-in to obtain analysis data of the configuration application display plug-in; and displaying the configuration application according to the analysis data.
In the implementation process, calling npm the configuration application display plug-in of the warehouse, and performing inverse analysis on the packet data to realize the display of the configuration application function module; at each processing terminal, the configuration information of the npm warehouse only needs to be initialized and transmitted to the configuration application display plug-in unit in the foreground engineering, that is, only the same configuration application configuration needs to be taken from the same background interface, no matter how the configuration application is specifically displayed, when the configuration application configuration is updated, the configuration information read by the plurality of processing terminals is correspondingly updated, and the configuration application still realizes the same display at the processing terminals.
With reference to the first aspect, an embodiment of the present application provides a sixth possible implementation manner of the first aspect, where: the obtaining the configuration information of the configuration application includes: analyzing the configuration application through the generating terminal to obtain page configuration information of the configuration application and diagram element configuration information of the configuration application; and determining the configuration information of the configuration application according to the page configuration information of the configuration application and the chart element configuration information of the configuration application.
In the implementation process, the main page of the configuration application display plug-in is mainly used for analyzing page configuration information of the configuration application and rough configuration information of various chart elements; the diagram component of the configuration application display plug-in is mainly used for analyzing the specific configuration of various diagram elements of the configuration application. The function display of the configuration application can be realized by reading the configuration information in the configuration application display plug-in.
In a second aspect, an embodiment of the present application provides a configuration application display apparatus, including: an obtaining module, configured to obtain configuration information of the configuration application; the plug-in generation module is used for packaging the configuration information of the configuration application to obtain a configuration application display plug-in; the configuration application display plug-in is configured to be called by a processing terminal and displays the configuration application according to the configuration application display plug-in.
In the implementation process, the obtaining module can obtain the configuration information of the configuration application; the plug-in generation module can pack the configuration information of the configuration application to obtain a configuration application display plug-in; the configuration of the configuration application display plug-in is called by a processing terminal, and the configuration application is displayed according to the configuration application display plug-in.
In a third aspect, an embodiment of the present application further provides an electronic device, including: a processor, a memory storing machine-readable instructions executable by the processor, the machine-readable instructions being executable by the processor to perform the steps of the method described above when the electronic device is run.
In a fourth aspect, embodiments of the present application provide a computer-readable storage medium, on which a computer program is stored, which, when executed by a processor, performs the steps of the method described above.
In order to make the aforementioned objects, features and advantages of the present application more comprehensible, embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are required to be used in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and that those skilled in the art can also obtain other related drawings based on the drawings without inventive efforts.
Fig. 1 is a flowchart of a method for displaying a first configuration application according to an embodiment of the present application;
fig. 2 is a flowchart of a display method for a second configuration application according to an embodiment of the present application;
fig. 3 is a flowchart of a method for displaying a third configuration application according to an embodiment of the present disclosure;
fig. 4 is a flowchart of a method for displaying a fourth configuration application according to an embodiment of the present disclosure;
fig. 5 is a functional block diagram of a configuration application display device according to an embodiment of the present disclosure; and fig. 6 is a block schematic diagram of an electronic device provided in an embodiment of the present application.
Icon: 210-an obtaining module; 220-plug-in generation module; 300-an electronic device; 311-a memory; 312 — a storage controller; 313-a processor; 314-peripheral interfaces; 315-input-output unit; 316-display unit.
Detailed Description
The technical solution in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, in the description of the present application, the terms "first", "second", and the like are used only for distinguishing the description, and are not to be construed as indicating or implying relative importance.
The inventor of the present application notices that, in the using process of the configuration application function, if the configuration application is displayed at the PC end, a set of codes needs to be written for reading the configuration display configuration application; if the mobile terminal small program displays the configuration code, a set of codes needs to be written in the small program code again for reading the configuration display configuration application; if the code of the set of display configuration application needs to be updated, for example, a chart needs to be displayed newly or the display rule of an old chart is changed, the set of code needs to be updated in the code of the PC end at this time, and meanwhile, the set of code needs to be updated in the code of the mobile end applet, so that repeated research and development can be caused, and errors are easy to occur; if any side of the PC side or the mobile side small program is wrongly written, the display effect of the PC side and the mobile side small program is inconsistent or wrong, and two sets of small programs need to be maintained together in the later maintenance, so that the time and the labor are consumed.
Based on the above research, the embodiment of the application provides a method and a device for displaying configuration applications. The configuration information code for displaying the configuration application is extracted and packaged into the configuration application display plug-in, and the processing terminals call and display the configuration application in the form of the plug-in, so that the configuration application can be displayed simultaneously if the configuration application display plug-in is called by a plurality of processing terminals at the same time, repeated research and development of the configuration application are not needed for different processing terminals, the research and development flow is simplified, and the maintenance efficiency is improved.
Referring to fig. 1, a flow chart of a method for displaying a configuration application according to an embodiment of the present application is shown. The specific process shown in FIG. 1 will be described in detail below.
Step 100: obtaining configuration information of the configuration application.
Illustratively, the configuration means "configure", "set", and the like, and the configuration application means that a user combines the configurations in a simple manner like "building blocks" to complete the software functions required by the user, without repeatedly writing the computer program corresponding to each configuration.
And abstracting a service model and an equipment model in user service into configuration application based on an API (application programming interface) of the database and a model tool, and drawing in the configuration tool. And storing the business functions in the form of pages and various chart elements in the format of the configuration application according to the topological relation of the business system and the equipment model.
Optionally, through the analysis of the service model and the device model, the model object is abstracted into vector graphics including elements such as rectangles, ellipses, straight lines, broken lines, paths and the like, and the vector graphics can be filled through a brush gradually changing along the paths or the straight lines; each vector graphic can accept the address of a matrix object, and the matrix object is used for realizing graphic transformation including rotation, translation and scaling; when each vector graphic is drawn, a graphic transformation can be performed through the matrix object.
Furthermore, based on the JavaScript script, the logic calculation between vector graphics is realized, the basic graphics needed by the graphics template can be dragged to a drawing window from a basic graphics library containing basic graphics such as rectangles, ellipses, lines, connecting points, custom shapes, texts, pictures and the like, the attributes of the graphics instance are modified, and the drawing of the configuration application page and each chart element is completed.
In one embodiment, based on the above process, the configuration of the configuration application is formed by dragging, pulling, dragging, and binding data on the canvas of the configuration tool, so as to obtain the configuration information of the configuration application.
The configuration information of the configuration application may include the style configuration of various pages, diagrams and other elements such as length, width, background and title; the interactive configuration of elements such as multiple pages and diagrams can comprise element clicking, association relation and the like; the method can include various data configurations such as data interface address shown by a certain element, MQTT message queue transmission protocol subscription address, business data analysis rule and the like.
Furthermore, after the configuration application is drawn by the configuration tool drawing end, the system can convert the drawn page length, background color, elements, element positions and other charts and page data into json format data according to the drawing mode of the configuration application by clicking 'one-key release', and store the json format data in a database. When the subsequent processing terminal acquires data, the same data can be taken from the same background interface of the database.
Step 120: and packaging the configuration information of the configuration application to obtain a configuration application display plug-in.
Illustratively, a separate project is built for compiling and packaging based on the JavaScript framework of the front end of vue. Specifically, the configuration information code for displaying the configuration application is extracted and packaged into a configuration application display plug-in a tool kit form, wherein the tool kit can be a jar package similar to JavaScript data and can be used by other people.
And packaging the configuration information of the drawn configuration application to be independent into a configuration application display plug-in, namely packaging the configuration of the configuration application into the configuration application display plug-in. In the subsequent display process, the configuration application display plug-in can perform inverse analysis according to the configurations, so that the display and the use of the configuration application service function are realized.
Step 140: and calling the configuration application display plug-in through a processing terminal, and displaying the configuration application according to the configuration application display plug-in.
Illustratively, the processing terminal may include a PC terminal, a mobile terminal applet terminal, or any other terminal capable of supporting vue engineering.
When the processing terminal displays the configuration application, the configuration application display plug-in can be displayed in a page file of a foreground project of the processing terminal in the form of an Html plug-in, and the page file can be a static Html page or a dynamic Html page.
The configuration application display plug-in extracts json format data converted from configuration application configuration data from the relational database through an access database interface provided by the processing terminal according to the relative path of each element in the configuration application; and the configuration application display plug-in performs inverse analysis on the extracted json format configuration data, the data are inversely analyzed into a configuration page and each chart element before drawing, and the configuration page and each chart element are displayed in an Html page of the processing terminal.
Furthermore, all the display rules can be recorded in the configuration of the configuration application, and when the configuration application display plug-in analyzes the configuration of the configuration application reversely, the configuration diagram can be drawn reversely, the business data can be acquired according to the data configuration in the configuration information of the configuration application and displayed on elements such as a configuration page and each diagram, and certain interaction can be performed according to clicking of a certain element, and page skipping and the like can be performed in a linkage manner with other elements.
In one embodiment, the configuration application presentation plug-in is generated at the generating terminal, and the processing terminal comprises one or more terminals different from the generating terminal.
Illustratively, the generating terminal may be a front-end project established by any one of the processing terminals, or may be a calling terminal of any one of the processing terminals. The generating terminal can designate one of the plurality of processing terminals as a generating terminal for generating the configuration application display plug-in.
The processing terminal calls the configuration application display plug-in to display, the display can be performed on the generated terminal generated by the configuration application display plug-in, the display can be performed on one or more other terminals at the same time, repeated research and development of configuration applications are not needed for different processing terminals, the research and development flow is simplified, and the maintenance efficiency is improved.
In one embodiment, the configuration application presentation plug-in is dynamically updated based on configuration information of the configuration application.
Illustratively, the draw configuration application may be at the generating terminal, but it should be noted that: drawing the configuration application and packaging to generate the configuration application display plug-in are two independent processes.
Optionally, company a develops a configuration application presentation plug-in for calculating that any two numbers add up to several; the company B can use the configuration application of the company A to display the plug-in, and input data into the plug-in developed by the company A, such as 10 and 2, and the configuration application display plug-in returns an operation result 12; later third company wants to make an internet of things project, has the demand of adding and calculating two numbers 9 and 8, and third company can also use the configuration application display plug-in of first company to realize the project demand of third company and obtain the operation result 17.
It can be seen that: the configuration application display plug-in is a set of fixed display rules, and the realized function requirement is to receive two input numbers, then add the two numbers, and return the operation result to the user end. Therefore, the developed configuration application display plug-in can be an independent and random plug-in supporting end capable of calling the display, and is irrelevant to when and how to draw the configuration in the configuration application display plug-in.
The configuration application display plug-in is generated by packaging, the configuration application display plug-in and the configuration drawing application have no specific association relation in time and content, when the configuration drawing application is configured, the requirement on the configuration function changes, and the configuration application display plug-in can be synchronously updated according to the configuration application configuration.
Optionally, when the configuration of the configuration application is drawn, only a bar graph and a line graph are drawn on a configuration tool canvas for supporting the functional requirements of a user at first, and the generated configuration application display plug-in package only analyzes the bar graph and the line graph reversely and is correspondingly displayed and used; at the later stage, the configuration of the drawing configuration application adds new functional requirements, for example, a pie chart needs to be drawn on the configuration tool canvas for supporting new requirements, the configuration application display plug-in can be updated correspondingly, the display code of the pie chart configuration is added at the generation end, and the new configuration application display plug-in is generated by repackaging. Specifically, each configuration of the configuration application supports a new schema component requirement, which corresponds to an additional vue file in the folder of the configuration application display plug-in components to handle the schema component.
Referring to fig. 2, a flowchart of another configuration application displaying method according to an embodiment of the present application is provided. The specific process shown in fig. 2 will be described in detail below.
Specifically, step 120 may include step 121 and step 122.
Step 121: and packaging the configuration information of the configuration application by adopting a Webpack module packager to obtain an Html static page file.
Exemplarily, the Webpack module packager can be regarded as a module packaging tool, and can solve the problem of modular code packaging and package scattered JavaScript codes into a JS file; for codes with environmental compatibility problems, the Webpack module packager can realize compiling conversion on the codes through a loader mechanism in the packaging process and then package the codes; the Webpack module packager hides a complex code implementation process, only a simple tool is exposed for a user, the user can quickly achieve the purpose of packaging the code module by using the Webpack module packager, the Webpack overall architecture is reasonable in design, high in expansibility and low in development and expansion difficulty, and the packaging efficiency is improved.
Optionally, before packaging, the Webpack module packager establishes vue a main body project, initializes a package json file in vue the main body project for managing npm dependent versions, and installs the core module of the Webpack and the CLI module thereof, so that the CLI module can be quickly found and the Webpack module packager can be run through npx commands.
Further, an 'npx Webpack' command is operated, in the command executing process, the Webpack module packager can automatically convert configuration application configuration data in the database into a plurality of JS files of json format data to be compiled and packaged, and all module codes to be displayed are automatically packaged together according to module importing operation in the codes; vue, a dist directory is added under the root directory of the main project, and the packaged single JS file is automatically stored in the main.js file under the dist directory.
Step 122: and determining the configuration application display plug-in according to the Html static page file.
Illustratively, a main.js package file is introduced into an Html static page file index.html under the item of a newly-built "configuration application presentation plug-in" vue, and the introduction of the main.js file into the Html static page file can normally display the configuration of the configuration application, such as the page and each chart element, and can also realize the interaction related to the configuration. Packaging a plurality of configuration JS files of the configuration application to obtain an Html static page file type configuration application display plug-in.
A Webpack module packaging tool is adopted to compile and package scattered configuration information code files into a JS file to obtain an Html static page file, and a configuration application display plug-in is determined based on the compiled Html static page file, so that all configuration function modules in the configuration application are independently packaged into an npm tool display plug-in a blocking mode according to the display requirements of a user.
Referring to fig. 3, a flowchart of another configuration application displaying method according to an embodiment of the present application is provided. The specific flow shown in fig. 3 will be described in detail below.
Specifically, step 140 may be preceded by step 130.
Step 130: uploading the configuration application presentation plug-in to npm repository to store the configuration application presentation plug-in to npm repository for invocation by the processing terminal.
Exemplarily, the following steps are carried out: npm is a package manager or software registry, npm may include packages of more than sixty thousand package code modules; npm generally consists of a website, a registry, a CLI command line tool. The website is the primary way for developers to find packages, set parameters, and manage npm use experience; the registry is a large database that holds information for each package. The CLI command line tool runs through a command line or a terminal; the developer is crossing npm through CLI.
npm repository is used to store various packages code module packages such as plug-ins, components, etc. developed by developers. npm, after the package in the warehouse is uploaded successfully, the user or the terminal can download or call the package uploaded by the developer through the npm install command, the developer can log in npm to check the package uploaded by the developer, and the npm warehouse is used as a public library for storing the package, thereby providing a convenient channel for further research and development or use of the plug-in package.
In one embodiment, a folder may be created first, the main.js file of the configuration application presentation plug-in is placed under the folder, and then a package.json file is generated by an "npm init" command; registering a package repository account at the npm website; inputting an 'npm addurser' command to log in an account; json opens the cmd in the current package, inputs a command 'npm publishing', the system has no error, the uploading is successful, namely the configuration application display plug-in is uploaded to the npm warehouse through the process, and the terminal can download or call the package uploaded to the npm warehouse by a developer through the command 'npm install'.
Referring to fig. 4, a flowchart of another configuration application displaying method according to an embodiment of the present application is provided. The specific flow shown in fig. 4 will be described in detail below.
Specifically, step 140 may include step 141, step 142, step 143, and step 144.
Step 141: adding a dependent configuration of the configuration application presentation plug-in to the processing terminal, the dependent configuration comprising npm configuration information of the repository.
For example, the processing terminal may be a PC terminal, a front-end project of the PC terminal is opened, an vue main project is established, and a dependency configuration of the configuration application display plug-in is added through an "acp-display" command in a package.
Further, the configuration application display plug-in uploaded before is installed or downloaded from the npm warehouse through an "npm install" module command, specifically, an html page is written in the front end project of the PC end, and the content in the html page refers to the configuration application display plug-in through the "npm install" command, so as to obtain the configuration information of the configuration application.
Step 142: and initializing the configuration application display plug-in based on the configuration information of the npm warehouse called by the terminal to obtain the initialized configuration application display plug-in.
Illustratively, the configuration application presentation plug-in provides an initialized configuration, which may include a getPageInfoFunc function, where the getPageInfoFunc function is used to initialize a homepage of the configuration application presentation plug-in, and further, the configuration application presentation plug-in calls an external main body program to obtain configuration information of the configuration application, and returns the configuration information to the configuration application presentation plug-in.
Optionally, in the PC-side body engineering, when a main page topopage.vue of the configuration application display plug-in is initialized, the system may call a getPageInfoFunc function, and the specific content of the method body of the getPageInfoFunc function may be a function of the method body implemented in the main page after calling the main body of the configuration application display plug-in. Specifically, a getPageInfoFunc function is called, a homepage of the configuration application display plug-in is initialized, an external main body program is called, and the main body program acquires configuration information of the configuration application by calling a background interface and returns the configuration application display plug-in to the configuration application display plug-in.
Step 143: and performing inverse analysis on the initialized configuration application display plug-in to obtain analysis data of the configuration application display plug-in.
Step 144: and displaying the configuration application according to the analysis data.
Illustratively, an html page is written in the front-end engineering of the PC, the content in the html page refers to the configuration application display plug-in through an "npm install" command, after the configuration application display plug-in is initialized through the above-mentioned call getPageInfoFunc function, the configuration information of the configuration application is acquired from the npm warehouse through the request service terminal, and then the configuration information is transmitted to the referred configuration application display plug-in.
Further, the configuration application shows the main structure of the plug-in as a main page and various diagram components.
The configuration application shows the main page of the plug-in unit and is used for obtaining the basic configuration of the configuration application. Reading and reversely analyzing page configuration information in configuration application configuration and rough configuration information of various chart elements, such as page size and size, page background color and other basic information of the configuration application.
The configuration application shows various diagram components of the plug-in for obtaining the specific configuration of various diagram elements of the configuration application. Reading and reversely analyzing specific function configuration information of various chart elements in the configuration application, such as function information of bar charts, line charts and the like of the configuration application.
Furthermore, the main page is used for being responsible for the operation logic of the configuration application display plug-in which needs unified processing, and various chart components are used for processing the display of each chart element of the configuration application. The unique function of the configuration application display plug-in can be to display the configuration application by reading and reversely analyzing the configuration information.
In one embodiment, the histogram may be processed with a barchart. vue file in the configuration application presentation plug-in; the line graph can be used for showing the processing of the linehart. The processing content specifically includes interaction modes such as the position and the state of the chart element in the page. The configuration application display plug-in function requirement updating means that functions supporting a chart element are newly added, and an vue file can be newly added in a configuration application display plug-in components folder to process the chart element.
In an alternative embodiment, step 100 may comprise step 101 and step 102.
Step 101: analyzing the configuration application through the generating terminal to obtain page configuration information of the configuration application and diagram element configuration information of the configuration application;
for example, the main contents of the configuration application presentation plug-in may include configuration information of various pages of the configuration application and configuration information of various chart elements. The structural components of the configuration application presentation plug-in may include a main page vue file and various chart components vue files.
Subsequently, the display process is called, and the main page vue file of the configuration application display plug-in can be used for reversely analyzing the page configuration information of the configuration application and the rough configuration information of various chart elements; the various chart components vue files of the configuration application presentation plug-in may be used to counter-analyze the specific arrangement of the various chart elements of the configuration application.
Optionally, an independent vue project is established, and the configuration data that the configuration application display plug-in can subsequently perform reverse analysis and display is obtained by reading and analyzing the relevant configurations of the various page and chart elements included in the drawn configuration application. The configuration data may include the style configuration of various pages and chart elements, such as length, width, background, title, etc.; the interactive configuration of various page and diagram elements such as element clicking, incidence relation and the like can be included; the method can include various data configurations such as data interface address shown by a certain element, MQTT message queue transmission protocol subscription address, business data analysis rule and the like.
Step 102: and determining the configuration information of the configuration application according to the page configuration information of the configuration application and the chart element configuration information of the configuration application.
Illustratively, based on the step 101 of the obtaining method, relevant configuration information of the function display of the configuration application can be obtained, and the configuration data to be packaged before the configuration application display plug-in is generated and packaged by the generating terminal can be further determined through the relevant configuration information.
Please refer to fig. 5, which is a functional block diagram of a configuration application display apparatus according to an embodiment of the present disclosure. The modules in the configuration application showing device in this embodiment are used for executing the steps in the above method embodiments. The configuration application display device comprises an acquisition module 210 and a plug-in generation module 220; wherein the content of the first and second substances,
an obtaining module 210, configured to obtain configuration information of the configuration application;
a plug-in generating module 220, configured to package the configuration information of the configuration application to obtain a configuration application display plug-in;
the configuration application display plug-in is configured to be called by a processing terminal and displays the configuration application according to the configuration application display plug-in.
In a first optional implementation, the plug-in generating module 220 is configured to: the configuration application display plug-in is generated at a generating terminal, and the processing terminal comprises one or more terminals different from the generating terminal.
In a second alternative embodiment, the plug-in generating module 220 is configured to: the configuration application display plug-in is dynamically updated based on the configuration information of the configuration application.
In a third alternative embodiment, the plug-in generating module 220 is configured to: packaging the configuration information of the configuration application by adopting a Webpack module packager to obtain an Html static page file; and determining the configuration application display plug-in according to the Html static page file.
In a fourth alternative embodiment, the plug-in generating module 220 is configured to: uploading the configuration application presentation plug-in to npm repository to store the configuration application presentation plug-in to npm repository for invocation by the processing terminal.
In a fifth alternative embodiment, the plug-in generating module 220 is configured to: adding a dependent configuration of the configuration application presentation plug-in to the processing terminal, the dependent configuration comprising npm configuration information of a repository; initializing the configuration application display plug-in based on the configuration information of the npm warehouse called by the terminal to obtain the initialized configuration application display plug-in; performing inverse analysis on the initialized configuration application display plug-in to obtain analysis data of the configuration application display plug-in; and displaying the configuration application according to the analysis data.
In a sixth optional implementation, the obtaining module 210 is configured to:
analyzing the configuration application through the generating terminal to obtain page configuration information of the configuration application and diagram element configuration information of the configuration application;
and determining the configuration information of the configuration application according to the page configuration information of the configuration application and the chart element configuration information of the configuration application.
Fig. 6 is a block diagram of an electronic device. The electronic device 300 may include a memory 311, a memory controller 312, a processor 313, a peripheral interface 314, an input-output unit 315, and a display unit 316. It will be understood by those skilled in the art that the structure shown in fig. 6 is merely illustrative and is not intended to limit the structure of the electronic device 300. For example, electronic device 300 may also include more or fewer components than shown in FIG. 6, or have a different configuration than shown in FIG. 6.
The above-mentioned memory 311, memory controller 312, processor 313, peripheral interface 314, input/output unit 315 and display unit 316 are electrically connected to each other directly or indirectly to implement data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The processor 313 described above is used to execute executable modules stored in memory.
The Memory 311 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The memory 311 is configured to store a program, and the processor 313 executes the program after receiving an execution instruction, and the method executed by the electronic device 300 defined by the process disclosed in any embodiment of the present application may be applied to the processor 313, or implemented by the processor 313.
The processor 313 may be an integrated circuit chip having signal processing capabilities. The Processor 313 may be a general-purpose Processor, and includes a Central Processing Unit (CPU), a Network Processor (NP), and the like; the Integrated Circuit may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, a discrete gate or transistor logic device, or a discrete hardware component. The various methods, steps, and logic blocks disclosed in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The peripheral interface 314 couples various input/output devices to the processor 313 and to the memory 311. In some embodiments, peripheral interface 314, processor 313, and memory controller 312 may be implemented in a single chip. In other examples, they may be implemented separately from the individual chips.
The input/output unit 315 is used for providing input data to a user. The input/output unit 315 may be, but is not limited to, a mouse, a keyboard, and the like.
The display unit 316 provides an interactive interface (e.g., a user interface) between the electronic device 300 and the user for reference. In this embodiment, the display unit 316 may be a liquid crystal display or a touch display. The liquid crystal display or the touch display can display the process of the program executed by the processor.
The electronic device 300 in this embodiment may be configured to perform each step in each method provided in this embodiment.
In addition, an embodiment of the present application further provides a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method for presenting a configuration application in the above method embodiments are executed.
The computer program product of the presentation method for configuration application provided in this embodiment of the present application includes a computer readable storage medium storing a program code, where instructions included in the program code may be used to execute the steps of the presentation method for configuration application described in the above method embodiment, which may be referred to in the above method embodiment specifically, and are not described herein again.
To sum up, the embodiment of the present application provides a method for displaying a configuration application, an electronic device, and a storage medium, where the method for displaying the configuration application includes: obtaining configuration information of the configuration application; packaging the configuration information of the configuration application to obtain a configuration application display plug-in; and calling the configuration application display plug-in through a processing terminal, and displaying the configuration application according to the configuration application display plug-in.
In the implementation process, the configuration application configuration information codes after drawing is extracted and packaged to be a configuration application display plug-in independently, and the processing terminals call the configuration application display plug-in for displaying, so that if the configuration application display plug-in is called by a plurality of processing terminals at the same time, the configuration applications can be displayed at the same time, repeated research and development of the configuration applications are not needed for different processing terminals, the research and development flow is simplified, and the maintenance efficiency is improved.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the modules is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form. The functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.
It should be noted that the functions, if implemented in the form of software functional modules and sold or used as independent products, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
In this document, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions.
The above description is only an example of the present application and is not intended to limit the scope of the present application, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application.
Claims (10)
1. A method for displaying configuration applications, the method comprising:
obtaining configuration information of the configuration application;
packaging the configuration information of the configuration application to obtain a configuration application display plug-in; and
and calling the configuration application display plug-in through a processing terminal, and displaying the configuration application according to the configuration application display plug-in.
2. The method of claim 1, wherein the configuration application presentation plug-in is generated at a generating terminal, and the processing terminal comprises one or more terminals different from the generating terminal.
3. The method of claim 1, wherein the configuration application presentation plug-in is dynamically updated based on configuration information of the configuration application.
4. The method of claim 1, wherein packaging configuration information of the configuration application to obtain a configuration application presentation plug-in comprises:
packaging the configuration information of the configuration application by adopting a Webpack module packager to obtain an Html static page file;
and determining the configuration application display plug-in according to the Html static page file.
5. The method of claim 1, wherein before the invoking of the configuration application presentation plug-in by the processing terminal, further comprises:
uploading the configuration application presentation plug-in to npm repository to store the configuration application presentation plug-in to npm repository for invocation by the processing terminal.
6. The method of claim 1, wherein exposing the configuration application according to the configuration application exposure plug-in comprises:
adding a dependent configuration of the configuration application presentation plug-in to the processing terminal, the dependent configuration comprising npm configuration information of a repository;
initializing the configuration application display plug-in based on the configuration information of the npm warehouse called by the terminal to obtain the initialized configuration application display plug-in;
performing inverse analysis on the initialized configuration application display plug-in to obtain analysis data of the configuration application display plug-in;
and displaying the configuration application according to the analysis data.
7. The method of claim 1, wherein the obtaining configuration information for the configuration application comprises:
analyzing the configuration application through the generating terminal to obtain page configuration information of the configuration application and diagram element configuration information of the configuration application;
and determining the configuration information of the configuration application according to the page configuration information of the configuration application and the chart element configuration information of the configuration application.
8. A configuration application presentation device, comprising:
an obtaining module, configured to obtain configuration information of the configuration application;
the plug-in generation module is used for packaging the configuration information of the configuration application to obtain a configuration application display plug-in;
the configuration of the configuration application display plug-in is called by a processing terminal, and the configuration application is displayed according to the configuration application display plug-in.
9. An electronic device, comprising: a processor, a memory storing machine-readable instructions executable by the processor, the machine-readable instructions when executed by the processor performing the steps of the method of any of claims 1 to 7 when the electronic device is run.
10. A computer-readable storage medium, having stored thereon a computer program which, when being executed by a processor, is adapted to carry out the steps of the method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111462300.8A CN114047915B (en) | 2021-12-03 | 2021-12-03 | Configuration application display method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111462300.8A CN114047915B (en) | 2021-12-03 | 2021-12-03 | Configuration application display method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114047915A true CN114047915A (en) | 2022-02-15 |
| CN114047915B CN114047915B (en) | 2022-08-12 |
Family
ID=80212196
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111462300.8A Active CN114047915B (en) | 2021-12-03 | 2021-12-03 | Configuration application display method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114047915B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115185900A (en) * | 2022-05-20 | 2022-10-14 | 中核武汉核电运行技术股份有限公司 | Downloading method for time sequence data real-time calculation algorithm |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103914500A (en) * | 2013-10-17 | 2014-07-09 | 国家电网公司 | Configuration on-line display method based on time series data |
| CN106126830A (en) * | 2016-06-23 | 2016-11-16 | 许继电气股份有限公司 | Intelligent substation secondary void loop based on graphic configuration plug-in unit method for visualizing |
| EP3249521A1 (en) * | 2016-05-24 | 2017-11-29 | LSIS Co., Ltd. | Computing apparatus and operating method thereof |
| CN111459501A (en) * | 2019-01-22 | 2020-07-28 | 上海宝信软件股份有限公司 | SVG-based Web configuration picture storage and display system, method and medium |
-
2021
- 2021-12-03 CN CN202111462300.8A patent/CN114047915B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103914500A (en) * | 2013-10-17 | 2014-07-09 | 国家电网公司 | Configuration on-line display method based on time series data |
| EP3249521A1 (en) * | 2016-05-24 | 2017-11-29 | LSIS Co., Ltd. | Computing apparatus and operating method thereof |
| CN106126830A (en) * | 2016-06-23 | 2016-11-16 | 许继电气股份有限公司 | Intelligent substation secondary void loop based on graphic configuration plug-in unit method for visualizing |
| CN111459501A (en) * | 2019-01-22 | 2020-07-28 | 上海宝信软件股份有限公司 | SVG-based Web configuration picture storage and display system, method and medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115185900A (en) * | 2022-05-20 | 2022-10-14 | 中核武汉核电运行技术股份有限公司 | Downloading method for time sequence data real-time calculation algorithm |
| CN115185900B (en) * | 2022-05-20 | 2024-06-11 | 中核武汉核电运行技术股份有限公司 | Downloading method of time sequence data real-time calculation algorithm |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114047915B (en) | 2022-08-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7721254B2 (en) | Programming interface for a computer platform | |
| CN112882703B (en) | Online design method and device for user-defined chart plug-in | |
| CN111324833A (en) | Page display method, device, electronic design and computer readable medium | |
| KR20110014146A (en) | Dynamic declarative application description | |
| CN114047915B (en) | Configuration application display method and device, electronic equipment and storage medium | |
| Snell et al. | Microsoft Visual Studio 2012 Unleashed: Micro Visua Studi 2012 Unl_p2 | |
| CN114297700B (en) | Dynamic and static combined mobile application privacy protocol extraction method and related equipment | |
| US9760381B2 (en) | Configurable toolbar | |
| US11604662B2 (en) | System and method for accelerating modernization of user interfaces in a computing environment | |
| US20080162531A1 (en) | Object-Oriented Framework for Data-Analysis Having Pluggable Platform Runtimes and Export Services | |
| CN111198738A (en) | Mobile terminal page display method and device and electronic equipment | |
| US9372844B2 (en) | Automatically generating a business process flow GUI using a symbolic annotation language | |
| Chang et al. | A study on the development of one source multi use cross-platform based on zero coding | |
| Johansson et al. | Introduction to computing with python | |
| CN112104544B (en) | Method and device for sending dynamic mail based on Freemarker | |
| Noble et al. | Flex 4 Cookbook: Real-world recipes for developing Rich Internet Applications | |
| CN112860344A (en) | Component processing method and device, electronic equipment and storage medium | |
| Gardey et al. | UX-Painter: Fostering UX improvement in an agile setting | |
| Le et al. | Implementation of react-redux in web application | |
| CN117348876B (en) | Application development method, system and medium based on freeRTOS embedded system | |
| Renfro | Computational econometrics: its impact on the development of quantitative economics | |
| RU2799988C2 (en) | System and method for dynamic visualization of software elements | |
| Rischpater et al. | Beginning Nokia Apps Development | |
| Zucker et al. | Beginning Nokia Apps Development: Qt and HTML5 for Symbian and MeeGo | |
| Giametta | Pro Flex on Spring |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |