CN111459600A - Interaction method and system for single-page multi-dimensional penetration scene visual display - Google Patents

Interaction method and system for single-page multi-dimensional penetration scene visual display Download PDF

Info

Publication number
CN111459600A
CN111459600A CN202010265025.XA CN202010265025A CN111459600A CN 111459600 A CN111459600 A CN 111459600A CN 202010265025 A CN202010265025 A CN 202010265025A CN 111459600 A CN111459600 A CN 111459600A
Authority
CN
China
Prior art keywords
layer
dimensional
penetration
page
business data
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.)
Granted
Application number
CN202010265025.XA
Other languages
Chinese (zh)
Other versions
CN111459600B (en
Inventor
李显宁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Sailing Information Technology Co ltd
Original Assignee
Shanghai Sailing Information Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shanghai Sailing Information Technology Co ltd filed Critical Shanghai Sailing Information Technology Co ltd
Priority to CN202010265025.XA priority Critical patent/CN111459600B/en
Publication of CN111459600A publication Critical patent/CN111459600A/en
Application granted granted Critical
Publication of CN111459600B publication Critical patent/CN111459600B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements 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/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/29Geographical information databases
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/904Browsing; Visualisation therefor
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction 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
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input 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/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction 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/0486Drag-and-drop

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Remote Sensing (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses an interaction method and an interaction system for single-page multi-dimensional penetration scene visual display, and relates to the technical field of data visualization. The invention solves the problem of expression of multi-dimensional data and multi-service modules on the same page, realizes deep linkage, and better and intuitively expresses the visual content of the page by hierarchy penetration and association, so that the visual page is simpler and more direct to operate, richer in data, more multidimensional in scene and more coherent in acquired information.

Description

Interaction method and system for single-page multi-dimensional penetration scene visual display
Technical Field
The invention relates to the technical field of data visualization, in particular to an interaction method for single-page multi-dimensional penetration scene visualization display.
Background
The data visualization large-screen window application in the software system uses single-page operation, the capacity of the whole page content is limited, the interaction mode is single, the data expression capability is weak, the scene is insufficient, often a map or a structure diagram is matched with left and right graphs for interaction, but the requirements of multi-dimensional service data, scene service data linkage and multi-layer window penetration cannot be met.
And (3) two-dimensional service display, namely directly displaying the existing data in a map and an icon, clicking the dimension of a visual area, and changing the data of the chart.
If the service complexity is increased, the mechanism of single-page application needs to be destroyed, or the single-page application needs to be linked to other pages at different places, so as to realize the bearing of complex multi-interaction service.
Therefore, technical personnel in the field are dedicated to develop an interaction method and an interaction system for single-page multi-dimensional penetration scene visualization display, so that multi-dimensional data and multi-service modules are expressed on the same page, deep linkage is realized, hierarchy penetration and association are realized to better and intuitively express page visualization content, the visualized page operation is simpler and more direct, the data is richer, the scene is more multidimensional, and the acquired information is more coherent.
Disclosure of Invention
In view of the above defects in the prior art, the technical problem to be solved by the present invention is how to provide an interactive method and system for single-page multidimensional penetration scene visualization display, so as to solve the problem that multidimensional data and multi-service modules are expressed on the same page, achieve deep linkage, hierarchy penetration and association to better and intuitively express page visualization content, so that the visualization page is simpler and more direct to operate, data is richer, the scene is more multidimensional, and the acquired information is more coherent.
In order to achieve the purpose, the invention provides an interaction method for single-page multi-dimensional penetration scene visual display, which is characterized in that the method is applied to a terminal device, the terminal device comprises a display screen, the display screen displays a visual page, the visual page displays business data contents, the visual page is divided into a visual expression layer, a covering layer, a window layer and a floating pop-up layer from bottom to top, and the business data contents are sequentially expressed in series.
Further, the method comprises the steps of:
step 1, the visual expression layer represents operable, variable and multi-dimensional display service data content;
step 2, the cover layer covers the blank area of the visual expression layer and supports the expression display of the contents of the window layer and the floating pop-up layer;
step 3, the window layer receives event driving of the visual expression layer, and displays a business data overview corresponding to business data content based on the business data content of the visual expression layer;
and 4, the floating pop-up layer receives event driving of the visual expression layer or the window layer and displays the details of the service data corresponding to the content of the service data.
Further, the service data content in step 1 includes a three-dimensional map, a three-dimensional structure diagram and a three-dimensional building based on the map.
Further, the business data overview in step 3 and the business data details in step 4 are in a chart format.
Further, the events in the steps 3 and 4 include a click event and a drag event.
Further, the method further comprises the step of using a penetrating linkage mechanism for the business data content, and mutually penetrating the business data content, the business data overview and the business data detail.
Further, the service data content is linked to other service data details through other points in the service data details by using a penetrating linkage mechanism, specifically, for data of the same service category with different dimensions.
Further, the penetrating linkage mechanism is realized in a CSS or iframe mode.
In another aspect, the present invention further provides a computer-readable storage medium, which is characterized by comprising computer instructions, and when the computer instructions are executed on a terminal device, the terminal device is caused to execute the above method.
In yet another aspect, the present invention also provides a computer program product, which, when run on a computer, causes the computer to perform the above-mentioned method.
The invention solves the problem of expression of multi-dimensional data and multi-service modules on the same page, realizes deep linkage, and better and intuitively expresses the visual content of the page by hierarchy penetration and association, so that the visual page is simpler and more direct to operate, richer in data, more multidimensional in scene and more coherent in acquired information.
Drawings
FIG. 1 is a schematic structural diagram of a preferred embodiment of the present invention;
FIG. 2 is a schematic diagram of the linkage relationship according to a preferred embodiment of the present invention.
Detailed Description
The preferred embodiments of the present invention will be described below with reference to the accompanying drawings for clarity and understanding of technical contents. The present invention may be embodied in many different forms of embodiments and the scope of the invention is not limited to the embodiments set forth herein.
The invention divides the visual page into four levels to display the business content, and the business content is expressed in a serial connection mode, as shown in figure 1.
A first level: namely, the bottom layer is called a visual expression layer a, such as a 3D structure diagram, a 3D map, a 3D model diagram, and the like.
And a second level: referred to as masking layer B, for masking the blank area of the visual expression layer A and for hiding the expression display of the contents of other upper layers.
The third level: the system is called a window layer C and is used for displaying an upper data icon module, a lower data icon module, a left data icon module and a right data icon module on a page, and the functions of the data icon modules are that data are expressed on an upper screen.
The fourth level: the system is called a floating pop-up layer D and is used for supplementing and displaying business content, the business content is displayed at the topmost layer of a page, the business dimension subdivision is usually related, and different module content is represented through the floating pop-up layer D.
As shown in fig. 2, the linkage between the levels includes representing operable, changeable, and multi-dimensional displayed contents, such as a three-dimensional map, a three-dimensional model structure diagram, and a three-dimensional building based on the map (including point location identification on the map, and directly displaying contents by clicking point location, such as playing video, and displaying a form) on the visual expression level a.
And realizing multi-dimensional service data display interaction:
1) and putting the service data of the final fruit type and the schematic type in the visual expression layer A, so that the software user can visually acquire the data, the position of the service event and the state of the service event when entering the page. And distributing business data points concerned by customers in the visual expression layer A, such as marking or dynamically showing core business media by using a structure diagram, a 3D building diagram and the like, and continuously updating data as required.
2) The visual content is intensively projected to the most visual picture position of the user by the Mongolian layer B, so that the interference of other content to the visual expression layer A and the window layer C is avoided.
3) The event penetration mechanism, namely the covering layer B normally resists the operation of a user on the visual expression layer A on a page when covering the visual expression layer A, and the CSS penetration mechanism is used, so that the covering layer B can be directly operated on the content of the visual expression layer A at the bottommost layer at the outermost layer, no other influence is generated on the visual expression layer A, and only visual shielding and content concentration guidance are reserved.
4) Based on the display of the visual content of the visual expression layer A, the window layer C displays the data summary and trend analysis of the corresponding data service module, and the effect of visual data overview can be achieved. And clicking the service area or the service type data in the visual expression layer A, and displaying a data overview of a corresponding single service type dimension in the window layer C. By default may be the presentation of full traffic data.
5) And the window layer C data billboard is displayed in a multi-level switching way. The business content is displayed by default, and in the data overview chart of the window layer C, the business type is expressed to penetrate through the corresponding business related part, namely, the chart or the plate of the data billboard in the window layer C is clicked, and the business content can be displayed in a switching way without changing other parts of the page. And the visual expression layer A business data dimension manages the multi-layer display content in the same way.
6) And clicking the data display board corresponding to the longitudinal service in the service area or the data of the visual expression layer A instead of the horizontal data overview as in the window layer C, namely clicking the service area or the data of the visual expression layer A, displaying the data detail display board corresponding to the floating pop-up layer D, and listing the detailed part of the service content in the display board of the floating pop-up layer D to achieve the service display from a single data point to the data detail.
7) And clicking a data detail part of the same business content listed in the floating pop-up layer D in the business data overview of the window layer C area to realize the data detail corresponding to the data overview from the data overview.
8) In the floating pop-up layer D, data in the same service category and different dimensions can penetrate through each other, namely other points in the data details are linked to other data details, and the mutual penetration from a single data point to a data overview to service corresponding (vertical subdivision) data details is achieved.
The specific implementation is as follows:
establishing a front-end project based on ES6, and selecting Vue as a development language.
1. And (4) component level division, namely, building the whole page into specific 4 large component levels.
2. And (4) layout arrangement, wherein the numerical values of the hierarchies are set according to the appointed numerical values.
3. Introducing the content of the layer A, and defining a visual expression mode: a three-dimensional map or block diagram or otherwise. The hierarchy number of the layer A is set to be the lowest, the full screen display is adapted, an entry function of external interaction is abstracted, and events mainly comprise: click events, drag (visual frame brought on itself), etc.
4. Designing a corresponding Mongolian layer B, and defining the display range and the animation of the upper, lower, left and right divs of the layer C before designing. The B layer can be adjusted according to page variations.
5. And laying a layer C, setting the division of the whole screen area div in the large component C, and reserving the upper part, the lower part, the left part and the right part respectively. And after the business requirement is determined to be clear, the corresponding panel is transferred through the control of the outer layer menu.
6. And reserving a popup layer in the D big assembly, setting a background mask, and connecting the A layer and the C layer in series for event calling.
7. And setting a navigation menu, performing the following processing according to business requirements, clicking the signboards at two sides of the navigation menu to perform hide operation, adding fade-in and fade-out animations (the same principle is applied to the other sides), selecting the menu again to click, and restoring the display of the signboards to perform show operation. And after clicking the menu, carrying out an asynchronous execution method on the then to carry out interaction on the layer A content.
Compared with the prior art, the invention has the following advantages:
1. accommodating traffic
In terms of business accommodation capacity, no matter how delicate a page is, an excessive number of business modules and business data of corresponding vertical dimensions of the business modules cannot be added in single-page visualization in the conventional interaction mode, namely, the two-dimensional mode cannot break through three-dimensional multiple-entry accommodation.
2. Accommodating service depth
From the aspect of accommodating service depth, the existing single-page form cannot drill down 3 layers or even more layers in one service aspect, is subject to the display of an expression mode, mainly adopts simple display, and cannot achieve the depth expression of the invention.
3. Inter-penetrating linkage
The existing single-page visualization basically has no mutual penetration, namely, a single outlet and a single inlet.
4. Single page integrity
The existing single-page application usually adopts a multi-page mode when the complexity and the content of service data are increased, which destroys the integrity of a single page and the consistency of operation. The invention can complete all visualization and business expression by a single page without multiple pages.
5. Direct viewing and easy use
By clicking a service point of one hierarchy, the service content of the next hierarchy is associated without finding excessive menus and service splitting expressions. Namely, the expression is visual and rich along with the point of view.
The foregoing detailed description of the preferred embodiments of the invention has been presented. It should be understood that numerous modifications and variations could be devised by those skilled in the art in light of the present teachings without departing from the inventive concepts. Therefore, the technical solutions available to those skilled in the art through logic analysis, reasoning and limited experiments based on the prior art according to the concept of the present invention should be within the scope of protection defined by the claims.

Claims (10)

1. The interaction method is characterized in that the method is applied to terminal equipment, the terminal equipment comprises a display screen, the display screen displays visual pages, the visual pages display business data contents, the visual pages are divided into a visual expression layer, a covering layer, a window layer and a floating pop-up layer from bottom to top, and the business data contents are sequentially expressed in series.
2. The interactive method for single-page multi-dimensional penetration scene visualization presentation according to claim 1, wherein said method comprises the steps of:
step 1, the visual expression layer represents operable, variable and multi-dimensional display service data content;
step 2, the cover layer covers the blank area of the visual expression layer and supports the expression display of the contents of the window layer and the floating pop-up layer;
step 3, the window layer receives event driving of the visual expression layer, and displays a business data overview corresponding to business data content based on the business data content of the visual expression layer;
and 4, the floating pop-up layer receives event driving of the visual expression layer or the window layer and displays the details of the service data corresponding to the content of the service data.
3. The interactive method for single-page multi-dimensional penetrating scene visualization as claimed in claim 2, wherein said business data content in step 1 comprises three-dimensional map, three-dimensional structure diagram and three-dimensional building based on map.
4. The interactive method for single-page multi-dimensional penetration scene visualization recited in claim 2, wherein the business data overview in step 3 and the business data details in step 4 are in chart format.
5. The interactive method for single-page multi-dimensional penetration scene visualization in claim 2, wherein the events in the steps 3 and 4 comprise click events and drag events.
6. The interactive method for single-page multi-dimensional penetration scene visualization recited in claim 2, wherein the method further comprises the business data content using a penetration linkage mechanism, and the business data content, the business data overview and the business data detail are penetrated with each other.
7. The interaction method for single-page multi-dimensional penetration scene visualization as claimed in claim 6, wherein the service data content uses a penetration linkage mechanism, specifically, for data of different dimensions in the same service category, the service data content is linked to other service data details through other points in the service data details.
8. The interaction method for single-page multi-dimensional penetration scene visualization presentation according to claim 6, wherein the penetration linkage mechanism is implemented in a CSS or iframe manner.
9. A computer-readable storage medium comprising computer instructions which, when executed on a terminal device, cause the terminal device to perform the method of any one of claims 1 to 8.
10. A computer program product, which, when run on a computer, causes the computer to perform the method according to any one of claims 1 to 8.
CN202010265025.XA 2020-04-07 2020-04-07 Interaction method and system for single-page multi-dimensional penetrating scene visual display Active CN111459600B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010265025.XA CN111459600B (en) 2020-04-07 2020-04-07 Interaction method and system for single-page multi-dimensional penetrating scene visual display

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010265025.XA CN111459600B (en) 2020-04-07 2020-04-07 Interaction method and system for single-page multi-dimensional penetrating scene visual display

Publications (2)

Publication Number Publication Date
CN111459600A true CN111459600A (en) 2020-07-28
CN111459600B CN111459600B (en) 2024-02-02

Family

ID=71682341

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010265025.XA Active CN111459600B (en) 2020-04-07 2020-04-07 Interaction method and system for single-page multi-dimensional penetrating scene visual display

Country Status (1)

Country Link
CN (1) CN111459600B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113378533A (en) * 2021-06-08 2021-09-10 傲普(上海)新能源有限公司 Energy system based form processing method for mass data

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20100088619A1 (en) * 2008-10-02 2010-04-08 Ralf Rath Interactive visualisation design time
CN103631867A (en) * 2013-11-01 2014-03-12 北京奇虎科技有限公司 Webpage display method and browser
US9348881B1 (en) * 2006-12-29 2016-05-24 Hewlett Packard Enterprise Development Lp Visual content query for multi-dimensional datasets
CN108388466A (en) * 2018-03-16 2018-08-10 北京小度信息科技有限公司 Information displaying method and device
CN108920693A (en) * 2018-07-13 2018-11-30 北京微播视界科技有限公司 A kind of methods of exhibiting of personal homepage, device, terminal device and storage medium
CN110909103A (en) * 2019-11-22 2020-03-24 口碑(上海)信息技术有限公司 Data display method and device based on electronic map

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9348881B1 (en) * 2006-12-29 2016-05-24 Hewlett Packard Enterprise Development Lp Visual content query for multi-dimensional datasets
US20100088619A1 (en) * 2008-10-02 2010-04-08 Ralf Rath Interactive visualisation design time
CN103631867A (en) * 2013-11-01 2014-03-12 北京奇虎科技有限公司 Webpage display method and browser
CN108388466A (en) * 2018-03-16 2018-08-10 北京小度信息科技有限公司 Information displaying method and device
CN108920693A (en) * 2018-07-13 2018-11-30 北京微播视界科技有限公司 A kind of methods of exhibiting of personal homepage, device, terminal device and storage medium
CN110909103A (en) * 2019-11-22 2020-03-24 口碑(上海)信息技术有限公司 Data display method and device based on electronic map

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
TIMOTHY G. KEYS: "A high-throughput screen for polysialyltransferase activity", ANALYTICAL BIOCHEMISTRY, vol. 427, no. 1, XP028497508, DOI: 10.1016/j.ab.2012.04.033 *
张开智;万向;陈亚民;: "关于数据大屏可视化的设计流程与发展趋势的分析研究", 科技创新导报, no. 27 *
谭?月;张余强;何小海;卿粼波;陈岑;: "基于WebGL的勘探地形及探井信息三维可视化系统设计", 现代计算机, no. 03 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113378533A (en) * 2021-06-08 2021-09-10 傲普(上海)新能源有限公司 Energy system based form processing method for mass data

Also Published As

Publication number Publication date
CN111459600B (en) 2024-02-02

Similar Documents

Publication Publication Date Title
US5708764A (en) Hotlinks between an annotation window and graphics window for interactive 3D graphics
Wiecha et al. ITS: A tool for rapidly developing interactive applications
CN1030804C (en) Method and apparatus utiliging multi-demensional data icons
US5675753A (en) Method and system for presenting an electronic user-interface specification
CA2419719C (en) Data display for multiple layered screens
EP0636971B1 (en) Method and apparatus for producing a composite second image in the spatial context of a first image
US5973702A (en) Oriented view system having a common window manager for defining application window areas in a screen buffer and application specific view objects for writing into the screen buffer
EP0712513B1 (en) Graphic editor framework system
US7068288B1 (en) System and method for moving graphical objects on a computer controlled system
EP0734552B1 (en) Object-oriented task security framework
US20030067497A1 (en) Method and device for modifying a pre-existing graphical user interface
US8756528B2 (en) System and method of customizing video display layouts having dynamic icons
JP2009217838A (en) Display method of multilayered screen
US5737559A (en) Object-oriented view hierarchy framework
US20060020902A1 (en) Interactive graphical user interfaces for computer display systems with simplified implementation for exposing completely hidden windows
CN112272109A (en) Network topological graph generation method, equipment and system
Zhao et al. Understanding partitioning and sequence in data-driven storytelling
EP0664022B1 (en) Object-oriented graphic picking system
KR20100124708A (en) A method, module and device for displaying graphical information
US9733813B2 (en) Device for processing information
CN111459600A (en) Interaction method and system for single-page multi-dimensional penetration scene visual display
US5995984A (en) Apparatus and method for zoom-in entry of an element in a table
Weaver Visualizing coordination in situ
Richards et al. A comparison of two direct-manipulation GIS user interfaces for map overlay
CN117010198A (en) Multi-user multi-view model modeling interaction method based on SysML

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
GR01 Patent grant
GR01 Patent grant