Building block report zero code visualization dynamic design multi-terminal adaptation system and method

Abstract

The invention discloses a building block report zero-code visualization dynamic design multi-terminal adaptation system and method, and relates to the technical field of data visualization and report generation. The method comprises the following steps: component templated multiplexing: generating a component template with a unique identifier by extracting complete configuration of a configured component, separating basic parameters from instance parameters by adopting a double-layer parameter structure, and maintaining a directed acyclic graph structure through a dependency tracking engine to realize batch synchronous updating; performing multi-terminal intelligent adaptation, constructing a terminal characteristic library to store different terminal parameters, setting adaptive rules for various components, and automatically adjusting the component size, layout and interaction mode by identifying an access terminal; and carrying out visual binding on the business rules, constructing business rule logic through a dragging operator, and establishing rule-component association mapping. According to the method, the component reuse rate is increased by 80%, the report development period is shortened by 70%, and an efficient, intelligent and easy-to-use complete solution is provided for enterprise-level zero code report development.

Description

Technical Field

[0001] This invention relates to the field of data visualization and report generation technology, and in particular to a zero-code visual dynamic design system and method for block-based reports with multi-terminal adaptation. Background Technology

[0002] With the deepening of enterprise digital transformation, no-code reporting tools have been widely adopted as an important technology for data visualization. No-code reporting platforms, such as Block Reports, provide visual report designers, drag-and-drop component configuration, and rich chart types, enabling business users to develop reports without programming. These tools handle data visualization tasks in key business scenarios such as sales analysis, financial reporting, production monitoring, and operations management in enterprise applications. However, with the increasing complexity of enterprise business and the growing demand for multi-terminal office work, existing no-code reporting tools have revealed many limitations in practical applications, failing to meet enterprises' comprehensive needs for report development efficiency, multi-terminal adaptability, and business logic integration.

[0003] Existing block-based reporting tools and similar no-code reporting tools suffer from three core technical problems. First, the component reuse mechanism is weak. Existing systems rely on "copy and paste" for component reuse, lacking unified template management and cross-report reuse mechanisms. This results in the need to repeatedly configure the same type of component in each report; for example, the same "monthly trend chart" component needs to be reconfigured for the sales reports of 10 departments within an enterprise, causing significant repetitive work. When a unified modification of component styles is needed, each report must be manually updated, leading to high maintenance costs and potential configuration inconsistencies. Second, multi-platform adaptation capabilities are insufficient. Existing tools require manual adjustments to component layouts and styles for PC, mobile, and large-screen devices, lacking an intelligent adaptation mechanism. This frequently results in issues such as correct display on PC but misaligned layouts and blurry fonts on mobile devices, contradicting the no-code tool's "develop once, reuse across multiple platforms" philosophy. Third, business rule integration is difficult. Complex business logic, such as data permission filtering and dynamic conditional formatting, requires custom scripts or HTML injection, presenting a high technical barrier that business personnel cannot complete independently, thus violating the no-code tool's initial intention of lowering the technical threshold.

[0004] The aforementioned problems stem from multiple technical barriers and cognitive biases. Technically, component template reuse faces the challenge of complex dependency management. Cross-report reuse requires managing dependencies between components and data sources, parameters, and styles. Modifying a template component in a report can trigger a chain of errors, and existing tools lack dynamic dependency tracking mechanisms. Multi-platform intelligent adaptation requires designing adaptive layout algorithms that consider differences in resolution, interaction methods, and visual consistency across different terminals. Traditional fixed-style and manual adjustment methods cannot meet accuracy requirements. Business rule linkage requires designing low-code rule configuration interfaces and achieving visual binding between rules and components; existing tools lack such integration capabilities. Cognitively, most reporting tool vendors focus on increasing the number of features, such as adding chart types and data source categories, neglecting the core demands of efficiency and ease of use in zero-code scenarios. They fail to fully recognize the crucial value of component reuse and intelligent adaptation for business personnel's independent development. While existing academic research and open-source practices have explored these aspects, they have not provided complete solutions for component template management, multi-platform adaptation, and business rule integration. Summary of the Invention

[0005] The purpose of this invention is to solve the technical problems of low efficiency in repetitive component development, large workload in multi-terminal adaptation, and high threshold for implementing complex business logic in existing zero-code reporting tools such as Block Reports. The invention provides a zero-code visual report dynamic design and multi-terminal adaptation system and method based on Block Reports.

[0006] To achieve the above objectives, this invention proposes a zero-code visual dynamic design method for block-based reports with multi-platform adaptation, comprising the following steps: Step 1: Component template reuse, including: extracting the data source configuration, style configuration, parameter configuration, and interaction logic configuration of the configured report components, generating component templates with unique identifiers and storing them in the component template library; selecting the target template from the template library during report design, and separating the basic parameter layer and the instance parameter layer through a two-layer parameter structure, where the basic parameter layer stores the core template configuration and the instance parameter layer supports personalized adjustments; maintaining a directed acyclic graph structure to record the dependency relationship between the template and the report through a dependency tracking engine, and batch synchronizing and updating all reports that reference the template when the template configuration is modified through a two-phase commit protocol; Step 2: Multi-terminal intelligent adaptation, including: building a terminal feature library to store device type, screen resolution, pixel density, screen orientation, and input method parameters for different terminals; setting adaptive rules for table components, chart components, and text components to automatically adjust component size, layout, and interaction methods according to terminal characteristics; when accessing reports, identifying the terminal type by parsing the User-Agent string and window.screen object, matching the configuration in the terminal feature library, and using virtual DOM technology to adjust component parameters and render. Step 3: Visual binding of business rules, including: constructing business rule logic by dragging and dropping conditional operators and action operators; converting the visual rules into a rule description language for storage; establishing a rule-component association mapping table to record rule ID, component ID, triggering time, and execution priority; listening to report lifecycle events through the rule execution engine, pre-compiling the rule description language into JavaScript functions and caching them, executing the corresponding rules and updating the component display when the event is triggered. The above technical solution is a comprehensive solution comprised of three core technical modules: component template reuse mechanism, multi-terminal intelligent adaptation engine, and visual binding of business rules. Regarding component template reuse, a component template library is built to achieve structured storage of commonly used component configurations. A two-layer parameter structure separates basic template configurations from instance-specific parameters. A dependency tracking engine maintains the association between templates and reports and supports batch synchronous updates, breaking through the inefficient traditional "copy and paste" reuse model. For multi-terminal intelligent adaptation, a terminal feature library is established to store device parameters for various terminals. Adaptive rules are configured for different types of components. A dynamic rendering engine automatically adjusts component size, layout, and interaction methods based on the accessing terminal, achieving the goal of "one-time design, perfect display across multiple terminals." Regarding visual binding of business rules, a drag-and-drop rule editor supports visual configuration of conditional and action operators. A rule-component association mapping mechanism is established. High-performance dynamic response is achieved through pre-compilation and caching optimization of the rule execution engine, enabling business personnel to complete complex business logic configurations with zero code.

[0007] Furthermore, the component template generation in step 1 specifically includes: The system automatically parses the component's data source connection information, SQL query statements, field mapping relationships, chart types, color schemes, font styles, size settings, event bindings, and animation effect configurations, and serializes the configuration information into JSON format; it generates a globally unique template ID in the format "template_{component type}{business domain}{serial number}"; the dependency tracking engine inserts dependency records containing template ID, report ID, reference timestamp, and instance parameter snapshot when creating a template reference, and performs a breadth-first search algorithm to traverse all reference nodes when synchronizing templates.

[0008] Furthermore, the adaptive rules in step 2 specifically include: The table component automatically hides lower-priority columns when the number of columns exceeds 5 on mobile devices, and increases row height by 1.5 times on larger screens; the chart component adapts its width to 95% of the screen width on mobile devices, and increases its size to 80% of the container width on larger screens; the font size uses a generic... Dynamically calculated, where BaseFontSize is the base font size (14px), CurrentResolution is the current terminal resolution, BaseResolution is the standard resolution, and DPIFactor is the pixel density correction factor; component size is calculated using the formula: Perform responsive calculations, where ContainerSize is the container size, ResponsiveFactor is the responsiveness factor, ScreenSize is the actual screen size, and DesignSize is the design draft size.

[0009] Furthermore, the rule execution in step 3 specifically includes: The rule description language is dynamically compiled into executable code and cached in memory through the Function constructor; an execution context containing current component data, user information and system variables is constructed; for large data scenarios, the dataset is divided into multiple batches and the rules are executed in parallel through WebWorker technology; DOM operations are minimized through the virtual DOM difference comparison algorithm, and only the changed element attributes are updated.

[0010] A zero-code, visual, dynamic design, multi-platform adaptive system for block-based reports includes: The component template management module includes a component configuration extractor, a template storage unit, and a dependency tracking engine. The component configuration extractor is used to parse the complete configuration information of the report components and serialize it into JSON format. The template storage unit is used to store component templates with unique identifiers. The dependency tracking engine is used to maintain the directed acyclic graph dependency relationship between the templates and the report and perform batch synchronization updates. The multi-terminal intelligent adaptation engine includes a terminal feature library, an adaptive rule library, and a dynamic rendering unit. The terminal feature library stores device parameters for different terminals, the adaptive rule library defines the adaptation rules for various components on different terminals, and the dynamic rendering unit adjusts components by identifying the accessing terminal and matching the corresponding rules. The business rule configuration module includes a rule visual editor, a rule storage unit, and a rule execution engine. The rule visual editor provides drag-and-drop configuration of condition operators and action operators. The rule storage unit maintains a rule-component association mapping table. The rule execution engine realizes dynamic response of business logic through event listening, rule pre-compilation, and batch execution.

[0011] Furthermore, the component template management module also includes: The parameter merger intelligently merges the template's basic parameter layer and instance parameter layer, prioritizing the use of instance parameters to override the corresponding basic parameter values; the synchronization controller employs a two-phase commit protocol, with the first phase pre-checking the availability and locking status of all target reports, and the second phase performing configuration updates and releasing locks; the audit log unit records detailed information about template creation, referencing, modification, and synchronization.

[0012] Furthermore, the multi-terminal intelligent adaptation engine also includes: The terminal identifier obtains the device type, screen resolution, and pixel density by parsing the User-Agent string, window.screen object, and window.devicePixelRatio; the adaptation calculator calculates the size and position parameters of components on different terminals based on the responsive layout algorithm; and the terminal switcher supports simulating the characteristics of other terminals on a single terminal for preview verification.

[0013] Furthermore, the business rule configuration module also includes: The rule converter transforms the rule logic of the visual configuration into a rule description language; the execution context builder integrates current component data, user information, and system variables; and the performance optimization unit achieves efficient execution in large-scale data scenarios through pre-compilation caching, parallel processing of Web Workers, and virtual DOM difference comparison.

[0014] The beneficial effects of this invention are: This invention achieves significant technical effects through the synergistic effect of the aforementioned technical solutions. In terms of development efficiency, component reusability is increased by 80%, cross-report maintenance costs are reduced by 70%, and the average report development cycle is shortened by 70%. Regarding user experience, multi-platform adaptation workload is reduced by 90%, display consistency is improved from 60% to 95%, and the self-development rate by non-technical personnel is increased from 20% to 90%. In terms of system performance, multi-platform adaptation response time is controlled within 50 milliseconds, and rule execution efficiency for large-scale reports is improved by 85%. In terms of business adaptability, the business rule configuration cycle is shortened from days to minutes, realizing the upgrade of reports from static display to dynamic response to business rules. This invention provides an efficient, intelligent, and easy-to-use complete solution for enterprise-level zero-code report development, filling the gaps in existing technologies in component reuse, multi-platform adaptation, and business integration. Attached Figure Description

[0015] To more clearly illustrate the technical solutions in this invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only for this invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 The system architecture diagram of this invention shows the three-layer architecture design, the composition and relationship of the core modules in each layer; Figure 2 The flowchart for the component template reuse of the present invention illustrates three core processes: creating a template, referencing a template, and synchronizing updates. Each process contains four key steps. Figure 3 This is a schematic diagram of the multi-terminal intelligent adaptation of the present invention, illustrating how the unified design intelligently adapts to PC, mobile and large-screen terminals, and marking the characteristics and adaptation points of each terminal. Figure 4 The business rule visualization configuration interface of this invention shows the interface layout of the rule editor, which includes condition operators, action operators, rule canvas and configuration panel; Figure 5 This is a comparison chart of the implementation effects of the present invention, which compares the effects of the traditional method and the system of the present invention in three dimensions, and uses data to intuitively show the efficiency improvement. Detailed Implementation

[0017] The present invention will now be described in detail with reference to the accompanying drawings and specific embodiments. It should also be noted that, to make the embodiments more comprehensive, the following embodiments are the best and preferred embodiments, and those skilled in the art can use other alternative methods to implement some well-known technologies; moreover, the accompanying drawings are only for more specific description of the embodiments and are not intended to specifically limit the present invention.

[0018] It should be noted that the use of terms such as "an embodiment," "an embodiment," "an exemplary embodiment," and "some embodiments" in the specification indicates that the described embodiment may include a specific feature, structure, or characteristic, but not every embodiment necessarily includes that specific feature, structure, or characteristic. Furthermore, when a specific feature, structure, or characteristic is described in connection with an embodiment, implementing such a feature, structure, or characteristic in conjunction with other embodiments (whether explicitly described or not) should be within the knowledge of those skilled in the art.

[0019] Generally, terms can be understood at least partly from their use in context. For example, depending at least partly on the context, the term "one or more" as used herein can be used to describe any feature, structure, or characteristic in a singular sense, or a combination of features, structures, or characteristics in a plural sense. Additionally, the term "based on" can be understood not necessarily to convey an exclusive set of factors, but rather, alternatively, depending at least partly on the context, to allow for the presence of other factors that are not necessarily explicitly described.

[0020] See Figures 1 to 5 As shown This invention provides a zero-code visual dynamic design system and method for modular reports with multi-terminal adaptation. Through the synergistic effect of three core technology modules—component template reuse mechanism, multi-terminal intelligent adaptation engine, and business rule visual binding—it achieves efficient cross-report reuse of report components, intelligent multi-terminal adaptation, and zero-code configuration of business rules.

[0021] System architecture implementation methods This system adopts a layered architecture, including a presentation layer, a business logic layer, a data access layer, and an infrastructure layer. The presentation layer provides a report designer interface, a component template management interface, a rule configuration interface, and a multi-terminal preview interface. The business logic layer includes a component template management module, a multi-terminal intelligent adaptation engine, a business rule configuration module, and a dependency tracing engine. The data access layer is responsible for storing and accessing the component template library, terminal feature library, adaptive rule library, and business rule library. The infrastructure layer provides basic support such as distributed caching, message queues, and log services. The system interacts with the front-end through a RESTful API interface, uses WebSocket for real-time synchronization, uses Redis to cache hot data, and uses RabbitMQ to handle asynchronous tasks.

[0022] Specific implementation methods of component template reuse mechanism The implementation of the component template reuse mechanism first requires building a component template data structure. Each component template contains fields such as a unique identifier (template_id), template name, description, reuse scope, component type, data source configuration, style configuration, parameter configuration, interaction logic configuration, and dependencies. When a user selects a configured component in the report designer and performs the "Save as Template" operation, the system automatically parses the complete configuration information of the component through the component configuration extractor. This includes, but is not limited to, data source connection information, SQL query statements, field mapping relationships, chart type, color scheme, font style, size settings, event binding, and animation effects. This configuration information is serialized into JSON format and stored in the component template library. When a template is created, the system automatically generates a globally unique template ID in the format "template_{component type}{business domain}{serial number}", such as "template_chart_sales_001" representing the first chart template in the sales business domain.

[0023] In the implementation of template referencing and parameter adaptation, the system provides a template selector component, displaying thumbnail previews, names, descriptions, and usage statistics of all available templates. After the user selects a target template, the system reads the template configuration through the template loader, creates a component instance, and renders it to the report design canvas. To achieve parameter separation between templates and instances, the system designs a two-layer parameter structure: the basic parameter layer stores the core configuration of the template and cannot be modified, while the instance parameter layer allows users to personalize it according to specific report requirements. For example, the basic parameters of a "Monthly Sales Trend Chart" template include core configurations such as chart type as line chart, X-axis as month, and Y-axis as sales revenue, while instance parameters allow modification of data source filtering conditions such as "region='East China'", chart title such as "East China Monthly Sales Trend", and time range such as "2024-01 to 2024-12". The system intelligently merges basic parameters and instance parameters through a parameter merger, prioritizing the use of instance parameters to override the corresponding basic parameter values, generating the final component configuration.

[0024] The implementation of dynamic template synchronization relies on a dependency tracing engine, which maintains a directed acyclic graph (DAG) structure to record the dependencies between templates and reports. Whenever a template reference is created, the system inserts a record into the dependency table, containing information such as the template ID, report ID, reference timestamp, and instance parameter snapshot. When the template owner modifies the template configuration, the system first uses the dependency tracing engine to perform a breadth-first search algorithm to traverse all report nodes referencing the template, generating a list of affected reports. During synchronization, the system uses a batch processing approach, decomposing the synchronization task into multiple subtasks for parallel execution. Each subtask is responsible for updating a template instance in one report. To ensure data consistency, the synchronization process employs a two-phase commit protocol: the first phase pre-checks the availability and locking status of all target reports; the second phase performs the actual configuration updates and releases the locks. After synchronization is complete, the system pushes update notifications to relevant users via WebSocket and records synchronization details in the audit log.

[0025] Specific implementation methods of multi-terminal intelligent adaptation engine Building the terminal feature library requires defining standardized terminal feature models, including device type (PC / Mobile / Tablet / Screen), screen resolution (width×height), pixel density (DPI), screen orientation (landscape / portrait), input method (mouse / touch / keyboard), browser type and version, operating system, and other attributes. The system pre-configures mainstream terminal settings, such as a standard PC configuration of 1920×1080 resolution, 96 DPI, and support for mouse hover interaction; a mobile iPhone configuration of 375×667 resolution, 326 DPI, and touch interaction only; and a large-screen configuration of 3840×2160 resolution, 163 DPI, and support for remote control interaction. Users can customize and add new terminal types through the terminal configuration interface, entering the terminal name and parameter values. The system automatically generates a terminal configuration file and adds it to the feature library.

[0026] Implementing adaptive rule configuration requires establishing a mapping relationship between components and rules. The system defines a default set of adaptation rules for each type of component. For table components, the adaptation rules include: automatically hiding lower-priority columns when the number of columns exceeds 5 on mobile devices, while retaining key business fields such as name, amount, and status; automatically increasing row height by 1.5 times to improve visibility on large screens; and dynamically calculating font size based on screen resolution using the formula: Where BaseFontSize is the base font size (14px), CurrentResolution is the current terminal resolution, BaseResolution is the standard resolution (1920×1080), and DPIFactor is the pixel density correction factor. The chart component adaptation rules include: mobile chart width adapts to 95% of the screen width, and height is automatically calculated based on the aspect ratio; large-screen chart size is enlarged to 80% of the container width, and data labels are added; the interaction method is adjusted according to the input device: PC supports mouse hover to display details, while mobile uses click to expand the details panel.

[0027] Dynamic rendering adaptation is implemented by acquiring access terminal information in real time through a front-end JavaScript listener, parsing the User-Agent string to identify the device type, obtaining the screen resolution through the `window.screen` object, and obtaining the pixel density through `window.devicePixelRatio`. The system sends the terminal information to the back-end adaptation engine. The engine first matches the closest terminal configuration in the terminal feature library, then loads the corresponding adaptive rule set, and performs rule matching and parameter adjustment for each report component. The rendering process uses virtual DOM technology, first building the adjusted component tree in memory, calculating the position, size, and style attributes of each component, and then updating the actual DOM all at once to reduce the number of reflows and repaints. To support users manually previewing the effects of different terminals, the system provides a terminal switcher component. After the user selects a target terminal, the system simulates the characteristics of that terminal, re-executes the adaptation process, and displays the effect in real time. The adaptation calculation uses a responsive layout algorithm, and the component size calculation formula is: Where ContainerSize is the container size, ResponsiveFactor is the responsiveness factor (between 0 and 1), ScreenSize is the actual screen size, and DesignSize is the design size, ensuring that the component does not exceed the screen boundary.

[0028] Specific implementation methods for business rule visualization binding The implementation of visual rule configuration is achieved through a graphical rule editor. The left side of the editor features an operator panel containing conditional operators (equal to, not equal to, greater than, less than, contain, not contain, regular expression matching, date range, etc.) and action operators (setting color, setting font, showing / hiding, pop-up prompts, triggering events, data filtering, formatting display, etc.). Users construct rule logic by dragging and dropping operators onto the central canvas, with lines connecting operators to indicate execution order and logical relationships. The rule editor supports nested conditions and provides logical operators such as AND, OR, and NOT, supporting parentheses to change priority. For example, when configuring the rule "(Sales > 1 million AND Region = 'East China') OR (Sales > 800,000 AND Region = 'North China')", users drag two "greater than" conditional operators, two "equal to" conditional operators, two AND operators, and one OR operator, constructing the complete logic through visual connections. Each operator supports parameter configuration; for example, the "greater than" operator can be configured to source comparison values ​​as constants, variables, or expressions. After configuration, the system will convert the visual rules into Rule Description Language (RDL) for storage. RDL uses SQL-like syntax for easy parsing and execution.

[0029] Implementing rule-component binding requires establishing a rule-component association mapping table to record information such as rule ID, component ID, trigger timing (data loading, cell click, value change, timed trigger, etc.), execution priority, and activation status. Users select the target component in the report designer to open the rule binding panel, which displays a list of all available rules, supporting sorting and filtering by rule type, creation time, and usage frequency. After selecting a rule, the system displays rule details and parameter configuration, allowing users to adjust rule parameters to suit the current component context. For example, when binding the "Sales Anomalous Marking" rule to the "This Month's Sales" column in a table, the system automatically recognizes the column's data type as numeric and maps the "Sales" variable in the rule to that column's data. Binding supports multiple rule combinations; when multiple rules trigger simultaneously, they are executed in priority order. Dependency configuration between rules is supported, such as rule B only executing after rule A succeeds.

[0030] Dynamic rule execution is implemented through a rule execution engine. The engine employs an event-driven architecture, listening for various events throughout the report's lifecycle. When an event is triggered, the engine queries all rules bound to the component and filters out the set of rules to be executed based on the trigger timing. Before execution, the engine pre-compiles the rules, converting RDL into JavaScript functions and dynamically generating executable code using a Function constructor. The pre-compiled results are cached in memory, eliminating the need for repeated compilation of identical rules. During execution, the engine constructs an execution context, including current component data, user information, system variables, etc., and passes this context as a parameter to the rule function. For scenarios with large datasets, the engine uses a batch processing strategy, dividing the dataset into multiple batches for parallel rule execution, and using Web Worker technology to avoid blocking the main thread. Execution results are processed using a virtual DOM difference comparison algorithm to minimize DOM manipulation, updating only changed element attributes. The engine provides execution logging, recording the execution time, impact scope, and results of each rule for performance analysis and troubleshooting.

[0031] Example 1: Cross-departmental reuse of sales reports A large retail company needs to create monthly sales analysis reports for 10 sales regions nationwide. Each report includes components such as sales trend charts, regional comparison tables, and top 10 product rankings. Traditionally, each region needs to design its own report and repeatedly configure the same components. With this invention, the headquarters report administrator first creates a standard sales analysis report in the Block Report Designer, configuring the monthly sales trend chart component. This includes setting the data source to the sales database, the SQL query statement to "SELECT month, SUM(amount) FROM sales WHERE region=:region GROUP BYmonth", the chart type to a combination chart (bar chart + line chart), with the bar chart representing sales revenue, the line chart representing year-on-year growth rate, and the color scheme to the company's standard colors. After configuration, clicking the "Save as Template" button, entering the template name "Standard Monthly Sales Trend Chart", the description "Applicable to monthly sales analysis in all major regions", and selecting "Entire System" for reuse, the system generates a template ID "template_chart_sales_monthly_001" and stores it in the component template library.

[0032] When regional report administrators create reports for their respective regions, they select the "Standard Monthly Sales Trend Chart" template from the template library. The system automatically loads the template configuration and renders the components. The East China regional administrator only needs to modify the instance parameters, changing the `region` parameter value to "East China" and the chart title to "East China Monthly Sales Trend." The North China regional administrator changes the `region` parameter to "North China" and the title to "North China Monthly Sales Trend." When headquarters needs to uniformly adjust the chart style, such as changing the bar chart color from blue to orange, they only need to modify the template configuration and click "Synchronize to All Referenced Reports." The system uses its dependency tracing engine to identify that all 10 regional reports reference this template and performs batch synchronization updates, unifying the style of all reports within 2 seconds. Through component template reuse, the repetitive configuration work that originally took 10 hours is reduced to 2 hours, improving efficiency by 80%.

[0033] Meanwhile, sales reports need to be displayed on PCs, mobile devices, and large screens. PCs are used for daily office work to view detailed data, mobile devices are used for sales staff to quickly query data when they are out and about, and large screens are used for real-time display in the sales hall. The system automatically processes data through a multi-terminal intelligent adaptation engine: When accessed on a PC, the report is displayed at the original design resolution of 1920×1080, the sales trend chart is 800px wide and 400px high, and the table displays all 15 columns of data; when accessed on a mobile device (iPhone 12 detection resolution 390×844), the system automatically adjusts the sales trend chart width to 370px (95% of screen width) and height to 185px (maintaining aspect ratio), the table only displays the 5 key columns (product name, sales amount, quantity, growth rate, and ranking), and the remaining columns are viewed by swiping left and right, and the font size is adjusted from 14px to 12px; when accessed on a large screen (4K display 3840×2160), the sales trend chart is automatically enlarged to 1920px×960px, the data label font size is increased to 24px to ensure readability at a distance, the table row height is increased by 50%, and the overall layout is adjusted to a two-column format to make full use of screen space.

[0034] The business requirement is to highlight sales figures when monthly sales exceed a target value, with different target values ​​for different regions. This is achieved through visual binding of business rules: create a rule "Highlight Sales Target," drag and drop the "greater than" condition operator and the "set color" action operator, and configure "background color = green, font bold" when "cell value > target value." The target value for the East China region is set to 1 million, and for the North China region, it is set to 800,000. The rule is bound to the sales column of their respective reports. When the report runs, the rule execution engine calculates in real time. The East China region's January sales of 1.2 million automatically display a green background, while the North China region's January sales of 750,000 retain the default style, without requiring any code for dynamic formatting.

[0035] Example 2: Multi-terminal real-time adaptation scenario for production monitoring reports A smart manufacturing company needs to display real-time production monitoring reports for each workshop, including production progress, equipment status, and quality indicators. The reports must be perfectly displayed on three terminals: workshop tablets, office computers, and a large screen in the monitoring center. The system implementation steps are as follows: First, create a "Production Progress Dashboard" template in the component template library, including components such as a progress pie chart, equipment status matrix, and defect rate trend line. Then, configure multi-terminal adaptation rules: For workshop tablets (10.1-inch 1280×800), the dashboard components use a single-column layout, with each dashboard filling the screen width, height adaptive, and optimized touch interaction; clicking allows viewing detailed data. For office computers (23-inch 1920×1080), the dashboard uses a 2×2 grid layout with data tooltips displayed on mouse hover. For the monitoring center large screen (85-inch 7680×4320), the dashboard uses a 4×3 flowing layout, automatically rotating to display various indicators, switching every 5 seconds.

[0036] Implement business rule binding: Create an "Equipment Anomaly Warning" rule, where the corresponding equipment status card flashes a red warning when equipment operation time exceeds 8 hours or temperature exceeds 80℃; create a "Capacity Target Tracking" rule, where the progress bar displays yellow when actual capacity is lower than 90% of planned capacity, and red when it is lower than 70%; create a "Quality Control" rule, where an audible alarm is triggered and a notification is sent to the manager's mobile phone when the defect rate exceeds 3%. These rules are configured visually, and workshop operators can also adjust the threshold parameters independently. After the system is running, workshop tablets display real-time data, allowing operators to quickly understand the production status; office managers can view the overall plant situation on their computers and promptly identify anomalies; the monitoring center's large screen displays key indicators 24 hours a day, providing immediate warnings for abnormal situations. Through this invention system, the company's production monitoring report development cycle was shortened from 2 months to 2 weeks, multi-terminal adaptation workload was reduced by 85%, and production anomaly response time was shortened from an average of 30 minutes to less than 5 minutes.

[0037] This invention encompasses any substitutions, modifications, equivalent methods, and solutions made within the spirit and scope of this invention. To provide the public with a thorough understanding of this invention, specific details are described in detail in the following preferred embodiments; however, those skilled in the art will fully understand the invention even without these details. Furthermore, to avoid unnecessary misunderstanding of the essence of this invention, well-known methods, processes, procedures, components, and circuits are not described in detail.

[0038] The above description is only a preferred embodiment of the present invention. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A building block report zero-code visual dynamic design multi-end adaptation method, characterized in that, The method comprises the following steps: Step 1: component templating reuse, comprising: extracting the data source configuration, style configuration, parameter configuration and interaction logic configuration of the configured report component, generating a component template with a unique identifier and storing it in a component template library; selecting a target template from the template library during report design, separating the base parameter layer and the instance parameter layer through a double-layer parameter structure, wherein the base parameter layer saves the template core configuration, and the instance parameter layer supports personalized adjustment; maintaining the directed acyclic graph structure to record the dependency relationship between the template and the report through a dependency tracking engine, and when the template configuration is modified, updating all reports referencing the template in batches through a two-phase commit protocol; Step 2: multi-terminal intelligent adaptation, comprising: building a terminal characteristic library to store the device type, screen resolution, pixel density, screen direction and input method parameters of different terminals; setting adaptive rules for table components, chart components and text components respectively, and automatically adjusting the component size, layout and interaction mode according to the terminal characteristics; identifying the terminal type by parsing the User-Agent string and the window.screen object when accessing the report, matching the configuration in the terminal characteristic library, and executing component parameter adjustment and rendering using virtual DOM technology; Step 3: business rule visual binding, comprising: constructing business rule logic by dragging condition operators and action operators, and converting visual rules into rule description language for storage; establishing a rule-component association mapping table to record rule ID, component ID, trigger timing and execution priority; listening to report lifecycle events through a rule execution engine, precompiling rule description language into JavaScript functions and caching, executing corresponding rules and updating component display when the event is triggered.

2. The method of claim 1, wherein, The component template generation in step 1 specifically comprises: automatically parsing the data source connection information, SQL query statement, field mapping relationship, chart type, color scheme, font style, size setting, event binding and animation effect configuration of the component, and serializing the configuration information into JSON format; generating a globally unique template ID in the format of "template_{component type}{business domain}{serial number}"; the dependency tracking engine inserts a dependency record containing the template ID, report ID, reference timestamp and instance parameter snapshot when creating a template reference, and performs a breadth-first search algorithm to traverse all reference nodes when synchronizing the template.

3. The method of claim 1, wherein, The adaptive rules in step 2 specifically comprise: The table component automatically hides lower priority columns when the number of columns exceeds 5 on a mobile terminal, and enlarges the row height by 1.5 times on a large screen terminal; the chart component automatically adjusts the width to 95% of the screen width on a mobile terminal, and enlarges the size to 80% of the container width on a large screen terminal; the font size adopts the public dynamic calculation, wherein BaseFontSize is the base font size (14px), CurrentResolution is the current terminal resolution, BaseResolution is the standard resolution, and DPIFactor is the pixel density correction factor; the component size uses the formula: responsive calculation, wherein ContainerSize is the container size, ResponsiveFactor is the responsive coefficient, ScreenSize is the actual screen size, and DesignSize is the design size.

4. The method of claim 1, wherein, The rule execution in step 3 specifically comprises: The rule description language is dynamically compiled by the Function constructor to generate executable code and cached to memory; an execution context containing current component data, user information and system variables is built; for large data scenarios, the data set is split into multiple batches, and the rules are executed in parallel through WebWorker technology; the DOM operation is minimized through the virtual DOM difference comparison algorithm, and only the changed element attributes are updated.

5. A method for multi-end adaptation of dynamic design of zero-code visualized building block report, characterized in that, It comprises: A component template management module, including a component configuration extractor, a template storage unit and a dependency tracking engine, the component configuration extractor is used to parse the complete configuration information of the report component and serialize it into JSON format, the template storage unit is used to store the component template with a unique identifier, and the dependency tracking engine is used to maintain the directed acyclic graph dependency relationship of the template and the report and perform batch synchronization update; A multi-terminal intelligent adaptation engine, including a terminal characteristic library, an adaptive rule library and a dynamic rendering unit, the terminal characteristic library stores the device parameters of different terminals, the adaptive rule library defines the adaptation rules of various components on different terminals, and the dynamic rendering unit adjusts the components by identifying the access terminal and matching the corresponding rules; A business rule configuration module, including a rule visual editor, a rule storage unit and a rule execution engine, the rule visual editor provides drag-and-drop configuration of condition operators and action operators, the rule storage unit maintains a rule-component association mapping table, and the rule execution engine realizes dynamic response of business logic through event listening, rule pre-compilation and batch execution.

6. The system of claim 5, wherein, The component template management module further comprises: A parameter merger for intelligently merging the template basic parameter layer and the instance parameter layer, and using the instance parameters to cover the corresponding basic parameter values in priority; a synchronization controller using a two-phase commit protocol, the first phase pre-checking the availability and locking state of all target reports, and the second phase executing configuration update and releasing the lock; an audit log unit recording detailed information of template creation, reference, modification and synchronization.

7. The system of claim 5, wherein, The multi-terminal intelligent adaptation engine further comprises: A terminal identifier for obtaining device type, screen resolution and pixel density by analyzing User-Agent string, window.screen object and window.devicePixelRatio; an adaptation calculator for calculating size and position parameters of components on different terminals according to responsive layout algorithm; a terminal switcher supporting simulation of other terminal characteristics on a single terminal for preview verification.

8. The system of claim 5, wherein, The business rule configuration module further comprises: A rule converter for converting the visual configuration rule logic into a rule description language; an execution context builder for integrating current component data, user information and system variables; a performance optimization unit for realizing efficient execution of large data scenarios through pre-compilation caching, WebWorker parallel processing and virtual DOM difference comparison.

Images