A project management system based on the Vue Router framework and its page navigation method

By using a project management system based on the Vue Router framework, the problem of insufficient dynamic monitoring in digital verification tools was solved, the reliability of data storage and the refinement of project management were achieved, and development efficiency and team collaboration effectiveness were improved.

CN121255271BActive Publication Date: 2026-04-03SHANGHAI ORIENTAL COMPUTER TECHNOLOGY CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2025-12-08
Publication Date
2026-04-03

AI Technical Summary

Technical Problem

Existing digital verification tools lack dynamic monitoring and intelligent navigation capabilities, resulting in low development efficiency, unstable data storage, difficulties in team collaboration, lack of visualization of verification progress and risks, insufficient quality control, inconsistent management of scheduled regression tasks, and impact on project management effectiveness.

Method used

The project management system is built on the Vue Router framework, including the Vue Router system module, the regression master table page module, the scheduled task management module, and the regression information interaction module. It supports custom regression chart display, page navigation and data interaction, and improves development efficiency and data reliability through component-based design.

Benefits of technology

It has achieved reliable data storage, efficient problem response, clear optimization direction, minimized collaboration costs, visualized project management, precise resource scheduling, and the accumulation of team capabilities, thereby improving the automation and refinement of project management.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121255271B_ABST
    Figure CN121255271B_ABST
Patent Text Reader

Abstract

This invention discloses a project management system based on the Vue Router framework and its page redirection method, comprising: a Vue Router system module, used to receive routing requests initiated by the Vue web service, parse the web path and parameters, and implement page redirection based on the parsing results; supporting configuration of multiple report paths and multiple trend chart paths, correspondingly displaying the latest regression reports and coverage trend charts of all modules in the project; a regression main table page module, responding to the parameters passed by the Vue Router system module, loading the default regression main table page when no parameters are provided, and loading the regression main table page that matches the search parameters when regression search parameters are provided; a scheduled task management module, accessed through the Vue Router system module, supporting pass-through page configuration for deleting crontab scheduled tasks and summarizing report email lists, and sending requests to the backend to add or delete scheduled tasks after receiving user input; and a regression information interaction module, responding to click operations on the regression main table page.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention belongs to the field of data visualization technology, specifically the field of digital verification. It addresses the common lack of dynamic monitoring and intelligent navigation capabilities in current digital chip verification tools by providing a project management system based on the Vue Router framework that supports custom regression chart display and its page navigation method. Background Technology

[0002] In the field of digital verification and project management, the existing technical system has several significant shortcomings, which severely restrict development efficiency, data reliability, and the level of management sophistication, as follows:

[0003] I. The data presentation and management mechanisms are cumbersome and inefficient.

[0004] In the field of digital verification, developers currently rely on extremely primitive and cumbersome methods to obtain simulation reports and regression results. They primarily depend on command-line output to view results or examining fragmented module coverage data file by file. Integrating overall project data requires manually executing complex commands for statistical analysis, while in-depth analysis of detailed coverage parameters for specific modules necessitates using specialized tools (such as Verdi) to open the corresponding files. Data presentation lacks systematicity and intuitiveness, remaining largely confined to local text file records.

[0005] II. Data storage has serious defects.

[0006] Coverage data is highly coupled with project files and lacks independent storage and backup mechanisms. As projects iterate or files are replaced, data is easily lost, making it difficult to meet the backtracking and auditing needs throughout the project lifecycle. Meanwhile, validation regression data is scattered across various test nodes. Due to the lack of a unified data model and standardized storage specifications, the collection and aggregation of test results rely entirely on manual operations. This is not only inefficient but also prone to omissions and mismatches during data processing and merging, severely impacting data accuracy and usability. This has become a key bottleneck restricting the automation of development processes and the refinement of quality control.

[0007] III. Limitations in Team Collaboration and Progress Management

[0008] When tracking project coverage trends, the team lacked automated tools, requiring members to manually record data after each task and expend significant time creating analytical charts. This not only consumed valuable time but also made data inaccurate due to human error. Project progress monitoring was also significantly limited; team members could only access isolated data from single regressions, making it difficult to quickly retrieve past data and analyze project progress trends and predict potential risks through historical data comparison and integration. Furthermore, the lack of effective data management and reuse mechanisms resulted in historical data being scattered and idle, failing to be transformed into reusable knowledge assets and providing no experience for subsequent projects, thus hindering the continuous improvement of the team's knowledge base and capabilities.

[0009] IV. Lack of visualization of verification progress and risks

[0010] Current digital chip verification tools generally lack dynamic monitoring and intelligent navigation capabilities: on the one hand, they cannot present the overall progress of verification tasks in real time (such as test case execution percentage and resource consumption curves), and it is even more difficult to mark the distribution of risk points (such as high-frequency error modules and resource bottleneck areas) through visual graphs. This causes developers to manually traverse massive log files when troubleshooting problems, and the average time to locate a single problem exceeds 1 hour. On the other hand, there is a lack of a unified verification resource indexing mechanism. For key information such as waveform files, log records, and rerun instructions, manual retrieval of multi-level directories is still required. This fails to build a click-through access link, resulting in a reduction of development efficiency by about 60%.

[0011] V. Significant deficiencies exist in the quality control system.

[0012] As projects become increasingly complex, managers not only need to grasp quality data for individual modules, subsystems, or IPs, but also urgently require comprehensive information across multiple levels and dimensions. However, no mature product on the market can automatically generate quality reports for all project modules, making the process of obtaining overall project quality information extremely cumbersome. Managers often need to manually collect data by questioning each module's responsible person, and then manually summarize and analyze it to form a summary report. This traditional model not only consumes a significant amount of time and manpower but is also prone to information distortion due to data transmission delays and inconsistent statistical standards, severely impacting the timeliness and accuracy of project decisions and hindering the improvement and refinement of project management efficiency.

[0013] VI. There are blind spots in the management of scheduled regression tasks.

[0014] In current development scenarios, scheduled regression tasks often rely on distributed tools such as crontab and Windows Task Scheduler, which present significant management problems: First, the lack of a unified task scheduling platform makes it difficult to coordinate and plan the regression strategies (execution cycle, triggering conditions) of each module, often resulting in resource contention or task conflicts; second, the lack of a result feedback mechanism makes it impossible to obtain the task execution status (success / failure / abnormality) and key indicators (pass rate, time consumption) in real time, requiring developers to frequently check logs manually; third, the lack of a visual task dashboard makes it impossible to intuitively present comparative analysis of regression results from multiple modules, making it difficult to support management needs. Summary of the Invention

[0015] The purpose of this invention is to provide a project management system based on the Vue Router framework and its page navigation method, which supports custom regression chart display and improves development efficiency, data reliability and management sophistication.

[0016] A project management system based on the Vue Router framework, comprising:

[0017] The Vue Router system module is used to receive routing requests initiated by Vue web services, parse web page paths and parameters, and implement page redirection based on the parsing results; it supports configuring multiple report paths and multiple trend chart paths, and the page displays the latest regression reports and coverage trend charts of all modules in the project;

[0018] The main page module responds to the parameters passed by the Vue Router system module. When there are no parameters, it loads the default main page; when there are regression search parameters, it loads the main page that matches the search parameters.

[0019] The scheduled task management module is accessed through the Vue Router system module. It supports passing through the page to configure and delete crontab scheduled tasks, summarize and report email lists, and send requests to the backend to add or delete scheduled tasks after receiving user input.

[0020] The regression information interaction module responds to click operations on the regression main table page. Clicking the "report" button for a single regression will redirect to the corresponding regression report page; clicking the number of regression test cases will redirect to the test case table page to display test case information; after setting time conditions and project module parameters, it will redirect to the key coverage indicator trend chart page.

[0021] Optionally, the Vue Router system module supports parsing the path "category with parameters + id parameter" to trigger the regression information interaction module to load the regression information (including regression mode test case information, regression report, and regression trend chart) corresponding to the id.

[0022] Optionally, the scheduled task management module is connected to the Vue Router system module for collaboration, and realizes "crontab corresponding path, crontab corresponding route jump" through route jump, supporting users to visually configure the scheduled task execution logic.

[0023] Optionally, the regression main table page module includes a parameter judgment logic unit, which automatically switches the loading logic between "default regression main table page / regression main table page matching search parameters" based on the parameters passed by the Vue Router system module.

[0024] Optionally, the regression information interaction module supports multi-dimensional interactive navigation: based on a single regression data entry on the main regression table page, it links to the report page, use case table page, and trend chart page, constructing a complete data link from regression overview to details.

[0025] The present invention also provides a page redirection method based on the above system, comprising the following steps:

[0026] Step 1: The Vue Router system module receives routing requests from the Vue web service and parses the path and parameters;

[0027] Step 2: Based on the parsing results, if it is a scheduled task path, jump to the scheduled task management module to perform task addition, deletion, and configuration operations; if it is a regression main table path, load the corresponding regression main table page according to the parameters.

[0028] Step 3: Trigger a click operation on the main regression table page, and jump to the regression report, test case table, and trend chart pages through the Vue Router system module, and pass the corresponding regression ID and parameter information;

[0029] Step 4: The scheduled task management module receives user operations through the Vue Router system module and sends requests to the backend to complete the addition or deletion of scheduled tasks.

[0030] Optionally, in step 1, "parse path and parameters" can be used to identify multiple report paths and multiple trend chart paths, and accurately load the latest regression report and coverage trend chart of the project module.

[0031] Optionally, step 3, "click to trigger redirection", includes: based on the data in the main form, redirecting to three types of pages (reports, use case tables, and trend charts), and the trend chart page supports dynamic drawing based on user-defined time conditions and project module parameters.

[0032] Compared with the prior art, the beneficial effects achieved by the present invention are as follows:

[0033] 1. Reliable data storage: By solidifying key regression data through a unified indicator storage mechanism and combining it with timed email archiving, the entire lifecycle of data can be traced back and is easy to audit.

[0034] 2. Improved efficiency in problem response: Real-time daily reports accurately present the distribution of failed test cases and defects, shortening the time for problem localization and avoiding the accumulation of problems during iteration.

[0035] 3. Optimization direction clarified: Historical trend charts reveal long-term hidden dangers (such as low coverage modules and high-frequency defect types), providing targeted guidance for test case supplementation and underlying design optimization.

[0036] 4. Minimize collaboration costs: Standardized reports replace fragmented communication, allowing developers to independently obtain module status and focus on problem fixing rather than progress inquiries.

[0037] 5. Visualized Project Management: Real-time monitoring of key indicators to assess project health, with risk points and bottlenecks presented intuitively to support dynamic decision-making by managers.

[0038] 6. Precise resource allocation: Based on module risk rating and trend prediction, manpower and resources are dynamically allocated to prioritize the overcoming of high-risk bottlenecks and optimize overall efficiency.

[0039] 7. Team capability accumulation: Historical data forms a knowledge base, which helps in cross-project risk prediction and process review, and establishes a transparent accountability mechanism and a standardized information synchronization system.

[0040] 8. Quantifiable verification effectiveness: By comparing coverage and resource overhead, the effectiveness of verification process optimization can be objectively evaluated, and systemic risks (such as use case blind spots) can be identified early. Attached Figure Description

[0041] Figure 1 This is a flowchart of the project management system of the present invention.

[0042] Figure 2 This is a screenshot of the interface of the project management system of this invention.

[0043] Figure 3 A data granularity matching interface for a project management system according to an embodiment of the present invention.

[0044] Figure 4 This is a trend chart information interface according to an embodiment of the present invention. Detailed Implementation

[0045] The technical solution of the present invention will be further described below with reference to the accompanying drawings.

[0046] This invention focuses on leveraging the Vue Router framework to achieve efficient reuse and flexible interaction of components in a project management system. Through configurable collapsible panel containers and globally reusable components, it improves development efficiency and user experience, making it suitable for project management web applications requiring dynamic component rendering and multi-component interaction. The system is built on the VueRouter framework and encapsulates different functional modules into reusable components using a component-based development approach. Core components include CollapsibleContainer (a reusable collapsible panel container), BackToTopButton (a globally reusable back-to-top button), and business components (such as DataTable for data tables and ChartComponent for statistical charts). Parent components drive the rendering and interaction of child components through configuration data, and communication between components is achieved through an event mechanism. The overall architecture is clear, facilitating expansion and maintenance.

[0047] For example, a project management system based on the Vue Router framework that supports custom regression chart display includes: a front-end component. This front-end component employs a component reuse mechanism, dynamically rendering different types of panel components by defining a configuration array containing component identifiers, initialization parameters, and collapsible attributes, thereby improving component reusability and reducing repetitive code. In this component reuse mechanism, parameter passing between parent and child components includes: the parent component passing initialization information to the child component via initialization parameters; the child component triggering a custom event carrying parameters to report data updates to the parent component; and the parent component receiving and processing the parameters through a unified event handling function. As shown in Figure 1, different types of panel components are dynamically rendered by defining a configuration array (panelsConfig) containing fields such as component, props, and collapsible. Parameter passing methods: Parent → Child: Initialization parameters are passed via the props field (e.g., { type: 'line'}); Child → Parent: The child component triggers a custom event (e.g., panelEvent) carrying parameters (payload), and the parent component receives the parameters and executes the corresponding logic through a unified event handling function (handlePanelEvent). This design increases component reusability by 50% and reduces 600 lines of duplicate code. It also enables the simultaneous display of reports and trend charts for specific sections across multiple panels.

[0048] The backend server, based on requests from our frontend components (e.g., specifying a user, project, module, or time range), locates the specific JSON file by folder name and pre-processes this data before returning it to the frontend webpage. This allows the frontend to clearly view historical regression data, total pass rate, and other information. In the chip verification field, regression information refers to structured information defined for tracking, managing, and analyzing the regression testing process. Regression data is a series of JSON-formatted messages; parsing the JSON allows extraction of the corresponding regression information, including various metrics. Specifically, because of the coverage information for each mode, regression trend charts can be directly generated. The Python script will then organize the qualifying data by time and plot a line graph showing the coverage and total regression over time. The core purpose of obtaining this information is to verify that design changes or environment updates have not introduced new defects, while ensuring that existing functionality remains correct. Therefore, regression information must accurately reflect the background, scope, execution process, and results of regression testing. This enables the verification team to efficiently assess the impact of modifications, locate problems, and control the verification progress.

[0049] The front-end components are built on the Vue 3 component-based architecture and include the Vue Router system module. This module receives routing requests from Vue web services, parses webpage paths and parameters, and redirects pages based on the parsing results. When a user enters a webpage, such as www.vue.com, the path corresponds to the base path. If the user enters www.vue.com / test, the path here corresponds to the path "test". Similarly, if a " / " is followed by a string, that string represents the path. The Vue Router system module supports parsing paths with "category with parameters + id parameter," triggering the regression information interaction module to load the regression information corresponding to the id.

[0050] The Vue Router system module supports configuring multiple report paths and multiple trend chart paths, with each page displaying the latest regression reports and coverage trend charts for all modules in the project. The Vue Router system module includes a regression master table submodule, a regression test case table submodule, a report submodule, a trend chart submodule, and a dynamic report stitching submodule. The dynamic report stitching submodule allows users to fine-grained filter regression information and customize the display format, enabling free combination of reports and trend charts. The data granularity of the regression master table submodule matches the project module level, displaying all information from the regression test case table submodule, report submodule, trend chart submodule, scheduled task module, and dynamic report stitching submodule during the regression process. The regression test case table submodule presents detailed execution information for all test cases in a single regression. The report submodule generates a summary report for each regression, visually presenting the regression results. The trend chart submodule draws visual charts such as key indicator trend line charts and test case execution result pie charts.

[0051] The front-end components also include a regression main table page module. This module contains a parameter judgment logic unit that automatically switches between loading the "default regression main table page" and the "regression main table page matching the search parameters" based on the parameters passed by the Vue Router system module. The regression main table page module responds to parameters passed by the Vue Router system module; if no parameters are provided, it loads the default regression main table page; if regression search parameters are provided, it loads the regression main table page matching the search parameters. For example, when accessing a path like www.vue.com / test?user_name=user&time=20250917, two parameters are provided: user_name and time. This eliminates the need to enter the parameters after opening the webpage, as the parameters are already parsed during URL access.

[0052] The front-end components also include a scheduled task management module, which connects and collaborates with the Vue Router system module. Through route navigation, it enables "crontab corresponding path, crontab corresponding route navigation," supporting user-visual configuration of scheduled task execution logic. Accessed through the Vue Router system module, it supports passing through page configurations to delete crontab scheduled tasks, summarize and report email lists, and send requests to the backend to add or delete scheduled tasks after receiving user input. The scheduled task module is a Vue-based visual task orchestration interface, allowing users to modify the execution time and content of scheduled tasks through input operations, as well as configure the email notification list after task completion.

[0053] The front-end components also include a regression information interaction module, which responds to clicks on the regression master table page. Clicking the "report" button on a single regression record redirects to the corresponding regression report page; clicking the number of regression test cases redirects to the test case table page displaying test case information; and setting time conditions and project module parameters redirects to the key coverage metric trend chart page. This regression information interaction module supports multi-dimensional interactive navigation: based on a single regression data record on the regression master table page, it links to the report page, test case table page, and trend chart page, constructing a complete data link from regression overview to details.

[0054] The front-end components also include a routing and state management module. This module uses Vue Router to implement multi-level nested route configuration and webpage address parameter parsing. Combined with Pinia state management, it establishes a complete data tracing chain from project overview to module reports and individual use case details. The routing and state management module optimizes performance through a route lazy loading mechanism and uses props parameter passing to achieve parameter interaction between the routing page and components. The webpage address parameter parsing supports directly locating specific regression or regression data within a specified time range through webpage addresses with parameters. Specifically, Vue Router is installed via npm to provide basic support for routing functionality. The core routing rules are defined in the `router / index.ts` file, including dynamic paths (`:resource`), component lazy loading methods, and props parameter passing mechanisms, while also supporting nested route layouts. In the target component, a route instance is created using the `useRoute` hook to extract query parameters (such as `project_name`) from the URL. The parsed parameters are assigned to filter conditions (such as `newFilter`), so that the preset parameter range is automatically applied when the page loads, achieving accurate data location. By using multiple components, a seamless navigation process is achieved within a single route page. The process is as follows: configure and define rendering rules → container component dynamic rendering → child component event notification → parent component unified response → global component independent functionality. This achieves "configurable, easily extensible, and loosely coupled" component reuse and interaction design.

[0055] The front-end component also includes a back-end interaction module, used to interact with back-end services deployed on the server cluster. This module converts the crontab task information set in the scheduled task module into execution commands and sends them to the back-end, and receives the task execution results and key performance indicator data returned by the back-end. The back-end interaction module also stores the critical path of the regression data, log error information, and regression indicators in a local webpage-related folder, and, according to the scheduled task configuration, sends regression result reports and trend charts to designated R&D personnel and supervisors via email.

[0056] During application, the backend server stores regression data. Taking regression information JSON as an example, the regression information includes: regression ID (unique, ensuring traceability), regression project name, regression module name, regression mode name, regression username, and regression trigger time. The combination of these information uniquely identifies a regression. In addition to this identifying information, there is specific information about the regression, such as regression status (indicating whether it was completed successfully, whether the regression is valid), the total number of test cases included in the regression, the number of test cases that passed, the number of test cases that were completed, the number of test cases that were not yet completed, the number of test cases waiting to be run, the number of test cases waiting to be rerun, the number of test cases running, the number of suspended test cases, the number of test cases with warnings, the number of failed test cases, the number of test cases that timed out (which can be specified before execution; simulations exceeding a certain time are defined as timeout test cases), the number of test cases in other states, and the number of test cases rerun. The regression execution time, the start time, the end time, the regression script address used, the hostname of the initiating regression, the original path of the project initiating the regression, the actual execution path of the regression, the test list path, the server cluster location, etc. In addition, it includes information on each regression pattern. Each pattern includes the regression pattern name, the total number of test cases for that pattern, the number of passes, the number of warnings, the pass rate, line coverage, code coverage, condition coverage, flip-flop coverage, state machine coverage, assertion coverage, URG score rate, URG group coverage, plan group coverage, plan assertion coverage, test point coverage, branch coverage, compilation commands, URG commands, etc. Each pattern is followed by information on all test cases within that regression pattern. Each test case includes the regression pattern, test case name, random seed number, test case status, simulation start time, simulation end time, CPU time used, duration, simulation time, corresponding scheduling system job number, and the host running the test case.

[0057] The regression data is processed directly by the Python script after regression execution, and archived to a fixed regression folder on a fixed server. This unique archiving of regression information facilitates subsequent information retrieval by the Python backend server. The generation of various metrics is already fully present in the regression information, such as the total number of test cases, pass count, warning count, pass rate, line coverage, code coverage, condition coverage, flip-flop coverage, state machine coverage, assertion coverage, URG score rate, URG group coverage, plan group coverage, plan assertion coverage, test point coverage, branch coverage, compilation commands, and URG commands. The system can already retrieve full coverage information for a specific regression from the JSON file in the archived folder. To generate reports, test case tables, and trend charts, it only needs to read from this regression information and display the information through the corresponding modules.

[0058] Specifically, a report refers to a summary of a specific regression test for a specific module within a project, based on the display requirements of the front-end webpage. Since humans don't focus on too many details at a glance, but only want to obtain specific data from this regression, such as the test cases, the total number of runs for each test case, the number of successful runs, their pass rates, and regression coverage, the back-end's role is to summarize the data into a report, allowing a clear overview of the execution status.

[0059] The example table refers to reading all the test cases of a certain pattern stored in JSON and then returning them to the web page for display.

[0060] The trend chart utilizes the ECharts component on the front-end webpage. The back-end Python code collects and organizes regression data from the executed project modules and users within a specific timeframe. This data is then formatted and populated into an ECharts table, ordered from lowest to highest time. Returning this information to the front-end webpage displays line charts showing the various regression data metrics for a project within a given timeframe. When integrating and comparing with historical data, the trend chart visualizes all the data. On one hand, developers can intuitively see the convergence of coverage, especially identifying periods of rapid and slow convergence. On the other hand, the line chart itself reflects the convergence speed; the curvature of the line chart allows for calculation of approximately how long it will take for the project to achieve full coverage convergence. In essence, a webpage initiates a query for a specific module within a project over a specific time range. The webpage displays a list of results matching the query criteria. Further, using a trend charting function, the webpage sends a request to a Python backend, which returns time coverage data in ECharts format. The frontend then generates a line chart based on this data. Developers can directly determine the coverage convergence trend using the line chart. The software calculates how long it will take for the coverage to fully converge based on the slopes of the latest and second-latest regression coverage data, thus determining the project's expected completion time for coverage convergence and identifying any potential risks. If a project timeline is set, the software compares the expected completion time with the project timeline and provides a conclusion on whether risks exist.

[0061] This invention also provides a page redirection method for a project management system based on the Vue Router framework, comprising the following steps:

[0062] Step 1: The Vue Router system module receives routing requests from Vue web services and parses the path and parameters. In Step 1, "parse path and parameters" supports the identification of multiple report paths and multiple trend chart paths, and accurately loads the latest regression reports and coverage trend charts of the project modules.

[0063] Step 2: Based on the parsing results, if it is a scheduled task path, jump to the scheduled task management module to perform task addition, deletion, and configuration operations; if it is a regression main table path, load the corresponding regression main table page according to the parameters.

[0064] Step 3: Trigger a click operation on the regression master table page to jump to the regression report, use case table, and trend chart pages through the Vue Router system module, and pass the corresponding regression ID and parameter information; Step 3 "click triggers jump" includes: based on the data of the regression master table, jump to 3 types of pages, namely report, use case table, and trend chart, and the trend chart page supports dynamic drawing according to the user-set time conditions and project module parameters.

[0065] Step 4: The scheduled task management module receives user operations through the Vue Router system module and sends requests to the backend to complete the addition or deletion of scheduled tasks.

[0066] The foregoing descriptions and embodiments are provided to enable those skilled in the art to understand and apply the present invention. It will be apparent to those skilled in the art that various modifications can be easily made to these contents, and the general principles described herein can be applied to other embodiments without creative effort. Therefore, the present invention is not limited to the foregoing descriptions and embodiments. Improvements and modifications made by those skilled in the art based on the disclosure of the present invention without departing from its scope should be within the protection scope of the present invention.

Claims

1. A project management system based on the Vue Router framework, characterized in that, include: The Vue Router system module is used to receive routing requests initiated by Vue web services, parse the web page path and parameters, and implement page redirection based on the parsing results. It supports configuring multiple report paths and multiple trend chart paths, with each page displaying the latest regression reports and coverage trend charts for all modules in the project. The Vue Router system module includes a regression master table submodule, a regression test case table submodule, a report submodule, a trend chart submodule, and a dynamic report stitching submodule. The dynamic report stitching submodule allows users to fine-grained filter regression information and customize the display format, enabling free combination of reports and trend charts. The data granularity of the regression master table submodule matches the project module level, displaying all information from the regression test case table submodule, report submodule, trend chart submodule, scheduled task module, and dynamic report stitching submodule during the regression process. The regression test case table submodule presents detailed execution information for all test cases in a single regression. The report submodule generates a summary report for each regression, visually presenting the regression results. The trend chart submodule draws line charts of key indicator trends and pie charts visualizing test case execution results. The main page module responds to the parameters passed by the Vue Router system module. When there are no parameters, it loads the default main page; when there are regression search parameters, it loads the main page that matches the search parameters. The scheduled task management module is accessed through the Vue Router system module. It supports passing through the page to configure and delete crontab scheduled tasks, summarize and report email lists, and send requests to the backend to add or delete scheduled tasks after receiving user input. The routing and state management module uses Vue Router to implement multi-level nested route configuration and webpage address parameter parsing. Combined with Pinia state management, it establishes a complete data tracing link from project overview to module reports and individual use case details. The routing and state management module optimizes performance through a route lazy loading mechanism and uses props parameter passing to realize parameter interaction between routing pages and components. Webpage address parameter parsing supports directly locating specific regression or regression data within a specified time range through webpage addresses with parameters. The regression information interaction module responds to clicks on the regression main table page. Clicking the single regression report button redirects to the corresponding regression report page; clicking the number of regression test cases redirects to the test case table page to display test case information; after setting time conditions and project module parameters, it redirects to the key coverage indicator trend chart page.

2. The project management system based on the Vue Router framework according to claim 1, characterized in that, The VueRouter system module supports parsing categories with parameters and paths with ID parameters, triggering the regression information interaction module to load the regression information corresponding to the ID.

3. The project management system based on the Vue Router framework according to claim 1, characterized in that, The scheduled task management module is connected to the Vue Router system module for collaboration. It enables crontab path and crontab route jump through route redirection, and supports users to visually configure the scheduled task execution logic.

4. The project management system based on the Vue Router framework according to claim 1, characterized in that, The regression main table page module includes a parameter judgment logic unit. Based on the parameters passed by the Vue Router system module, the parameter judgment logic unit automatically switches between the loading logic of the default regression main table page and the regression main table page that matches the search parameters.

5. The project management system based on the Vue Router framework according to claim 1, characterized in that, The regression information interaction module supports multi-dimensional interactive navigation: based on a single regression data entry on the main regression table page, it links to the report page, use case table page, and trend chart page, constructing a complete data link from regression overview to details.

6. A page navigation method for a project management system based on the Vue Router framework according to any one of claims 1 to 5, characterized in that, Includes the following steps: Step 1: The Vue Router system module is used to receive routing requests from Vue web services and parse the path and parameters; Step 2: Based on the parsing results, if it is a scheduled task path, jump to the scheduled task management module to perform task addition, deletion, and configuration operations; if it is a regression main table path, load the corresponding regression main table page according to the parameters. Step 3: Trigger a click operation on the main regression table page, and jump to the regression report, test case table, and trend chart pages through the Vue Router system module, and pass the corresponding regression ID and parameter information; Step 4: The scheduled task management module receives user operations through the Vue Router system module and sends requests to the backend to complete the addition or deletion of scheduled tasks.

7. The page redirection method according to claim 6, characterized in that, Step 1 parses the path and parameters to support the identification of multiple report paths and multiple trend chart paths, and accurately loads the latest regression report and coverage trend chart of the project module.

8. The page redirection method according to claim 6, characterized in that, Step 3 involves clicking to trigger a redirect, which includes redirecting to three types of pages based on the data in the main form of the regression test. These three types of pages are reports, use case tables, and trend charts. The trend chart page can be dynamically drawn based on user-defined time conditions and project module parameters.

Citation Information

Patent Citations

  • Internet data real-time downloading system based on configuration foreground

    CN120915768A