Vue-based multi-dimensional user-defined query statistical method and Vue-based multi-dimensional user-defined query statistical system

Abstract

The invention discloses a Vue-based multi-dimensional user-defined query statistics method and system, and belongs to the field of data query statistics. Aiming at the technical pain points that in the prior art, the coupling degree of dimension configuration and a component is high, correlation verification lags behind, and component re-rendering is uncontrollable, JSON Schema definition is creatively expanded to define a metadata specification containing a'vueRender 'enhancement field, and dynamic decoupling and life cycle linkage of dimension configuration and Vue component rendering are achieved; designing a three-level association state depth-first traversal verification algorithm based on Vue response type dependency tracking, and realizing real-time accurate verification of query conditions through bidirectional linkage of a dimension association matrix and a dependency graph; proposing a life cycle aware dynamic weight LRU cache algorithm, and combining a component life cycle hook and a query frequency-data timeliness double-factor dynamic adjustment cache strategy; a fragment rendering mechanism in a large data volume scene is optimized, and collaborative optimization of intelligent cache management, dynamic cleaning and efficient component rendering is realized. Through full-link deep integration of metadata driving and Vue component life cycles, the problems of configuration efficiency, verification real-time performance and rendering performance in a multi-dimensional query scene are systematically solved. The method can be widely applied to data management systems, data analysis platforms and other scenes needing flexible query and statistics, and has remarkable technical advantages and practical value.

Description

Technical Field

[0001] This invention relates to the field of data query and statistics technology, and proposes a multi-dimensional custom query and statistics method and system based on Vue. It is particularly suitable for application scenarios such as data management systems, data analysis platforms, and back-end management systems built on the Vue framework that have high requirements for the flexibility of custom query configuration and page response performance. Background Technology

[0002] Due to its component-based architecture and reactive data binding, the Vue framework is widely used in the development of query and statistics systems. Multi-dimensional custom query and statistics functionality needs to support user-defined combinations of dimensions such as time, region, and type, and display the corresponding statistical results. This is one of the core functions of data management systems and data analysis platforms.

[0003] In existing technologies, multi-dimensional query statistics have the following unresolved technical pain points:

[0004] 1. High coupling between dimensional configuration and components: Existing technologies mostly use JSON Schema for configuration management. Although this achieves the mapping between configuration and components, it does not adapt to the Vue component lifecycle. When adjusting custom dimensions, component registration / uninstallation still needs to be handled manually, resulting in low configuration efficiency. Furthermore, configuration parameters need to be hard-coded and bound. When custom dimensions change, component code needs to be modified and redeployed.

[0005] 2. Delayed and low-accuracy association validation: In multi-dimensional custom queries, there are association constraints between dimensions, but existing technologies mostly use list-style association configuration; the association validation used is mostly performed after submission, which cannot provide real-time feedback; and there is a lack of hierarchical association status definition, making it impossible to distinguish between optional association and mandatory association, which easily leads to invalid custom query requests.

[0006] 3. Uncontrollable component re-rendering: In scenarios involving large amounts of data statistics, data changes can easily trigger a full re-rendering of components, leading to page lag and slow response; the caching mechanism lacks linkage with the component lifecycle, which can easily result in cache redundancy or data expiration issues.

[0007] While existing technologies offer single functions such as metadata configuration and cache optimization, they fail to achieve deep integration between metadata-driven processes and the Vue component lifecycle. This makes it impossible to systematically address core pain points such as high coupling, delayed validation, and uncontrollable re-rendering in custom query scenarios. Therefore, a technical solution that optimizes the entire process is urgently needed. Summary of the Invention

[0008] This invention provides a multi-dimensional custom query and statistics method and system based on Vue, which realizes low coupling between custom configuration and components, real-time correlation verification, intelligent management of cache and standardized processing of heterogeneous data, thereby improving the efficiency of custom query and statistics and the stability of the system.

[0009] A multi-dimensional custom query and statistics method based on Vue, the core of which lies in realizing the full-link linkage between metadata configuration and Vue component lifecycle, supporting users to customize query dimensions and statistical rules, specifically including the following steps:

[0010] Step S1: Metadata specification definition and configuration file generation.

[0011] Based on JSON Schema, a custom query dimension metadata specification with an enhanced "vueRender" field is defined. This "vueRender" field not only carries the basic attributes of Vue form components (type, placeholder hints, style class names, etc.) and dynamic registration parameters (global registration identifier, lifecycle hook binding rules), but also includes three innovative sub-fields: component rendering priority, cache dependency identifier, and re-rendering trigger condition. This achieves deep binding between configuration and component rendering and cache management. A pre-set dimension association matrix is ​​also included. This matrix is ​​a two-dimensional array structure, where row and column indices are dimension IDs. Matrix element values ​​represent three levels of association status: 0 indicates no association, 1 indicates association, and 2 indicates strong association. The matrix also embeds dimension dependency weight coefficients to optimize validation priority.

[0012] After receiving user-defined dimension configuration parameters, a three-layer progressive validity check is performed through the dimension association matrix: the first layer is data type validation, verifying whether the data types of each dimension conform to the metadata specification definition; the second layer is boundary validation, verifying the compliance of dimension query constraints (such as time range, optional value range); the third layer is association validity validation, using the dimension association matrix to reverse verify whether the dimension association rule configuration is consistent with the matrix state. After all three layers of validation pass, a standardized configuration file with a version identifier is generated, which can directly drive the Vue component lifecycle.

[0013] Step S2: Responsive parsing and custom query parameter generation.

[0014] In the Vue component's beforeCreate lifecycle hook, the standardized configuration file generated in step S1 is loaded asynchronously, and the dimension association rules and dependency weight coefficients are extracted to construct a dimensional dependency graph with a directed graph structure.

[0015] Furthermore, a three-level association state depth-first traversal verification algorithm is used to traverse the graph. The specific steps of the algorithm are as follows:

[0016] 1. Initialize the validation queue, using the dimensions already operated by the user as the starting node, and sort them in descending order by dependency weight coefficient.

[0017] 2. Starting from the initial node, perform a depth-first traversal of its associated dimensions and execute the corresponding verification logic based on the three-level states (0 / 1 / 2) in the association matrix.

[0018] State 0: Directly marked as an illegal association, terminate the traversal of this branch and record the error information;

[0019] State 1: Verify the compliance of the values ​​of the associated dimensions. If they comply with the rules, continue to traverse the next level of associated dimensions. If they do not comply with the rules, mark a warning message.

[0020] State 2: First, check if the preceding dimension has been entered. If not, mark it as a serious error. If it has been entered, check the matching degree between the value of the associated dimension and the preceding dimension.

[0021] 3. The verification result cache is updated in real time during the traversal. If the same dimension is associated multiple times, the core verification is only performed once, and duplicate calculations are avoided by reusing the cache.

[0022] 4. After the traversal is complete, summarize the verification results and generate a verification report containing the error level and repair suggestions.

[0023] Both associated states and query parameters are encapsulated as Vue reactive data nodes. The `watch` directive is used to deeply monitor changes in query parameters. When any dimension value changes, a reactive revalidation of its associated dimensions is triggered. For strongly associated dimension pairs, if the preceding dimension is missing, a "strongly associated dimension missing" event is emitted via Vue's `$emit` event. The parent component listens for this event, disables the query operation using the `disable` directive, and displays a precise error message. After all dimensions pass validation, the backend API protocol type (RESTful / GraphQL) is automatically identified, and the validated query parameters are encapsulated into standardized query request parameters in the corresponding protocol format.

[0024] Step S3: Lifecycle-aware dynamic weighted LRU cache management.

[0025] A cache pool is constructed using a composite cache key-value pair consisting of "component instance ID + query dimension," clearly defining the association rules between the cache pool and the Vue component lifecycle.

[0026] 1. In the created lifecycle hook of a Vue component, initialize the cache pool partition dedicated to the current component, and load valid data from the historical cache that matches the current metadata version.

[0027] 2. In the beforeUpdate lifecycle hook of a Vue component, anticipate the impact of data updates on the cache. If the updated content does not involve core parameters of the query dimensions, retain the cache; if it does involve core parameters, mark the relevant cache as pending cleanup.

[0028] 3. In the beforeDestroy lifecycle hook of a Vue component, automatically clean up all data in the current component's cache pool partition, and release associated memory resources to avoid cache redundancy.

[0029] An innovative dynamic weighted LRU caching algorithm is designed, featuring a dual expiration optimization mechanism: the first layer is a dynamic expiration threshold based on a dual factor of "query frequency - data timeliness." The base expiration threshold T0 is set to 30 minutes, the current query frequency is f times / minute, and the data timeliness coefficient is λ (preset according to data type: λ=0.3 for data with high real-time requirements, λ=0.7 for ordinary data, and λ=1.0 for static data). The dynamic threshold T is calculated using the formula: T = T0 × λ ×(1 + min (f / 10, 0.5)). This formula is based on the principle that cached data with higher query frequency has higher value and should have a longer expiration time; data with higher timeliness requirements should have a shorter expiration time. This dual-factor collaboration achieves optimal allocation of cache resources. Experiments have verified that this strategy can improve the cache hit rate by more than 35%. The second layer is the change and expiration mechanism of associated metadata configuration version. The version identifier of the metadata configuration file is embedded in the cached data. When the metadata configuration file is updated, a full cleanup of the corresponding version cache is triggered to ensure that the cached data matches the latest configuration.

[0030] In addition, the algorithm introduces a cache weight adjustment mechanism: each time a cache hit occurs, a weight value is added to the cache item according to the data usage scenario. The weight value affects the cache eviction priority. High-weight cache items are retained first when the cache is full, further improving the cache hit rate.

[0031] Step S4: Component-based dynamic rendering optimization.

[0032] In the mounted lifecycle hook of a Vue component, the component type, attribute parameters, and rendering priority in step S1 "vueRender" configuration are parsed. The query form component and chart component are dynamically registered through Vue's global component registration method, realizing configuration-driven component rendering without hard-coding binding.

[0033] By combining Vue's computed property with a "differentiated listening strategy," changes to statistical data can be monitored: only changes to core fields of statistical data (such as numerical values ​​and time nodes) are monitored, while minor changes to non-core fields (such as style configuration and display format) are ignored. Only when core fields change will a partial refresh of the chart data be triggered, rather than a full re-render of the component.

[0034] Furthermore, when the amount of statistical data exceeds a preset threshold (e.g., 1000 records), Vue's `nextTick` method, combined with an "adaptive split-rendering strategy," is used to perform split-rendering.

[0035] 1. First, detect the current browser main thread load (obtain the main thread idle time through the performance API).

[0036] 2. Adaptively adjust the amount of data rendered in each batch based on the main thread load: when the main thread idle time is ≥50ms, render 200 data entries per batch; when the idle time is between 20-50ms, render 100 data entries per batch; when the idle time is <20ms, render 50 data entries per batch.

[0037] 3. First, render the first batch of data and update the view. Listen for the view update completion event through nextTick. Render the next batch of data after the main thread is idle. Repeat this process until all data is rendered, thus avoiding page lag caused by the main thread being blocked.

[0038] Step S5: Front-end and back-end data interaction adaptation.

[0039] The first step is protocol identification and parameter encapsulation: The protocol type is automatically identified by parsing the backend interface prefix (if it contains " / graphql", it is the GraphQL protocol; otherwise, it is the RESTful protocol). The GraphQL protocol encapsulates query parameters into a "query + variables" structure, while the RESTful protocol encapsulates them into key-value pairs, ensuring that the request can be correctly parsed by the backend.

[0040] The second step is heterogeneous data format conversion: After receiving the XML / JSON heterogeneous data returned by the backend, for XML format data, a conversion algorithm based on DOM node traversal is used to map XML element nodes to keys of JSON objects, attribute nodes to subkeys of JSON objects, text nodes to values ​​of corresponding keys, and repeating element nodes to JSON arrays, thus completing the standardized conversion from XML to JSON.

[0041] The third step is data completion and reactive binding: Perform full missing data validation on the converted JSON data, and use the "type-adaptive completion strategy" (fill in 0 for numeric types, "no data" for character types, "1970-01-01" for date types, and empty arrays for array types) to handle invalid data. Then, assign the standardized data to the Vue reactive data object, and synchronize it to the dynamic rendering module through reactive binding to complete the visualization of the statistical results.

[0042] Corresponding to the above method, the present invention also provides a Vue-based multi-dimensional custom query and statistics system, including a metadata-driven custom configuration module, a reactive parsing module, a lifecycle-aware caching module, a dynamic rendering module, and a data interaction adaptation module. Each module works together to implement the entire process of the above method.

[0043] The metadata-driven configuration module is used to define metadata specifications containing the "vueRender" field based on extended JSON Schema, and presets a two-dimensional array structure dimension association matrix (element values ​​are 0 / 1 / 2, three-level association states); after receiving user-defined dimension configuration parameters, it completes a three-level progressive verification of data type, boundary and association validity through the association matrix verification unit, and generates a standardized configuration file with version identifier; it supports version management of configuration files, and synchronously notifies other modules when the version is updated.

[0044] The reactive parsing module includes a graph update unit and a validation algorithm unit. It loads standardized configuration files during the Vue component's `beforeCreate` lifecycle hook and constructs a directed graph-structured dimensional dependency graph based on dimensional association rules and dependency weight coefficients. The validation algorithm unit performs real-time association validation using a three-level association state depth-first traversal validation algorithm combined with the three-level association states. Deeply integrated with the Vue reactive system, it uses the `watch` directive to monitor query parameter changes and trigger reactive re-validation of associated dimensions. The graph update unit can incrementally update the existing dimensional dependency graph (updating only changed dimension nodes and relationships) when the metadata configuration file version is updated, eliminating the need for a full rebuild and improving update efficiency. After successful validation, it automatically identifies the backend protocol type and generates standardized query request parameters.

[0045] The lifecycle-aware caching module constructs a cache pool using a composite cache key-value pair consisting of "component instance ID + query dimension combination + metadata version number". It associates the cache pool with the Vue component's `created` hook for cache pool initialization, `beforeUpdate` for cache state prediction, and `beforeDestroy` for cache cleanup. It integrates a dynamic weighted LRU caching algorithm, sets a dynamic time expiration threshold based on a dual factor of "query frequency - data timeliness", and configures a version change expiration mechanism. It can receive version update notifications from the metadata-driven configuration module, triggering a full cleanup of the corresponding version's cache to ensure cache effectiveness and reasonable resource utilization.

[0046] The dynamic rendering module includes a slice rendering unit and a differential listener unit, used to dynamically register form components and chart components in the mounted lifecycle of Vue components based on the "vueRender" configuration; the differential listener unit uses Vue's computed property in combination with a differential listener strategy to achieve partial refresh of chart data; when the amount of data collected exceeds a threshold, the slice rendering unit uses Vue's nextTick method in combination with an adaptive slice rendering strategy to achieve slice rendering, avoiding page lag.

[0047] The data interaction adaptation module includes an XML-JSON conversion unit and a protocol adaptation unit. It is used to automatically identify the protocol type of the backend interface (RESTful / GraphQL) and encapsulate query request parameters according to metadata adaptation rules. The XML-JSON conversion unit uses an optimized DOM node traversal conversion algorithm to convert the heterogeneous XML / JSON data returned by the backend into a standardized JSON format. Invalid data is handled through a type adaptation completion strategy, and finally, the converted data is reactively bound to the Vue rendering module. Attached Figure Description

[0048] The invention will be further understood from the following description taken in conjunction with the accompanying drawings. The components in the drawings are not necessarily drawn to scale, but rather the emphasis is on illustrating the principles of the embodiments. In the drawings, the same reference numerals designate corresponding parts in different views.

[0049] Figure 1 This is the overall flowchart of the multi-dimensional custom query statistics method of the present invention.

[0050] Figure 2 This is a flowchart illustrating the metadata specification definition and configuration file generation process of this invention.

[0051] Figure 3 This is a flowchart of the component-based dynamic rendering process of the present invention. Detailed Implementation

[0052] Example 1

[0053] This embodiment takes the data statistics scenario of the government service platform as an example. This scenario is aimed at government staff and needs to support multi-dimensional custom queries based on "time dimension (year / quarter / month / day), region dimension (province / city / county / township), matter type dimension (business establishment / social security processing / real estate registration / entry and exit approval), and case status dimension (completed / processing / rejected)". The core requirements are flexible configuration, real-time response, support for statistical display of tens of millions of case data, and must meet the special requirements of government scenarios such as cross-departmental data collaborative verification and export of statistical results for filing.

[0054] Step 1: Metadata-driven multi-dimensional custom configuration.

[0055] The core of this step lies in achieving precise association between metadata specifications and Vue component lifecycle and cache management through JSON Schema extension, supporting user-defined query dimension configurations. The specific logic is as follows: First, the extended definition includes a metadata specification with an enhanced field called "vueRender". This field contains basic attributes (such as the region dimension component type being a cascading selector, the placeholder prompt being "Please select the statistical region", and support for multiple selections), dynamic registration parameters (global registration identifier being "gov-region-cascader", registration binding to the beforeCreate hook, and unloading binding to the beforeDestroy hook), and innovative subfields (rendering priority being 1, cache dependency identifier being "region-dep", and re-rendering trigger condition being "regional level change"). For the scenario of handling data statistics, four core custom query dimensions are defined: time dimension, region dimension, matter type dimension, and handling status dimension. Each dimension fully includes metadata elements such as dimension ID, data type, display name, association rules, query constraints (e.g., the time dimension range is constrained to 2023-2025), dependency weight coefficients (the weight coefficient of the region dimension is 0.8, the time dimension is 0.6, the matter type dimension is 0.7, and the handling status dimension is 0.5), and vueRender configuration.

[0056] A pre-defined dimension association matrix is ​​synchronously configured, combined with the business logic of government affairs case statistics (strong association between region and case type, requiring matching of corresponding case lists by region; association between time and case status, statistical distribution of status by time period; association between case type and case status, analysis of processing efficiency by case type). The matrix is ​​defined as follows (row / column index: 0 = time dimension, 1 = region dimension, 2 = case type dimension, 3 = case status dimension): [ [0, 1, 1, 1], / / Time dimension is related to region, item type, and processing status (1) [1, 0, 2, 1], / / The region dimension is strongly correlated with the event type (2), and can be correlated with other dimensions (1). [1, 2, 0, 1], / / The item type dimension is strongly correlated with the region (2), and can be correlated with other dimensions (1). [1, 1, 1, 0] / / The case status dimension is correlated with other dimensions (1) ]

[0058] After receiving user-defined parameters, the metadata-driven custom configuration module initiates a three-tiered progressive validity check: the first tier, data type validation (time dimension is a string type, region dimension is a string array type); the second tier, boundary validation (time dimension input value is 2024Q2, within the range of 2023-2025); and the third tier, association validity check (the user-configured region and event type association rules are consistent with the matrix strong association status). Once all three tiers of validation pass, a standardized configuration file with a version identifier (e.g., dim-config-v2.1.json) is generated and stored on the configuration server for subsequent component lifecycle hooks to access.

[0059] Step 2: Responsive parsing and query parameter generation.

[0060] In the Vue component's beforeCreate lifecycle hook, gov-dim-config-v2.1.json is loaded via an asynchronous HTTP request. Based on dimensional association rules and dependency weight coefficients, a directed graph structure of dimensional dependency graph is constructed (nodes: time, region, item type, item status; edges: region → item type (strong association, weight 0.9), time → item status (associative, weight 0.7), item type → item status (associative, weight 0.8)).

[0061] The graph is traversed by a depth-first traversal algorithm and real-time verification is performed in conjunction with the association matrix: When the user does not select the region dimension, if he tries to select the item type dimension, the system listens for parameter changes through the watch command, triggers association verification, identifies the two as strongly related (2), emits the "strong association dimension missing" event through the $emit event, the parent component disables the query button and prompts "please select the statistical region first (at least select the county level)"; after the user supplements the selection of "province-city-district", the system automatically loads the list of item types that can be handled in the region (filtering out items that cannot be handled such as "entry and exit approval"); after the user selects "business establishment", the verification passes.

[0062] After the association verification passes, the module automatically identifies the protocol type of the backend interface (RESTful / GraphQL), and encapsulates the verified custom query parameters into standardized query request parameters in the corresponding protocol format, ensuring that the request parameters can be directly parsed by the backend interface.

[0063] Step 3: Build an improved LRU caching module that integrates with the Vue component lifecycle.

[0064] Using "Component instance ID=gov-comp-20240610-003 + query dimension combination=time:2024Q2_region:330106_matter:enterprise_registration_status:completed + metadata version number=v2.1" as the composite cache key, the component's dedicated cache partition is initialized in the Vue component's created hook, loading valid data from the historical cache that matches version v2.1.

[0065] The frequency of this query within a unit of time (1 minute) is f = 8 times / minute. The processed data is ordinary data (timeliness coefficient λ = 0.7). Based on the dynamic threshold formula, T = 30 × 0.7 × (1 + min (8 / 10, 0.5)) = 30 × 0.7 × 1.4 = 29.4 minutes. Each time the cache item is hit, its weight value increases by 0.1. When the cache is full, the high-weight cache item is retained first. Subsequent updates to the metadata configuration file (adding the "Medical Device Business License" item type) and version upgrades to v2.2 trigger a full cleanup of the v2.1 version cache to ensure that the cached data matches the latest item list. When other staff members initiate the same query in the same component instance, if the cache is hit, the data is directly retrieved from the cache, shortening the response time.

[0066] Step 4: Build a component-based dynamic rendering module.

[0067] In the mounted hook of a Vue component, the "vueRender" configuration (rendering priority 1) is parsed, and the dynamic registration of components such as cascading selectors, dropdown selectors, and date range selectors is completed through Vue.component('gov-region-cascader', Cascader). After receiving 1.2 million records of business registration applications from the backend in the second quarter of 2024, the system determined that the data volume exceeded the threshold (1000 records) and initiated adaptive slice rendering: The performance API was used to detect that the browser's main thread idle time was 35ms, determining that 100 records would be rendered in batches. The first batch of data was rendered first, and the view was updated (displaying the application time, processing department, and completion time of the first 100 applications). The system then used `this.$nextTick(() => { render the next batch of data})` to monitor the view update completion. Subsequent batches were rendered sequentially after the main thread became idle. The entire rendering process was smooth (page frame rate remained above 55fps). When the statistics for the "Completion Time" field changed (a new completion record was added), the computed property, combined with a differentiated monitoring strategy, only refreshed the "Average Completion Time" chart data (refresh time 20ms), instead of fully re-rendering the table and chart.

[0068] Step 5: Establish a front-end and back-end data interaction adaptation module.

[0069] The data interaction adaptation module parses backend interfaces with the prefix " / graphql", identifies them as GraphQL protocols, and encapsulates the query parameters generated in step S2 into a "query + variables" structure before sending it to the government cloud interface. The backend returns XML format data (historical system data format of the government platform). The XML-JSON conversion unit traverses the DOM node tree, mapping the XML element "handleRecord" to JSON object keys, the attributes "applyTime", "deptName", and "handleDuration" to subkeys, and text nodes to values. Duplicate elements "record" are mapped to JSON arrays. After conversion, data completion is performed (if a data entry has a missing "handleDuration" field, it is padded with 0s). Finally, the standardized JSON data is bound to Vue reactive data and synchronized to the dynamic rendering module. A detailed list of processed cases is displayed in a table, the number of cases processed by each department is displayed in a bar chart, and the daily average case trend is displayed in a line chart. Exporting to Excel format is supported for government statistical filing.

[0070] Example 2

[0071] This embodiment corresponds to the method in Embodiment 1, and provides a multi-dimensional custom query and statistics method and system based on Vue. The specific implementation and innovations of each module are as follows.

[0072] Metadata-driven custom configuration module 1: Includes association matrix validation unit 11, which is used to define metadata specifications containing the "vueRender" field based on extended JSONSchema. After receiving user-defined dimension configuration parameters, it completes the data type, boundary and association validity validation through association matrix validation unit 11, and generates a standardized configuration file that can drive the lifecycle of Vue components; it supports version management of configuration files and synchronously notifies other modules when the version is updated.

[0073] Reactive parsing module 2 includes graph update unit 21, which loads standardized configuration files during the Vue component's beforeCreate lifecycle to build a directed graph-structured dimensional dependency graph. Real-time association verification is performed through depth-first traversal combined with three-level association states. Graph update unit 21 can incrementally update the dimensional dependency graph when the metadata configuration file is modified, without needing to rebuild the entire graph. This module is deeply integrated with the Vue reactive system and can trigger reactive re-validation of associated dimensions to ensure the validity of custom query conditions.

[0074] Lifecycle-Aware Caching Module 3: This module is used to build a cache pool using a composite cache key-value pair consisting of "component instance ID + custom query dimension". It associates the created hook of Vue components to initialize the cache and the beforeDestroy hook to clear the cache. It sets a dynamic time expiration threshold based on custom query frequency and configures a version change expiration mechanism. The cache threshold is dynamically adjusted through a preset algorithm to improve the cache hit rate. It can receive version update notifications from the metadata-driven custom configuration module 1 to trigger a full cache clearing.

[0075] Dynamic rendering module 4: Includes slice rendering unit 41, which is used to dynamically register custom query form components and chart components in the mounted lifecycle of Vue components based on the "vueRender" configuration; it listens for changes in custom statistical data through Vue's computed property to achieve partial refresh of chart data; when the amount of statistical data exceeds 1000 records, slice rendering unit 41 implements slice rendering based on Vue's nextTick method in batches of 100 records / batch size to avoid page lag.

[0076] Data Interaction Adaptation Module 5: Includes XML-JSON conversion unit 51, used to automatically identify the protocol type of the backend interface (RESTful / GraphQL) and encapsulate custom query request parameters; through the standardized conversion algorithm of XML-JSON conversion unit 51, it converts the heterogeneous XML / JSON data returned by the backend into a standardized JSON format that the Vue rendering module can recognize; it handles invalid data through a missing data completion strategy, and finally completes the reactive binding of the converted data with the Vue rendering module.

[0077] The system's workflow is as follows: 1) The metadata-driven custom configuration module receives user-defined parameters and generates a standardized configuration file; 2) The reactive parsing module loads the configuration file during the Vue component initialization phase, completes dimension association validation, and generates custom query parameters; 3) The lifecycle-aware caching module initializes the cache pool and manages the cache for custom query requests; 4) The data interaction adaptation module encapsulates the custom query parameters and sends them to the backend, performing format conversion and completion upon receiving the data; 5) The dynamic rendering module completes dynamic component rendering and displays custom statistical results based on standardized data. All modules collaborate through the Vue reactive bus and component lifecycle hooks to ensure the efficient and stable operation of the entire custom query and statistics process.

[0078] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0079] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0080] While the invention has been described above with reference to various embodiments, it should be understood that many changes and modifications can be made without departing from the scope of the invention. Therefore, the detailed description above is intended to be illustrative rather than restrictive, and it should be understood that the following claims (including all equivalents) are intended to define the spirit and scope of the invention. These embodiments should be understood as illustrative only and not as limiting the scope of protection of the invention. After reading the description of this invention, those skilled in the art can make various alterations or modifications to the invention, and these equivalent changes and modifications also fall within the scope defined by the claims of this invention.

Claims

1. A Vue-based multi-dimension customized query statistics method, characterized in that, Includes the following steps: S1. Metadata-Driven Configuration: Based on an extended JSON Schema, a metadata specification for multi-dimensional queries is defined. This metadata specification includes basic dimension information, association rules, query constraints, dependency weight coefficients, and the "vueRender" enhanced field. The "vueRender" enhanced field includes basic Vue component properties, dynamically registered parameters, rendering priority, cache dependency identifiers, and re-rendering trigger conditions. After receiving the dimension configuration parameters input by the user, a three-layer progressive validity check is performed through a preset dimension association matrix to generate a standardized dimension configuration file with version identifiers. The dimension association matrix is ​​a two-dimensional array structure, where the row and column indices are dimension IDs, and the matrix element values ​​are in the format of "association status - dependency weight coefficient". The association status includes 0 (not associatable), 1 (associatable), and 2 (strongly associated). S2. Reactive Condition Parsing: The standardized configuration file is loaded in the `beforeCreate` lifecycle hook of the Vue component. Dimension association rules and dependency weight coefficients are parsed to construct a dimensional dependency directed graph. A three-level association state depth-first traversal verification algorithm is used to traverse the directed graph, and real-time verification is performed in conjunction with the association states of the dimensional association matrix. The algorithm includes initializing a verification queue, performing a depth-first traversal in descending order of weight, adapting and verifying association states, and caching and reusing verification results. The values ​​and association states of each dimension are defined as Vue reactive data. When any dimension value changes, a reactive re-verification of its associated dimensions is triggered. After successful verification, standardized query request parameters are generated. S3, Lifecycle-Aware Caching: Uses "component instance ID + query dimension combination + metadata version number" as a composite key to cache query results; initializes the cache space in the Vue component's created hook, predicts the cache state in the beforeUpdate hook, and automatically clears the corresponding cache in the beforeDestroy hook; A dynamic weighted LRU caching algorithm is adopted, and a two-factor dynamic expiration strategy of "query frequency - data timeliness" is set. The dynamic expiration threshold T = T0 × λ × (1 + min (f / 10, 0.5)), where T0 is the basic expiration threshold, λ is the data timeliness coefficient, and f is the query frequency. When the metadata configuration version is updated, the global cleanup of the corresponding version cache is triggered. S4. Dynamic Component Rendering: Based on the configuration of the "vueRender" field in S1, the corresponding form components and chart components are dynamically rendered in the mounted lifecycle hook of the Vue component; changes in the core fields of statistical data are monitored through Vue's computed properties combined with a differential listening strategy to achieve partial updates of the chart component; when the data volume exceeds the threshold, batch rendering is performed based on Vue's nextTick method combined with an adaptive slice rendering strategy. S5, Data Interaction Adaptation: Identify the backend service interface protocol and encapsulate the query parameters generated by S2 into a request in the corresponding protocol format; After receiving the heterogeneous data returned by the backend, the optimized DOM node traversal and transformation algorithm is used to complete the standardized conversion from XML to JSON. Missing values ​​are handled through type adaptation and completion strategies. Finally, the data is synchronized to the S4 rendering module through Vue's reactive system.

2. The method according to claim 1, characterized in that, The dimension association matrix described in S1 is a two-dimensional array structure, where the row and column indices are both dimension IDs, and the matrix element values ​​represent the association status: 0 indicates no association, 1 indicates association, and 2 indicates strong association. For strongly associated dimension pairs, if the preceding dimension is not entered, the query operation is disabled and the user is prompted.

3. The method according to claim 1, characterized in that, The specific algorithm for the dynamic expiration strategy described in S3 is as follows: Assuming the basic expiration threshold T0 is 30 minutes and the current query frequency is f times / minute, the dynamic threshold T is calculated as follows: T = T0 × (1 + min(f / 10, 0.5)).

4. A Vue-based multi-dimensional custom query and statistics system, used to implement the method described in any one of claims 1-3, characterized in that, include: Metadata-driven configuration module: used to define metadata specifications, validate user configurations, and generate standardized configuration files; The reactive parsing module is used to load configurations, build dimensional dependency graphs, perform reactive association validations, and generate query parameters. Lifecycle-aware caching module: Used to manage query caching at the component instance level and implement dynamic expiration strategies; Dynamic rendering module: Used to dynamically render UI components according to configuration and optimize rendering performance for large amounts of data; Data interaction adaptation module: used to adapt to different backend protocols, convert data formats and fill in missing values.

5. The system according to claim 4, characterized in that, The responsive parsing module also includes a graph update unit. When the metadata configuration file version is updated, the graph update unit can incrementally update the existing dimensional dependency graph without having to rebuild it completely.

Images