Internet of Things cloud configuration designer component communication method, system, device and medium

Abstract

The invention relates to the field of Internet of Things, and provides an Internet of Things cloud configuration designer component communication method, system and device and a medium, and the method comprises the steps: obtaining an operation instruction of a user, analyzing the operation instruction of the user into a variable parameter, and updating a page variable value based on the variable parameter; synchronizing the page variable values to the components depending on the same page variable so as to perform communication between the components through the page variable values, and determining data bound with the target component; in response to the fact that the data bound with the target component is the page variable, directly updating the displayed data by using a page variable value; and in response to the fact that the data bound with the target component is a data set, taking the page variable as a filtering condition, querying and filtering in the data set, and displaying the filtered data in the component. According to the invention, the component can update the display content according to the real-time data and reflect the change of the equipment state or the business index. A user can conveniently and remotely control equipment connected with the component through the component on the operation interface.

Description

Technical Field

[0001] The present invention relates to the field of the Internet of Things, and particularly to a method, system, device and medium for component communication of an Internet of Things cloud configuration designer. Background Art

[0002] The Internet of Things industry is in a stage of rapid growth. It is expected that by 2025, more than 75 billion devices will be connected to the Internet globally. With the development of technologies such as 5G, artificial intelligence, and big data, the scope and depth of Internet of Things applications are constantly expanding. From smart homes, smart cities to industrial automation and healthcare, Internet of Things technology is becoming a key force driving social progress.

[0003] With the rapid development of Internet of Things technology, more and more devices and systems are connected to the Internet, enabling data collection, exchange, and analysis. As an important tool for building and managing the interfaces of these connected devices, the performance and user experience of the Internet of Things cloud configuration designer directly affect the efficiency and attractiveness of Internet of Things solutions.

[0004] Despite the significant progress made in Internet of Things technology, in the field of Internet of Things cloud configuration design, there are still some limitations in the existing technologies: Complexity of component communication: In traditional Internet of Things configuration designers, communication between components usually requires complex programming logic, which not only increases the development difficulty but also limits the flexibility and scalability of the system. Insufficient user experience: Many existing solutions fail to provide a smooth and intuitive user interaction experience, resulting in confusion or inconvenience for users during use. Real-time and responsiveness issues: In some cases, it is difficult for existing technologies to achieve real-time data updates and responses of components, affecting the response speed and accuracy of the system. Difficulties in maintenance and upgrade: As the scale of the system expands, the maintenance and upgrade of existing technologies become increasingly difficult, requiring a large amount of time and resources.

[0005] Although some Internet of Things configuration design tools are provided in the market, these tools generally have the following technical defects: The component communication mechanism is not flexible enough to adapt to changing business requirements. The interactivity and dynamic effects of the user interface are limited and cannot provide a rich user experience. The system scalability is insufficient and it is difficult to support large-scale deployment and applications in complex scenarios. There is a delay in data update and component response, affecting the real-time performance of the system. Summary of the Invention

[0006] Aiming at the limitations and defects of the existing technologies, the present invention provides a method, system, device and medium for component communication of an Internet of Things cloud configuration designer. By introducing page variables as the medium for component communication, the component communication mechanism is simplified, and intelligent linkage of components is achieved.

[0007] For the above purposes, the present invention proposes a method for component communication in an Internet of Things cloud configuration designer, including:

[0008] Obtain the operation instructions of the user, parse the operation instructions of the user into variable parameters, and update the page variable values based on the variable parameters;

[0009] Synchronize the page variable values to components that depend on the same page variable, so as to communicate between components through the page variable values, and determine the data bound to the target component;

[0010] In response to the data bound to the target component being a page variable, directly update the displayed data using the page variable values;

[0011] In response to the data bound to the target component being a data set, use the page variable as a filtering condition to query and filter in the data set, and display the filtered data in the component.

[0012] In some embodiments, the step of obtaining the operation instructions of the user, parsing the operation instructions of the user into variable parameters, and updating the page variable values based on the variable parameters includes:

[0013] Real-time capture the operation instructions of the user in different interaction methods through an event listening mechanism;

[0014] Parse the operation instructions of the user into variable parameters for variable update;

[0015] According to the preset configuration rules, map the variable parameters to the corresponding page variables to update the page variable values, and record the detailed information of the update.

[0016] In some embodiments, the step of synchronizing the page variable values to components that depend on the same page variable, so as to communicate between components through the page variable values includes:

[0017] Monitor changes in page variables;

[0018] In response to changes in page variables, trigger an update event and call the corresponding callback function;

[0019] When a component that depends on the same page variable receives the callback function, render the internal state according to the page variable values.

[0020] In some embodiments, the step of when a component that depends on the same page variable receives the callback function and renders the internal state according to the page variable values includes:

[0021] Identify the dependency relationships between components that depend on the same page variable;

[0022] Obtain the components that need to respond to the callback function through dependency analysis, and determine the propagation path;

[0023] Render the internal states of all components that need to respond to the callback function based on the propagation path.

[0024] In some embodiments, the step of directly updating the displayed data using the page variable value when the data bound to the component is a page variable includes:

[0025] When the page variable value changes, trigger a change notification event;

[0026] Send the page variable value as part of the change notification event to the corresponding component;

[0027] Obtain the current state and configuration of the component and update them, and display the updated data.

[0028] In some embodiments, the step of obtaining the current state and configuration of the component and updating them, and displaying the updated data includes:

[0029] Obtain the current state and configuration of the component;

[0030] Simulate the updated state and configuration, and compare the differences between the current state and the updated state;

[0031] Correspondingly update the changed part based on the preset update frequency limit and the differences;

[0032] Display the updated data.

[0033] In some embodiments, the step of using the page variable as a filtering condition to query and filter in the data set when the data bound to the target component is a data set, and displaying the filtered data in the component includes:

[0034] Associate the page variable as a filtering condition with the data set;

[0035] Based on the page variable value, construct a filtering statement and convert the filtering statement into a query statement applicable to the data set;

[0036] Use the query statement to perform a query operation in the data set to filter out the query results that meet the filtering conditions;

[0037] Sort, page, and aggregate the query results, bind the processed data to the data model of the target component, and re-render and display the filtered data on the interface.

[0038] The present invention proposes a system for component communication of an Internet of Things cloud configuration designer, including:

[0039] An acquisition unit, configured to acquire an operation instruction of a user, parse the operation instruction of the user into variable parameters, and update a page variable value based on the variable parameters;

[0040] A synchronization unit, configured to synchronize the page variable value to components that depend on the same page variable, to communicate between components through the page variable value, and determine data bound to a target component;

[0041] A first display unit, configured to, in response to the data bound to the target component being a page variable, directly update the displayed data using the page variable value;

[0042] A second display unit, configured to, in response to the data bound to the target component being a data set, use the page variable as a filtering condition, query and filter in the data set, and display the filtered data in the component.

[0043] The present invention provides a computer device, including:

[0044] At least one processor; and a memory, the memory storing a computer program that can run on the processor, and when the processor executes the program, it executes the steps of the method for component communication of the Internet of Things cloud configuration designer.

[0045] The present invention provides a computer-readable storage medium, the computer-readable storage medium storing a computer program, and when the computer program is executed by a processor, it executes the steps of the method for component communication of the Internet of Things cloud configuration designer.

[0046] The present invention at least has the following beneficial technical effects:

[0047] The present invention provides a method, system, device and medium for component communication of the Internet of Things cloud configuration designer. The method includes: acquiring an operation instruction of a user, parsing the operation instruction of the user into variable parameters, and updating a page variable value based on the variable parameters; synchronizing the page variable value to components that depend on the same page variable, to communicate between components through the page variable value, and determine data bound to a target component; in response to the data bound to the target component being a page variable, directly update the displayed data using the page variable value; in response to the data bound to the target component being a data set, use the page variable as a filtering condition, query and filter in the data set, and display the filtered data in the component.

[0048] By introducing page variables as the medium for component - to - component communication, components can indirectly control other components by updating page variables, thus significantly reducing direct dependencies between components and improving the flexibility and scalability of the system. When the value of a page variable changes, a change notification event is triggered, and the page variable value is sent to relevant components. The components update the displayed data according to the latest page variable value, ensuring data real - time and consistency. For components bound to data sets, page variables can be used as filtering conditions to filter specific data in the data set. In this way, components can efficiently obtain filtered data, reducing unnecessary data processing and rendering loads. Users can remotely control devices connected to components (such as selecting a date range, clicking on a chart, etc.) through components on the operation interface or display more detailed data information. This intelligent linkage mechanism provides a more intuitive and efficient interaction experience for users. Since component - to - component communication is decoupled through page variables, new components and functions can be more easily integrated into the existing system without modifying the code of existing components, reducing maintenance costs and accelerating development speed. In complex application scenarios, users may need to perform multiple steps to complete a task, and the component communication mechanism of the present invention can support such complex interactions and simplify the user operation process. Brief Description of the Drawings

[0049] To more clearly illustrate the technical solutions in the embodiments of the present invention or in the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following - described drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other embodiments can be obtained based on these drawings.

[0050] Figure 1 It is a flowchart of the method for component communication of the Internet of Things cloud configuration designer provided by the present invention;

[0051] Figure 2 It is a system module diagram of the component communication of the Internet of Things cloud configuration designer provided by the present invention;

[0052] Figure 3 It is the first component communication mode diagram of an embodiment of the method for component communication of the Internet of Things cloud configuration designer provided by the present invention;

[0053] Figure 4 It is the second component communication mode diagram of an embodiment of the method for component communication of the Internet of Things cloud configuration designer provided by the present invention;

[0054] Figure 5 It is the third component communication mode diagram of an embodiment of the method for component communication of the Internet of Things cloud configuration designer provided by the present invention;

[0055] Figure 6 An example diagram of component-bound data set for an embodiment of the method for component communication of the Internet of Things cloud configuration designer provided by the present invention;

[0056] Figure 7 A schematic structural diagram of an embodiment of the computer device provided by the present invention;

[0057] Figure 8 A schematic structural diagram of an embodiment of the computer-readable storage medium provided by the present invention. Detailed implementation manners

[0058] To make the objectives, technical solutions, and advantages of the present invention clearer and more understandable, the following further elaborates on the embodiments of the present invention in detail with reference to specific embodiments and the accompanying drawings.

[0059] It should be noted that all the expressions using "first" and "second" in the embodiments of the present invention are for distinguishing two entities or parameters with the same name but different identities. It can be seen that "first" and "second" are only for the convenience of expression and should not be construed as a limitation on the embodiments of the present invention. This will not be elaborated one by one in the subsequent embodiments.

[0060] The present invention aims to solve the problems of complex communication between components, insufficient user experience, and poor real-time performance and responsiveness in existing Internet of Things cloud configuration designers. Specifically, the present invention proposes a component communication method based on page variables, which simplifies the communication mechanism between components, improves the flexibility and maintainability of the system, and enhances the user experience at the same time.

[0061] The present invention proposes a method for component communication of the Internet of Things cloud configuration designer. Please refer to Figure 1 、 Figure 3 、 Figure 4 and Figure 5 , including:

[0062] S1: Obtain the operation instruction of the user, parse the operation instruction of the user into variable parameters, and update the page variable value based on the variable parameters.

[0063] As described above, the core of this step is to convert the operation instruction of the user into variable parameters recognizable by the system and update the page variable value through these parameters. Specifically, any interaction behavior of the user in the interface (such as clicking a button, dragging a slider, entering text, etc.) will be captured by the system and parsed into specific variable parameters. Subsequently, these parameters will be mapped to the preset page variables, thereby realizing the dynamic update of the page variable value.

[0064] This process relies on an event listening mechanism. The system will monitor the user's interaction actions in real time and convert the operation instructions into variable parameters according to predefined rules. For example, when the user adjusts the position of a certain slider, the system will capture this action, parse it into a specific value within a numerical range, and then assign this value to the corresponding page variable.

[0065] For example, assume that in a large-screen application of an Internet of Things cloud configuration designer, the user needs to filter the historical data of devices through a date picker component. The following is the specific process in this scenario: The user selects a specific time range (such as "January 1, 2023 to January 7, 2023") in the date picker; the system captures this operation instruction of the user through the event listening mechanism; the system parses the user's selection into two variable parameters: start date and end date; according to the preset configuration rules, the system maps these two variable parameters to two page variables (startDate and endDate) respectively and updates their values. Finally, other components (such as data tables or charts) that depend on startDate and endDate will reload and display the data within the corresponding time range according to the updated page variable values.

[0066] It should be noted that in specific implementation scenarios, based on the above solution, a multi-source operation instruction support solution can also be adopted, that is, the system can support operation instructions from multiple sources, not limited to the user's direct interaction behaviors, but also including scheduled tasks, push messages from external systems, or changes in device status, etc. For example, when a certain sensor detects that the temperature exceeds the threshold, the system can automatically trigger an operation instruction, parse it into variable parameters, and update the page variable values. Adopt a complex operation instruction parsing solution, that is, for complex user operations (such as adjusting multiple parameters simultaneously or performing combined operations), the system can design more refined parsing logic. For example, the user may select multiple conditions (such as device type, geographical location, and time range) on an interface at the same time, and the system needs to be able to parse these conditions into independent variable parameters one by one and update the corresponding page variable values according to the priority or logical relationship. Adopt a dynamic mapping rule solution for variable parameters, that is, the preset configuration rules can be dynamically adjusted according to different application scenarios. For example, in some cases, the user's operation instructions may need to go through additional calculations or conversions to generate the final variable parameters, and this dynamic mapping rule can improve the flexibility of the system and adapt to more business requirements. The above optional solutions all fall within the protection scope of this application.

[0067] S2: Synchronize the page variable values to the components that depend on the same page variable, so as to communicate between components through the page variable values and determine the data bound to the target component.

[0068] As described above, the core of this step lies in synchronizing the updated page variable values to all components that depend on this variable, thus achieving communication between components. Specifically, when the page variable value changes, the system will trigger an update event and notify all components that depend on this variable through a callback function. After receiving the notification, these components will re-render their states or perform corresponding operations according to the latest page variable value.

[0069] This process relies on the global sharing mechanism of page variables and the management of dependencies between components. The system will automatically identify which components depend on a specific page variable and ensure that these components can receive the latest data in a timely manner when the variable value changes. This mechanism not only simplifies the direct communication between components but also improves the flexibility and maintainability of the system.

[0070] For example, assume that in a large-screen application of an Internet of Things cloud configuration designer, there is the following scenario: a page variable, temperatureThreshold (temperature threshold), used to store the temperature warning value set by the user; component A, a slider component that allows the user to adjust the temperature threshold; component B, a chart component that displays the real-time temperature curve of the device and marks the part exceeding the threshold in red; component C, a warning message panel that displays a warning message when the device temperature exceeds the threshold.

[0071] The following is the specific process in this scenario: the user adjusts the temperature threshold through component A, for example, from 30°C to 35°C; the system captures the user's operation instruction, parses it into variable parameters, and updates the value of the page variable temperatureThreshold to 35°C; the system triggers an update event and calls the callback function related to temperatureThreshold; components B and C receive the callback function notification and obtain the latest temperatureThreshold value (35°C); component B recalculates the marked area of the temperature curve and only marks the part exceeding 35°C in red; component C checks whether the current device temperature exceeds 35°C, and if it exceeds, it displays a warning message, otherwise it hides the warning message. In this way, multiple components can work together according to the change of the same page variable, forming an intelligent linkage effect.

[0072] It should be noted that in specific implementation scenarios, on the basis of the above solutions, a multi-level dependency management solution can also be adopted. That is, in a complex system, there may be multi-level dependency relationships between components. For example, component A depends on page variable X, and component B depends on the state change of component A. The system can identify and propagate dependency relationships recursively to ensure that all relevant components can receive the latest data. This mechanism can further enhance the intelligence and flexibility of the system. Adopt a delayed synchronization strategy solution, that is, for some page variables that need to be updated frequently, the system can introduce a delayed synchronization strategy to avoid performance degradation caused by overly frequent notifications. For example, the system can aggregate multiple variable value changes within a certain time interval and notify all dependent components at once. This strategy is particularly suitable for scenarios with high real-time requirements, such as device status monitoring. Adopt a component priority management solution, that is, in some cases, different components may have different response requirements for changes in the same page variable. The system can define priority rules for each component to ensure that high-priority components can receive the latest variable value first and complete processing. For example, in a device control scenario, components related to safety (such as an emergency stop button) may require a higher priority. The above optional solutions all fall within the protection scope of this application.

[0073] S3: In response to the data bound by the target component being a page variable, directly update the displayed data using the page variable value.

[0074] As described above, the core of this step is that when the data bound by the target component is a page variable, the system will directly update the displayed data of the component using the latest page variable value. This process does not require additional data processing or conversion, ensuring that the component can respond to changes in page variables at the fastest speed and be reflected in the interface in real time.

[0075] Specifically, when the page variable value changes, the system will trigger a change notification event and pass the latest page variable value to the relevant components. After receiving the notification, the target component will update its displayed content based on its own state and configuration, combined with the latest page variable value. This mechanism not only improves the response speed of the system but also reduces unnecessary calculations and resource consumption.

[0076] For example, assume that in a large-screen application of an Internet of Things cloud configuration designer, there is the following scenario: a page variable, deviceStatus (device status), used to store the current operating status of a certain device (such as "normal", "warning", or "fault"); component A, a text display component, used to display the device status information in real time; component B, an icon component, which displays different icons according to the device status (such as a green tick for normal, a yellow exclamation mark for warning, and a red cross for fault).

[0077] The following is the specific process in this scenario: When the device status changes (e.g., from "Normal" to "Warning"), the system updates the value of the page variable deviceStatus to "Warning"; the system triggers a change notification event and sends the latest deviceStatus value ("Warning") to Component A and Component B; after receiving the notification, Component A directly updates its display content using the latest value of deviceStatus and displays the text as "Warning"; after receiving the notification, Component B switches to a yellow exclamation mark icon according to the latest value of deviceStatus. In this way, multiple components can quickly adjust their display content according to the change of the same page variable, achieving the effect of intelligent linkage.

[0078] It should be noted that in a specific implementation scenario, based on the above solution, a dynamic status switching solution can also be adopted, that is, the system can support the target component to dynamically switch its status according to the change of the page variable value. For example, in some scenarios, the component may need to switch from one mode to another mode according to the value of the page variable (such as from the normal mode to the emergency mode). This mechanism can be used to implement more complex functions, such as device control or alarm prompts. Adopt a multi-dimensional data binding solution, that is, the target component can be bound to multiple page variables at the same time and update its display content according to the combined values of these variables. For example, a chart component may need to depend on the time range variable and the device type variable at the same time to display the performance indicators of a certain type of device within a specific time period. This multi-dimensional data binding mechanism can improve the flexibility and adaptability of the system. Adopt a data format conversion solution, that is, in some cases, the original value of the page variable may not meet the display requirements of the target component, and the system can provide a built-in data format conversion function to convert the page variable value into the format required by the target component before displaying it. For example, convert the numerical temperature value into a text description with a unit (such as "35°C"). The above optional solutions all fall within the protection scope of this application.

[0079] S4: In response to the data bound by the target component being a data set, use the page variable as a filtering condition to query and filter in the data set, and display the filtered data in the component.

[0080] As described above, the core of this step is that when the data bound by the target component is a data set, the system will use the page variable as a filtering condition to perform query and filtering operations on the data set, and finally display the filtered data in the component. This process realizes the dynamic filtering function through the page variable, enabling the component to display relevant data subsets according to user interaction or specific conditions.

[0081] Specifically, the system constructs a filtering statement based on the values of page variables and converts it into a query statement applicable to the dataset. Subsequently, the system executes the query operation in the dataset to filter out the data that meets the filtering conditions. Finally, the filtered data is bound to the data model of the target component and re-rendered on the interface for display to the user.

[0082] For example, assume that in a large-screen application of an IoT cloud configuration designer, there is the following scenario: a page variable, dateRange (date range), used to store the time period selected by the user; a dataset containing the historical operation records of devices, with each record including information such as timestamp, device ID, and operation status; Component A, a table component, used to display the device operation records within a specified time period; Component B, a chart component, used to display the status statistics of devices within the same time period (such as the proportion of normal running time).

[0083] The following is the specific process in this scenario: The user selects a specific time period (e.g., "January 1, 2023 to January 7, 2023") through the date picker component; the system captures the user's operation instruction, parses it into variable parameters, and updates the value of the page variable dateRange to "2023-01-01 to 2023-01-07"; the system recognizes that Component A and Component B depend on dateRange and triggers an update event; after receiving the update event, Component A uses dateRange as a filtering condition to query the device operation records within this time period in the dataset and displays the results in the table; after receiving the update event, Component B also uses dateRange as a filtering condition to calculate the status statistics of devices within this time period in the dataset and displays the results in the chart. In this way, multiple components can dynamically filter and display relevant data according to the change of the same page variable, achieving the effect of intelligent linkage.

[0084] It should be noted that in specific implementation scenarios, on the basis of the above solutions, a multi-dimensional filtering solution can also be adopted, that is, the system can support using multiple page variables as filtering conditions simultaneously to achieve multi-dimensional data screening. For example, in addition to the date range, page variables such as device type and geographical location can also be combined to further narrow the scope of the data set. This mechanism is particularly suitable for complex data analysis scenarios. An advanced query logic solution can be adopted, that is, when constructing the filtering statement, the system can support more complex query logics, such as fuzzy matching, range query, sorting rules, etc. For example, users can select to display the average operating temperature of all devices within a certain period and sort them from high to low according to the temperature. This mechanism can improve the flexibility and accuracy of data screening. A paging and performance optimization solution can be adopted, that is, for large-scale data sets, the system can reduce the amount of data returned by a single query through paging technology, thereby reducing memory occupancy and rendering pressure. For example, only the first 100 qualified data are loaded each time, and a paging function is provided for users to view more content. This mechanism can significantly improve the performance and response speed of the system. The above optional solutions all fall within the protection scope of this application.

[0085] The present invention aims at the interactivity and intelligent linkage ability of components in large-screen displays, and introduces page variables as a medium for communication between components to achieve decoupling and data sharing between components in order to meet the evolving requirements of Internet of Things applications. Components can indirectly control other components by updating page variables to achieve intelligent linkage. Component data binding supports two sources, namely data sets and page variables, and page variables can be selected as filtering parameters to optimize the data query process. High degree of decoupling: Indirect communication between components is achieved through page variables, significantly reducing the direct dependence between components and improving the flexibility and maintainability of the system.

[0086] The application scenarios of the Internet of Things cloud configuration designer are extremely extensive, covering multiple core fields of the Internet of Things such as IoT dashboards, device visualization large screens, and device data analysis dashboards. It can not only provide real-time data analysis and display, but also meet the personalized needs of different industries for data visualization.

[0087] In the large screen of the Internet of Things cloud configuration designer, components can withstand user interaction actions to present some dynamic effects. The communication between components is the basis for achieving the following dynamic effects:

[0088] Data refresh: Components can update the display content according to real-time data, reflecting changes in device status or business metrics.

[0089] Controlling devices: Users can remotely control connected devices by operating the components on the operation interface, such as turning lights on and off, adjusting the temperature, etc.

[0090] Play video: Based on user interaction or specific trigger conditions, the component can play videos or animations to provide a more rich information display.

[0091] Control component visibility: Based on user operations or system status, the component can be dynamically shown or hidden to optimize the interface layout and user experience.

[0092] Display data details: Users can, through interactive operations such as clicking on a chart or a list item, display more detailed data information.

[0093] Open link: The component can contain a link, which, when clicked by the user, can open a web page or jump to other parts within the application.

[0094] Communication between components not only affects the responsiveness of the user interface, but also relates to the flexibility and scalability of the entire system. For this reason, we propose three component communication methods as follows Figure 3 、 Figure 4 and Figure 5 shown, and each method has its unique implementation mechanism and application scenario. Among them, Figure 5 the third method shown realizes intelligent linkage between components through page variables, with significant innovation and advantages.

[0095] As Figure 3 shown, the component directly triggers the execution of an action, and the communication between components is direct. An interactive action (such as clicking, swiping, etc.) of one component will immediately trigger the execution of an action. The advantage of this method lies in its fast response speed.

[0096] As Figure 4 shown, component A controls component B. In this method, component A acts as the control end and directly controls the behavior of component B by sending instructions or data. This method allows for more flexible interaction between components, but the disadvantage is that the coupling degree between components is high, making it not easy to manage and expand.

[0097] As Figure 5 shown, component A indirectly controls components B, C, and D by updating page variables

[0098] This is the key mechanism for realizing intelligent linkage. The core of this method lies in the use of page variables, which, as a bridge for communication between components, allows components to achieve data sharing and status synchronization without direct interaction.

[0099] Page variables are globally accessible and modifiable variables that store the data and information shared between components. User operations (such as clicking, swiping, etc.) trigger the interactive actions of components, and these actions are reflected in other components through the update of page variables to achieve instant feedback and linkage.

[0100] Page variables serve as the center of the data flow, ensuring that the states of all related components are synchronized. When a component updates a page variable, all components that depend on the variable will receive the latest data.

[0101] Components can be bound to page variables or datasets.

[0102] If components are bound to page variables, they will directly update their display or state with the new page variable values.

[0103] If the components are bound to a dataset, they will use the updated page variable values ​​as filter parameters to re-query the dataset and obtain the latest data.

[0104] Components listen to page variable change events, and when the variable value is updated, they update their own status or perform corresponding actions according to the new value. This mechanism achieves loosely coupled communication between components and improves the flexibility of the system.

[0105] When a component is bound to a data set, the page variable can be used as a filter condition to implement query filtering of the data set. This method optimizes the data query process, allowing the component to display the latest, filtered data, and improves the efficiency and accuracy of data acquisition.

[0106] All components in the large screen can be interconnected through page variables to form a huge communication network. Based on this communication network, intelligent linkage is achieved between components, and changes in one component can automatically affect the behavior of other components.

[0107] In some embodiments, through the detailed description of the application scenario, component A is a date range component that can be selected by the user. The user can select a time range to trigger the interaction, and then update the page variable to reflect this selection. Component B is a table that uses the page variable as a filter parameter to query data within a specific date range from the data set and display it in the table. Component C is a chart that dynamically adjusts the display range of the chart according to the value of the page variable. Component D is an information panel that displays or hides specific information based on the value of the page variable. It not only improves the efficiency of collaboration between components, but also improves the performance of the designer, bringing a more intelligent and smooth user experience to the IoT cloud configuration designer.

[0108] In some embodiments, please refer to Figure 1 The steps of obtaining the user's operation instruction, parsing the user's operation instruction into variable parameters, and updating the page variable value based on the variable parameters include:

[0109] Capture the operation instructions of users with different interaction modes in real time through event monitoring mechanism;

[0110] Parse the operation instruction of the user into variable parameters for variable update;

[0111] According to the preset configuration rules, map the variable parameters to the corresponding page variables to update the page variable values, and record the detailed information of the update.

[0112] Directly update the data on the page after the user's operation without reloading the entire page, which can significantly reduce the page loading time and improve the user experience. It reduces unnecessary network requests and data transmission, and alleviates the burden on the server. By abstracting the user's operation into variable parameters, the same logic can be reused in multiple places to process different inputs, reducing code redundancy. It can easily implement dynamic data binding and listening, and dynamically change the page layout or content according to user input.

[0113] In some embodiments, refer to Figure 1 and Figure 5 The step of synchronizing the page variable values to components that depend on the same page variable for communication between components through the page variable values includes:

[0114] Listen for changes in page variables;

[0115] In response to changes in page variables, trigger an update event and call the corresponding callback function;

[0116] When a component that depends on the same page variable receives the callback function, render the internal state according to the page variable value.

[0117] Improve the consistency and reliability of the application, ensure that all components that depend on the same page variable display the latest data state, and avoid data inconsistency problems. Through centralized variable management, errors and omissions caused by scattered data are reduced. Components can communicate through shared page variables without establishing complex direct communication links, reducing the coupling degree between components. When a component modifies the value of a page variable, all components that depend on that variable can immediately respond and update their own states, enhancing the dynamicity and responsiveness of the application. By sharing page variables, the logic and interface elements related to these variables can be reused. Centralized management of page variables makes maintenance and update easier, and developers can clearly see which components depend on which variables.

[0118] In some embodiments, refer to Figure 1 and Figure 5 The step of, when a component that depends on the same page variable receives the callback function, rendering the internal state according to the page variable value includes:

[0119] Identify the dependency relationships between components that depend on the same page variable;

[0120] Components that need to respond to the callback function are obtained through dependency analysis, and the propagation path is determined;

[0121] Render the internal states of all components that need to respond to the callback function based on the propagation path.

[0122] By using the callback function, it is ensured that the component is only rendered when it receives the latest page variable value. This helps to avoid data conflicts and inconsistencies. All components that depend on the same page variable will receive the same callback function and variable value, thus ensuring data consistency throughout the application. The component is only rendered when the page variable value changes, avoiding unnecessary DOM operations and thus improving the performance of the application. Components can receive different callback functions and variable values as needed, which helps to achieve a more modular and reusable component design. When the page variable value involves complex logic or calculations, the component can receive the processed result through the callback function without implementing this logic inside the component, providing greater flexibility and control capabilities

[0123] In some embodiments, refer to Figure 1 , the steps of directly updating the displayed data using the page variable value when the data bound to the component is a page variable include:

[0124] When the page variable value changes, trigger a change notification event;

[0125] Send the page variable value as part of the change notification event to the corresponding component;

[0126] Obtain the current state and configuration of the component and update them, and display the updated data.

[0127] Since the component is directly bound to the page variable, when the value of the page variable changes, the component can immediately sense and update the data it displays, making the interaction between the user and the application more real-time. Since the component directly uses the page variable value without additional data conversion or calculation, the CPU consumption and computational amount are reduced. When the page variable value changes, the component can efficiently update its DOM, reducing unnecessary repaints and reflows, thus improving the rendering performance. The component can display dynamically changing data, such as real-time updated charts, lists, or messages, etc.

[0128] In some embodiments, refer to Figure 1 , the steps of obtaining the current state and configuration of the component and updating them, and displaying the updated data include:

[0129] Obtain the current state and configuration of the component;

[0130] Simulate the state and configuration after the update, and compare the differences between the current state and the updated state;

[0131] Update the changed parts based on the preset update frequency limit and the differences;

[0132] Display the updated data.

[0133] By restricting the update frequency, the unnecessary number of DOM updates can be reduced, thereby reducing the rendering pressure on the browser and improving the performance of the application. Frequent data updates not only consume CPU resources but also may cause frequent repaints and reflows of the GPU, increasing the energy consumption of the device. Restricting the update frequency helps save these resources. In the case of real-time data display, overly frequent data changes may cause visual interference to users. Appropriate update frequency limits can balance the real-time nature of the data and the visual comfort of users. Some data sources may have short-term fluctuations or jitters. If these changes are directly reflected on the page, it may cause users to have misunderstandings or confusion. By setting the update frequency limit, these fluctuations can be smoothed and the data stability can be improved. Different data sources have different update frequencies and characteristics. By setting the update frequency limit, these differences can be flexibly addressed to ensure that the component can work properly in different scenarios.

[0134] In some embodiments, please refer to Figure 1 and Figure 6 The steps of, in response to the data bound to the target component being a data set, using the page variable as a filtering condition, querying and filtering in the data set, and displaying the filtered data in the component include:

[0135] Associate the page variable used as the filtering condition with the data set;

[0136] Based on the page variable value, construct a filtering statement and convert the filtering statement into a query statement applicable to the data set;

[0137] Use the query statement to perform a query operation in the data set to filter out the query results that meet the filtering conditions;

[0138] Sort, page, and aggregate the query results, bind the processed data to the data model of the target component, and re-render and display the filtered data on the interface.

[0139] By using the page variable as a filtering condition, the part of the data set that is most relevant to the user's current operation or needs can be accurately located. Filtering out irrelevant data reduces the interference for users when viewing information and improves the readability and usability of the data. Only processing and displaying a part of the data set (i.e., the filtered data) reduces the load of data processing and rendering.

[0140] Users can see the data they care about more quickly without waiting for the processing and loading of the entire dataset. Page variables, as filtering conditions, can be dynamically changed to support users in performing real-time filtering according to different requirements. This way of data filtering and display can be easily integrated into different components and systems, enhancing the modularity and reusability of the application. By using page variables as filtering conditions, the display logic of the data can be centrally controlled, simplifying the complexity of data management and maintenance. When problems occur, it is easier to locate the problem and perform debugging and repair.

[0141] Multiple page variables can be supported as filtering conditions to achieve multi-dimensional data analysis and comparison. The filtered data is more focused and accurate, helping users make more informed decisions. Displaying the filtered data according to the preferences and needs of users enhances the personalization of the user experience.

[0142] The present invention proposes a system for component communication in an Internet of Things cloud configuration designer. Please refer to Figure 2 , including:

[0143] An acquisition unit 100, configured to acquire an operation instruction of a user, parse the operation instruction of the user into variable parameters, and update a page variable value based on the variable parameters;

[0144] A synchronization unit 200, configured to synchronize the page variable value to components that depend on the same page variable, to perform communication between components through the page variable value, and determine the data bound to the target component;

[0145] A first display unit 300, configured to, in response to the data bound to the target component being a page variable, directly update the displayed data using the page variable value;

[0146] A second display unit 400, configured to, in response to the data bound to the target component being a dataset, use the page variable as a filtering condition, query and filter in the dataset, and display the filtered data in the component.

[0147] In the present invention, the components can update the display content according to real-time data, reflecting changes in device status or business metrics. It is convenient for users to remotely control the devices connected to the components through the components on the operation interface. According to user interactions or specific trigger conditions, the components can provide richer information displays. Display data details: Users can, through interactive operations such as clicking on a chart or a list item, display more detailed data information.

[0148] The communication between components of the present invention is carried out through page variables, reducing the direct dependence between components, making the system more modular, and improving the maintainability and scalability of the system. As an intermediary, page variables allow developers to flexibly configure the interaction logic between components according to specific requirements to adapt to different business needs. In complex application scenarios, users may need to perform multiple steps to complete a task. The communication between components can support such complex interactions and simplify the user operation process. Components can immediately respond to changes in page variables to achieve real-time updates of data and styles and interface feedback, providing users with a smooth and intuitive interaction experience. New components and functions can be more easily integrated into the existing system without modifying the code of existing components, facilitating the expansion and upgrade of the system. By simplifying the communication mechanism between components through page variables, developers can focus more on the implementation of business logic without having to deal with complex communication details between components, reducing the development workload and accelerating the development speed.

[0149] Based on the same inventive concept, according to another aspect of the present invention, as Figure 7 shown, an embodiment of the present invention further provides a computer device 30, which includes a processor 310 and a memory 320. The memory 320 stores a computer program 321 that can run on the processor. When the processor 310 executes the program, it executes the steps of the above method.

[0150] Based on the same inventive concept, according to another aspect of the present invention, as Figure 8 shown, an embodiment of the present invention further provides a computer-readable storage medium 40, and the computer-readable storage medium 40 stores a computer program 410 that, when executed by a processor, executes the above method.

[0151] Embodiments of the present invention may further include corresponding computer devices. The computer device includes a memory, at least one processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it executes any of the above methods.

[0152] Among them, as a non-volatile computer-readable storage medium, the memory can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as program instructions / modules in embodiments of the present application. By running the non-volatile software programs, instructions, and modules stored in the memory, the processor can execute various functional applications and data processing of the device, that is, implement the above method.

[0153] The memory may include a program storage area and a data storage area. Among them, the program storage area can store the operating system and application programs required for at least one function; the data storage area can store data created according to the use of the device, etc. In addition, the memory may include high-speed random access memory and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage devices. In an embodiment, the memory may optionally include a memory remotely set relative to the processor, and these remote memories can be connected to the local module through a network. Examples of the above network include but are not limited to the Internet, intranet, local area network, mobile communication network, and combinations thereof.

[0154] Finally, it should be noted that those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. Among them, the storage medium of the program can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc. The embodiments of the above computer programs can achieve the same or similar effects as the corresponding foregoing method embodiments.

[0155] Those skilled in the art will also understand that the various exemplary logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein can be implemented as electronic hardware, computer software, or a combination of both. To clearly illustrate this interchangeability of hardware and software, a general description has been given of the functions of the various illustrative components, blocks, modules, circuits, and steps. Whether this function is implemented as software or hardware depends on the specific application and the design constraints imposed on the overall system. The functions that those skilled in the art can implement in various ways for each specific application, but this implementation decision should not be construed as causing a departure from the scope of the disclosure of the embodiments of the present invention.

[0156] The above are the exemplary embodiments disclosed by the present invention. However, it should be noted that various changes and modifications can be made without departing from the scope of the disclosure of the embodiments of the present invention defined by the claims. The functions, steps, and / or actions of the method claims according to the disclosed embodiments herein do not need to be executed in any specific order. The serial numbers of the above disclosed embodiments of the present invention are only for description and do not represent the superiority or inferiority of the embodiments. In addition, although the elements disclosed in the embodiments of the present invention can be described or claimed in an individual form, they can also be understood as plural unless explicitly limited to the singular.

[0157] It should be understood that, as used herein, unless the context clearly supports the exception, the singular form "a" is intended to also include the plural form. It should also be understood that the "and / or" used herein refers to any and all possible combinations of one or more of the associated listed items.

[0158] Those of ordinary skill in the art should understand that the discussion of any of the above embodiments is merely exemplary and is not intended to imply that the scope of the disclosure of the embodiments of the present invention (including the claims) is limited to these examples; under the concept of the embodiments of the present invention, the technical features between the above embodiments or different embodiments can also be combined, and there are many other variations in different aspects of the embodiments of the present invention as described above, which are not provided in detail for the sake of brevity. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present invention shall be included within the scope of protection of the embodiments of the present invention.

Claims

1. A method for communication between components of an Internet of Things cloud configuration designer, characterized in that: include: Obtaining a user's operation instruction, parsing the user's operation instruction into variable parameters, and updating page variable values ​​based on the variable parameters; Synchronizing the page variable value to components that depend on the same page variable, so as to communicate between components through the page variable value and determine the data bound to the target component; In response to the data bound to the target component being a page variable, directly updating the displayed data using the page variable value; In response to the data bound to the target component being a data set, the page variable is used as a filtering condition, the data set is queried and filtered, and the filtered data is displayed in the component.

2. The method for communication of IoT cloud configuration designer components according to claim 1, characterized in that: The steps of obtaining the user's operation instruction, parsing the user's operation instruction into variable parameters, and updating the page variable value based on the variable parameters include: Capture the operation instructions of users with different interaction modes in real time through event monitoring mechanism; Parsing the user's operation instruction into variable parameters for variable update; According to the preset configuration rules, the variable parameters are mapped to the corresponding page variables to update the page variable values, and the updated detailed information is recorded.

3. The method for communication of IoT cloud configuration designer components according to claim 1, characterized in that: The step of synchronizing the page variable value to components that depend on the same page variable so as to communicate between components through the page variable value includes: Monitor page variable changes; In response to the page variable change triggering the update event, call the corresponding callback function; When the component that depends on the same page variable receives the callback function, it renders the internal state according to the page variable value.

4. The method for communication of IoT cloud configuration designer components according to claim 3, characterized in that: When the component that depends on the same page variable receives the callback function, the step of rendering the internal state according to the page variable value includes: Identify dependencies between components that rely on the same page variables; Obtain the components that need to respond to the callback function through dependency analysis and determine the propagation path; Renders the internal state of all components that need to respond to the callback function based on the propagation path.

5. The method for communication of IoT cloud configuration designer components according to claim 1, characterized in that: In response to the data bound to the component being a page variable, the step of directly updating the displayed data using the page variable value comprises: When the page variable value changes, a change notification event is triggered; Sending the page variable value as part of the change notification event to the corresponding component; Get the current status and configuration of the component and update it, then display the updated data.

6. The method for communication of IoT cloud configuration designer components according to claim 5, characterized in that: The steps of obtaining the current status and configuration of the component and updating and displaying the updated data include: Get the current state and configuration of a component; Simulating the updated state and configuration, and comparing the difference between the current state and the updated state; Update the changed part based on the preset update frequency limit and the difference correspondence; Display updated data.

7. The method for communication of IoT cloud configuration designer components according to claim 1, characterized in that: The step of responding that the data bound to the target component is a data set, using the page variable as a filtering condition, querying and filtering in the data set, and displaying the filtered data in the component comprises: Associating the page variable used as the filtering condition with the data set; Based on the page variable value, construct a filter statement, and convert the filter statement into a query statement applicable to the data set; Using the query statement to perform a query operation in the data set, and filtering out query results that meet the filtering conditions; The query results are sorted, paged and aggregated, the processed data is bound to the data model of the target component, and the filtered data is re-rendered on the interface to display.

8. A system for communicating components of an Internet of Things cloud configuration designer, characterized in that: include: an acquisition unit, configured to acquire an operation instruction of a user, parse the operation instruction of the user into a variable parameter, and update a page variable value based on the variable parameter; a synchronization unit configured to synchronize the page variable value to components that rely on the same page variable, so as to communicate between components through the page variable value and determine data bound to the target component; A first display unit is configured to directly update the displayed data using the page variable value in response to the data bound to the target component being a page variable; The second display unit is configured to, in response to the data bound to the target component being a data set, use the page variable as a filtering condition, query and filter in the data set, and display the filtered data in the component.

9. A computer device comprising: at least one processor; and a memory storing a computer program executable on the processor, wherein the processor executes the steps of the method for communicating with the components of the Internet of Things cloud configuration designer as claimed in any one of claims 1 to 7 when executing the program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method for communication of IoT cloud configuration designer components as described in any one of claims 1 to 7 are performed.

Images