Method for realizing customized card in financial scene based on dataEase

Abstract

The invention discloses a method for realizing a customized card in a financial scene based on dataEase. The method comprises the following steps: downloading a dataEase source code, creating a billboard and adding a view file; an icon type file is introduced, and a customized card is added; newly adding a target card file, and adding control; adding a view and assembling view parameters; editing a card view, dragging an index, caching data at the same time, and associating a view component; and setting card chart attributes and component styles. According to the invention, the card content needing to be displayed of each financial business project is customized and expandable, so that the requirements are greatly met; service parameter customization can be flexibly combined and displayed, and interaction between complex services on the card and associated service parameters are clearly displayed; service parameter data formats and display precision can be processed according to service needs, and a customized card data presentation mode is realized.

Description

Technical Field

[0001] The present invention belongs to the financial field, and specifically is a method for realizing customized cards in financial scenarios based on dataEase. Background Art

[0002] In the financial business scenario, the data characteristics of the financial industry are particularly significant. The massive data scale, rich and diverse data types, and highly sensitive data nature together constitute an important cornerstone for analytical decision-making and business optimization. In order to fully tap the value of this data, improve the scientificity and timeliness of decision-making, and accelerate the pace of business development, financial institutions urgently need to introduce advanced digital tools as support.

[0003] DataEase visual analysis tools are a great choice for large-scale data analysis and presentation. DataEase dashboard designer is embedded into application software, and project access data is integrated to achieve data-driven decision-making and business optimization. Customized development of various data cards according to different business needs and scenarios has become a key link. These cards not only need to cover complex data structures and multi-dimensional analysis perspectives. For business personnel, they are more concerned about how to quickly capture market dynamics, gain insight into business trends, and evaluate operational results through these customized data cards, and formulate more accurate and effective strategies and action plans based on this.

[0004] Therefore, in the card design process, high-level design standards are particularly important. It requires the design team to not only be proficient in the technical details of data analysis and visualization, but also to have a deep understanding of business needs, perfectly integrate business logic and data presentation, and create data visualization works that meet functional requirements and have aesthetic value.

[0005] Existing solution: According to the BI report data card display format required by the business, after connecting to dataEase data, create charts by dragging and dropping the dashboard. Open the dateEase dashboard; create a dashboard and click Edit; add a view and modify the view name; select the data set and then select the icon type indicator card or text card; edit the indicator card (text card) and drag the indicator (latitude); set the color, font size, and component title; to meet the basic data display. Although the indicator card can be dragged out, the interface display format and data display format are single, which cannot meet the complex data report display requirements.

[0006] Specifically, the existing solutions have the following disadvantages:

[0007] 1. Although the dataEase data visualization analysis tool has an indicator card control, the indicator parameters that can be displayed are limited, and the coverage of existing templates and configuration options is limited and cannot meet customization requirements.

[0008] 2. The business parameters required by the card cannot be freely combined and flexibly displayed, and complex business parameters and the correlation between business parameters cannot be displayed.

[0009] 3. Card data format and accuracy processing are limited.

[0010] 4. The card display style is fixed with a small adjustable range and no customized visual presentation, which cannot meet the required visual analysis requirements. Summary of the invention

[0011] In view of the above problems, the present invention is proposed to provide a method for implementing customized cards in financial scenarios based on dataEase, which overcomes the above problems or at least partially solves the above problems.

[0012] To achieve the above object, the present invention adopts the following technical solutions:

[0013] A method for implementing customized cards in a financial scenario based on dataEase, the method comprising:

[0014] Download dataEase source code, create a dashboard and add view files;

[0015] Import icon type files and add customized cards;

[0016] Add target card files and add controls;

[0017] Add views and assemble view parameters;

[0018] Edit card views, drag indicators, cache data, and associate view components;

[0019] Set card chart properties and component styles.

[0020] Optionally, the step of creating a dashboard and adding a view file includes:

[0021] Click Create Dashboard and open panelCreation.vue;

[0022] Import the panel / index.vue file and enter the dashboard editing file panel / edit / index.vue;

[0023] Open and add the view file ChartGroup through the this.$refs['chartGroup'].selectTable() method call.

[0024] Optionally, the importing of the icon type file and adding a customized card includes:

[0025] Introduce different types of charts chart / ChartType files through ChartGroup files;

[0026] In the ChartType file, introduce the TYPE_CONFIGS method in chart / util.js and add customized cards through the TYPE_CONFIGS method.

[0027] Optionally, the customized card includes title chart title class, render chart type, icon icon, category setting category, properties and propertyInner.

[0028] Optionally, the adding of target card file and adding control includes:

[0029] Added CustomizedCard.vue file, which contains customized display format and content;

[0030] Import the UserView.vue file and add labelCardShowFlag to control whether to display the customized card view component.

[0031] Optionally, adding a view and assembling view parameters includes selecting an icon type and indicator latitude in adding a view, and clicking OK to call a createChart method.

[0032] Optionally, the editing card view, dragging the indicator, caching data, and associating the view components include:

[0033] Call the moveToQuota method to drag the indicator;

[0034] Use the calcData method to cache data;

[0035] The child and parent components are decoupled through the message bus bus.$emit('view-in-cache') and bus.$off('view-in-cache') to associate the view component UserView.vue.

[0036] Optionally, the card chart properties and component styles are set by editing the dashboard chart / view / ChartEdit using the setChartDefaultOption method.

[0037] In summary, due to the adoption of the above technical solution, the beneficial effects of the present invention are:

[0038] 1. The present invention customizes the card content required to be displayed for each financial business project, is scalable, and can greatly meet the needs; and the customized business parameters can be flexibly combined and displayed, and the interactions between complex businesses and related business parameters on the card are clearly displayed; the business parameter data format and display accuracy can be processed according to business needs to achieve a customized card data presentation method.

[0039] 2. The present invention customizes the card display format according to business needs, which can help users quickly analyze data and gain insights into business trends; through front-end code intervention, customized development of card function modules, extension modules and deep integration, it can break through the boundaries of existing functions; through customized cards, it can quickly adapt to environmental changes, and the card-based data display system that deeply fits business needs helps business data analysis to achieve data-driven decision-making and business optimization. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 A flowchart of a method for implementing customized cards in financial scenarios based on dataEase is provided in an embodiment of the present application. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments in the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0042] See also Figure 1 This embodiment provides a method for implementing customized cards in a financial scenario based on dataEase, and the method includes the following steps:

[0043] S1. Download dataEase source code, create a dashboard and add view files.

[0044] Creating a dashboard and adding view files include:

[0045] Click Create Panel and open panelCreation.vue.

[0046] Import the panel / index.vue file and enter the dashboard editing file panel / edit / index.vue; open and add the view file ChartGroup through the this.$refs['chartGroup'].selectTable() method call.

[0047] S2. Import icon type files and add customized cards.

[0048] Import icon type files and add customized cards including:

[0049] Import different types of charts chart / ChartType files through ChartGroup files.

[0050] In the ChartType file, introduce the TYPE_CONFIGS method in chart / util.js and add customized cards through the TYPE_CONFIGS method.

[0051] Customized cards include title chart title class, render chart type, icon icon, category setting category, properties and propertyInner, etc.

[0052] S3. Add target card file and add control.

[0053] Add a new target card file and add controls including:

[0054] Add the CustomizedCard.vue file to customize the display format and content.

[0055] Import the UserView.vue file and add labelCardShowFlag to control whether to display the customized card view component.

[0056] S4. Add views and assemble view parameters.

[0057] Adding a view and assembling view parameters includes selecting the chart type and indicator latitude in adding the view, and clicking OK to call the createChart method.

[0058] S5. Edit the card view, drag the indicator, cache the data, and associate the view components.

[0059] Edit card views, drag indicators, cache data, and associate view components including:

[0060] Call the moveToQuota method to drag the indicator.

[0061] Use the calcData method to cache data.

[0062] The child and parent components are decoupled through the message bus bus.$emit('view-in-cache') and bus.$off('view-in-cache') to associate the view component UserView.vue.

[0063] S6. Set card chart properties and component styles.

[0064] Set the card chart properties and component styles by editing the Kanban chart / view / ChartEdit using the setChartDefaultOption method.

[0065] This embodiment customizes the card content required to be displayed for each financial business project and is scalable to greatly meet the needs. Moreover, the customized business parameters can be flexibly combined and displayed, and the interactions between complex businesses and related business parameters on the card are clearly displayed. The business parameter data format and display accuracy can be processed according to business needs to achieve a customized card data presentation method.

[0066] This embodiment customizes the card display format according to business needs, helping users to quickly analyze data and gain insights into business trends; through front-end code intervention, customized development of card function modules, extension modules and deep integration, it can break through the boundaries of existing functions; through customized cards, it can quickly adapt to environmental changes, and the card-based data display system that deeply fits business needs helps business data analysis to achieve data-driven decision-making and business optimization.

[0067] Customizing cards based on dataEase means creating a template file CustomizedCard.vue, integrating the customized card file CustomizedCard.vue into dataEase, and using the labelCardShowFlag parameter to control whether to display the customized card. CustomizedCard.vue renders business parameters and associated business parameters according to the parameter type_card type, and calls the custom function dataUtil to format and process the data precision according to the returned business parameter data unit and card type, and calls the numStyle function to display the card style according to the card type. This method is not only applicable to customized cards, but also to title customization, chart customization, table customization, rankings, TAB tabs, and other control customization in dataEase financial scenarios.

[0068] For example: in addition to displaying the indicator name and indicator data, type_card is 1.1 to display the growth rate and daily net increase of business parameters compared with the previous day; type_card is 1.2 to display the growth rate and weekly net increase compared with the previous week, etc.; type_card is 1.3 to display the year-on-year increase and the same rate compared with the previous month, etc.

[0069] According to the returned business data unit and card type, the custom dataUtil function is called to format the data. The dataUtil function passes in the data and the data type display type (forMatterItem). For the unit of %, the length of the data outside the yuan is greater than 5, and the integer processing is performed. ForMatterItem, the data type type (percentage, etc.), unit suffix suffix, decimal count, whether to display the thousandth symbol, etc. are dynamically configured according to business needs. The customized style calls the function numStyle to customize the dynamic configuration of the display text size and color background according to business needs.

[0070] The following is the process of integrating customized cards with dataEase:

[0071] A customized card entry is added to the dataEase chart, and highly customized cards are used as a new type of chart. Customized card attribute configuration information is added to the TYPE_CONFIGS method. A customized target card CustomizedCard.vue front-end file is added. In the CustomizedCard.vue file, data interaction logic and display format can be built according to business needs to write customized cards. The labelCardShowFlag flag is added to UserView.vue to control whether to display the customized card view component. The view saving logic and data acquisition method are consistent with other types of dataBase charts. The interface operation is consistent with other existing chart steps in DataEase.

[0072] The above contents are further detailed descriptions of the present invention in combination with specific preferred embodiments, and it cannot be determined that the specific implementation of the present invention is limited to these descriptions. For ordinary technicians in the technical field to which the present invention belongs, several simple deductions or substitutions can be made without departing from the concept of the present invention, which should be regarded as falling within the protection scope of the present invention.

Claims

1. A method for implementing customized cards in financial scenarios based on dataEase, characterized in that: The method comprises: Download dataEase source code, create a dashboard and add view files; Import icon type files and add customized cards; Add target card files and add controls; Add views and assemble view parameters; Edit card views, drag indicators, cache data, and associate view components; Set card chart properties and component styles.

2. A method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 1, characterized in that: Creating a dashboard and adding a view file include: Click Create Dashboard and open panelCreation.vue; Import the panel / index.vue file and enter the dashboard editing file panel / edit / index.vue; Open and add the view file ChartGroup through the this.$refs['chartGroup'].selectTable() method call.

3. The method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 1, characterized in that: The importing of icon type files and adding customized cards include: Introduce different types of charts chart / ChartType files through ChartGroup files; In the ChartType file, introduce the TYPE_CONFIGS method in chart / util.js and add customized cards through the TYPE_CONFIGS method.

4. A method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 3, characterized in that: The customized card includes title chart title class, render chart type, icon icon, category setting category, properties and propertyInner.

5. The method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 1, characterized in that: The newly added target card file and added control include: Added CustomizedCard.vue file, which contains customized display format and content; Import the UserView.vue file and add labelCardShowFlag to control whether to display the customized card view component.

6. The method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 1, characterized in that: Adding a view and assembling view parameters include selecting an icon type and indicator latitude in adding a view, and clicking OK to call the createChart method.

7. The method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 1, characterized in that: The editing card view, dragging indicators, caching data, and associating view components include: Call the moveToQuota method to drag the indicator; Use the calcData method to cache data; The child and parent components are decoupled through the message bus bus.$emit('view-in-cache') and bus.$off('view-in-cache') to associate the view component UserView.vue.

8. The method for implementing customized cards in financial scenarios based on dataEase as claimed in claim 1, characterized in that: The card chart properties and component styles are set by editing the chart / view / ChartEdit board using the setChartDefaultOption method.

Images