Large-screen event processing method and system based on visual triple and request duplicate removal

Abstract

The invention discloses a large-screen event processing method and system based on a visual triple and request deduplication. The method comprises the following steps: configuring a triple model of trigger event-condition filtering-execution action in a visual interface; analyzing the triple model into executable event processors, and scheduling and executing the event processors in batches according to triggering types in a grouping manner during operation; executing target operation according to the action type, wherein the target operation comprises component state control, data interaction and visual effect control; event processing performance is optimized through request fingerprint deduplication and animation queue management, the request fingerprint deduplication avoids repeated calling of an interface by recording a request configuration fingerprint, the animation queue management controls an animation execution time sequence through a timer, a model is visually configured through a triple, a new action type is supported to be rapidly expanded through an interface, and the animation queue management efficiency is improved. And through request deduplication and batch processing, the event processing efficiency is improved under the condition of low code operation.

Description

Technical Field

[0001] This application relates to the field of visual interaction technology, and more specifically, to a method and system for handling large-screen events based on visual triples and request deduplication. Background Technology

[0002] Existing front-end dashboard projects generally suffer from low development efficiency and high maintenance costs in the event handling phase. Their complex interaction logic (such as multi-component linkage, dynamic data filtering, and permission judgment) is usually implemented in a hard-coded manner. Once business rules change, developers must modify, test, and deploy the code again, resulting in high iteration costs. In addition, the hard-coded pattern lacks a unified structured description, making it difficult for new members to quickly understand the overall interaction chain.

[0003] In scenarios involving batch component operations or high-frequency data requests, existing technologies lack effective deduplication and merging mechanisms. For example, when 20 chart components are bound to the same data source, a single user click may trigger 20 duplicate API calls, resulting in wasted network bandwidth, increased backend pressure, and page lag. Simultaneously, numerous synchronous DOM operations and CSS animations can easily block the main thread, leading to interaction delays.

[0004] In addition, front-end large screen development involves knowledge from multiple fields such as JavaScript, CSS animation, network requests, and Canvas / WebGL rendering. Non-professional developers find it difficult to independently complete the configuration and optimization of complex interactions, which limits the direct participation of business personnel.

[0005] In summary, the industry urgently needs a low-code, visual, and high-performance event handling mechanism that can graphically configure the entire process of event triggering, condition judgment, and action execution, and improve operational efficiency and reduce development and maintenance costs through techniques such as request deduplication, batch updates, and animation queues. Summary of the Invention

[0006] To address at least one deficiency or improvement need in the existing technology, this invention provides a large-screen event processing method and system based on visual triples and request deduplication. It can complete the entire process configuration of event triggering, condition judgment and action execution in a graphical manner. Through the visual configuration model of triples, it supports the rapid expansion of new action types through the interface, and improves event processing efficiency with low code operation through request deduplication and batch processing.

[0007] To achieve the above objectives, according to a first aspect of the present invention, a large-screen event processing method based on visual triples and request deduplication is provided. The method includes: configuring a triple model of trigger event-condition filtering-action execution in a visual interface; parsing the triple model into executable event processors, and scheduling the execution of the event processors in batches according to trigger type during runtime; executing target operations according to action type, the target operations including component state control, data interaction, and visual effect control; and optimizing event processing performance through request fingerprint deduplication and animation queue management, wherein the request fingerprint deduplication avoids repeated interface calls by recording request configuration fingerprints, and the animation queue management controls the animation execution sequence through timers.

[0008] In an exemplary embodiment, the triplet model includes: triggering events including at least one of click, double click, mouse hover, and mouse out; conditional filtering is input in the form of JavaScript script and dynamically compiled into a runtime function via new Function; and the execution action includes at least one of showing / hiding components, data request, jump link, updating component style, and playing animation.

[0009] In an exemplary embodiment, the step of parsing the triplet model into an executable event handler and scheduling the event handlers in batches according to trigger type at runtime includes: traversing the event action array in the configuration, extracting the trigger type, filter conditions, and action configuration; compiling the filter condition script into a function and caching it, passing in the component dataset and event parameters at runtime, and returning a boolean value to determine whether to execute subsequent actions; storing the processing functions in groups according to trigger type, and executing the same group of functions in batches when the event is triggered.

[0010] In an exemplary embodiment, the step of performing the target operation according to the action type includes: modifying the component's display / hide attributes and combining them with cascading style sheet animation configuration to implement fade-in / fade-out; recording the request configuration fingerprint through a collection data structure, with requests for the same configuration being executed only once; using mapping to associate the request configuration with the target component list, and batch updating the dataset of all associated components after a single request is returned.

[0011] In an exemplary embodiment, the step of recording the request configuration fingerprint through a set data structure, and ensuring that requests with the same configuration are executed only once, includes: generating the request fingerprint from the interface address, request parameters, and hash values ​​of global variables; and clearing the executed records at the start of the next event loop.

[0012] In one exemplary embodiment, optimizing event processing performance through request fingerprint deduplication and animation queue management includes: controlling the timing of animation execution and cleanup through a timer to avoid blocking the main thread; and using a batch DOM operation queue, employing the requestAnimationFrame queue mechanism to implement batch component state updates.

[0013] According to a second aspect of the present invention, a large-screen event processing system based on visual triples and request deduplication is also provided, comprising: a visual interaction configuration layer for providing a visual interface to configure a triple model of trigger event-condition filtering-execution action; an event parsing and scheduling layer for parsing the triple model into executable event processors, and scheduling the execution of the event processors in batches according to trigger type at runtime; an action execution and animation engine layer for executing target operations according to action type, the target operations including component state control, data interaction, and visual effect control; and a performance optimization layer for optimizing event processing performance through request fingerprint deduplication and animation queue management, wherein the request fingerprint deduplication avoids repeated interface calls by recording request configuration fingerprints, and the animation queue management controls the animation execution sequence through timers.

[0014] In an exemplary embodiment, the event parsing and scheduling layer includes: a traversal module for traversing the event action array in the configuration, extracting the trigger type, filter conditions, and action configuration; a compilation module for compiling the filter condition script into a function and caching it, passing in the component dataset and event parameters at runtime, and returning a boolean value to determine whether to execute subsequent actions; and an execution module for storing processing functions in groups according to trigger type, and executing the same group of functions in batches when an event is triggered.

[0015] According to a third aspect of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored therein, wherein the computer program is configured to execute the above-described large-screen event processing method based on visual triples and request deduplication at runtime.

[0016] According to a fourth aspect of the present invention, an electronic device is also provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the above-described large-screen event processing method based on visual triples and request deduplication via the computer program.

[0017] In summary, compared with the prior art, the above-described technical solutions conceived by this invention can achieve the following beneficial effects: (1) This invention provides a large-screen event processing method based on visual triples and request deduplication. It adopts a visual configuration model of trigger event-condition filtering-execution action triples, which simplifies the interactive logic that requires more than 50 lines of code to implement in the traditional hard-coded mode (such as displaying a chart and playing an animation when a button is clicked) to interface parameter selection and script input. It has a built-in action type plug-in mechanism, which supports the rapid expansion of new action types through the interface, significantly improving development efficiency. Business personnel can directly define complex interactive logic through the interaction editor without relying on developers, which can shorten the requirement implementation cycle.

[0018] (2) The filtering conditions support real-time script editing. The system uses the new Function dynamic compilation technology to generate and execute the condition function in real time. After modification, the changes will take effect without restarting the application, which improves the response speed compared with the traditional code release mode.

[0019] (3) Requests with the same configuration are deduplicated through a request fingerprint mechanism, significantly improving rendering efficiency. Animation effects are controlled by setTimeout to avoid main thread blocking caused by multiple animations being triggered simultaneously. Batch component state updates use the requestAnimationFrame queue mechanism, and batch operations on multiple components significantly reduce user interaction latency.

[0020] (4) Supports the parallel execution of multiple actions triggered by a single event (such as displaying components + updating charts + jumping links + log reporting). The action sequence can be arranged through the interface configuration, which significantly reduces the logical complexity compared to the traditional nested callback function mode. Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 A flowchart illustrating an optional large-screen event processing method based on visual triples and request deduplication provided in an embodiment of this application; Figure 2 This is a schematic diagram of an optional interactive editor interface provided in an embodiment of this application; Figure 3 A schematic diagram of an optional event handling process provided for an embodiment of this application; Figure 4 A schematic diagram of an optional request deduplication mechanism provided for an embodiment of this application; Figure 5This is a schematic diagram of an optional electronic device provided in an embodiment of this application. Detailed Implementation

[0023] To make the objectives, technical solutions, and advantages of this invention clearer, the invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the invention. Furthermore, the technical features involved in the various embodiments of this invention described below can be combined with each other as long as they do not conflict with each other.

[0024] The terms "first," "second," "third," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or apparatuses.

[0025] According to one aspect of the embodiments of this application, a large-screen event processing method based on visual triples and request deduplication is provided. The following is in conjunction with... Figure 1 This application describes a large-screen event processing method based on visual triples and request deduplication, provided in its embodiments.

[0026] Figure 1 This is a flowchart illustrating an optional large-screen event processing method based on visual triples and request deduplication provided in an embodiment of this application, as shown below. Figure 1 As shown, the process of this method may include the following steps: S102, Configure the triplet model of trigger event - conditional filtering - execution action in the visual interface; S104, the triplet model is parsed into an executable event handler, and the event handlers are scheduled to be executed in batches according to the trigger type at runtime; S106, Execute the target operation according to the action type, the target operation including component state control, data interaction and visual effect control; S108, optimize event processing performance by request fingerprint deduplication and animation queue management, wherein the request fingerprint deduplication avoids repeated interface calls by recording request configuration fingerprints, and the animation queue management controls the animation execution sequence through timers.

[0027] This application provides a large-screen event handling method based on visual triples and request deduplication, applicable to low-code configuration and efficient execution of component interaction logic in data visualization large-screen scenarios, achieving full-process visual management of event triggering, condition validation, and action execution. For example, in a smart city large screen, clicking on a map area should simultaneously trigger the display of a data panel, chart refresh, and playback of associated videos.

[0028] According to another aspect of the embodiments of this application, a processing system for implementing the above-described method for handling large-screen events based on visual triples and request deduplication is also provided. This system includes: The visual interaction configuration layer provides a visual interface for configuring the triplet model of triggering events, conditional filtering, and executing actions. The event parsing and scheduling layer is used to parse the triplet model into executable event handlers, and to schedule the execution of the event handlers in batches according to the trigger type at runtime; The action execution and animation engine layer is used to perform target operations based on the action type. The target operations include component state control, data interaction, and visual effect control. The performance optimization layer is used to optimize event processing performance through request fingerprint deduplication and animation queue management. The request fingerprint deduplication avoids repeated API calls by recording request configuration fingerprints, and the animation queue management controls the animation execution sequence through timers.

[0029] In one exemplary embodiment, the event parsing and scheduling layer includes: The traversal module is used to traverse the event action array in the configuration and extract the trigger type, filter conditions, and action configuration. The compilation module is used to compile the filtering condition script into a function and cache it. At runtime, it takes the component dataset and event parameters as input and returns a boolean value to determine whether to execute subsequent actions. The execution module is used to group and store processing functions by trigger type, and execute the same group of functions in batches when an event is triggered.

[0030] The event handling mechanism in this embodiment adopts a layered architecture design, including a visual interaction configuration layer, an event parsing and scheduling layer, an action execution and animation engine layer, and a performance optimization layer.

[0031] like Figure 2 As shown, the visual interaction configuration layer provides a graphical interface (i.e., the interaction editor interface) for users to configure event triggering conditions and execution actions. The interaction editor includes an event triggering configuration area for selecting event types, a condition validation configuration area for inputting conditional scripts, and an action execution configuration area for associating target component selection and configuring action parameters after selecting the action type.

[0032] like Figure 3 As shown, specifically in Embodiment 1, when implementing the top navigation menu function of the large screen, the specific event handling process can be as follows: drag the button component to the canvas through the visual editor, and define the triplet model in the interaction configuration panel according to the following steps: Configure mouse hover event: Select "Mouse Hover" for trigger type, leave the condition script blank (default passes), select "Update Component Style" for action, select "Button Component itself" for associated component, and modify the background image and text color of the button component when the mouse hovers over it in the dynamically rendered component style panel. Configure mouse hover event: Select "Mouse Hover" as the trigger type, leave the condition script blank (default is passed), select "Update Component Style" as the action to execute, select "Button Component Itself" as the associated component, and do not make any modifications in the dynamically rendered component style panel (the configuration items default to the button's initial state). Configure click events: Select "Single" for trigger type, "Jump Link" for action, and uncheck the "Open New Page" configuration option. Dynamic parameters are bound to the target URL. Dynamic variables within the target URL are enclosed in {}. The backend parses the dynamic variables using regular expressions and copies them based on the configured global variables to generate the actual jump link.

[0033] After the visual configuration is serialized into a JSON structure, configuration parsing and condition validation occur. The event parsing engine iterates through the `events` array in the configuration, extracting the trigger type (e.g., `mouseenter`) and action configuration (e.g., `updateStyle`). Since the condition script is left empty, the condition validation engine returns `true` by default, directly proceeding to the action execution phase. Processing functions are grouped and stored by trigger type; for example, the style update function corresponding to the `mouseenter` event is pushed into the `events['mouseenter']` array. When a user action triggers an event (e.g., mouseover button), the event scheduler executes all processing functions under that type in batches, ensuring consistency in style updates.

[0034] The system matches the corresponding component in the large screen based on the configured associated component ID, and then replaces the original default configuration option of the component with the modified component configuration information componentConfig to update the component style.

[0035] When parsing a dynamic URL, the tokenV and hcToken values ​​are retrieved from the global variable pool to generate the final redirect address. The browser API is then called to implement page redirection.

[0036] In Example 2, when implementing the status and data linkage function of the dropdown control panel, drag the dropdown component and two list components (List A & List B) onto the canvas using the visual editor. In the interaction configuration panel, define the triplet model according to the following steps: Specifically, configure the click event: select "Click" for trigger type, set the conditional script to "Pass if dropdown option value is A, otherwise fail", select "Show" for action one, and select "List A" for associated component; select "Hide" for action two, and select "List B" for associated component; configure the click event: select "Click" for trigger type, set the conditional script to "Pass if dropdown option value is B, otherwise fail", select "Show" for action one, and select "List B" for associated component; select "Hide" for action two, and select "List A" for associated component; configure the click event: select "Click" for trigger type, leave the conditional script unset (default pass), select "Request Data" for action, and select "List A, List B" for associated component; the visual configuration is finally serialized into a JSON structure.

[0037] The event parsing engine iterates through the `events` array in the configuration, extracting the trigger type (e.g., `click`) and action configuration (e.g., `show`, `hide`, `request`). Conditional logic validation uses `new Function` to compile user-configured conditional scripts (e.g., `filter`) into JavaScript functions in real-time. If the condition validation engine returns `true`, the action execution phase begins directly. Processing functions are grouped and stored by trigger type; for example, the show / hide / request functions corresponding to the `click` event are pushed into the `events['click']` array. When a user action triggers an event (e.g., selecting data from a dropdown list), the event scheduler executes all processing functions of that type in batches.

[0038] Based on the configured associated component IDs, the system matches the corresponding components in the dashboard. Then, according to the configured show / hide type, it modifies the `component.status.hide` property of the matched components to achieve the show / hide effect. It uses a Map to cache request fingerprints (URL + parameter hashes), iterates through the request configuration, executes any requests that have not yet been executed, and updates the data of all target components bound to that request.

[0039] In Example 3, when implementing the map click-data drill-down function, drag and drop the map component and pop-up component onto the canvas using the visual editor. In the interaction configuration panel, define the triplet model as follows: Configure the map click event: select "Click" for trigger type, set the condition script to "If the clicked point is 'lines', pass and save the point data to the global variable clickChartLineData; otherwise, fail", select "Show" for action one, and select "Pop-up component" for associated component; select "Request Data" for action two, and select "Pop-up component" for associated component; Configure the pop-up button component click event: select "Click" for trigger type, leave the condition script unset (default pass), select "Hide" for action, and select "Pop-up component" for associated component; the visual configuration is finally serialized into a JSON structure.

[0040] The event parsing engine iterates through the `events` array in the configuration, extracting trigger types (such as `click`) and action configurations (such as `show`, `hide`, and `request`). Conditional logic validation uses `new Function` to compile user-configured conditional scripts (such as `filter`) into JavaScript functions in real time. If the condition validation engine returns `true`, the process directly proceeds to the action execution phase.

[0041] Processing functions are grouped and stored according to their trigger type. For example, the show / hide / request data functions corresponding to the click event are pushed into the events['click'] array. When a user action triggers an event (such as selecting data from a dropdown list), the event scheduler executes all processing functions under that type in batches.

[0042] Match the corresponding component in the large screen based on the configured associated component ID, and then modify the component.status.hide property of the matched component according to the configured show / hide type to achieve the show / hide effect.

[0043] By caching the request fingerprint (URL + parameter hash) using a Map, we can iterate through the request configuration, execute any requests that have not yet been executed, and update the data of all target components bound to that request.

[0044] Through steps S102 to S108 above, a triplet model of trigger event-condition filtering-execution action is configured in the visual interface; the triplet model is parsed into an executable event processor, and the event processors are scheduled and executed in batches according to the trigger type at runtime; target operations are executed according to the action type, the target operations include component state control, data interaction, and visual effect control; event processing performance is optimized through request fingerprint deduplication and animation queue management, wherein request fingerprint deduplication avoids repeated calls to the interface by recording request configuration fingerprints, and animation queue management controls the animation execution sequence through timers. Through the triplet visual configuration model, it is possible to quickly expand new action types through the interface, and improve event processing efficiency with low code execution through request deduplication and batch processing.

[0045] In one exemplary embodiment, the above triplet model includes: S11, the triggering event includes at least one of the following: single click, double click, mouse in, and mouse out; S12, the conditional filtering is input in the form of JavaScript scripts and dynamically compiled into a runtime function using new Function; S13, the action performed includes at least one of showing / hiding components, requesting data, jumping to a link, updating component style, and playing an animation.

[0046] Specifically, the event-action mapping model defines a triplet model of "triggering event (such as click, double-click, mouse in, mouse out) - conditional filtering - execution action (such as displaying a component, redirecting a link)". It supports selecting the trigger type (such as click), configuring the filtering script (such as dataset.length>0), and specifying action parameters (such as animation type, target component ID) through the interface. In scenarios such as link redirection, it supports matching variables (such as {globalVar}) using regular expressions, automatically obtaining real-time values ​​from the global variable list and replacing them, thus realizing dynamic URL generation.

[0047] The system employs a visual configuration model based on a trigger event-condition filtering-action triplet, simplifying interactive logic (such as displaying a chart and playing an animation upon button click) that traditionally required over 50 lines of code in hard-coded mode into interface parameter selection and script input. A built-in action type plug-in mechanism (such as show / hide / request / link) allows for rapid expansion of new action types through the interface, significantly improving development efficiency and reducing development workload. Filtering conditions support real-time script editing (e.g., dataset.temperature>threshold&&device.status === 'online'). The system uses newFunction dynamic compilation technology to generate and execute condition functions in real time; modifications take effect without requiring an application restart, significantly improving response speed compared to traditional code deployment methods.

[0048] In an exemplary embodiment, resolving the triplet model into executable event handlers and scheduling the execution of the event handlers in batches according to trigger type at runtime includes: S21, traverse the event action array in the configuration and extract the trigger type, filter conditions, and action configuration; S22 compiles the filtering script into a function and caches it. When running, it takes the component dataset and event parameters as input and returns a boolean value to determine whether to execute subsequent actions. S23, group and store processing functions according to trigger type, and execute the same group of functions in batches when the event is triggered.

[0049] In this embodiment, the event parsing and scheduling layer is responsible for converting the visualization configuration into an executable event handler. Its processing flow includes: Configuration parsing: Traversing the event action array in the chart configuration to extract the trigger type (triggerType), filter condition (filter.custom), and action configuration (actionConfig); Condition validation engine: Dynamically compiling the filter condition script into a function (e.g., new Function('dataset', 'eventData', filter.custom)), passing in the component dataset (dataset) and event parameters (eventData) at runtime, and returning a boolean value to determine whether to execute subsequent actions; Event scheduling: Grouping and storing processing functions by trigger type (e.g., events[triggerType].push(handler)), merging them into a unified event handler (mergedEvents) to achieve batch execution of events of the same type.

[0050] In one exemplary embodiment, performing the target operation according to the action type includes: S31, Modify the component's show / hide properties and combine them with cascading stylesheet animation configuration to achieve fade-in / fade-out. S32 records the request configuration fingerprint through a set data structure, and requests with the same configuration are executed only once; S33 uses mapping to associate request configuration with target component list, and updates the dataset of all associated components in batches after a single request returns.

[0051] In this embodiment, the plugin-based management of action types is implemented through the generateFunc function.

[0052] Optionally, by modifying the component's `status.hide` property and combining it with animation configurations (such as the fade-in animation `inName` and its duration), CSS animations can be implemented by manipulating `styles.animations` (e.g., `setTimeout` controls when the animation is removed). The logic for automatically switching between showing and hiding the component based on its current state avoids redundant checks.

[0053] The processing flow of the request deduplication mechanism is as follows: Figure 4 As shown, a Set data structure is used to record the request configuration fingerprint (requestKey). Requests with the same configuration are executed only once, avoiding duplicate API calls (such as when multiple components are bound to the same API). A Map is used to associate the request configuration with the list of target components (requestMap). After a single request returns, the datasets of all associated components (target.option.dataset) are updated in batches.

[0054] It supports filter effects (hueRotate, saturate), dynamic style updates (updateStyle), image resource replacement (updateImage), etc., and achieves real-time visual feedback by directly manipulating component style properties.

[0055] In one exemplary embodiment, recording the request configuration fingerprint through a collection data structure, ensuring that requests with the same configuration are executed only once, includes: S41, the request fingerprint is generated from the interface address, request parameters, and the hash value of global variables; S42, clears the executed records at the start of the next event loop.

[0056] In one exemplary embodiment, optimizing event processing performance through request fingerprint deduplication and animation queue management includes: S51 uses a timer to control the timing of animation execution and cleanup, avoiding blocking of the main thread; S52, a batch DOM operation queue, uses the requestAnimationFrame queue mechanism to implement batch component state updates.

[0057] In this embodiment, a request fingerprint (requestKey) mechanism is used to deduplicate requests with the same configuration (e.g., API address, parameters, and global variables are completely identical). In a scenario where 20 components are bound to the same data source, the number of repeated requests is reduced from 20 times / trigger to 1 time / trigger, network traffic is reduced by 95%, and interface load is reduced by 90%. Data request results adopt a batch update strategy (requestMap associated with the component list), and the dataset of 100+ components can be updated simultaneously after a single request returns, significantly improving rendering efficiency.

[0058] The timing of animation execution and cleanup is controlled by a timer (setTimeout), preventing a large number of animation operations from blocking the main thread in a short period of time. In Function_Request, requests with the same configuration are merged for execution (such as the same API, global configuration, variable parameters), and the executed records are cleared after one round of event loop (executedRequests.clear()), reducing the number of network requests and the frequency of component updates.

[0059] According to another aspect of the embodiments of this application, a storage medium is also provided. Optionally, in this embodiment, the storage medium can be used to execute the program code of any of the above-mentioned large-screen event handling methods based on visual triples and request deduplication in the embodiments of this application.

[0060] Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: S1, Configure the triplet model of trigger event - conditional filtering - execution action in the visual interface; S2, the triplet model is parsed into an executable event handler, and the event handlers are scheduled to be executed in batches according to the trigger type at runtime; S3, Execute the target operation according to the action type, the target operation including component state control, data interaction and visual effect control; S4. Optimize event processing performance through request fingerprint deduplication and animation queue management. The request fingerprint deduplication avoids repeated interface calls by recording request configuration fingerprints, and the animation queue management controls the animation execution sequence through timers.

[0061] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments, and will not be repeated in this embodiment.

[0062] The computer-readable storage medium may include, but is not limited to, any type of disk, including floppy disks, optical disks, DVDs, CD-ROMs, microdrives, as well as magneto-optical disks, ROMs, RAMs, EPROMs, EEPROMs, DRAMs, VRAMs, flash memory devices, magnetic cards or optical cards, nanosystems (including molecular memory ICs), or any type of medium or device suitable for storing instructions and / or data.

[0063] According to another aspect of the embodiments of this application, an electronic device is also provided for implementing the above-described method for handling large-screen events based on visual triples and request deduplication. The electronic device may be a server, a terminal, or a combination thereof.

[0064] Figure 5 This is a schematic diagram of the structure of an optional electronic device according to an embodiment of this application, such as... Figure 5 As shown, it includes a processor 502, a communication interface 504, a memory 506, and a communication bus 508. The processor 502, communication interface 504, and memory 506 communicate with each other via the communication bus 508. Memory 506 is used to store computer programs; When processor 502 executes a computer program stored in memory 506, it performs the following steps: S1, Configure the triplet model of trigger event - conditional filtering - execution action in the visual interface; S2, the triplet model is parsed into an executable event handler, and the event handlers are scheduled to be executed in batches according to the trigger type at runtime; S3, Execute the target operation according to the action type, the target operation including component state control, data interaction and visual effect control; S4. Optimize event processing performance through request fingerprint deduplication and animation queue management. The request fingerprint deduplication avoids repeated interface calls by recording request configuration fingerprints, and the animation queue management controls the animation execution sequence through timers.

[0065] Optionally, the communication bus can be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus, etc. This communication bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 The symbol is represented by a single thick line, but this does not indicate that there is only one bus or one type of bus. The communication interface is used for communication between the aforementioned electronic device and other devices.

[0066] The memory may include RAM, or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0067] The processors mentioned above can be general-purpose processors, including but not limited to: CPU (Central Processing Unit), NP (Network Processor), etc.; they can also be DSP (Digital Signal Processor), ASIC (Application Specific Integrated Circuit), FPGA (Field-Programmable Gate Array), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0068] Optionally, specific examples in this embodiment can refer to the examples described in the above embodiments, and will not be repeated here.

[0069] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0070] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0071] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, which may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, etc.

[0072] The foregoing description is merely an exemplary embodiment of this disclosure and should not be construed as limiting the scope of this disclosure. Any equivalent changes and modifications made in accordance with the teachings of this disclosure shall still fall within the scope of this disclosure. Those skilled in the art will readily conceive of embodiments of this disclosure upon considering the specification and practicing the disclosure herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not described herein. The specification and embodiments are to be considered exemplary only, and the scope and spirit of this disclosure are defined by the claims.

[0073] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0074] Those skilled in the art will readily understand that the above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for large screen event processing based on visualizing triples and request deduplication, characterized in that, The application relates to a visual interaction configuration method and device. A ternary model of trigger event-condition filtering-action execution is configured in a visual interface; The ternary model is parsed into executable event processors, which are batch-scheduled and executed according to trigger types in runtime; Target operations are executed according to action types, which include component state control, data interaction and visual effect control; Event processing performance is optimized through request fingerprint deduplication and animation queue management, wherein the request fingerprint deduplication avoids repeated interface calls by recording request configuration fingerprints, and the animation queue management controls animation execution timing through a timer.

2. The method of claim 1, wherein, The ternary model includes: The trigger event includes at least one of single click, double click, mouse move-in and mouse move-out; The condition filtering is input in the form of a JavaScript script and is dynamically compiled into a runtime function through new Function; The action execution includes at least one of display / hide component, data request, jump link, update component style and play animation.

3. The method of claim 1, wherein the method further comprises: The ternary model is parsed into executable event processors, which are batch-scheduled and executed according to trigger types in runtime, and the parsing includes: An event action array in the configuration is traversed to extract trigger types, filtering conditions and action configurations; The filtering condition script is compiled into a function and cached, and component data sets and event parameters are input in runtime to return a Boolean value to judge whether subsequent actions are executed; Processing functions are stored according to trigger types, and functions in the same group are batch-executed when an event is triggered.

4. The method of claim 1, wherein the method further comprises: The target operations are executed according to action types, and the execution includes: Component display / hide attributes are modified to realize fade-in / fade-out in combination with cascading style sheet animation configuration Request configuration fingerprints are recorded through a set data structure, and the same configuration is only executed once; Request configurations are associated with target component lists through mapping, and data sets of all associated components are batch-updated after a single request is returned.

5. The large screen event processing method based on visualizing triplets and request deduplication of claim 4, wherein, The request configuration fingerprints are recorded through a set data structure, and the same configuration is only executed once, and the recording includes: Request fingerprints are generated from interface addresses, request parameters and hash values of global variables; When the next round of event loop starts, executed records are emptied.

6. The large screen event processing method based on visualizing triplets and request deduplication of claim 1, wherein, The event processing performance is optimized through request fingerprint deduplication and animation queue management, and the optimization includes: Animation execution and cleaning timing are controlled through a timer to avoid main thread blocking; Batch DOM operation queues are used to realize batch component state update through a requestAnimationFrame queue mechanism.

7. A large screen event processing system based on visual triple and request deduplication, performing the large screen event processing method based on visual triple and request deduplication according to any one of claims 1-6, characterized in that, The application relates to a visual interaction configuration method and device. A visual interaction configuration layer is used to provide a visual interface to configure a ternary model of trigger event-condition filtering-action execution; An event parsing and scheduling layer is used to parse the ternary model into executable event processors, which are batch-scheduled and executed according to trigger types in runtime; An action execution and animation engine layer is used to execute target operations according to action types, which include component state control, data interaction and visual effect control; A performance optimization layer is configured to optimize event processing performance by request fingerprint deduplication and animation queue management, wherein the request fingerprint deduplication avoids repeated calls of an interface by recording request configuration fingerprints, and the animation queue management controls animation execution timing by a timer.

8. The large screen event processing system based on visualizing triplets and request deduplication of claim 7, wherein, The event analysis and scheduling layer comprises: A traversal module is configured to traverse an event action array in a configuration, and extract a trigger type, a filtering condition, and an action configuration; A compiling module is configured to compile a filtering condition script into a function and cache it, and pass in component data set and event parameters at runtime, and return a Boolean value to determine whether to execute subsequent actions; An execution module is configured to group and store processing functions according to trigger types, and execute functions in the same group in batches when an event is triggered.

9. A computer readable storage medium, characterized in that, The computer-readable storage medium comprises a stored program, wherein the program is configured to execute the method of any one of claims 1 to 6 when running. 10.An electronic device comprising a memory and a processor, the electronic device characterized by, The memory stores a computer program, and the processor is configured to execute the method of any one of claims 1 to 6 by using the computer program.

Images