CN111813865B

CN111813865B - Method, system, equipment and medium for visual component data interaction

Info

Publication number: CN111813865B
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: 2023-07-18
Anticipated expiration: 2040-07-30
Also published as: CN111813865A

Abstract

The invention discloses a method, a system, equipment and a storage medium for visual component data interaction, wherein the method comprises the following steps: storing data of the plurality of visualization components in a common area; responding to the first visual component to send a request for acquiring or modifying data 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; in response to modifying the cloned data, synchronizing the modified data to the common region; and responsive to the data of the common region being different from the data of the second visualization component, synchronizing the data of the common region into the second visualization component. According to the scheme provided by the invention, the shared data is stored in the public area, so that global inquiry and operation can be carried out on the data, the utilization rate of the data is greatly improved, and the data redundancy caused by data hierarchy transmission is avoided.

Description

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

Technical Field

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

Background

And analyzing industrial big data, namely displaying the industrial data processed by the server to the client in a chart form. In the traditional mode, only manual development can be adopted, a fixed chart can display fixed data, and once the chart display is changed in the period, a code can be modified or a data visualization analysis interface can be redeveloped, so that a great amount of waste is caused for developing resources;

in terms of visualization components, data transfer between conventional visualization components is through tips. When the level nesting of the components exceeds 3 levels and above, repeated transmission of data is caused, and in the aspect of data, some piece of data is not processed or is not transmitted in the past in the transmission process, so that error reporting is caused; in terms of code, a large amount of data transfer code can present a significant potential stability hazard for later maintenance or functional modification.

In terms of data transmission between the visual component and the server, the conventional method is an htttp request method, and if the data needs to be displayed in real time, only a polling method can be adopted. If a large number of polling requests exist in one visual interface, not only the client is blocked, but also some unnecessary data such as Cookies and the like are 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, an objective of the embodiments of the present invention is to provide a method, a system, a computer device, and a computer readable storage medium for data interaction of a visual component, which can perform global query and operation on data by storing shared data in a common area, so as to greatly improve the utilization rate of the data, and thereby avoid data redundancy caused by data hierarchy transfer.

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

In some embodiments, further comprising: and performing first connection between the client side where the visual component is positioned and the server side by using a webpage socket, and judging whether the first connection is successful or not.

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

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

In another aspect of the embodiment of the present invention, there is also provided a visual component data interaction system, including: a storage module configured to store data of the plurality of visualization components to a common area; the cloning module is configured to respond to the request of acquiring or modifying data sent by the first visual component to the second visual component, clone the data of the second visual component of the public area 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 the first visualization component modifying the cloned data; and a second synchronization module configured to synchronize 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.

In some embodiments, further comprising: and the connection module is configured to connect the client where the visual component is positioned with the server for the first time by using the webpage socket, and judge whether the first connection is successful or not.

In some embodiments, further comprising: and the second connection module is configured to respond to the success of the first connection and perform a 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 actively push the received latest data to the client based on the server in response to the successful second connection.

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

In yet another aspect of the embodiments of the present invention, there is also provided a computer-readable storage medium storing a computer program which, when executed by a processor, implements the method steps as described above.

The invention has the following beneficial technical effects: by storing the shared data in the public area, global inquiry and operation can be carried out on the data, the utilization rate of the data is greatly improved, and data redundancy caused by data hierarchy transmission is avoided.

Drawings

In order to more clearly illustrate the embodiments of the invention or the technical solutions in the prior art, the drawings that are necessary for the description of the embodiments or the prior art will be briefly described, it being obvious that the drawings in the following description are only some embodiments of the invention and that other embodiments may be obtained according to these drawings without inventive effort for a person skilled in the art.

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 of an embodiment of a computer device for visual component data interaction provided by 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 will be described in further detail with reference to the accompanying drawings.

It should be noted that, in the embodiments of the present invention, all the expressions "first" and "second" are used to distinguish two entities with the same name but different entities or different parameters, and it is noted that the "first" and "second" are only used for convenience of expression, and should not be construed as limiting the embodiments of the present invention, and the following embodiments are not described one by one.

Based on the above object, 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 data of a plurality of visual components in a public area;

s2, responding to the first visual component to send a request for acquiring or modifying data 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 cloned data, and synchronizing the modified data to a public area; and

and S4, responding to the fact that the data of the public area are different from the data of the second visual assembly, and synchronizing the data of the public area into the second visual assembly.

The visual editing system is divided into four areas of an operation area, a component area, a canvas area and an editing area, the functions of each area are as follows, and the operation area is as follows: mainly comprises functions of importing, exporting, recording points, storing, previewing and the like of canvas, and different alignment operations of multiple components; component area: the menu is also called a visual component menu and is mainly used for distinguishing different types of visual components; canvas area: the carrier of the visual assembly, in this area, can carry on various arrangements, combination and delete, duplicate, cut, paste, group, lock a series of operations to the assembly; editing area: so long as style beautification and binding of presentation data are performed for the visualization component selected by the canvas area.

The visual editing system componentizes visual charts, including charts, tables, industrial graphics, materials, maps, and the like. The size and the position of the components can be adjusted by dragging the components into the canvas, and the currently selected visual components are beautified in style and bound with data through the editing area.

The data of the plurality of visualization components is stored in a common area. The canvas is initialized and data for the canvas is stored into a common area (store). The visual components are dragged onto the canvas while the default data for the components is initialized into the hierarchy information of the canvas and saved to the store. Selecting a visual component, selecting a style attribute, carrying out style beautification on the component, updating beautified configuration data into StyleConfig of the component, selecting a data attribute, associating the component with a data source, and storing association information into DataConfig of the component. And (3) storing canvas, namely organizing canvas configuration information and 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 canvas configuration information and component configuration information in the period, 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 a 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 acquire or modify data, cloning the data of the second visualization component of the common area and returning the cloned data to the first visualization component. For example, when the first visualization component a needs a certain piece of information of the second visualization component B, the component a may initiate a data acquisition behavior, transmit the id of the component B to a data processing layer for acquiring data, perform deep cloning by using the method to screen the data of the component B in store, and return the data to the component a.

In response to modifying the cloned data, the modified data is synchronized to the common region. When the component A needs to modify the data in the component B, after modifying the acquired data of the component B, calling a data modifying method of the data processing layer, and updating the modified data of the component B into a store.

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. The component B may listen for data changes in the store, automatically updating the latest data into the 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 data processing layer method, so that the way of data variability is controlled, the safety of the data is effectively controlled, and the change information of the data is like a finger palm.

Under the current industrial big data form, the high-frequency data transmission and processing are faced, the demand cannot be met only by means of http requests, and the request cannot be initiated only by the client, so that the timeliness of the data is greatly reduced, websocket (web socket) is needed for data interaction, the client is connected with the server, and the server actively pushes the data to the client.

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

In some embodiments, further comprising: and performing first connection between the client side where the visual component is positioned and the server side by using a webpage socket, and judging whether the first connection is successful or not. The current visual interface opens websocket to attempt to establish a connection channel between the client and the server.

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

The embodiment of the invention can make the visual chart be modularized, thereby being convenient for free arrangement and combination. The method comprises the steps of componentizing various charts, tables, maps, industrial graphics, materials and the like, dragging the charts, tables, maps, industrial graphics, materials and the like to a canvas area, carrying out position adjustment, style beautifying and data binding, integrating canvas information and component information into json data, storing the json data into a database, and completing initialization of the canvas and configuration information of components by analyzing the json data during previewing, automatically generating html codes, establishing association with a server, and completing development of a data visualization analysis interface.

The data among the components in the embodiment of the invention can be shared, and hierarchical transmission is avoided. The method comprises the steps of initializing data information of a visual component into a store, when the data of the visual component is changed, calling a method of a data processing layer, processing the data and replacing the data with old data in the store, wherein the process can only modify the data of the store by the method of the data processing layer, and the visual component is not allowed to directly modify the data of the store, so that a data variability way is controlled, and the security of the data is also controlled.

The data transmission between the component and the server in the embodiment of the invention not only supports http, but also supports websocket, and has more stable guarantee for timely displaying data. And establishing a data transmission channel with the server through websocket in the data visualization interface, subscribing related display data through the visualization component, transmitting data to the client by the server, and rendering the data to the appointed visualization component by the visualization component according to the component id by the visualization component, so that the real-time data transmission between the client and the server is realized.

It should be noted that, in the embodiments of the method for data interaction of a visual component, the steps may be intersected, replaced, added and deleted, so that the method for data interaction of a visual component by using these reasonable permutation and combination transformations shall also belong to the protection scope of the present invention, and shall not limit the protection scope of the present invention to the embodiments.

Based on the above object, a second aspect of the embodiment of the present invention provides a visual component data interaction system, including: a storage module configured to store data of the plurality of visualization components to a common area; the cloning module is configured to respond to the request of acquiring or modifying data sent by the first visual component to the second visual component, clone the data of the second visual component of the public area 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 the first visualization component modifying the cloned data; and a second synchronization module configured to synchronize 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.

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 data of a plurality of visual components in a public area; s2, responding to the first visual component to send a request for acquiring or modifying data 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 cloned data, and synchronizing the modified data to a public area; and S4, responding to the fact that the data of the public area is different from the data of the second visual component, and synchronizing the data of the public area into the second visual component.

As shown in fig. 2, a hardware structure diagram of an embodiment of the above-mentioned visual component data interaction computer device is provided in the present invention.

Taking the example of the apparatus shown in fig. 2, 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, memory 302, input device 303, and output device 304 may be connected by a bus or other means, for example in fig. 2.

The memory 302 is used as a non-volatile computer readable storage medium, and may be used to store 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, i.e., a method of implementing the visual component data interaction of the above-described method embodiments, by running non-volatile software programs, instructions and modules stored in the memory 302.

Memory 302 may include a storage program area that may store an operating system, at least one application program required for functionality, and a storage data area; the storage data area may store data created according to the use of the method of visualizing component data interactions, etc. In addition, 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 may optionally include memory located remotely from processor 301, which may be connected to the 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 input information such as a user name and a password. The output device 304 may include 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, which when executed by the processor 301, perform the method of visualizing component data interaction in any of the method embodiments described above.

Any one embodiment of a computer device that performs the above method for visualizing component data interaction may achieve the same or similar effects as any of the foregoing 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 will be appreciated by those skilled in the art, all or part of the procedures in the methods of the embodiments described above may be implemented by a computer program to instruct related hardware, and the program of the method for visualizing the component data interaction may be stored in a computer readable storage medium, and the program may include the procedures of the embodiments of the methods described above when executed. 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 computer program embodiments described above may achieve the same or similar effects as any of the method embodiments described above.

Furthermore, the method disclosed according to the embodiment 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. The above-described functions defined in the methods disclosed in the embodiments of the present invention are performed when the computer program is executed by a processor.

Furthermore, the above-described method steps and system units may also be implemented using a controller and a computer-readable storage medium storing a computer program for causing the controller to implement the above-described steps or unit functions.

Further, it should be appreciated that the computer-readable storage medium (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 acts as external cache memory. By way of example, and not limitation, RAM may be 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 present disclosure.

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 thereof. 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 location 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 general purpose or special purpose processor. Further, 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 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 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 foregoing embodiment of the present invention has been disclosed with reference to the number of embodiments for the purpose of description only, and does not represent the advantages or disadvantages 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 for instructing relevant hardware, and the program may be stored in a computer readable storage medium, where the storage medium may be a read-only memory, a magnetic disk or an optical disk, etc.

Those of ordinary skill in the art will appreciate that: the above discussion of any embodiment is merely exemplary and is not intended to imply that the scope of the disclosure of embodiments of the invention, including the claims, is limited to such examples; combinations of features of the above embodiments or in different embodiments are also possible within the idea of an embodiment of the invention, and many other variations of the different aspects of the embodiments of the invention as described above exist, which are not provided in detail for the sake of brevity. Therefore, any omission, modification, equivalent replacement, improvement, etc. of the embodiments should be included in the protection scope of the embodiments of the present invention.

Claims

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

storing data of the plurality of visualization components in a common area;

responding to a request of acquiring or modifying data sent by a first visual component to a second visual component, cloning the data of the second visual component of the public area, and returning the cloned data to the first visual component;

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

and responsive to the data of the common region being different from the data of the second visualization component, synchronizing the data of the common region into the second visualization component.

2. The method as recited in claim 1, further comprising:

and performing first connection between the client side where the visual component is positioned and the server side by using a webpage socket, and judging whether the first connection is successful or not.

3. The method as recited in claim 2, further comprising:

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

4. A method according to claim 3, further comprising:

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

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

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

the cloning module is configured to respond to the request of acquiring or modifying data sent by the first visual component to the second visual component, clone the data of the second visual component of the public area 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 the first visualization component modifying the cloned data; and

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 connect the client where the visual component is positioned with the server for the first time by using the webpage socket, and judge whether the first connection is successful or not.

7. The system of claim 6, further comprising:

and the second connection module is configured to respond to the success of the first connection and perform a 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 actively push the received latest data to the client based on the server in response to the successful second connection.

9. A computer device, comprising:

at least one processor; and

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

10. A computer readable storage medium storing a computer program, characterized in that the computer program when executed by a processor implements the steps of the method of any of claims 1-4.