CN113343656A - Secondary editing method of chart configuration element data model - Google Patents
Secondary editing method of chart configuration element data model Download PDFInfo
- Publication number
- CN113343656A CN113343656A CN202011229239.8A CN202011229239A CN113343656A CN 113343656 A CN113343656 A CN 113343656A CN 202011229239 A CN202011229239 A CN 202011229239A CN 113343656 A CN113343656 A CN 113343656A
- Authority
- CN
- China
- Prior art keywords
- data model
- data
- element data
- configuration
- 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
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/34—Graphical or visual programming
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to a secondary editing method of a chart configuration element data model, which comprises the following steps: after a user logs in a platform, a project is created by filling simple basic information, then an integral project menu structure is configured according to personalized requirements, and when the project menu is completed, web pages can be enriched as required by dragging each level of menu in the menu structure. The invention adopts the direct secondary editing of single element, can realize the style editing and data editing of the static element, and provides more accurate operation element in the form of secondary coding. The invention allows the element styles and data to be adjusted in time according to the requirements of users in the configuration process, and has the advantages of higher efficiency, accuracy, flexibility and usability.
Description
Technical Field
The invention relates to a secondary editing method of a chart configuration element data model, and belongs to the field of industrial manufacturing production.
Background
With the rapid development of computer technology and the large-area popularization of computer networks, enterprise informatization construction is deepened gradually, more and more business application systems are built inside enterprises and inside and outside the enterprises, how to integrate the existing IT resources of the enterprises is to enable computer island type applications in the enterprises to develop towards collective cooperation, so that the maximization of resource benefits is brought into play, the enterprise cost is reduced, and the enterprise informatization construction becomes an important problem which is gradually concerned by the enterprises. The user hopes that all systems in the enterprise are integrated on one platform, and the operation is uniform, so that the training time is saved.
Traditional codes are long in development and test period, orders cannot be submitted on time, and a developed system needs a period of time to break in to be stable. This development model from scratch is very demanding for developers, and requires personnel skilled in programming languages, databases, and various development techniques. Since the requirement for developers is high and the development time is long, the development cost is relatively high. Because the whole system code is stripped by hands, the error rate is very high, the later maintenance is quite troublesome, and the cost is high.
The business requirements are varied, and the continuous development of enterprises requires that software can be easily updated so as to meet the continuously changing needs of the enterprises. Once the traditional software is developed, the traditional software cannot be changed too much, the software is redeveloped or purchased with financial and financial damages, and the period is long. Therefore, users want the software system to provide a simple, feasible and fast secondary development platform for themselves to develop new applications or modify existing applications to meet the ever-evolving and changing business needs.
The rapid development platform is configured in a development mode, more than ten sets of templates can be developed in one day, the test is simple, the performance is stable, and running-in is not needed. All functions in the platform are developed well, and the functions can be achieved only by understanding some database knowledge, so that the requirements on developers are low, the platform is very suitable for small programmers or enterprises without programmers, and the platform also has very high learning value. The codes of the whole platform are continuously fed back and adjusted by developers and users, the safety factor is guaranteed, and the maintenance is very convenient.
Disclosure of Invention
The invention mainly solves the technical problem that most configuration elements provided by a code-free platform are static elements and modification of related operations is limited. The secondary editing method of the chart configuration element data model is provided, namely in the system configuration process, according to different requirements of users under different scenes, the configuration style and the change of element data can be customized in a personalized way, and the elements can be operated most conveniently and accurately in an optimal way to realize personalized customized development
The technical scheme adopted by the invention for realizing the purpose is as follows: a secondary editing method of a chart configuration element data model comprises the following steps:
inserting an element data model on a configuration page;
configuring the style and data of the element data model in at least one of the following ways:
configuring attribute data by acquiring an element data model;
and acquiring the source code configuration of the element data model in the form of a modal box.
The element data model includes: at least one of an icon class element, a table class element, a map class element, a text class element, a tree menu element, a picture class element and an iframe element.
The method for configuring the style of the element data model by acquiring the attribute data of the element data model comprises the following steps:
when the element data model receives a view display command, acquiring an ID of the element data model from an element library, acquiring Json data of the model through ID matching, rendering the Json data to form an attribute window, and displaying the attribute window on a configuration page;
acquiring the attribute value of the selected attribute on the attribute window, and inquiring the attribute in the configuration file; when the attribute is inquired, carrying out assignment operation on the attribute, and replacing the original attribute value with the obtained attribute value;
and updating the style of the element data model in real time through an onchange mode.
The method for configuring the data of the element data model by acquiring the attribute data of the element data model comprises the following steps:
the data source of the element data model comprises a database and a self-defining data source:
when the database is a data source, selecting a data table in the database, and acquiring all fields from the data table by an editing page for user selection; when a user selects a field to drag into a configuration item corresponding to the element data model, the editing page acquires all data in the corresponding field from the data table, fills the data in the configuration item of the element data model, and updates the data in real time;
when the data source is customized, inputting configuration item data corresponding to the element data model in the configuration item; and analyzing the data by the editing page to obtain a format required by the element data model, storing the format into the configuration item of the element data model, and displaying the format in the element data model.
Obtaining a source code configuration of an element data model in the form of a modal box, comprising the steps of:
when the editing page receives a trigger command, acquiring a source code of the element data model and displaying the source code in a modal frame;
in the modal frame, modifying and saving according to configuration requirements;
and updating the element data model through a setvalue method according to the saved source code.
Before the configuration of the styles and data, items are pre-established, including:
acquiring a project name and inserting the project name into a project list;
establishing a project route in a visual mode according to the project list;
filling a corresponding page in the project route by using the element;
and configuring styles and data of the elements of the page.
The item list comprises item names, item attributes and a multi-level submenu structure, and element data are arranged in each submenu.
The project routing established in a visual mode comprises the following steps:
establishing a plurality of nodes to form a node tree;
generating a project main body node according to the project name in the project list;
establishing a login node for checking input information of a user, and jumping to a project main body node when the check is passed;
and storing the multi-level submenu structure information input by the user into corresponding project main body nodes according to a tree structure, and generating submenu nodes.
The filling of the corresponding page in the item route by using the element comprises the following steps:
after the project route is established, transmitting a multi-level submenu structure in the project main body node into a visual editor for configuring the project; preset elements are inserted in the visual editor.
The elements are chart type elements and combinations thereof, and the chart type elements are provided with configuration items comprising styles and data.
The configuring of styles and data for the elements of the page comprises the following steps:
configuring a style of the selected element through the configurable item; the data source of the element comprises a database and a self-defining data.
And after the configuration of styles and data of the elements of the page is finished, storing all element configuration item data in the editor into corresponding submenu built-in element data fields of the item list.
The invention has the following beneficial effects and advantages:
1. the invention adopts richer editing forms to operate the configuration elements, and can quickly change the elements in a click or local code editing mode
2. The invention can make element adjustment in real time according to different scenes in the configuration process, and has higher flexibility, more convenient operation and higher accuracy
3. The invention avoids the process that the corresponding element logic is found in the IDE in the original development mode and then is modified, and then the code is saved, analyzed and loaded. The method can directly load the compiler in the Web page by one key, directly call the code of the element to be modified, and finish the operation in a more accurate, more direct, more convenient and more efficient way
Drawings
FIG. 1 is a schematic diagram of the system of the present invention.
FIG. 2 is a flow chart of the method of the present invention.
Detailed Description
In order to make the objects, technical solutions, advantages, and the like of the present invention clearer, practical examples are given and further description is given with reference to the drawings.
A secondary editing method of a chart configuration element data model comprises the following steps:
firstly, the whole process of entering secondary editing configuration elements needs to be combed, the method mainly comprises the steps that a user logs in a platform through an authorized account ID and a password to fill in basic information of a project to complete project creation, the hierarchical relationship of the project needs to be set after the basic information of the project is completed, page element configuration needs to be carried out on each sub-node under each hierarchy after the hierarchical relationship is built, page elements are configured as required, the user can carry out secondary editing styles, data and the like on provided static elements as required, operations such as increasing, deleting, modifying, checking and the like on the elements as required in real time, finally sub-node page building is completed through the building of a plurality of elements, and the whole building process needs to pass through the six steps;
the user logs in the platform through the authorized account ID, namely the user needs to firstly obtain the authority of using the platform, the platform authorizes the account and then issues the account to the user, and the user can log in the platform through the issued account and perform a series of operations such as related creation projects, modification and configuration projects.
Filling in basic project information to complete project creation, namely, after a user logs in a platform, a user needs to create own exclusive project, the basic information of the project specifically comprises a project name, a project description, a project classification and a LOGO of the project, the project name is marked in a required item form, the user is required to set an exclusive name for the project, basic identification is made for subsequent richer projects, the project description can remark some related information for the project, other users can know the information of the functions of the project and the like more quickly and intuitively through description, the project classification can classify the project created by the user, the subsequently created project is more, management is convenient, new classifications can be created according to own needs, and the LOGO can upload related pictures with the significance of embodying the project characteristics according to own needs, the beauty and identification of the project are enriched. The relevant data is sent to the back-end by the AJAX technique.
The hierarchical relation of the project, namely the menu structure of the project, here we create the project menu through the visual structure chart, the structure chart can list the overall structure relation of the project, it is more clear and more convenient, the operation can clearly divide the system into several modules, each module is divided into several sub-nodes, generally speaking, the overall structure relation reflecting a project is usually shown in the way of menu navigation, this is also the reason that all projects have a navigation menu.
The page element configuration is carried out on each child node, namely a pull-down submenu of a system menu, each submenu corresponds to a page, one page is composed of a plurality of elements, the elements forming the page are usually realized by coding in blocks, but in a code-free platform, the static elements forming the page are provided well and are rapidly configured in a click and drag mode according to needs. The codeless platform illustrated here is to click on the good elements provided in the left element library and then the middle view area produces the same configuration elements, and the user can configure his own page as desired.
The style, data and the like of the static element are edited for the second time, that is, a user carries out the secondary edition style and data configuration on all the configured static elements according to the requirement, here, for example, a chart is used, a left component area line graph is clicked, and a good static line graph component is provided by a display platform in a middle view area. The invention provides a configuration area for element styles and data on the right side of a view area, a user can click rich configuration options provided on the right side to operate rich style operations such as color of each line of a broken line graph, whether a title and a title name are needed, font color of the title, alignment mode of the title, Y-axis addition unit, whether a legend is needed, font color of the legend, placement position of the legend, whether area coverage is added to the broken line, whether a right-angle broken line is set, whether an axis is displayed, X-axis and font color, Y-axis and font color, setting of a margin around and the like, and after secondary edition of the style, a right menu is switched to a data item, so that needed data can be selected from a database to be displayed according to requirements, and data corresponding to X, Y can also be manually input in a self-defined mode. Besides the configuration mode, the invention adds a mode of implanting a code editor in the view and operates the styles and the data in a coding mode, and the mode can more directly and more accurately carry out secondary editing on the styles and the data.
And finally, completing the sub-node page construction through the construction of a plurality of elements, namely, after a user performs related addition, deletion, modification and check operations on the plurality of elements according to requirements, finally generating a complete page after the remained configuration items are clicked and stored, and repeating the operations to prepare a set of subsystems meeting the personalized requirements according to the requirements.
Referring to fig. 1, this is an overall architecture diagram of the software system.
After a user logs in a platform, a new project can be selected or an existing project can be selected in a project list for configuration, the new project is selected, the user can enter the project to perform page configuration after filling in basic information of the project and configuring a menu of the project, and the platform is a chart library, a general library, an expansion library, a configuration library, a template library and the like which are five types of component libraries prepared for the user.
Chart libraries, i.e., conventional charts, histograms, line graphs, pie charts, scatter plots, radar plots, and the like.
General libraries, i.e., text, tables, pictures, time, maps, iframes, numeric scrolling, cards, etc.
And the expansion library is used for combining elements by a user according to the requirement of the user, then generating a new combined element and supporting custom expansion.
The configuration library, namely the industrial flow chart, and a set of production flow chart can be simulated by a user.
The template library, i.e., the platform, provides several styles of page templates that can be used by the user.
The invention can solve the limitation of providing elements in a platform and improve the flexible row of the elements by clicking the elements to be selected, and supports the operation of changing the style and the data of the elements in real time in the configuration process by a user, wherein, the user clicks the elements of the column diagram in the diagram library to generate a corresponding column diagram in the middle view display area of the page, and simultaneously, the right side of the page displays the style and the data configuration area of the corresponding diagram, and the style and the data of the column diagram can be edited again, and the specific operation comprises the following steps:
1. a style configuration area:
(1) we can choose whether to set a topic for this element and to customize the topic for the user
(2) Modifying the background color of the element, the background supporting the user to upload the picture as background
(3) The color of the column of the histogram can be customized
(4) The title, the color of the title and the alignment mode of the title can be selectively set for the histogram
(5) Optionally adding custom units for Y-axis data
(6) Selecting whether to retain legend components, legend font colors, alignment of legends, and the like
(7) Selecting whether to retain default tick marks and the color of the tick marks
(8) X, Y font and axis color setting of axes
(9) Arrangement of the chart with white space around
2. A data configuration area:
database configuration data:
(1) selecting data source in data table, obtaining corresponding return field by data source
(2) Configuring X, Y Axis data in the form of a drag through returned fields
(II) self-defining configuration data:
(1) manually entered X-axis data may optionally be named for the Y-axis
(2) Manually inputting Y-axis data may add multiple Y-axes and name the Y-axis
The invention adds the secondary editing data and style in the code mode, and the concrete operation is as follows
Clicking the title area of the histogram module, sliding a mouse over the title frame to generate an editing icon and a deleting icon, clicking the editing icon to acquire the corresponding code of the element and the standard format of the code in the form of a pop-up box, wherein the above changes can support the change of the style and the data in the form of the code.
FIG. 2 shows a flow chart of the method of the present invention.
In conclusion, the method provided by the invention optimizes the editable limitation of the configuration elements in the codeless platform, improves the efficiency of generating the page by the platform, and further improves the user experience. The invention has simple operation and no special requirement on the technology, and is suitable for the public. The invention effectively improves the development efficiency of the code-free platform, and has the advantages of more accuracy, more directness, more convenience, higher flexibility, more friendly usability and suitability for popularization and use.
And when the project is built, entering an element configuration page, and selecting a corresponding element data model according to requirements for secondary editing. The examples are as follows:
when a histogram is selected, when a view display command is received by a columnar graphic element data model, an ID of the columnar graphic element data model is obtained from an element library, Json data of the columnar graphic model is obtained through ID matching, and based on the JSON, an organization structure of the JSON can be drawn into a chart by using a canvas technology and displayed on a configuration page.
When the columns are displayed in the configuration page, the corresponding style attribute configuration items (title name, title position, title color, diagram of the chart, diagram orientation, diagram position, diagram color, diagram font color, scale line, axis color, X-axis color, Y-axis color, and surrounding margin, etc.) are displayed on the right side of the configuration page through the Json data format matching the histogram.
When the corresponding title color is selected through the color block selector, the color selector can store the color value of the current color, and the stored color value is replaced by the original color value through a setOption method, so that a new histogram element data module is re-rendered.
According to the method, secondary editing of all corresponding style attribute configuration items can be realized.
When switching data configuration, there are two data configuration modes of all element data models:
(1) data source configuration
And (2) data source configuration, namely when a histogram element data model is configured in a data source mode, requesting a database in a packaged axios mode, displaying all returned data in a data table, selecting a corresponding data table, sending an axios request again, displaying all returned fields in textarea of the fields, dragging and dropping the corresponding fields in corresponding X, Y-axis input boxes respectively in a dragging mode, triggering an exchange method in the input boxes, storing X, Y-axis data in option data of the histogram in real time, and drawing a new histogram element data model again in a setOption method.
(2) Custom configuration
And (3) self-defining configuration, namely, manually inputting a standard data format into a corresponding X, Y-axis input box by a user, triggering an exchange method, storing corresponding X, Y-axis data into option data of a histogram in real time, and drawing a new columnar pixel element data model by a setOption method.
When a detailed configuration button is triggered on the right side of a configuration page, a modal box popping instruction is sent out at the same time, after the configuration page receives the instruction, a codemror in the modal box simultaneously obtains an option data source code of the current columnar graphic primitive model data through a setValue method and displays the option data source code into an editor in the modal box; when a user modifies and stores a source code in codegiro in a code editing mode, codegiro internally edits the stored source code, converts the source code into a new option data format again, replaces the original option in a config configuration page, loads new option data into the page again through a setOption method, and renders a new columnar primitive data model.
Claims (5)
1. A secondary editing method of a chart configuration element data model is characterized by comprising the following steps:
inserting an element data model on a configuration page;
configuring the style and data of the element data model in at least one of the following ways:
configuring attribute data by acquiring an element data model;
and acquiring the source code configuration of the element data model in the form of a modal box.
2. A method of quadratic editing of a chart configuration element data model in accordance with claim 1, wherein said element data model comprises: at least one of an icon class element, a table class element, a map class element, a text class element, a tree menu element, a picture class element and an iframe element.
3. A secondary editing method for a chart arrangement element data model according to claim 1, wherein the style of the element data model is arranged by acquiring attribute data of the element data model, comprising the steps of:
when the element data model receives a view display command, acquiring an ID of the element data model from an element library, acquiring Json data of the model through ID matching, rendering the Json data to form an attribute window, and displaying the attribute window on a configuration page;
acquiring the attribute value of the selected attribute on the attribute window, and inquiring the attribute in the configuration file; when the attribute is inquired, carrying out assignment operation on the attribute, and replacing the original attribute value with the obtained attribute value;
and updating the style of the element data model in real time through an onchange mode.
4. A secondary editing method for a chart arrangement element data model according to claim 1, characterized in that the data of the element data model is arranged by obtaining the attribute data of the element data model, comprising the steps of:
the data source of the element data model comprises a database and a self-defining data source:
when the database is a data source, selecting a data table in the database, and acquiring all fields from the data table by an editing page for user selection; when a user selects a field to drag into a configuration item corresponding to the element data model, the editing page acquires all data in the corresponding field from the data table, fills the data in the configuration item of the element data model, and updates the data in real time;
when the data source is customized, inputting configuration item data corresponding to the element data model in the configuration item; and analyzing the data by the editing page to obtain a format required by the element data model, storing the format into the configuration item of the element data model, and displaying the format in the element data model.
5. A method of quadratic editing of a schema configuration element data model according to claim 1, wherein obtaining the source code configuration of the element data model in the form of a modal box comprises the steps of:
when the editing page receives a trigger command, acquiring a source code of the element data model and displaying the source code in a modal frame;
in the modal frame, modifying and saving according to configuration requirements;
and updating the element data model through a setvalue method according to the saved source code.
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2020101346680 | 2020-03-02 | ||
| CN202010134668 | 2020-03-02 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113343656A true CN113343656A (en) | 2021-09-03 |
Family
ID=77467558
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011229239.8A Pending CN113343656A (en) | 2020-03-02 | 2020-11-06 | Secondary editing method of chart configuration element data model |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113343656A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116225414A (en) * | 2023-03-09 | 2023-06-06 | 广州市华势信息科技有限公司 | Software visual rapid development system based on zero code |
-
2020
- 2020-11-06 CN CN202011229239.8A patent/CN113343656A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116225414A (en) * | 2023-03-09 | 2023-06-06 | 广州市华势信息科技有限公司 | Software visual rapid development system based on zero code |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10067635B2 (en) | Three dimensional conditional formatting | |
| US7594181B2 (en) | Prototyping graphical user interfaces | |
| CN109062567B (en) | B/S structure-based information management system rapid development platform | |
| US8468492B1 (en) | System and method for creation and modification of software applications | |
| US7756829B2 (en) | Method and apparatus for mobile data collection and management | |
| CN100562846C (en) | Text by hierarchical structure tabulation editor arbitrary graphic | |
| CA2505580C (en) | Modeling system for graphic user interface | |
| US7802230B1 (en) | Heterogeneous software integration systems and methods | |
| CN107807913A (en) | A kind of form design system and method based on web | |
| CN107844297A (en) | A kind of data visualization realizes system and method | |
| US20120210296A1 (en) | Automatically creating business applications from description of business processes | |
| CN101944027A (en) | User interface generation method | |
| CN116225429A (en) | Pulling type component frame-based ipage webpage type low-code development platform | |
| CN107391134B (en) | Method and device for automatically generating and dynamically transforming universal mobile application interactive interface | |
| KR101572509B1 (en) | the operating method of user interface framework for web-based application construction | |
| US7899846B2 (en) | Declarative model editor generation | |
| CN111708516B (en) | Online web application customization development system | |
| CN105930344B (en) | A kind of database application system quick development platform based on product development process | |
| CN114138256A (en) | Web-side visualization development method, system and storage medium | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN112651711A (en) | System for building collaborative design management platform based on XDB (X data base) file under BS (browser/server) architecture | |
| US20190188297A1 (en) | Automatic core data service view generator | |
| CN111367514B (en) | Page card development method and device, computing device and storage medium | |
| CN114327458A (en) | Method and system for quickly building enterprise informatization system | |
| CN113343656A (en) | Secondary editing method of chart configuration element data model |
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 |