CN115016787A

Movatterモバイル変換

Info

Publication number: CN115016787A
Application number: CN202210330315.7A
Authority: CN
Inventors: 杨訸; 林龙; 王岳; 史存存; 李琮琮; 朱红霞
Original assignee: State Grid Smart Grid Research Institute of SGCC; Marketing Service Center of State Grid Shandong Electric Power Co Ltd; State Grid Corp of China SGCC
Current assignee: State Grid Smart Grid Research Institute of SGCC; Marketing Service Center of State Grid Shandong Electric Power Co Ltd; State Grid Corp of China SGCC
Priority date: 2022-03-28
Filing date: 2022-03-28
Publication date: 2022-09-06

Abstract

The invention provides an electric power UI automation construction system, a page generation method, equipment and a medium, wherein the electric power UI automation construction system comprises the following steps: defining information required by a minimum information set, a UI resolver and a UI builder; firstly, complementing information required by a minimum information set according to definition, carrying out reasoning mapping on the information by a UI (user interface) analyzer based on the minimum information set to obtain a full information set, and finally generating a UI file by a UI builder according to the full information; the minimum set of information includes: the layout, style and interaction function of the page; the UI files are css, js and html files. By utilizing the scheme provided by the invention, most UI interfaces can be automatically generated, and the development efficiency is improved; meanwhile, because the information used by the front end and the back end is only stored in the minimum information set, the quality of the generated UI can be ensured as long as the quality of the minimum information set is ensured; the scheme provided by the invention can also reduce the learning cost of UI developers and shorten the learning period of development.

Description

Translated fromChinese

一种电力UI自动化构建系统、页面生成方法、设备及介质A power UI automation construction system, page generation method, device and medium

技术领域technical field

本发明涉及UI开发领域，具体涉及一种电力UI自动化构建系统、页面生成方法、设备及介质。The invention relates to the field of UI development, in particular to a power UI automation construction system, a page generation method, equipment and a medium.

背景技术Background technique

作为系统的重要组成部分，UI是所有系统都不可或缺的一部分，UI直接与用户交互，UI的好坏直接影响这用户对系统的使用感受和评价，在B/S架构中，UI指的是用户看到的web界面，由于UI是在客户机上展示，而服务端在服务器上运行，并且UI与服务端使用不同的语言，往往UI与服务端相互分离，没有考虑到UI与服务端代码的逻辑互通性，实际上很多服务端的信息可以用于UI的开发，同时UI中存在这着很多重复的结构与行为，每次都需要重新编码。因此在在电力领域中UI的开发存在下述问题：系统前后端接口信息是一致的，但是却分别开发，多处定义，增加了工作量，导致可能存在信息的不一致问题；开发人员往往采用后端驱动的方式进行开发，认为前端是后端的附庸，这与实际不符，事实上流程是前端驱动的；开发人员往往没有提取出界面常见的交互模式来减少工作量；前后端信息的定义分散，没有集中存储，不利于前后端定义信息的核对与统一分析。As an important part of the system, UI is an indispensable part of all systems. UI directly interacts with users. The quality of UI directly affects the user's experience and evaluation of the system. In the B/S architecture, UI refers to It is the web interface that the user sees. Since the UI is displayed on the client and the server runs on the server, and the UI and the server use different languages, the UI and the server are often separated from each other, without considering the UI and server code. In fact, a lot of server-side information can be used for UI development. At the same time, there are many repetitive structures and behaviors in the UI, which need to be re-coded every time. Therefore, the development of UI in the power field has the following problems: the front-end and back-end interface information of the system is consistent, but they are developed separately and defined in multiple places, which increases the workload and may cause information inconsistency. The development is carried out in a terminal-driven way, and it is considered that the front-end is a vassal of the back-end, which is inconsistent with reality. In fact, the process is front-end driven; developers often do not extract the common interaction modes of the interface to reduce the workload; the definition of front-end and back-end information is scattered, There is no centralized storage, which is not conducive to the verification and unified analysis of front-end and back-end definition information.

发明内容SUMMARY OF THE INVENTION

为了解决现有技术中所存在的问题，本发明提供一种电力UI自动化构建系统，包括：UI解析器和UI构建器；In order to solve the problems existing in the prior art, the present invention provides a power UI automation construction system, including: a UI parser and a UI builder;

所述UI解析器用于：基于补全的最小信息集，对UI页面中的各组件类对应的预定义组件类进行处理，获得所述UI页面所需的全量信息；The UI parser is used to: process the predefined component classes corresponding to each component class in the UI page based on the completed minimum information set, and obtain the full amount of information required by the UI page;

所述UI构建器用于：基于所述全量信息和组件类实例，生成UI文件；The UI builder is used to: generate a UI file based on the full amount of information and the component class instance;

其中，所述最小信息集基于预先定义的最小信息集模型补全，所述最小信息集模型用于：以最小的信息量，表达UI页面所需的全部信息；所述最小信息集模型的定义通过对通用UI页面进行页面抽象出最小信息集的定义得到；所述最小信息集包括：布局、样式和交互功能；所述组件类基于对通用UI页面进行页面抽象得到。The minimum information set is completed based on a predefined minimum information set model, and the minimum information set model is used to: express all the information required by the UI page with the minimum amount of information; the definition of the minimum information set model Obtained by the definition of the page abstraction minimum information set for the general UI page; the minimum information set includes: layout, style and interaction function; the component class is obtained based on the page abstraction of the general UI page.

优选的，所述最小信息集存储于后台数据库或指定文件中；所述最小信息集基于预先设计的数据库数据模型和文件语法进行表述。Preferably, the minimum information set is stored in a background database or a specified file; the minimum information set is expressed based on a pre-designed database data model and file syntax.

优选的，在所述组件类预定义时将各组件中的固定格式部分按默认布局、样式和交互功能封装进入所述组件类，对组件中需要变化的部分提供类实例相应的构造方法和操纵方法。Preferably, when the component class is pre-defined, the fixed format part of each component is encapsulated into the component class according to the default layout, style and interactive function, and the corresponding construction method and manipulation of the class instance are provided for the part of the component that needs to be changed method.

优选的，在所述组件类预定义时还包括为变更固定格式部分提供的类实例相应的构造方法和操纵方法。Preferably, when the component class is predefined, it also includes corresponding construction methods and manipulation methods for changing the class instance provided by the fixed format part.

优选的，所述UI解析器具体用于：基于最小信息集模型获取各组件对应的最小信息集，对最小信息集进行推理映射，并利用预先定义的构造方法产生组件类实例，再通过操纵方法使用所述最小信息集对组件类实例的样式、布局、交互进行变更得到全量信息。Preferably, the UI parser is specifically used to: obtain the minimum information set corresponding to each component based on the minimum information set model, perform inference mapping on the minimum information set, and use a predefined construction method to generate an instance of the component class, and then use the manipulation method to generate an instance of the component class. The full amount of information is obtained by changing the style, layout and interaction of the component class instance using the minimum information set.

优选的，所述构造方法抽象化为如下公式：Preferably, the construction method is abstracted into the following formula:

UI：＝Page+UI:=Page+

Page：＝[Component(Type，Position，Style，DataToBind)]+Page:=[Component(Type, Position, Style, DataToBind)]+

式中：UI表示一个界面设计；Page表示一个界面设计中包含的某个页面；Component表示构成一个页面的各组件；Type表示：组件类型；Position表示：组件位置；Style表示：组件样式；DataToBind表示：组件绑定的数据；其中Menu、Navigator、Table和Form均为该组件类型；Menu为菜单组件；Navigator为数据导航组件；Table为表格组件和Form为表单组件。In the formula: UI represents an interface design; Page represents a page included in an interface design; Component represents each component that constitutes a page; Type represents: component type; Position represents: component position; Style represents: component style; DataToBind represents : The data bound by the component; where Menu, Navigator, Table and Form are the component types; Menu is a menu component; Navigator is a data navigation component; Table is a table component and Form is a form component.

优选的，所述组件包括：组件类型、组件位置、组件样式以及绑定的数据；所述组件位置和组件样式由全量信息集中的布局和样式确定，所述组件绑定的数据的格式和交互模式在实例化类时由对应全量信息集中交互功能确定。Preferably, the component includes: component type, component position, component style and bound data; the component position and component style are determined by the layout and style in the full information set, the format and interaction of the data bound by the component The mode is determined by the interaction function of the corresponding full information set when the class is instantiated.

优选的，所述UI页面中的组件包括至少一个表格组件；各表格组件均对应后台数据库表，表格组件对应的数据库表间还包括下述任意一种关联关系：一对一、一对多、多对一或多对多；所述关联关系由数据库中的外键约束确定，并通过页面导航组件体现。Preferably, the components in the UI page include at least one table component; each table component corresponds to a background database table, and the database tables corresponding to the table component also include any of the following association relationships: one-to-one, one-to-many, Many-to-one or many-to-many; the association relationship is determined by foreign key constraints in the database, and is embodied by page navigation components.

优选的，所述UI页面中的组件还包括：跳转按钮；Preferably, the components in the UI page further include: a jump button;

当所述关联关系为一对一或一对多时：所述跳转按钮用于：当在所述表格组件中有选中记录，且该表格对应一个外键表，则从表格组件对应的数据库表跳转到所述表格组件中选中记录外键对应的主表，所述页面导航组件打开新的页面，并生成查询条件给新页面的表格组件，并在其中展示所选择记录中的外键值对应的主表的记录；当在所述表格组件中未选中记录，则给出拒绝提示，告知先选择一条记录；所述外键表和主表均对应数据库表；When the association relationship is one-to-one or one-to-many: the jump button is used to: when there is a selected record in the table component, and the table corresponds to a foreign key table, then the database table corresponding to the table component is selected. Jump to the main table corresponding to the foreign key of the selected record in the table component, the page navigation component opens a new page, and generates query conditions to the table component of the new page, and displays the foreign key value in the selected record. The record of the corresponding main table; when the record is not selected in the table component, a rejection prompt is given, informing that a record is selected first; the foreign key table and the main table both correspond to database tables;

当所述关联关系为多对一时：将所述多对一关系中的“一”方作为主表，将关联关系表作为展示表，并将所述主表和关联关系表的关联查询join结果放在一个表格组件中展示；When the association relationship is many-to-one: take the "one" side of the many-to-one relationship as the main table, the association table as the display table, and the associated query join result between the main table and the association table Display it in a table component;

当所述关联关系为多对多时：将所述多对多关系中的两方分别作为主表，将关联关系表作为展示表，展示表中包含所述两个主表的信息，并将所述两个主表和一个展示表的关联查询join结果放在一个表格组件中展示。When the association relationship is many-to-many: the two parties in the many-to-many relationship are respectively used as the main table, the association table is used as the display table, the display table contains the information of the two main tables, and all The join results of the associated query between the two main tables and a presentation table are displayed in a table component.

优选的，所述表格组件和表单组件中对应的后台数据库中各数据表的操作由SMART套件确定；Preferably, the operation of each data table in the background database corresponding to the form component and the form component is determined by the SMART suite;

所述操作至少包括下述中的一种或多种：查询、增加、删除、修改，以及在这些操作间的切换。The operations include at least one or more of the following: query, addition, deletion, modification, and switching between these operations.

优选的，所述SMART套件包括下述中至少一种或多种状态：数据展示、增加、删除和修改；基于每种状态均由相应的跳转按钮触发，各个状态所需的信息均从全量信息集中获取。Preferably, the SMART suite includes at least one or more of the following states: data display, addition, deletion, and modification; each state is triggered by a corresponding jump button, and the information required by each state is from the full Centralized access to information.

优选的，所述页面导航组件采用面包屑导航实现。Preferably, the page navigation component is implemented by breadcrumb navigation.

优选的，所述系统根据用户的不同权限确定不同的菜单信息，所述菜单组件请求这个信息并以树状结构展示菜单，对整个系统进行导航。Preferably, the system determines different menu information according to different permissions of the user, and the menu component requests this information and displays the menu in a tree structure to navigate the entire system.

优选的，所述UI文件包括：css文件、js文件和html文件。Preferably, the UI files include: css files, js files and html files.

优选的，所述组件类支持类间的嵌套关系，所述嵌套关系对应html文件中标签的嵌套。Preferably, the component class supports a nesting relationship between classes, and the nesting relationship corresponds to the nesting of tags in the html file.

基于同一种发明构思，本发明还提供一种页面生成方法，所述方法利用本发明提供的一种电力UI自动化构建系统执行下述步骤实现：Based on the same inventive concept, the present invention also provides a method for generating a page. The method utilizes a power UI automation construction system provided by the present invention to execute the following steps:

基于最小信息集的定义，补全最小信息集；Based on the definition of the minimum information set, complete the minimum information set;

基于最小信息集，对UI页面中的各组件对应的预定义组件类进行处理，获得所述UI页面所需的全量信息；Based on the minimum information set, the predefined component class corresponding to each component in the UI page is processed to obtain the full amount of information required by the UI page;

基于所述全量信息和组件类实例，生成UI文件；Based on the full amount of information and the component class instance, a UI file is generated;

其中，所述最小信息集的定义和组件类基于对通用UI页面进行页面抽象得到；所述最小信息集包括：布局、样式和交互功能。Wherein, the definition of the minimum information set and the component class are obtained based on the page abstraction of the general UI page; the minimum information set includes: layout, style and interaction function.

基于同一种发明构思，本发明还提供一种计算机设备，包括：一个或多个处理器；Based on the same inventive concept, the present invention also provides a computer device, comprising: one or more processors;

所述处理器，用于存储一个或多个程序；the processor for storing one or more programs;

所述一个或多个程序为本发明提供的一种页面生成系统所对应的功能。The one or more programs are functions corresponding to a page generation system provided by the present invention.

基于同一种发明构思，本发明还挺一种计算机可读存储介质，其上存有计算机程序，所述计算机程序被执行时，实现本发明提供的一种页面生成系统所对应的功能。Based on the same inventive concept, the present invention also provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed, realizes the functions corresponding to the page generation system provided by the present invention.

与现有技术相比，本发明的有益效果为：Compared with the prior art, the beneficial effects of the present invention are:

通过使用电力UI自动化构件系统，大部分的UI界面能够自动生成，能够集中精力进行剩下功能的开发，提高了开发的效率，同时生成的UI上线后问题较传统方法少，因为构建技术已经多次使用，构建程序没有什么问题，只要保证最小信息集的质量，便可以保证生成UI的质量，同时本技术降低了UI开发人员的学习成本，缩短了开发的学习周期。By using the power UI automation component system, most of the UI interfaces can be automatically generated, and the development of the remaining functions can be concentrated, which improves the development efficiency. At the same time, the generated UI has fewer problems after going online than the traditional method, because there are many construction technologies. There is no problem in constructing the program if it is used twice, as long as the quality of the minimum information set is guaranteed, the quality of the generated UI can be guaranteed. At the same time, this technology reduces the learning cost of UI developers and shortens the development learning cycle.

附图说明Description of drawings

图1为本发明的电力UI自动化构建系统结构简图；1 is a schematic structural diagram of the power UI automation construction system of the present invention;

图2为本发明的页面分析简图；Fig. 2 is the schematic diagram of page analysis of the present invention;

图3为本发明的映射关系图；3 is a mapping relationship diagram of the present invention;

图4为本发明的增删改查状态转移图；Fig. 4 is the state transition diagram of adding, deleting, modifying and checking of the present invention;

图5为本发明的数据表关系中一对多关系图；Fig. 5 is a one-to-many relationship diagram in the data table relationship of the present invention;

图6为本发明的数据表关系中多对一关系图；6 is a many-to-one relationship diagram in the data table relationship of the present invention;

图7为本发明的数据表关系中多对多关系图；7 is a many-to-many relationship diagram in the data table relationship of the present invention;

图8为本发明的页面生成方法流程图；Fig. 8 is the flow chart of the page generation method of the present invention;

其中，1为样式，2为UI交互，3为后台交互，4为布局。Among them, 1 is the style, 2 is the UI interaction, 3 is the background interaction, and 4 is the layout.

具体实施方式Detailed ways

为了更好地理解本发明，下面结合说明书附图和实例对本发明的内容做进一步的说明。In order to better understand the present invention, the content of the present invention will be further described below with reference to the accompanying drawings and examples.

实施例1：Example 1:

本发明提供一种电力UI自动化构建系统，如图1所示，包括：UI解析器和UI构建器；The present invention provides a power UI automation construction system, as shown in FIG. 1 , including: a UI parser and a UI builder;

1最小信息集模型1 Minimum Information Set Model

我们首先研究和确认UI的最小信息集，如图2中左侧部分为原始页面，我们将原始页面抽象出：1-样式，2-交互，3-后台交互和4-布局部分，如图2右侧部分的页面抽象；可见通用的UI页面上的信息分为位置、样式和交互三类，信息集最小说明信息没有冗余，只存在一份副本，减少了配置的工作量的同时，避免了一致性的问题；同时这部分信息又是完备的，可以描述UI设计所需的全部生成信息。We first study and confirm the minimum information set of the UI. The left part in Figure 2 is the original page. We abstract the original page: 1-style, 2-interaction, 3-background interaction and 4-layout part, as shown in Figure 2 The page abstraction on the right part; it can be seen that the information on the general UI page is divided into three categories: location, style and interaction. The minimum information set indicates that the information is not redundant, and only one copy exists, which reduces the workload of configuration and avoids It solves the problem of consistency; at the same time, this part of the information is complete and can describe all the generated information required for UI design.

我们研究并设计了表述电力UI系统最小信息集的这三类信息的存储位置、数据模型和语法，未来根据这些定义来最小信息集得到最小信息集模型，并在构建UI时基于最小信息集模型补全最小信息集，然后用最小信息集来生成和定义整个UI的信息集。We have studied and designed the storage location, data model and syntax of these three types of information that represent the minimum information set of the power UI system. In the future, we will obtain the minimum information set model from the minimum information set according to these definitions, and build the UI based on the minimum information set model. Complete the minimum information set, and then use the minimum information set to generate and define the information set of the entire UI.

2最小信息集到UI的推理映射2 Reasoning Mapping of Minimum Information Set to UI

我们研究了如何将最小信息集映射为UI能够理解的形式，也就是最小信息集到UI的推理映射。We study how to map the minimum information set into a form that the UI can understand, that is, the inference mapping of the minimum information set to the UI.

我们研究了UI各部分分别需要哪些信息。对于常见并具有关联性的内容，我们将其内聚成一些模块。模块可以有自己的布局、样式和交互功能，部分是内置的，无需配置，剩余部分能够从最小信息集获取信息。系统开发时，UI构建器可基于必要的初始化信息，从最小信息集中进行检索，获得详细定义信息，自动将模板所需的信息填入模板，将信息集转换映射为构件内部的状态，并定义构件的行为。We looked at what information is required for each part of the UI. For common and related content, we cohere it into some modules. Modules can have their own layouts, styles, and interactivity, some are built-in and require no configuration, and the rest can get information from a minimal set of information. During system development, the UI builder can retrieve the minimum information set based on the necessary initialization information, obtain detailed definition information, automatically fill the template with the information required by the template, convert the information set into the internal state of the component, and define Component behavior.

如图3所示，UI页面由css文件、js文件、html文件构成，浏览器解析这些文件，完成整个页面的展示和交互。我们在css中定义了各个模块的布局和样式，这些布局和样式可以在最小信息集中重新配置，覆盖原来的配置，比如我们在own.css中定义了菜单的颜色；我们在js中封装了各个模块的行为和动作，通过从最小信息集中获取信息，我们在js中初始化各个实际模块的控件，并操作控件完成UI内部的交互，以及UI与后台的交互，比如我们在ctrl.js中定义了点击菜单时的动作、点击按钮时的动作，并将这些动作与对应的HTML元素绑定；我们在html中定义了页面的展示元素、页面框架、页面跳转等功能，例如我们通过最小信息集中的表格引用，生成面包屑导航，使用数据库中表格的列名，作为html中列的实际数据的列名。As shown in Figure 3, the UI page consists of css files, js files, and html files. The browser parses these files to complete the display and interaction of the entire page. We define the layout and style of each module in css. These layouts and styles can be reconfigured in the minimum information set, overwriting the original configuration. For example, we define the color of the menu in own.css; we encapsulate each module in js. The behavior and actions of modules, by obtaining information from the minimum information set, we initialize the controls of each actual module in js, and operate the controls to complete the interaction within the UI, as well as the interaction between the UI and the background, for example, we define in ctrl.js Actions when the menu is clicked, actions when the button is clicked, and bind these actions to the corresponding HTML elements; we define the page display elements, page frames, page jumps and other functions in HTML. For example, we use the minimum information set The table reference, which generates breadcrumbs, uses the column name of the table in the database as the column name of the actual data of the column in the html.

3展示单元的确定3 Determination of display units

确定了最小信息集和映射关系后，我们还定义了信息的接收者。当生成UI时，不仅需要数据库中的信息，还需要指明UI模板的类型。为了抽取出UI的常用结构和行为，简化定义过程，我们抽象并定义了一些常用的展示单元，这些单元内部包含了自身的布局、样式和动态行为。After determining the minimum information set and mapping relationship, we also define the receiver of the information. When generating a UI, not only the information in the database is required, but also the type of UI template needs to be specified. In order to extract the common structure and behavior of UI and simplify the definition process, we abstract and define some common display units, which contain their own layout, style and dynamic behavior.

首先我们确定了展示单元定义原则，对于那些使用频繁，高内聚低耦合的模板，我们将其定义为展示单元构件，多个构件还可以组成一个更大的构件，我们根据之前多个信息系统的开发经验，封装了一些UI设计中常见的展示单元。First of all, we have determined the definition principle of display unit. For those templates that are frequently used, high cohesion and low coupling, we define them as display unit components. Multiple components can also form a larger component. According to the previous multiple information systems The development experience encapsulates some common display units in UI design.

3.1增删改查功能3.1 Add, delete, modify and check function

在电力领域系统虽然功能众多，分析起来，很多是针对表的增删改查，我们对一些电力系统的接口进行了总结，如表1所示。Although the system in the power field has many functions, many of them are based on the addition, deletion and modification of the table. We summarize the interfaces of some power systems, as shown in Table 1.

表1 增删改查操作统计Table 1 Statistics of CRUD operations

从表1可以看出，很多操作都直接是或者涉及增删改查操作，数据查询涉及数据的展示(使用表格)、数据新增和修改涉及增改的表单、包含表单的对话框，此外还需要按钮(对于增改按钮绑定显示相应对话框的操作，让用户输入信息并提交；对于删除按钮绑定显示提示框的操作，让用户确定是否删除，对于查询可能有刷新按钮)等，工作量大，容易出错，经过分析研究，我们发现实际上这些操作有一套固定的流程，其状态机是固定的，我们设计并实现了一种构件封装了一个表的增删改查，仅仅需要定义一个该模块，就可以实现之间多个组件相互协作才能完成的功能，减少了工作量，提高开发质量。As can be seen from Table 1, many operations are directly or involve addition, deletion, modification and query operations. Data query involves data display (using tables), data addition and modification involves addition and modification forms, and dialog boxes containing forms. Button (for the operation of adding and changing the button binding to display the corresponding dialog box, let the user enter information and submit; for the operation of deleting the button binding, showing the prompt box, let the user determine whether to delete, there may be a refresh button for the query), etc., workload It is large and prone to errors. After analysis and research, we found that these operations actually have a fixed set of processes, and the state machine is fixed. We designed and implemented a component that encapsulates the addition, deletion, modification and query of a table. It is only necessary to define a The module can realize the functions that can only be completed by the cooperation of multiple components, which reduces the workload and improves the development quality.

如图4所示，初始化时首先进行查询，从后台拉取信息，并展示在页面中，进入显示表格状态；点击增加按钮之后，弹出新增记录的对话框，进入显示对话框状态，输入信息提交，触发向后台提交数据的操作，增加记录，然后又进行查询，从后台拉取数据，显示在页面中，进入显示表格状态；选中某记录后点击编辑按钮后，获取该记录信息，显示在对话框中，进入显示对话框状态，输入信息提交，触发向后台提交数据的操作，编辑记录，然后又进行查询，从后台拉取数据，在页面中展示，进入显示表格状态；删除操作时，首先弹出提示框，进入显示提示框状态，用户确定删除请求后，向后台提交删除记录请求，然后进行查询，从后台拉取数据，进入显示表格状态，在页面中展示，这个功能高内聚，所以后面我们将其封装成了一个组件。As shown in Figure 4, during initialization, the query is first performed, the information is pulled from the background, and displayed on the page, entering the display table state; after clicking the add button, a dialog box for adding a new record pops up, entering the display dialog state, and entering information Submit, trigger the operation of submitting data to the background, add records, and then query, pull data from the background, display it on the page, and enter the display table state; after selecting a record and clicking the edit button, the record information is obtained and displayed in In the dialog box, enter the display dialog state, enter the information to submit, trigger the operation of submitting data to the background, edit the record, and then query again, pull the data from the background, display it on the page, and enter the display table state; when deleting the operation, First, a prompt box pops up and enters the state of displaying the prompt box. After the user confirms the deletion request, he submits a delete record request to the background, and then performs a query, pulls data from the background, enters the display table state, and displays it on the page. This function is highly cohesive. So later we encapsulate it into a component.

3.2关联关系和数据导航3.2 Association relationship and data navigation

UI展示的业务数据是有关系的，在建立ER图的过程中，我们要识别这种关系，然后在数据库逻辑设计时，用外键关系来表示这种关系，这种关系保证了不同表之间的参照完整性，表示一个表引用了另一个表的字段，这属于数据模型层的关系，反映了实体之间的一对一、一对多、多对一或多对多关系，比如每个数据集下有多张图片，每张图片下有多个缺陷，每个组织机构下有多个用户，角色可能关联多个权限，某权限可能属于多个角色。The business data displayed by the UI is related. In the process of establishing the ER diagram, we need to identify this relationship, and then use the foreign key relationship to represent this relationship in the logical design of the database. This relationship ensures that the relationship between different tables is The referential integrity between entities means that one table references the fields of another table, which belongs to the relationship of the data model layer and reflects the one-to-one, one-to-many, many-to-one or many-to-many relationship between entities, such as each There are multiple images under a dataset, multiple defects under each image, multiple users under each organization, roles may be associated with multiple permissions, and a permission may belong to multiple roles.

在电力应用的开发中，业务数据的关联性，往往需要反映到UI上。对上述关系，开发者一般采用在一个页面显示多个关联表的方式来解决，但是这种方式导致了一个页面功能过于复杂，代码量较大，耦合度强的问题，经过分析，我们发现这种关系在可视化展示的时候，可以表现为用户可以根据表的一条记录的内容从一个表跳转到与他关联的表中我们对这种操作进行了抽象，设计并实现了相应的构件，可以根据外键关联在不同表间切换，实现数据导航。In the development of power applications, the relevance of business data often needs to be reflected on the UI. For the above relationship, developers generally use the method of displaying multiple association tables on one page to solve the problem, but this method leads to the problem that a page is too complex, the amount of code is large, and the coupling degree is strong. After analysis, we found that this When this kind of relationship is displayed visually, it can be expressed that the user can jump from a table to the table associated with him according to the content of a record in the table. We abstract this operation, design and implement the corresponding components, which can Switch between different tables based on foreign key associations to achieve data navigation.

不同表代表的实体之间的关系，包含一对一、一对多、多对一、多对多四种情况，一对一关系可以看作特殊的一对多，下面分别对另三种情况进行介绍。The relationship between entities represented by different tables includes four cases: one-to-one, one-to-many, many-to-one, and many-to-many. The one-to-one relationship can be regarded as a special one-to-many relationship. The following three cases are respectively Introduce.

1)对于一对多关系，如图5所示，会自动生成跳转按钮和数据导航，在选中一条记录的情况下点击按钮从主表跳转到外键表，切换页面之后，数据导航构件会自动生成查询条件给表格构件，在新页面中展示该条记录对应的另一个表中的多条记录，如果没有选择记录，则给出拒绝提示；此外通过数据导航可以回溯到路径中的任何一个位置。1) For a one-to-many relationship, as shown in Figure 5, a jump button and data navigation will be automatically generated. When a record is selected, click the button to jump from the main table to the foreign key table. After switching pages, the data navigation component The query condition will be automatically generated to the table component, and multiple records in another table corresponding to this record will be displayed on the new page. If no record is selected, a rejection prompt will be given; in addition, data navigation can be traced back to any record in the path. a location.

2)对于多对一关系，如图6所示，我们的处理方式是将多对一中的一的信息作为主表，关联关系作为展示表，直接在表格中展示两个表的join结果，这样表格中每条记录既包含本表信息又包含关联表信息。2) For the many-to-one relationship, as shown in Figure 6, our processing method is to use the information of one of the many-to-one as the main table, the association relationship as the display table, and directly display the join results of the two tables in the table. In this way, each record in the table contains both this table information and related table information.

3)对于多对多关系，如图7所示，我们的处理方式是分别基于所述多对多关系中的两“多”转化为两个多对一关系，两个多对一关系中的“一”方分别作为主表，将关联关系表作为展示表，展示表中包含所述两个主表的信息，即包含两个多对一关系，并将三个表的join结果直接在表格中展示，这样表格中每条记录包含关联关系表信息和两个被关联表的信息。3) For the many-to-many relationship, as shown in Figure 7, our processing method is to convert the two "many" in the many-to-many relationship into two many-to-one relationships, and the two many-to-one relationships in the The "one" side is used as the main table, and the association table is used as the display table. The display table contains the information of the two main tables, that is, it contains two many-to-one relationships, and the join results of the three tables are directly displayed in the table. In this way, each record in the table contains the information of the relationship table and the information of the two related tables.

3.3菜单3.3 Menu

菜单是很多系统的组成部分，使用户能够一目了然的知道系统的功能，快速切换页面，但是传统的做法是将菜单列表放在前端UI之中，可是对于不同权限的用户，能看到的页面也是不同的，需要根据不同的用户现实不同的菜单，仅仅允许用户访问有权限查看的页面，通常的做法是，从后台请求用户的权限信息，根据返回对菜单进行调整，此外当菜单发生变化时，需要手动修改后台权限部分，并同步更新前台UI的html等文件。The menu is an integral part of many systems, enabling users to know the functions of the system at a glance and switch pages quickly. However, the traditional method is to put the menu list in the front-end UI, but for users with different permissions, the pages that can be seen are also Different, it is necessary to implement different menus according to different users, and only allow users to access pages that they have permission to view. The usual practice is to request the user's permission information from the background, and adjust the menu according to the return. In addition, when the menu changes, You need to manually modify the background permission part, and update the html and other files of the foreground UI synchronously.

在本构建系统中，为了实现信息的统一，我们设计了菜单构件，将菜单的显示与菜单的内容分离，降低了对菜单开发的要求，并减少了菜单与后台权限的耦合度，具体思路是初始化时菜单构件会从后台请求菜单数据，后台根据最小信息集中定义的信息组织菜单，并经过已登录用户的权限筛选，将该用户对应的菜单数据返回给菜单构件，菜单构件根据该数据显示菜单。In this construction system, in order to achieve the unification of information, we designed menu components to separate the display of the menu from the content of the menu, which reduces the requirements for menu development and reduces the coupling between the menu and the background authority. The specific idea is During initialization, the menu component will request menu data from the background. The background organizes the menu according to the information defined in the minimum information set, and is filtered by the permissions of the logged-in user. The menu data corresponding to the user is returned to the menu component, and the menu component displays the menu according to the data. .

4实现4 Realization

我们获取了整个系统的构造方法。We get the construction method of the whole system.

式中：UI表示一个界面设计；Page表示一个界面设计中包含的多个页面；In the formula: UI represents an interface design; Page represents multiple pages included in an interface design;

Component表示构成一个页面的各组件；Type表示：组件类型；Position表示：组件位置；Style表示：组件样式；DataToBind表示：组件绑定的数据；其中Menu、Navigator、Table和Form等等均为该组件类型。Component represents each component that constitutes a page; Type represents: component type; Position represents: component position; Style represents: component style; DataToBind represents: component bound data; Menu, Navigator, Table and Form are all the components type.

在后台的构建过程中，已经构建了URM统一关系数据模型，后台的元数据、接口等信息都存储在数据库中，例如表的外键联系会静态存储在sys_meta表中，而不用动态考虑表的外键关联关系，这些部分能够作为前端生成的输入，提供给构件，但是这些信息并不够，因此我们在数据库中配置UI的相关表述表，具体的，我们增加了ui_field表和ui_menu表，字段表包含UI使用的所有字段的中文名，与URM的字段的对应关系，是否在新增、编辑、列表中展示，如何校验等信息，菜单表包含菜单名，上级菜单ID，菜单对应的URM表名称等信息，我们通过URM表名，确定点击菜单时的动作。In the background construction process, the URM unified relational data model has been built, and the background metadata, interfaces and other information are stored in the database. For example, the foreign key connection of the table will be statically stored in the sys_meta table, without dynamically considering the table Foreign key associations, these parts can be used as input generated by the front-end and provided to the components, but these information are not enough, so we configure the UI related expression table in the database, specifically, we add ui_field table and ui_menu table, field table Contains the Chinese names of all fields used by the UI, the corresponding relationship with the fields of the URM, whether it is displayed in the new, edited, list, how to verify and other information, the menu table contains the menu name, the upper-level menu ID, and the corresponding URM table of the menu Name and other information, we use the URM table name to determine the action when the menu is clicked.

我们使用Python编写了模板的解析器，解析器解析模板和工作流定义，生成html、js、css代码，通过基于Python实现UI定义，不需要其他语言的知识，降低了开发难度，同时由于Python的高层性，可以用更少的代码量实现相同的功能，由于代码规模的减少，也降低了错误发生的可能性，提高了系统的可靠性，未来可以根据UI自动化构建系统的使用者熟悉的语言情况，实现其他语言的电力UI自动化构建系统。We use Python to write a parser for templates, the parser parses templates and workflow definitions, generates html, js, and css codes, and implements UI definitions based on Python, which does not require knowledge of other languages, which reduces the difficulty of development. High-level, the same function can be implemented with less code amount. Due to the reduction of the code size, the possibility of errors is also reduced, and the reliability of the system is improved. In the future, users of the system can automatically build a language based on UI automation. In case of situations, realize the power UI automation construction system in other languages.

首先我们按照需求设计了各种模板，模板中不变的部分作为模板框架，构件中变化的部分通过配置实现，配置来源于最小信息集，可以来自于数据库，与后台一致，也可以来自文件，例如yaml文件，也可在定义时直接编写在代码中，Parser解析构建定义，生成具体的html定义和js控件对象，在电力UI自动化构建系统中，用高级语言编写了各个构件的类，可以实例化这些类获得对象，实例化之后，通过解析器可以生成该类的HTML代码，构件对应的代码会生成相应的标签，根据配置生成独一无二的ID，以及附带其他信息；此外我们每一个高级语言的类在公共JS中也对应一个类，解析器会JS实例化对应类，并把相关信息传递给类，未来可以通过这个JS实例对UI对象进行操作，与其他实例或后台交互，例如类中包含了类对应的html元素的ID，请求后台的请求方式和地址，如何获取数据，如何发送数据等等，每个类都有一些内置的类方法，例如从后台请求数据，读取控件中的数据，是大部分类都具有的方法，还有一些类有一些特有的方法，例如显示和隐藏的方法，此外JS部分还包含一些绑定信息，例如按钮按下时，触发什么动作，表中的行是否可以选中，选中后可以触发什么动作等等，这部分与工作流定义有关。First of all, we designed various templates according to the requirements. The unchanged part of the template is used as the template frame, and the changed part of the component is realized through configuration. The configuration comes from the minimum information set, which can come from the database, consistent with the background, or from the file. For example, yaml files can also be written directly in the code when they are defined. Parser parses the construction definition and generates specific html definitions and js control objects. In the power UI automation construction system, the classes of each component are written in high-level languages, which can be instantiated. After instantiating these classes to obtain objects, after instantiation, the HTML code of the class can be generated through the parser, the corresponding tags of the components will be generated, the unique IDs will be generated according to the configuration, and other information will be attached; in addition, each of our high-level language A class also corresponds to a class in public JS. The parser will instantiate the corresponding class in JS and pass relevant information to the class. In the future, you can use this JS instance to operate UI objects and interact with other instances or backgrounds. For example, the class contains Each class has some built-in class methods, such as requesting data from the background and reading data in the control , is the method that most classes have, and some classes have some unique methods, such as the method of showing and hiding, in addition, the JS part also contains some binding information, such as what action is triggered when the button is pressed, the Whether the row can be selected, what actions can be triggered after the selection, etc., this part is related to the definition of the workflow.

4.1Smart组件4.1 Smart Components

我们定义了SMART套件，即Search/Modify/Add/Remove of a Table，我们在数据库中定义了所有表英文列名对应的中文名，该字段是否展示在表格中，是否展示在表单中，是否必填等等，SMART的使用非常简便，仅仅需要指明一个主表名，解析器就会自动生成所有的构件，例如跳转按钮、dialog、表格等，并且将给各个构件自动绑定相应的动作，包括UI内部的交互动作与UI与后台之间的交互动作，例如点击增加按钮，弹出新增dialog，点击删除按钮，触发将id传给后台的删除接口的动作，SMART组件会根据5.3.1所定义的状态机的方法控制整个SMART组件的运作。We have defined a SMART suite, namely Search/Modify/Add/Remove of a Table, we have defined the Chinese names corresponding to the English column names of all tables in the database, whether the field is displayed in the table, whether it is displayed in the form, and whether it must be Fill in, etc., the use of SMART is very simple, just need to specify a main table name, the parser will automatically generate all components, such as jump buttons, dialogs, tables, etc., and will automatically bind the corresponding actions to each component, Including the interaction within the UI and the interaction between the UI and the background, such as clicking the add button, a new dialog will pop up, clicking the delete button, triggering the action of passing the id to the delete interface in the background, the SMART component will be based on 5.3.1 The defined state machine method controls the operation of the entire SMART component.

举一个从最小信息集推理映射的例子，在生成新增、编辑某个表记录的表单的信息的时候，解析器会对数据库中的字段类型和表之间的关系进行查询，例如如果是个普通的字符串，则全量信息中字段为普通，构造器将生成input标签；如果是数字，则全量信息中字段为number，构造器将生成number类型的input；如果是密码，则全量信息中字段为password，构造器将生成password类型的input；如果是其他表的外键，则全量信息中将包含外键信息，构造器将生成select，并生成弹出表单时请求服务端外键表内容的请求；诸如此类，等等。To give an example of inferring mapping from the minimum information set, when generating information about a form to add or edit a table record, the parser will query the relationship between the field type in the database and the table, for example, if it is a common If it is a string, the field in the full information is normal, and the constructor will generate an input tag; if it is a number, the field in the full information is number, and the constructor will generate an input of type number; if it is a password, the field in the full information is password, the constructor will generate an input of password type; if it is a foreign key of another table, the foreign key information will be included in the full information, the constructor will generate select, and generate a request for the content of the server-side foreign key table when the form pops up; And so on, and so on.

4.2面包屑导航4.2 Breadcrumb Navigation

对于两个表乃至多个表相互关联的情况，我们使用了面包屑导航，面包屑导航是一种告诉访问者他们在网站中的位置以及如何返回的技术，我们封装了面包屑导航构件，包含高级语言中的类、js中的类、html代码、css代码等，例如组织机构与人员相互关联，每个组织机构下有若干人员，我们的SMART套件会自动在生成机构增删改查操作和表格的同时，生成调用人员模块的按钮，当选中表格中的一条记录的时候，可以进入人员模块，并仅显示该组权限范围内能看到的记录，这仅仅是两级的例子，面包屑导航同时也适应多级的情况，面包屑导航记录了这个路径，可以选择回退到路径中的任何一个位置。For situations where two tables or even multiple tables are related, we use breadcrumbs, a technique that tells visitors where they are on a website and how to get back, we encapsulate the breadcrumb widgets, including Classes in high-level languages, classes in js, html codes, css codes, etc., for example, organizations and personnel are interrelated, each organization has several personnel, our SMART suite will automatically add, delete, modify, check operations and forms in the generation organization At the same time, the button to call the personnel module is generated. When a record in the table is selected, the personnel module can be entered, and only the records that can be seen within the permission scope of the group are displayed. This is just an example of two levels, breadcrumb navigation At the same time, it is also suitable for multi-level situations. The breadcrumb navigation records this path, and you can choose to go back to any position in the path.

通过面包屑导航的时候，可以避免在一个页面放入多个表格，降低了UI定义与生成的难度，同时由于一个页面包含的内容例如表格变少了，增加了显示控件的空间，可以更自由的向用户展示数据。When navigating through breadcrumbs, you can avoid putting multiple tables on one page, reducing the difficulty of UI definition and generation. At the same time, because the content of a page, such as tables, is reduced, the space for displaying controls is increased, and you can be more free. to display data to users.

4.3菜单4.3 Menu

如图2所示，我们在页面上侧和左侧设计了导航栏，上侧的导航栏展示一级菜单，左侧的导航栏展示的是二级以及二级以下的菜单，通过分析，我们发现菜单数据其实可以用树状结构表示，我们将整个菜单数据从后台拉去后，将其解析为树状结构，再在整个界面中展示，如果选中的菜单项是数据中的非叶子节点，则展开该菜单；如果选中的菜单项是数据中的叶子节点，则认为是一个页面，此时在主页面中加载该叶子节点对应的页面。As shown in Figure 2, we designed navigation bars on the upper and left sides of the page. The upper navigation bar displays the first-level menu, and the left navigation bar displays the second-level and lower menus. Through analysis, we It is found that the menu data can actually be represented by a tree structure. After we pull the entire menu data from the background, we parse it into a tree structure, and then display it in the entire interface. If the selected menu item is a non-leaf node in the data, Then expand the menu; if the selected menu item is a leaf node in the data, it is considered to be a page, and the page corresponding to the leaf node is loaded in the main page at this time.

实施例2：Example 2:

基于同一种发明构思，本发明还提供了一种页面生成方法，如图8所示；本实施例利用本发明提供的一种电力UI自动化构建系统执行下述步骤对页面进行自动生成：Based on the same inventive concept, the present invention also provides a method for generating a page, as shown in Figure 8; the present embodiment utilizes a power UI automation construction system provided by the present invention to perform the following steps to automatically generate a page:

S1、基于最小信息集模型，补全最小信息集；S1. Based on the minimum information set model, complete the minimum information set;

S2、基于最小信息集，对UI页面中的各组件对应的预定义组件类进行处理，获得所述UI页面所需的全量信息；S2. Based on the minimum information set, process the predefined component classes corresponding to each component in the UI page to obtain the full amount of information required by the UI page;

S3、基于所述全量信息和组件类实例，生成UI文件；S3, based on the full amount of information and the component class instance, generate a UI file;

其中，所述最小信息集的定义通过通用UI页面进行页面抽象出最小信息集的定义得到；所述最小信息集包括：布局、样式和交互功能；所述组件类基于对通用UI页面进行页面抽象得到。Wherein, the definition of the minimum information set is obtained by abstracting the definition of the minimum information set from the general UI page; the minimum information set includes: layout, style and interaction function; the component class is based on the page abstraction of the general UI page. get.

由于UI页面由css文件、js文件、html文件构成，浏览器解析这些文件，即可完成整个页面的展示和交互。Since the UI page is composed of css files, js files, and html files, the browser can parse these files to complete the display and interaction of the entire page.

其详细过程同实施例1，这里不再赘述。The detailed process is the same as that inEmbodiment 1, and details are not repeated here.

实施例3Example 3

基于同一种发明构思，本发明还提供了一种计算机设备，该计算机设备包括处理器以及存储器，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器用于执行所述计算机存储介质存储的程序指令。处理器可能是中央处理单元(CentralProcessing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital SignalProcessor、DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable GateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等，其是终端的计算核心以及控制核心，其适于实现一条或一条以上指令，具体适于加载并执行计算机存储介质内一条或一条以上指令从而实现相应方法流程或相应功能，以实现上述实施例中的一种页面生成系统所对应的功能。Based on the same inventive concept, the present invention also provides a computer device, the computer device includes a processor and a memory, the memory is used for storing a computer program, the computer program includes program instructions, and the processor is used for executing the Program instructions stored by the computer storage medium. The processor may be a central processing unit (Central Processing Unit, CPU), or other general-purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), off-the-shelf programmable gate array ( Field-Programmable GateArray, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., which are the computing core and control core of the terminal, which are suitable for implementing one or more instructions, specifically suitable for loading And execute one or more instructions in the computer storage medium to realize the corresponding method flow or corresponding function, so as to realize the function corresponding to a page generation system in the above-mentioned embodiment.

实施例4Example 4

基于同一种发明构思，本发明还提供了一种存储介质，具体为计算机可读存储介质(Memory)，所述计算机可读存储介质是计算机设备中的记忆设备，用于存放程序和数据。可以理解的是，此处的计算机可读存储介质既可以包括计算机设备中的内置存储介质，当然也可以包括计算机设备所支持的扩展存储介质。计算机可读存储介质提供存储空间，该存储空间存储了终端的操作系统。并且，在该存储空间中还存放了适于被处理器加载并执行的一条或一条以上的指令，这些指令可以是一个或一个以上的计算机程序(包括程序代码)。需要说明的是，此处的计算机可读存储介质可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。可由处理器加载并执行计算机可读存储介质中存放的一条或一条以上指令，以实现上述实施例中的一种页面生成系统所对应的功能。Based on the same inventive concept, the present invention also provides a storage medium, specifically a computer-readable storage medium (Memory), which is a memory device in a computer device for storing programs and data. It can be understood that, the computer-readable storage medium here may include both a built-in storage medium in a computer device, and certainly also an extended storage medium supported by the computer device. The computer-readable storage medium provides storage space in which the operating system of the terminal is stored. In addition, one or more instructions suitable for being loaded and executed by the processor are also stored in the storage space, and these instructions may be one or more computer programs (including program codes). It should be noted that the computer-readable storage medium here can be a high-speed RAM memory, or a non-volatile memory (non-volatile memory), such as at least one disk memory. One or more instructions stored in the computer-readable storage medium can be loaded and executed by the processor, so as to realize the function corresponding to the page generation system in the above-mentioned embodiment.

显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。Obviously, the described embodiments are some, but not all, embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block in the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to the processor of a general purpose computer, special purpose computer, embedded processor or other programmable data processing device to produce a machine such that the instructions executed by the processor of the computer or other programmable data processing device produce Means for implementing the functions specified in a flow or flow of a flowchart and/or a block or blocks of a block diagram.

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory result in an article of manufacture comprising instruction means, the instructions The apparatus implements the functions specified in the flow or flow of the flowcharts and/or the block or blocks of the block diagrams.

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。These computer program instructions can also be loaded on a computer or other programmable data processing device to cause a series of operational steps to be performed on the computer or other programmable device to produce a computer-implemented process such that The instructions provide steps for implementing the functions specified in the flow or blocks of the flowcharts and/or the block or blocks of the block diagrams.

以上仅为本发明的实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均包含在申请待批的本发明的权利要求范围之内。The above are only examples of the present invention, and are not intended to limit the present invention. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present invention are included in the application for pending approval of the present invention. within the scope of the claims.