CN112015415A - Screen page configuration and display method and device - Google Patents
Screen page configuration and display method and device Download PDFInfo
- Publication number
- CN112015415A CN112015415A CN202010877831.2A CN202010877831A CN112015415A CN 112015415 A CN112015415 A CN 112015415A CN 202010877831 A CN202010877831 A CN 202010877831A CN 112015415 A CN112015415 A CN 112015415A
- Authority
- CN
- China
- Prior art keywords
- page
- information
- sub
- screen
- width
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 39
- 238000005516 engineering process Methods 0.000 claims abstract description 17
- 238000004590 computer program Methods 0.000 claims description 10
- 210000001503 joint Anatomy 0.000 claims description 4
- 238000009434 installation Methods 0.000 abstract description 5
- 238000012827 research and development Methods 0.000 abstract description 5
- 230000010354 integration Effects 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 17
- 238000010586 diagram Methods 0.000 description 9
- 238000012545 processing Methods 0.000 description 9
- 230000008569 process Effects 0.000 description 7
- 238000004364 calculation method Methods 0.000 description 6
- 238000004891 communication Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 4
- 230000006855 networking Effects 0.000 description 3
- 230000001131 transforming effect Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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
- 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/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a device for configuring and displaying a screen page, wherein the screen page is divided into m × n sub-regions, wherein the width of each sub-region is 1/m, and the height of each sub-region is 1/n; establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component; dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring the width and the height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of a screen page; and configuring and displaying the plurality of page components on the screen page according to the configuration information. Finally, integration of software and hardware of the large-screen system is achieved, upgrading of the firmware in a remote non-stop state is achieved, the page assembly can be configured, and the problems that installation and deployment are complex, the research and development period is long and the like are solved.
Description
Technical Field
The invention relates to the field of screen display, in particular to a method and a device for configuring and displaying a screen page.
Background
With the progress of the web front-end technology and the continuous development of the big data display technology, the application of the exhibition hall is developed vigorously, and the requirement of a big screen system of the exhibition hall is more and more strong. In particular, there is an increasing demand for flexible and versatile configurable large screens. The traditional large screen system and the research and development efficiency can not meet the market requirement.
The existing large screen system on the market is developed by adopting a B/S architecture and combining html with css, so that the following defects exist: firstly, the combination of software and hardware is not realized, and the installation and deployment process is complicated; secondly, the development period of the structure is long, and the price is high; and large screen configurability cannot be realized, upgrading and reconstruction are difficult, and the like.
In view of this, it is very meaningful to establish a novel method and apparatus for configuring and displaying a screen page.
Disclosure of Invention
The method aims at the problems that the existing large-screen system is complex in installation and deployment, long in research and development period, incapable of being configured or difficult to configure, difficult to upgrade and transform and the like. An object of the embodiments of the present application is to provide a method and an apparatus for configuring and displaying a screen page to solve the technical problems mentioned in the above background.
In a first aspect, an embodiment of the present application provides a method for configuring and displaying a screen page, including the following steps:
s1: dividing a screen page into m x n sub-regions, wherein the width of each sub-region is 1/m, and the height of each sub-region is 1/n;
s2: establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component;
s3: dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring the width and the height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of a screen page; and
s4: and configuring and displaying a plurality of page components on the screen page according to the configuration information.
In some embodiments, the page components are developed by vue. js, and the content exposed by the page components is determined by different data sources. Each page component is configured with a respective data source, and each page component is set by adopting the width and the height of each page component to be 100%, so that the specific size of the page component is determined by the layout of the outer layer.
In some embodiments, the presentation form information includes echarts, openlayers maps, plain text, video, and three-dimensional data presentation forms of three. Each page component can independently present various different forms of information on the same screen.
In some embodiments, the positioning information is calculated by the following formula: the top is 1/n x y, the left is 1/m x, wherein the positioning information comprises top and left, y is the number of the sub-regions occupied by the page assembly in the longitudinal direction at the position of the upper left corner of the sub-region and the position of the upper left corner of the screen page, and x is the number of the sub-regions occupied by the page assembly in the transverse direction at the position of the upper left corner of the sub-region and the position of the upper left corner of the screen page. Each page component is in a sub-area at a different position on the screen, and therefore specific positioning information for each component needs to be calculated in order to control the page component more accurately.
In some embodiments, the width and height information is calculated by the following formula: width 1/m s1, height 1/n s2, where width is the width of the page element, height is the height of the page element, s1 is the number of sub-regions occupied by the page element in the lateral direction, and s2 is the number of sub-regions occupied by the page element in the longitudinal direction. The size of each page component after the width and height dragging can be determined according to the width and height information.
In some embodiments, step S4 specifically includes:
s41: implementing the page component through the dynamic component function of Vue.js according to the display form information and the data source information in the configuration information, so that the page component has specific functions; and
s42: and according to the positioning information and the width and height information in the configuration information, the page components are arranged through Css absolute positioning.
And displaying in different forms according to different page components and data sources, so as to restore the page into a complete screen page.
In some embodiments, a File corresponding to a new page component is transmitted through an http module of node. Therefore, the firmware of the page assembly is upgraded in a non-shutdown state, and the problem of difficulty in upgrading and transforming is solved.
In some embodiments, when the data source is a remote data source, step S2 further includes: the data of the remote platform is docked and converted into a uniform format, and an interface is provided for the page assembly; when the data source is a local data source, step S2 further includes: and editing the local data source by adopting html textarea online editing and file input uploading of the json file, and reading the json file by using axios technology to realize the butt joint of the page component and the local data source. Therefore, the configuration of the page component can configure a remote data source and also configure a local data source, and the problem of non-configurability or difficult configuration is solved.
In a second aspect, an embodiment of the present application provides a screen page configuring and displaying apparatus, including:
a dividing module configured to divide the screen page into m × n sub-regions, wherein each sub-region has a width of 1/m and a height of 1/n;
the page component establishing module is configured to establish a plurality of independent page components and acquire the display form information and the data source information of each page component;
the configuration module is configured to drag the page components into the sub-regions through an html drag and drop API technology, acquire positioning information of each page component, perform width and height dragging to acquire width and height information of each page component, and store the positioning information, the width and height information, the display form information and the data source information as configuration information of the screen page; and
a presentation module configured to present the plurality of page components on the screen page according to the configuration information.
In a third aspect, an embodiment of the present application provides an electronic device, including: one or more processors; storage means for storing one or more programs which, when executed by one or more processors, cause the one or more processors to carry out a method as described in any one of the implementations of the first aspect.
In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, which, when executed by a processor, implements the method as described in any implementation manner of the first aspect.
The embodiment of the application discloses a method and a device for configuring and displaying a screen page, wherein the screen page is divided into m × n sub-regions, the width of each sub-region is 1/m, and the height of each sub-region is 1/n; establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component; dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring the width and the height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of a screen page; and configuring and displaying the plurality of page components on the screen page according to the configuration information. Finally, integration of software and hardware of the large-screen system is achieved, upgrading of the firmware in a remote non-stop state is achieved, the page assembly can be configured, and the problems that installation and deployment are complex, the research and development period is long and the like are solved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the description of the embodiments will be briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is an exemplary device architecture diagram in which one embodiment of the present application may be applied;
FIG. 2 is a flow chart of a method for configuring and displaying a base screen page according to an embodiment of the present invention;
FIG. 3 is a flowchart illustrating step S4 of the method for configuring and displaying a screen page according to the embodiment of the present invention;
FIG. 4 is a schematic diagram of a screen page configuring and presenting apparatus according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of a display module of the apparatus for configuring and displaying screen pages according to the embodiment of the present invention;
fig. 6 is a schematic structural diagram of a computer device suitable for implementing an electronic apparatus according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention clearer, the present invention will be described in further detail with reference to the accompanying drawings, and it is apparent that the described embodiments are only a part of the embodiments of the present invention, not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Fig. 1 illustrates an exemplary device architecture 100 to which the screen page configuring and presenting method or the screen page configuring and presenting device of the embodiments of the present application may be applied.
As shown in fig. 1, the apparatus architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
The user may use the terminal devices 101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. Various applications, such as data processing type applications, file processing type applications, etc., may be installed on the terminal apparatuses 101, 102, 103.
The terminal apparatuses 101, 102, and 103 may be hardware or software. When the terminal devices 101, 102, 103 are hardware, they may be various electronic devices including, but not limited to, smart phones, tablet computers, laptop portable computers, desktop computers, and the like. When the terminal apparatuses 101, 102, 103 are software, they can be installed in the electronic apparatuses listed above. It may be implemented as multiple pieces of software or software modules (e.g., software or software modules used to provide distributed services) or as a single piece of software or software module. And is not particularly limited herein.
The server 105 may be a server that provides various services, such as a background data processing server that processes files or data uploaded by the terminal devices 101, 102, 103. The background data processing server can process the acquired file or data to generate a processing result.
It should be noted that the screen page configuring and displaying method provided in the embodiment of the present application may be executed by the server 105, or may be executed by the terminal devices 101, 102, and 103, and accordingly, the screen page configuring and displaying apparatus may be disposed in the server 105, or may be disposed in the terminal devices 101, 102, and 103.
It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation. In the case where the processed data does not need to be acquired from a remote location, the above device architecture may not include a network, but only a server or a terminal device.
FIG. 2 shows that an embodiment of the present application discloses a screen page configuration and presentation method, which comprises the following steps:
s1: dividing a screen page into m x n sub-regions, wherein the width of each sub-region is 1/m, and the height of each sub-region is 1/n;
s2: establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component;
s3: dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring the width and the height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of a screen page; and
s4: and configuring and displaying a plurality of page components on the screen page according to the configuration information.
In one embodiment, the screen page is divided into 24 × 13 sub-regions in step S1, and each sub-region has a width 1/24 × 100% and a height 1/13 × 100%. In a specific embodiment, an API is dragged to drag a page component into each sub-region through html5, and the page component is dragged in width and height.
In a specific embodiment, the page component is developed by vue. js in step S2, and the content presented by the page component is determined by different data sources. Each page component in the screen page is composed of independent components developed by Vue. The display form information comprises echarts, openlayers maps, plain text, video and three-dimensional data display forms of three. Each page component can independently present various different forms of information on the same screen. In other embodiments, other different types of presentation forms may be included to meet different needs.
In a specific embodiment, the positioning information is calculated in step S3 by the following formula: the top is 1/n x y, the left is 1/m x, wherein the positioning information comprises top and left, y is the number of the sub-regions occupied by the page assembly in the longitudinal direction at the position of the upper left corner of the sub-region and the position of the upper left corner of the screen page, and x is the number of the sub-regions occupied by the page assembly in the transverse direction at the position of the upper left corner of the sub-region and the position of the upper left corner of the screen page. Here, with the upper left corner position of the screen page as a reference point and a coordinate system established, the reference point is set to the X axis in the lateral direction and the reference point is set to the Y axis in the longitudinal direction, while with the upper left corner position of the sub-region of each page component as a calculation point, the number of occupied sub-regions in the X axis direction between the calculation point and the reference point is set to X and the number of occupied sub-regions in the X axis direction between the calculation point and the reference point is set to Y. Each page component is in a sub-area at a different position on the screen, and therefore specific positioning information for each component needs to be calculated in order to control the page component more accurately. In this way, the position of each page component on the screen page can be accurately positioned, and therefore the positioning information can be obtained.
In a specific embodiment, the width and height information is calculated by the following formula: width 1/m s1, height 1/n s2, where width is the width of the page element, height is the height of the page element, s1 is the number of sub-regions occupied by the page element in the lateral direction, and s2 is the number of sub-regions occupied by the page element in the longitudinal direction. The size of each page component after the width and height dragging can be determined according to the width and height information. After a plurality of such configurations, a complete screen page is constructed. Therefore, the overall layout information of the screen page is acquired and stored in a database system or locally. The system stores a plurality of such sets of configurations, each of which may exhibit a set of screen layouts.
In a specific embodiment, as shown in fig. 3, step S4 specifically includes:
s41: implementing the page component through the dynamic component function of Vue.js according to the display form information and the data source information in the configuration information, so that the page component has specific functions; and
s42: and according to the positioning information and the width and height information in the configuration information, the page components are arranged through Css absolute positioning.
In this process, the components are declared by the dynamic component function of vue.js, and layout is performed using Css absolute positioning. Js can define components by using general types, and the component types are dynamically defined at a later stage and are not fixed at an earlier stage. The Css absolute position can generate an element of absolute position, positioned relative to the first parent element outside of the static position. The location of the element is specified by the "left", "top", "right" and "bottom" attributes. Therefore, different forms of display can be carried out according to different page components and data sources, and a complete screen page can be restored.
In a specific embodiment, when a requirement for firmware upgrade exists, under a networking condition, a File corresponding to a new page component can be transmitted through an http module of node. Therefore, the firmware of the page assembly is upgraded in a non-shutdown state, and the problem of difficulty in upgrading and transforming is solved.
In a specific embodiment, a remote data source may be configured or a local data source may be configured in the configuration interface of the component. When the data source is a remote data source, step S2 further includes: data interfacing to the remote platform converts it to a uniform format and provides an interface for the page components. The remote data platform system is a back-end service matched with the large-screen system, has the functions of butting the data of each original platform and providing the data with a uniform format for the large-screen system. When the data source is a local data source, step S2 further includes: and editing the local data source by adopting html textarea online editing and file input uploading of the json file, and reading the json file by using axios technology to realize the butt joint of the page component and the local data source. Therefore, the configuration of the page component can configure a remote data source and also configure a local data source, and the problem of non-configurability or difficult configuration is solved.
With further reference to fig. 4, as an implementation of the method shown in the above-mentioned figures, the present application provides an embodiment of a screen page configuring and presenting apparatus, which corresponds to the embodiment of the method shown in fig. 2, and which is specifically applicable to various electronic devices.
As shown in fig. 4, an embodiment of the present application provides a screen page configuring and presenting apparatus, including:
a dividing module 1 configured to divide the screen page into m × n sub-regions, wherein each sub-region has a width of 1/m and a height of 1/n;
the page component establishing module 2 is configured to establish a plurality of independent page components and acquire the presentation form information and the data source information of each page component;
the configuration module 3 is configured to drag the page components into the sub-regions through an html drag and drop API technology, acquire positioning information of each page component, perform width and height dragging to acquire width and height information of each page component, and store the positioning information, the width and height information, the presentation form information and the data source information as configuration information of the screen page; and
and the presentation module 4 is configured to present the plurality of page components on the screen page according to the configuration information.
The screen page configuring and displaying device provided in the embodiment of the application can be a customized micro-host, and integrates configurable large-screen system software. When the micro-mainframe is deployed, the micro-mainframe is connected with a display screen, so that a screen interface is displayed. By user-defined configuration, the page components of the screen can be randomly combined and the layout can be defined.
In one embodiment, the screen page is divided into 24 × 13 sub-regions in the segmentation module 1, each sub-region having a size of 1/24 × 100% width and 1/13 × 100% height. In a specific embodiment, an API is dragged to drag a page component into each sub-region through html5, and the page component is dragged in width and height.
In a specific embodiment, the page components are developed by vue.js in the page component building module 2, and the contents displayed by the page components are determined by different data sources. Each page component in the screen page is composed of independent components developed by Vue. The display form information comprises echarts, openlayers maps, plain text, video and three-dimensional data display forms of three. Each page component can independently present various different forms of information on the same screen. In other embodiments, other different types of presentation forms may be included to meet different needs.
In a specific embodiment, the positioning information in the configuration module 3 is calculated by the following formula: the top is 1/n x y, the left is 1/m x, wherein the positioning information comprises top and left, y is the number of the sub-regions occupied by the page assembly in the longitudinal direction at the position of the upper left corner of the sub-region and the position of the upper left corner of the screen page, and x is the number of the sub-regions occupied by the page assembly in the transverse direction at the position of the upper left corner of the sub-region and the position of the upper left corner of the screen page. Here, with the upper left corner position of the screen page as a reference point and a coordinate system established, the reference point is set to the X axis in the lateral direction and the reference point is set to the Y axis in the longitudinal direction, while with the upper left corner position of the sub-region of each page component as a calculation point, the number of occupied sub-regions in the X axis direction between the calculation point and the reference point is set to X and the number of occupied sub-regions in the X axis direction between the calculation point and the reference point is set to Y. Each page component is in a sub-area at a different position on the screen, and therefore specific positioning information for each component needs to be calculated in order to control the page component more accurately. In this way, the position of each page component on the screen page can be accurately positioned, and therefore the positioning information can be obtained.
In a specific embodiment, the width and height information is calculated by the following formula: width 1/m s1, height 1/n s2, where width is the width of the page element, height is the height of the page element, s1 is the number of sub-regions occupied by the page element in the lateral direction, and s2 is the number of sub-regions occupied by the page element in the longitudinal direction. The size of each page component after the width and height dragging can be determined according to the width and height information. After a plurality of such configurations, a complete screen page is constructed. Therefore, the overall layout information of the screen page is acquired and stored in a database system or locally. The system stores a plurality of such sets of configurations, each of which may exhibit a set of screen layouts.
In a specific embodiment, as shown in fig. 5, the display module 4 specifically includes:
the functional module 41 is configured to implement the page component through the dynamic component function of vue.js according to the presentation form information and the data source information in the configuration information, so that the page component has a specific function; and
and the layout module 42 is configured to layout the page components through Css absolute positioning according to the positioning information and the width and height information in the configuration information.
In this process, the components are declared by the dynamic component function of vue.js, and layout is performed using Css absolute positioning. Js can define components by using general types, and the component types are dynamically defined at a later stage and are not fixed at an earlier stage. The Css absolute position can generate an element of absolute position, positioned relative to the first parent element outside of the static position. The location of the element is specified by the "left", "top", "right" and "bottom" attributes. Therefore, different forms of display can be carried out according to different page components and data sources, and a complete screen page can be restored.
In a specific embodiment, when a requirement for firmware upgrade exists, under a networking condition, a File corresponding to a new page component can be transmitted through an http module of node. Therefore, the firmware of the page assembly is upgraded in a non-shutdown state, and the problem of difficulty in upgrading and transforming is solved.
In a specific embodiment, a remote data source may be configured or a local data source may be configured in the configuration interface of the component. When the data source is a remote data source, the page component establishing module 2 further includes: data interfacing to the remote platform converts it to a uniform format and provides an interface for the page components. The remote data platform system is a back-end service matched with the large-screen system, has the functions of butting the data of each original platform and providing the data with a uniform format for the large-screen system. When the data source is a local data source, the page component establishing module 2 further includes: and editing the local data source by adopting html textarea online editing and file input uploading of the json file, and reading the json file by using axios technology to realize the butt joint of the page component and the local data source. Therefore, the configuration of the page component can configure a remote data source and also configure a local data source, and the problem of non-configurability or difficult configuration is solved.
In a specific embodiment, a customer service staff can remotely design a screen configuration scheme for a user according to the requirements of the user. And under the networking condition, transmitting the latest configuration information to the micro host in a JSON form through the http module of the node. And after selection, displaying the screen interface, thereby realizing the function of remote assistance.
The embodiment of the application discloses a method and a device for configuring and displaying a screen page, wherein the screen page is divided into m × n sub-regions, the width of each sub-region is 1/m, and the height of each sub-region is 1/n; establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component; dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring the width and the height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of a screen page; and configuring and displaying the plurality of page components on the screen page according to the configuration information. Finally, integration of software and hardware of the large-screen system is achieved, upgrading of the firmware in a remote non-stop state is achieved, the page assembly can be configured, and the problems that installation and deployment are complex, the research and development period is long and the like are solved.
Referring now to fig. 6, a schematic diagram of a computer device 600 suitable for use in implementing an electronic device (e.g., the server or terminal device shown in fig. 1) according to an embodiment of the present application is shown. The electronic device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.
As shown in fig. 6, the computer apparatus 600 includes a Central Processing Unit (CPU)601 and a Graphics Processing Unit (GPU)602, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)603 or a program loaded from a storage section 609 into a Random Access Memory (RAM) 604. In the RAM 604, various programs and data necessary for the operation of the apparatus 600 are also stored. The CPU 601, GPU602, ROM 603, and RAM 604 are connected to each other via a bus 605. An input/output (I/O) interface 606 is also connected to bus 605.
The following components are connected to the I/O interface 606: an input portion 607 including a keyboard, a mouse, and the like; an output section 608 including a display such as a Liquid Crystal Display (LCD) and a speaker; a storage section 609 including a hard disk and the like; and a communication section 610 including a network interface card such as a LAN card, a modem, or the like. The communication section 610 performs communication processing via a network such as the internet. The driver 611 may also be connected to the I/O interface 606 as needed. A removable medium 612 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 611 as necessary, so that a computer program read out therefrom is mounted into the storage section 609 as necessary.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such embodiments, the computer program may be downloaded and installed from a network via the communication section 610, and/or installed from the removable media 612. The computer programs, when executed by a Central Processing Unit (CPU)601 and a Graphics Processor (GPU)602, perform the above-described functions defined in the methods of the present application.
It should be noted that the computer readable medium described herein can be a computer readable signal medium or a computer readable medium or any combination of the two. The computer readable medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor device, apparatus, or any combination of the foregoing. More specific examples of the computer readable medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer readable medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution apparatus, device, or apparatus. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution apparatus, device, or apparatus. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based devices that perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present application may be implemented by software or hardware. The modules described may also be provided in a processor.
As another aspect, the present application also provides a computer-readable medium, which may be contained in the electronic device described in the above embodiments; dividing a screen page into m x n sub-regions, wherein the width of each sub-region is 1/m, and the height of each sub-region is 1/n; establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component; dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring the width and the height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of a screen page; and configuring and displaying the plurality of page components on the screen page according to the configuration information.
The above description is only a preferred embodiment of the application and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the invention herein disclosed is not limited to the particular combination of features described above, but also encompasses other arrangements formed by any combination of the above features or their equivalents without departing from the spirit of the invention. For example, the above features may be replaced with (but not limited to) features having similar functions disclosed in the present application.
Claims (11)
1. A method for configuring and displaying a screen page is characterized by comprising the following steps:
s1: dividing a screen page into m x n sub-regions, wherein the width of each sub-region is 1/m, and the height of each sub-region is 1/n;
s2: establishing a plurality of independent page components, and acquiring the display form information and the data source information of each page component;
s3: dragging the page components into each sub-area through an html drag and drop API (application program interface) technology, acquiring positioning information of each page component, dragging the width and the height of each page component, acquiring width and height information of each page component, and storing the positioning information, the width and the height information, the display form information and the data source information as configuration information of the screen page; and
s4: and configuring and displaying a plurality of page components on the screen page according to the configuration information.
2. The screen page configuring and presenting method of claim 1 wherein said page components are developed by vue.
3. The method of claim 1, wherein the presentation form information comprises echarts, openlayers maps, plain text, video, and three.
4. A screen page configuring and presenting method according to claim 1 wherein said positioning information is calculated by the following formula: the top is 1/n x y, the left is 1/m x, wherein the positioning information includes top and left, y is the number of the sub-regions occupied by the page assembly in the longitudinal direction at the upper left corner of the sub-region and the upper left corner of the screen page, and x is the number of the sub-regions occupied by the page assembly in the transverse direction at the upper left corner of the sub-region and the upper left corner of the screen page.
5. The screen page configuring and presenting method of claim 1, wherein the aspect information is calculated by the following formula: width 1/m s1, height 1/n s2, where width is the width of the page element, height is the height of the page element, s1 is the number of the sub-regions occupied by the page element in the transverse direction, and s2 is the number of the sub-regions occupied by the page element in the longitudinal direction.
6. The method for configuring and presenting screen pages according to claim 1, wherein said step S4 specifically comprises:
s41: instantiating the page component through a dynamic component function of Vue.js according to the presentation form information and the data source information in the configuration information, so that the page component has a specific function; and
s42: and according to the positioning information and the width and height information in the configuration information, the page assembly is arranged through Css absolute positioning.
7. The method for configuring and displaying screen pages according to claim 1, wherein a new File corresponding to the page component is transmitted through a node.js http module, and the original File corresponding to the page component is replaced through a node.js File module, and then a screen interface is restarted through a node.js open module to complete the upgrading of the page component.
8. The method for configuring and presenting a screen page as recited in claim 2, wherein when the data source is a remote data source, the step S2 further comprises: the data of the remote platform is docked and converted into a uniform format, and an interface is provided for the page component; when the data source is a local data source, the step S2 further includes: and editing the local data source by adopting html textarea online editing and file input uploading of a json file, and reading the json file by using an axios technology to realize the butt joint of the page component and the local data source.
9. A screen page configuring and presenting apparatus, comprising:
a dividing module configured to divide a screen page into m × n sub-regions, wherein each of the sub-regions has a width of 1/m and a height of 1/n;
the page component establishing module is configured to establish a plurality of independent page components and acquire the display form information and the data source information of each page component;
the configuration module is configured to drag the page components into the sub-area through an html drag and drop API technology, acquire positioning information of each page component, perform width and height dragging to acquire width and height information of each page component, and store the positioning information, the width and height information, the presentation form information and the data source information as configuration information of the screen page; and
a presentation module configured to present the plurality of page components on the screen page according to the configuration information.
10. An electronic device, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-8.
11. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010877831.2A CN112015415B (en) | 2020-08-27 | 2020-08-27 | Screen page configuration and display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010877831.2A CN112015415B (en) | 2020-08-27 | 2020-08-27 | Screen page configuration and display method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112015415A true CN112015415A (en) | 2020-12-01 |
| CN112015415B CN112015415B (en) | 2022-12-06 |
Family
ID=73504086
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010877831.2A Active CN112015415B (en) | 2020-08-27 | 2020-08-27 | Screen page configuration and display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112015415B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114281296A (en) * | 2021-11-10 | 2022-04-05 | 南京奥拓电子科技有限公司 | Method and system for displaying and processing personal information |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107526576A (en) * | 2016-06-21 | 2017-12-29 | 阿里巴巴集团控股有限公司 | The methods of exhibiting and device of the view component of the page |
| CN111045573A (en) * | 2018-10-15 | 2020-04-21 | 阿里巴巴集团控股有限公司 | Method and device for displaying floating window page and equipment/terminal/server |
| US20200195705A1 (en) * | 2018-12-18 | 2020-06-18 | Alibaba Group Holding Limited | Method and apparatus for browser application to load first screen of web page |
| CN111488089A (en) * | 2020-04-07 | 2020-08-04 | 携程旅游网络技术（上海）有限公司 | Man-machine interaction method and device, storage medium and electronic equipment |
-
2020
- 2020-08-27 CN CN202010877831.2A patent/CN112015415B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107526576A (en) * | 2016-06-21 | 2017-12-29 | 阿里巴巴集团控股有限公司 | The methods of exhibiting and device of the view component of the page |
| CN111045573A (en) * | 2018-10-15 | 2020-04-21 | 阿里巴巴集团控股有限公司 | Method and device for displaying floating window page and equipment/terminal/server |
| US20200195705A1 (en) * | 2018-12-18 | 2020-06-18 | Alibaba Group Holding Limited | Method and apparatus for browser application to load first screen of web page |
| CN111488089A (en) * | 2020-04-07 | 2020-08-04 | 携程旅游网络技术（上海）有限公司 | Man-machine interaction method and device, storage medium and electronic equipment |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114281296A (en) * | 2021-11-10 | 2022-04-05 | 南京奥拓电子科技有限公司 | Method and system for displaying and processing personal information |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112015415B (en) | 2022-12-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109597617B (en) | Method and device for quickly generating service page based on template | |
| CN109634598B (en) | Page display method, device, equipment and storage medium | |
| CN109918604A (en) | Page drawing method, apparatus, equipment and storage medium | |
| CN113031946B (en) | Method and device for rendering page component | |
| CN111459501B (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| CN110675465B (en) | Method and apparatus for generating image | |
| CN110766772A (en) | Flatter-based cross-platform poster manufacturing method, device and equipment | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| WO2023077951A1 (en) | Data rendering method and apparatus | |
| CN111290737A (en) | Method and device for application program development and electronic equipment | |
| CN111951356B (en) | Animation rendering method based on JSON data format | |
| CN113760289A (en) | Method and device for drawing canvas | |
| US9646362B2 (en) | Algorithm for improved zooming in data visualization components | |
| US9430808B2 (en) | Synchronization points for state information | |
| CN112015415B (en) | Screen page configuration and display method and device | |
| CN113553123B (en) | Data processing method, device, electronic equipment and storage medium | |
| US9501812B2 (en) | Map performance by dynamically reducing map detail | |
| CN112486482A (en) | Page display method and device | |
| CN113688341A (en) | Dynamic picture decomposition method and device, electronic equipment and readable storage medium | |
| CN114756228A (en) | Page processing method, device, equipment and storage medium | |
| CN109144655B (en) | Method, device, system and medium for dynamically displaying image | |
| CN113672317B (en) | Method and device for rendering topic pages | |
| CN113656041A (en) | Data processing method, device, equipment and storage medium | |
| CN112926005A (en) | EChats-based housing accumulation fund data display method and device | |
| CN113849257A (en) | Page processing method, device, medium and electronic equipment |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20221101 Address after: 361000 unit 102, No. 59, erhaihai Road, software park, Siming District, Xiamen City, Fujian Province Applicant after: ROPT TECHNOLOGY GROUP Co.,Ltd. Applicant after: Lop (Xiamen) system integration Co.,Ltd. Applicant after: ROPT (Shanghai) Technology Co.,Ltd. Address before: 361000 unit 102, No. 59, erhaihai Road, software park, Siming District, Xiamen City, Fujian Province Applicant before: ROPT TECHNOLOGY GROUP Co.,Ltd. Applicant before: Lop (Xiamen) system integration Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address |
Address after: 361000 unit 102, No. 59, erhaihai Road, software park, Siming District, Xiamen City, Fujian Province Patentee after: ROPT TECHNOLOGY GROUP Co.,Ltd. Country or region after: China Patentee after: ROPT (Xiamen) Big Data Group Co.,Ltd. Patentee after: ROPT (Shanghai) Technology Co.,Ltd. Address before: 361000 unit 102, No. 59, erhaihai Road, software park, Siming District, Xiamen City, Fujian Province Patentee before: ROPT TECHNOLOGY GROUP Co.,Ltd. Country or region before: China Patentee before: Lop (Xiamen) system integration Co.,Ltd. Patentee before: ROPT (Shanghai) Technology Co.,Ltd. |
|
| CP03 | Change of name, title or address |