From 9641db2d3adc51c2a29f49ed77cbd66f37fa42cb Mon Sep 17 00:00:00 2001
From: GuangrongFu <fu.guangrong@zte.com.cn>
Date: Mon, 30 Jul 2018 17:07:52 +0800
Subject: [PATCH] Optimized Compnents' Layout

Issue-ID: HOLMES-150

Change-Id: I47b398069a976cd3df9a85554c72cc4be75b251f
Signed-off-by: GuangrongFu <fu.guangrong@zte.com.cn>
---
 .../correlation-ruleInfo/ruleInfo.component.html   | 165 +++++++++++----------
 .../correlation-ruleList/alarmRule.component.html  |  93 +++++++-----
 .../correlation-ruleList/alarmRule.component.ts    |   6 +-
 .../assets/framework/browser/css/open-ostyle.css   |   2 +-
 rulemgt-frontend/src/assets/i18n/en.json           |  96 ++++++------
 rulemgt-frontend/src/assets/i18n/zh.json           |  98 ++++++------
 6 files changed, 242 insertions(+), 218 deletions(-)

diff --git a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html
index f5158b9..61535fc 100644
--- a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html
+++ b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html
@@ -13,137 +13,138 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
-<div class="container" style="margin-top: 20px">
+<div class="container-fluid" style="padding: 40px 55px 0 55px">
     <form #ruleForm="ngForm" class="form-group row" (submit)="onSubmit(ruleName)">
         <div class="form-body">
-            <div class="row form-group col-xs-12 ">
-                <label for="userName" class="col-xs-2 col-form-label labelstyle">
-                        <span>{{"field_rule_name_Add_Page"|translate}}</span>
-                        <span style="color: red">*</span>
-                    </label>
-                <div class="col-xs-6" style="margin-left: -100px">
-                    <input class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" style="width: 60%" type="text" name="rulename"
-                        [(ngModel)]="queryRule.ruleName" id="ruleNameInput" readonly="{{addBottonStatus}}" #ruleName="ngModel"
-                        required>
+            <div class="row form-group">
+                <label for="userName" class="col-xs-2 col-sm-1 col-form-label labelstyle">
+                    <span>{{"field_rule_name_Add_Page"|translate}}</span>
+                    <span style="color: red">*</span>
+                </label>
+                <div class="col-xs-5 col-sm-6">
+                    <input class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" type="text" name="rulename" [(ngModel)]="queryRule.ruleName"
+                        id="ruleNameInput" readonly="{{addBottonStatus}}" #ruleName="ngModel" required>
                 </div>
             </div>
 
-            <div class="row form-group col-xs-12">
-                <label for="userName" class="col-xs-2 col-form-label labelstyle">
-                        <span>{{"field_description"|translate}}</span>
-                    </label>
-                <div class="col-xs-6" style="margin-left: -100px">
-                    <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}" style="width: 60%" type="text"
-                        [(ngModel)]="queryRule.loopControlName" name="description">
+            <div class="row form-group">
+                <label for="controlLoopName" class="col-xs-2 col-sm-1 col-form-label labelstyle">
+                    <span>{{"field_controlLoopName"|translate}}</span>
+                    <span style="color: red">*</span>
+                </label>
+                <div class="col-xs-5 col-sm-6">
+                    <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}" type="text" [(ngModel)]="queryRule.loopControlName"
+                        name="controlLoopName" id="controlLoopName" required>
                 </div>
             </div>
 
-            <div class="row form-group col-xs-12">
-                <label for="userName" class="col-xs-2 col-form-label labelstyle">
-                        <span>{{"field_description"|translate}}</span>
-                    </label>
-                <div class="col-xs-6" style="margin-left: -100px">
-                    <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}" style="width: 60%" type="text"
-                        [(ngModel)]="queryRule.description" name="description">
+            <div class="row form-group">
+                <label for="userName" class="col-xs-2 col-sm-1 col-form-label labelstyle">
+                    <span>{{"field_description"|translate}}</span>
+                </label>
+                <div class="col-xs-5 col-sm-6">
+                    <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}" type="text" [(ngModel)]="queryRule.description"
+                        name="description">
                 </div>
             </div>
 
-            <div id="state" class="row form-group col-xs-12">
-                <label class="col-xs-2 col-form-label labelstyle">
-                         <span>{{"common_status"|translate}}</span>
-                     </label>
+            <div id="state" class="row form-group">
+                <label class="col-xs-2 col-sm-1 col-form-label labelstyle">
+                    <span>{{"common_status"|translate}}</span>
+                </label>
 
-                <div class="col-xs-6" style="margin-left: -113px">
-                    <div *ngIf="queryRule.enabled == 0">
-                        <div class="col-xs-3" >
-                            <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'>
-                            <label for="radio1" >{{"common_off"|translate}}</label>
+                <div class="col-xs-10 col-sm-11">
+                    <div class="row">
+                        <div *ngIf="queryRule.enabled == 0">
+                            <div class="col-xs-4 col-sm-2 col-md-1">
+                                <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'>
+                                <label for="radio1">{{"common_off"|translate}}</label>
+                            </div>
+                            <div class="col-xs-4 col-sm-2 col-md-1">
+                                <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='1'>
+                                <label for="radio1" (click)="switch()">{{"common_on"|translate}}</label>
+                            </div>
                         </div>
-                        <div class="col-xs-3" >
-                            <input class="magic-radio" type="radio" name="radio"  [(ngModel)]="queryRule.enabled" value='1'>
-                            <label for="radio1" (click)="switch()">{{"common_on"|translate}}</label>
+                        <div *ngIf="queryRule.enabled == 1">
+                            <div class="col-xs-4 col-sm-2 col-md-1">
+                                <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'>
+                                <label for="radio1" (click)="switch()">{{"common_off"|translate}}</label>
+                            </div>
+                            <div class="col-xs-4 col-sm-2 col-md-1">
+                                <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='1'>
+                                <label for="radio1">{{"common_on"|translate}}</label>
+                            </div>
                         </div>
                     </div>
-                    <div *ngIf="queryRule.enabled == 1">
-                        <div class="col-xs-3" >
-                            <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'>
-                            <label for="radio1" (click)="switch()">{{"common_off"|translate}}</label>
-                        </div>
-                        <div class="col-xs-3" >
-                            <input class="magic-radio" type="radio" name="radio"  [(ngModel)]="queryRule.enabled" value='1'>
-                            <label for="radio1" >{{"common_on"|translate}}</label>
-                        </div>
-                    </div>             
                 </div>
             </div>
 
-            <div class="row form-group col-xs-12">
-                <label for="" class="col-xs-2 col-form-label labelstyle">
-                        <span>{{"common_file"|translate}}</span>
-                    </label>
-                <div class="col-xs-6" style="margin-left: -100px">
+            <div class="row form-group">
+                <label for="" class="col-xs-2 col-sm-1 col-form-label labelstyle">
+                    <span>{{"common_file"|translate}}</span>
+                </label>
+                <div class="col-xs-6 col-sm-7">
                     <div class="btn-group btn-group-circle">
                         <span class="importDivArea mmlBatchBtnBar">
                             <button class="btn btn-info" id="importBtn" disabled="{{addBottonStatus}}">
                                 <span class="ict-import"></span>
-                        <span>{{"import"|translate}}</span>
-                        </button>
-                        <div id="importDiv" class="container upload">
-                            <form id="fileupload" #fileForm="ngForm" role="form" enctype="multipart/form-data">
-                                <div class="file-preview">
-                                    <div id="dropzone" class="file-drop-zone">
-                                        <div class="file-drop-zone-title">
-                                            <span>{{"file_import"|translate}}</span>
+                                <span>{{"import"|translate}}</span>
+                            </button>
+                            <div id="importDiv" class="container upload">
+                                <form id="fileupload" #fileForm="ngForm" role="form" enctype="multipart/form-data">
+                                    <div class="file-preview">
+                                        <div id="dropzone" class="file-drop-zone">
+                                            <div class="file-drop-zone-title">
+                                                <span>{{"file_import"|translate}}</span>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
 
-                                <div class="input-group fileupload-btn">
-                                    <div id="fileName" class="form-control file-caption">task2.zip</div>
-                                    <span class="input-group-btn" id="btnGroup">
+                                    <div class="input-group fileupload-btn">
+                                        <div id="fileName" class="form-control file-caption">task2.zip</div>
+                                        <span class="input-group-btn" id="btnGroup">
                                             <span class="btn btn-primary fileinput-button white radius_s blue1-active" id="browse" data-placement="bottom" data-toggle="tooltip">
                                                 <span class="importBtnFontSize">{{"common_browse"|translate}}</span>
-                                    <input type="file" name="file" title=" " accept=".txt" multiple="">
-                                    </span>
-                                    <button id="fileremove" class="btn btn-default" type="button">
+                                                <input type="file" name="file" title=" " accept=".txt" multiple="">
+                                            </span>
+                                            <button id="fileremove" class="btn btn-default" type="button">
                                                 <span class="importBtnFontSize">{{"common_remove"|translate}}</span>
                                             </button>
-                                    <button id="filesubmit" class="btn btn-default" type="button">{{"common_confirm"|translate}}</button>
-                                    </span>
-                                </div>
+                                            <button id="filesubmit" class="btn btn-default" type="button">{{"common_confirm"|translate}}</button>
+                                        </span>
+                                    </div>
 
-                            </form>
-                        </div>
+                                </form>
+                            </div>
                         </span>
                     </div>
                 </div>
             </div>
 
-            <div class="row form-group col-xs-12">
-                <label for="" class="col-xs-2 col-form-label labelstyle">
-                        <span>{{"message_rule_content"|translate}}</span>
-                        <span style="color: red">*</span>
-                    </label>
-                <div class="col-xs-8" style="margin-left: -100px">
+            <div class="row form-group">
+                <label for="" class="col-xs-2 col-sm-1 col-form-label labelstyle">
+                    <span>{{"message_rule_content"|translate}}</span>
+                    <span style="color: red">*</span>
+                </label>
+                <div class="col-xs-9 col-sm-10">
                     <div class="form-group">
                         <textarea id="cmds" class="form-control" readonly="{{addBottonStatus}}" [(ngModel)]="queryRule.content" name="content" rows="12"
                             cols="80" required placeholder="package example;">
                          </textarea>
-
                     </div>
                 </div>
             </div>
 
-            <div class="row form-group col-xs-12 " style="margin-left: 73px">
-                <div class="col-xs-8 ">
+            <div class="row form-group">
+                <div class="col-xs-8 col-xs-offset-2 col-sm-offset-1">
                     <label class="myclass" id="checkLabel">
                         <button type="button" (click)="checkContent('check')" disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_check"|translate}}</button>
                     </label>
                     <label class="myclass" id="updateLabel">
-                        <button type="button"  disabled="{{addBottonStatus}}" class="btn btn-info" (click)="update()">{{"common_update"|translate}}</button>
+                        <button type="button" disabled="{{addBottonStatus}}" class="btn btn-info" (click)="update()">{{"common_update"|translate}}</button>
                     </label>
                     <label class="myclass" id="saveLabel">
-                        <button type="submit"  disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_save"|translate}}</button>
+                        <button type="submit" disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_save"|translate}}</button>
                     </label>
                     <label class="myclass" id="cancelLabel">
                         <button type="button" routerLink='/alarmRule' class="btn btn-info">{{"common_cancel"|translate}}</button>
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
index 01b7f12..4481e18 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
@@ -13,30 +13,38 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
-<div class="container-fluid" style="padding-top: 20px">
+<div class="container-fluid" style="padding: 40px 40px 0 40px">
     <form class="form-inline">
         <div class="form-body">
             <div class="row form-group col-xs-12">
                 <div class="col-xs-4">
-                    <label class="col-xs-3 control-label" style="padding-top: 8px">
-                        {{"common_status"|translate}}
-                    </label>
-                    <select #selection class="form-control" style="width: 60%" id="status" (change)="switch(selection.value)" [(ngModel)]="activeText"
-                        name="activestatus">
-                      <option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>
-                    </select>
+                    <div class="row">
+                        <label class="col-xs-3 col-md-2 control-label" style="padding-top: 8px">
+                            {{"common_status"|translate}}
+                        </label>
+                        <div class="col-xs-7">
+                            <select #selection class="form-control" id="status" (change)="switch(selection.value)" [(ngModel)]="activeText" name="activestatus"
+                                style="width:100%">
+                                <option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="col-xs-4">
-                    <label for="userName" class="col-xs-3 control-label" style="padding-top: 8px">
-                        <span>{{"common_keyword"|translate}}</span>
-                    </label>
-                    <input class="form-control ng-untouched ng-pristine ng-valid" style="width: 60%" placeholder='{{"field_rule_name_Add_Page"|translate}}'
-                        type="text" [(ngModel)]="ruleModel.ruleName" name="name">
+                    <div class="row">
+                        <label for="userName" class="col-xs-3 control-label" style="padding-top: 8px">
+                            <span>{{"common_keyword"|translate}}</span>
+                        </label>
+                        <div class="col-xs-7">
+                            <input class="form-control ng-untouched ng-pristine ng-valid" placeholder='{{"field_rule_name_Add_Page"|translate}}' type="text"
+                                [(ngModel)]="ruleModel.ruleName" name="name" style="width:100%">
+                        </div>
+                    </div>
                 </div>
 
-                <div class="fmrule_btn_group display_table">
-                    <div class="inline">
+                <div class="fmrule_btn_group display_table col-xs-4">
+                    <div class="inline row">
                         <button id="batchDeleteButton" class="btn btn-primary" (click)="searchRules()">
                             <span class="glyphicon glyphicon-search" style="padding-top: 2px"></span>
                             <span>{{"common_query"|translate}}</span>
@@ -49,14 +57,12 @@
                 </div>
             </div>
 
-            <div class="row form-group col-xs-12" style="margin-top: 10px">
-                <div class="">
-                    <div class="inline">
-                        <button type="button" routerLink='/ruleInfo' class="btn btn-info">
-                    <span class="glyphicon glyphicon-plus"></span>
-                    <span>{{"common_add"|translate}}</span>
+            <div class="row form-group" style="margin-top: 10px">
+                <div class="inline col-xs-12">
+                    <button type="button" routerLink='/ruleInfo' class="btn btn-info">
+                        <span class="glyphicon glyphicon-plus"></span>
+                        <span>{{"common_add"|translate}}</span>
                     </button>
-                    </div>
                 </div>
             </div>
         </div>
@@ -76,30 +82,43 @@
                 </tr>
             </thead>
             <tbody>
+                <tr *ngIf="rules == null || rules.length === 0">
+                    <td colspan="6" style="text-align: center; background-color: white;">{{"nodata"|translate}}</td>
+                </tr>
                 <tr *ngFor="let rule of rules">
-                    <td><a routerLink="/ruleInfo/{{rule.ruleId}}&add">{{rule.rulename}}</a></td>
-                    <td [hidden]="rule.enabled === 1" style="text-align: center"><span value=1><img src="../../assets/thirdparty/images/round_off.png" alt=""></span></td>
-                    <td [hidden]="rule.enabled === 0" style="text-align: center"><span value=0><img src="../../assets/thirdparty/images/round_on.png" alt=""></span></td>
+                    <td>
+                        <a routerLink="/ruleInfo/{{rule.ruleId}}&add">{{rule.rulename}}</a>
+                    </td>
+                    <td [hidden]="rule.enabled === 1" style="text-align: center">
+                        <span value=1>
+                            <img src="../../assets/thirdparty/images/round_off.png" alt="">
+                        </span>
+                    </td>
+                    <td [hidden]="rule.enabled === 0" style="text-align: center">
+                        <span value=0>
+                            <img src="../../assets/thirdparty/images/round_on.png" alt="">
+                        </span>
+                    </td>
                     <td>{{rule.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                     <td>{{rule.creator}}</td>
                     <td>{{rule.updateTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                     <td>
                         <span (click)="updateRule(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                        <img src="../../assets/thirdparty/images/edit.png" alt="">
-                    </span>
+                            <img src="../../assets/thirdparty/images/edit.png" alt="">
+                        </span>
                         <span>
-                        
-                    </span>
-                        <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px"> 
-                        <img src="../../assets/thirdparty/images/on.png" alt="">
-                    </span>
+
+                        </span>
+                        <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
+                            <img src="../../assets/thirdparty/images/on.png" alt="">
+                        </span>
                         <span [hidden]="rule.enabled===0" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                        <img src="../../assets/thirdparty/images/off.png" alt="">
-                    </span>
+                            <img src="../../assets/thirdparty/images/off.png" alt="">
+                        </span>
 
                         <span class="" id={{rule.ruleId}} (click)="delete(rule)" style="cursor: pointer;margin: 0 5px">
-                         <img src="../../assets/thirdparty/images/delete.png" alt="">
-                    </span>
+                            <img src="../../assets/thirdparty/images/delete.png" alt="">
+                        </span>
                     </td>
                 </tr>
             </tbody>
@@ -114,7 +133,7 @@
                 <button class="btn btnDefault btnmrg" data-popmodal-but="ok">
                     <span>{{"common_confirm"|translate}}</span>
                 </button>
-                 <button class="btn btnDefault btnmrg" type="button" data-popmodal-but="cancel">
+                <button class="btn btnDefault btnmrg" type="button" data-popmodal-but="cancel">
                     <span>{{"common_cancel"|translate}}</span>
                 </button>
             </div>
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
index f6329f5..6273e9a 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
@@ -24,9 +24,9 @@ declare var jQuery: any;
 
 @Component({
     selector: 'alarmRule',
-    templateUrl: './alarmRule.component.html',
-
+    templateUrl: './alarmRule.component.html'
 })
+
 export class AlarmRule implements OnInit {
     ruleModel: RuleModel;
     rules: RuleModel[];
@@ -35,7 +35,7 @@ export class AlarmRule implements OnInit {
     ruleName: string;
     enable_on = "enabled";
     enable_off = "disabled"
-    totalcount: number;
+    totalcount: number = 0;
     model: any;
     ruleRequest: RuleRequest;
     solution = 'ANGULAR';
diff --git a/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css b/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css
index 763797a..14d964d 100644
--- a/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css
+++ b/rulemgt-frontend/src/assets/framework/browser/css/open-ostyle.css
@@ -927,7 +927,7 @@ a:hover {
 
 .labelstyle{
     text-align:left;
-    font-size:12px;
+    font-size:14px;
     font-family: "Microsoft Yahei",Arial,Tahoma,Verdana,SimSun;
 }
 
diff --git a/rulemgt-frontend/src/assets/i18n/en.json b/rulemgt-frontend/src/assets/i18n/en.json
index a755c4a..d74c4bb 100644
--- a/rulemgt-frontend/src/assets/i18n/en.json
+++ b/rulemgt-frontend/src/assets/i18n/en.json
@@ -1,50 +1,52 @@
 {
-  "common_status":"Status",
-  "common_keyword":"Keyword",
-  "field_rule_name":"Rule Name",
-  "common_query":"Query",
-  "common_reset":"Reset",
-  "common_add":"Add",
-  "common_total1":"Total ",
-  "common_total2":" Rules",
-  "field_create_time":"Creation Time",
-  "field_creator":"Creator",
-  "field_update_time":"Update Time",
-  "common_operator":"Operations",
-  "common_update":"Update",
-  "common_off":"OFF",
-  "common_on":"ON",
-  "common_delete":"Delete",
-  "message_is_delete":"Are you sure to delete the rule?",
-  "common_cancel":"Cancel",
-  "common_confirm":"Confirm",
-  "option_all":"All",
-  "common_enabled":"Enabled",
-  "common_disabled":"Disabled",
-  "field_description":"Description",
-  "common_check":"Check",
-  "common_save":"Save",
-  "common_file":"File",
-  "import":"Import",
-  "file_import":"Drag & drop files here ...",
-  "common_browse":"Browse",
-  "common_remove":"Remove",
-  "modalTitleDefault":"Add a Rule",
-  "closeBtnTitleDefault":"Close",
-  "modalBodyMessageDefault":"Message Contents",
-  "message_add_rule_success":"The rule is saved successfully.",
-  "exception_content_error":"The contents of the rule are invalid.",
-  "exception_package_error":"The contents of the rule must start with \"package\".",
+  "common_status": "Status",
+  "common_keyword": "Keyword",
+  "field_rule_name": "Rule Name",
+  "common_query": "Query",
+  "common_reset": "Reset",
+  "common_add": "Add",
+  "common_total1": "Total ",
+  "common_total2": " Rules",
+  "field_create_time": "Creation Time",
+  "field_creator": "Creator",
+  "field_update_time": "Update Time",
+  "common_operator": "Operations",
+  "common_update": "Update",
+  "common_off": "OFF",
+  "common_on": "ON",
+  "common_delete": "Delete",
+  "message_is_delete": "Are you sure to delete the rule?",
+  "common_cancel": "Cancel",
+  "common_confirm": "Confirm",
+  "option_all": "All",
+  "common_enabled": "Enabled",
+  "common_disabled": "Disabled",
+  "field_description": "Description",
+  "common_check": "Check",
+  "common_save": "Save",
+  "common_file": "File",
+  "import": "Import",
+  "file_import": "Drag & drop files here ...",
+  "common_browse": "Browse",
+  "common_remove": "Remove",
+  "modalTitleDefault": "Add a Rule",
+  "closeBtnTitleDefault": "Close",
+  "modalBodyMessageDefault": "Message Contents",
+  "message_add_rule_success": "The rule is saved successfully.",
+  "exception_content_error": "The contents of the rule are invalid.",
+  "exception_package_error": "The contents of the rule must start with \"package\".",
   "warn_delete_info": "Only the disabled rules can be deleted.",
-  "message_update_rule_success":"The rule is updated successfully.",
-  "message_engine_error_rule_fail":"Failed to call the interface of the engine management module.",
-  "modalTitleUpdate":"Rule Update",
-  "message_other_exception_rule_fail":"Unknown error. Please contact the administrator.",
-  "message_checkContent_rule_success":"The contents of the rule are valid.",
-  "modalTitleCheck":"Verification",
-  "message_rule_name_repeat_error":"A rule with the same name already exists.",
-  "message_rule_content_repeat_error":"A rule with the same contents already exists.",
-  "message_rule_content":"Rule Contents",
-  "message_rule_update_error":"The rule has not corresponding entity in the engine. Please contact the administrator to remove the rule manually from the database.",
-  "field_rule_name_Add_Page":"Rule Name"
+  "message_update_rule_success": "The rule is updated successfully.",
+  "message_engine_error_rule_fail": "Failed to call the interface of the engine management module.",
+  "modalTitleUpdate": "Rule Update",
+  "message_other_exception_rule_fail": "Unknown error. Please contact the administrator.",
+  "message_checkContent_rule_success": "The contents of the rule are valid.",
+  "modalTitleCheck": "Verification",
+  "message_rule_name_repeat_error": "A rule with the same name already exists.",
+  "message_rule_content_repeat_error": "A rule with the same contents already exists.",
+  "message_rule_content": "Rule Contents",
+  "message_rule_update_error": "The rule has not corresponding entity in the engine. Please contact the administrator to remove the rule manually from the database.",
+  "field_rule_name_Add_Page": "Rule Name",
+  "field_controlLoopName": "Control Loop",
+  "nodata": "No data"
 }
\ No newline at end of file
diff --git a/rulemgt-frontend/src/assets/i18n/zh.json b/rulemgt-frontend/src/assets/i18n/zh.json
index 565c457..0dc1912 100644
--- a/rulemgt-frontend/src/assets/i18n/zh.json
+++ b/rulemgt-frontend/src/assets/i18n/zh.json
@@ -1,50 +1,52 @@
 {
-  "common_status":"状态",
-  "common_keyword":"关键字",
-  "field_rule_name":"规则名称",
-  "common_query":"查询 ",
-  "common_reset":"重置",
-  "common_add":"添加",
-  "common_total1":"共 ",
-  "common_total2":" 条记录",
-  "field_create_time":"创建时间",
-  "field_creator":"创建者",
-  "field_update_time":"修改时间",
-  "common_operator":"操作",
-  "common_update":"修改",
-  "common_off":"禁用",
-  "common_on":"启用",
-  "common_delete":"删除",
-  "message_is_delete":"是否删除",
-  "common_cancel":"取消",
-  "common_confirm":"确认",
-  "option_all":"全部",
-  "common_enabled":"已启用",
-  "common_disabled":"已禁用",
-  "field_description":"描述",
-  "common_check":"校验",
-  "common_save":"保存",
-  "common_file":"文件",
-  "import":"导入",
-  "file_import":"拖放文件到这里 ...",
-  "common_browse":"浏览",
-  "common_remove":"移除",
-  "modalTitleDefault":"规则添加",
-  "closeBtnTitleDefault":"关闭",
-  "modalBodyMessageDefault":"消息体",
-  "message_add_rule_success":"添加成功",
-  "exception_content_error":"规则内容错误",
-  "exception_package_error":"规则必须以package开头",
-  "warn_delete_info":"只能删除处于已停止状态的规则",
-  "message_update_rule_success":"修改成功",
-  "message_exception_rule_fail":"从引擎调用删除规则接口失败",
-  "modalTitleUpdate":"规则修改",
-  "message_other_exception_rule_fail":"发生其他错误",
-  "message_checkContent_rule_success":"规则内容正确",
-  "modalTitleCheck":"验证规则",
-  "message_rule_name_repeat_error":"规则名字重复",
-  "message_rule_content_repeat_error":"规则内容重复",
-  "message_rule_content":"规则内容",
-  "message_rule_update_error":"规则的引擎内容被删了，请联系管理员删除这条规则",
-  "field_rule_name_Add_Page":"规则名称"
+  "common_status": "状态",
+  "common_keyword": "关键字",
+  "field_rule_name": "规则名称",
+  "common_query": "查询 ",
+  "common_reset": "重置",
+  "common_add": "添加",
+  "common_total1": "共 ",
+  "common_total2": " 条记录",
+  "field_create_time": "创建时间",
+  "field_creator": "创建者",
+  "field_update_time": "修改时间",
+  "common_operator": "操作",
+  "common_update": "修改",
+  "common_off": "禁用",
+  "common_on": "启用",
+  "common_delete": "删除",
+  "message_is_delete": "是否删除",
+  "common_cancel": "取消",
+  "common_confirm": "确认",
+  "option_all": "全部",
+  "common_enabled": "已启用",
+  "common_disabled": "已禁用",
+  "field_description": "描述",
+  "common_check": "校验",
+  "common_save": "保存",
+  "common_file": "文件",
+  "import": "导入",
+  "file_import": "拖放文件到这里 ...",
+  "common_browse": "浏览",
+  "common_remove": "移除",
+  "modalTitleDefault": "规则添加",
+  "closeBtnTitleDefault": "关闭",
+  "modalBodyMessageDefault": "消息体",
+  "message_add_rule_success": "添加成功",
+  "exception_content_error": "规则内容错误",
+  "exception_package_error": "规则必须以package开头",
+  "warn_delete_info": "只能删除处于已停止状态的规则",
+  "message_update_rule_success": "修改成功",
+  "message_exception_rule_fail": "从引擎调用删除规则接口失败",
+  "modalTitleUpdate": "规则修改",
+  "message_other_exception_rule_fail": "发生其他错误",
+  "message_checkContent_rule_success": "规则内容正确",
+  "modalTitleCheck": "验证规则",
+  "message_rule_name_repeat_error": "规则名字重复",
+  "message_rule_content_repeat_error": "规则内容重复",
+  "message_rule_content": "规则内容",
+  "message_rule_update_error": "规则的引擎内容被删了，请联系管理员删除这条规则",
+  "field_rule_name_Add_Page": "规则名称",
+  "field_controlLoopName": "控制环",
+  "nodata": "无数据"
 }
\ No newline at end of file
-- 
2.16.6