Fix instance instantiation for CCVPN

Change-Id: I0f9eefab631fabfaf8ea73f35a65a505e91b5bdf
Issue-ID: USECASEUI-220
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

8 files changed, 832 insertions, 383 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
index 35fdbef5..54b92d03 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css
@@ -25,80 +25,125 @@ hr {
     margin-bottom: 10px;
 }
 .model {
-    background-color: #fff;
-    height: 90%;
+    background-color: #F7F8FC;
+    /*height: 100%;*/
     overflow-y: auto;
 }
+.creation-model{
+    position: relative;
+}
+.top-title{ /*2019.01.22 add*/
+    width: 100%;
+    padding: 20px;
+    position: relative;
+    display: inline-block;
+}
 .model .back {
     position: absolute;
     top: 10px;
     right: 20px;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important;
+    border-radius:4px;
+    color: #fff;
+    border: none!important;
+    border-color:rgba(0,0,0,0)!important;
+}
+.top-title h3.title {
+    height: 35px;
+    width: 80%;
+    /*font: 700 20px/20px "Arial";*/
+    font-size:16px;
+    font-family:ArialMT;
+    color:#3C4F8C;
+    line-height:35px;
+    display: inline-block;
+    /*top:10px;*/
+
+}
+.model .submit{
+    position: absolute;
+    width:84px;
+    height: 35px;
+    top: 10px;
+    right: 85px;
+    color: #fff;
+    font-size: 18px;
+    background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important;
+    border-radius:4px;
+    border: none!important;
+    border-color:rgba(0,0,0,0)!important;
+}
+.model .submit:hover,.model .back:hover,.model .site>button:hover,.model .sitegroup>button:hover{
+    background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+    border: none;
 }
 .model .creation {
-    position: relative;
-    width: 60%;
-    height: 100%;
+    width: 100%;
+    /*height: 60vh;*/
     overflow-y: auto;
     border-radius: 5px;
     padding: 15px;
 }
-.model .creation h3.title {
-    height: 20px;
-    font: 700 20px/20px "Arial";
-    color: #666;
-}
 .model .creation h3 {
     height: 20px;
     font: 700 16px/20px "Arial";
     margin: 5px 0px;
     color: #000;
 }
-.model .creation .submit {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-}
 /* SOTN VPN */
 .model .creation .sotnvpn ul li {
     display: inline-block;
-    height: 35px;
-    width: 49.5%;
+    height: 40px;
+    width: 24.5%;
+    margin-bottom: 40px;
 }
 .model .creation .sotnvpn ul li span {
     display: inline-block;
     width: 110px;
     font: 700 14px "Arial";
-    color: #3fa8eb;
+    color: #3C4F8C;
     vertical-align: middle;
 }
 .model .creation .sotnvpn ul li input {
-    width: 165px;
+    width: 234px;
+    height: 40px;
+    border-radius:4px;
+    outline: none;
 }
 /* Site List */
 /* addsite model */
 .model .sitemodel {
     position: absolute;
-    z-index: 10;
-    left: 10px;
+    z-index: 1001;
+    left: 100px;
     top: 60px;
     background-color: #fff;
-    box-shadow: 0px 0px 20px #000;
-    width: 60%;
+    /*box-shadow: 0px 0px 20px #000;*/
+    width:650px;
+    /*width:1300px;px*/
     max-height: 90%;
-    border-radius: 5px;
+    border-radius:2px;
     overflow-y: auto;
 }
-.model .sitemodel h3 {
-    height: 30px;
-    font: 700 16px/30px "Arial";
-    border-bottom: 1px solid #aaa;
-    padding-left: 10px;
-}
-.model .sitemodel h4 {
-    height: 30px;
-    font: 700 16px/30px "Arial";
-    padding-left: 10px;
-    background-color: #ddd;
+.model .sitemodel h3,.sitegroupmodal>h3{
+    width: 92%;
+    height: 40px;
+    line-height: 35px;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 10px auto;
+    /*padding-left: 10px;*/
+    color: #06A7E2;
+    /*color: #ffffff;*/
+    /*background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);*/
+    border-bottom: 2px solid;
+    border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100;
+    border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100;
+    border-image: linear-gradient(#07A9E1,#30D9C4) 100 100;
+    border-radius:2px;
 }
 .model .sitemodel .inputs {
     padding: 10px 20px 0;
@@ -106,21 +151,46 @@ hr {
 .model .sitemodel .inputs ul li {
     display: inline-block;
     height: 35px;
+    line-height: 35px;
     width: 49.5%;
 }
 .model .sitemodel .inputs ul li span {
     display: inline-block;
-    width: 110px;
-    font: 700 14px "Arial";
-    color: #3fa8eb;
+    line-height: 35px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #3C4F8C;
+    margin-left: 10px;
     vertical-align: middle;
+    float: left;
 }
-.model .sitemodel .inputs input {
-    width: 165px;
+.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select {
+    width: 156px;
+    float: right;
+    margin-right: 30px;
 }
 .model .sitemodel .action {
-    float: left;
-    padding: 10px;
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 20px;
+}
+
+.model .sitemodel .action button{
+    width: 126px;
+    height:40px;
+    background:#EEEEEE;
+    border-radius:2px;
+    border: none!important;
+    color: #9DA7C5;
+    font-size: 16px;
+    margin: 0 15px;
+}
+.model .sitemodel .action button:nth-child(2),.sitemodel h3 button{
+    background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
+    color: #fff;
+}
+.model .sitemodel .action button:nth-child(2):hover,.sitemodel h3 button:hover{
+    background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
 }
 
 .model nz-table tbody td i.anticon:hover {
@@ -129,6 +199,24 @@ hr {
 }
 
 /* site table */
+.model .site>button,.model .sitegroup>button,.sitemodel h3>button{
+    width:36px;
+    height:36px;
+    color: #fff;
+    background:linear-gradient(270deg,rgba(63,156,255,1) 0%,rgba(98,193,246,1) 100%);
+    border-radius:4px;
+    border: none!important;
+}
+.sitemodel h3>button{
+    float: right;
+    width: 30px;
+    height: 30px;
+    margin-right: 15px;
+}
+.model nz-table tbody th{
+    color:rgba(60,79,140,0.5);
+    font-size: 16px;
+}
 .model .site nz-table tbody td i.anticon:hover {
     color: #3fa8eb;
     cursor: pointer;
@@ -136,49 +224,75 @@ hr {
 /* WAN Port */
 
 /* Site Group List */
-.model .sitegroup .sitegroupmodal {
+
+.model .sitegroupmodal {
     position: absolute;
-    z-index: 10;
-    left: 200px;
-    top: 300px;
-    background-color: #fff;
-    box-shadow: 0px 0px 20px #000;
-    width: 330px;
-    border-radius: 5px;
+    z-index: 1001;
+    width: 360px!important;
+    height: 376px!important;
+    left:35%;
+    top:40%;
+    margin-top: -188px;
+    margin-left: -180px;
+    background: #ffffff;
 }
-.model .sitegroup .sitegroupmodal h3 {
-    height: 30px;
-    font: 700 16px/30px "Arial";
-    border-bottom: 1px solid #aaa;
-    padding-left: 10px;
+.sitegroupmodal .list-div{
+    width: 100%;
+    height: 32px !important;
+    line-height: 32px;
+    margin-bottom: 10px;
 }
-.model .sitegroup .sitegroupmodal .inputs {
-    padding: 10px 20px 0;
+.sitegroupmodal .list-div > span {
+    line-height: 32px !important;
+    color: #3C4F8C;
+    margin-left: 30px;
 }
-.model .sitegroup .sitegroupmodal span {
-    display: inline-block;
-    width: 100px;
-    margin-bottom: 10px;
+.sitegroupmodal .list-div input, .sitegroupmodal .list-div nz-select {
+    margin-right: 50px;
 }
-.model .sitegroup .sitegroupmodal .inputs input {
-    width: 165px;
+.sitegroupmodal .action{
+    text-align: center;
+    margin-top: 30px;
 }
-.model .sitegroup .sitegroupmodal .action {
-    float: right;
-    padding: 10px;
+.sitegroupmodal .action button{
+    width: 126px;
+    height:40px;
+    background:#EEEEEE;
+    border-radius:2px;
+    border: none!important;
+    color: #9DA7C5;
+    font-size: 16px;
+    margin: 0 8px;
+}
+.sitegroupmodal .action button:nth-child(2){
+    background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
+    color: #fff;
+}
+.sitegroupmodal .action button:nth-child(2):hover{
+    background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+}
+.mask{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.65);
+    top:0;
 }
 
 
-/* 图 */
+/* chart */
 .model .chart {
-    width: 40%;
+    width: 100%;
     padding: 10px;
-    height: 100%;
+    /*height: 30vh;*/
     border-left: 10px solid #f3f3f3;
+    margin-bottom: 30px;
+    box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);
 }
 .model .chart #createChart {
     width: 100%;
-    height: 80%;
+    /*height: 50vh;*/
     margin-top: 20px;
     position: relative;
 }
@@ -193,3 +307,7 @@ hr {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{
+    background: #fff;
+    padding: 30px;
+}
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
index 15486238..1b54b7bc 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -13,301 +13,361 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> Services List </h3>
-<hr>
-<div class="model">
-  <!-- 创建数据 -->
-  <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
-  <div class="creation fl">
-      <h3 class="title">{{createParams.commonParams.templateType}} Instance Creation</h3>
-      <div class="sotnvpn clearfix">
-        <h3>SOTN VPN Info</h3>
-        <ul>
-          <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
-          <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
-          <li><span>Start Time:</span> 
-            <nz-date-picker [(ngModel)]="sotnInfo.startTime" 
-              (ngModelChange)="startTimeChange($event)"
-              nzPlaceHolder="start time"
-              nzShowTime>
-            </nz-date-picker>
-          </li>
-          <li><span>End Time:</span> 
-            <nz-date-picker [(ngModel)]="sotnInfo.endTime" 
-              (ngModelChange)="endTimeChange($event)"
-              nzPlaceHolder="end time"
-              nzShowTime>
-            </nz-date-picker>
-          </li>
-          <li><span>COS:</span> 
-            <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
-              <nz-option nzValue="premium" nzLabel="premium"></nz-option>
-              <nz-option nzValue="standard" nzLabel="standard"></nz-option>
-            </nz-select>
-          </li>
-          <li><span>Reroute Enabled:</span> <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch> </li>
-          <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
-          <li><span>Dual Link:</span>
-             <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.dualLink" nzAllowClear nzPlaceHolder="Choose">
-              <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
-              <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
-              <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
-            </nz-select> 
-          </li>
-          <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
-          <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
-          <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
-          <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
-          <li><span>Color Aware:</span> <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch> </li>
-          <li><span>Coupling Flag:</span> <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch> </li>
-        </ul>
-      </div>
-    
-      <div class="site">
-        <h3>Site List</h3>
-        <button nz-button (click)="addSite()">Add Site</button>
-        <nz-table #siteTable [nzData]="siteTableData"  
-          [nzShowPagination]="false"
-          nzSize="small">
-          <thead>
-            <tr>
-              <th nzWidth="10%"> NO. </th>
-              <th nzWidth="15%"> Name </th>
-              <th nzWidth="15%"> Description </th>
-              <th nzWidth="15%"> Post Code </th>
-              <th nzWidth="15%"> Address </th>
-              <th nzWidth="15%"> VLAN </th>
-              <th nzWidth="15%"> Action </th>
-            </tr>
-          </thead>
-          <tbody>
-              <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
-              <tr *ngFor="let item of siteTable.data; let i = index; ">
-                  <td>{{i+1}}</td>
-                  <td>{{item.baseData.name}}</td>
-                  <td>{{item.baseData.description}}</td>
-                  <td>{{item.baseData.postcode}}</td>
-                  <td>{{item.baseData.address}}</td>
-                  <td>{{item.baseData.vlan}}</td>
-                  <td>
-                      <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
-                      <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
-                  </td>
-              </tr>
-              <!-- </ng-template> -->
-          </tbody>
-        </nz-table>
-      </div>
- 
-      <div class="sitegroup" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
-        <h3>Site_Group List</h3>
-        <button nz-button (click)="addSiteGroup()">Add Group</button>
-        <div class="sitegroupmodal" *ngIf="siteGroupModelShow">
-          <h3>Site_Group</h3>
-          <div class="inputs">
-            <span>Group Name:</span> <input nz-input [(ngModel)]="siteGroupModelData.name"> <br>
-            <span>Topology:</span>
-            <nz-select style="width: 165px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear nzPlaceHolder="Choose">
-              <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
-              <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
-            </nz-select>
-            <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading" [nzShowPagination]="false" nzSize="small">
-              <thead>
-                <tr>
-                  <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"  (nzCheckedChange)="groupModal_checkAll($event)"></th>
-                  <th> Site Name</th>
-                  <th> Role</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr *ngFor="let item of groupModalTable.data; let i = index;">
-                  <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus($event)"></td>
-                  <td>{{ item.siteName }}</td>
-                  <td>
-                    <nz-select style="width: 80px;" [(ngModel)]="item.role" 
-                      nzAllowClear nzPlaceHolder="Choose" 
-                      [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
-                      <nz-option nzValue="hub" nzLabel="hub"></nz-option>
-                      <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
-                    </nz-select> 
-                  </td>
-                </tr>
-              </tbody>
-            </nz-table>
-          </div>
-          <div class="action">
-            <button nz-button nzType="primary" (click)="addsitegroup_OK()">OK</button> 
-            <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
-          </div>  
-        </div>
-        <nz-table #siteGroupTable [nzData]="siteGroupTableData"  
-          [nzLoading]="loading"
-          [nzShowPagination]="false"
-          nzSize="small">
-          <thead>
-            <tr>
-              <th nzWidth="10%"> NO. </th>
-              <th nzWidth="20%"> Group Name </th>
-              <th nzWidth="20%"> Topology </th>
-              <th nzWidth="20%"> Sites </th>
-              <th nzWidth="15%"> Role </th>
-              <th nzWidth="15%"> Action </th>
-            </tr>
-          </thead>
-          <tbody>
-              <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
-              <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
-                  <td>{{i+1}}</td>
-                  <td>{{item.name}}</td>
-                  <td>{{item.topology}}</td>
-                  <td>{{item.sites}}</td>
-                  <td>{{item.role}}</td>
-                  <td>
-                      <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
-                      <span class="action" (click)="deleteGroupSite(i+1)"><i class="anticon anticon-delete"></i></span>
-                  </td>
-              </tr>
-              <!-- </ng-template> -->
-          </tbody>
-        </nz-table>
-      </div>
+<!--<h3 class="title"> Services List </h3>-->
+<!--<hr>-->
+<div class="model creation-model">
+    <!-- 创建数据 -->
+   <div class="top-title">
+       <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3>
+       <div class="fl" style="width: 20%">
+           <button class="submit" nz-button  (click)="submit()"><span>Create</span></button>
+           <button class="back" nz-button (click)="goback()">
+               <span>
+               <i nz-icon type="rollback" theme="outline" >
+                   <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="rollback" aria-hidden="true" style="transform: scaleX(1.7) scaleY(-1.1) translate(-2px)"><path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 0 0 0 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path></svg>
+               </i>
+           </span>
+           </button>
+       </div>
+   </div>
+    <!-- 图 -->
+    <div class="chart">
+        Create Service
+        {{createParams.commonParams.templateType}}
+        <div id="createChart">
+            <svg width="100%" height="100%">
+                <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%"
+                      style="stroke:#3fa8eb;stroke-width:2"/>
+                <image xlink:href="./assets/images/cloud-site.png"
+                       x="25%" y="30%" width="50%"/>
+                <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
+                <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
+                <g *ngFor="let item of siteImage"
+                   (mouseover)="showSite($event,item)"
+                   (mousemove)="moveSite($event,item)"
+                   (mouseout)="hideSite($event)">
+                    <image
+                            xlink:href="./assets/images/site.png"
+                            [attr.x]="item.x" y="65%" width="80px"/>
+                    <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}
+                    </text>
+                </g>
 
-      <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
-  </div>
-  <!-- site模态框 -->
-  <div class="sitemodel" *ngIf="siteModelShow">
-    <h3>Site_Enterprise Service</h3>
-    <div class="inputs">
-      <ul>
-        <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
-        <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
-        <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span> 
-          <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.type" nzAllowClear nzPlaceHolder="Choose">
-              <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
-              <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
-          </nz-select>
-        </li>
-        <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span> 
-          <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.role" nzAllowClear nzPlaceHolder="Choose">
-              <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
-              <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
-          </nz-select>
-        </li>
-        <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
-        <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
-        <li><span>Address:</span>
-          <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.address" nzAllowClear nzPlaceHolder="Choose">
-            <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}" nzLabel="{{item}}"></nz-option>
-          </nz-select>
-        </li> 
-      </ul>
+            </svg>
+            <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
+        </div>
     </div>
-    <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
-      <h4>CPE</h4>
-      <div class="inputs">
-        <ul>
-          <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
-          <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
-          <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
-          <li><span>Class:</span> 
-            <nz-select style="width: 165px;" [(ngModel)]="siteCpeData.device_class" nzAllowClear nzPlaceHolder="Choose">
-                <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
-                <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
-            </nz-select>
-          </li>
-          <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
-          <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
-          <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
-        </ul>
-      </div>
-      <h4>WAN Port</h4>
-      <div>
-        <nz-table #siteModalTable [nzData]="siteWanData"  
-          [nzLoading]="loading"
-          [nzShowPagination]="false"
-          nzSize="small">
-          <thead>
-            <tr>
-              <th nzWidth="10%"> NO. </th>
-              <th nzWidth="15%"> Name </th>
-              <th nzWidth="15%"> Description </th>
-              <th nzWidth="15%"> PortType </th>
-              <th nzWidth="18%"> PortNumber </th>
-              <th nzWidth="17%"> IPAddress </th>
-              <th nzWidth="10%"> Action </th>
-            </tr>
-          </thead>
-          <tbody>
-              <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
-              <tr *ngFor="let item of siteModalTable.data; let i = index; ">
-                  <td>{{i+1}}</td>
-                  <td>{{item.sitewanport_name}}</td>
-                  <td>{{item.sitewanport_description}}</td>
-                  <td>{{item.sitewanport_portType}}</td>
-                  <td>{{item.sitewanport_portNumber}}</td>
-                  <td>{{item.sitewanport_ipAddress}}</td>
-                  <td>
-                      <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
-                  </td>
-              </tr>
-              <!-- </ng-template> -->
-          </tbody>
-        </nz-table>            
-      </div>
-      <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit" (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
-        <ul class="wanPortModalList">
-          <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
-          <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
-          <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description"></li>
-          <li><span>Port Type:</span> 
-            <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear nzPlaceHolder="Choose">
-                <nz-option nzValue="GE" nzLabel="GE"></nz-option>
-                <nz-option nzValue="FE" nzLabel="FE"></nz-option>
-                <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
-                <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
-                <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
-                <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
-            </nz-select>
-          </li>
-          <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber"></li>
-          <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
-          <li><span>Provider IP Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress"></li>
-          <li><span>Transport Nerwork:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName"></li>
-          <li><span>Input Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth"></li>
-          <li><span>Output Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth"></li>
-        </ul>
-      </nz-modal>
+    <div class="creation">
+        <nz-tabset [nzTabPosition]="'top'"   [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
+            <nz-tab nzTitle="SOTN VPN Info">
+                <div class="sotnvpn clearfix">
+                    <!--<h3>SOTN VPN Info</h3>-->
+                    <ul>
+                        <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
+                        <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
+                        <li><span>Start Time:</span>
+                            <nz-date-picker [(ngModel)]="sotnInfo.startTime"
+                                            (ngModelChange)="startTimeChange($event)"
+                                            nzPlaceHolder="start time"
+                                            nzShowTime>
+                            </nz-date-picker>
+                        </li>
+                        <li><span>End Time:</span>
+                            <nz-date-picker [(ngModel)]="sotnInfo.endTime"
+                                            (ngModelChange)="endTimeChange($event)"
+                                            nzPlaceHolder="end time"
+                                            nzShowTime>
+                            </nz-date-picker>
+                        </li>
+                        <li><span>COS:</span>
+                            <nz-select style="width: 234px;height: 40px" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
+                                <nz-option nzValue="premium" nzLabel="premium"></nz-option>
+                                <nz-option nzValue="standard" nzLabel="standard"></nz-option>
+                            </nz-select>
+                        </li>
+                        <li><span style="width: 130px">Reroute Enabled:</span>
+                            <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch>
+                        </li>
+                        <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
+                        <li><span>Dual Link:</span>
+                            <nz-select style="width: 234px;height: 40px" [(ngModel)]="sotnInfo.dualLink" nzAllowClear
+                                       nzPlaceHolder="Choose">
+                                <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
+                                <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
+                                <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
+                            </nz-select>
+                        </li>
+                        <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
+                        <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
+                        <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
+                        <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
+                        <li><span>Color Aware:</span>
+                            <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch>
+                        </li>
+                        <li><span style="width: 130px">Coupling Flag:</span>
+                            <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch>
+                        </li>
+                    </ul>
+                </div>
+            </nz-tab>
+            <nz-tab nzTitle="Site List">
+                <div class="site">
+                    <!--<h3>Site List</h3>-->
+                    <button nz-button (click)="addSite()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
+                    <nz-table #siteTable [nzData]="siteTableData"
+                              [nzShowPagination]="false"
+                              nzSize="small">
+                        <thead>
+                        <tr>
+                            <th nzWidth="10%"> NO.</th>
+                            <th nzWidth="15%"> Name</th>
+                            <th nzWidth="15%"> Description</th>
+                            <th nzWidth="15%"> Post Code</th>
+                            <th nzWidth="15%"> Address</th>
+                            <th nzWidth="15%"> VLAN</th>
+                            <th nzWidth="15%"> Action</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
+                        <tr *ngFor="let item of siteTable.data; let i = index; ">
+                            <td>{{i+1}}</td>
+                            <td>{{item.baseData.name}}</td>
+                            <td>{{item.baseData.description}}</td>
+                            <td>{{item.baseData.postcode}}</td>
+                            <td>{{item.baseData.address}}</td>
+                            <td>{{item.baseData.vlan}}</td>
+                            <td>
+                                <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
+                                <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
+                            </td>
+                        </tr>
+                        <!-- </ng-template> -->
+                        </tbody>
+                    </nz-table>
+                </div>
+            </nz-tab>
+            <nz-tab nzTitle="Site_Group List" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+                <div class="sitegroup" >
+                    <!--<h3>Site_Group List</h3>-->
+                    <button nz-button (click)="addSiteGroup()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
+                    <nz-table #siteGroupTable [nzData]="siteGroupTableData"
+                              [nzLoading]="loading"
+                              [nzShowPagination]="false"
+                              nzSize="small">
+                        <thead>
+                        <tr>
+                            <th nzWidth="10%"> NO.</th>
+                            <th nzWidth="20%"> Group Name</th>
+                            <th nzWidth="20%"> Topology</th>
+                            <th nzWidth="20%"> Sites</th>
+                            <th nzWidth="15%"> Role</th>
+                            <th nzWidth="15%"> Action</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
+                        <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
+                            <td>{{i+1}}</td>
+                            <td>{{item.name}}</td>
+                            <td>{{item.topology}}</td>
+                            <td>{{item.sites}}</td>
+                            <td>{{item.role}}</td>
+                            <td>
+                                <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span>
+                                &nbsp;
+                                <span class="action" (click)="deleteGroupSite(i+1)"><i
+                                        class="anticon anticon-delete"></i></span>
+                            </td>
+                        </tr>
+                        <!-- </ng-template> -->
+                        </tbody>
+                    </nz-table>
+                </div>
+            </nz-tab>
+        </nz-tabset>
     </div>
+    <!-- site模态框 -->
+    <div class="sitemodel" *ngIf="siteModelShow">
+        <h3>Site_Enterprise Service</h3>
+        <div class="inputs">
+            <ul>
+                <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
+                <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
+                <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span>
+                    <nz-select  [(ngModel)]="siteBaseData.type" nzAllowClear
+                               nzPlaceHolder="Choose">
+                        <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
+                        <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
+                    </nz-select>
+                </li>
+                <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span>
+                    <nz-select  [(ngModel)]="siteBaseData.role" nzAllowClear
+                               nzPlaceHolder="Choose">
+                        <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
+                        <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
+                    </nz-select>
+                </li>
+                <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
+                <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
+                <li><span>Address:</span>
+                    <nz-select  [(ngModel)]="siteBaseData.address" nzAllowClear
+                               nzPlaceHolder="Choose">
+                        <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}"
+                                   nzLabel="{{item}}"></nz-option>
+                    </nz-select>
+                    <!--<input nz-input [(ngModel)]="siteBaseData.address">-->
+                </li>
+            </ul>
+        </div>
+        <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+            <h3>CPE</h3>
+            <div class="inputs">
+                <ul>
+                    <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
+                    <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
+                    <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
+                    <li><span>Class:</span>
+                        <nz-select  [(ngModel)]="siteCpeData.device_class" nzAllowClear
+                                   nzPlaceHolder="Choose">
+                            <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
+                            <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
+                        </nz-select>
+                    </li>
+                    <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
+                    <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
+                    <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
+                </ul>
+            </div>
+            <h3>WAN Port
+                <button nz-button ><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
+            </h3>
+            <div>
+                <nz-table #siteModalTable [nzData]="siteWanData"
+                          [nzLoading]="loading"
+                          [nzShowPagination]="false"
+                          nzSize="small">
+                    <thead>
+                    <tr>
+                        <th > NO.</th>
+                        <th> Name</th>
+                        <th > Description</th>
+                        <th > PortType</th>
+                        <th > PortNumber</th>
+                        <th > IPAddress</th>
+                        <!--<th > Provider IP Address</th>-->
+                        <!--<th > Transport Nerwork</th>-->
+                        <!--<th > Input Bandwidth</th>-->
+                        <!--<th > Output Bandwidth</th>-->
+                        <th > Action</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+                    <tr *ngFor="let item of siteModalTable.data; let i = index; ">
+                        <td>{{i+1}}</td>
+                        <td>{{item.sitewanport_name}}</td>
+                        <td>{{item.sitewanport_description}}</td>
+                        <td>{{item.sitewanport_portType}}</td>
+                        <td>{{item.sitewanport_portNumber}}</td>
+                        <td>{{item.sitewanport_ipAddress}}</td>
+                        <td>
+                            <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
+                        </td>
+                    </tr>
+                    <!-- </ng-template> -->
+                    </tbody>
+                </nz-table>
+            </div>
+            <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit"
+                      (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
+                <ul class="wanPortModalList">
+                    <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
+                    <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
+                    <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description">
+                    </li>
+                    <li><span>Port Type:</span>
+                        <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear
+                                   nzPlaceHolder="Choose">
+                            <nz-option nzValue="GE" nzLabel="GE"></nz-option>
+                            <nz-option nzValue="FE" nzLabel="FE"></nz-option>
+                            <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
+                            <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
+                            <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
+                            <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
+                        </nz-select>
+                    </li>
+                    <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber">
+                    </li>
+                    <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
+                    <li><span>Provider IP Address:</span> <input nz-input
+                                                                 [(ngModel)]="siteWanParams.sitewanport_providerIpAddress">
+                    </li>
+                    <li><span>Transport Nerwork:</span> <input nz-input
+                                                               [(ngModel)]="siteWanParams.sitewanport_transportNetworkName">
+                    </li>
+                    <li><span>Input Bandwidth:</span> <input nz-input
+                                                             [(ngModel)]="siteWanParams.sitewanport_inputBandwidth">
+                    </li>
+                    <li><span>Output Bandwidth:</span> <input nz-input
+                                                              [(ngModel)]="siteWanParams.sitewanport_outputBandwidth">
+                    </li>
+                </ul>
+            </nz-modal>
+        </div>
 
-    <div class="action">
-      <button nz-button nzType="primary" (click)="addsite_OK()">OK</button> 
-      <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
-    </div>  
-  </div>
-  <!-- 图 -->
-  <div class="chart fr">
-      Create Service
-      {{createParams.commonParams.templateType}}
-      <div id="createChart">
-        <svg width="100%" height="100%">
-          <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%" style="stroke:#3fa8eb;stroke-width:2"/>
-          <image xlink:href="./assets/images/cloud-site.png"
-                  x="25%" y="30%"  width="50%"/> 
-          <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
-          <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
-          <g *ngFor="let item of siteImage"
-            (mouseover)="showSite($event,item)"
-            (mousemove)="moveSite($event,item)"
-            (mouseout)="hideSite($event)">
-            <image  
-              xlink:href="./assets/images/site.png" 
-              [attr.x]="item.x" y="65%" width="80px"/> 
-            <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}</text>
-          </g>
-
-        </svg>
-        <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
-      </div>
-  </div>
-
+        <div class="action">
+            <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
+            <button nz-button nzType="primary" (click)="addsite_OK()">Add</button>
+        </div>
+    </div>
+    <!--sitegroupmodal-->
+        <div class="sitegroupmodal" *ngIf="siteGroupModelShow" >
+            <h3>Site_Group</h3>
+            <div class="inputs">
+                <div class="list-div">
+                    <span class="fl">Group Name:</span>
+                    <input nz-input [(ngModel)]="siteGroupModelData.name" style="width: 170px" class="fr">
+                </div>
+                <div class="list-div">
+                    <span class="fl">Topology:</span>
+                    <nz-select style="width: 170px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear
+                               nzPlaceHolder="Choose" class="fr">
+                        <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
+                        <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
+                    </nz-select>
+                </div>
+                <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading"
+                          [nzShowPagination]="false" nzSize="small">
+                    <thead>
+                    <tr>
+                        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
+                            (nzCheckedChange)="groupModal_checkAll($event)"></th>
+                        <th> Site Name</th>
+                        <th> Role</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr *ngFor="let item of groupModalTable.data; let i = index;">
+                        <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked"
+                            (nzCheckedChange)="refreshStatus($event)"></td>
+                        <td>{{ item.siteName }}</td>
+                        <td>
+                            <nz-select style="width: 80px;" [(ngModel)]="item.role"
+                                       nzAllowClear nzPlaceHolder="Choose"
+                                       [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
+                                <nz-option nzValue="hub" nzLabel="hub"></nz-option>
+                                <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
+                            </nz-select>
+                        </td>
+                    </tr>
+                    </tbody>
+                </nz-table>
+            </div>
+            <div class="action">
+                <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
+                <button nz-button nzType="primary" (click)="addsitegroup_OK()">Add</button>
+            </div>
+        </div>
+    <div class="mask" *ngIf="siteModelShow || siteGroupModelShow"></div>
 </div>
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
index 4dd3f5c2..ace7ac42 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -19,11 +19,22 @@ export class CcvpnCreationComponent implements OnInit {
   @Input() namesTranslate;  //输入项参数名字转换
   @Output() closeCreate = new EventEmitter();
 
+    //tabBarStyle
+    tabBarStyle = {
+        "height": "58px",
+        "width": "528px",
+        "box-shadow": "none",
+        "margin": "0",
+        "border-radius": "4px 4px 0px 0px"
+    };
   templateParameters = {};
   getTemParameters(){ //获取模板参数
     let chosedtemplates = Object.values(this.createParams.templates);
     // console.log(this.createParams);
     console.log(chosedtemplates);  //模板id数组
+        if(this.createParams.commonParams.templateType == 'SOTN'){
+            this.tabBarStyle["width"]="351px";
+        }
     let types = ["sotnvpn","site","sdwanvpn"];
     chosedtemplates.forEach((item,index)=>{
       this.myhttp.getTemplateParameters(types[index],item)
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 28162251..ff977190 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -38,7 +38,8 @@
     </nz-dropdown>
 
     <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
-            class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+            class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span>
+    </button>
     <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="CREATE" (nzOnCancel)="handleCancel()"
               (nzOnOk)="handleOk()">
         <div class="select-list">
@@ -96,7 +97,7 @@
             </div>
         </li>
     </ul>
-    <div class="list">
+    <div class="list" [ngClass]="{'listdisplay':listDisplay == true}">
         <nz-table *ngIf="1"
                   #nzTable [nzData]="tableData"
                   nzShowSizeChanger
@@ -136,7 +137,8 @@
               <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
                     'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001',
                     'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}">{{data.tips}}</span>
-                        <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress>
+                        <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false"
+                                     nzStatus="active"></nz-progress>
                     </td>
                     <td>
                         <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
@@ -161,7 +163,7 @@
                         <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
                     </td>
                     <td>
-                        <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                        <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
                            class="anticon anticon-reload" (click)="healService(item)"></i>
                     </td>
                 </tr>
@@ -169,7 +171,8 @@
             </tbody>
         </nz-table>
 
-        <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()">
+        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()"
+                  (nzOnOk)="scaleOk()">
             <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
             </h3>
             Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
@@ -194,7 +197,7 @@
                 </nz-select>
             </div>
         </nz-modal>
-        <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
+        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
                   (nzOnOk)="deleteOk()">
             <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance?
             </h3>
@@ -211,7 +214,8 @@
                        [(ngModel)]="gracefulTerminationTimeout">
             </div>
         </nz-modal>
-        <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()">
+        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()"
+                  (nzOnOk)="healOk()">
             <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
             </h3>
             Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index 3ef3fde2..0e59ca2e 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -24,6 +24,9 @@ hr {
     background-color: #dce1e7;
     margin-bottom: 20px;
 }
+.ant-tabs-bar{
+    margin-bottom: 0!important;
+}
 .action {
     margin-bottom: 15px;
     padding: 28px;
@@ -85,16 +88,20 @@ hr {
     .create.ant-btn.ant-btn-primary{
         border: none;
     }
+    .create:hover{
+        background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+    }
 
 }
 .top-num{
     overflow: auto;
+    width: 100%;
 }
 .top-list{
     position: relative;
-    width:360px;
+    width:22%;
     height:160px;
-    margin: 15px 15px 30px 15px;
+    margin: 15px 1.5%;
     float: left;
     background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
     box-shadow:0px 10px 15px 2px rgba(222,222,222,1);
@@ -102,17 +109,17 @@ hr {
 }
 .top-list .round{
     position: absolute;
-    width:80px;
-    height:80px;
-    line-height: 80px;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
     text-align: center;
     top:50%;
     left: 10px;
-    margin-top: -40px;
+    margin-top: -30px;
     background:#E0EDFF;
     border:2px solid rgba(224,237,255,1);
     border-radius: 50%;
-    font-size:18px;
+    font-size:16px;
     font-family:ArialMT;
     color:#3C4F8C;
 }
@@ -123,8 +130,11 @@ hr {
     line-height: 20px;
     top:50%;
     margin-top: -20px;
-    right: 20px;
+    right: 15px;
     color: #fff;
+    span:nth-child(1){
+        font-size: 22px;
+    }
 }
 .list {
     background-color: #fff;
@@ -207,9 +217,9 @@ hr {
     top: 0;
     width: 100%;
     height: 100vh;
-    background-color: #f3f3f3;
+    background-color: #F7F8FC;
     overflow-y: auto;
-    padding: 20px 32px;
+    //padding: 20px 32px;
     z-index: 3;
 }
 /*2019.01.14*/
@@ -236,3 +246,6 @@ hr {
     line-height: 32px;
 }
 
+.listdisplay{
+    display: none;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 7149ae2f..2dfbc942 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -140,6 +140,7 @@ export class ServicesListComponent implements OnInit {
   //
   createshow = false;
   createshow2 = false;
+    listDisplay = false;
   createData:Object={};
   handleOk(): void {
     // console.log('Button ok clicked!');
@@ -153,6 +154,7 @@ export class ServicesListComponent implements OnInit {
     }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){
       this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4};
       this.createshow2 = true;
+            this.listDisplay = true;
     }
 
   }
@@ -461,9 +463,11 @@ export class ServicesListComponent implements OnInit {
   closeCreate(obj){
     if(!obj){
       this.createshow = false; //close
+            this.listDisplay = false; 
       return false;
     }
     this.createshow = false;
+        this.listDisplay = false;
     console.log(obj);
     let newData; //Newly created service data for the main table
     let stageNum = 0; //Different stages of progress, used to add up subsequent service progress;
@@ -584,9 +588,11 @@ export class ServicesListComponent implements OnInit {
   e2eCloseCreate(obj){
     if(!obj){
       this.createshow2 = false; //
+            this.listDisplay = false;
       return false;
     }
     this.createshow2 = false; //
+        this.listDisplay = false;
     console.log(obj);
     let newData; //
     let   createParams = "?customerId="+this.customerSelected.id +
@@ -638,9 +644,11 @@ export class ServicesListComponent implements OnInit {
   nsCloseCreate(obj){
     if(!obj){
       this.createshow2 = false; //
+            this.listDisplay = false;
       return false;
     }
     this.createshow2 = false; //
+        this.listDisplay = false;
     console.log(obj);
     let newData; //
     // step1
diff --git a/usecaseui-portal/src/assets/images/noDatalist.png b/usecaseui-portal/src/assets/images/noDatalist.png
new file mode 100644
index 00000000..a7f612ef
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/noDatalist.png
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 93e5251c..9574b8e0 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -46,6 +46,9 @@ nz-table {
           width: 40px;
           height: 40px;
           line-height: 40px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 2px;
+          margin: 0 5px;
           .ant-pagination-item-link, .ant-pagination-item-link:after {
             width: 40px;
             height: 40px;
@@ -54,6 +57,7 @@ nz-table {
         }
         .ant-pagination-item.ant-pagination-item-active {
           background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%);
+          border: none;
           border-radius: 2px;
           a {
             color: #fff;
@@ -128,6 +132,9 @@ nz-pagination {
       width: 40px;
       height: 40px;
       line-height: 40px;
+      background: rgba(255, 255, 255, 1);
+      border-radius: 2px;
+      margin: 0 5px;
       .ant-pagination-item-link, .ant-pagination-item-link:after {
         width: 40px;
         height: 40px;
@@ -137,6 +144,7 @@ nz-pagination {
     .ant-pagination-item.ant-pagination-item-active {
       background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%);
       border-radius: 2px;
+      border: none;
       a {
         color: #fff;
       }
@@ -248,6 +256,7 @@ nz-layout {
 
 //2019.01.21 add services-list.component.html
 
+//creat框
 nz-modal {
   .ant-modal {
     height: 628px;
@@ -255,7 +264,22 @@ nz-modal {
   }
   .ant-modal-content{
     height: 628px;
-    background:transparent;
+    background: transparent;
+    .ant-modal-close-x {
+      width: 25px;
+      height: 25px;
+      line-height: 25px;
+      margin-top: 12px;
+      margin-right: 12px;
+    }
+    .ant-modal-close-x::before {
+      color: #fff;
+      width: 25px;
+      height: 25px;
+      line-height: 25px;
+      border-radius: 50%;
+      border: 1px solid #fff;
+    }
   }
   .ant-modal-header,ant-modal-title,.ant-modal-footer{
     background:transparent;
@@ -299,7 +323,7 @@ nz-modal {
     button:nth-child(1){
       background:#EEEEEE;
       border-radius:2px;
-      margin-left: 50px;
+      //margin-left: 50px;
       margin-right: 10px;
       span{
         color: #9DA7C5;
@@ -317,5 +341,216 @@ nz-modal {
         font-size: 14px !important;
       }
     }
+    button:nth-child(2):hover {
+      background: linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+    }
+  }
+}
+
+//2019.01.25 add ccvpn-creation.component.html
+.model .creation nz-tabset {
+  box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);
+  .ant-tabs-bar {
+    .ant-tabs-nav-container {
+      height: 59px !important;
+      .ant-tabs-nav {
+        padding: 0 !important;
+      }
+      .ant-tabs-ink-bar {
+        display: none !important;
+      }
+    ;
+      .ant-tabs-tab {
+        width: 175px;
+        height: 59px !important;
+        line-height: 38px;
+        text-align: center;
+        border-radius: 4px 4px 0px 0px;
+        border: 1px solid rgba(238, 238, 238, 0.8);
+        border-bottom: 0;
+        color: #06A7E2;
+        font-size: 18px;
+      }
+    ;
+      .ant-tabs-nav .ant-tabs-tab-active {
+        color: #fff;
+        background: linear-gradient(90deg, rgba(99, 194, 246, 1) 0%, rgba(62, 155, 255, 1) 100%);
+      }
+    }
+  }
+  .ant-tabs-content {
+    background: #fff;
+    padding: 0;
+    .ant-tabs-tabpane {
+      height: 486px;
+      background: #fff;
+      border-radius: 0px 0px 4px 4px;
+      border: 1px solid rgba(63, 156, 255, 0.8);
+    }
+  }
+}
+
+.model .creation .sotnvpn ul li nz-date-picker {
+  nz-picker {
+    .ant-calendar-picker {
+      .ant-calendar-picker-input.ant-input {
+        //width: 180px!important;
+        height: 40px !important;
+      }
+    }
+  }
+}
+
+.model .creation .sotnvpn ul li nz-select {
+  .ant-select-selection.ant-select-selection--single {
+    height: 40px;
+    .ant-select-selection__rendered {
+      line-height: 35px;
+    }
+  }
+}
+
+.model .creation .site nz-table, .model .creation .sitegroup nz-table {
+  .ant-table-wrapper {
+    margin: 20px 0;
+    .ant-table-small {
+      border: none;
+      .ant-table-tbody tr td {
+        padding: 10px 8px;
+        border-bottom: 5px solid #F7F8FC;
+        color: #3C4F8C;
+      }
+      .ant-table-tbody tr:hover > td {
+        background: #F7F7FA !important;
+      }
+    }
+  }
+  .ant-table-empty{
+    .ant-spin-container{
+      .ant-table-small{
+        .ant-table-content{
+          .ant-table-thead tr th{
+            padding-bottom: 20px;
+          }
+          .ant-table-placeholder{
+            background:url("./assets/images/noDatalist.png") no-repeat 50% 0;
+            span{
+              display: inline-block;
+              padding-top: 60px;
+            }
+          }
+        }
+      }
+    }
   }
-}
\ No newline at end of file
+}
+//2019.01.29 add
+.sitemodel nz-table {
+  .ant-table-wrapper {
+
+  }
+  .ant-table-small {
+    border: none;
+    //border-top: 1px solid #e8e8e8;
+    border-radius: 4px;
+    .ant-table-body{
+      table{
+        padding: 0 1px;
+        .ant-table-thead{
+          tr{
+            height: 45px;
+            color:rgba(60,79,140,0.5);
+            th{
+                border: none;
+                color:rgba(60,79,140,0.5);
+                font-size: 16px;
+                font-weight: 500;
+            }
+          }
+        }
+        .ant-table-tbody > tr > td{
+          border-top: 1px solid #e8e8e8;
+          border-bottom: 2px solid #F7F8FC;
+          padding-top: 10px;
+          padding-bottom: 10px;
+        }
+      }
+    }
+    .ant-table-placeholder{
+      font-size: 16px;
+      background:url("./assets/images/noDatalist.png") no-repeat 50% 0;
+      span {
+        display: inline-block;
+        padding-top: 50px;
+      }
+    }
+  }
+
+}
+
+.sitegroupmodal nz-table {
+  .ant-table-wrapper {
+    margin: 0 auto;
+    margin-top: 30px;
+    width: 340px;
+  }
+  .ant-table-small {
+    border: none;
+    border-top: 1px solid #e8e8e8;
+    border-radius: 4px;
+    .ant-table-body{
+      table{
+        padding: 0 1px;
+        .ant-table-thead{
+          tr{
+            font-size: 16px;
+            height: 45px;
+            color: #3C4F8C;
+          }
+        }
+      }
+    }
+    .ant-table-placeholder{
+      font-size: 16px;
+      background:url("./assets/images/noDatalist.png") no-repeat 50% 0;
+      span {
+        display: inline-block;
+        padding-top: 50px;
+      }
+    }
+  }
+
+}
+//2019.02.01 gong add
+.list#services-list nz-table{
+  .ant-table-wrapper{
+    .ant-spin-container{
+      .ant-table-content{
+        .ant-table-scroll{
+          .ant-table-header{
+            overflow:auto!important;
+            margin-bottom: 0!important;
+          }
+        }
+      }
+    }
+  }
+  .ant-table-empty{
+    .ant-spin-container{
+      .ant-table-content{
+        .ant-table-thead tr th{
+          padding-bottom: 20px;
+          border-bottom: 1px solid #e8e8e8;
+        }
+        .ant-table-placeholder{
+          background:url("assets/images/noDatalist.png") no-repeat 50% 0;
+          border: none;
+          span{
+            display: inline-block;
+            padding-top: 50px;
+          }
+        }
+      }
+    }
+  }
+}