A method for dynamically loading customized pages based on an auxiliary control system

Abstract

This invention proposes a method for dynamically loading customized pages based on an auxiliary control system. The method comprises the following steps: Step 1: The auxiliary control system obtains a list of customized components for all devices via HPPT requests and calculates the list of customized components to be loaded based on the browser window's visible area and a preload threshold; Step 2: The system iterates through the list of customized components to be loaded, and for each customized component, generates a URL by concatenating the component's unique ID and version number to load the component content; Step 3: The system automatically pulls third-party dependencies and uses a rendering engine to dynamically compile the customized component content; Step 4: The system displays the customized interface. When requirements change, the system uses an online code editor to update the customized component content and notifies the page of hot updates via a push mechanism. This method significantly improves user experience through intelligent dynamic loading, cache priority, and online hot update mechanisms.

Description

Technical Field

[0001] This invention relates to the field of computer technology, specifically to a method for dynamically loading customized pages based on an auxiliary control system. Background Technology

[0002] With the rapid development of industrial automation and information technology, more and more enterprises are adopting auxiliary control systems to monitor and manage equipment. These auxiliary control systems typically need to provide rich user interfaces to meet the needs of different devices and users. However, traditional device management interfaces build and release all components along with the main application, resulting in excessively large initial screen resources, long change release cycles, inability to respond to user needs in real time, and difficulty in performing fine-grained updates for specific devices. Currently, related patent technologies also have certain problems. For example, patent CN202311757757, "A Composite Component Based on Vue and Its Dynamic Loading System," provides a composite component based on Vue, including Vue source code, component configuration description files, and components. The data description file and component resource package disclose a loading system for this composite component, including a component library, a component runtime framework, a component scaffold, and an application assembler. The component runtime framework includes a component loading module, a component configuration module, and a component runtime module. The component runtime module includes a component definition unit, a component instance unit, a component cache, a component hierarchy tree, a component canvas, a component renderer, and a component communication pipeline. A loading method for the composite component is also disclosed; for example, patent CN202111265068, "Dynamic Component Loading and Registration Method, Apparatus, Device, and Medium Based on UMD Mode," discloses a dynamic component loading and registration method, apparatus, device, and medium based on UMD mode, wherein the method includes... The Vue component, packaged in UMD format and published to the content delivery network (CDN) based on the CDN address, dynamically loads the script code in the Vue component through the CDN, and mounts the selected Vue instance to be registered to the global window. After triggering the event subscription publication, it obtains the selected Vue instance mounted in the current global window, creates a Vue instance by registering the dynamic component, registers it to the current global component, changes the name of the component that needs to be displayed, and mounts the created Vue instance to the dynamic component corresponding to the global window identifier obtained by matching the current global component name. (See patent CN202311218307 "A method for implementing dynamic template display based on Vue and related..."). The patent CN202311757757 focuses on constructing and uploading Vue composite components to a component library, and then parsing and rendering the Vue composite components using a component parser. This method, applicable to the fields of artificial intelligence and finance, includes: loading and displaying a first dynamic template corresponding to the current page of an application using Vue routing; reading the background input data when it changes; determining the corresponding Vue component based on the background input data; updating the first dynamic template using the Vue component to obtain a second dynamic template; and displaying the second dynamic template in real time.Patent CN202111265068 focuses on packaging VUE components in UMD mode, using a global window (window) mounted object to achieve dynamic registration; patent CN106021099A focuses on packaging VUE component libraries into projects, displaying different VUE components through the correspondence between routes and components; both suffer from the common problems of a lengthy local development-packaging-publishing and uploading chain, lazy loading or full loading of routes, white screen delays during switching, and heavy pressure on the first screen;

[0003] Against this backdrop, efficiently loading and rendering customized device components to respond to user needs in real time has become an important task in improving the interface of the auxiliary control system. To this end, the applicant proposed a method for dynamically loading customized device pages based on the auxiliary control system. This method employs intelligent component loading strategies, caching mechanisms, flexible rendering engines, and real-time updates and push mechanisms from an online code editor to construct a multi-strategy rendering engine. This engine can simultaneously support and isolate components from multiple technology stacks, such as VueSFC, native HTML, and JavaScript, within a single page. Furthermore, it resolves the "DLL hell" dependency conflict problem through an automatic dependency injection mechanism. This allows the system to easily reuse historical assets while embracing new technologies, exhibiting strong ecosystem compatibility and significantly improving interface responsiveness and user interaction experience. Summary of the Invention

[0004] To address the aforementioned technical issues, this invention proposes a method for dynamically loading customized pages based on an auxiliary control system. This method obtains a list of customized components for all devices via HTTP requests and intelligently calculates the customized components to be loaded by combining the browser's visible area and a preloading threshold. Then, it iterates through these customized components, initiating resource requests for each component and employing a cache-first mechanism: if a cache exists, it returns the resource directly; otherwise, it retrieves the content of the customized component through a request. Next, it automatically injects the necessary third-party dependencies for the customized component, and the rendering engine dynamically compiles and displays the content based on the customized component's content. When requirements change, an online code editor is used to update the customized component content, and a push mechanism is used to notify the page of hot updates. This method significantly improves system response speed and user experience through intelligent dynamic loading, cache-first approach, and online hot update mechanisms.

[0005] To achieve the above objectives, the technical solution adopted by the present invention is as follows:

[0006] A method for dynamically loading customized pages based on an auxiliary control system, characterized in that: the implementation steps of the method for dynamically loading customized pages based on an auxiliary control system are as follows:

[0007] Step 1: The auxiliary control system obtains the list of customized components for all devices through HPPT request, and calculates the list of customized components to be loaded based on the visible area of ​​the browser window and the preloaded quantity threshold.

[0008] Step 2: Loop through the list of device-customized components to be loaded. For each device-customized component, first generate its URL by concatenating its unique ID and version number. For each device-customized component, initiate a URL request and check if it exists in the cache. If the device-customized component is found in the cache, return its content directly from the cache. For uncached device-customized components, determine if the component type is online source code. If it is online source code, obtain the component's binary content via an HTTP request, process it, and add it to the cache. If it is not online source code, directly load the static resources on the server and add them to the cache.

[0009] Step 3: Automatically fetch third-party dependencies and use the rendering engine to dynamically compile the content of the device-customized components; automatically load the relevant dependency libraries from the specified CDN into the HTML according to the third-party dependencies required by the device-customized components; then adopt different processing strategies according to the type of device-customized components; when an error occurs during the rendering process, the rendering engine will quickly capture and prompt the exception, and perform rollback processing.

[0010] Step 4: Display the customized interface of the device. When the requirements change, use the online code editor to update the content of the customized components of the device and notify the page to update via push mechanism.

[0011] Furthermore, in step one of the method for dynamically loading customized pages based on the auxiliary control system, the auxiliary control system obtains the list of customized components for all devices via HPPT requests to monitor page initialization and mouse events, and updates the list of customized components for devices to be loaded in real time. Specifically:

[0012] 1) The auxiliary control system obtains a list of customized components for all devices via HTTP requests and displays them in tab format, while setting a threshold T for the number of preloaded tabs; it intelligently calculates the index H of the last tab in the current browser window's visible area and determines the number M of customized components to be loaded, where M = T + H; it extracts data from index 0 to M from the customized component list to generate a list of customized components to be loaded; it listens for mouse scroll events, repeats the above calculations, and updates the list of customized components to be loaded in real time.

[0013] 2) The list of customized components for a device includes the device's basic information, the name of the customized component, the type of the customized component, the unique ID of the customized component, the version number of the customized component, and the third-party dependencies of the customized component, etc.

[0014] 3) Device customization component types include HTML online source code, VUE3 online source code, VUE3 JS components, native JS, native HTML, etc.

[0015] Furthermore, in step two of the method for dynamically loading customized pages based on the auxiliary control system, the cache management of the device customization component is implemented using Service Worker, specifically as follows:

[0016] 1) When a URL request is initiated for each device-customized component, the Service Worker takes over and executes the cache priority strategy in the fetch event. First, it opens the unified cache repository and matches it with the URL of the customized component as the key. If a match is found, the cached response is returned directly. If no match is found, it is handled according to the component type. If it is online source code, the binary content is obtained through an HTTP request, decompressed using the fflate library to obtain the original code, then the original code is converted into a Blob object, added to the cache using the service worker's cache.add method, and the original code is returned. If it is not online source code, the static resources of the component are directly fetched from the server, added to the cache using the service worker's cache.put method, and the content is returned.

[0017] 2) The URL of a customized component is formed by concatenating the ID of the customized component and its version number.

[0018] Furthermore, the specific process of the rendering engine flexibly handling different types of components in step three of the method for dynamically loading customized pages based on the auxiliary control system is as follows:

[0019] 1) For HTML online source code components, use Vue's V-HTML directive to dynamically insert content into the page to achieve real-time rendering;

[0020] 2) For online Vue3 source code, use the vue3-sfc-loader component to render single-file components so that their logic and styles can be dynamically loaded and executed;

[0021] 3) For Vue 3 JS components, use Vue's dynamic component registration feature for loading and rendering;

[0022] 4) For native JS components, add them dynamically. <script>标签到HTML的<head>部分，以实现组件的渲染及功能；

[0023] 5）渲染引擎还支持多种其他组件形式，能够根据各类需求灵活添加和渲染，确保应用提供多样化和个性化的用户体验；在解析、编译或挂载过程中发生错误时，渲染引擎触发统一错误处理流程，对异常进行快速定位与提示，并按"缓存优先”策略检索上一稳定版本；命中则自动回退并恢复渲染，未命中则切换至标准化错误页面。

[0024] 进一步的，所述基于辅控系统动态加载定制化页面的方法的步骤四的展示设备定制化界面的实时推送通知通过WebSocket实现，具体为：

[0025] 1）通过在线代码编辑器更新设备定制化组件时，利用WebSocket实时推送更新通知至辅控系统；辅控系统在接收到推送后，将自动调用相关API，获取最新的组件内容，并在无需重新加载整个页面的情况下进行局部重新渲染，实现设备定制化组件的快速迭代与即时生效；

[0026] 2）在线代码编辑器提供从开发到发布的完整闭环，具备代码编写与调试、实时预览、语法高亮、智能补全、错误定位与提示、版本管理与差异比对、发布与回滚、依赖声明与校验等能力。

[0027] 本申请带来的好处是：

[0028] 1、基于辅控系统动态加载定制化页面的方法通过动态加载设备定制化组件，减少了首屏加载时间和资源消耗，显著提高了用户体验；

[0029] 2、基于辅控系统动态加载定制化页面的方法利用Service Worker的缓存功能，能够快速从缓存中返回组件内容，降低网络请求频率，从而实现更快的加载速度；

[0030] 3、基于辅控系统动态加载定制化页面的方法通过在线代码编辑器的实时更新与推送机制，用户可在不刷新页面的情况下获取最新组件版本，增强系统的灵活性和响应速度。附图说明

[0031] 图1为本发明工作示意图；

[0032] 图2为本发明在线编辑器示意图。具体实施方式

[0033] 下面结合附图与具体实施方式对本发明作进一步详细描述：

[0034] 如图1-2所示，所示为一种基于辅控系统动态加载定制化页面的方法，所示基于辅控系统动态加载定制化页面的方法实现步骤为：

[0035] 步骤一、辅控系统通过HPPT请求获取所有设备的定制化组件列表，并根据浏览器窗口可视区域和预加载的数量阀值，计算出待加载的设备定制化组件列表；监听页面初始化和鼠标事件来实时更新待加载的设备定制化组件列表；具体为：

[0036] 1）辅控系统通过HTTP请求获取所有设备的定制化组件列表，并以Tab形式展示，同时设置预加载Tab的数量阀值T，如T=5；智能计算当前浏览器窗口可视区域内的最后一个Tab的索引值H，如H=10，并据此确定需要加载的设备定制化组件列表数量M，其中M=T+H；从设备定制化组件列表中截取索引0到M的数据，生成待加载的设备定制化组件列表；监听鼠标滚动和浏览器窗口Resize事件，当发生变化时，重复上诉计算，如用户滚动鼠标或者窗口尺寸发生变化时，重复上诉计算；实时更新待加载的设备定制化组件列表；

[0037] 2）设备定制化组件列表中包括该设备的基础信息、定制化组件的名称、定制化组件的类型、定制化组件的唯一ID、定制化组件的版本号以及定制化组件的第三方依赖等；

[0038] 3）设备定制化组件类型包括HTML在线源码、VUE3在线源码、VUE3的JS组件、原生JS、原生HTML等

[0039] 步骤二、循环遍历待加载的设备定制化组件列表，对于每个设备定制化组件，先根据组件的唯一ID与版本号拼接生成定制化组件的URL；对于每个设备定制化组件发起URL请求，检查其是否存在缓存中，当在缓存中找到该设备定制化组件，直接从缓存中返回设备定制化组件内容；对于未缓存的设备定制化组件，需要判断组件类型是否为在线源码；当为在线源码，通过HTTP请求获取组件的二进制内容，并在处理后添加到缓存中；当不是在线源码，则直接加载服务器上的静态资源并添加到缓存中；其中设备定制化组件的缓存管理借助Service Worker实现，具体为：

[0040] 1）对于每个设备定制化组件发起URL请求时，由Service Worker在fetch事件中统一接管并执行缓存优先策略；首先打开统一缓存仓库并以定制化组件的URL为键进行匹配，命中则直接返回缓存响应；未命中时依据组件类型进行处理，当是在线源码，则通过HTTP请求获取二进制内容，使用fflate库进行解压获得原始代码，然后将原始代码转换为Blob对象，并通过Service Worker的cache.add方法添加到缓存后将原始代码返回；如不是在线源码，则直接从服务器拉取该组件的静态资源，在利用Service Worker的cache.put方法添加缓存后将内容返回；

[0041] 2）定制化组件的URL由设备定制化组件的ID和其版本号拼接而成；

[0042] 步骤三、自动拉取第三方依赖和使用渲染引擎对从设备定制化组件内容进行动态编译；根据设备定制化组件所需的第三方依赖，自动从指定的CDN加载相关依赖库到HTML中；然后根据设备定制化组件的类型，采取不同的处理策略进；当在渲染过程中出现错误，渲染引擎将快速捕获并提示异常，同时进行回退处理；其中渲染引擎针对不同类型的组件进行灵活处理具体过程为：

[0043] 1）对于组件类型为HTML在线源码，首先通过DOMPurify 库对源码进行清洗，移除潜在的恶意脚本（XSS防护）。随后，利用 Vue 的 v-html 指令或原生的 innerHTML 属性，将清洗后的安全字符串 ... 插入到指定的挂载节点中，实现毫秒级渲染；

[0044] 2）对于VUE3在线源码，通过调用vue3-sfc-loader组件的loadModule方法来渲染单文件组件，定义getFile方法（指向步骤二中返回的在线源码）、addStyle方法（将解析出的css动态插入<style>标签）、moduleCache对象（源码所需要的依赖）等；

[0045] 3）对于VUE3的JS组件，借助VUE的动态组件注册功能进行加载和渲染；

[0046] 4）对于原生JS组件，则动态添加<script>标签到HTML的<head>部分，以实现组件的渲染及功能；

[0047] 5）渲染引擎还支持多种其他组件形式，能够根据各类需求灵活添加和渲染，确保应用提供多样化和个性化的用户体验；在解析、编译或挂载过程中发生错误时，渲染引擎触发统一错误处理流程，对异常进行快速定位与提示，并按"缓存优先”策略检索上一稳定版本；命中则自动回退并恢复渲染，未命中则切换至标准化错误页面；

[0048] 步骤四、展示设备定制化界面，在需求发生变更时，利用在线代码编辑器来更新设备定制化组件内容，并通过推送机制通知页面热更新；其中展示设备定制化界面的实时推送通知通过WebSocket实现，具体为：

[0049] 1）通过如图2所示的在线代码编辑器，更新设备定制化组件时，利用WebSocket实时推送更新通知至辅控系统；辅控系统在接收到推送后，将自动调用相关API，获取最新的组件内容，并在无需重新加载整个页面的情况下进行局部重新渲染，实现设备定制化组件的快速迭代与即时生效；

[0050] 2）在线代码编辑器提供从开发到发布的完整闭环，具备代码编写与调试、实时预览、语法高亮、智能补全、错误定位与提示、版本管理与差异比对、发布与回滚、依赖声明与校验等能力。

[0051] 以上所述，仅是本发明的较佳实施例而已，并非是对本发明作任何其他形式的限制，而依据本发明的技术实质所作的任何修改或等同变化，仍属于本发明所要求保护的范围。< / script>

Claims

1. A method for dynamically loading customized pages based on an auxiliary control system, characterized in that: The implementation steps of the method for dynamically loading customized pages based on the auxiliary control system are as follows: Step 1: The auxiliary control system obtains the list of customized components for all devices through HPPT request, and calculates the list of customized components to be loaded based on the visible area of ​​the browser window and the preloaded quantity threshold. Step 2: Loop through the list of device-customized components to be loaded. For each device-customized component, first generate the URL of the customized component by concatenating the component's unique ID and version number. For each device-customized component, a URL request is initiated to check if it exists in the cache. If the device-customized component is found in the cache, its content is returned directly from the cache. For device-customized components that are not cached, it is necessary to determine whether the component type is online source code. If it is online source code, the binary content of the component is obtained through an HTTP request, processed, and added to the cache. If it is not online source code, the static resources on the server are loaded directly and added to the cache. Step 3: Automatically pull third-party dependencies and use the rendering engine to dynamically compile the content of customized components from the device; Based on the third-party dependencies required by the device-customized components, the relevant dependency libraries are automatically loaded from the specified CDN into the HTML; then, different processing strategies are adopted according to the type of device-customized components; when an error occurs during the rendering process, the rendering engine will quickly capture and prompt the exception, and perform rollback processing at the same time; Step 4: Display the customized interface of the device. When the requirements change, use the online code editor to update the content of the customized components of the device and notify the page to update via push mechanism.

2. The method for dynamically loading customized pages based on an auxiliary control system according to claim 1, characterized in that: In the method for dynamically loading customized pages based on the auxiliary control system, step one involves the auxiliary control system obtaining a list of customized components for all devices via HPPT requests to monitor page initialization and mouse events, thereby updating the list of customized components to be loaded in real time. 1) The auxiliary control system obtains a list of customized components for all devices via HTTP requests and displays them in tab format, while setting a threshold T for the number of preloaded tabs; it intelligently calculates the index H of the last tab in the current browser window's visible area and determines the number M of customized components to be loaded, where M = T + H; it extracts data from index 0 to M from the customized component list to generate a list of customized components to be loaded; it listens for mouse scroll events, repeats the above calculations, and updates the list of customized components to be loaded in real time. 2) The list of customized components for a device includes the device's basic information, the name of the customized component, the type of the customized component, the unique ID of the customized component, the version number of the customized component, and the third-party dependencies of the customized component, etc. 3) Device customization component types include HTML online source code, VUE3 online source code, VUE3 JS components, native JS, native HTML, etc.

3. The method for dynamically loading customized pages based on an auxiliary control system according to claim 1, characterized in that: The cache management of the device customization component in step two of the method for dynamically loading customized pages based on the auxiliary control system is implemented using Service Worker, specifically as follows: 1) When a URL request is initiated for each device-customized component, the Service Worker takes over and executes the cache priority strategy in the fetch event. First, it opens the unified cache repository and matches it with the URL of the customized component as the key. If a match is found, the cached response is returned directly. If no match is found, it is handled according to the component type. If it is online source code, the binary content is obtained through an HTTP request, decompressed using the fflate library to obtain the original code, then the original code is converted into a Blob object, added to the cache using the service worker's cache.add method, and the original code is returned. If it is not online source code, the static resources of the component are directly fetched from the server, added to the cache using the service worker's cache.put method, and the content is returned. 2) The URL of a customized component is formed by concatenating the ID of the customized component and its version number.

4. The method for dynamically loading customized pages based on an auxiliary control system according to claim 1, characterized in that: The specific process of the rendering engine in step three of the method for dynamically loading customized pages based on the auxiliary control system to flexibly handle different types of components is as follows: 1) For HTML online source code components, use Vue's V-HTML directive to dynamically insert content into the page to achieve real-time rendering; 2) For online Vue3 source code, use the vue3-sfc-loader component to render single-file components so that their logic and styles can be dynamically loaded and executed; 3) For Vue 3 JS components, use Vue's dynamic component registration feature for loading and rendering; 4) For native JS components, add them dynamically. <script>标签到HTML的<head>部分，以实现组件的渲染及功能；5）渲染引擎还支持多种其他组件形式，能够根据各类需求灵活添加和渲染，确保应用提供多样化和个性化的用户体验；在解析、编译或挂载过程中发生错误时，渲染引擎触发统一错误处理流程，对异常进行快速定位与提示，并按"缓存优先”策略检索上一稳定版本；命中则自动回退并恢复渲染，未命中则切换至标准化错误页面。5.根据权利要求1所述的一种基于辅控系统动态加载定制化页面的方法，其特征在于：所述基于辅控系统动态加载定制化页面的方法的步骤四的展示设备定制化界面的实时推送通知通过WebSocket实现，具体为：1）通过在线代码编辑器更新设备定制化组件时，利用WebSocket实时推送更新通知至辅控系统；辅控系统在接收到推送后，将自动调用相关API，获取最新的组件内容，并在无需重新加载整个页面的情况下进行局部重新渲染，实现设备定制化组件的快速迭代与即时生效；2）在线代码编辑器提供从开发到发布的完整闭环，具备代码编写与调试、实时预览、语法高亮、智能补全、错误定位与提示、版本管理与差异比对、发布与回滚、依赖声明与校验等能力。< / script>

Images