Page automatic generation tool design_html/css_WEB-ITnose

Page automatic generation tool design

1 Function overview

1.1 Terms used

Automatic page generation tool: a page generation tool for customizing query conditions and data display

1.2 Function description

The automatic page generation tool is based on the engineering staff A tool for defining query conditions and data display methods according to your needs. Data display can be in the form of tables and charts: query statistics display data in the form of tables, and trend pages display pages in the form of charts.

1.2.1 Query statistics page

The settings of the query statistics page are as shown below:

"Set data set": The complete SQL statement of the entire query statistics display data.
"Query Condition Settings": After writing the SQL statement, click the "Set Query Conditions" button to bring the parameters in the SQL statement into the condition settings. Among them, "display order" determines the order in which the condition is displayed in the generated page; "parameter name" corresponds to the parameter in sql; "parameter display name" determines the prompt name of the parameter on the query statistics page; "control type" can Determine the control (text box, time box, drop-down box) on the page for this parameter. The control type will be explained in Section 1.2.4.
"Display settings": Control which columns of data queried by SQL need to be displayed. "Whether to display" controls whether the column is displayed; "Column name" corresponds to the data column, and "Column display name" controls the column header displayed for the column.
"Save": Click the "Save" button to save the page information into the database for next time reading.
"Preview": Click "Preview" to check whether the above page settings are correct.
The final generated page effect is as follows:

Among them, if the start time is greater than, if the start time is less than, the time control is selected, and the circuit ID is the drop-down box control: SELECT numCircuitID,varCircuitName from WD_Circuit;

1.2.2 Trend page

The setting of the trend page is as shown below:

"Set data set": The complete SQL statement of the entire query statistics display data.
"Query Condition Settings": After writing the SQL statement, click the "Set Query Conditions" button to bring the parameters in the SQL statement into the condition settings. Among them, "display order" determines the order in which the condition is displayed in the generated page; "parameter name" corresponds to the parameter in sql; "parameter display name" determines the prompt name of the parameter on the query statistics page; "control type" can Determine the control (text box, time box, drop-down box) on the page for this parameter. The control type will be explained in Section 1.2.4.
"Display settings": Control which columns of data queried by SQL need to be displayed. "Whether to display" controls whether the column is displayed; "Display position" determines the column as the x-axis or y-axis (there can only be one x-axis), "Column name" corresponds to the data column, and "Column display name" refers to the column illustrate.
"Save": Click the "Save" button to save the page information into the database for next time reading.
"Preview": Click "Preview" to see whether the above page settings are correct.
The final generated page effect is as follows:

Among them, the start time is selected as the time control, and the table ID is selected as the drop-down box control: select numTableID,varIP from WD_Table; the column ID is selected as the drop-down box control Box control: SELECT numColID,varCName from WD_Column;

1.2.3 Add and delete search page

The design of the add and delete search page is as follows:

"Main database": the data table operated by the add and delete search
"Set query conditions": Click this button to query all fields of the data table you need to operate.
"Modify settings": "Display order" controls the display order of query conditions and queried data; "primary key" is the primary key of the table: used as a condition (where) when updating (update) and deleting (delete); "Whether to modify" controls whether the field is modified during update and insert; "query condition": indicates whether the parameter is used as a query condition; "parameter" is the field of the table corresponding to the field; "query parameter name" is the string that the parameter is used as a query parameter; "Parameter display name" is the interface prompt name of the parameter used as the query condition; "Control type" can determine the control on the page for this parameter (text box, time box, drop-down box), Control types will be described in Section 1.2.4.
"Save": Click the "Save" button to save the page information into the database for next time reading.
"Preview": Click "Preview" to see whether the above page settings are correct.
The final generated page effect is as follows:

1.2.4 Control type

Control type when controlling selection conditions: text box, drop-down box, time control.
Text box: Default control type
Drop-down box: Enter the sql statement to determine the display data in the drop-down box (SELECT numCircuitID,varCircuitName from WD_Circuit;): The first column is the value of the drop-down box, and the second column is The text of the drop-down box.
Time control: used for time selection

2 module design

2.1 Page automatic generation tool module division

The page automatic generation tool saves the design to the database, and can also read the design from the database Modification, other systems read the design in the database and automatically generate pages.

2.2 Data-related design

The design of the automatic page generation tool ultimately stores data in json format

2.2.1 Query statistics page

json is as follows:
{
"dataTable":"select numRefID,datStart d1,numCircuitID from WD_CircuitParents where datStart BETWEEN ':start:' and ':end:' and numCircuitID=':numCircuitID:'",
"pageType":"query ",
"condition": [
{ "order": "1", "name": ":start:", "showName": "Start time is greater than", "control": "DateTimePicker", "controlData": "" },
{ "order": "2", "name": ":end:", "showName": "Start time is less than", "control": "DateTimePicker", "controlData ": ""},
{ "order": "3", "name": ":numCircuitID:", "showName": "Circuit ID", "control": "dropdownlist", "controlData": " select numCircuitID,varCircuitName from WD_Circuit" }
],
"show": [
{ "isShow": "1", "name": "numRefID", "showName": "ID" },
{ "isShow": "1", "name": "d1", "showName": "Start Time"},
{ "isShow": "1", "name": "numCircuitID", "showName": "Loop ID"}
]}
dataTable: sql for displaying data on the page
pageType: page type (admin: management page, trend: trend page, query: query statistics page)
condition: query condition: "order" is the condition display order, "name" is the string in the sql statement corresponding to the condition, "showName" is the prompt name of the condition, "control" is the control with appropriate conditions, "controlData" Is the value set of the conditional control
show: table data display: "isShow" whether the column is displayed, "name" the column corresponds to the column name, "showName" the column header displayed in the column

2.2.2 The trend page

json is as follows:
{
"dataTable":"select datBuild,varValue,numColID,numTableID from WD_TableData WHERE datBuild BETWEEN ':start:' and ':end:' numTableID=:numTableID: and numColID=:numColID:;",
"pageType":"trend",
"condition": [
{ "order": "1", "name": ":start:", " showName": "Start Time", "control": "DateTimePicker", "controlData": "" },
{ "order": "2", "name": ":end:", "showName": "End Time", "control": "DateTimePicker", "controlData": ""},
{ "order": "3", "name": ":numTableID:", "showName": "Table ID ", "control": "dropdownlist", "controlData": "select numTableID,varIP from WD_Table" },
{ "order": "4", "name": ":numColID:", "showName": "Column ID", "control": "dropdownlist", "controlData": "select numColID,varCName from WD_Column" }
],
"show": [
{ "isShow": "x" , "name": "datBuild", "showName": "time" },
{ "isShow": "y", "name": "varValue", "showName": "value"},
{ "isShow": "", "name": "numColID", "showName": "Column ID"},
{ "isShow": "", "name": "numColID", "showName": " Table ID"}
]}
dataTable: sql for displaying data on the page
pageType: page type (admin: management page, trend: trend page, query: query statistics page)
condition: query condition : "order" is the condition display order, "name" is the string in the sql statement corresponding to the condition, "showName" is the prompt name of the condition, "control" is the control with appropriate conditions, "controlData" is the value of the condition control Collection
show: tabular data display: "isShow" displays data on the x-axis or y-axis, "name" corresponds to the column name, and "showName" displays the column header

2.2.3 Add and delete search page

The json is as follows:
{
"dataTable":"select * from WD_User",
"pageType":"admin",
"condition" : [
{"order": "1","key":"1","modify":"0","show":"0","name": "numUser", "showName": "User ID", "control": "text", "controlData": ""},
{"order": "2","key":"0","modify":"1"," show":"1","name": "varUserName", "showName": "username", "control": "text", "controlData": ""},
{"order": "3 ","key":"0","modify":"1","show":"1","name": "varLoginName", "showName": "Login Name", "control": "text" , "controlData": ""},
{"order": "4","key":"0","modify":"0","show":"0","name": " varPassword", "showName": "password", "control": "text", "controlData": ""},
{"order": "5","key":"0","modify" :"1","show":"1","name": "datCreate", "showName": "Creation Time", "control": "DateTimePicker", "controlData": ""},
{ "order": "6","key":"0","modify":"1","show":"1","name": "numOrganizeID", "showName": "organization", "control ": "dropdownlist", "controlData": "SELECT numOrganizeId,varOrganizeName from WD_Organize"},
{"order": "7","key":"0","modify":"1","show ":"1","name": "numPositionId", "showName": "Position", "control": "dropdownlist", "controlData": "SELECT numPositionId,varPositionName from WD_Position"}
]}
dataTable: sql for displaying data on the page
pageType: page type (admin: management page, trend: trend page, query: query statistics page)
condition: query condition: "order": control query conditions and query output The display order of the data, "key": whether it is used as the primary key, "modify": controls whether the field is modified during update and insert, "show": whether it is used as a query condition, "name": this parameter As a string of query parameters, "showName": the name of the interface prompt as a parameter of the query condition, "control": the control on the page that can determine the parameter (text box, time box, drop-down box), "controlData": default The sql for the addition and deletion search of the data
page is as follows:
INSERT into WD_User(varUserName,varLoginName,datCreate,numOrganizeID,numPositionID) VALUES(:varUserName:,:varLoginName:,:datCreate:,:numOrganizeID:,:numPositionID:)


UPDATE WD_User SET varUserName=:varUserName:,varLoginName=:varLoginName:,datCreate=:datCreate:,numOrganizeID:numOrganizeID:,numPositionID=:numPositionID: where numUserID=:numUserID:


DELETE from WD_User where numUserID=:numUserID:
3 Interface design 4 System performance design 5 System error handling