CN117453217A - Visual page information processing method and device, electronic equipment and storage medium - Google Patents
Visual page information processing method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN117453217A CN117453217A CN202311474325.9A CN202311474325A CN117453217A CN 117453217 A CN117453217 A CN 117453217A CN 202311474325 A CN202311474325 A CN 202311474325A CN 117453217 A CN117453217 A CN 117453217A
- Authority
- CN
- China
- Prior art keywords
- control
- page
- user
- controls
- attribute
- 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
- 230000000007 visual effect Effects 0.000 title claims abstract description 72
- 230000010365 information processing Effects 0.000 title claims abstract description 26
- 238000003672 processing method Methods 0.000 title claims abstract description 15
- 238000000034 method Methods 0.000 claims abstract description 49
- 238000009877 rendering Methods 0.000 claims abstract description 30
- 230000004044 response Effects 0.000 claims description 10
- 230000004048 modification Effects 0.000 claims description 7
- 238000012986 modification Methods 0.000 claims description 7
- 230000000694 effects Effects 0.000 claims description 6
- 238000005538 encapsulation Methods 0.000 claims description 6
- 150000001875 compounds Chemical class 0.000 claims description 5
- 238000011156 evaluation Methods 0.000 claims description 5
- 238000004806 packaging method and process Methods 0.000 claims description 5
- 238000004590 computer program Methods 0.000 claims description 3
- 238000013461 design Methods 0.000 abstract description 50
- 238000011161 development Methods 0.000 abstract description 23
- 230000008569 process Effects 0.000 abstract description 13
- 230000008447 perception Effects 0.000 abstract description 7
- 238000010586 diagram Methods 0.000 description 14
- 230000006870 function Effects 0.000 description 8
- 230000000474 nursing effect Effects 0.000 description 8
- 238000012545 processing Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 230000003044 adaptive effect Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000006399 behavior Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000003745 diagnosis Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002035 prolonged effect Effects 0.000 description 1
- 238000003908 quality control method Methods 0.000 description 1
- 230000001105 regulatory effect Effects 0.000 description 1
- 230000010076 replication Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- 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
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/02—Total factory control, e.g. smart factories, flexible manufacturing systems [FMS] or integrated manufacturing systems [IMS]
Abstract
The application provides a visual page information processing method, a visual page information processing device, electronic equipment and a storage medium, wherein the visual page information processing method comprises the following steps: acquiring configuration information of each control predefined by a user; the control is packaged according to the configuration information of each control, the packaged control is built in an editor, and the editor comprises a control list area, a control attribute configuration area and a page display area; responding to the operation of selecting at least one target control from the control list area by a user, and rendering and displaying each target control and control attribute of each target control; and responding to a configuration instruction of a user on the control attribute, configuring the control attribute, and generating a first template page. According to the method and the device, through the page visual editor capable of setting page styles and customizing the controls in a self-defining mode, the design development process is converted into intuitive control dragging and dropping, configuration and adjustment operations, and the problems that in the prior art, a user cannot set a self-defining page, the technical threshold is high, the user perception experience is poor and the like are solved.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a method and apparatus for processing visual page information, an electronic device, and a storage medium.
Background
The traditional page design flow is that users put forward service demands, developers carry out corresponding page codes according to the service demands of the users, and design pages meeting the demands of the users are designed. In this process, if the user wants to make a design change, the appearance or function of the design page is changed, for example, some minor changes are always involved in the care management type of each medical institution, and then the developer needs to go deep into the page code to rewrite the code, so as to support various page design requirements.
Therefore, in the design and development process of the page, a developer is required to write a large amount of codes in order to support various page design requirements, the page design is inflexible, and complicated development work is added for the developer, so that the development time is prolonged, and further the development cost is increased. In addition, the page design needs to rely on the professional technical knowledge of developers, and abundant custom settings cannot be carried out for people unfamiliar with the professional technical knowledge, so that the technical threshold is high, and the user needs cannot be responded in time, so that the specific design needs of the user are met, and the perception experience of the user is reduced.
Disclosure of Invention
The purpose of the present application is to provide a method, an apparatus, an electronic device, and a storage medium for processing visual page information, so as to solve the problems in the prior art that a user cannot customize page setting, a technical threshold is high, and user perception experience is poor.
In order to achieve the above purpose, the technical solution adopted in the embodiment of the present application is as follows:
in a first aspect, an embodiment of the present application provides a method for processing visual page information, where the method includes:
acquiring configuration information of each control predefined by a user;
performing control encapsulation according to configuration information of each control, and embedding the encapsulated control into an editor, wherein the editor comprises a control list area, a control attribute configuration area and a page display area;
responding to the operation of selecting at least one target control from the control list area by the user, and rendering and displaying each target control and control attributes of each target control;
and responding to the configuration instruction of the user on the control attribute, configuring the control attribute and generating a first template page.
As a possible implementation manner, the responding to the configuration instruction of the user to the control attribute configures the control attribute, and after generating the first template page, the method further includes:
Responding to a modification instruction of the user for a control to be updated in the first template page, and displaying a control attribute of the control to be updated;
and responding to an updating instruction of the user on the control attribute of the control to be updated, and updating the control attribute of the control to be updated to obtain a second template page after the first template page is updated.
As a possible implementation manner, the obtaining the configuration information of each control predefined by the user includes:
responding to the operation of inputting configuration information by the user on a visual interface, and acquiring the configuration information of each control, wherein the configuration information at least comprises: control name, control type, grouping to which the control belongs, and modifiable control attribute content.
As a possible implementation manner, the rendering and displaying each target control and the control attribute of each target control in response to the operation of the user to select at least one target control from the control list area includes:
responding to the operation of dragging the target control from the control list area by the user, and determining the arrangement position of the target control in the page display area;
And rendering and displaying the target control in the page display area, and displaying the control attribute of the target control in the control attribute configuration area.
As a possible implementation manner, the responding to the configuration instruction of the user to the control attribute configures the control attribute to generate a first template page, including:
responding to the configuration instruction, configuring control attributes of each target control in the control attribute configuration area, and generating the first template page according to the configured control attributes;
wherein, the control attribute at least comprises: cell attributes, control name attributes, associated controls, control presentation styles, font attributes, display formats, and drop-down value fields.
As one possible implementation, the control types include: container control type, layout control type, generic control type, specialized control type, and custom control type;
controls belonging to the container control type at least comprise: folding panel controls, form combination controls, and compound nested controls;
the controls belonging to the layout control type at least comprise: line controls, custom form controls, and label controls;
The controls belonging to the generic control type at least comprise: basic information control, accessory control, place control, period control and information record control;
the controls belonging to the special control type at least comprise: an effect evaluation control;
the controls belonging to the custom control type at least comprise: a selection box control, a text box control, a drop down box control, and a text control.
As a possible implementation manner, the control list area is used for displaying controls;
the control attribute configuration area is used for configuring control attributes of target controls dragged from the control list area to the page display area by a user;
and the page display area is used for rendering and displaying the target control dragged by the user from the control list area.
In a second aspect, an embodiment of the present application provides a visualized page information processing apparatus, including:
the acquisition module is used for acquiring configuration information of each control predefined by a user;
the packaging module is used for packaging the controls according to the configuration information of each control, and embedding the packaged controls into an editor, wherein the editor comprises a control list area, a control attribute configuration area and a page display area;
The rendering display module is used for responding to the operation of selecting at least one target control from the control list area by the user, and rendering and displaying each target control and the control attribute of each target control;
the generation module is used for responding to the configuration instruction of the user on the control attribute, configuring the control attribute and generating a first template page.
As a possible implementation manner, the generating module is further configured to:
responding to a modification instruction of the user for a control to be updated in the first template page, and displaying a control attribute of the control to be updated;
and responding to an updating instruction of the user on the control attribute of the control to be updated, and updating the control attribute of the control to be updated to obtain a second template page after the first template page is updated.
As a possible implementation manner, the acquiring module is specifically configured to:
responding to the operation of inputting configuration information by the user on a visual interface, and acquiring the configuration information of each control, wherein the configuration information at least comprises: control name, control type, grouping to which the control belongs, and modifiable control attribute content.
As a possible implementation manner, the rendering display module is specifically configured to:
Responding to the operation of dragging the target control from the control list area by the user, and determining the arrangement position of the target control in the page display area;
and rendering and displaying the target control in the page display area, and displaying the control attribute of the target control in the control attribute configuration area.
As a possible implementation manner, the generating module is specifically configured to:
responding to the configuration instruction, configuring control attributes of each target control in the control attribute configuration area, and generating the first template page according to the configured control attributes;
wherein, the control attribute at least comprises: cell attributes, control name attributes, associated controls, control presentation styles, font attributes, display formats, and drop-down value fields.
As one possible implementation, the control types include: container control type, layout control type, generic control type, specialized control type, and custom control type;
controls belonging to the container control type at least comprise: folding panel controls, form combination controls, and compound nested controls;
the controls belonging to the layout control type at least comprise: line controls, custom form controls, and label controls;
The controls belonging to the generic control type at least comprise: basic information control, accessory control, place control, period control and information record control;
the controls belonging to the special control type at least comprise: an effect evaluation control;
the controls belonging to the custom control type at least comprise: a selection box control, a text box control, a drop down box control, and a text control.
As a possible implementation manner, the control list area is used for displaying controls;
the control attribute configuration area is used for configuring control attributes of target controls dragged from the control list area to the page display area by a user;
and the page display area is used for rendering and displaying the target control dragged by the user from the control list area.
In a third aspect, an embodiment of the present application provides an electronic device, including: a processor, a storage medium and a bus, the storage medium storing machine-readable instructions executable by the processor, the processor in communication with the storage medium via the bus when the electronic device is running, the processor executing the machine-readable instructions to perform the steps of the method of visual page information processing as described in any one of the first aspects above.
In a fourth aspect, embodiments of the present application provide a storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of the method for processing visualized page information according to any one of the first aspects above.
According to the visual page information processing method, the visual page information processing device, the electronic equipment and the storage medium, configuration information of each control predefined by a user is obtained, the control is defined and encapsulated according to the configuration information of each control, the encapsulated control is built in an editor, the editor comprises a control list area, a control attribute configuration area and a page display area, a visual interface and a tool capable of customizing a page style and a custom control are provided by the editor, the operation of selecting at least one target control from the control list area by the user is responded, the control attribute of each target control and each target control is rendered and displayed, the configuration instruction of the control attribute is responded by the user, the control attribute is configured, and a first template page is generated. Based on the method, according to the method, the device and the system, the visual editor of the page with the custom set page style and the custom control type is essentially to provide a visual interface and a visual tool, so that a user can customize the appearance and the function of the design page without deep coding of technicians, thereby reducing development work of the technicians, saving development time and further reducing development cost. And the page design and development process is converted into intuitive drag-and-drop, configuration and adjustment operations, so that non-technicians not familiar with technical expertise can participate in the customization and creation of the page, thereby reducing the technical threshold, and the user can meet the specific design requirements of the user through self-defined configuration, thereby improving the perception experience of the user.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments will be briefly described below, it being understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered limiting the scope, and that other related drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 shows a flow diagram of a method for processing visual information of a page according to an embodiment of the present application;
FIG. 2 illustrates a schematic diagram of a visual interface provided by an embodiment of the present application;
fig. 3 is a schematic diagram of a nursing ward-round record form design page according to an embodiment of the present application;
FIG. 4 is a flow chart of a method of operation provided in an embodiment of the present application;
FIG. 5 is a schematic diagram of an associated data display interface according to an embodiment of the present application;
FIG. 6 is a schematic diagram of a data element association setup page according to an embodiment of the present application;
FIG. 7 is a schematic diagram of an association script setting interface provided by an embodiment of the present application;
FIG. 8 is a schematic diagram of a first template page according to an embodiment of the present application;
Fig. 9 is a schematic structural diagram of a page visualized information processing apparatus according to an embodiment of the present application;
fig. 10 shows a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it should be understood that the accompanying drawings in the present application are only for the purpose of illustration and description, and are not intended to limit the protection scope of the present application. In addition, it should be understood that the schematic drawings are not drawn to scale. A flowchart, as used in this application, illustrates operations implemented according to some embodiments of the present application. It should be understood that the operations of the flow diagrams may be implemented out of order and that steps without logical context may be performed in reverse order or concurrently. Moreover, one or more other operations may be added to the flow diagrams and one or more operations may be removed from the flow diagrams as directed by those skilled in the art.
In addition, the described embodiments are only some, but not all, of the embodiments of the present application. The components of the embodiments of the present application, which are generally described and illustrated in the figures herein, may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present application, as provided in the accompanying drawings, is not intended to limit the scope of the application, as claimed, but is merely representative of selected embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present application without making any inventive effort, are intended to be within the scope of the present application.
In order to enable one skilled in the art to use the present disclosure, the following embodiments are presented in connection with a particular application scenario "page design". It will be apparent to those having ordinary skill in the art that the general principles defined herein may be applied to other embodiments and applications without departing from the spirit and scope of the present application. Although the present application is described primarily in the context of a visual page information processing method, it should be understood that this is but one exemplary embodiment.
It should be noted that the term "comprising" will be used in the embodiments of the present application to indicate the presence of the features stated hereinafter, but not to exclude the addition of other features.
Currently, each medical institution usually involves some care management type projects, and corresponding form designs, such as a special consultation application replication form design, a care ward-round record form design, a special record form design, and the like, need to be performed. There are also differences in the design of the various forms for different medical institutions, and minor changes in the form design are often involved to meet regulatory requirements. Therefore, the developer needs to develop corresponding codes to support various configurations, and if the developer needs to make changes, the developer needs to go deep into the codes, which easily causes code redundancy and easily causes logic interaction.
In addition, writing codes for form design needs to rely on professional technical knowledge of developers, and for non-technicians who are not familiar with the professional technical knowledge, custom configuration cannot be performed by writing codes, so that the technical threshold of technical implementation is high. Because a developer needs to write a large amount of codes manually in designing and laying out form pages, and in order to avoid the problems of code redundancy and logic influence after modification, the complex development work is undoubtedly added for the developer, and the development period is increased. Therefore, the existing page visualization processing scheme has the defects of complex implementation process, higher technical threshold, incapability of flexibly carrying out custom page setting by a user, incapability of responding to the user demand in time and creation of patterns and controls meeting the specific demands of the user, thereby reducing the perception experience of the user.
Therefore, in order to solve the above-mentioned problems, it is particularly urgent to enable the user to customize the page style, the page layout, the dynamic association relationship and the custom control type by using the page visual editor to flexibly support the page element customization and the presentation mode customization.
Fig. 1 shows a flow chart of a visual page information processing method according to an embodiment of the present application. Referring to fig. 1, the method specifically includes the following steps:
S101, acquiring configuration information of each control predefined by a user.
Optionally, the editor may provide a visual interface for the user, so that the user can intuitively view and edit the structure and layout of the page, so that in order to meet many design needs of the user, the user can have rich and diversified control selections, and before the form design is performed, the user can define configuration information of a plurality of controls in advance, so that the control can be defined according to the configuration information of each control, and the corresponding function can be realized.
S102, performing control encapsulation according to configuration information of each control, and embedding the encapsulated control into an editor, wherein the editor comprises a control list area, a control attribute configuration area and a page display area.
Optionally, according to configuration information of each control predefined by a user, generating a corresponding code by the implementation function corresponding to the control based on the Vue, and packaging the control after generating the code. The Vue is a JavaScript framework for constructing a user interface, and is also a Web application framework for creating page applications.
After the control is encapsulated, the encapsulated control is built in the editor, so that the editor encapsulates a set of control based on Vue built-in, the control encapsulation according to the configuration information of each control is equivalent to the default attribute of each control, the encapsulated control is equivalent to js objects stored in the editor based on the characteristic of the Vue, and each js object corresponds to one control in the control list area.
In order to enable a user to intuitively view and edit the structure and layout of the page, the editor provides a visual interface for the user, and the visual interface can be divided into a control list area, a control attribute configuration area and a page display area by way of example, so that the visual interface is easier to manage and normalize.
And S103, responding to the operation of selecting at least one target control from the control list area by a user, and rendering and displaying each target control and the control attribute of each target control.
Optionally, the encapsulated control is built into the editor and displayed in a control list area of the editor for the user to select the control. That is, a plurality of encapsulated controls are displayed in the control list area, and a user can perform page design by selecting one or more target controls in the control list area.
In an exemplary case where a user performs page design by using an editor, in response to a user selecting at least one target control from the control list area, the target control is moved from the control list area to a corresponding rendering display area for display, where the rendering display area may be a page presentation area provided by the editor.
In the process of rendering and displaying the target control, not only the target control selected by the user can be displayed in the page display area, but also the control attribute of the selected target control is rendered and displayed in the control attribute configuration area when the user selects one of the target controls, so that the user can more intuitively and clearly view what contents are specifically included in the control attribute of the target control, and the control attribute of the target control can be conveniently modified.
S104, responding to a configuration instruction of a user on the control attribute, configuring the control attribute, and generating a first template page.
Optionally, after rendering and displaying at least one target control selected by the user from the control list area, the page display area clearly displays one or more target controls selected by the user for page design, clearly displays control attributes corresponding to the target control currently selected by the user in the control attribute configuration area, and dynamically configures the control attributes of the target controls by the user, and dynamically displays the configured page result in the page display area in real time.
The configuration method includes the steps that a configuration instruction of a control attribute of a currently selected target control is responded, each control attribute of each target control is sequentially configured in a control attribute configuration area, after configuration is completed, changes of a configured page can be displayed in real time in a page display area until the configuration of the control attribute of the target control is completed after the page setting requirement of a user is met, and a first template page is generated and displayed in the page display area.
According to the visual page information processing method, configuration information of each control predefined by a user is obtained, the control is defined and encapsulated according to the configuration information of each control, the encapsulated control is built in an editor, the editor comprises a control list area, a control attribute configuration area and a page display area, the editor provides a visual interface and a tool capable of customizing a page style and a custom control, the operation of selecting at least one target control from the control list area by the user is responded, the control attributes of each target control and each target control are rendered and displayed, the configuration instruction of the control attributes by the user is responded, the control attributes are configured, and a first template page is generated. Based on the method, according to the method, the device and the system, the visual editor of the page with the custom set page style and the custom control type is essentially to provide a visual interface and a visual tool, so that a user can customize the appearance and the function of the design page without deep coding of technicians, thereby reducing development work of the technicians, saving development time and further reducing development cost. And the page design and development process is converted into intuitive drag-and-drop, configuration and adjustment operations, so that non-technicians not familiar with technical expertise can participate in the customization and creation of the page, thereby reducing the technical threshold, and the user can meet the specific design requirements of the user through self-defined configuration, thereby improving the perception experience of the user.
Before describing the above implementation steps in detail, an editor provided in an embodiment of the present application will be described.
As one possible implementation, the essence of the editor is to provide a visual interface and tools. Illustratively, as shown in FIG. 2, the visual interface provided by the editor may be divided into a control list area, a control property configuration area, and a page presentation area. The content display modes of the visual interface may include an A4 paper mode, an adaptive mode, and a mobile terminal mode, and the content display modes of the visual interface may be freely selected and switched by a user.
The control list area is used for displaying the controls, the control attribute configuration area is used for configuring control attributes of target controls dragged by a user from the control list area to the page display area, and the page display area is used for rendering and displaying the target controls dragged by the user from the control list area.
For example, in connection with the illustration of fig. 2, the content display mode of the visual interface is exemplified by the A4 paper mode, the control list area is located in the left area of the visual interface, the control attribute configuration area is located in the right area of the visual interface, and the page display area is located in the middle area of the visual interface. The control list area is provided with a plurality of encapsulated controls, the control attribute configuration area is provided with control attributes corresponding to target controls selected by a user, and the page display area dynamically displays form pages designed according to the configured control attributes in real time.
It should be noted that, the positions of the control list area, the page display area and the control attribute configuration area in the visual interface are not particularly limited, and may be freely set according to habits and requirements of users.
Based on the method, the page can be flexibly designed and the user requirements can be responded quickly through the page visual editor capable of setting the page style and the custom control type in a custom mode.
As a possible implementation manner, the step S101 obtains configuration information of each control predefined by the user, including:
responding to the operation of inputting configuration information by a user on a visual interface, and acquiring the configuration information of each control, wherein the configuration information at least comprises: control name, control type, grouping to which the control belongs, and modifiable control attribute content.
Illustratively, the configuration information of each control is obtained in response to the operation that the user inputs the predefined configuration information of each control on the visual interface provided by the editor, the configuration information includes, but is not limited to, a control name, a control type, a group to which the control belongs and modifiable control attribute content, and then the specific content json of the configuration information is stored in a control table of the database, so that the control is defined in this way.
Referring to fig. 3, an exemplary embodiment is shown, where a currently designed page is a design of a nursing ward-round record form, and the content display mode of the visual interface is also in an A4 paper mode, and similarly, a control list area is located in a left area of the visual interface, a control attribute configuration area is located in a right area of the visual interface, and a page display area is located in a middle area of the visual interface.
As shown in connection with fig. 3, wherein the control types include: container control type, layout control type, generic control type, specialized control type, and custom control type. Controls belonging to the container control type include at least: folding panel controls, form combination controls, and compound nested controls; the controls belonging to the layout control type at least comprise: line controls, custom form controls, and label controls; the controls belonging to the generic control type at least comprise: basic information control, accessory control, place control, period control and information record control; the controls belonging to the special control type at least comprise: an effect evaluation control; the controls belonging to the custom control type at least comprise: a selection box control, a text box control, a drop down box control, and a text control.
The row-column control belonging to the layout control type comprises a row-column control and a column-column control. The basic information controls belonging to the general control type comprise controls corresponding to dates, hospitalization numbers, names, sexes, ages, photos, bed numbers, diagnoses, departments (single selection), departments (multiple selection), departments personnel (single selection), departments personnel (multiple selection) and participators, and the information recording controls belonging to the general control type comprise controls corresponding to titles, roles, invited nursing groups and personnel, invited departments and personnel and recording personnel. The selection box controls belonging to the custom control type comprise single selection box controls and multi-selection box controls, the text box controls belonging to the custom control type comprise single-line text box controls and multi-line text box controls, the drop-down box controls belonging to the custom control type comprise drop-down single selection box controls and drop-down multi-selection box controls, and the text controls belonging to the custom control type also comprise rich text controls.
It should be noted that, the control types and the preset controls belonging to each control type may be customized by the user according to the actual needs and the service application, which is not limited herein. Based on the method, the user can customize the control and the page visual editor of the control type, so that richer controls can be flexibly designed for page design, and the user requirements can be responded quickly.
As a possible implementation manner, the step S103, in response to the operation of selecting at least one target control from the control list area by the user, renders and displays each target control and the control attribute of each target control, includes:
responding to the operation of dragging the target control from the control list area by a user, and determining the arrangement position of the target control in the page display area;
rendering and displaying the target control in the page display area, and displaying the control attribute of the target control in the control attribute configuration area.
Exemplary, as shown in the operation flow chart of fig. 4, in response to an operation of dragging one or more target controls from a control list area on the left side of the visual interface by a user, dragging the target controls from the control list area on the left side to a canvas of a page display area in the middle of the visual interface, selecting a certain target control in the canvas, setting general control attributes such as page layout style, association relation and the like, and specific control attributes such as format, value domain and the like according to user requirements in a control attribute configuration area on the right side of the visual interface, and setting the association relation.
In addition, in the process of dragging the target controls from the left control list area to the canvas of the page display area in the middle of the visual interface, the arrangement positions of the target controls in the page display area are determined so as to conduct page layout in the canvas. In the process of page layout, a user can dynamically view the target controls rendered and displayed in the page display area in real time and control attributes of all the target controls displayed in the control attribute configuration area.
Based on the method, the page design and development process is converted into intuitive control drag-and-drop, configuration and adjustment operation, so that the technical threshold can be reduced, and non-technicians can participate in the customization and creation of the page.
As a possible implementation manner, the step S104, in response to a configuration instruction of the user on the control attribute, configures the control attribute to generate a first template page, includes:
and responding to the configuration instruction, configuring the control attribute of each target control in a control attribute configuration area, and generating a first template page according to the configured control attribute, wherein the control attribute at least comprises: cell attributes, control name attributes, associated controls, control presentation styles, font attributes, display formats, and drop-down value fields.
The user selects the target control in the left control list area through operating a mouse, drags the target control to the canvas of the page display area on the right side of the control list area to perform page layout setting, previews the display style of the target control, and can select one target control in the canvas and drag the target control to replace the position of the target control or delete the selected target control.
In addition, selecting a target control in the canvas, and setting specific control attributes such as a control display format, a drop-down value range and the like in a control attribute configuration area on the right side of the canvas according to the control type of the selected target control. And, the name, title width, font size, color, whether to fill, etc. of the controls used in the design page may be set in the control attribute configuration area.
By way of example, as shown in fig. 5, the job control corresponds to the associated dictionary list and the value domain information of the associated data dictionary, and by means of the drop-down control, the dynamic value domain binding script can be set singly or multiply selected, that is, the control attribute configuration area on the right side of the canvas can be utilized, and the setting of the dynamic association relationship between the controls is performed by setting linkage control operation.
Based on this, the association relation setting is performed on the controls set under each control type, so as to form an association data dictionary, and also taking the design of the nursing ward-round record form as an example, continuing to refer to fig. 5, the association data dictionary associated with the job control mainly comprises two parts of a dictionary list and value domain information, wherein the dictionary list comprises the association control associated with the job control, and the data dictionary corresponding to the association control, and the optional items corresponding to the association control selected by the value domain information, for example, the job correspondence comprises: general nurses, quality control personnel, auxiliary main belt teaching, general nurse, nursing staff, department nurse, department auxiliary main principal, department principal, nursing department auxiliary principal, nursing department principal, auxiliary yard long, yard long and the like. That is, when the job control is selected for page design, selectable items corresponding to the associated control can be selected from the value range information according to the associated data contained in the associated data dictionary.
It should be noted that, the association relationship between the controls can be bound by the user according to the application requirement, and the association relationship can be selectively released after being bound.
For example, as shown in fig. 6, after the data element association setting page sets association data, if a hospitalization number is input in the associated data element in the control attribute configuration area on the right side of the visual interface, a plurality of associated data elements and parameter values corresponding to each associated data element are displayed below the position where the associated data element is located, and if the associated data element has a suffix name, the suffix name needs to be displayed in the edit box suffix attribute. The specific controls need to select the associated data elements, and whether the controls need to be associated with the controls or not and whether the data of the controls need to be used for statistics or other service systems can be determined.
For example, in addition to the nursing ward record form design, a special record form design can be performed, wherein related controls also need to be set by an associated script. As shown in fig. 7, in the hospital number associated script setting interface, the associated objects and the associated objects are displayed in the associated script setting interface, and when any one of the script lists on the left side of the associated script setting interface is selected, script information, such as a request address, a request parameter, return data, a script description, and the like, is correspondingly displayed on the right side of the associated script design interface.
Based on the above, the user can set the association relation between the page data elements through the drop-down control, single-selection or multi-selection dynamic value fields, and the user is also supported to input keywords for searching. Therefore, the page style setting, the page display element setting, the page element association relation setting, the page control value range, the default value, the elements of the page displaying prompt information and all data lines of the control can be dynamically carried out through the page visual editor capable of setting the page style in a self-defined mode and the self-defined control type, and the first template page shown in figure 8 can be generated after the basic configuration and the association configuration are carried out on the control attribute of each control used for page design.
In addition, the generated first template page is subjected to data storage, corresponding style, association operation and value domain are subjected to dynamic binding rendering in page rendering, and the process of data submission and interface interaction can be dynamically carried out with the background. Specifically, the editor provides visual configuration page fields and background, such as service related fields, corresponding field related data corresponding relation logic in a database, so that data submitted by a form can be conveniently stored in a corresponding data source, and can be logically integrated and realized through configuration such as setting display hiding and the like. While also providing some interactive functionality that enables the user to define behaviors and responses between page elements. For example, the user can specify the values of other controls when the control values change, and the linkage between fields, dynamic loading of data and the like can be realized through configuring and setting trigger conditions and operations.
As a possible implementation manner, after the step S104, the method further includes:
responding to a modification instruction of a user for a control to be updated in a first template page, and displaying a control attribute of the control to be updated;
and responding to an updating instruction of the control attribute of the control to be updated by a user, and updating the control attribute of the control to be updated to obtain a second template page after the first template page is updated.
Illustratively, the editor allows the user to customize the style of the page, such as font, color, background, borders, etc. And responding to a modification instruction of a user for the control to be updated in the first template page, displaying the control attribute of the control to be updated, and enabling the user to change the appearance of the first template page by selecting a predefined style setting and supporting the fixed-width form design and the adaptive design in the first template page. Likewise, the editor also allows the user to customize control types or components, such as single, multiple, text, rich text, drop-down, date, etc., and to incorporate special controls for time of admission, department, diagnosis, title, job, most satisfied nurse, least satisfied nurse, effect assessment, forensic group, etc. with care features.
Based on the control customization and style customization are supported by the editor, after the first template page is generated, the control attribute of the control to be updated can be modified, and the control can be newly generated to obtain a second template page after the first template page is updated, so that the page development efficiency is improved.
Therefore, according to the visual page information processing method, through intuitive drag-and-drop, configuration and adjustment operations, a developer can rapidly design and layout pages without manually writing a large number of codes, so that complicated development work is reduced, development period is accelerated, and the requirements of hospitals can be met more flexibly. In addition, the editor provides flexible design options, allows a user to customize page styles and control types, allows the user to select predefined styles and controls, and allows the user to create custom styles and controls to meet specific design requirements, thereby enabling the page design to better meet the user's requirements and user experience.
Based on the same inventive concept, the embodiment of the present application further provides a visual page information processing device corresponding to the visual page information processing method, and since the principle of solving the problem by the device in the embodiment of the present application is similar to that of the visual page information processing method in the embodiment of the present application, the implementation of the device may refer to the implementation of the method, and the repetition is omitted.
Referring to fig. 9, a schematic structural diagram of a visual page information processing apparatus according to an embodiment of the present application is provided, where the visual page information processing apparatus 900 includes: an acquisition module 901, an encapsulation module 902, a rendering display module 903, a generation module 904, wherein,
the acquiring module 901 is configured to acquire configuration information of each control predefined by a user;
the encapsulation module 902 is configured to encapsulate the controls according to the configuration information of each control, and embed the encapsulated controls into an editor, where the editor includes a control list area, a control attribute configuration area, and a page display area;
the rendering display module 903 is configured to respond to an operation of selecting at least one target control from the control list area by a user, and render and display each target control and a control attribute of each target control;
the generating module 904 is configured to respond to a configuration instruction of a user on the control attribute, configure the control attribute, and generate a first template page.
Therefore, according to the visual page information processing device of the embodiment of the application, configuration information of each control predefined by a user is obtained, the control is defined and encapsulated according to the configuration information of each control, the encapsulated control is built in an editor, the editor comprises a control list area, a control attribute configuration area and a page display area, the editor provides a visual interface and tool capable of customizing a page style and a custom control, the operation of selecting at least one target control from the control list area by the user is responded, the control attributes of each target control and each target control are rendered and displayed, the configuration instruction of the user on the control attributes is responded, the control attributes are configured, and a first template page is generated. Based on the method, according to the method, the device and the system, the visual editor of the page with the custom set page style and the custom control type is essentially to provide a visual interface and a visual tool, so that a user can customize the appearance and the function of the design page without deep coding of technicians, thereby reducing development work of the technicians, saving development time and further reducing development cost. And the page design and development process is converted into intuitive drag-and-drop, configuration and adjustment operations, so that non-technicians not familiar with technical expertise can participate in the customization and creation of the page, thereby reducing the technical threshold, and the user can meet the specific design requirements of the user through self-defined configuration, thereby improving the perception experience of the user.
In a possible implementation manner, the generating module 904 is further configured to:
responding to a modification instruction of a user for a control to be updated in a first template page, and displaying a control attribute of the control to be updated;
and responding to an updating instruction of the control attribute of the control to be updated by a user, and updating the control attribute of the control to be updated to obtain a second template page after the first template page is updated.
In a possible implementation manner, the acquiring module 901 is specifically configured to:
responding to the operation of inputting configuration information by a user on a visual interface, and acquiring the configuration information of each control, wherein the configuration information at least comprises: control name, control type, grouping to which the control belongs, and modifiable control attribute content.
In one possible implementation, the rendering display module 903 is specifically configured to:
responding to the operation of dragging the target control from the control list area by a user, and determining the arrangement position of the target control in the page display area;
rendering and displaying the target control in the page display area, and displaying the control attribute of the target control in the control attribute configuration area.
In a possible implementation manner, the generating module 904 is specifically configured to:
responding to the configuration instruction, configuring control attributes of each target control in a control attribute configuration area, and generating a first template page according to the configured control attributes;
Wherein, the control attribute includes at least: cell attributes, control name attributes, associated controls, control presentation styles, font attributes, display formats, and drop-down value fields.
In a possible implementation manner, the control types include: container control type, layout control type, generic control type, specialized control type, and custom control type;
controls belonging to the container control type include at least: folding panel controls, form combination controls, and compound nested controls;
the controls belonging to the layout control type at least comprise: line controls, custom form controls, and label controls;
the controls belonging to the generic control type at least comprise: basic information control, accessory control, place control, period control and information record control;
the controls belonging to the special control type at least comprise: an effect evaluation control;
the controls belonging to the custom control type at least comprise: a selection box control, a text box control, a drop down box control, and a text control.
In one possible implementation, the control list area is used to display controls;
the control attribute configuration area is used for configuring control attributes of target controls dragged from the control list area to the page display area by a user;
The page display area is used for rendering and displaying target controls dragged by the user from the control list area.
The process flow of each module in the apparatus and the interaction flow between the modules may be described with reference to the related descriptions in the above method embodiments, which are not described in detail herein.
The embodiment of the application further provides an electronic device 1000, as shown in fig. 10, which is a schematic structural diagram of the electronic device 1000 provided in the embodiment of the application, including: the processor 1001, memory 1002, and optionally, may also include a bus 1003. The memory 1002 stores machine-readable instructions executable by the processor 1001, which when executed by the processor 1001 performs the page visual information processing method as claimed in any one of the preceding claims, when the electronic device 1000 is running, the processor 1001 communicates with the memory 1002 via the bus 1003.
Embodiments of the present application also provide a computer readable storage medium having a computer program stored thereon, which when executed by a processor performs the page visualization information processing method according to any one of the above.
It will be clearly understood by those skilled in the art that, for convenience and brevity of description, specific working procedures of the above-described system and apparatus may refer to corresponding procedures in the method embodiments, which are not described in detail in this application. In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods may be implemented in other manners. The above-described apparatus embodiments are merely illustrative, and the division of the modules is merely a logical function division, and there may be additional divisions when actually implemented, and for example, multiple modules or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be through some communication interface, indirect coupling or communication connection of devices or modules, electrical, mechanical, or other form.
In addition, each functional unit in each embodiment of the present application may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit. The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, comprising several instructions for causing a computer device (which may be a personal computer, a server, a network device, etc.) to perform all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
The foregoing is merely a specific embodiment of the present application, but the protection scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the technical scope of the present application, and the changes or substitutions are covered in the protection scope of the present application.
Claims (10)
1. A visual page information processing method, characterized by comprising:
acquiring configuration information of each control predefined by a user;
performing control encapsulation according to configuration information of each control, and embedding the encapsulated control into an editor, wherein the editor comprises a control list area, a control attribute configuration area and a page display area;
responding to the operation of selecting at least one target control from the control list area by the user, and rendering and displaying each target control and control attributes of each target control;
and responding to the configuration instruction of the user on the control attribute, configuring the control attribute and generating a first template page.
2. The method of claim 1, wherein the configuring the control attribute in response to the user's configuration instruction for the control attribute, after generating the first template page, further comprises:
responding to a modification instruction of the user for a control to be updated in the first template page, and displaying a control attribute of the control to be updated;
and responding to an updating instruction of the user on the control attribute of the control to be updated, and updating the control attribute of the control to be updated to obtain a second template page after the first template page is updated.
3. The method of claim 1, wherein the obtaining configuration information for each control predefined by a user comprises:
responding to the operation of inputting configuration information by the user on a visual interface, and acquiring the configuration information of each control, wherein the configuration information at least comprises: control name, control type, grouping to which the control belongs, and modifiable control attribute content.
4. The method of claim 1, wherein rendering the display of each of the target controls and the control attributes of each of the target controls in response to the user selecting at least one target control from the control list area comprises:
responding to the operation of dragging the target control from the control list area by the user, and determining the arrangement position of the target control in the page display area;
and rendering and displaying the target control in the page display area, and displaying the control attribute of the target control in the control attribute configuration area.
5. The method of claim 1, wherein configuring the control attribute in response to the user's configuration instruction for the control attribute generates a first template page, comprising:
Responding to the configuration instruction, configuring control attributes of each target control in the control attribute configuration area, and generating the first template page according to the configured control attributes;
wherein, the control attribute at least comprises: cell attributes, control name attributes, associated controls, control presentation styles, font attributes, display formats, and drop-down value fields.
6. The method of claim 3, wherein the control types include: container control type, layout control type, generic control type, specialized control type, and custom control type;
controls belonging to the container control type at least comprise: folding panel controls, form combination controls, and compound nested controls;
the controls belonging to the layout control type at least comprise: line controls, custom form controls, and label controls;
the controls belonging to the generic control type at least comprise: basic information control, accessory control, place control, period control and information record control;
the controls belonging to the special control type at least comprise: an effect evaluation control;
the controls belonging to the custom control type at least comprise: a selection box control, a text box control, a drop down box control, and a text control.
7. The method of claim 1, wherein the control list area is for displaying controls;
the control attribute configuration area is used for configuring control attributes of target controls dragged from the control list area to the page display area by a user;
and the page display area is used for rendering and displaying the target control dragged by the user from the control list area.
8. A visualized page information processing apparatus, characterized by comprising:
the acquisition module is used for acquiring configuration information of each control predefined by a user;
the packaging module is used for packaging the controls according to the configuration information of each control, and embedding the packaged controls into an editor, wherein the editor comprises a control list area, a control attribute configuration area and a page display area;
the rendering display module is used for responding to the operation of selecting at least one target control from the control list area by the user, and rendering and displaying each target control and the control attribute of each target control;
the generation module is used for responding to the configuration instruction of the user on the control attribute, configuring the control attribute and generating a first template page.
9. An electronic device, comprising: a processor and a memory storing machine readable instructions executable by the processor to perform the steps of the method of visual page information processing of any one of claims 1 to 7 when the electronic device is running.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium has stored thereon a computer program which, when executed by a processor, performs the steps of the visualized page information processing method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311474325.9A CN117453217A (en) | 2023-11-07 | 2023-11-07 | Visual page information processing method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311474325.9A CN117453217A (en) | 2023-11-07 | 2023-11-07 | Visual page information processing method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117453217A true CN117453217A (en) | 2024-01-26 |
Family
ID=89594547
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311474325.9A Pending CN117453217A (en) | 2023-11-07 | 2023-11-07 | Visual page information processing method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117453217A (en) |
-
2023
- 2023-11-07 CN CN202311474325.9A patent/CN117453217A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10984177B2 (en) | System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout | |
| US9052812B1 (en) | System for exportable graphical designs with interactive linked comments between design and playback environments | |
| US9569406B2 (en) | Electronic content change tracking | |
| Matejka et al. | Patina: Dynamic heatmaps for visualizing application usage | |
| US20060225094A1 (en) | Enabling customization and personalization of views in content aggregation frameworks | |
| US20090199113A1 (en) | Graphical user interfaces | |
| US8392828B2 (en) | Open theme builder and API | |
| JP6018045B2 (en) | Temporary formatting and graphing of selected data | |
| US20170322782A1 (en) | Enhanced software application ecosystem | |
| EP2495667A1 (en) | System, method, and program for editing of electronic document | |
| CN111259644B (en) | Rich text processing method, editor, equipment and storage medium | |
| US11227105B1 (en) | Method and apparatus for structured documents | |
| JP4393444B2 (en) | Information processing method and apparatus | |
| US20060225091A1 (en) | Customizing and personalizing views in content aggregation frameworks | |
| CN111881662A (en) | Form generation method, device, processing equipment and storage medium | |
| US20160314502A1 (en) | System and method for streamlining the design and development process of multiple advertising units | |
| Desolda et al. | End-user composition of interactive applications through actionable UI components | |
| CN117453217A (en) | Visual page information processing method and device, electronic equipment and storage medium | |
| CA2647195A1 (en) | Automated integration of partner products | |
| JP2019020805A (en) | Reaction type website builder system and method thereof | |
| CN106814938A (en) | Threedimensional model file imports control method and client | |
| CN114424188A (en) | Personalized social media service providing system and method based on books | |
| Kim et al. | Dupo: A Mixed-Initiative Authoring Tool for Responsive Visualization | |
| US20230077829A1 (en) | Systems for Generating Interactive Reports | |
| KR102585998B1 (en) | Method for displaying page and a hospital practice management system apparatus therefor |
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 |