Component data large screen development method combined with big data cloud platform

Abstract

The invention discloses a componentized data large screen development method combined with a big data cloud platform, which comprises the following steps: analyzing data, developing a data batch task to obtain large screen data, and creating a component library used on a large screen through the large screen data; creating a visual editing page on the large screen; s2, analyzing and selecting components according to requirements, judging whether required components exist in a component library or not, if the required components exist in the component library, performing a step S5, and if the required components do not exist in the component library, performing a step S4; according to use requirements, dragging the components in the component library into a canvas area to construct a large-screen page; arranging the components in the edited page in a dragging and aligning mode; configuring a component data source and a style attribute for the selected component through the operation area; compiling a component complex style and a complex data interface request by using a global script; the method has the technical characteristics that the burden of a back-end service database can be effectively reduced, and meanwhile, the timeliness of the data is ensured, and the like.

Description

Technical Field

[0001] The present invention relates to a componentized data large screen development method, and more specifically, to a componentized data large screen development method in conjunction with a big data cloud platform, and belongs to the field of computer technology. Background Art

[0002] As an efficient information display tool, data visualization screens have shown great application value in many industries such as finance, e-commerce, agriculture, and industry. It can not only help enterprises, government agencies, and various organizations gain in-depth insights into the core status of their business operations, but also capture potential problems and opportunities in a timely manner, thereby promoting the optimization of decision-making processes and the adjustment of action strategies. At a time when the wave of big data is sweeping the world, the demand for real-time data on data visualization screens is becoming more and more urgent. This means that in the process of data analysis and data visualization development, efficiency needs to be further improved to meet the needs of real-time presentation and interpretation of dynamically changing data. By continuously optimizing technical means and process management, it can be ensured that the data visualization screen can quickly respond to data updates and provide users with more accurate and efficient information support. Summary of the invention

[0003] The purpose of the present invention is to provide a componentized data big screen development method for a joint big data cloud platform, which has technical characteristics such as being able to effectively reduce the burden on the back-end service database while ensuring the timeliness of data.

[0004] In order to achieve the above object, the present invention is implemented by the following technical solutions:

[0005] The present invention provides a componentized data large screen development method in conjunction with a big data cloud platform, characterized in that the method comprises the following steps:

[0006] Step S1: Analyze data, develop data, run batch tasks to obtain large-screen data, and create a component library used on the large screen through the large-screen data;

[0007] Step S2: Create a visual editing page on the large screen;

[0008] Step S3: According to the demand analysis, select components and determine whether there are required components in the component library. If there are required components in the component library, proceed to step S5; if there are no required components in the component library, proceed to step S4;

[0009] Step S4: Drag components from the component library into the canvas area to build a large-screen page according to usage requirements, create custom components in the component library according to the missing components, and build custom components by using Vue or React or ECharts framework, and define component properties in Json format; each component dragged to the edit page has a unique component id for distinction; then proceed to step S5;

[0010] Step S5: Layout the components on the edit page by dragging and dropping and aligning them; the alignment methods include left alignment, center alignment, top alignment, right alignment, and bottom alignment; the style of a component can also be copied to other components of the same type on the edit page;

[0011] Step S6: configuring the component data source and style attributes for the selected component through the operation area;

[0012] Step S7: Use global scripts to write component complex styles and complex data interface requests;

[0013] Step S8: Release the data visualization large-screen application.

[0014] Preferably, step S1 specifically includes: searching for multiple data source tables, using a big data cloud platform to perform data analysis, associating multiple tables, and performing calculation operations to insert data into a final result table, and loading the cloud data into a local service database through library table synchronization.

[0015] Preferably, step S2 specifically includes:

[0016] The visual editing page includes: custom component editing and uploading area, component property and style configuration area, global script editing area, page canvas area, component library area,

[0017] The component library area includes a variety of custom components that cover a wide range of uses and scenarios, providing users with a wealth of choices to meet the personalized needs of different projects.

[0018] Page canvas area: As the core area of ​​the editing page, the canvas area allows users to easily drag and drop components from the component library onto the canvas through intuitive drag and drop operations, and freely combine and layout them according to actual needs, so as to quickly build the required large-screen display page;

[0019] Component properties and style configuration area: including data binding and style adjustment, enabling users to precisely control the display effect and data presentation method of each component, ensuring the professionalism and aesthetics of the large-screen page, and providing users with component configuration options;

[0020] Global script editing area: implements complex style logic, business rules, and special service interface calls that cannot be covered by component properties and style configuration areas, improving the flexibility and scalability of the editing page; in order to meet more complex editing needs, a global script area is set up to allow users to write custom scripts;

[0021] Custom component editing and uploading area: Provides the editing and uploading functions of custom components. Users can create and save their own components in this custom component editing and uploading area. As the usage experience accumulates, the component library in this area will continue to be enriched, greatly improving the reuse efficiency of components.

[0022] Preferably, the process of configuring component data in step S6 includes: data preparation, creating a data source and setting a data model; then, binding the data source to the component; wherein the information of the data source includes: data source type (database mode, interface mode, static resource), the database mode requires binding SQL statements to the component, the interface mode requires binding service interfaces to the component, and the static resource requires binding json data to the component.

[0023] Preferably, step S7 specifically includes: if the style of the component property area does not meet the requirements in steps S4, S5 and S6, it is necessary to use Jquery or Jscript statements in the global script editing area to obtain the component object of the specific component according to the component id, and the object can modify the specific style and data source of the component.

[0024] Preferably, step S8 specifically includes: collecting user demand feedback; evaluating the optimization modification amount, if the modification amount is less than the newly created large screen, implementing it by modifying the original large screen page, otherwise implementing the demand by creating a new large screen page.

[0025] Beneficial effects: Using the big data cloud platform to establish offline data processing tasks effectively reduces the burden on the backend service database while ensuring the timeliness of the data. Through the drag-and-drop operation in the page editing area, developers can enjoy a more intuitive and convenient operation experience. In addition, the solution has a rich built-in component library and supports custom component functions. With the accumulation of use, the types and number of custom components continue to increase, which significantly shortens the development cycle of data visualization large-screen applications, reduces the workload, and greatly improves reusability. Using this method can significantly improve the efficiency of science and technology financial services and accelerate the upgrading of science and technology financial capabilities. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] Figure 1 It is a schematic diagram of the process of the present invention. DETAILED DESCRIPTION

[0027] The present invention will be further described below in conjunction with the accompanying drawings, but the present invention is not limited to the following embodiments.

[0028] The implementation of current data visualization technology faces two major challenges: first, the implementation cycle is long, the work is heavy, and the algorithm development process is complex; second, the flexibility and compatibility are insufficient and difficult to reuse. Existing solutions often adopt customized designs and are only applicable to specific data sources. Once the data source changes or the data type increases or decreases, it needs to be redesigned, which is time-consuming and laborious.

[0029] like Figure 1 The figure shows a specific embodiment of a componentized data large screen development method for a joint big data cloud platform. The embodiment is a componentized data large screen development method for a joint big data cloud platform, comprising the following steps:

[0030] Step S1: Analyze data, develop data batch tasks to obtain large-screen data (large screens include touch screens or display screens controlled by a mouse, etc., which can be fixed screens or mobile portable screens), and create a component library for use on the large screen through the large-screen data; Step S1 specifically includes: finding multiple data source tables, using the big data cloud platform to perform data analysis, multi-table association, calculation operations to insert data into the final result table, and loading the cloud data into the local service database through library table synchronization.

[0031] Step S2: Creating a visual editing page on a large screen; Step S2 specifically includes:

[0032] The visual editing page includes: custom component editing and uploading area, component property and style configuration area, global script editing area, page canvas area, component library area,

[0033] The component library area includes a variety of custom components that cover a wide range of uses and scenarios, providing users with a wealth of choices to meet the personalized needs of different projects.

[0034] Page canvas area: As the core area of ​​the editing page, the canvas area allows users to easily drag and drop components from the component library onto the canvas through intuitive drag and drop operations, and freely combine and layout them according to actual needs, so as to quickly build the required large-screen display page;

[0035] Component properties and style configuration area: including data binding and style adjustment, enabling users to precisely control the display effect and data presentation method of each component, ensuring the professionalism and aesthetics of the large-screen page, and providing users with component configuration options;

[0036] Global script editing area: implements complex style logic, business rules, and special service interface calls that cannot be covered by component properties and style configuration areas, improving the flexibility and scalability of the editing page; in order to meet more complex editing needs, a global script area is set up to allow users to write custom scripts;

[0037] Custom component editing and uploading area: Provides the editing and uploading functions of custom components. Users can create and save their own components in this custom component editing and uploading area. As the usage experience accumulates, the component library in this area will continue to be enriched, greatly improving the reuse efficiency of components.

[0038] Step S3: According to the demand analysis, select components and determine whether there are required components in the component library. If there are required components in the component library, proceed to step S5; if there are no required components in the component library, proceed to step S4;

[0039] Step S4: Drag components from the component library into the canvas area to build a large-screen page according to usage requirements, create custom components in the component library according to the missing components, and build custom components by using Vue or React or ECharts framework, and define component properties in Json format; each component dragged to the edit page has a unique component id for distinction; then proceed to step S5;

[0040] Step S5: Layout the components on the edit page by dragging and dropping and aligning them; the alignment methods include left alignment, center alignment, top alignment, right alignment, and bottom alignment; the style of a component can also be copied to other components of the same type on the edit page;

[0041] Step S6: Configure the component data source and style properties for the selected component through the operation area; the process of configuring component data in step S6 includes: data preparation, creating a data source and setting a data model; then, binding the data source to the component; wherein the information of the data source includes: data source type (database mode, interface mode, static resource), the database mode requires binding SQL statements to the component, the interface mode requires binding service interfaces to the component, and the static resource requires binding json data to the component.

[0042] Step S7: Use global scripts to write complex component styles and complex data interface requests; Step S7 specifically includes: in steps S4, S5 and S6, if the style of the component property area does not meet the requirements, it is necessary to use Jquery or Jscript statements in the global script editing area to obtain the component object of the specific component according to the component id, which can modify the specific style and data source of the component.

[0043] Step S8: Release the data visualization large screen application. Step S8 specifically includes: collecting user demand feedback; evaluating the optimization modification amount, if the modification amount is less than the newly created large screen, implementing it by modifying the original large screen page, otherwise implementing the demand by creating a new large screen page.

[0044] Finally, it should be noted that the present invention is not limited to the above embodiments, and there are many variations. All variations that can be directly derived or associated with the content disclosed by ordinary technicians in this field should be considered as the protection scope of the present invention.

Claims

1. A componentized data big screen development method for a joint big data cloud platform, characterized in that The method comprises the following steps: Step S1: Analyze data, develop data, run batch tasks to obtain large-screen data, and create a component library used on the large screen through the large-screen data; Step S2: Create a visual editing page on the large screen; Step S3: According to the demand analysis, select components and determine whether there are required components in the component library. If there are required components in the component library, proceed to step S5; if there are no required components in the component library, proceed to step S4; Step S4: Drag components from the component library into the canvas area to build a large-screen page according to usage requirements, create custom components in the component library according to the missing components, and build custom components by using Vue or React or ECharts framework, and define component properties in Json format; each component dragged to the edit page has a unique component id for distinction; then proceed to step S5; Step S5: Layout the components in the edit page by dragging and dropping and aligning; the alignment modes include left alignment, center alignment, top alignment, right alignment, and bottom alignment; You can also copy the style of a component to other components of the same type on the editing page; Step S6: configuring the component data source and style attributes for the selected component through the operation area; Step S7: Use global scripts to write component complex styles and complex data interface requests; Step S8: Release the data visualization large-screen application.

2. According to the componentized data big screen development method of the joint big data cloud platform according to claim 1, it is characterized by: Step S1 specifically includes: finding multiple data source tables, using the big data cloud platform to perform data analysis, multi-table association and calculation operations to insert data into the final result table, and loading the cloud data into the local service database through library table synchronization.

3. A componentized data large screen development method for a joint big data cloud platform according to claim 1 or 2, characterized in that: Step S2 specifically includes: The visual editing page includes: custom component editing and uploading area, component property and style configuration area, global script editing area, page canvas area, component library area, Among them, the component library area includes a variety of custom components to meet the personalized needs of different projects; Page canvas area: The canvas area allows users to drag and drop components from the component library onto the canvas through intuitive drag and drop operations, and freely combine and layout them according to actual needs, so as to quickly build the required large-screen display page; Component properties and style configuration area: including data binding and style adjustment, enabling users to precisely control the display effect and data presentation method of each component, ensuring the professionalism and aesthetics of the large-screen page, and providing users with component configuration options; Global script editing area: implements complex style logic, business rules, and special service interface calls that cannot be covered by component properties and style configuration areas, improving the flexibility and scalability of the editing page; in order to meet more complex editing needs, a global script area is set up to allow users to write custom scripts; Custom component editing and uploading area: Provides custom component editing and uploading functions. Users can create and save their own components in this custom component editing and uploading area.

4. According to a componentized data large screen development method of a joint big data cloud platform as described in claim 1, it is characterized by: The process of configuring component data in step S6 includes: data preparation, creating a data source and setting a data model; then, binding the data source to the component; wherein the information of the data source includes: data source type, the database method needs to bind SQL statements to the component, the interface method needs to bind the service interface to the component, and the static resource needs to bind json data to the component.

5. According to the componentized data big screen development method of the joint big data cloud platform according to claim 1, it is characterized by: Step S7 specifically includes: if the style of the component property area does not meet the requirements in steps S4, S5 and S6, it is necessary to use Jquery or Jscript statements in the global script editing area to obtain the component object of the specific component according to the component id, which can modify the specific style and data source of the component.

6. According to claim 1, a componentized data large screen development method for a joint big data cloud platform is characterized by: Step S8 specifically includes: collecting user demand feedback; evaluating the optimization modification amount, if the modification amount is less than the newly created large screen, implementing it by modifying the original large screen page, otherwise implementing the demand by creating a new large screen page.

Images