CN110597586A - Method and device for large screen layout of componentized layout based on dragging - Google Patents
Method and device for large screen layout of componentized layout based on dragging Download PDFInfo
- Publication number
- CN110597586A CN110597586A CN201910765518.7A CN201910765518A CN110597586A CN 110597586 A CN110597586 A CN 110597586A CN 201910765518 A CN201910765518 A CN 201910765518A CN 110597586 A CN110597586 A CN 110597586A
- Authority
- CN
- China
- Prior art keywords
- component
- canvas
- dragging
- data
- event
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a device for large screen layout in a modularization mode based on dragging, wherein the method comprises the following steps: importing static data Excel/csv files and relational database data; selecting a target data source according to the imported static data Excel/csv file and the relational database data, and generating a visual view through a view model, wherein the view model comprises a chart component and a custom component; and freely dragging and laying out the visual view in the canvas according to a dragging instruction so as to realize the style configuration of the chart component and the custom component. The method displays the complex data in a visual mode, freely drags various components in the large screen, arranges the components flexibly, can meet various different service scenes, and effectively solves the problems that the conventional large-screen visual system has single components, customized layout and incapability of making a large screen according to actual scenes of the user.
Description
Technical Field
The invention relates to the technical field of big data visualization, in particular to a method and a device for large screen layout in a modularization mode based on dragging.
Background
In the related art, a method for configuring a large visual screen based on dragging comprises the following specific steps: step (1), constructing a basic chart; step (2), establishing a visualization area and configuring the size of the visualization area; and (3) selecting and dragging the basic chart established in the step (1) to a proper position of a visualization area, and rendering the visualization chart. The construction of the visual large screen is not complicated and time-consuming, and only the constructed basic chart needs to be dragged. In addition, the method and the device for large-screen visualization of data comprise the following steps: s1, packaging and expanding each visual component; s2, constructing a visualization engine by the packaged visualization components, wherein the visualization engine comprises a chart component library and a space geographic information component library and is used for supporting multi-data source access, configured interaction analysis and multi-screen adaptation; s3 declaring the layout, data source, chart linkage, style file, plug-in mechanism and component specification of various chart components through configuration files; s4 rendering the configuration file into a data large screen through a visualization engine.
However, in the existing large-screen visualization system, packaging and using of basic charts are already achieved, and a large screen is generated by dragging a chart component in the large-screen system. However, a user-defined component and a flexible layout are lacked, the basic diagram cannot meet the requirements of a user on the components such as user-defined characters, pictures and carousel lists, and a single large-screen template cannot meet different scenes of the user. Therefore, the abundant self-defined component library and flexible layout are problems which are urgently needed to be solved by large-screen visualization. However, existing large-screen visualization systems are generated based on basic diagrams and customized layouts, and a solution is urgently needed for custom components such as characters and pictures and the like and layout which is not flexible.
Disclosure of Invention
The present application is based on the recognition and discovery by the inventors of the following problems:
in different business scenes, a large amount of data is generated, and useful information cannot be distinguished by users according to the complex abstract data. And compared with boring characters or numbers, the human brain has more intuitive understanding and comprehension of visual elements such as figures, colors, positions, sizes and the like. Compared with the traditional chart and data instrument panel, the large-screen data visualization is in a more vivid and friendly form, the business insights hidden behind the transient and numerous data are presented in real time, and the interactive real-time data visualization large screen is used for helping business personnel to find and diagnose business problems. However, in the current visualization system, the components for making the large screen are single, most of the components are customized large screens, and a user cannot make the large screen according to his own idea, so that in such a scene, flexible large screen layout and rich componentization are key subjects of current research, and a component layout large screen technology based on dragging is very important.
The present invention is directed to solving, at least to some extent, one of the technical problems in the related art.
Therefore, one object of the present invention is to provide a dragging-based large screen layout method for componentization, in which complex data is visually displayed, various components are freely dragged in a large screen, and flexibly laid out, so that various different service scenes can be satisfied, and the problems that the conventional large screen visualization system is single in component, customized in layout, and incapable of making a large screen according to the actual scene of the user can be effectively solved.
Another object of the present invention is to provide a drag-based modular layout large screen device.
In order to achieve the above object, an embodiment of the invention provides a method for large screen layout based on drag-and-drop modularization, which includes the following steps: importing static data Excel/csv files and relational database data; selecting a target data source according to the imported static data Excel/csv file and the relational database data, and generating a visual view through a view model, wherein the view model comprises a chart component and a custom component; and freely dragging and laying out the visual view in the canvas according to a dragging instruction so as to realize the style configuration of the chart component and the custom component.
According to the method for layout of the large screen based on the components dragged by the embodiment of the invention, the large screen is generated by manufacturing a flow design of the large screen, importing a data source, drawing a view and dragging the configuration components; the user can directly drag the components to be presented onto the canvas without coding, and the components are configured and freely laid out; based on two kinds of data sources of static data and dynamic data, abundant component library generates a one-stop large screen by dragging a configurable mode, so that a user designs a suitable large screen application according to an application scene of the user, complex data is displayed in a visual mode, various components are dragged freely in the large screen, flexible layout is realized, various different service scenes can be met, and the problems that the conventional large screen visualization system is single in component, customized in layout and incapable of making the large screen according to an actual scene of the user are effectively solved.
In addition, the drag-based modular layout large screen method according to the above embodiment of the present invention may further have the following additional technical features:
further, in an embodiment of the present invention, the importing the static data Excel/csv file and the relational database data includes: receiving the Excel/csv file uploaded by a user, and/or collecting data and generating the csv file after data processing; and/or reading the relational database data from the relational database.
Further, in an embodiment of the present invention, the method further includes: and changing configuration items according to the selected canvas size, the background color, the canvas zooming and the components in the canvas.
Further, in an embodiment of the present invention, the method further includes: the diagram components are dragged or clicked into a canvas, and are freely dragged in the canvas, and the positions of all the components are monitored and recorded; setting the dragable attribute of the chart component to true in the process of dragging the chart component to the canvas, monitoring an ondragstart event, and executing when the dragging action of the selected chart element is started; in the process that the diagram component is dragged in the canvas, an ondrop event is monitored, namely, the ondrop event is triggered when the diagram component is dropped on the canvas, an ondragover event is monitored, and the ondrop event is executed when the diagram component is dragged on the canvas.
Further, in an embodiment of the present invention, the method further includes: and encapsulating a DragTool component for dragging the custom component, recording the width and height attributes of the component position in the DragTool component, and monitoring the dragging event and the zooming event of the custom component.
In order to achieve the above object, an embodiment of another aspect of the present invention provides a drag-based modular layout large-screen device, including: the visual data source module is used for importing static data Excel/csv files and relational database data; the visual view module is used for selecting a target data source according to the imported static data Excel/csv file and the relational database data and generating a visual view through a view model, wherein the view model comprises a chart component and a self-defining component; and the visualization configuration module is used for freely dragging and laying out the visualization view in a canvas according to a dragging instruction so as to realize the style configuration of the chart component and the custom component.
According to the device for the large screen layout based on the dragging, disclosed by the embodiment of the invention, through the process design of manufacturing the large screen, a data source is imported, a view is drawn, and the component is dragged and configured to generate the large screen; the user can directly drag the components to be presented onto the canvas without coding, and the components are configured and freely laid out; based on two kinds of data sources of static data and dynamic data, abundant component library generates a one-stop large screen by dragging a configurable mode, so that a user designs a suitable large screen application according to an application scene of the user, complex data is displayed in a visual mode, various components are dragged freely in the large screen, flexible layout is realized, various different service scenes can be met, and the problems that the conventional large screen visualization system is single in component, customized in layout and incapable of making the large screen according to an actual scene of the user are effectively solved.
In addition, the drag-based modular layout large-screen device according to the above embodiment of the present invention may further have the following additional technical features:
further, in an embodiment of the present invention, the visualized data source module comprises: the static data unit is used for receiving the Excel/csv file uploaded by a user and/or collecting data and generating the csv file after data processing; and/or, a real-time data unit for reading the relational database data from the relational database
Further, in one embodiment of the present invention, the visualization configuration module comprises: and the canvas configuration unit is used for changing configuration items according to the selected canvas size, the background color, the canvas zooming and the components in the canvas.
Further, in an embodiment of the present invention, the visualization configuration module further includes: the diagram component configuration unit is used for entering the diagram component into a canvas through dragging or clicking, freely dragging the diagram component in the canvas, monitoring and recording the position of each component, setting the dragable attribute of the diagram component to true in the process that the diagram component is dragged to the canvas, monitoring an ondragstart event, executing the selected drawing action of the diagram element, monitoring an ondrop event in the process that the diagram component is dragged in the canvas, namely triggering when the diagram component is dropped on the canvas, monitoring the ondragover event, and executing the drawing action when the diagram component is dragged on the canvas.
Further, in an embodiment of the present invention, the visualization configuration module further includes: and the custom component configuration unit is used for packaging a DragTool component for dragging the custom component, recording the width and height attributes of the component position in the DragTool component, and monitoring the dragging event and the zooming event of the custom component.
Additional aspects and advantages of the invention will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the invention.
Drawings
The foregoing and/or additional aspects and advantages of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
FIG. 1 is a flow diagram of a drag-based componentized layout large screen method according to an embodiment of the present invention;
FIG. 2 is a flow diagram of a drag-based componentized layout large screen method according to one embodiment of the present invention;
FIG. 3 is a diagram illustrating a data structure of a data source after being processed according to an embodiment of the invention;
FIG. 4 is a configuration flow diagram of a visualization configuration according to an embodiment of the invention;
FIG. 5 is a configuration flow diagram of a canvas configuration according to an embodiment of the present invention;
FIG. 6 is a schematic structural diagram of a drag-based modular layout large screen device according to an embodiment of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are illustrative and intended to be illustrative of the invention and are not to be construed as limiting the invention.
The following describes a drag-based componentized layout large-screen method and apparatus proposed according to an embodiment of the present invention with reference to the accompanying drawings, and first, a drag-based componentized layout large-screen method proposed according to an embodiment of the present invention will be described with reference to the accompanying drawings.
FIG. 1 is a flow diagram of a drag-based componentized layout large screen method according to one embodiment of the invention.
As shown in FIG. 1, the drag-based componentized layout large-screen method comprises the following steps:
in step S101, static data Excel/csv files and relational database data are imported.
It is to be understood that, as shown in fig. 2, the embodiment of the present invention first imports the static data Excel/csv file and the relational database data into the system. The system can be a large screen device based on the drag-based modular layout of the embodiment of the invention.
In an embodiment of the present invention, importing static data Excel/csv files and relational database data includes: receiving an Excel/csv file uploaded by a user, and/or collecting data and generating a csv file after data processing; and/or reading relational database data from the relational database.
Specifically, as shown in fig. 2, the embodiment of the present invention designs two types of data sources, including static data and real-time data, specifically:
(1) static data
The traditional file Excel/csv can be obtained through two ways: 1) a user uploads an Excel/csv file by himself; 2) and generating a csv file after data acquisition and data governance. The system can analyze the static data of the two sources into objects and return the objects to the front-end processing through JSON.
(2) Real-time data
The real-time data is directly read from the relational database, a client polling technology is adopted, a request is periodically and circularly sent to the server end in an HTTP mode, whether a new message is generated or not is inquired, a request response from the server is received, and response information is returned. According to the large-screen application scene, each component needs to be bound with a respective data source, and the server end cannot know the trigger mechanism of data change of each component, so that the method is realized by adopting a polling real-time technology.
In step S102, a target data source is selected according to the imported static data Excel/csv file and the relational database data, and a visual view is generated through a view model, where the view model includes a chart component and a custom component.
It can be understood that, as shown in fig. 2, the real-time data may be directly read from the relational database, and periodically and cyclically send a request to the server end in an HTTP manner by using a client polling technique, inquire whether a new message is generated, receive a request response from the server, and return a response message. According to the large-screen application scene, each component needs to be bound with a respective data source, and the server end cannot know the trigger mechanism of data change of each component, so that the method is realized by adopting a polling real-time technology.
Specifically, as shown in fig. 2, the visual view model is divided into two types, one is a chart-like component, and the other is a custom component.
(1) Chart class component
As shown in FIG. 3, a data model is defined and bound to a component after conversion of the data format by a model. The data structure of the data source after processing is as follows:
and (3) converting the model data model into options of various legends after being processed, wherein the model is as follows:
(2) custom assembly
The self-defined component is based on a state management module Vuex, the large-screen components are various in types and different in data sources, and each component has and maintains a respective state. Defining components inside components, defining initial configuration items, such as: the method comprises the steps that when components are dragged in a canvas, the horizontal and vertical coordinates of the positions of a chart in a configuration item can be changed, when the components are selected, a mouse is changed into a cross mode, and when the components are enlarged and reduced, the width and the height of the size of the chart can be changed.
In step S103, the visual view is freely dragged and laid within the canvas according to the dragging instruction, so as to implement style configuration on the chart component and the custom component.
It will be appreciated that, as shown in FIG. 2, the data source is imported, the view model is selected, the generated view components are freely dragged and laid out within the canvas, and the schema components and custom components are style configured. As shown in FIG. 4, the visualization configuration includes a configuration of a canvas, a configuration of a charting component, and a configuration of a custom component, each of which is described in detail below.
Further, in an embodiment of the present invention, the method of an embodiment of the present invention further includes: and changing configuration items according to the selected canvas size, the background color, the canvas zooming and the components in the canvas.
Specifically, as shown in FIG. 5, the configuration of the canvas includes the size of the canvas, the background color, the scaling of the canvas, and the change of the configuration item when the component in the canvas is selected. Based on the Vuex state management mode, embodiments of the invention use unidirectional data flow to manage the state of each component. The whole large screen is an SPA single-page component, component components on the page are changed to dispatch an action, an interface needs to be called from the back end for a data source, the data source can be called in the actions, state parameters and other parameters are received in the actions and the actions, the state is the only place for changing the state, and the render component components are changed again after the state is changed.
As shown in FIG. 4, the steps for configuring the canvas are as follows:
(1) js defines a global data configuration item in the state object in the store/index, acquires and modifies the data configuration item in any component in the system, and obtains global response change. getters and vue compute the attribute computed similarly to listen in real time for changes in the state value and place it into vuex. The states object is the only place to change the state, and the parameter state or extra parameter is introduced in the method inside, and the states are also put in the Vuex.
(2) The canvas size (width and height) and the background color (gradient mode) of the canvas are set in the layout/PageConfig, and the canvas size is enlarged and reduced. And computing the value of the state in the store for the width, height and background color by using get (), and re-assigning the value of the attribute by using set (value), thereby rendering the attribute on the page.
(3) The canvas zoom in and zoom out function is implemented using a ZoomTool component. The click zoom-out button canvas is in linkage zoom-out together with the components inside, the click zoom-in button canvas is in linkage zoom-in together with the components inside, and the dragging click slider canvas can follow the linkage. Pseudo code for the zoomTool component is as follows:
listening to the window of the page, wherein the window width and the window width of the page are monitored, and the window and the height of the canvas are obtained through the state object of the store, and the scale obtains the scaling ratio through the calculation formula of Math.min ((window. InnerWidth-60)/width, (window. InnerHeight-60)/height), and the this. addEventListener ('resize', fun ()) is called to change the size of the canvas within the created lifecycle of vue.
In an actual application scene, when two assemblies enter the canvas first and then, and the positions of the assemblies are dragged in the canvas, the assemblies entering the canvas later can cover the assemblies in the front. For example, a text component and a background picture component together form a title of a large screen, and if the text component is generated first and then the background picture component is selected, the text component is covered. Otherwise, the display is normal. It is therefore necessary to provide a layer arrangement one above the other and one below the other for each component.
Further, in an embodiment of the present invention, the method of an embodiment of the present invention further includes: the method comprises the steps that chart components enter a canvas through dragging or clicking, the chart components are dragged freely in the canvas, and the position of each component is monitored and recorded; in the process of dragging the diagram component to the canvas, setting the dragable attribute of the diagram component to true, monitoring an ondragstart event, and executing when the dragging action of the selected diagram element is started; in the process of dragging the diagram component in the canvas, an ondrop event is monitored, namely the ondrop event is triggered when the diagram component is dropped on the canvas, an ondragover event is monitored, and the ondrop event is executed when the diagram component is dragged on the canvas.
Specifically, as shown in fig. 4, in the configuration of the graph component, the component enters the canvas through dragging or clicking, is freely dragged in the canvas, and monitors and records the position of each component, including x and y coordinates of the upper left corner of the component, width, height, component type, and component id.
The drawing of the diagram component into the canvas is realized, firstly, the dragable attribute of the diagram component is set to true, and then an ondragstart event is monitored, namely the drawing is executed when the drawing action of the selected diagram element is started.
The method mainly monitors an ondrop event, namely triggering when the component is placed on the canvas (a target element), monitors an ondragover event, and executes the ondragover event when the component is dragged on the canvas (the target element).
The embodiment of the invention displays the graphs based on the echarts library, and realizes the configuration of various graphs such as a bar chart, a pie chart, a radar chart, a sun chart, a map and the like. The diagram needing configuration is selected in the canvas, and the title, the title color, the title margin, the margin of the echarts diagram, the color and the like of the diagram can be configured. The general title styles are shown in table 1, and the respective chart styles are shown in table 2.
TABLE 1
TABLE 2
The method can not only configure attributes of the graph, but also configure animation effects, and for the pie and the histogram, the graph behavior is triggered through the dispatchAction to realize the animation effects, 1) the type is the highlighted graph before the 'download' is cancelled; 2) type is "highlight" highlighting the current graphic; 3) the type is a prompt box for displaying a highlight graph for 'showTip'.
For the map, real-time implementation is realized through a polling call interface, the map is not visual in color transformation, and sub-components such as a breathing bubble component, a regional heating power component and a flying line layer component are added to the map component. Through the size of the bubbles and the change of the flying line, real-time data can be displayed more intuitively and friendly.
Further, in an embodiment of the present invention, the method of an embodiment of the present invention further includes: and encapsulating a DragTool component for dragging the custom component, recording the width and height attribute of the component position in the DragTool component, and monitoring the dragging event and the zooming event of the custom component.
Specifically, as shown in FIG. 4, the custom components include a text component, a horse race light component, a carousel map component, a progress bar component. The general configuration items of the components comprise id, enabled, config, data and interaction. Each component added into the large screen has a unique id, the enabled attribute judges whether the component is selected, the config attribute refers to the unique configuration of the user-defined component, the data attribute refers to a data source, and the interaction attribute refers to whether the component is interacted.
A DragTool component is packaged for dragging the user-defined component, the width and height attributes of the width, height, left and top components are recorded in the component, and a component dragging event and a component zooming event are monitored. The document object is added with mouse listeners, mousenovemove and mouseup. The configurable items of the custom component are shown in Table 3.
TABLE 3
To sum up, the embodiment of the invention designs a general large-screen visualization system model based on a draggable flexible componentization layout, and constructs a one-stop data visualization large-screen process with data source import, visualization view and visualization configuration based on a visualization large-screen manufacturing process, wherein the data source is divided into static data and real-time data, and is developed by adopting an open source echarts chart tool library based on WEB, and contains rich graphs and custom component display modes, such as a bar chart, a pie chart, a transverse bar chart, a radar chart, a map, a water polo chart, a ticker and the like, and can carry out style configuration and free layout on components in the system; the one-stop large-screen application is generated through dragging, and large-screen visualization requirements of different scenes can be met. From the data source importing process to the large screen previewing process, the embodiment of the invention provides a large screen visualization solution which can be flexibly arranged, configured and reused, and can meet various business scenes.
According to the method for layout of the large screen based on the components of the dragging, which is provided by the embodiment of the invention, through the process design of manufacturing the large screen, a data source is imported, a view is drawn, and the components are dragged and configured to generate the large screen; the user can directly drag the components to be presented onto the canvas without coding, and the components are configured and freely laid out; based on two kinds of data sources of static data and dynamic data, abundant component library generates a one-stop large screen by dragging a configurable mode, so that a user designs a suitable large screen application according to an application scene of the user, complex data is displayed in a visual mode, various components are dragged freely in the large screen, flexible layout is realized, various different service scenes can be met, and the problems that the conventional large screen visualization system is single in component, customized in layout and incapable of making the large screen according to an actual scene of the user are effectively solved.
Next, a drag-based componentized layout large-screen device proposed according to an embodiment of the present invention is described with reference to the drawings.
FIG. 6 is a schematic structural diagram of a drag-based modular layout large screen device according to an embodiment of the present invention.
As shown in fig. 6, the drag-based modular layout large-screen apparatus 10 includes: a visualization data source module 100, a visualization view module 200, and a visualization configuration module 300.
The visual data source module 100 is used for importing static data Excel/csv files and relational database data. The visualization view module 200 is used for selecting a target data source according to the imported static data Excel/csv file and the relational database data, and generating a visualization view through a view model, wherein the view model comprises a chart component and a self-defined component. The visualization configuration module 300 is configured to freely drag and lay out the visualization view in the canvas according to the drag instruction, so as to implement style configuration on the chart component and the custom component. The device 10 of the embodiment of the invention displays the complex data in a visual mode, freely drags various components in the large screen, flexibly arranges the components, can meet various different service scenes, and effectively solves the problems that the conventional large-screen visualization system has single components, customized arrangement and incapability of making a large screen according to the actual scene of the user.
Further, in one embodiment of the present invention, the visualization data source module 100 comprises: the static data unit is used for receiving Excel/csv files uploaded by a user and/or collecting data and generating csv files after data processing; and/or, a real-time data unit for reading relational database data from the relational database
Further, in one embodiment of the present invention, the visualization configuration module 300 comprises: and a canvas configuration unit. The canvas configuration unit is used for changing configuration items according to the selected canvas size, the background color, the canvas zooming and the components in the canvas.
Further, in an embodiment of the present invention, the visualization configuration module 300 further comprises: and a chart component configuration unit. The diagram component configuration unit is used for entering a diagram component into a canvas through dragging or clicking, freely dragging the diagram component in the canvas, monitoring and recording the position of each component, setting a dragable attribute of the diagram component to true in the process of dragging the diagram component to the canvas, monitoring an ondragstart event, executing the selected diagram element when the dragging action starts, monitoring an ondrop event in the process of dragging the diagram component in the canvas, namely triggering when the diagram component is placed on the canvas, monitoring the ondragover event, and executing the diagram component when being dragged on the canvas.
Further, in an embodiment of the present invention, the visualization configuration module 300 further comprises: and a self-defining component configuration unit. The self-defined component configuration unit is used for packaging a DragTool component for dragging the self-defined component, recording the width and height attributes of the component position in the DragTool component, and monitoring the dragging event and the zooming event of the self-defined component.
It should be noted that the foregoing explanation of the embodiment of the drag-based modular layout large-screen method is also applicable to the drag-based modular layout large-screen device of this embodiment, and is not repeated here.
According to the device for the large screen layout based on the dragging and the modularization thereof, the large screen is generated by manufacturing a flow design of the large screen, importing a data source, drawing a view and dragging a configuration component; the user can directly drag the components to be presented onto the canvas without coding, and the components are configured and freely laid out; based on two kinds of data sources of static data and dynamic data, abundant component library generates a one-stop large screen by dragging a configurable mode, so that a user designs a suitable large screen application according to an application scene of the user, complex data is displayed in a visual mode, various components are dragged freely in the large screen, flexible layout is realized, various different service scenes can be met, and the problems that the conventional large screen visualization system is single in component, customized in layout and incapable of making the large screen according to an actual scene of the user are effectively solved.
Furthermore, the terms "first", "second" and "first" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of the present invention, "a plurality" means at least two, e.g., two, three, etc., unless specifically limited otherwise.
In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, various embodiments or examples and features of different embodiments or examples described in this specification can be combined and combined by one skilled in the art without contradiction.
Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention, and that variations, modifications, substitutions and alterations can be made to the above embodiments by those of ordinary skill in the art within the scope of the present invention.
Claims (10)
1. A component layout large-screen method based on dragging is characterized by comprising the following steps:
importing static data Excel/csv files and relational database data;
selecting a target data source according to the imported static data Excel/csv file and the relational database data, and generating a visual view through a view model, wherein the view model comprises a chart component and a custom component; and
and freely dragging and laying out the visual view in the canvas according to a dragging instruction so as to realize the style configuration of the chart component and the custom component.
2. The method according to claim 1, wherein importing static data Excel/csv files and relational database data comprises:
receiving the Excel/csv file uploaded by a user, and/or collecting data and generating the csv file after data processing; and/or
And reading the relational database data from the relational database.
3. The method of claim 1, further comprising:
and changing configuration items according to the selected canvas size, the background color, the canvas zooming and the components in the canvas.
4. The method of claim 1, further comprising:
the diagram components are dragged or clicked into a canvas, and are freely dragged in the canvas, and the positions of all the components are monitored and recorded;
setting the dragable attribute of the chart component to true in the process of dragging the chart component to the canvas, monitoring an ondragstart event, and executing when the dragging action of the selected chart element is started;
in the process that the diagram component is dragged in the canvas, an ondrop event is monitored, namely, the ondrop event is triggered when the diagram component is dropped on the canvas, an ondragover event is monitored, and the ondrop event is executed when the diagram component is dragged on the canvas.
5. The method of claim 1, further comprising:
and encapsulating a DragTool component for dragging the custom component, recording the width and height attributes of the component position in the DragTool component, and monitoring the dragging event and the zooming event of the custom component.
6. A modular layout large screen device based on dragging, comprising:
the visual data source module is used for importing static data Excel/csv files and relational database data;
the visual view module is used for selecting a target data source according to the imported static data Excel/csv file and the relational database data and generating a visual view through a view model, wherein the view model comprises a chart component and a self-defining component; and
and the visualization configuration module is used for freely dragging and laying out the visualization view in a canvas according to a dragging instruction so as to realize the style configuration of the chart component and the custom component.
7. The apparatus of claim 6, wherein the visualization data source module comprises:
the static data unit is used for receiving the Excel/csv file uploaded by a user and/or collecting data and generating the csv file after data processing; and/or
And the real-time data unit is used for reading the relational database data from the relational database.
8. The apparatus of claim 6, wherein the visualization configuration module comprises:
and the canvas configuration unit is used for changing configuration items according to the selected canvas size, the background color, the canvas zooming and the components in the canvas.
9. The apparatus of claim 6, wherein the visualization configuration module further comprises:
the diagram component configuration unit is used for entering the diagram component into a canvas through dragging or clicking, freely dragging the diagram component in the canvas, monitoring and recording the position of each component, setting the dragable attribute of the diagram component to true in the process that the diagram component is dragged to the canvas, monitoring an ondragstart event, executing the selected drawing action of the diagram element, monitoring an ondrop event in the process that the diagram component is dragged in the canvas, namely triggering when the diagram component is dropped on the canvas, monitoring the ondragover event, and executing the drawing action when the diagram component is dragged on the canvas.
10. The apparatus of claim 6, wherein the visualization configuration module further comprises:
and the custom component configuration unit is used for packaging a DragTool component for dragging the custom component, recording the width and height attributes of the component position in the DragTool component, and monitoring the dragging event and the zooming event of the custom component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910765518.7A CN110597586A (en) | 2019-08-19 | 2019-08-19 | Method and device for large screen layout of componentized layout based on dragging |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910765518.7A CN110597586A (en) | 2019-08-19 | 2019-08-19 | Method and device for large screen layout of componentized layout based on dragging |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110597586A true CN110597586A (en) | 2019-12-20 |
Family
ID=68854940
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910765518.7A Pending CN110597586A (en) | 2019-08-19 | 2019-08-19 | Method and device for large screen layout of componentized layout based on dragging |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110597586A (en) |
Cited By (37)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109410698A (en) * | 2018-09-19 | 2019-03-01 | 浙江省测绘科学技术研究院 | Data large-size screen monitors method for visualizing and system |
| CN110750254A (en) * | 2019-10-18 | 2020-02-04 | 浪潮云信息技术有限公司 | Flowchart editor implementation method based on Angular |
| CN110780794A (en) * | 2020-01-02 | 2020-02-11 | 成都四方伟业软件股份有限公司 | Visual data list display method and device |
| CN111143638A (en) * | 2019-12-27 | 2020-05-12 | 佰聆数据股份有限公司 | Visual layout method, system, storage medium and computer equipment applied to inter-group data relation analysis |
| CN111427906A (en) * | 2020-03-30 | 2020-07-17 | 深圳市康拓普信息技术有限公司 | Dragging type data visualization system for multi-component mixed application |
| CN111427572A (en) * | 2020-02-11 | 2020-07-17 | 浙江知夫子信息科技有限公司 | Large-screen display development system based on intellectual property agent |
| CN111522565A (en) * | 2020-04-21 | 2020-08-11 | 北京邮电大学 | Real-time data updating visualization large-screen method and system based on componentization |
| CN111562912A (en) * | 2020-04-08 | 2020-08-21 | 北京邮电大学 | Front-end component development method and system for data visualization |
| CN111563369A (en) * | 2020-05-11 | 2020-08-21 | 中冶赛迪重庆信息技术有限公司 | Screen visualization method and device, electronic equipment and medium |
| CN111596912A (en) * | 2020-05-22 | 2020-08-28 | 北京无线电测量研究所 | Non-programming visual construction system and method for radar display control software based on component library |
| CN111641672A (en) * | 2020-04-10 | 2020-09-08 | 新智云数据服务有限公司 | Configuration method and configuration system of cloud resource monitoring component |
| CN111736823A (en) * | 2020-08-27 | 2020-10-02 | 北京安帝科技有限公司 | Data visualization method and device and computer readable medium |
| CN111752899A (en) * | 2020-06-28 | 2020-10-09 | 中科三清科技有限公司 | Environment report generation method and device, electronic equipment and storage medium |
| CN111813403A (en) * | 2020-07-09 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | Method and device for managing dragging component data in large-screen data visualization development |
| CN112130943A (en) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | Method for self-defining visual layout design |
| CN112328153A (en) * | 2020-10-30 | 2021-02-05 | 北京数秦科技有限公司 | Display method, display device and storage medium |
| CN112328252A (en) * | 2020-12-03 | 2021-02-05 | 江苏赛融科技股份有限公司 | Online design data visualization large-screen method based on web page |
| CN112346725A (en) * | 2020-11-05 | 2021-02-09 | 南方电网数字电网研究院有限公司 | Page design method, device, equipment and storage medium |
| CN112417704A (en) * | 2020-12-04 | 2021-02-26 | 重庆忽米网络科技有限公司 | Configurable dragging type digital industrial model construction method |
| CN112487078A (en) * | 2020-12-03 | 2021-03-12 | 安徽经邦软件技术有限公司 | Self-service visual data analysis method based on cloud native micro-service architecture |
| CN112528191A (en) * | 2020-12-28 | 2021-03-19 | 山东鲁能软件技术有限公司 | Dynamic layout engine device for Web data visualization and use method |
| CN112559616A (en) * | 2020-12-20 | 2021-03-26 | 大唐互联科技(武汉)有限公司 | Dynamic data binding method and system for large-screen data visualization component |
| CN113032476A (en) * | 2020-10-23 | 2021-06-25 | 广州博纳信息技术有限公司 | Method for acquiring and monitoring dynamic data based on visualization |
| CN113051447A (en) * | 2019-12-27 | 2021-06-29 | 新奥数能科技有限公司 | Energy data visual display method and device |
| CN113220386A (en) * | 2021-04-06 | 2021-08-06 | 北京健康之家科技有限公司 | Instrument board publishing method and related equipment |
| CN113360559A (en) * | 2021-06-04 | 2021-09-07 | 武汉一格空间科技有限公司 | Configurable one-stop large-screen visualization method and device |
| CN113656019A (en) * | 2021-07-27 | 2021-11-16 | 克拉玛依油城数据有限公司 | Method for developing data large screen based on dragging mode |
| CN113805766A (en) * | 2021-09-07 | 2021-12-17 | 南方电网调峰调频发电有限公司西部检修试验分公司 | Large-screen data visualization based realization method and system |
| CN113849171A (en) * | 2021-08-18 | 2021-12-28 | 华建数创(上海)科技有限公司 | Method for visualized design and display of data of intelligent operation management center |
| CN113900607A (en) * | 2021-09-01 | 2022-01-07 | 浙江绿城未来数智科技有限公司 | Construction method of community-based data large-screen visualization system |
| CN114371809A (en) * | 2021-12-14 | 2022-04-19 | 南京中孚信息技术有限公司 | Vue-based large screen visualization module dragging technology research |
| CN114625255A (en) * | 2022-03-29 | 2022-06-14 | 北京邮电大学 | Free-hand interaction method for visual view construction, visual view construction device and storage medium |
| CN114679484A (en) * | 2022-03-25 | 2022-06-28 | 机科发展科技股份有限公司 | Server, client, TCP/IP Ethernet communication system, medium, and device |
| CN114816594A (en) * | 2021-01-18 | 2022-07-29 | 中盈优创资讯科技有限公司 | Method and device for detecting topology collision |
| CN115328466A (en) * | 2022-10-17 | 2022-11-11 | 智广海联(天津)大数据技术有限公司 | High-reusability large-screen visual configuration method based on data structure body redisplay |
| CN117149359A (en) * | 2023-10-27 | 2023-12-01 | 大尧信息科技(湖南)有限公司 | Software definition simulation development platform and method for data chain equipment |
| CN117251154A (en) * | 2023-09-26 | 2023-12-19 | 北京泰策科技有限公司 | Data visualization-based low-code large-screen design system capable of being rapidly expanded |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130263045A1 (en) * | 2012-03-29 | 2013-10-03 | Kabushiki Kaisha Toshiba | Screen display device and screen display system |
| CN108334635A (en) * | 2018-02-27 | 2018-07-27 | 浪潮软件集团有限公司 | Content customizable smart city comprehensive presentation system |
| CN108460087A (en) * | 2018-01-22 | 2018-08-28 | 北京邮电大学 | Heuristic high dimensional data visualization device and method |
| CN109325203A (en) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | The device of Web system visualization multiplexing is realized in a kind of automation |
| CN109597613A (en) * | 2017-12-21 | 2019-04-09 | 南京数睿数据科技有限公司 | A kind of big screen display system and method for towed combination report |
| CN109800255A (en) * | 2018-12-29 | 2019-05-24 | 北京奇安信科技有限公司 | A kind of generation method of Visual Report Forms, system, equipment and medium |
-
2019
- 2019-08-19 CN CN201910765518.7A patent/CN110597586A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130263045A1 (en) * | 2012-03-29 | 2013-10-03 | Kabushiki Kaisha Toshiba | Screen display device and screen display system |
| CN109597613A (en) * | 2017-12-21 | 2019-04-09 | 南京数睿数据科技有限公司 | A kind of big screen display system and method for towed combination report |
| CN108460087A (en) * | 2018-01-22 | 2018-08-28 | 北京邮电大学 | Heuristic high dimensional data visualization device and method |
| CN108334635A (en) * | 2018-02-27 | 2018-07-27 | 浪潮软件集团有限公司 | Content customizable smart city comprehensive presentation system |
| CN109325203A (en) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | The device of Web system visualization multiplexing is realized in a kind of automation |
| CN109800255A (en) * | 2018-12-29 | 2019-05-24 | 北京奇安信科技有限公司 | A kind of generation method of Visual Report Forms, system, equipment and medium |
Non-Patent Citations (2)
| Title |
|---|
| 张小明，韩大海，徐成编著: "《多媒体网格》", 31 July 2011, 北京邮电大学出版社 * |
| 青岛英谷教育科技股份有限公司编著: "《高等学校应用型本科创新人才培养计划指定教材•HTML5程序设计及实践》", 31 January 2016, 西安电子科技大学出版社 * |
Cited By (46)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109410698A (en) * | 2018-09-19 | 2019-03-01 | 浙江省测绘科学技术研究院 | Data large-size screen monitors method for visualizing and system |
| CN110750254A (en) * | 2019-10-18 | 2020-02-04 | 浪潮云信息技术有限公司 | Flowchart editor implementation method based on Angular |
| CN111143638A (en) * | 2019-12-27 | 2020-05-12 | 佰聆数据股份有限公司 | Visual layout method, system, storage medium and computer equipment applied to inter-group data relation analysis |
| CN113051447A (en) * | 2019-12-27 | 2021-06-29 | 新奥数能科技有限公司 | Energy data visual display method and device |
| CN110780794A (en) * | 2020-01-02 | 2020-02-11 | 成都四方伟业软件股份有限公司 | Visual data list display method and device |
| CN111427572A (en) * | 2020-02-11 | 2020-07-17 | 浙江知夫子信息科技有限公司 | Large-screen display development system based on intellectual property agent |
| CN111427906A (en) * | 2020-03-30 | 2020-07-17 | 深圳市康拓普信息技术有限公司 | Dragging type data visualization system for multi-component mixed application |
| CN111427906B (en) * | 2020-03-30 | 2023-06-09 | 南方电网数字平台科技(广东)有限公司 | Data visualization system for drag-and-drop multi-component hybrid applications |
| CN111562912A (en) * | 2020-04-08 | 2020-08-21 | 北京邮电大学 | Front-end component development method and system for data visualization |
| CN111641672A (en) * | 2020-04-10 | 2020-09-08 | 新智云数据服务有限公司 | Configuration method and configuration system of cloud resource monitoring component |
| CN111522565B (en) * | 2020-04-21 | 2022-02-01 | 北京邮电大学 | Real-time data updating visualization large-screen method and system based on componentization |
| CN111522565A (en) * | 2020-04-21 | 2020-08-11 | 北京邮电大学 | Real-time data updating visualization large-screen method and system based on componentization |
| CN111563369A (en) * | 2020-05-11 | 2020-08-21 | 中冶赛迪重庆信息技术有限公司 | Screen visualization method and device, electronic equipment and medium |
| CN111596912A (en) * | 2020-05-22 | 2020-08-28 | 北京无线电测量研究所 | Non-programming visual construction system and method for radar display control software based on component library |
| CN111752899A (en) * | 2020-06-28 | 2020-10-09 | 中科三清科技有限公司 | Environment report generation method and device, electronic equipment and storage medium |
| CN111813403A (en) * | 2020-07-09 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | Method and device for managing dragging component data in large-screen data visualization development |
| CN111736823B (en) * | 2020-08-27 | 2020-12-08 | 北京安帝科技有限公司 | Data visualization method and device and computer readable medium |
| CN111736823A (en) * | 2020-08-27 | 2020-10-02 | 北京安帝科技有限公司 | Data visualization method and device and computer readable medium |
| CN112130943A (en) * | 2020-09-09 | 2020-12-25 | 中盈优创资讯科技有限公司 | Method for self-defining visual layout design |
| CN113032476A (en) * | 2020-10-23 | 2021-06-25 | 广州博纳信息技术有限公司 | Method for acquiring and monitoring dynamic data based on visualization |
| CN112328153A (en) * | 2020-10-30 | 2021-02-05 | 北京数秦科技有限公司 | Display method, display device and storage medium |
| CN112328153B (en) * | 2020-10-30 | 2022-07-15 | 北京数秦科技有限公司 | Display method, display device and storage medium |
| CN112346725A (en) * | 2020-11-05 | 2021-02-09 | 南方电网数字电网研究院有限公司 | Page design method, device, equipment and storage medium |
| CN112346725B (en) * | 2020-11-05 | 2023-12-12 | 南方电网数字电网研究院有限公司 | Page design method, device, equipment and storage medium |
| CN112328252A (en) * | 2020-12-03 | 2021-02-05 | 江苏赛融科技股份有限公司 | Online design data visualization large-screen method based on web page |
| CN112487078A (en) * | 2020-12-03 | 2021-03-12 | 安徽经邦软件技术有限公司 | Self-service visual data analysis method based on cloud native micro-service architecture |
| CN112417704A (en) * | 2020-12-04 | 2021-02-26 | 重庆忽米网络科技有限公司 | Configurable dragging type digital industrial model construction method |
| CN112417704B (en) * | 2020-12-04 | 2022-07-08 | 重庆忽米网络科技有限公司 | Configurable dragging type digital industrial model construction method |
| CN112559616A (en) * | 2020-12-20 | 2021-03-26 | 大唐互联科技(武汉)有限公司 | Dynamic data binding method and system for large-screen data visualization component |
| CN112528191A (en) * | 2020-12-28 | 2021-03-19 | 山东鲁能软件技术有限公司 | Dynamic layout engine device for Web data visualization and use method |
| CN114816594B (en) * | 2021-01-18 | 2023-08-08 | 中盈优创资讯科技有限公司 | Method and device for detecting topology collision |
| CN114816594A (en) * | 2021-01-18 | 2022-07-29 | 中盈优创资讯科技有限公司 | Method and device for detecting topology collision |
| CN113220386A (en) * | 2021-04-06 | 2021-08-06 | 北京健康之家科技有限公司 | Instrument board publishing method and related equipment |
| CN113360559A (en) * | 2021-06-04 | 2021-09-07 | 武汉一格空间科技有限公司 | Configurable one-stop large-screen visualization method and device |
| CN113656019A (en) * | 2021-07-27 | 2021-11-16 | 克拉玛依油城数据有限公司 | Method for developing data large screen based on dragging mode |
| CN113849171A (en) * | 2021-08-18 | 2021-12-28 | 华建数创(上海)科技有限公司 | Method for visualized design and display of data of intelligent operation management center |
| CN113900607A (en) * | 2021-09-01 | 2022-01-07 | 浙江绿城未来数智科技有限公司 | Construction method of community-based data large-screen visualization system |
| CN113805766A (en) * | 2021-09-07 | 2021-12-17 | 南方电网调峰调频发电有限公司西部检修试验分公司 | Large-screen data visualization based realization method and system |
| CN114371809A (en) * | 2021-12-14 | 2022-04-19 | 南京中孚信息技术有限公司 | Vue-based large screen visualization module dragging technology research |
| CN114679484A (en) * | 2022-03-25 | 2022-06-28 | 机科发展科技股份有限公司 | Server, client, TCP/IP Ethernet communication system, medium, and device |
| CN114625255B (en) * | 2022-03-29 | 2023-08-01 | 北京邮电大学 | Freehand interaction method oriented to visual view construction, visual view construction device and storage medium |
| CN114625255A (en) * | 2022-03-29 | 2022-06-14 | 北京邮电大学 | Free-hand interaction method for visual view construction, visual view construction device and storage medium |
| CN115328466A (en) * | 2022-10-17 | 2022-11-11 | 智广海联(天津)大数据技术有限公司 | High-reusability large-screen visual configuration method based on data structure body redisplay |
| CN117251154A (en) * | 2023-09-26 | 2023-12-19 | 北京泰策科技有限公司 | Data visualization-based low-code large-screen design system capable of being rapidly expanded |
| CN117149359A (en) * | 2023-10-27 | 2023-12-01 | 大尧信息科技(湖南)有限公司 | Software definition simulation development platform and method for data chain equipment |
| CN117149359B (en) * | 2023-10-27 | 2024-01-26 | 大尧信息科技(湖南)有限公司 | Software definition simulation development platform and method for data chain equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110597586A (en) | Method and device for large screen layout of componentized layout based on dragging | |
| CN107844297B (en) | Data visualization implementation system and method | |
| Yeh et al. | On-site building information retrieval by using projection-based augmented reality | |
| US7180516B2 (en) | System and method for visualizing connected temporal and spatial information as an integrated visual representation on a user interface | |
| US10175855B2 (en) | Interaction in orbit visualization | |
| US20100037168A1 (en) | Systems and methods for webpage design | |
| US20120246148A1 (en) | Contextual Display and Scrolling of Search Results in Graphical Environment | |
| US20100194778A1 (en) | Projecting data dimensions on a visualization data set | |
| US20120120086A1 (en) | Interactive and Scalable Treemap as a Visualization Service | |
| CN110851626B (en) | Layer layout based time-space data visual analysis method and system | |
| EP2024822A1 (en) | Visual workflow process notation and layout | |
| CN109597613A (en) | A kind of big screen display system and method for towed combination report | |
| CN107644067A (en) | A kind of cross-platform indoor map display methods of two three-dimensional integratedization | |
| Mei et al. | Datav: Data visualization on large high-resolution displays | |
| JP6813634B2 (en) | WEB reporting design system for programming event behavior based on graphic interface | |
| CN103650013A (en) | Methods and systems for browsing heterogeneous map data | |
| Bennett et al. | Visual momentum redux | |
| CN109716294A (en) | With the user interface for moving mini label | |
| US10289388B2 (en) | Process visualization toolkit | |
| CN103645828A (en) | Main interface menu display method with sliding animation effect | |
| CN110413765A (en) | A kind of interactive system and its method of mass data set analysis and displaying | |
| JP4870581B2 (en) | Parts catalog creation system, computer-executable program, and computer-readable recording medium | |
| CN112862668A (en) | Method for implementing picture conversion from design effect picture to visualization | |
| Júnior et al. | Visualization mechanisms for crowdsourcing information in emergency coordination | |
| Styliaras | Towards a web-based archaeological excavation platform for smartphones: review and potentials |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191220 |