Business intelligence dashboard generation method, device, electronic device and storage medium

Abstract

The present application discloses a method, device, electronic device and readable storage medium for generating a business intelligence dashboard. The method includes pre-building a plurality of sub-components that are independent of each other and unrelated to business logic, and each sub-component is an element component that constitutes a dashboard. Generate a plurality of position containers in the visualization area of ​​the browser page of the dashboard to be generated; each position container corresponds to a sub-component; generate a drag instruction according to the current position information and target position information of the target sub-component; respond to the drag instruction, drag the target sub-component to the target position container, and bind the target position container to the drag instruction so that the target position container has the property of changing shape and position; respond to the position container adjustment instruction, adjust each target position container to the display panel style of the dashboard to be generated, so that the required dashboard can be generated flexibly, conveniently and quickly, and the generation efficiency of the dashboard can be effectively improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, electronic device and readable storage medium for generating a business intelligence dashboard. Background Art

[0002] Dashboard (business intelligence dashboard) is a functional module for data visualization. It is a data virtualization tool that displays the status of measurement information and key business indicators (KPI) to the enterprise. The key feature of the dashboard is that it obtains real-time data from multiple data sources and is a customized interactive interface.

[0003] Related technologies usually develop dashboards hard-coded according to UI (User Interface) diagrams, such as front-end large-screen dashboards. During the development process, if subsequent R&D needs require changes to certain modules of the previous dashboard, they must be redeveloped, resulting in a long dashboard development cycle, low dashboard generation efficiency, and different dashboard projects cannot be reused. For dashboard projects that have already been launched, if there are subsequent updates to other aspects, they need to be redeployed and go through a complete launch process, which is very cumbersome and complicated. Summary of the invention

[0004] The present application provides a method, device, electronic device and readable storage medium for generating a business intelligence dashboard, which can flexibly, conveniently and quickly generate the required dashboard and effectively improve the generation efficiency of the dashboard.

[0005] To solve the above technical problems, the embodiments of the present invention provide the following technical solutions:

[0006] An embodiment of the present invention provides a method for generating a business intelligence dashboard, including:

[0007] Pre-build multiple independent sub-components with unrelated business logics, each of which is an element component that makes up the dashboard;

[0008] Generate multiple location containers in the visualization area of ​​the browser page of the dashboard to be generated; each location container corresponds to a subcomponent;

[0009] Generate a drag command according to the current position information and target position information of the target subcomponent;

[0010] In response to the drag instruction, the target subcomponent is dragged into a target position container, and the target position container is bound to the drag instruction so that the target position container has the property of changing shape and position;

[0011] In response to the position container adjustment instruction, each target position container is adjusted to a display panel style of the dashboard to be generated.

[0012] Optionally, the pre-building of multiple sub-components that are independent of each other and have unrelated business logics includes:

[0013] Pre-setting a component list area on the visualization area;

[0014] Multiple sub-components developed in the VUE project are stored in the component list area, and unique identification information is set for each sub-component.

[0015] Optionally, generating a plurality of location containers in a visualization area of ​​a browser page for generating a dashboard includes:

[0016] Based on the grid layout of the cascading style sheet, multiple position containers are set in the visualization area of ​​the browser page of the dashboard to be generated.

[0017] Optionally, generating a drag instruction according to the current position information and the target position information of the target subcomponent includes:

[0018] When a click instruction is detected in the visualization area, initial position information of a click point in the visualization area corresponding to the click instruction is recorded;

[0019] Monitoring the movement of the click point, and when the click point moves to the target subcomponent, recording the current position information of the target subcomponent;

[0020] During the movement of the target subcomponent dragged by the click point, the position information of the target subcomponent during the movement is changed according to the real-time position information of the click point until the click point stops moving;

[0021] Use VUE to generate drag instructions based on the position change information during the movement.

[0022] Optionally, the responding position container adjustment instruction adjusts each target position container to a display panel style of the dashboard to be generated, including:

[0023] Generate a drag instruction according to the current container position of the target container when the click point falls on it and the target container position when the click point finishes dragging the target container;

[0024] In response to the drag instruction, the target position container is moved from the current container position to the target container position in the visualization area.

[0025] Optionally, the responding position container adjustment instruction adjusts each target position container to a display panel style of the dashboard to be generated, including:

[0026] generating a size change instruction according to the current corner position when the click point falls on the target corner of the target position container and the target corner position when the click point ends dragging the target corner;

[0027] In response to the size change instruction, the size of the target location container is changed by pulling the target corner.

[0028] Another aspect of the present invention provides a device for generating a business intelligence dashboard, including:

[0029] The widget pre-compilation module is used to pre-build multiple independent sub-components with unrelated business logics. Each sub-component is an element component that makes up the dashboard.

[0030] A location container generation module is used to generate multiple location containers in the visualization area of ​​the browser page of the dashboard to be generated; each location container corresponds to a subcomponent;

[0031] A drag module, used to generate a drag instruction according to the current position information and target position information of the target subcomponent;

[0032] A binding module, for responding to the dragging instruction, dragging the target subcomponent to a target position container, and binding the target position container to the dragging instruction, so that the target position container has the property of changing shape and position;

[0033] The panel generation module is used to respond to the position container adjustment instruction and adjust each target position container to the display panel style of the dashboard to be generated.

[0034] Optionally, the widget pre-compilation module is further used to: pre-set a component list area on the visualization area; store multiple sub-components developed in the VUE project in the component list area, and set unique identification information for each sub-component.

[0035] An embodiment of the present invention further provides an electronic device, comprising a processor, wherein the processor is configured to implement the steps of the method for generating a business intelligence dashboard as described in any of the preceding items when executing a computer program stored in a memory.

[0036] Finally, an embodiment of the present invention further provides a readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method for generating a business intelligence dashboard as described in any of the preceding items are implemented.

[0037] The advantage of the technical solution provided by the present application is that the dashaboard is first decomposed into small components one by one, and then multiple position containers are generated in the visualization area of ​​the browser page. When generating the dashboard, the component required is dragged into the position container in the visualization area, and then the subcomponent and the position container are bound so that the position and size of the position container can be changed. In this way, the layout container can be dragged and dropped in the visualization area at will, and freely combined to arrange a visualization area with different order, position, and component size, so that the required dashboard can be generated flexibly, conveniently, and quickly, which can effectively improve the generation efficiency of the dashboard. Each small module component of the dashboard can be dragged and swapped, which is flexible and convenient, and does not involve the back-end Ajax call interface service. Even if the demand changes, you only need to delete a component or replace it with a component. It is easy to operate, efficient, and can be reused.

[0038] In addition, the embodiment of the present invention also provides a corresponding implementation device, an electronic device and a readable storage medium for the business intelligence dashboard generation method, which further makes the method more practical, and the device, electronic device and readable storage medium have corresponding advantages.

[0039] It is to be understood that the foregoing general description and the following detailed description are exemplary only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions of the embodiments of the present invention or related technologies, the following briefly introduces the drawings required for use in the embodiments or related technical descriptions. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0041] Figure 1 A schematic diagram of a process for generating a business intelligence dashboard provided by an embodiment of the present invention;

[0042] Figure 2 A grid layout diagram of an exemplary application scenario provided by an embodiment of the present invention;

[0043] Figure 3 A schematic diagram of a location container in an exemplary application scenario provided by an embodiment of the present invention;

[0044] Figure 4 A dashborad schematic diagram generated in an exemplary application scenario provided by an embodiment of the present invention;

[0045] Figure 5 A dashborad schematic diagram generated in another exemplary application scenario provided by an embodiment of the present invention;

[0046] Figure 6 The embodiment of the present invention provides Figure 5 The newly generated dashborad diagram after fine-tuning and updating the dashborad;

[0047] Figure 7 A structural diagram of a specific implementation of a commercial intelligence dashboard generation device provided by an embodiment of the present invention;

[0048] Figure 8 A structural diagram of a specific implementation of an electronic device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0049] In order to enable those skilled in the art to better understand the scheme of the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of 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.

[0050] The terms "first", "second", "third", "fourth", etc. in the specification and claims of this application and the above drawings are used to distinguish different objects rather than to describe a specific order. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but may include steps or units that are not listed.

[0051] After introducing the technical solutions of the embodiments of the present invention, various non-limiting implementation methods of the present application are described in detail below.

[0052] See first Figure 1 , Figure 1 A flowchart of a method for generating a business intelligence dashboard provided by an embodiment of the present invention is provided. The embodiment of the present invention may include the following contents:

[0053] S101: Pre-build multiple sub-components that are independent of each other and have unrelated business logic.

[0054] In this embodiment, each subcomponent is an element component that constitutes the dashboard. The so-called element component refers to an indispensable component that constitutes the dashboard, that is, each type of dashboard is decomposed into multiple subcomponents, each subcomponent is independent of each other and the business logic is unrelated. These subcomponents are decoupled so that each subcomponent will not affect each other. In the process of generating the dashboard, which subcomponent is needed, just drag which subcomponent into the corresponding position in the dashboard. A subcomponent occupies a position container. Even if the demand changes, it is only necessary to delete a component or replace a component. In order to facilitate the efficient finding of the required subcomponents in the subsequent steps, an identification information can be set for each subcomponent, and the identification information can uniquely identify the subcomponent. In order to improve the generation efficiency of the entire dashboard, all tuple components for generating the dashboard can be built in advance in this step. Considering VUE, a progressive JavaScript framework that can be used to build user interfaces, it only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. In addition, when used in combination with modern tool chains and various supporting libraries, Vue is also fully capable of providing drivers for complex single-page applications such as SPA. Therefore, this embodiment can develop various sub-components in the VUE project.

[0055] S102: Generate multiple location containers in a visualization area of ​​a browser page for generating a dashboard.

[0056] In this embodiment, the visualization area is the display area of ​​the dashboard, that is, the dashboard is generated by placing the subcomponents that constitute the dashboard in the visualization area. In this embodiment, multiple position containers are set in the visualization area. These position containers can serve as the framework of the dashboard to carry the subcomponents of S101, and each position container corresponds to a subcomponent. As an optional implementation, multiple position containers can be set in the visualization area of ​​the browser page where the dashboard is to be generated based on the grid layout of the cascading style sheet. That is, this application can be combined with Figure 2 The grid layout method of CSS (Cascading Style Sheets) shown in the figure is used to set the position container for the visualization area. The generated position container can be as follows Figure 3 Once the position containers are generated in this step, the positions, sizes and shapes of these position containers are fixed, that is, they do not have the properties of position movement and geometric parameter change.

[0057] S103: Generate a drag instruction according to the current position information and the target position information of the target subcomponent.

[0058] The target subcomponent of this step refers to one of the element components that constitute the dashboard to be generated in S105, and each element component that constitutes the dashboard to be produced in S105 is used as a target component to execute S103 and S104. The current position information of the target subcomponent refers to its position in the storage subcomponent area, and the target position information refers to the position on the position container of the visualization area when it is dragged, that is, on which position container it is dragged. In this step, if the dashboard is generated manually, the panel layout of the dashboard is first familiar to the human, and the required subcomponent is selected from S101 based on the panel layout as the target subcomponent, and the target subcomponent is selected by the touch function of the mouse, keyboard or touch screen, and then dragged on the position container of the visualization area. If the dashboard is produced automatically, the dashboard generation script can be compiled first, and when the dashboard needs to be generated, the execution script is triggered, and the script automatically goes to the subcomponent storage area storing S101 to find the target subcomponent according to the subcomponent identifier, and then selects the target subcomponent and drags it on the position container of the visualization area. Among them, each object that can be displayed on the browser page can be used as an element. This embodiment can use the drag and drop (i.e., Drag and drop) function in the html (Hyper Text Markup Language) standard to obtain the DOM (Document) element to be dragged in javascript, and use VUE's custom instructions to define a drag instruction.

[0059] S104: In response to the drag instruction, the target subcomponent is dragged into the target position container, and the target position container is bound to the drag instruction, so that the target position container has the property of changing shape and position.

[0060] Whether it is a manual method or an automated method, S103 can generate a drag command for the process of dragging the target subcomponent from the current position to the target position, and respond to the drag command so that the target subcomponent is finally dragged to the target position container. It can be understood that the position container generated by S102 does not have the position and shape change attributes, and in order to meet the requirements of different styles of dashboard projects, the position and shape of the position container need to be changed, so the target position container can be bound to the drag command so that the target position container has the attributes of changing shape and position.

[0061] S105: In response to the position container adjustment instruction, each target position container is adjusted to a display panel style of the dashboard to be generated.

[0062] The position container adjustment in this step refers to changing the position and geometric parameters of the position container to make it consistent with the display panel style required by the dashboard. After each position container or the position container that needs to be adjusted is adjusted successfully, the final dashboard can be generated.

[0063] In the technical solution provided by the embodiment of the present invention, the dashaboard is first decomposed into small components one by one, and then a plurality of position containers are generated in the visualization area of ​​the browser page. When generating the dashboard, the component required is dragged into the position container in the visualization area, and then the subcomponent and the position container are bound so that the position and size of the position container can be changed. In this way, the layout container can be dragged and freely combined in the visualization area to arrange a visualization area with different order, position, and component size, so that the required dashboard can be generated flexibly, conveniently, and quickly, which can effectively improve the generation efficiency of the dashboard. Each small module component of the dashboard can be dragged and swapped, which is flexible and convenient, and does not involve the back-end Ajax call interface service. Even if the demand changes, it is only necessary to delete a component or replace a component, which is easy to operate, efficient, and can be reused.

[0064] It should be noted that there is no strict order of execution between the steps in this application. As long as they comply with the logical order, these steps can be executed simultaneously or in a certain preset order. Figure 1 This is just a schematic and does not mean that this is the only execution order.

[0065] It is understandable that VUE is a very complete front-end framework that spans all platforms. Applications built with VUE can run on multiple platforms such as the Web (World Wide Web, Global Wide Area Network), mobile Web, mobile applications, native applications, and desktop native applications; VUE's speed and performance are also excellent, and can reach the extremely high speed that can be achieved on today's and future Web platforms. The development of VUE is also very convenient. Not only can it use simple template files to quickly implement various features, but it can also use custom components and a large number of existing components to expand the template language. Based on this feature, this embodiment can develop a large number of custom building block components, and the custom instructions of VUE can be used to write drag instructions. VUE components are used on the front-end technical level, combined with the grid layout method of CSS (Cascading Style Sheets, Cascading Style Sheets), and the dashboard is generated by dragging components into the grid layout container, and the dashboard background homepage generated by dragging can be obtained.

[0066] Compared with the method of using the native drag and drop method of HTML5, the layout module using the native drag and drop method of HTML5 is composed of a div, which can be nested and contained. Drag a div to drag all the contained divs. The layout module is mainly distributed according to rows and columns, one row at a time, and each row can contain multiple columns, that is, the front-end development of the traditional grid layout system, if it moves on the page, it is necessary to adjust the order between rows by clicking the button to move up or down, and the layout of multiple columns in the row is adjusted by dragging left and right, which is relatively unchanged. The visualization area in this embodiment is the layout container, which is not based on the row as the large unit and the column as the small unit, but uses the characteristics of the grid layout, that is, each div is a layout container, without the concept of rows and columns, which is equivalent to small blocks filling the entire page. The size of the block can be changed, and the dragging up and down does not require the entire row to change its position, but the dragged small block changes its position, and the size can also be changed at will. One block can occupy the entire page, or many blocks can occupy the entire page. The VUE component is inside the block, which constitutes the dashboard, which is more convenient and flexible, and more efficient.

[0067] In the above embodiment, there is no limitation on how to execute step S101. In this embodiment, an optional implementation is provided, which may include the following steps:

[0068] Set the component list area in the visualization area in advance; Figure 4 The left area shown in the figure stores multiple subcomponents developed in the VUE project in the component list area, and sets unique identification information for each subcomponent.

[0069] This embodiment places each pre-built sub-component in a list in the visualization area, which is more convenient for displaying to the user for operation and is also convenient for management.

[0070] In the above embodiment, there is no limitation on how to execute step S103. In this embodiment, an optional implementation of the drag command is provided, which may include the following steps:

[0071] When a click instruction is detected in the visualization area, the initial position information of the click point corresponding to the click instruction in the visualization area is recorded;

[0072] Monitor the movement of the click point, and when the click point moves to the target subcomponent, record the current position information of the target subcomponent;

[0073] When the target subcomponent is dragged by the click point, the position information of the target subcomponent is changed according to the real-time position information of the click point until the click point stops moving. The drag command is generated by VUE according to the position change information during the movement.

[0074] In this step, the click point can be, for example, the mark of the mouse target on the browser page. The position of the mouse in the browser can be recorded in real time, and the coordinates of this position are recorded. The mouse moves to the element to be dragged, and the coordinates of the element are recorded. The mouse starts to drag the element. The position and coordinates of the mouse change during the movement of the mouse. At this time, the coordinates of the element to be dragged are changed according to the coordinates of the mouse. The mouse stops moving, and the element to be dragged moves to the position where the mouse ends, and the dragging ends. The entire dragging process can generate a drag command based on VUE, which can generate a dashboard more conveniently and efficiently.

[0075] In the above embodiment, there is no limitation on how to execute step S105. In this embodiment, corresponding implementation methods are provided based on the change of the position of the position container in the visualization area and the change of the size of the position container, respectively, and may include the following steps:

[0076] A drag instruction is generated based on the current container position of the target container when the click point falls on it, and the target container position when the click point drags the target container to completion; in response to the drag instruction, the target container is moved from the current container position to the target container position in the visualization area.

[0077] Generate a size change instruction based on the current corner position when the click point falls on the target corner of the target position container and the target corner position when the click point drags the target corner. In response to the size change instruction, change the size of the target position container by pulling the target corner.

[0078] In this embodiment, the CSS grid layout is used to set position containers on the page. The VUE drag command is used to drag the small components in the component list to the grid layout container. A small component occupies a position container. Then the position container is bound to the drag command, and the position container can be dragged and transformed. The position container does not have the concept of rows and columns, but the concept of a coordinate system. The horizontal axis of the browser page is the X-axis, and the vertical axis is the Y-axis. The coordinate points of the position occupied by each position container on the page are recorded. The position container is bound to the drag command and can be dragged to any position on the page. Then the container coordinates are recorded. You can also put the mouse on any corner of the container, write down the coordinates of the corner, drag the mouse, and record the position of the mouse, that is, the coordinates, at all times. Change the coordinates of the corner of the container being dragged to achieve the container resizing. The position and size of any container can be changed arbitrarily on the page until a suitable dashboard panel is generated by the configuration, such as Figure 4 As shown. Figure 5 and Figure 6 For example, the method according to this embodiment can change the position and size of position container 7 and position container 8 by dragging.

[0079] As can be seen from the above, this embodiment generates a dashboard based on VUE visual custom drag and drop, which is highly reusable. There is no need to develop dashboards one by one. You only need to focus on the development of components. You can quickly drag out a dashboard by dragging, which can be applied to many projects, that is, develop once and reuse multiple times. You can configure the dashboard yourself, which can effectively reduce the difficulty of dashboard development and improve the efficiency of dashboard generation.

[0080] The embodiment of the present invention also provides a corresponding device for the method for generating a business intelligence dashboard, which further makes the method more practical. The device can be described from the perspective of functional modules and hardware. The business intelligence dashboard generation device provided by the embodiment of the present invention is introduced below. The business intelligence dashboard generation device described below and the business intelligence dashboard generation method described above can be referred to each other.

[0081] From the perspective of functional modules, see Figure 7 , Figure 7 A structural diagram of a business intelligence dashboard generation device provided in an embodiment of the present invention in a specific implementation manner, the device may include:

[0082] The widget pre-compilation module 701 is used to pre-build multiple sub-components that are independent of each other and have no business logic relevance, and each sub-component is an element component that constitutes the dashboard.

[0083] The location container generating module 702 is used to generate a plurality of location containers in the visualization area of ​​the browser page of the dashboard to be generated; each location container corresponds to a subcomponent.

[0084] The drag module 703 is used to generate a drag instruction according to the current position information and target position information of the target subcomponent.

[0085] The binding module 704 is used to respond to the dragging instruction, drag the target subcomponent to the target position container, and bind the target position container to the dragging instruction so that the target position container has the property of changing shape and position.

[0086] The panel generation module 705 is used to respond to the position container adjustment instruction and adjust each target position container to a display panel style of the dashboard to be generated.

[0087] Optionally, in some implementations of this embodiment, the above-mentioned widget pre-compilation module 701 can be further used to: pre-set a component list area on the visualization area; store multiple sub-components developed in the VUE project in the component list area, and set unique identification information for each sub-component.

[0088] As an optional implementation of this embodiment, the location container generating module 702 may be further used to: set a plurality of location containers in a visualization area of ​​a browser page for generating a dashboard based on a grid layout of a cascading style sheet.

[0089] Optionally, in some other implementations of this embodiment, the drag module 703 can be further used to: when a click instruction is detected in the visualization area, record the initial position information of the click point corresponding to the click instruction in the visualization area; monitor the movement process of the click point, and when the click point moves to the target subcomponent, record the current position information of the target subcomponent; in the process of dragging the target subcomponent by the click point, change the position information of the target subcomponent during the movement according to the real-time position information of the click point, until the click point stops moving, and generate a drag instruction using VUE according to the position change information during the movement. As an optional implementation of this embodiment, the panel generation module 705 can be further used to: generate a drag instruction according to the current container position of the target position container where the click point falls, and the target container position when the click point ends dragging the target position container; in response to the drag instruction, move the target position container from the current container position to the target container position in the visualization area.

[0090] As an optional implementation in parallel with the above-mentioned present embodiment, the above-mentioned panel generation module 705 can be further used to: generate a size change instruction based on the current angular position when the click point falls on the target corner of the target position container, and the target angular position when the click point drags the target corner to end the movement; respond to the size change instruction, and change the size of the target position container by pulling the target corner.

[0091] The functions of the functional modules of the business intelligence dashboard generating device in the embodiment of the present invention can be specifically implemented according to the method in the above method embodiment. The specific implementation process can refer to the relevant description of the above method embodiment, which will not be repeated here.

[0092] It can be seen from the above that the embodiments of the present invention can flexibly, conveniently and quickly generate the required dashboard, and can effectively improve the efficiency of dashboard generation.

[0093] The business intelligence dashboard generation device mentioned above is described from the perspective of functional modules. Furthermore, the present application also provides an electronic device, which is described from the perspective of hardware. Figure 8 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application in one implementation manner. Figure 8 As shown, the electronic device includes a memory 80 for storing a computer program; and a processor 81 for implementing the steps of the method for generating a business intelligence dashboard as mentioned in any of the above embodiments when executing the computer program.

[0094] Among them, the processor 81 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and the processor 81 may also be a controller, a microcontroller, a microprocessor or other data processing chip. The processor 81 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field-Programmable Gate Array), and PLA (Programmable Logic Array). The processor 81 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 81 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 81 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0095] The memory 80 may include one or more computer-readable storage media, which may be non-transitory. The memory 80 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices and flash storage devices. The memory 80 may be an internal storage unit of an electronic device in some embodiments, such as a hard disk of a server. The memory 80 may also be an external storage device of an electronic device in other embodiments, such as a plug-in hard disk equipped on a server, a smart memory card (Smart Media Card, SMC), a secure digital (SecureDigital, SD) card, a flash card (Flash Card), etc. Further, the memory 80 may also include both an internal storage unit of an electronic device and an external storage device. The memory 80 may not only be used to store application software and various types of data installed in the electronic device, such as: the code of the program for executing the vulnerability handling method, etc., but may also be used to temporarily store data that has been output or is to be output. In this embodiment, the memory 80 is at least used to store the following computer program 801, wherein, after the computer program is loaded and executed by the processor 81, the relevant steps of the method for generating a business intelligence dashboard disclosed in any of the aforementioned embodiments can be implemented. In addition, the resources stored in the memory 80 may also include an operating system 802 and data 803, and the storage method may be temporary storage or permanent storage. The operating system 802 may include Windows, Unix, Linux, etc. The data 803 may include, but is not limited to, data corresponding to the results of generating a business intelligence dashboard.

[0096] In some embodiments, the electronic device may further include a display screen 82, an input / output interface 83, a communication interface 84 or a network interface, a power supply 85 and a communication bus 86. Among them, the display screen 82 and the input / output interface 83 such as a keyboard belong to the user interface, and the optional user interface may also include a standard wired interface, a wireless interface, etc. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, and an OLED (Organic Light-Emitting Diode) touch device, etc. The display may also be appropriately referred to as a display screen or a display unit, which is used to display information processed in the electronic device and to display a visual user interface. The communication interface 84 may optionally include a wired interface and / or a wireless interface, such as a WI-FI interface, a Bluetooth interface, etc., which are generally used to establish a communication connection between the electronic device and other electronic devices. The communication bus 86 may be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 8 Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0097] Those skilled in the art will understand that Figure 8 The structure shown in the figure does not constitute a limitation on the electronic device, and may include more or fewer components than shown in the figure, for example, it may also include a sensor 87 to implement various functions.

[0098] The functions of the functional modules of the electronic device described in the embodiment of the present invention can be specifically implemented according to the method in the above method embodiment. The specific implementation process can refer to the relevant description of the above method embodiment, which will not be repeated here.

[0099] It can be seen from the above that the embodiments of the present invention can flexibly, conveniently and quickly generate the required dashboard, and can effectively improve the efficiency of dashboard generation.

[0100] It is understandable that if the business intelligence dashboard generation method in the above embodiment is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium to execute all or part of the steps of the various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), electrically erasable programmable ROM, register, hard disk, multimedia card, card-type memory (such as SD or DX memory, etc.), magnetic memory, removable disk, CD-ROM, disk or optical disk, etc. Various media that can store program codes.

[0101] Based on this, an embodiment of the present invention further provides a readable storage medium storing a computer program, and when the computer program is executed by a processor, the steps of the method for generating a business intelligence dashboard described in any of the above embodiments are performed.

[0102] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the hardware disclosed in the embodiments, including devices and electronic devices, since they correspond to the methods disclosed in the embodiments, the description is relatively simple, and the relevant parts can be referred to the method part.

[0103] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0104] The above is a detailed introduction to a method, device, electronic device and readable storage medium for generating a business intelligence dashboard provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present invention, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the claims of the present application.

Claims

1. A method for generating a business intelligence dashboard, characterized in that: include: Pre-setting a component list area on the visualization area, storing multiple sub-components developed in the VUE project in the component list area, and setting unique identification information for each sub-component; Each type of dashboard is decomposed into multiple sub-components in advance, and each sub-component is decoupled. Each sub-component of the dashboard can be dragged and swapped, without involving the back-end Ajax call interface service. Each sub-component is independent of each other and has no business logic relevance. Each sub-component is an element component that composes the dashboard. Based on the grid layout of the cascading style sheet, multiple position containers are set in the visualization area of ​​the browser page of the dashboard to be generated; the visualization area is the display area of ​​the dashboard; each position container serves as the framework of the dashboard and is used to carry each subcomponent, and each position container corresponds to a subcomponent; Generate a drag command according to the current position information and target position information of the target subcomponent; In response to the drag instruction, the target subcomponent is dragged into a target position container, and the target position container is bound to the drag instruction so that the target position container has the property of changing shape and position; In response to the position container adjustment instruction, each target position container is adjusted to the display panel style of the dashboard to be generated; The step of generating a drag instruction according to the current position information and the target position information of the target subcomponent includes: When a click instruction is detected in the visualization area, initial position information of a click point in the visualization area corresponding to the click instruction is recorded; Monitoring the movement of the click point, and when the click point moves to the target subcomponent, recording the current position information of the target subcomponent; During the movement of the target subcomponent dragged by the click point, the position information of the target subcomponent during the movement is changed according to the real-time position information of the click point until the click point stops moving; Use VUE to generate drag instructions based on the position change information during the movement; The responding position container adjustment instruction adjusts each target position container to the display panel style of the dashboard to be generated, including: Generate a drag instruction according to the current container position of the target container where the click point falls and the target container position when the click point drags the target container to move; in response to the drag instruction, move the target container from the current container position to the target container position in the visualization area; Generate a size change instruction based on the current angular position of the target corner when the click point falls on the target corner of the target position container, and the target angular position when the click point finishes dragging the target corner; in response to the size change instruction, change the size of the target position container by pulling the target corner.

2. A business intelligence dashboard generation device, characterized in that: include: The widget pre-compilation module is used to pre-set the component list area on the visualization area, store multiple sub-components developed in the VUE project in the component list area, and set unique identification information for each sub-component; pre-decompose each type of dashboard into multiple sub-components, and drag and drop each sub-component of the dashboard to swap positions without involving the back-end ajax call interface service, decouple each sub-component, and make each sub-component independent of each other and unrelated to the business logic. Each sub-component is an element component that composes the dashboard; The location container generation module is used to set multiple location containers in the visualization area of ​​the browser page of the dashboard to be generated based on the grid layout of the cascading style sheet; the visualization area is the display area of ​​the dashboard; each location container serves as the framework of the dashboard and is used to carry each subcomponent, and each location container corresponds to a subcomponent; A drag module, used to generate a drag instruction according to the current position information and target position information of the target subcomponent; A binding module, for responding to the dragging instruction, dragging the target subcomponent to a target position container, and binding the target position container to the dragging instruction, so that the target position container has the property of changing shape and position; A panel generation module, used to respond to the position container adjustment instruction and adjust each target position container to a display panel style of the dashboard to be generated; Wherein, the drag module is further used for: When a click instruction is detected in the visualization area, initial position information of a click point in the visualization area corresponding to the click instruction is recorded; Monitoring the movement of the click point, and when the click point moves to the target subcomponent, recording the current position information of the target subcomponent; During the movement of the target subcomponent dragged by the click point, the position information of the target subcomponent during the movement is changed according to the real-time position information of the click point until the click point stops moving; Use VUE to generate drag instructions based on the position change information during the movement; Wherein, the panel generation module is further used for: Generate a drag instruction according to the current container position of the target container where the click point falls and the target container position when the click point drags the target container to move; in response to the drag instruction, move the target container from the current container position to the target container position in the visualization area; Generate a size change instruction based on the current angular position of the target corner when the click point falls on the target corner of the target position container, and the target angular position when the click point finishes dragging the target corner; in response to the size change instruction, change the size of the target position container by pulling the target corner.

3. An electronic device, characterized in that: The method comprises a processor and a memory, wherein the processor is used to implement the steps of the method for generating a business intelligence dashboard as claimed in claim 1 when executing a computer program stored in the memory.

4. A readable storage medium, characterized in that: The readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the method for generating a business intelligence dashboard as claimed in claim 1 are implemented.

Images