A report development method, a report development system, a storage medium, and a processor

Abstract

This application discloses a report development method, a report development system, a storage medium, and a processor. In this application, the JS file of the report style code template is read from the server based on the storage path of the report style code template input by the target user. The JS file is rendered in the preview area to generate the report style template. A report configuration request is received. Vue.js's reactive data binding mechanism is used to associate each report style configuration item with the page element attributes in the report style template. When the target user modifies the report style configuration item, the style and / or data of the report style template are automatically updated based on the change information. The updated report style template is then rendered in the preview area to generate the target report. This application utilizes Vue.js's reactive data binding mechanism to significantly improve the development and iteration efficiency of reports while fully preserving the highly visual and customizable capabilities of reports.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a report development method, a report development system, a storage medium, and a processor. Background Technology

[0002] As enterprises deepen their digital transformation, embedded business management reports in applications (Apps) have become a key tool supporting business decision-making. Currently, the industry mainly relies on two technical paths to achieve embedded data analysis reports in Apps: one is fully customized development, where front-end engineers independently write complete front-end page code for each report; the other is directly integrating standard chart components provided by third-party business intelligence platforms (such as Guanyuan BI client).

[0003] However, both of these technical approaches struggle to achieve an effective balance between development efficiency, system flexibility, and customized business needs in practical applications. Specifically: On the one hand, under a fully customized development model, each report, regardless of its complexity or similarity in style, requires independent development throughout the entire process, from front-end interface construction and interaction logic implementation to data interface integration, and is then released along with the main App code. This model leads to a large amount of repetitive coding and testing work, which not only consumes a lot of manpower and time but also easily causes inconsistencies in user experience between different reports. More seriously, once the reports are launched, if the business side requests optimizations such as adding or removing fields, adjusting chart styles, or changing data dimensions, regardless of the size of the change, the underlying front-end code of the App must be modified and a fixed release window must be waited for it to take effect. This causes it to lag far behind the business response speed and severely restricts the agility of data-driven decision-making.

[0004] On the other hand, while directly integrating standard BI chart components can improve development efficiency to some extent, these components typically only support preset chart types and interactive behaviors, failing to meet the deep customization needs for visualization effects in business scenarios. For example, business users often require clickable up and down arrows next to fields to support dynamic sorting, or to jump to related detail pages when clicking on specific data items, with the jumpable fields highlighted to guide user operations. These fine-grained customizations involving interactive logic and visual styles are often impossible to achieve in standard BI components, resulting in a significant gap between the final report experience and business expectations.

[0005] Therefore, there is an urgent need for an efficient report development methodology that can significantly improve the efficiency of report development and iteration while fully preserving the high degree of visualization and customization capabilities of reports, thereby comprehensively meeting the business's overall needs for reports in terms of development efficiency, configuration flexibility, and personalized visualization. Summary of the Invention

[0006] To address the aforementioned issues, this application provides a report development method, a report development system, a storage medium, and a processor. The aim is to significantly improve the efficiency of report development and iteration while fully preserving the highly visual and customizable capabilities of reports, thereby comprehensively meeting the business's overall needs for reports in terms of development efficiency, configuration flexibility, and personalized visualization.

[0007] The embodiments of this application disclose the following technical solutions: A first aspect of this application provides a report development method, the method comprising: The storage path of the report style code template input by the target user is received; the report style code template is a responsive report component template based on Vue.js. Based on the storage path, the JS file corresponding to the report style code template is read from the server, and the JS file is rendered in the preview area of ​​the client to generate the corresponding report style template. Receive a report configuration request initiated by the target user; the report configuration request includes multiple report style configuration items; Using the reactive data binding mechanism of Vue.js, each of the report style configuration items is associated with the corresponding page element attributes in the report style template; When the target user is detected to have modified the report style configuration item, the style and / or data of the report style template are automatically updated based on the change information of the report style configuration item, and the updated report style template is rendered in the preview area to generate the target report.

[0008] In an optional implementation, the JS file includes Vue component options, template strings, and template logic functions; the Vue component is used to declare reactive report style objects and report data, and the template string embeds a v-bind directive, which is used to establish a reactive connection between each of the report style configuration items and the report style template.

[0009] In an optional implementation, the step of using Vue.js's reactive data binding mechanism to associate each of the report style configuration items with the corresponding page element attributes in the report style template includes: In response to the v-bind directive, each of the report style configuration items is associated with the corresponding page element attributes in the report style template.

[0010] In an optional implementation, before receiving the storage path of the report style code template input by the target user, the report development method further includes: Based on the Vue.js reactive system, code snippets conforming to the Vue reactive specification are written into the JS file of the report style code template to configure the report style code template as a report component template with Vue.js reactive data binding mechanism; The configured JS file is stored in the storage area of ​​the server.

[0011] In an optional implementation, the report style configuration items include report field configuration items, report style configuration items, and report color configuration items.

[0012] In a second aspect, this application provides a report development system, which includes a server and a BI client; the BI client includes a first receiving module, a template reading module, a second receiving module, a binding module, and an update module. The server-side is used to write code snippets conforming to the Vue reactivity specification into the JS file of the report style code template based on the Vue.js reactivity system, so as to configure the report style code template as a report component template with Vue.js reactivity data binding mechanism, and store the configured JS file in the storage area of ​​the server. The first receiving module is used to receive the storage path of the report style code template input by the target user; the report style code template is a responsive report component template based on Vue.js. The template reading module is used to send a template reading request to the server according to the storage path, so as to read the JS file corresponding to the report style code template from the memory area of ​​the server, and render the JS file in the preview area of ​​the client to generate the corresponding report style template. The second receiving module is used to receive a report configuration request initiated by the target user; the report configuration request includes multiple report style configuration items; The binding module is used to associate each of the report style configuration items with the corresponding page element attributes in the report style template using the reactive data binding mechanism of Vue.js; The update module is used to automatically update the style and / or data of the report style template based on the change information of the report style configuration item when the target user is detected to have modified the report style configuration item, and to render the updated report style template in the preview area to generate the target report.

[0013] In an optional implementation, the JS file includes Vue component options, template strings, and template logic functions; the Vue component is used to declare reactive report style objects and report data, and the template string embeds a v-bind directive, which is used to establish a reactive connection between each of the report style configuration items and the report style template.

[0014] In the optional implementation, the binding module includes: The binding unit is used to respond to the v-bind instruction and associate each of the report style configuration items with the corresponding page element attributes in the report style template.

[0015] In a third aspect, this application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the aforementioned report development method.

[0016] In a fourth aspect, this application provides a processor for running a computer program, which executes the aforementioned report development method during runtime.

[0017] Compared with the prior art, this application has the following beneficial effects: In this technical solution, the storage path of the report style code template input by the target user is received first. This report style code template is a reusable Vue.js responsive report component template that abstracts the front-end structure of the report, enabling one-time development and multiple reuses. This fundamentally avoids the problem of each report requiring independent page code writing in the traditional model. At the same time, the componentization and responsiveness of Vue.js provide a technical foundation for subsequent dynamic configuration and real-time updates, which not only improves the level of development standardization but also retains a high degree of visual customization potential. Secondly, the JS file corresponding to the report style code template is read from the server based on the storage path, and the JS file is rendered in the preview area of ​​the client to generate the corresponding report style template. This decouples the report template from the main application package, allowing business personnel to intuitively view the template effect on the client without hardcoding the report into the client, which greatly shortens the template design to deployment cycle. Then, it receives report configuration requests initiated by the target user. These requests include multiple report style configuration items, allowing the target user to complete most of the report definition work independently (such as sorting arrows, jump highlights, and other personalized requirements), significantly reducing the threshold for report customization. Next, it utilizes Vue.js's reactive data binding mechanism to associate each report style configuration item with the corresponding page element attributes in the report style template. By leveraging Vue.js's built-in reactive system, it automatically establishes binding relationships between configuration items and template UI elements, enabling report style updates without manual DOM manipulation or writing update logic. This provides key technical support for flexible configuration and efficient development. Finally, when it detects that the target user has modified a report style configuration item, it automatically updates the style and / or data of the report style template based on the change information, and renders the updated report style template in the preview area to generate the target report. This significantly improves the development and iteration efficiency of reports while fully preserving their high level of visual customization capabilities, thus comprehensively meeting the business's overall needs for reports in terms of development efficiency, configuration flexibility, and personalized visualization. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the embodiments of this application 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 some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 A flowchart illustrating a report development method provided in this application embodiment; Figure 2 A schematic diagram of a client display page provided in an embodiment of this application; Figure 3 This is a schematic diagram of the structure of a report development system provided in an embodiment of this application. Detailed Implementation

[0020] As described above, the industry currently relies on two main technical approaches to implement embedded data analysis reports in apps: one is fully customized development, where front-end engineers independently write complete front-end page code for each report; the other is directly integrating standard chart components provided by third-party business intelligence platforms (such as Guanyuan BI client).

[0021] However, both of these technical approaches struggle to achieve an effective balance between development efficiency, system flexibility, and customized business needs in practical applications. Specifically: On the one hand, under a fully customized development model, each report, regardless of its complexity or similarity in style, requires independent development throughout the entire process, from front-end interface construction and interaction logic implementation to data interface integration, and is then released along with the main App code. This model leads to a large amount of repetitive coding and testing work, which not only consumes a lot of manpower and time but also easily causes inconsistencies in user experience between different reports. More seriously, once the reports are launched, if the business side requests optimizations such as adding or removing fields, adjusting chart styles, or changing data dimensions, regardless of the size of the change, the underlying front-end code of the App must be modified and a fixed release window must be waited for it to take effect. This causes it to lag far behind the business response speed and severely restricts the agility of data-driven decision-making.

[0022] On the other hand, while directly integrating standard BI chart components can improve development efficiency to some extent, these components typically only support preset chart types and interactive behaviors, failing to meet the deep customization needs for visualization effects in business scenarios. For example, business users often require clickable up and down arrows next to fields to support dynamic sorting, or to jump to related detail pages when clicking on specific data items, with the jumpable fields highlighted to guide user operations. These fine-grained customizations involving interactive logic and visual styles are often impossible to achieve in standard BI components, resulting in a significant gap between the final report experience and business expectations.

[0023] Therefore, there is an urgent need for an efficient report development methodology that can significantly improve the efficiency of report development and iteration while fully preserving the high degree of visualization and customization capabilities of reports, thereby comprehensively meeting the business's overall needs for reports in terms of development efficiency, configuration flexibility, and personalized visualization.

[0024] The inventors have proposed a report development method, a report development system, a storage medium, and a processor. This solution first receives the storage path of the report style code template input by the target user. This report style code template abstracts the front-end structure of the report into a reusable Vue.js reactive report component template, enabling one-time development and multiple reuses. This fundamentally avoids the problem of each report requiring independent page code writing in the traditional model. Simultaneously, Vue.js's componentization and reactive features provide a technical foundation for subsequent dynamic configuration and real-time updates, improving development standardization while retaining a high degree of visual customization potential. Secondly, based on the storage path, the system reads the corresponding JS file from the server and renders the JS file in the client's preview area to generate the corresponding report style template. This decouples the report template from the main application package, allowing business users to visually view the template effect on the client without hard-coding the report into the client, significantly shortening the template design-to-deployment cycle. Then, it receives report configuration requests initiated by the target user. These requests include multiple report style configuration items, allowing the target user to complete most of the report definition work independently (such as sorting arrows, jump highlights, and other personalized requirements), significantly reducing the threshold for report customization. Next, it utilizes Vue.js's reactive data binding mechanism to associate each report style configuration item with the corresponding page element attributes in the report style template. By leveraging Vue.js's built-in reactive system, it automatically establishes binding relationships between configuration items and template UI elements, enabling report style updates without manual DOM manipulation or writing update logic. This provides key technical support for flexible configuration and efficient development. Finally, when it detects that the target user has modified a report style configuration item, it automatically updates the style and / or data of the report style template based on the change information, and renders the updated report style template in the preview area to generate the target report. This significantly improves the development and iteration efficiency of reports while fully preserving their high level of visual customization capabilities, thus comprehensively meeting the business's overall needs for reports in terms of development efficiency, configuration flexibility, and personalized visualization.

[0025] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present application.

[0026] Method Implementation Examples

[0027] This application provides an embodiment of a report development method. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although the flowchart shows a logical order, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0028] See Figure 1 The figure is a flowchart of a report development method provided in an embodiment of this application, such as... Figure 1 As shown, the method includes the following steps: Step S101: Receive the storage path of the report style code template input by the target user.

[0029] In one feasible implementation, a report development system can be used as the execution subject of the report development method in the embodiments of this application. For ease of description, the report development system will be referred to as the system below.

[0030] In step S101, the report style code template is a responsive report component template based on Vue.js.

[0031] In the embodiments of this application, such as Figure 2 As shown, users can enter the storage path of the report style code template in the HTML code area of ​​the client (such as a BI client). The system can then receive the storage path of the report style code template entered by the target user. This report style code template is a reusable Vue.js responsive report component template that abstracts the front-end structure of the report into a reusable Vue.js responsive report component template. This enables development once and reuse multiple times, fundamentally avoiding the problem of having to write independent page code for each report in the traditional mode. At the same time, Vue.js's componentization and responsive features provide a technical foundation for subsequent dynamic configuration and real-time updates, which not only improves the level of development standardization, but also retains a high degree of visual customization potential.

[0032] Optionally, the JS file includes Vue component options, template strings, and template logic functions; among them, Vue components are used to declare reactive report style objects and report data, and the template string contains embedded v-bind directives, which are used to establish reactive connections between each report style configuration item and the report style template.

[0033] In one alternative implementation, before receiving the storage path of the report style code template input by the target user, the system can, based on the Vue.js reactive system, write code snippets conforming to the Vue reactive specification into the JS file of the report style code template to configure the report style code template as a report component template with Vue.js reactive data binding mechanism; then the system can store the configured JS file in the storage area of ​​the server.

[0034] It's important to note that the report style code template is primarily developed based on Vue.js's reactive system. When style configurations or data change, the chart display can be automatically updated. Vue.js's reactive mechanism means that when the server generates or saves the template, it pre-writes code snippets conforming to the Vue reactive specification into a JS file. When this JS is loaded by the BI client, Vue can immediately establish dependency tracking on the browser side, enabling automatic view updates in response to data / style changes.

[0035] Step S102: Read the JS file corresponding to the report style code template from the server based on the storage path, and render the JS file in the preview area of ​​the client to generate the corresponding report style template.

[0036] In this embodiment of the application, the system can read the JS file corresponding to the report style code template from the server based on the storage path, and display it in the preview area of ​​the client (i.e. Figure 2 The JS file is rendered in the chart preview area to generate the corresponding report style template. This decouples the report template from the main application package, allowing business users to view the template effect intuitively on the client without having to hardcode the report into the client, which greatly shortens the cycle from template design to launch.

[0037] Optionally, the JS file includes the JavaScript source code that actually drives the chart, stored on the server. It typically consists of three parts: the first part is Vue component options, such as the responsive style object returned by data / setup, chart data, etc.; the second part is the template string, such as the HTML structure, containing Vue directives such as v-for / v-bind; and the third part is the logic functions, such as column width calculation, zebra stripe toggle, cell click jump, total row display, etc.

[0038] Optionally, after the system reads the JS file corresponding to the report style code template from the server based on the storage path, the logic related to chart data access and style configuration, as well as the style configuration items adjusted by the user, can be written into the JS file. Figure 2 The JavaScript code section shown.

[0039] Step S103: Receive the report configuration request initiated by the target user.

[0040] In step S103, the report configuration request includes multiple report style configuration items. Optionally, the report style configuration items include report field configuration items (such as configuration items that control which fields are displayed, how they are named, and how they are formatted), report style configuration items (such as configuration items that control visual structures such as layout, alignment, font, and borders), and report color configuration items (such as configuration items that control color scheme, conditional coloring, and theme color).

[0041] In this embodiment of the application, the system can receive a report configuration request initiated by the target user. The report configuration request includes multiple report style configuration items, enabling the target user to complete most of the report definition work by themselves (such as sorting arrows, jump highlighting and other personalized needs), which significantly reduces the threshold for report customization.

[0042] Step S104: Using Vue.js's reactive data binding mechanism, associate each report style configuration item with the corresponding page element attributes in the report style template.

[0043] In this embodiment, the system can utilize Vue.js's reactive data binding mechanism to associate each report style configuration item with the corresponding page element attributes in the report style template. By leveraging Vue.js's built-in reactive system, the system can automatically establish a binding relationship between configuration items and template UI elements, enabling report style updates without manually manipulating the DOM or writing update logic. This provides key technical support for flexible configuration and efficient development.

[0044] Specifically, the system can respond to the v-bind directive embedded in the template string of the JS file, associating each report style configuration item with the corresponding page element attribute in the report style template, so as to establish a responsive connection between each report style configuration item and the report style template.

[0045] In this embodiment, the system can use the v-bind directive in the JavaScript code area to bind style configuration objects to multiple attributes of page elements. After the user adjusts the style configuration items, the Vue.js responsive system in the template detects the change and associates each report style configuration item with the corresponding page element attribute in the report style template, providing a data basis for subsequent automatic chart updates.

[0046] Step S105: When it is detected that the target user has modified the report style configuration item, the style and / or data of the report style template are automatically updated based on the change information of the report style configuration item, and the updated report style template is rendered in the preview area to generate the target report.

[0047] In this embodiment of the application, when the system detects that a target user has modified the report style configuration items, it can automatically update the style and / or data of the report style template based on the change information of the report style configuration items, and display the changes in the preview area (i.e., ... Figure 2 The updated report style template is rendered in the chart preview area shown, and the target report is generated. This significantly improves the development and iteration efficiency of the report while fully retaining the high degree of visualization and customization capabilities of the report, thereby fully meeting the comprehensive needs of the business for reports in terms of development efficiency, configuration flexibility and personalized visualization.

[0048] Optionally, when a user adjusts the style configuration items, the Vue.js reactive system within the report style template detects the change, automatically updates the page element styles and / or data, and completes specific style fine-tuning. The fine-tuned style configuration and data processing results can be used for subsequent chart rendering. When the user clicks the run button, the system can execute JavaScript logic (i.e., the latest configuration including styles and data), re-render the chart in the chart preview area, so that the style and data changes take effect immediately, and obtain the target report for the user to preview the effect.

[0049] Optionally, such as Figure 2 As shown, the BI client in this application also includes a CSS code area and an input data preview. The fixed styles in the CSS code area are only responsible for the most basic, almost unchanging visual baseline (such as font size, line height, alignment, etc.). They are not data required for chart rendering and do not participate in any responsive calculations. They are used to provide basic static style support for the chart and are applied to chart display. The input data preview is used to display relevant data in the chart.

[0050] The report development method provided in this application allows users to configure the storage path of the report style code template in the HTML code area. This enables the reading of JS file content from a specified server path for style fine-tuning and data integration. Chart data is integrated into the JavaScript code area, and users adjust style configuration items. The page element styles are automatically updated via v-bind directive binding and the Vue.js reactive system. The report style code template abstracts the report front-end structure into a reusable Vue.js reactive report component template, enabling one-time development and multiple reuses. This fundamentally avoids the problem of requiring independent page code writing for each report in the traditional model. Meanwhile, Vue.js's component-based and reactive features provide the technical foundation for subsequent dynamic configuration and real-time updates, improving development standardization while retaining a high degree of visual customization potential. This application also decouples report templates from the main application package, allowing business users to visually view template effects on the client side without hard-coding reports into the client, significantly shortening the template design-to-deployment cycle. Furthermore, by leveraging Vue.js's built-in reactive system, it automatically establishes binding relationships between configuration items and template UI elements, enabling report style updates without manual DOM manipulation or writing update logic. This provides crucial technical support for flexible configuration and efficient development. When the user clicks the run button, the system executes JavaScript logic, and the chart preview area re-renders the chart, displaying the effects of style and data changes. This significantly improves report development and iteration efficiency while fully preserving the report's high degree of visual customization capabilities, thus comprehensively meeting the business's overall needs for reports in terms of development efficiency, configuration flexibility, and personalized visualization.

[0051] System Implementation Examples

[0052] This application provides a report development system, wherein, Figure 3 This application provides a schematic diagram of the structure of a report development system, as shown in the embodiments below. Figure 3As shown, the device includes a server 11 and a BI client 12; wherein the BI client includes a first receiving module 121, a template reading module 122, a second receiving module 123, a binding module 124, and an update module 125. Figure 3 You can see the connections between several modules.

[0053] Among them, server-side 11 is used to write code snippets that conform to the Vue reactivity specification into the JS file of the report style code template based on the Vue.js reactivity system, so as to configure the report style code template as a report component template with Vue.js reactivity data binding mechanism, and store the configured JS file in the server's storage area; The first receiving module 121 is used to receive the storage path of the report style code template input by the target user; the report style code template is a responsive report component template based on Vue.js; The template reading module 122 is used to send a template reading request to the server according to the storage path, so as to read the JS file corresponding to the report style code template from the memory area of ​​the server, and render the JS file in the preview area of ​​the client to generate the corresponding report style template. The second receiving module 123 is used to receive a report configuration request initiated by the target user; the report configuration request includes multiple report style configuration items; Binding module 124 is used to associate each report style configuration item with the corresponding page element attribute in the report style template using Vue.js's reactive data binding mechanism; The update module 125 is used to automatically update the style and / or data of the report style template based on the change information of the report style configuration items when the target user modifies the report style configuration items, and to render the updated report style template in the preview area to generate the target report.

[0054] Optionally, the JS file includes Vue component options, template strings, and template logic functions; Vue components are used to declare reactive report style objects and report data, and the template string contains embedded v-bind directives, which are used to establish reactive connections between various report style configuration items and report style templates.

[0055] Optionally, the binding module includes: The binding unit is used in response to the v-bind directive to associate each report style configuration item with the corresponding page element attribute in the report style template.

[0056] Optionally, the server-side may also include: The write unit is used to write code snippets conforming to the Vue reactivity specification into the JS file of the report style code template before receiving the storage path of the report style code template input by the target user, based on the Vue.js reactivity system, so as to configure the report style code template as a report component template with Vue.js reactive data binding mechanism; The storage unit is used to store the configured JS file in the server's storage area.

[0057] Optionally, the report style configuration items include report field configuration items, report style configuration items, and report color configuration items.

[0058] Storage Media Examples

[0059] This application provides a computer-readable storage medium storing a program, which, when executed by a processor, implements some or all of the steps in the report development method described in the foregoing method embodiments of this application. The storage medium can be any medium capable of storing program code, such as a USB flash drive, external hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0060] Processor Implementation

[0061] This application provides a processor for running a program, wherein some or all of the steps in the report development method described in the foregoing method embodiments are executed during program execution.

[0062] It should be noted that the various embodiments in this specification are described in a progressive manner, and the same or similar parts between the various embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, for the system embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiments. The system embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separate. The components indicated as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of the solution in this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0063] The above description is merely one specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A report development method, characterized in that, include: The storage path for the report style code template input by the target user; The report style code template is a responsive report component template based on Vue.js; Based on the storage path, the JS file corresponding to the report style code template is read from the server, and the JS file is rendered in the preview area of ​​the client to generate the corresponding report style template. Receive a report configuration request initiated by the target user; the report configuration request includes multiple report style configuration items; Using the reactive data binding mechanism of Vue.js, each of the report style configuration items is associated with the corresponding page element attributes in the report style template; When the target user is detected to have modified the report style configuration item, the style and / or data of the report style template are automatically updated based on the change information of the report style configuration item, and the updated report style template is rendered in the preview area to generate the target report.

2. The method according to claim 1, characterized in that, The JS file includes Vue component options, template strings, and template logic functions; the Vue component is used to declare responsive report style objects and report data, and the template string contains a v-bind directive, which is used to establish a responsive connection between each of the report style configuration items and the report style template.

3. The method according to claim 2, characterized in that, The step of using Vue.js's reactive data binding mechanism to associate each of the report style configuration items with the corresponding page element attributes in the report style template includes: In response to the v-bind directive, each of the report style configuration items is associated with the corresponding page element attributes in the report style template.

4. The method according to claim 1, characterized in that, Before receiving the storage path of the report style code template input by the target user, the method further includes: Based on the Vue.js reactive system, code snippets conforming to the Vue reactive specification are written into the JS file of the report style code template to configure the report style code template as a report component template with Vue.js reactive data binding mechanism; The configured JS file is stored in the storage area of ​​the server.

5. The method according to claim 1, characterized in that, The report style configuration items include report field configuration items, report style configuration items, and report color configuration items.

6. A report development system, characterized in that, The system includes a server and a BI client; the BI client includes a first receiving module, a template reading module, a second receiving module, a binding module, and an update module. The server-side is used to write code snippets conforming to the Vue reactivity specification into the JS file of the report style code template based on the Vue.js reactivity system, so as to configure the report style code template as a report component template with Vue.js reactivity data binding mechanism, and store the configured JS file in the storage area of ​​the server. The first receiving module is used to receive the storage path of the report style code template input by the target user; the report style code template is a responsive report component template based on Vue.js. The template reading module is used to send a template reading request to the server according to the storage path, so as to read the JS file corresponding to the report style code template from the memory area of ​​the server, and render the JS file in the preview area of ​​the client to generate the corresponding report style template. The second receiving module is used to receive a report configuration request initiated by the target user; the report configuration request includes multiple report style configuration items; The binding module is used to associate each of the report style configuration items with the corresponding page element attributes in the report style template using the reactive data binding mechanism of Vue.js; The update module is used to automatically update the style and / or data of the report style template based on the change information of the report style configuration item when the target user is detected to have modified the report style configuration item, and to render the updated report style template in the preview area to generate the target report.

7. The system according to claim 6, characterized in that, The JS file includes Vue component options, template strings, and template logic functions; the Vue component is used to declare responsive report style objects and report data, and the template string contains a v-bind directive, which is used to establish a responsive connection between each of the report style configuration items and the report style template.

8. The system according to claim 7, characterized in that, The binding modules include: The binding unit is used to respond to the v-bind instruction and associate each of the report style configuration items with the corresponding page element attributes in the report style template.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the report development method as described in any one of claims 1-5.

10. A processor, characterized in that, Used to run a computer program, which, when running, executes the report development method as described in any one of claims 1-5.

Images