CN111813865A

CN111813865A - Method, system, equipment and medium for visualizing component data interaction

Info

Publication number: CN111813865A
Application number: CN202010749216.3A
Authority: CN
Inventors: 刘胜伟; 王晓芳; 陈兆瑞; 亓浩
Original assignee: Inspur General Software Co Ltd
Current assignee: Inspur General Software Co Ltd
Priority date: 2020-07-30
Filing date: 2020-07-30
Publication date: 2020-10-23
Anticipated expiration: 2040-07-30
Also published as: CN111813865B

Abstract

The invention discloses a method, a system, equipment and a storage medium for data interaction of a visual component, wherein the method comprises the following steps: storing data of a plurality of visualization components to a common area; in response to the first visualization component sending a request to the second visualization component to obtain or modify data, cloning data of the second visualization component of the common area and returning the cloned data to the first visualization component; synchronizing the modified data to the common area in response to modifying the cloned data; and synchronizing the data of the common region into the second visualization component in response to the data of the common region being different from the data of the second visualization component. According to the scheme provided by the invention, the shared data is stored in the public area, so that the data can be globally inquired and operated, the utilization rate of the data is greatly improved, and the data redundancy caused by data level transmission is avoided.

Description

Method, system, equipment and medium for visualizing component data interaction

Technical Field

The present invention relates to the field of visualization components, and more particularly, to a method, a system, a computer device, and a readable medium for data interaction of a visualization component.

Background

The industrial big data analysis is to show the industrial data processed by the server side to the client side in a chart form. In the traditional mode, only manual development can be adopted, a fixed chart can be displayed with fixed data, and once the chart display is changed, only codes can be modified or a data visual analysis interface can be developed again, so that a great deal of waste is caused to development resources;

in terms of visualization components, the data transfer between conventional visualization components is through the props. When the level nesting of the components exceeds 3 levels and above, the data can be repeatedly transmitted, and for the aspect of the data, errors can be caused because some data is not processed and finished or is not transmitted in the past in the transmission process; in the aspect of codes, a large amount of data transfer codes have great stability hidden trouble for later maintenance or function change.

In the aspect of data transmission between a visualization component and a server, the traditional mode is an htttp request mode, and if data needs to be displayed in real time, the data can only be displayed in a polling mode. If a large number of polling requests exist in one visual interface, not only can the client be blocked, but also some unnecessary data such as Cookie and the like can be sent to the server, so that a large amount of bandwidth is wasted, and further the user experience is poor.

Disclosure of Invention

In view of this, embodiments of the present invention provide a method, a system, a computer device, and a computer-readable storage medium for visualizing component data interaction, in which shared data is stored in a common area, so that the data can be globally queried and operated, and the utilization rate of the data is greatly improved, thereby avoiding data redundancy caused by data hierarchy transmission.

Based on the above object, an aspect of the embodiments of the present invention provides a method for visualizing component data interaction, including the following steps: storing data of a plurality of visualization components to a common area; in response to a first visualization component sending a request to a second visualization component to obtain or modify data, cloning data of the second visualization component of the common area and returning the cloned data to the first visualization component; synchronizing the modified data to the common area in response to the first visualization component modifying the cloned data; and synchronizing the data of the common region into the second visualization component in response to the data of the common region being different from the data of the second visualization component.

In some embodiments, further comprising: and connecting the client side where the visual component is located with the server side for the first time by using the webpage socket, and judging whether the first connection is successful.

In some embodiments, further comprising: and responding to the successful first connection, and performing second connection to the server based on a data analysis component in the client.

In some embodiments, further comprising: and responding to the successful connection of the second time, and actively pushing the received latest data to the client based on the server.

In another aspect of the embodiments of the present invention, a visualization component data interaction system is further provided, including: a storage module configured to store data of a plurality of visualization components to a common area; a cloning module configured to clone data of a second visual component of the common area in response to a request for obtaining or modifying the data being sent by a first visual component to the second visual component, and return the cloned data to the first visual component; a first synchronization module configured to synchronize the modified data to the common area in response to the first visualization component modifying the cloned data; and a second synchronization module configured to synchronize the data of the common region into the second visualization component in response to the data of the common region being different from the data of the second visualization component.

In some embodiments, further comprising: and the connection module is configured to perform first connection between the client side where the visual component is located and the server side by using the webpage socket, and judge whether the first connection is successful.

In some embodiments, further comprising: and the second connection module is configured to respond to the successful first connection and perform second connection to the server based on the data analysis component in the client.

In some embodiments, further comprising: and the pushing module is configured to respond to the successful second connection and actively push the received latest data to the client based on the server.

In another aspect of the embodiments of the present invention, there is also provided a computer device, including: at least one processor; and a memory storing computer instructions executable on the processor, the instructions when executed by the processor implementing the steps of the method as above.

In a further aspect of the embodiments of the present invention, a computer-readable storage medium is also provided, in which a computer program for implementing the above method steps is stored when the computer program is executed by a processor.

The invention has the following beneficial technical effects: by storing the shared data in the public area, the data can be globally inquired and operated, the utilization rate of the data is greatly improved, and data redundancy caused by data level transmission is avoided.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other embodiments can be obtained by using the drawings without creative efforts.

FIG. 1 is a schematic diagram of an embodiment of a method for visualizing component data interaction provided by the present invention;

fig. 2 is a schematic hardware structure diagram of an embodiment of a computer device for visualizing component data interaction provided in the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the following embodiments of the present invention are described in further detail with reference to the accompanying drawings.

It should be noted that all expressions using "first" and "second" in the embodiments of the present invention are used for distinguishing two entities with the same name but different names or different parameters, and it should be noted that "first" and "second" are merely for convenience of description and should not be construed as limitations of the embodiments of the present invention, and they are not described in any more detail in the following embodiments.

In view of the above, in a first aspect of the embodiments of the present invention, an embodiment of a method for visualizing component data interaction is provided. Fig. 1 is a schematic diagram illustrating an embodiment of a method for visualizing component data interaction provided by the present invention. As shown in fig. 1, the embodiment of the present invention includes the following steps:

s1, storing the data of the plurality of visual components in a public area;

s2, responding to a request that the first visual component sends data acquisition or modification to the second visual component, cloning the data of the second visual component in the public area, and returning the cloned data to the first visual component;

s3, responding to the first visual component to modify the cloned data, and synchronizing the modified data to the public area; and

s4, synchronizing the data of the common area into the second visual component in response to the data of the common area being different from the data of the second visual component.

The visual editing system is divided into four areas, namely an operation area, a component area, a drawing area and an editing area, wherein the functions of each area are as follows: the functions of importing, exporting, recording points, storing, previewing and the like of the canvas are mainly performed, and different alignment operations of multiple components are performed; a component area: the visual component menu can also be called as a visual component menu and is mainly used for distinguishing different types of visual components; a cloth drawing area: the carrier of the visual assembly, in this area, can carry on various permutation, make up and delete, duplicate, cut, paste, group, lock a series of operations to the assembly; editing area: only the visual components selected in the canvas area are bound for style beautification and display data.

The visual editing system componentizes visual charts, including charts, tables, industrial graphs, materials, maps, and the like. The components are dragged into the canvas, the sizes and the positions of the components can be dragged and adjusted, and style beautification and data binding are carried out on the currently selected visual components through the editing area.

And storing the data of the plurality of visual components in a common area. The canvas is initialized and the data of the canvas is stored in a common area (store). And dragging the visual component onto the canvas, and initializing default data of the component into the hierarchical information of the canvas and storing the data into the store. Selecting a visual component, selecting a style attribute, beautifying the style of the component, updating beautified configuration data into StyleConfig of the component, selecting a data attribute, associating the component with a data source, and storing associated information into DataConfig of the component. And storing the canvas, namely arranging the canvas configuration information and the component configuration information in the store into json data and storing the json data into a database.

Acquiring json data of a data visualization analysis interface according to the canvas ID, acquiring interim canvas configuration information and component configuration information, initializing the interface according to the canvas information, generating a visualization chart according to the component configuration information, reading DataConfig in the component information, establishing association between the component and the server, and displaying the data of the server on the analysis interface.

In response to the first visualization component sending a request to the second visualization component to obtain or modify data, data of the second visualization component of the common area is cloned and the cloned data is returned to the first visualization component. For example, when a first visualization component a needs some piece of information of a second visualization component B, a get data action may be initiated by component a, passing the id of component B into a get data method of the data processing layer, deep cloning the data that the component B was screened in the method to store, and returning to component a.

In response to modifying the cloned data, the modified data is synchronized to the common area. When the component A needs to modify the data in the component B, the acquired data of the component B is modified, a data modification method of a data processing layer is called, and the modified data of the component B is updated to the store.

In response to the data of the common region being different from the data of the second visualization component, the data of the common region is synchronized into the second visualization component. Component B may listen for data changes in the store to automatically update the most up-to-date data to component B. The flow does not allow the component A to directly process the data of the component B in the store, and the operation must be performed by a method of a data processing layer, so that a way of data variability is controlled, the safety of the data is effectively controlled, and the change information of the data is mastered.

Under the current industrial big data form, in the face of high-frequency data transmission and processing, the requirement cannot be met only by means of http requests, and the requests cannot be initiated only by a client, so that the timeliness of the data is greatly reduced, at the moment, websocket (webpage socket) is required to perform data interaction, the client is connected with a server, and the server actively pushes the data to the client.

And judging whether the client supports the websocket, if not, using http to request data, rendering the data to the component, if so, judging whether the current visual interface opens the websocket, and if not, using the http to request.

In some embodiments, further comprising: and connecting the client side where the visual component is located with the server side for the first time by using the webpage socket, and judging whether the first connection is successful. The current visualization interface opens the websocket, and then the connection channel between the client and the server can be established in an attempt.

In some embodiments, further comprising: and responding to the successful connection of the second time, and actively pushing the received latest data to the client based on the server. The component receives data transmitted by the server at any time and renders the data on a visual analysis interface

The embodiment of the invention modularizes the visual chart, and facilitates free arrangement and combination. The method comprises the steps of modularizing various charts, tables, maps, industrial graphs, materials and the like, dragging the charts to a canvas area, carrying out position adjustment, style beautification and data binding, integrating canvas information and component information into json data and storing the json data into a database, and automatically generating html codes by analyzing the json data during previewing, establishing association with a server and completing development of a data visualization analysis interface.

The data among the components of the embodiment of the invention is shared, and the hierarchical transmission is avoided. The data information of the visual component is initialized into the store, when the data of the visual component is changed, a method of a data processing layer is called, the data is processed and replaced to old data in the store, the process can only modify the data of the store through the method of the data processing layer, the visual component is not allowed to directly modify the data of the store, and therefore the way of data variability is controlled, and the safety of the data is also controlled.

The data transmission between the components and the server side of the embodiment of the invention not only supports http, but also supports websocket, and has more stable guarantee for the timely display of data. A data transmission channel is established with a server side through a websocket in a data visualization interface, related display data are subscribed through a visualization component, the server side can transmit data to a client side, the visualization component renders the data to a specified visualization component according to a component id, and therefore the client side and the server side achieve real-time data transmission.

It should be particularly noted that, the steps in the embodiments of the method for visualizing component data interaction described above can be mutually intersected, replaced, added, or deleted, and therefore, these methods for visualizing component data interaction, which are transformed by reasonable permutation and combination, should also belong to the scope of the present invention, and should not limit the scope of the present invention to the embodiments.

In view of the above object, a second aspect of the embodiments of the present invention provides a visualization component data interaction system, including: a storage module configured to store data of a plurality of visualization components to a common area; a cloning module configured to clone data of a second visual component of the common area in response to a request for obtaining or modifying the data being sent by a first visual component to the second visual component, and return the cloned data to the first visual component; a first synchronization module configured to synchronize the modified data to the common region in response to a first visualization component modifying the cloned data; and a second synchronization module configured to synchronize the data of the common region into the second visualization component in response to the data of the common region being different from the data of the second visualization component.

In view of the above object, a third aspect of the embodiments of the present invention provides a computer device, including: at least one processor; and a memory storing computer instructions executable on the processor, the instructions being executable by the processor to perform the steps of: s1, storing the data of the plurality of visual components in a public area; s2, responding to a request that the first visual component sends data acquisition or modification to the second visual component, cloning the data of the second visual component in the public area, and returning the cloned data to the first visual component; s3, responding to the first visual component to modify the cloned data, and synchronizing the modified data to the public area; and S4, synchronizing the data of the common area into the second visualization component in response to the data of the common area being different from the data of the second visualization component.

Fig. 2 is a schematic hardware structural diagram of an embodiment of the computer device for visualizing component data interaction provided by the present invention.

Taking the apparatus shown in fig. 2 as an example, the apparatus includes a processor 301 and a memory 302, and may further include: an input device 303 and an output device 304.

The processor 301, the memory 302, the input device 303 and the output device 304 may be connected by a bus or other means, and fig. 2 illustrates the connection by a bus as an example.

The memory 302 is a non-volatile computer-readable storage medium and can be used for storing non-volatile software programs, non-volatile computer-executable programs, and modules, such as program instructions/modules corresponding to the method for visualizing component data interaction in the embodiments of the present application. The processor 301 executes various functional applications of the server and data processing by executing the nonvolatile software programs, instructions and modules stored in the memory 302, namely, the method for visualizing component data interaction of the above method embodiment is realized.

The memory 302 may include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function; the storage data area may store data created from use of a method of visualizing component data interaction, and the like. Further, the memory 302 may include high speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid state storage device. In some embodiments, memory 302 optionally includes memory located remotely from processor 301, which may be connected to a local module via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The input device 303 may receive information such as a user name and a password that are input. The output means 304 may comprise a display device such as a display screen.

Program instructions/modules corresponding to one or more methods of visualizing component data interaction are stored in the memory 302 and, when executed by the processor 301, perform the methods of visualizing component data interaction in any of the method embodiments described above.

Any embodiment of a computer device for performing the method for visualizing assembly data interaction described above may achieve the same or similar effects as any of the preceding method embodiments corresponding thereto.

The invention also provides a computer readable storage medium storing a computer program which, when executed by a processor, performs the method as above.

Finally, it should be noted that, as one of ordinary skill in the art can appreciate that all or part of the processes of the methods of the above embodiments can be implemented by a computer program to instruct related hardware, and the program of the method for visualizing component data interaction can be stored in a computer readable storage medium, and when executed, the program can include the processes of the embodiments of the methods as described above. The storage medium of the program may be a magnetic disk, an optical disk, a Read Only Memory (ROM), a Random Access Memory (RAM), or the like. The embodiments of the computer program may achieve the same or similar effects as any of the above-described method embodiments.

Furthermore, the methods disclosed according to embodiments of the present invention may also be implemented as a computer program executed by a processor, which may be stored in a computer-readable storage medium. Which when executed by a processor performs the above-described functions defined in the methods disclosed in embodiments of the invention.

Further, the above method steps and system elements may also be implemented using a controller and a computer readable storage medium for storing a computer program for causing the controller to implement the functions of the above steps or elements.

Further, it should be appreciated that the computer-readable storage media (e.g., memory) herein can be either volatile memory or nonvolatile memory, or can include both volatile and nonvolatile memory. By way of example, and not limitation, nonvolatile memory can include Read Only Memory (ROM), Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM), which can act as external cache memory. By way of example and not limitation, RAM is available in a variety of forms such as synchronous RAM (DRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDRSDRAM), Enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), and Direct Rambus RAM (DRRAM). The storage devices of the disclosed aspects are intended to comprise, without being limited to, these and other suitable types of memory.

Those of skill would further appreciate that the various illustrative logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein may be implemented as electronic hardware, computer software, or combinations of both. To clearly illustrate this interchangeability of hardware and software, various illustrative components, blocks, modules, circuits, and steps have been described above generally in terms of their functionality. Whether such functionality is implemented as software or hardware depends upon the particular application and design constraints imposed on the overall system. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the disclosed embodiments of the present invention.

The various illustrative logical blocks, modules, and circuits described in connection with the disclosure herein may be implemented or performed with the following components designed to perform the functions herein: a general purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or any combination of these components. A general purpose processor may be a microprocessor, but in the alternative, the processor may be any conventional processor, controller, microcontroller, or state machine. A processor may also be implemented as a combination of computing devices, e.g., a combination of a DSP and a microprocessor, a plurality of microprocessors, one or more microprocessors in conjunction with a DSP, and/or any other such configuration.

The steps of a method or algorithm described in connection with the disclosure herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module may reside in RAM memory, flash memory, ROM memory, EPROM memory, EEPROM memory, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. In the alternative, the storage medium may be integral to the processor. The processor and the storage medium may reside in an ASIC. The ASIC may reside in a user terminal. In the alternative, the processor and the storage medium may reside as discrete components in a user terminal.

In one or more exemplary designs, the functions may be implemented in hardware, software, firmware, or any combination thereof. If implemented in software, the functions may be stored on or transmitted over as one or more instructions or code on a computer-readable medium. Computer-readable media includes both computer storage media and communication media including any medium that facilitates transfer of a computer program from one place to another. A storage media may be any available media that can be accessed by a general purpose or special purpose computer. By way of example, and not limitation, such computer-readable media can comprise RAM, ROM, EEPROM, CD-ROM or other optical disk storage, magnetic disk storage or other magnetic storage devices, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and that can be accessed by a general-purpose or special-purpose computer, or a general-purpose or special-purpose processor. Also, any connection is properly termed a computer-readable medium. For example, if the software is transmitted from a website, server, or other remote source using a coaxial cable, fiber optic cable, twisted pair, Digital Subscriber Line (DSL), or wireless technologies such as infrared, radio, and microwave, then the coaxial cable, fiber optic cable, twisted pair, DSL, or wireless technologies such as infrared, radio, and microwave are included in the definition of medium. Disk and disc, as used herein, includes Compact Disc (CD), laser disc, optical disc, Digital Versatile Disc (DVD), floppy disk, blu-ray disc where disks usually reproduce data magnetically, while discs reproduce data optically with lasers. Combinations of the above should also be included within the scope of computer-readable media.

The foregoing is an exemplary embodiment of the present disclosure, but it should be noted that various changes and modifications could be made herein without departing from the scope of the present disclosure as defined by the appended claims. The functions, steps and/or actions of the method claims in accordance with the disclosed embodiments described herein need not be performed in any particular order. Furthermore, although elements of the disclosed embodiments of the invention may be described or claimed in the singular, the plural is contemplated unless limitation to the singular is explicitly stated.

It should be understood that, as used herein, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context clearly supports the exception. It should also be understood that "and/or" as used herein is meant to include any and all possible combinations of one or more of the associated listed items.

The numbers of the embodiments disclosed in the embodiments of the present invention are merely for description, and do not represent the merits of the embodiments.

It will be understood by those skilled in the art that all or part of the steps for implementing the above embodiments may be implemented by hardware, or may be implemented by a program instructing relevant hardware, and the program may be stored in a computer-readable storage medium, and the above-mentioned storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.

Those of ordinary skill in the art will understand that: the discussion of any embodiment above is meant to be exemplary only, and is not intended to intimate that the scope of the disclosure, including the claims, of embodiments of the invention is limited to these examples; within the idea of an embodiment of the invention, also technical features in the above embodiment or in different embodiments may be combined and there are many other variations of the different aspects of the embodiments of the invention as described above, which are not provided in detail for the sake of brevity. Therefore, any omissions, modifications, substitutions, improvements, and the like that may be made without departing from the spirit and principles of the embodiments of the present invention are intended to be included within the scope of the embodiments of the present invention.

Claims

1. A method of visualizing component data interaction, comprising the steps of:

storing data of a plurality of visualization components to a common area;

in response to a first visualization component sending a request to a second visualization component to obtain or modify data, cloning data of the second visualization component of the common area and returning the cloned data to the first visualization component;

synchronizing the modified data to the common area in response to the first visualization component modifying the cloned data; and

synchronizing the data of the common region into the second visualization component in response to the data of the common region being different from the data of the second visualization component.

2. The method of claim 1, further comprising:

and connecting the client side where the visual component is located with the server side for the first time by using the webpage socket, and judging whether the first connection is successful.

3. The method of claim 2, further comprising:

and responding to the successful first connection, and performing second connection to the server based on a data analysis component in the client.

4. The method of claim 3, further comprising:

and responding to the successful connection of the second time, and actively pushing the received latest data to the client based on the server.

5. A system for visualizing component data interaction, comprising:

a storage module configured to store data of a plurality of visualization components to a common area;

a cloning module configured to clone data of a second visual component of the common area in response to a request for obtaining or modifying the data being sent by a first visual component to the second visual component, and return the cloned data to the first visual component;

a first synchronization module configured to synchronize the modified data to the common area in response to the first visualization component modifying the cloned data; and

a second synchronization module configured to synchronize the data of the common region into the second visualization component in response to the data of the common region being different from the data of the second visualization component.

6. The system of claim 5, further comprising:

and the connection module is configured to perform first connection between the client side where the visual component is located and the server side by using the webpage socket, and judge whether the first connection is successful.

7. The system of claim 6, further comprising:

and the second connection module is configured to respond to the successful first connection and perform second connection to the server based on the data analysis component in the client.

8. The system of claim 7, further comprising:

and the pushing module is configured to respond to the successful second connection and actively push the received latest data to the client based on the server.

9. A computer device, comprising:

at least one processor; and

a memory storing computer instructions executable on the processor, the instructions when executed by the processor implementing the steps of the method of any one of claims 1 to 4.

10. A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the steps of the method according to any one of claims 1 to 4.