ページ自動生成ツール design_html/css_WEB-ITnose

ページ自動生成ツールデザイン

1 機能概要

1.1 使用用語

ページ自動生成ツール：クエリ条件やデータ表示をカスタマイズするページ生成ツール

1.2 機能説明

ページ自動生成ツールは、エンジニアのニーズに合わせてクエリ条件やデータ表示方法を定義するツールデータを表とグラフで表示します。クエリ統計ではデータを表で表示し、トレンド ページではグラフでページを表示します。

1.2.1 クエリ統計ページ

クエリ統計ページの設定は以下のとおりです:

「データセットの設定」: クエリ統計全体の完全な SQL ステートメントがデータを表示します。
「クエリ条件設定」: SQL ステートメントを記述した後、「クエリ条件を設定」ボタンをクリックして、SQL ステートメント内のパラメーターを条件設定に組み込みます。このうち、「表示順序」は、生成されるページに条件が表示される順序を決定します。「パラメータ名」は、SQL のパラメータに対応します。「パラメータ表示名」は、クエリ統計ページのパラメータのプロンプト名を決定します。 「コントロール タイプ」は、このパラメータのページ上のコントロール (テキスト ボックス、タイム ボックス、ドロップダウン ボックス) を決定します。コントロール タイプについては、セクション 1.2.4 で説明します。
「表示設定」: SQL によってクエリされたデータのどの列を表示する必要があるかを制御します。 「表示するかどうか」は列を表示するかどうかを制御します。「列名」はデータ列に対応し、「列表示名」は列に表示される列ヘッダーを制御します。
「保存」:「保存」ボタンをクリックして、次回読むためにページ情報をデータベースに保存します。
「プレビュー」: 「プレビュー」をクリックして、上記のページ設定が正しいかどうかを確認します。
最終的に生成されたページ効果は次のとおりです:

その中で、開始時間は選択した時間コントロールより大きい、開始時間は未満、および回線 ID はドロップダウン ボックス コントロールとして選択されます: SELECT numCircuitID, varCircuitName from WD_Circuit;

1.2.2 トレンド ページ

トレンド ページ 設定は以下のとおりです:

"データ セットの設定": クエリ統計表示データ全体の完全な SQL ステートメント。
「クエリ条件設定」: SQL ステートメントを記述した後、「クエリ条件を設定」ボタンをクリックして、SQL ステートメント内のパラメーターを条件設定に組み込みます。このうち、「表示順序」は、生成されるページに条件が表示される順序を決定します。「パラメータ名」は、SQL のパラメータに対応します。「パラメータ表示名」は、クエリ統計ページのパラメータのプロンプト名を決定します。 「コントロール タイプ」は、このパラメータのページ上のコントロール (テキスト ボックス、タイム ボックス、ドロップダウン ボックス) を決定します。コントロール タイプについては、セクション 1.2.4 で説明します。
「表示設定」: SQL によってクエリされたデータのどの列を表示する必要があるかを制御します。 「表示するかどうか」は列を表示するかどうかを制御します。「表示位置」は列を x 軸または y 軸として決定します (x 軸は 1 つだけです)。「列名」はデータ列に対応します。 「列表示名」は、表示されている列を指します。
「保存」:「保存」ボタンをクリックして、次回読むためにページ情報をデータベースに保存します。
「プレビュー」: 「プレビュー」をクリックして、上記のページ設定が正しいかどうかを確認します。
最終的に生成されたページの効果は次のとおりです:

その中で、開始時刻が時間コントロールとして選択され、テーブル ID がドロップダウン ボックス コントロールとして選択されます: select numTableID,varIP from WD_Table; 列 ID は次のとおりです。ドロップダウン ボックス コントロールとして選択: SELECT numColID, varCName from WD_Column;

1.2.3 検索ページの追加と削除

検索の追加と削除ページのデザインは次のとおりです:

"メイン データベース": データ追加および削除検索で操作されるテーブル
「クエリ条件を設定」: このボタンをクリックすると、テーブルのすべてのフィールドに必要な操作データをクエリします。
「設定の変更」: 「表示順序」はクエリ条件とクエリされたデータの表示順序を制御します。「主キー」はテーブルの主キーです。更新 (更新) および削除 ( delete); "「変更」は、更新および挿入中にフィールドが変更されるかどうかを制御します。「クエリ条件」: パラメータがクエリ条件として使用されるかどうかを示します。「パラメータ」は、フィールドに対応するテーブルのフィールドです。クエリ パラメータ名」はクエリ パラメータの文字列です。「パラメータ表示名」はクエリ条件としてのパラメータのインターフェイス プロンプト名です。「コントロール タイプ」はコントロール (テキスト ボックス、タイム ボックス、ドロップダウン) を決定します。ボックス）とページ上のパラメータの制御タイプについては、1.2.4 項で説明します。
「保存」:「保存」ボタンをクリックして、次回読むためにページ情報をデータベースに保存します。
「プレビュー」: 「プレビュー」をクリックして、上記のページ設定が正しいかどうかを確認します。
最終的に生成されるページ効果は次のとおりです:

1.2.4 コントロール タイプ

選択条件を制御する場合のコントロール タイプ: テキスト ボックス、ドロップダウン ボックス、時間コントロール。
テキスト ボックス: デフォルトのコントロール タイプ
ドロップダウン ボックス: ドロップダウン ボックスの表示データを決定する SQL ステートメントを入力します (SELECT numCircuitID,varCircuitName from WD_Circuit;): 最初の列はドロップダウンの値ですボックス、2 列目はドロップダウン ボックスのテキストです
時間制御: 時間の選択に使用されます

2 モジュール設計

2.1 自動ページ生成ツールのモジュール分割

自動ページ生成ツールは、設計をデータベースに保存し、データベース内の設計を読み取り、変更することもでき、他のシステムは、データベース デザインによりページが自動的に生成されます。

2.2 データ関連の設計

ページ自動生成ツールの設計は、最終的にデータを json 形式で保存します

2.2.1 クエリ統計ページ

json は次のとおりです:
{
"dataTable":"select numRefID,datStart d1, WD_CircuitParents からの numCircuitID ここで、datStart BETWEEN ':start:' と ':end:' および numCircuitID=':numCircuitID:'",
"pageType":"query",
"condition": [
{ "order": "1 ", "name ": ":start:", "showName": "開始時刻が次より大きい", "control": "DateTimePicker", "controlData": "" },
{ "order": "2", "name": ": end:", "showName": "開始時間が次未満です", "control": "DateTimePicker", "controlData": ""},
{ "order": "3", "name ": ":numCircuitID:", "showName": "回線 ID", "control": "dropdownlist", "controlData": "WD_Circuit から numCircuitID,varCircuitName を選択" }
],
"show": [
{ " isShow": "1", " name": "numRefID", "showName": "ID" },
{ "isShow": "1", "name": "d1", "showName": "開始時刻" },
{ "isShow": "1", "name": "numCircuitID", "showName": "回線 ID"}
]}
dataTable: ページにデータを表示するための SQL
pageType: ページ タイプ (管理者:管理ページ、トレンド: トレンドページ、クエリ: クエリ統計ページ)
条件: クエリ条件: "order" は条件の表示順序、"name" は条件に対応する SQL ステートメント内の文字列、"showName" は条件のプロンプト名、「control」は適切な条件を持つコントロール、「controlData」は条件付きコントロールの値セットです
show: table data display: "isShow" 列が表示されるかどうか、「name」 列が対応する

2.2.2 トレンド ページ

の json で表示される列ヘッダーを列名「showName」に追加すると、
{
"dataTable":"select datBuild,varValue,numColID,numTableID from WD_TableData WHERE datBuild BETWEEN ' :start:' および ':end:' numTableID=:numTableID: および numColID=:numColID:;",
"pageType":"trend",
"condition": [
{ "order": "1", " name": ":start:", "showName": "開始時刻", "control": "DateTimePicker ", "controlData": "" },
{ "order": "2", "name": ": end:", "showName": "終了時刻", "control": "DateTimePicker", "controlData" : ""},
{ "order": "3", "name": ":numTableID:", " showName": "TableID", "control": "dropdownlist", "controlData": "WD_Table から numTableID、varIP を選択" },
{ "order": "4", "name": ":numColID:", " showName": "列 ID", "control": "dropdownlist", "controlData": "WD_Column から numColID ,varCName を選択" }
],
"show": [
{ "isShow": "x", "name ": "datBuild", "showName": "時間" },
{ "isShow": "y ", "name": "varValue", "showName": "値" },
{ "isShow": "" , "name": "numColID", "showName": "列 ID"},
{ "isShow" ": "", "name": "numColID", "showName": "テーブル ID"}
]}
dataTable: ページ上にデータを表示するためのSQL
pageType: ページの種類 (admin: 管理ページ、trend: トレンドページ、query: クエリ統計ページ)
condition: クエリ条件: "order" は条件の表示順序、"name" は条件に対応する SQL ステートメント内の文字列、「showName」は条件のプロンプト名、「control」は適切な条件コントロール、「controlData」は条件付きコントロールの値セットです
show: 表形式データ表示: "isShow " は x 軸または y 軸にデータを表示し、"name" は列名に対応し、"showName" は列の列ヘッダーを表示します

2.2.3 検索ページの追加と削除

jsonは次のとおりです:
{
"dataTable":"select * from WD_User",
"pageType":"admin",
"condition": [
{"order" : "1"、"key":"1"、"modify":"0"、"show":"0"、"name": "numUser"、"showName": "ユーザー ID"、"control": "text", " controlData": ""},
{"order": "2","key":"0","modify":"1","show":"1","name": "varUserName", " showName": "ユーザー名", "control": "text", "controlData": ""},
{"order": "3","key":"0","modify" :"1", "show":"1","name": "varLoginName", "showName": "ログイン名", "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": "作成時刻", "control": "DateTimePicker", "controlData": ""},
{"order": "6","key":"0","modify" :"1", "show":"1","name": "numOrganizeID", "showName": "organization", "control": "dropdownlist", "controlData": "WD_Organize から numOrganizeId,varOrganizeName を選択"} ,
{"order ": "7","key":"0","modify":"1","show":"1","name": "numPositionId", "showName": "Position" , "control": "dropdownlist", "controlData": "SELECT numPositionId,varPositionName from WD_Position"}
]}
dataTable: ページ上にデータを表示するための SQL
pageType: ページの種類 (admin: 管理ページ、trend: トレンドページ) 、クエリ: クエリ統計ページ)
条件: クエリ条件: "order": クエリ条件とクエリされたデータの表示順序を制御します。 "key": 主キーとして使用するかどうか、"modify": クエリを実行するかどうかを制御します。更新 (update) および挿入 (insert) 中にフィールドを変更します。 "show": クエリ条件として使用するかどうか、 "name": クエリ パラメーターとしてこのパラメーターの文字列、 "showName": インターフェイス プロンプト名クエリ条件としてのパラメータ、「control」：パラメータを決定できるページ上のコントロール（テキストボックス、タイムボックス、ドロップダウンボックス）、「controlData」：デフォルトデータ
ページの追加・削除検索SQLは以下の通り
INSERT into WD_User(varUserName,varLoginName,datCreate,numOrganizeID,numPositionID) VALUES(:varUserName:,:varLoginName:, :datCreate:,:numOrganizeID:,:numPositionID:)


UPDATE WD_UserName=:varUse r名前: ,varLoginName=:varLoginName:,datCreate=:datCreate:,numOrganizeID:numOrganizeID:,numPositionID=:numPositionID: where numUserID=: numUserID:


DELETE from WD_User where numUserID=:numUserID:
3 インターフェース設計 4 システムパフォーマンス設計 5システムエラー処理