A dynamic interface generation system and method for an aerated concrete production process

Abstract

The application relates to a dynamic interface generation system and method for an aerated concrete production process, comprising: configuring an aerated concrete component, generating a JSON configuration file of the aerated concrete component; loading and parsing the JSON configuration file, recursively traversing a configuration tree, dynamically instantiating each node of the JSON configuration file into a corresponding UI component in a component library based on a front-end framework dynamic component mechanism; listening to an interactive event triggered by the UI component, calling an event processing interface of a core control engine, extracting an event logic code string from a dynamic behavior attribute of the component, dynamically compiling an executable function, injecting a context and executing, and realizing component interaction and cross-component linkage. The application fundamentally solves core problems such as low development efficiency, poor process adaptability and difficult logic maintenance in UI development of the aerated concrete industry by defining an interface in a declarative JSON object, parsing the configuration by a core engine and dynamically rendering and running.

Description

Technical Field

[0001] This application relates to the fields of industrial software and intelligent manufacturing technology, and in particular to a dynamic interface generation system and method for the aerated concrete production process. Background Technology

[0002] Autoclaved aerated concrete (AAC) is a lightweight porous silicate product made from siliceous materials (sand, fly ash, and silicon-containing tailings, etc.) and calcareous materials (lime, cement) as the main raw materials, with the addition of a foaming agent (aluminum powder), through processes such as batching, mixing, pouring, pre-curing, cutting, autoclaving, and curing.

[0003] Autoclaved aerated concrete (AAC) production is a typical process industry with complex processes and stringent requirements for parameter control. For example, the autoclaving stage requires precise control of the pressure and temperature curves during the heating, isothermal, and cooling phases, directly affecting the final strength and quality of the product. Information systems are crucial for ensuring stable production and quality traceability, but the development and maintenance of their user interface present significant challenges.

[0004] 1. Poor process adaptability and rigid development: Autoclaved aerated concrete (AAC) production lines iterate rapidly, with frequent adjustments to process parameters (such as slurry formulations for different grades of products and cutting dimensions for different panel specifications). Traditional hard-coded UI development requires front-end engineers to modify, compile, and deploy code for each minor process adjustment, resulting in a lengthy process that fails to meet the agility requirements of production sites. For example, an "autoclave monitoring" interface developed for production line A has hard-coded API interfaces and data processing logic, making it unusable for production line B.

[0005] 2. Difficulty in Cross-System Data Linkage: Data from the production site comes from multiple heterogeneous systems. For example, a typical dashboard needs to simultaneously display: production order information from ERP, current work order status from MES, and real-time operating parameters of equipment (such as cutting machines and autoclaves) from the SCADA system. In traditional development, achieving the aggregation and linked refresh of this cross-system data requires writing complex point-to-point interface calls and status management code, resulting in bloated front-end application logic that is difficult to maintain.

[0006] 3. Lack of industry-specific components, resulting in significant duplication of effort: The autoclaved concrete industry has many unique UI requirements, such as "autoclave curing curves" (which need to simultaneously display real-time temperature / pressure curves and standard process curves), "electronic batching sheets" (which need to automatically calculate and verify raw material usage based on the formula), and "cutting line animation dynamometer diagrams," etc. General-purpose UI component libraries do not provide such specialized components, leading to repeated development for each project. This is not only inefficient but also fails to create reusable industry knowledge assets.

[0007] 4. High coupling between interaction logic and interface code: In traditional UI development, a series of operations triggered by a button click event (such as "Start Maintenance") (validating the form, calling the backend API, updating the state of other components) are hard-coded into JavaScript code. This makes adjusting the business logic extremely difficult, and non-developers (such as process engineers) cannot intervene at all.

[0008] While existing low-code platforms can improve development efficiency, most are geared towards general business scenarios and cannot effectively address the specific problems mentioned above. They typically lack good support for industrial protocols (such as OPC-UA), lack industry-specific components, and their event and data flow models are insufficient to support the complex real-time linkage requirements in industrial production. Summary of the Invention

[0009] To address the aforementioned technical problems, this invention provides a dynamic interface generation system and method for the aerated concrete production process. By defining the interface's structure, style, data source, and even complex interactive logic entirely as declarative JSON objects, and having the core engine parse the configuration and dynamically render and run it, this fundamentally solves the core problems in UI development in the aerated concrete industry, such as low development efficiency, poor process adaptability, and difficulty in logic maintenance.

[0010] In a first aspect, the present invention provides a dynamic interface generation method for the aerated concrete production process, comprising the following steps:

[0011] S1. Configure an aerated concrete component and generate a JSON configuration file for the aerated concrete component. Each node of the JSON configuration file contains the type, unique identifier, and attribute object of the aerated concrete component.

[0012] S2. Load and parse the JSON configuration file, recursively traverse the configuration tree, and based on the dynamic component mechanism of the front-end framework, dynamically instantiate each node of the JSON configuration file into the corresponding UI component in the component library.

[0013] S3. Listen for interactive events triggered by UI components, call the event handling interface of the core control engine, extract the event logic code string from the dynamic behavior properties of the component, dynamically compile to generate an executable function, inject it into the context and execute it, so as to realize component interaction and cross-component linkage.

[0014] S4. Based on the API configuration object preset in the JSON configuration file, parse the interface information, parameter processing rules and result processing rules, initiate a data request to the industrial heterogeneous system, format the request parameters and returned data respectively, and send the final data back to the corresponding UI component to complete the interface update.

[0015] Furthermore, in step S1 of the present invention, each component node of the JSON configuration file includes the component type, unique identifier, and props attribute object of the aerated concrete component, and the props attribute object stores the static and dynamic attributes of the aerated concrete component.

[0016] Furthermore, step S2 of the present invention includes:

[0017] S21. Obtain the UI configuration file and load a JSON object describing the complete UI hierarchy, attributes, and behaviors as input;

[0018] S22. Create a root component. Instantiate a root container component based on the root node type of the JSON object.

[0019] S23. Recursively render child components, starting from the root node and traversing its properties.

[0020] Furthermore, step S23 of the present invention includes:

[0021] S231. For each child node, dynamically determine the component type and construct the corresponding component name based on the attributes of the child node.

[0022] S232. Instantiate the component: Use the dynamic component functionality of the front-end framework to create instances of the component.

[0023] S233, Inject configuration and context, passing the entire JSON configuration object of the current child node as a `prop` to the newly created component instance;

[0024] S234. Recursive processing: If the current child node is also a container component, then take that child node as the parent node and repeat S233 until all nodes are rendered as component instances.

[0025] Furthermore, step S3 of the present invention includes:

[0026] S31, Listen for native events;

[0027] S32. Trigger the unified event handling entry point; when the event is triggered, call the unified event handling method;

[0028] S33. Extract the event logic string;

[0029] S34. Dynamically create executable functions;

[0030] S35. Inject the context and execute, access and manipulate any other components or data within the application.

[0031] Furthermore, step S4 of the present invention includes:

[0032] S41. Define the API configuration object;

[0033] S42. Invoke the unified request method;

[0034] S43, Parameter formatting;

[0035] S44. Initiate an HTTP request;

[0036] S45. Result formatting;

[0037] S46. Execute the callback. After receiving the data, the component updates its own state and re-renders.

[0038] Furthermore, the UI component of the present invention includes a dedicated component adapted to the aerated concrete production process, and the industrial heterogeneous system includes a Manufacturing Execution System (MES) and a Supervisory Control and Data Acquisition (SCADA) system.

[0039] Secondly, the present invention also provides a dynamic interface generation system for the aerated concrete production process, characterized in that it includes:

[0040] The UI configuration definition module is used to receive visual configuration operations, generate and maintain a tree-structured JSON configuration file;

[0041] The core control engine module is used to associate with the UI configuration definition module and make reactive references to the JSON object of the UI configuration; internally, it maintains a component mapping table, which is configured with event handling interface and unified data request interface for managing configuration, handling interactive events and data requests.

[0042] The dynamic rendering module is used to parse the JSON configuration file and instantiate the configuration nodes into the corresponding UI components in the component library by recursively traversing the configuration tree.

[0043] The aerated concrete dedicated component library module is used to interface with the dynamic rendering module and has built-in dedicated components adapted to the aerated concrete production process.

[0044] Furthermore, the dedicated components built into the aerated concrete dedicated component library module of the present invention include an autoclave monitoring component, a curing curve chart component, and an electronic batching sheet component.

[0045] Thirdly, the present invention also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the above-described dynamic interface generation method for the aerated concrete production process.

[0046] The beneficial effects of this invention are:

[0047] 1. Dedicated Component Library for Autoclaved Aerated Concrete (AAC) Process: This invention includes a series of dedicated UI components for the AAC production process, such as `widget-autoclave-monitor` (autoclave monitoring panel), `widget-curing-curve-chart` (curing curve chart), and `widget-slurry-recipe-form` (slurry recipe form). These components encapsulate industry-standard business logic and visualization modes. Users can quickly build professional monitoring and operation interfaces by specifying their data source (such as autoclave number and batch number) through JSON configuration.

[0048] 2. Executable Event Callback Configuration: A key innovation of this invention is that the component's event handlers (such as `onClick`, `onMounted`) are stored in the JSON configuration as JavaScript code strings. For example, the `onClick` event of a "Start Maintenance" button can be configured as: `"if(app.getValue('form_recipe_1.slurry_density') < 1.5) { app.$message.error('Slurry concentration not up to standard!'); return;}let success = await app.getMethodById('autoclave_monitor_1').startCuring();if(success) { app.getWidgetById('datatable_main').refresh();}"`. This approach decouples business logic from the code, enabling dynamic configuration of behavior.

[0049] 3. Central Control Engine and Powerful Context Injection (`Designer` Class): The `Designer` class in `designer.js` is the core controller of the system. When the event code string mentioned above is executed, this `Designer` instance is injected as the context (`app`), giving the script code powerful capabilities to manipulate the entire application. As shown in the example above, the script can directly call methods of other components (`app.getMethodById(...)`), read and write values ​​of other components (`app.getValue(...)`), or call system-level services (`app.$message`), achieving complex cross-component and cross-system interaction.

[0050] 4. Unified API Declarative Configuration and Request Engine: Component data interaction is declaratively configured through a standardized `apiSet` object. For example, the `apiSet` of the `widget-curing-curve-chart` component can be configured to retrieve historical data from the MES system, and its `successFormat` handler (a string of JavaScript code) is responsible for converting the returned raw data into the format required for the chart. The `requestByApisetConfig` method, as a unified request engine, is responsible for parsing this configuration and initiating the request, achieving complete decoupling between UI components and backend services.

[0051] 5. Metadata-driven CRUD page auto-generation (crudTemplate.js): This invention includes an automated page generation module that receives metadata from aerated concrete production database tables (such as "Production Plan Table" and "Quality Inspection Record Table") and automatically generates a complete JSON configuration file containing a complex interactive interface with data tables, forms, pop-ups, and CRUD buttons, greatly improving the development efficiency of standard management modules. Attached Figure Description

[0052] Figure 1 This is a flowchart of Embodiment 1 of the present invention. Detailed Implementation

[0053] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will now be described in further detail with reference to the accompanying drawings and the following embodiments, so that the public can better understand the implementation method of this invention.

[0054] Example 1:

[0055] See Figure 1 A method for generating a dynamic interface for the aerated concrete production process includes the following steps:

[0056] S1. Configure an aerated concrete component and generate a JSON configuration file for the aerated concrete component. Each node of the JSON configuration file contains the type, unique identifier, and attribute object of the aerated concrete component.

[0057] S2. Load and parse the JSON configuration file, recursively traverse the configuration tree, and based on the dynamic component mechanism of the front-end framework, dynamically instantiate each node of the JSON configuration file into the corresponding UI component in the component library.

[0058] S3. Listen for interactive events triggered by UI components, call the event handling interface of the core control engine, extract the event logic code string from the dynamic behavior properties of the component, dynamically compile to generate an executable function, inject it into the context and execute it, so as to realize component interaction and cross-component linkage.

[0059] S4. Based on the API configuration object preset in the JSON configuration file, parse the interface information, parameter processing rules and result processing rules, initiate a data request to the industrial heterogeneous system, format the request parameters and returned data respectively, and send the final data back to the corresponding UI component to complete the interface update.

[0060] The UI components include specialized components adapted to the aerated concrete production process, and the industrial heterogeneous system includes a Manufacturing Execution System (MES) and a Supervisory Control and Data Acquisition (SCADA) system.

[0061] Specifically, in step S1, each component node of the JSON configuration file contains the component type, unique identifier, and props attribute object of the aerated concrete component. The props attribute object stores the static and dynamic attributes of the aerated concrete component.

[0062] Step S2 includes:

[0063] S21. Obtain the UI configuration file. The system loads a JSON object describing the complete UI hierarchy, attributes, and behaviors as input.

[0064] S22. Create the root component. The system instantiates a root container component based on the root node type of the JSON object (such as `homepage`).

[0065] S23. Recursively render child components, starting from the root node and traversing its `widgetList` property (an array containing the configuration nodes of the child components). The steps for each child node include:

[0066] S231. Dynamically determine the component type. Construct the corresponding component name based on the `type` attribute of the child node (e.g., `'widget-autoclave-monitor'`).

[0067] S232. Instantiate components. Utilize the dynamic component functionality of front-end frameworks (such as Vue's `` <component :is="...">`), creates an instance of the component.

[0068] S233, Injecting Configuration and Context. The entire JSON configuration object of the current child node is passed as a `prop` (such as a `widget`) to the newly created component instance. Simultaneously, the instance of the core control engine (`designer`) is also injected as a `prop`.

[0069] S234. Recursive processing. If the current child node is also a container component, then repeat S3 with that child node as the parent node until all nodes are rendered as component instances.

[0070] Step S3 includes:

[0071] S31: Listen for native DOM events. After a UI component (such as a button) is rendered, its template is bound to a native click event listener (such as `@click="onClick"`).

[0072] S32: Triggers the unified event handling entry point. When the user clicks this button, its internal `onClick` method is called, which in turn calls a unified event handling method (such as `designer.eventHandle`) provided by the core control engine.

[0073] S33: Extract the event logic string. The `eventHandle` method receives the event type (such as `'onClick'`) and the component configuration object (`widget`) that triggered the event. It reads the property value with the same name as the event type from `widget.props`, which is a string of JavaScript code filled in by the user at design time.

[0074] S34: Dynamically create executable functions. The system uses the `new Function(...)` constructor to create a new anonymous function, using the code string obtained in the previous step as the function body. The parameter list of this function is pre-defined and includes powerful context variables, such as `app` (the core engine instance), `widget` (the current component configuration), and `value` (the value passed in the event).

[0075] S35: Inject the context and execute. The system calls this newly created function, passing the actual context object (such as a `designer` instance) as the `app` parameter. The code within the function body (e.g., `app.getMethodById('datatable_1').refresh()`) is thus executed, allowing access to and manipulation of any other components or data within the application, enabling dynamic and flexible interaction logic.

[0076] In some embodiments, for event handling methods, user-written logic code (such as JavaScript) can be compiled into a WebAssembly (Wasm) module instead of using `new Function`. At runtime, the Wasm module is loaded and executed. The advantages are potentially higher execution efficiency, better sandbox isolation, and increased security. The disadvantage is a more complex build process, requiring the introduction of the Wasm compilation toolchain.

[0077] Step S4 includes:

[0078] S41: Define the API configuration object. In the component's JSON configuration, there is an `apiSet` object that declaratively defines all the information required for the data request, including `apiurl` (interface address), `method` (request method), `params` (static parameters), `headers` (request headers), and `paramsFormat` and `successFormat` (parameters and result handlers as code strings).

[0079] S42: Invoke the unified request method. When a component needs to load data, it calls the core engine's `requestByApisetConfig` method, passing in its own `widget` object.

[0080] S43: Parameter formatting. The `requestByApisetConfig` method first parses the `apiSet` object. If a `paramsFormat` code string is defined, it is dynamically compiled into a function using `new Function` and executed to perform the final processing and transformation of the request parameters.

[0081] S44: Initiate an HTTP request. This method initiates a network request using a unified HTTP client (such as the encapsulation in `http.js`) based on the `method` and `apiurl` in `apiSet` and the formatted parameters.

[0082] S45: Result Formatting. After a successful request, if the `successFormat` code string is defined in `apiSet`, it will be dynamically compiled into a function and executed to parse and transform the returned raw data, extracting the data structure actually needed by the UI components.

[0083] S46: Execute the callback. The formatted final result is returned to the caller (i.e., the UI component) via the callback function (`resultCb`). After receiving the data, the component updates its own state and re-renders.

[0084] In some embodiments, a Domain-Specific Language (DSL) can be used instead of JavaScript strings. For example, a simpler and safer DSL can be designed to describe UI interaction logic instead of directly using JavaScript strings. Simple commands like `"ACTION:show,TARGET:widget_2"` can be used. The system has a built-in DSL parser to interpret and execute these commands. The advantages are greater security and greater user-friendliness for non-developers. The disadvantages are limited expressive power, inability to handle complex custom logic, and the need to develop an additional DSL parser.

[0085] In some embodiments, a JSON Schema-based validator can be introduced into the core control engine. When the UI configuration is modified, the structure and data type of the entire JSON object are validated using a predefined schema file to ensure the validity of the configuration and prevent runtime crashes due to incorrect configuration. This is an enhancement to existing solutions, improving the robustness of the system.

[0086] Example 2:

[0087] Based on Example 1, this embodiment takes the maintenance curve chart component as an example and describes a specific method for generating a dynamic interface, including the following steps:

[0088] 1. Design and Configuration: The process engineer drags a "Cure Curve Chart Component" into the designer. In the right-hand properties panel, the engineer configures the `apiSet` property with the interface address for retrieving MES data and enters "Cure Curve of Reactor No. 1" in the `title` property of its `props`. The final result of these operations is the generation and updating of the JSON node describing the component.

[0089] 2. Rendering and Execution: The dynamic rendering module reads the JSON node, instantiates a `widget-curing-curve-chart` component, and passes the JSON node as a `prop`. When the component is created (the `onMounted` event is triggered), its configured `onMounted` event code string (such as `app.getMethodById(self.id).loadData()`) is dynamically executed by the core engine, thereby triggering the component to load data.

[0090] 3. Data Interaction: The component's `loadData` method internally calls the core engine's `requestByApisetConfig` method. This method parses the configuration in the component's `apiSet` and sends a request to the MES system. After a successful request, the code string configured in `successFormat` is executed, processing the returned data into the format required by ECharts, and finally updating the chart display through the `setOption` method.

[0091] 4. Logical Linkage: When a user clicks on a row in another "Production Batch" table on the page, the `rowClick` event of that table is triggered. The configured JavaScript code `app.getWidgetById('curing_chart_1').props.batchId = value.batchId;` is executed. This updates the batch number property of the curve chart component, triggering the chart component to reload and display the data for the new batch, thus achieving logical linkage across components.

[0092] Example 3:

[0093] See Figure 1 This embodiment discloses a dynamic interface generation system for the aerated concrete production process, including:

[0094] The UI configuration definition module is used to receive visual configuration operations, generate and maintain a tree-structured JSON configuration file;

[0095] The core control engine module is used to associate with the UI configuration definition module and make reactive references to the JSON object of the UI configuration; internally, it maintains a component mapping table, which is configured with event handling interface and unified data request interface for managing configuration, handling interactive events and data requests.

[0096] The dynamic rendering module is used to parse the JSON configuration file and instantiate the configuration nodes into the corresponding UI components in the component library by recursively traversing the configuration tree.

[0097] The aerated concrete dedicated component library module is used to interface with the dynamic rendering module and has built-in dedicated components adapted to the aerated concrete production process.

[0098] The built-in specialized components of the aerated concrete component library module include autoclave monitoring components, curing curve chart components, and electronic batching sheet components.

[0099] The UI dynamic generation system consists of four core modules: UI configuration definition module, core control engine module, dynamic rendering module, and a dedicated component library module for aerated concrete.

[0100] The UI configuration definition module is essentially a structured JSON object. This object defines the hierarchical relationship of all UI components on the page in a tree structure. Each node contains not only the component type (such as `'widget-autoclave-monitor'`) and unique identifier (`id`), but also a `props` object. This `props` object stores all the component's static properties (such as the autoclave ID `autoclaveId`) and dynamic behavior properties (such as the event callback code string `onClick` and the API configuration object `apiSet`).

[0101] The core control engine module (the `Designer` class) is the central hub of the system. It holds a reactive reference to the UI configuration JSON object and maintains a `widgetMap` for quickly indexing configuration nodes by component ID. The engine's core functionality lies in providing the `eventHandle` and `requestByApisetConfig` methods.

[0102] Dynamic rendering module: This module is responsible for parsing the UI configuration JSON object. It does this by recursively traversing the configuration tree and utilizing the dynamic component mechanism of front-end frameworks (such as Vue's ``). <component :is="...">`) will dynamically instantiate the configuration node into the corresponding UI component in the component library.

[0103] Autoclaved Aerated Concrete (AAC) Component Library Module: This module represents a key industry-specific aspect of the invention. It contains a series of pre-built Vue components tailored to AAC production processes, such as:

[0104] Autoclave monitoring component (`widget-autoclave-monitor`): Used to display SCADA data such as temperature and pressure of a specified autoclave in real time in the form of an instrument panel or digital panel.

[0105] Curing Curve Chart Component (`widget-curing-curve-chart`): Built-in ECharts chart library, it can retrieve historical data from MES via API based on the input batch number and draw the actual temperature and pressure curing curves. It can also overlay and display standard process curves for comparison.

[0106] Electronic ingredient list component (`widget-slurry-recipe-form`): A special form component that includes input for raw materials such as cement, sand, lime, and aluminum powder, and can be configured with internal validation logic, such as automatically calculating the proportions of various materials based on the total volume to ensure compliance.

[0107] Example 4:

[0108] This embodiment discloses a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it implements the dynamic interface generation method for the aerated concrete production process described in Embodiment 1.

[0109] A computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in connection with an instruction execution system, apparatus, or device. For example, a computer-readable storage medium can include, but is not limited to: an electrical connection having one or more wire segments, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0110] The embodiments described above are merely illustrative of several implementations of the present invention, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these modifications and improvements all fall within the scope of protection of the present invention. Therefore, the scope of protection of this patent should be determined by the appended claims.< / component> < / component>

Claims

1. A method for generating a dynamic interface for the aerated concrete production process, characterized in that, Includes the following steps: S1. Configure an aerated concrete component and generate a JSON configuration file for the aerated concrete component. Each node of the JSON configuration file contains the type, unique identifier, and attribute object of the aerated concrete component. S2. Load and parse the JSON configuration file, recursively traverse the configuration tree, and based on the dynamic component mechanism of the front-end framework, dynamically instantiate each node of the JSON configuration file into the corresponding UI component in the component library; S3. Listen for interactive events triggered by UI components, call the event handling interface of the core control engine, extract the event logic code string from the dynamic behavior properties of the component, dynamically compile to generate an executable function, inject it into the context and execute it, so as to realize component interaction and cross-component linkage. S4. Based on the API configuration object preset in the JSON configuration file, parse the interface information, parameter processing rules and result processing rules, initiate a data request to the industrial heterogeneous system, format the request parameters and returned data respectively, and send the final data back to the corresponding UI component to complete the interface update.

2. The method for generating a dynamic interface for the aerated concrete production process according to claim 1, characterized in that: In step S1, each component node of the JSON configuration file contains the component type, unique identifier, and props attribute object of the aerated concrete component. The props attribute object stores the static and dynamic attributes of the aerated concrete component.

3. The method for generating a dynamic interface for the aerated concrete production process according to claim 1, characterized in that, Step S2 includes: S21. Obtain the UI configuration file and load a JSON object describing the complete UI hierarchy, attributes, and behaviors as input; S22. Create a root component. Instantiate a root container component based on the root node type of the JSON object. S23. Recursively render child components, starting from the root node and traversing its properties.

4. The method for generating a dynamic interface for the aerated concrete production process according to claim 3, characterized in that: Step S23 includes: S231. For each child node, dynamically determine the component type and construct the corresponding component name based on the attributes of the child node. S232. Instantiate the component: Use the dynamic component functionality of the front-end framework to create instances of the component. S233, Inject configuration and context, passing the entire JSON configuration object of the current child node as a `prop` to the newly created component instance; S234. Recursive processing: If the current child node is also a container component, then take that child node as the parent node and repeat S233 until all nodes are rendered as component instances.

5. The method for generating a dynamic interface for the aerated concrete production process according to claim 1, characterized in that, Step S3 includes: S31, Listen for native events; S32. Trigger the unified event handling entry point; when the event is triggered, call the unified event handling method; S33. Extract the event logic string; S34. Dynamically create executable functions; S35. Inject the context and execute, access and manipulate any other components or data within the application.

6. The method for generating a dynamic interface for the aerated concrete production process according to claim 1, characterized in that, Step S4 includes: S41. Define the API configuration object; S42. Invoke the unified request method; S43, Parameter formatting; S44. Initiate an HTTP request; S45. Result formatting; S46. Execute the callback. After receiving the data, the component updates its own state and re-renders.

7. The method for generating a dynamic interface for the aerated concrete production process according to claim 1, characterized in that, The UI components include specialized components adapted to the aerated concrete production process, and the industrial heterogeneous system includes a Manufacturing Execution System (MES) and a Supervisory Control and Data Acquisition (SCADA) system.

8. A dynamic interface generation system for the aerated concrete production process, characterized in that: include: The UI configuration definition module is used to receive visual configuration operations, generate and maintain a tree-structured JSON configuration file; The core control engine module is used to associate with the UI configuration definition module and make reactive references to the JSON object of the UI configuration; internally, it maintains a component mapping table, which is configured with event handling interface and unified data request interface for managing configuration, handling interactive events and data requests. The dynamic rendering module is used to parse the JSON configuration file and instantiate the configuration nodes into the corresponding UI components in the component library by recursively traversing the configuration tree. The aerated concrete dedicated component library module is used to interface with the dynamic rendering module and has built-in dedicated components adapted to the aerated concrete production process.

9. The dynamic interface generation system for the aerated concrete production process according to claim 8, characterized in that, The dedicated components built into the aerated concrete component library module include autoclave monitoring components, curing curve chart components, and electronic batching sheet components.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the dynamic interface generation method for the aerated concrete production process as described in any one of claims 1 to 7.

Images