Fix VNF Alarm Query Bugs

Change-Id: I8df1f00de182e6c9f039e2e65237d3e8628c5717
Issue-ID: USECASEUI-165
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

8 files changed, 715 insertions, 376 deletions

diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
index 894cdf5b..6e345a4e 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -13,105 +13,121 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">>
-    Details</span> </h3>
-<hr>
-<div class="select" [@showHideAnimate]="state">
-<div class="query_criteria">
-    <span>Source Name: </span>
-    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-        <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
-        <ul nz-menu>
-            <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
-                <a>{{item}}</a>
-            </li>
-        </ul>
-    </nz-dropdown>
-    &nbsp;&nbsp;
-    <span>Priority: </span>
-    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-        <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
-        <ul nz-menu>
-            <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
-                <a>{{item}}</a>
-            </li>
-        </ul>
-    </nz-dropdown>
-    &nbsp;&nbsp;
-    <span>Status: </span>
-    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-        <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
-        <ul nz-menu>
-            <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
-                <a>{{item}}</a>
-            </li>
-        </ul>
-    </nz-dropdown>
-    <br> <br>
-    <span>Report Time: </span>
-    <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">>
+        Details</span> </h3>
+<div style="padding:0px 20px 20px 20px;">
+    <div class="charts" [@showHideAnimate]="state">
+        <div class="chartsleft">
+            <div class="active sctive_closed">
+                <div>Active</div>
+                <div>13,980</div>
+                <div><nz-progress [nzPercent]="90" [nzShowInfo]="false"></nz-progress></div>
+                <div>There are 13980 faults waiting to be solved</div>
+            </div>
+            <div class="closed sctive_closed">
+                <div>Closed</div>
+                <div>23,980</div>
+                <div><nz-progress [nzPercent]="30" [nzShowInfo]="false"></nz-progress></div>
+                <div>23,980 faults have been fixed</div>
+            </div>
+        </div>
+        <div class="chartsright">
+            <span>Daily Total</span>
+            <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+        </div>
+    </div>
+    <div class="select" [@showHideAnimate]="state">
+        <div class="query_criteria">
+            <span>Source Name: </span>
+            <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+                <ul nz-menu>
+                    <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList">
+                        <a>{{item}}</a>
+                    </li>
+                </ul>
+            </nz-dropdown>
+            &nbsp;&nbsp;
+            <span>Priority: </span>
+            <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button>
+                <ul nz-menu>
+                    <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList">
+                        <a>{{item}}</a>
+                    </li>
+                </ul>
+            </nz-dropdown>
+            &nbsp;&nbsp;
+            <span>Status: </span>
+            <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+                <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button>
+                <ul nz-menu>
+                    <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList">
+                        <a>{{item}}</a>
+                    </li>
+                </ul>
+            </nz-dropdown>
+            &nbsp;&nbsp;
+            <span>Report Time: </span>
+            <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
 
-    <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
-</div>
-</div>
-<div class="content" [@showHideAnimate]="state">
-<div class="title">
-    <ul>
-        <li>
-            <h5>All</h5>
-            <p>{{alarmList.all }}</p>
-        </li>
-        <li>
-            <h5>Closed</h5>
-            <p>{{alarmList.closed }}</p>
-        </li>
-        <li>
-            <h5>Active</h5>
-            <p>{{alarmList.activeNum }}</p>
-        </li>
-    </ul>
-</div>
-<div class="chart">
-    <h3>Alarm Chart</h3>
-    <nz-radio-group [(ngModel)]="size">
-        <label nz-radio-button nzValue="day" (click)="day()"> day </label>
-        <label nz-radio-button nzValue="month" (click)="month()">month</label>
-    </nz-radio-group>
-    <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}">
-        <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+            <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+        </div>
+    </div>
+    <div class="content" [@showHideAnimate]="state">
+        <!-- <div class="title">
+                    <ul>
+                        <li>
+                            <h5>All</h5>
+                            <p>{{alarmList.all }}</p>
+                        </li>
+                        <li>
+                            <h5>Closed</h5>
+                            <p>{{alarmList.closed }}</p>
+                        </li>
+                        <li>
+                            <h5>Active</h5>
+                            <p>{{alarmList.activeNum }}</p>
+                        </li>
+                    </ul>
+                </div> -->
+        <!-- <div class="chart">
+            <h3>Alarm Chart</h3>
+            <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}">
+                <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
+            </div>
+        </div> -->
+        <div class="tablelist">
+            <nz-table #nzTable [nzData]="list" [(nzPageSize)]="pageSize" nzShowSizeChanger nzShowQuickJumper
+                [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
+                <thead (nzSortChange)="sort($event)" nzSingleSort>
+                    <tr>
+                        <th nzWidth="5%" style="padding-left:20px;">NO</th>
+                        <th nzWidth="12%">Source Name</th>
+                        <th nzWidth="7%">Priority</th>
+                        <th nzWidth="18%">SpecificProblem</th>
+                        <th nzWidth="15%">Report Time</th>
+                        <th nzWidth="15%">Clear Time</th>
+                        <th nzWidth="8%">Status</th>
+                        <th nzWidth="10%">Action</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let item of nzTable.data; let i = index;">
+                        <td style="padding-left: 20px;">{{i+1}}</td>
+                        <td>{{item.sourceName}}</td>
+                        <td>{{item.priority}}</td>
+                        <td>{{item.specificProblem}}</td>
+                        <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                        <td>{{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                        <td>{{item.status}}</td>
+                        <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td>
+                    </tr>
+                </tbody>
+            </nz-table>
+        </div>
+    </div>
+    <div [@showHideAnimate]="state2">
+        <app-details [detailId]="detailId"></app-details>
     </div>
-    <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button>
-</div>
-<div class="tablelist">
-    <nz-table #nzTable [nzData]="list" [(nzPageSize)]="pageSize" nzShowSizeChanger nzShowQuickJumper [nzPageSizeOptions]="[5,10,15,20]"
-        nzSize="middle">
-        <thead (nzSortChange)="sort($event)" nzSingleSort>
-            <tr>
-                <th nzWidth="5%">NO</th>
-                <th nzWidth="10%">Source Name</th>
-                <th nzWidth="10%">Priority</th>
-                <th nzWidth="15%">SpecificProblem</th>
-                <th nzWidth="15%">Report Time</th>
-                <th nzWidth="15%">Clear Time</th>
-                <th nzWidth="10%">Status</th>
-                <th nzWidth="10%">Action</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr *ngFor="let item of nzTable.data; let i = index;">
-                <td>{{i+1}}</td>
-                <td>{{item.sourceName}}</td>
-                <td>{{item.priority}}</td>
-                <td>{{item.specificProblem}}</td>
-                <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-                <td>{{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-                <td>{{item.status}}</td>
-                <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td>
-            </tr>
-        </tbody>
-    </nz-table>
-</div>
-</div>
-<div [@showHideAnimate]="state2">
-<app-details [detailId]="detailId"></app-details>
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less
index 649815c5..936f73c8 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.less
+++ b/usecaseui-portal/src/app/alarm/alarm.component.less
@@ -25,7 +25,7 @@ hr {
     margin-bottom: 20px;
 }
 .select {
-    margin-bottom: 20px;
+    margin-bottom: 15px;
     span {
         display: inline-block;
         font: 700 14px "Arial";
@@ -68,6 +68,54 @@ hr {
     }
     
 }
+.charts{
+    width: 100%;
+    height: 250px;
+    margin-bottom: 25px;
+    .chartsleft {
+        width: 30%;
+        height: 100%;
+        float: left;
+        margin-right: 2%;
+        color: #fff;
+        font-family:"ArialMT";
+        .sctive_closed {
+            height: 48.75%;
+            padding: 12px;
+            width: 100%;                  
+            :first-child{
+                font-size: 14px;
+            }
+            :nth-child(2) {
+                font-size: 18px;
+            }
+            :nth-child(3) {
+                font-size: 12px;
+            }
+        }
+        .active {
+            margin-bottom: 5px;
+            background: -webkit-linear-gradient(left, #FB7788 , #FB93C2); /* Safari 5.1 - 6.0 */
+            background: -o-linear-gradient(right, #FB7788, #FB93C2); /* Opera 11.1 - 12.0 */
+            background: -moz-linear-gradient(right, #FB7788, #FB93C2); /* Firefox 3.6 - 15 */
+            background: linear-gradient(to right, #FB7788 , #FB93C2); /* 标准的语法（必须放在最后） */
+        }
+        .closed {
+            margin-top: 2px;
+            background: -webkit-linear-gradient(left, #7A8BAE , #A6BFE4); /* Safari 5.1 - 6.0 */
+            background: -o-linear-gradient(right, #7A8BAE , #A6BFE4); /* Opera 11.1 - 12.0 */
+            background: -moz-linear-gradient(right,  #7A8BAE , #A6BFE4); /* Firefox 3.6 - 15 */
+            background: linear-gradient(to right,  #7A8BAE , #A6BFE4); /* 标准的语法（必须放在最后） */
+        }
+        
+    }
+    .chartsright {
+        background-color: #fff;
+        width: 68%;
+        float: left;
+        height: 100%;
+    }
+}
 .content {
     .title {
         border-radius: 5px 5px 0 0;
@@ -148,8 +196,8 @@ hr {
         }
     }
     .tablelist {
-        background-color: #fff;
-        padding: 24px 10px 0px;
+        // background-color: #fff;
+        // padding: 24px 10px 0px;
         border-radius: 0 0 5px 5px;
         .action{
             padding: 10px 0 0 20px;
@@ -165,3 +213,24 @@ hr {
         }
     }
 }
+// select 框更改
+.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] button[_ngcontent-c3] {
+    width: 120px;
+    height: 30px;
+    background-color: #fff;
+    text-align: left;
+    border-color: #EEEEEE;
+    border-radius: 2px;
+}
+.select[_ngcontent-c3] nz-dropdown[_ngcontent-c3] [_ngcontent-c3]:hover {
+    border-color: #58B7F9;
+}
+.ant-progress-inner{
+    background:rgba(229,238,252,0.8) !important;
+}
+.ant-progress-bg {
+    background-color: linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(223,233,243,1) 100%) !important;
+}
+
+
+
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index be8aae01..ae9c0681 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -16,7 +16,7 @@
 import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core';
 import { HomesService } from '../homes.service';
 import { showHideAnimate, slideToRight } from '../animates';
-import { DatePipe } from "@angular/common"
+import { DatePipe } from '@angular/common';
 @Component({
   selector: 'app-alarm',
   templateUrl: './alarm.component.html',
@@ -45,7 +45,7 @@ export class AlarmComponent implements OnInit {
   ngOnInit() {
     this.getAlarmFormData();
     this.getSourceNames();
-    this.getstatuscount();
+    // this.getstatuscount();
   }
 
   // Filter box
@@ -106,14 +106,14 @@ export class AlarmComponent implements OnInit {
     activeNum: 0
   }
   // total data
-  getstatuscount() {
-    this.myhttp.getstatuscount().subscribe((data) => {
-      this.alarmList.activeNum = data[0];
-      this.alarmList.closed = data[1];
-      this.alarmList.all = (data[0] - 0) + (data[1] - 0);
+  // getstatuscount() {
+  //   this.myhttp.getstatuscount().subscribe((data) => {
+  //     this.alarmList.activeNum = data[0];
+  //     this.alarmList.closed = data[1];
+  //     this.alarmList.all = (data[0] - 0) + (data[1] - 0);
 
-    })
-  }
+  //   })
+  // }
   getAlarmFormData() {
     this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => {
       this.list = data.alarms;
@@ -122,10 +122,10 @@ export class AlarmComponent implements OnInit {
   }
   getAlarmChartData(event) {
     let paramsObj = {
-      sourceName: this.sourceName,
-      startTime: this.startTime,
-      endTime: this.endTime,
-      format: 'day'
+      // sourceName: this.sourceName,
+      // startTime: this.startTime,
+      // endTime: this.endTime,
+      // format: 'day'
     }
     this.myhttp.getHomeAlarmChartData(paramsObj)
       .subscribe((data) => {
@@ -136,7 +136,6 @@ export class AlarmComponent implements OnInit {
           series: [
             { data: data.allList },
             { data: data.ActiveList },
-            { data: data.closedList }
           ]
         }
       }, (err) => {
@@ -144,61 +143,61 @@ export class AlarmComponent implements OnInit {
       })
   }
   // day alarmchartdata
-  day() {
-    let paramsObj = {
-      sourceName: this.sourceName,
-      startTime: this.startTime,
-      endTime: this.endTime,
-      format: "day"
-    }
-    this.myhttp.getHomeAlarmChartData(paramsObj)
-      .subscribe((data) => {
-        this.alarmChartData = {
-          xAxis: {
-            data: data.dateList
-          },
-          series: [
-            { data: data.allList },
-            { data: data.ActiveList },
-            { data: data.closedList }
-          ]
-        }
-      }, (err) => {
-        console.log(err);
-      })
-  }
-  month() {
-    let paramsObj = {
-      sourceName: this.sourceName,
-      startTime: this.startTime,
-      endTime: this.endTime,
-      format: "month"
-    }
-    this.myhttp.getHomeAlarmChartData(paramsObj)
-      .subscribe((data) => {
-        this.alarmChartData = {
-          xAxis: {
-            data: data.dateList
-          },
-          series: [
-            { data: data.allList },
-            { data: data.ActiveList },
-            { data: data.closedList }
-          ]
-        }
-      }, (err) => {
-        console.log(err);
-      })
-  }
+  // day() {
+  //   let paramsObj = {
+  //     sourceName: this.sourceName,
+  //     startTime: this.startTime,
+  //     endTime: this.endTime,
+  //     format: "day"
+  //   }
+  //   this.myhttp.getHomeAlarmChartData(paramsObj)
+  //     .subscribe((data) => {
+  //       this.alarmChartData = {
+  //         xAxis: {
+  //           data: data.dateList
+  //         },
+  //         series: [
+  //           { data: data.allList },
+  //           { data: data.ActiveList },
+  //           { data: data.closedList }
+  //         ]
+  //       }
+  //     }, (err) => {
+  //       console.log(err);
+  //     })
+  // }
+  // month() {
+  //   let paramsObj = {
+  //     sourceName: this.sourceName,
+  //     startTime: this.startTime,
+  //     endTime: this.endTime,
+  //     format: "month"
+  //   }
+  //   this.myhttp.getHomeAlarmChartData(paramsObj)
+  //     .subscribe((data) => {
+  //       this.alarmChartData = {
+  //         xAxis: {
+  //           data: data.dateList
+  //         },
+  //         series: [
+  //           { data: data.allList },
+  //           { data: data.ActiveList },
+  //           { data: data.closedList }
+  //         ]
+  //       }
+  //     }, (err) => {
+  //       console.log(err);
+  //     })
+  // }
   //Line chart
   alarmShow = false;
   alarmChartData: Object;
   alarmChartInit: Object = {
-    height: 380,
+    height:  240,
     option: {
       legend: {
         bottom: '0px',
-        data: ['All', 'Active', 'Closed']
+        data: ['Active', 'Fixed']
       },
       tooltip: {
         trigger: 'axis',
@@ -217,59 +216,55 @@ export class AlarmComponent implements OnInit {
       },
       series: [
         {
-          name: 'All',
-          type: 'line',
-          smooth: true,
-          showSymbol: false,
-          areaStyle: {
-            opacity: 0.8
-          },
-          //timeframe_one
+          name: 'Active',
+          type: 'bar',
           data: [],
+          barWidth: 10,
+          barGap: 1,
           itemStyle: {
-            color: "#526b75"
-          },
-          lineStyle: {
-            width: 1,
-            opacity: 0.5
+            normal: {
+              barBorderRadius: [5],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#FB7788' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#FB93C2' // 100% 处的颜色
+                }],
+              },
+              opacity: 1,
+            }
           }
         },
         {
-          name: 'Active',
-          type: 'line',
-          smooth: true,//
-          showSymbol: false,
-          areaStyle: {
-            opacity: 0.8
-          },
-          //timeframe_two
+          name: 'Fixed',
+          type: 'bar',
           data: [],
+          barWidth: 10,
+          barGap: 1,
           itemStyle: {
-            color: "#fb6e6e"
-          },
-          lineStyle: {
-            width: 1,
-            opacity: 0.5
+            normal: {
+              barBorderRadius: [5],
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#7A8BAE' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#A6BFE4' // 100% 处的颜色
+                }],
+              },
+              opacity: 1,
+            }
           }
         },
-        {
-          name: 'Closed',
-          type: 'line',
-          smooth: true,//
-          showSymbol: false,
-          areaStyle: {
-            opacity: 0.8
-          },
-          //timeframe_two
-          data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125],
-          itemStyle: {
-            color: "#3fa8eb"
-          },
-          lineStyle: {
-            width: 1,
-            opacity: 0.5
-          }
-        }
       ]
     }
   };
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index df0890e6..1990d708 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -69,7 +69,7 @@
       </ul>
     </nz-dropdown>
   </nz-sider>
-  <nz-layout style="margin-left: 260px; padding: 20px 32px; height:100vh; position:relative;">
+  <nz-layout style="margin-left: 260px;  height:100vh; position:relative;">
       <router-outlet></router-outlet>
   </nz-layout>
 </nz-layout>
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
index 191c67ac..577a6356 100644
--- a/usecaseui-portal/src/app/home/home.component.html
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -16,7 +16,7 @@
 
 <!--<h3 class="title"> {{"Overall trend" | translate}}</h3>
 <hr> -->
-<div class="content">
+<div class="content" style="padding: 20px 20px;">
   <div class="services">
     <h4>{{"SERVICES" | translate}}</h4>
     <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index c90920c3..605c455f 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -14,197 +14,342 @@
     limitations under the License.
 -->
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-        <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
-            <!-- nsList -->
-            <div class="list" *ngIf="tab === 'NS'">
-                <h3 class="title"> Onboard {{tabTitle}} </h3>
+    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
+        <!-- nsList -->
+        <div class="list" *ngIf="tab === 'NS'">
+            <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
+            <div class="listupload">
                 <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
                     <p class="ant-upload-drag-icon">
                         <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
                     </p>
-                    <p class="ant-upload-text">Click or drag file to this area to upload</p>
+                    <p class="ant-upload-text">Click or drag CSAR File here</p>
                     <p class="ant-upload-hint"></p>
                 </nz-upload>
                 <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
-                    style="margin-top: 16px">
+                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
                     {{ nsuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
-                <nz-spin [nzSpinning]="isSpinning">
-                	<div class="mask" *ngIf="isSpinning"></div>
-               		<nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-	                    [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex'
-	                    [nzLoading]="loading" nzSize="middle">
-	                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-	                        <tr>
-	                            <th nzWidth="15%">NO</th>
-	                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-	                            <th nzWidth="15%">Version</th>
-	                            <th nzWidth="15%">Onboarding State</th>
-	                            <th nzWidth="15%">Operational State</th>
-	                            <th nzWidth="10%">Usage State</th>
-	                            <th nzWidth="15%">Operation button</th>
-	                        </tr>
-	                    </thead>
-	                    <tbody>
-	                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-	                            <td *ngIf="item.id">{{item.id}}</td>
-	                            <td *ngIf="item.uuid">{{item.uuid}}</td>
-            
-	                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
-	                            <td *ngIf="item.nsdName === null || item.nsdName === ''">&nbsp;</td>
-	                            <td *ngIf="item.name">{{item.name}}</td>
-	                            <td *ngIf="item.name===null || item.name=== ''">&nbsp;</td>
-	                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
-	                            <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''">&nbsp;</td>
-                                <td *ngIf="item.version">{{item.version}}</td>
-                                <td *ngIf="item.version === null || item.version === ''">&nbsp;</td>
-	                            <td>
-	                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
-	                                <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''">&nbsp;</span>
-	                                <span *ngIf="item.uuid">{{status}}</span>
-                                
-	                                <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
-	                                'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
-	                                'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
-	                                <nz-progress  *ngIf="item.uuid"  *ngIf="data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
-	                            </td>
-	                            <td>{{item.nsdOperationalState}}</td> 
-	                            <td>{{item.nsdUsageState}}</td>
-	                            <td>
-	                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" 
-	                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *ngIf="item.uuid"></i>
-	                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
-                                    
-                                    <span *ngIf="item.id && item.sameid == undefined">
-                                        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
-                                                <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>
-                                        </nz-upload>
-                                        <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==nsdInfoId">
-                                            {{ nsuploading ? 'Uploading' : 'Start Upload' }}
-                                        </button>
-                                    </span>
-                                    
-                                </td>
-	                        </tr>
-	                    </tbody>
-            		 </nz-table>
-                 </nz-spin>
             </div>
-            <!-- VNFList -->
-            <div class="list" *ngIf="tab === 'VNF'">
-                <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <div class="listlin"></div>
+            <div class="listfile">
+                <div>
+                    <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div>
+                            <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div class="color">
+                            <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div>pnf-test.csar</div>
+                        <div class="color">File upload completed</div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div>pnf-test.csar</div>
+                        <div class="color">File upload completed</div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div>File upload completed</div>
+                        <div>456</div>
+                    </div>
+                </div>
+
+            </div>
+            <nz-spin [nzSpinning]="isSpinning">
+                <div class="mask" *ngIf="isSpinning"></div>
+                <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true"
+                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize"
+                    [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle">
+                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                        <tr>
+                            <th nzWidth="15%">NO</th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                            <th nzWidth="15%">Version</th>
+                            <th nzWidth="15%">Onboarding State</th>
+                            <th nzWidth="15%">Operational State</th>
+                            <th nzWidth="10%">Usage State</th>
+                            <th nzWidth="15%">Operation button</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+                            <td *ngIf="item.id">{{item.id}}</td>
+                            <td *ngIf="item.uuid">{{item.uuid}}</td>
+
+                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+                            <td *ngIf="item.nsdName === null || item.nsdName === ''">&nbsp;</td>
+                            <td *ngIf="item.name">{{item.name}}</td>
+                            <td *ngIf="item.name===null || item.name=== ''">&nbsp;</td>
+                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+                            <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''">&nbsp;</td>
+                            <td *ngIf="item.version">{{item.version}}</td>
+                            <td *ngIf="item.version === null || item.version === ''">&nbsp;</td>
+                            <td>
+                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
+                                <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''">&nbsp;</span>
+                                <span *ngIf="item.uuid">{{status}}</span>
+
+                                <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
+                                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
+                                    'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
+                                    <nz-progress  *ngIf="item.uuid"  *ngIf="data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
+                            </td>
+                            <td>{{item.nsdOperationalState}}</td>
+                            <td>{{item.nsdUsageState}}</td>
+                            <td>
+                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}"
+                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)"
+                                    *ngIf="item.uuid"></i>
+                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"
+                                    *ngIf="item.id"></i>
+                                <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">-->
+                                <span *ngIf="item.id && item.sameid == undefined">
+                                    <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+                                        <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>
+                                    </nz-upload>
+                                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"
+                                        style="margin-top: 16px" *ngIf="item.id==nsdInfoId">
+                                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+                                    </button>
+                                </span>
+
+                            </td>
+                        </tr>
+                    </tbody>
+                </nz-table>
+            </nz-spin>
+            <!-- <div style="margin-top:8px;">
+                        Loading state��
+                        <nz-switch [(ngModel)]="isSpinning"></nz-switch>
+                      </div> -->
+
+        </div>
+        <!-- VNFList -->
+        <div class="list" *ngIf="tab === 'VNF'">
+            <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
+            <div class="listupload">
                 <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
                     <p class="ant-upload-drag-icon">
                         <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
                     </p>
-                    <p class="ant-upload-text">Click or drag file to this area to upload</p>
+                    <p class="ant-upload-text">Click or drag CSAR File here</p>
                     <p class="ant-upload-hint"></p>
                 </nz-upload>
                 <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
-                    style="margin-top: 16px">
+                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
                     {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
-                <nz-spin [nzSpinning]="isSpinning">
-                    <div class="mask" *ngIf="isSpinning"></div>
-                    <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                        [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex'
-                        [nzLoading]="loading" nzSize="middle">
-                        <thead (nzSortChange)="sort($event)" nzSingleSort>
-                            <tr>
-                                <th nzWidth="15%">NO</th>
-                                <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                                <th nzWidth="15%">Version</th>
-                                <th nzWidth="15%">Onboarding State</th>
-                                <th nzWidth="15%">Operational State</th>
-                                <th nzWidth="10%">Usage State</th>
-                                <th nzWidth="15%">Operation button</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr *ngFor="let item of nzTable.data; let i = index; ">
-                                <td *ngIf="item.id">{{item.id}}</td>
-                                <td *ngIf="item.uuid">{{item.uuid}}</td>
-                                <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
-                                <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''">&nbsp;</td>
-                                <td *ngIf="item.name">{{item.name}}</td>
-                                <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
-                                <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''">&nbsp;</td>
-                                <td *ngIf="item.version">{{item.version}}</td>
-                                <td>{{item.onboardingState}}</td>
-                                <td>{{item.usageState}}</td>
-                                <td>{{item.operationalState}}</td>
-                                <td>
-                                    <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding'  && i == currentIndex}"
-                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i>
-                                    <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
-                                    <span *ngIf="item.id && item.sameid == undefined">
-                                        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
-                                                <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>
-                                        </nz-upload>
-                                        <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==vnfPkgId">
-                                            {{ nsuploading ? 'Uploading' : 'Start Upload' }}
-                                        </button>
-                                    </span>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </nz-table>
-                </nz-spin>
-                
             </div>
-            <!-- PNFList -->
-            <div class="list" *ngIf="tab === 'PNF'">
-                <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <div class="listlin"></div>
+            <div class="listfile">
+                <div>
+                    <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div>
+                            <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div class="color">
+                            <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div>pnf-test.csar</div>
+                        <div class="color">File upload completed</div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div>pnf-test.csar</div>
+                        <div class="color">File upload completed</div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div>File upload completed</div>
+                        <div>456</div>
+                    </div>
+                </div>
+            </div>
+            <nz-spin [nzSpinning]="isSpinning">
+                <div class="mask" *ngIf="isSpinning"></div>
+                <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true"
+                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize"
+                    [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle">
+                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                        <tr>
+                            <th nzWidth="15%">NO</th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                            <th nzWidth="15%">Version</th>
+                            <th nzWidth="15%">Onboarding State</th>
+                            <th nzWidth="15%">Operational State</th>
+                            <th nzWidth="10%">Usage State</th>
+                            <th nzWidth="15%">Operation button</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+                            <td *ngIf="item.id">{{item.id}}</td>
+                            <td *ngIf="item.uuid">{{item.uuid}}</td>
+                            <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+                            <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''">&nbsp;</td>
+                            <td *ngIf="item.name">{{item.name}}</td>
+                            <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
+                            <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''">&nbsp;</td>
+                            <td *ngIf="item.version">{{item.version}}</td>
+                            <td>{{item.onboardingState}}</td>
+                            <td>{{item.usageState}}</td>
+                            <td>{{item.operationalState}}</td>
+                            <td>
+                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding'  && i == currentIndex}"
+                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)"
+                                    *ngIf="item.uuid"></i>
+                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"
+                                    *ngIf="item.id"></i>
+                                <span *ngIf="item.id && item.sameid == undefined">
+                                    <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+                                        <!-- <button nz-button> -->
+                                        <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>
+                                        <!-- <span >upload</span> -->
+                                        <!-- </button> -->
+
+                                    </nz-upload>
+                                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"
+                                        style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"
+                                        *ngIf="item.id==vnfPkgId">
+                                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+                                    </button>
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </nz-table>
+            </nz-spin>
+
+        </div>
+        <!-- PNFList -->
+        <div class="list" *ngIf="tab === 'PNF'">
+            <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
+            <div class="listupload">
                 <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF">
                     <p class="ant-upload-drag-icon">
                         <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
                     </p>
-                    <p class="ant-upload-text">Click or drag file to this area to upload</p>
+                    <p class="ant-upload-text">Click or drag CSAR File here</p>
                     <p class="ant-upload-hint"></p>
                 </nz-upload>
                 <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
-                    style="margin-top: 16px">
+                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
                     {{ pnfuploading ? 'Uploading' : 'Start Upload' }}
                 </button>
-                <nz-spin [nzSpinning]="isSpinning">
-                        <div class="mask" *ngIf="isSpinning"></div>
-                        <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                        [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex'
-                        [nzLoading]="loading" nzSize="middle">
-                        <thead (nzSortChange)="sort($event)" nzSingleSort>
-                            <tr>
-                                <th nzWidth="15%">NO</th>
-                                <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
-                                <th nzWidth="15%">Version</th>
-                                <th nzWidth="15%">Onboarding State</th>
-                                <th nzWidth="10%">Usage State</th>
-                                <th nzWidth="15%">Operation button</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr *ngFor="let item of nzTable.data; let i = index; ">
-                                <td>{{item.id}}</td>
-                                <td>{{item.pnfdName}}</td>
-                                <td>{{item.pnfdVersion}}</td>
-                                <td>{{item.pnfdOnboardingState}}</td>
-                                <td>{{item.pnfdUsageState}}</td>
-                                <td>
-                                    <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
-                                    <span *ngIf="item.id">
-                                        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
-                                            <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>
-                                        </nz-upload>
-                                        <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==vnfPkgId">
-                                            {{ nsuploading ? 'Uploading' : 'Start Upload' }}
-                                        </button>
-                                    </span>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </nz-table>
-                </nz-spin>
-                
             </div>
-        </nz-tab>
+            <div class="listlin"></div>
+            <div class="listfile">
+                <div>
+                    <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div>
+                            <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div class="color">
+                            <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div>pnf-test.csar</div>
+                        <div class="color">File upload completed</div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div>pnf-test.csar</div>
+                        <div class="color">File upload completed</div>
+                        <div>456</div>
+                    </div>
+                    <div class="listfilebgc">
+                        <div>111</div>
+                        <div class="color">pnf-test.csar</div>
+                        <div>File upload completed</div>
+                        <div>456</div>
+                    </div>
+                </div>
+            </div>
+            <nz-spin [nzSpinning]="isSpinning">
+                <div class="mask" *ngIf="isSpinning"></div>
+                <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true"
+                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize"
+                    [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle">
+                    <thead (nzSortChange)="sort($event)" nzSingleSort>
+                        <tr>
+                            <th nzWidth="15%">NO</th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+                            <th nzWidth="15%">Version</th>
+                            <th nzWidth="15%">Onboarding State</th>
+                            <th nzWidth="10%">Usage State</th>
+                            <th nzWidth="15%">Operation button</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of nzTable.data; let i = index; ">
+                            <td>{{item.id}}</td>
+                            <td>{{item.pnfdName}}</td>
+                            <td>{{item.pnfdVersion}}</td>
+                            <td>{{item.pnfdOnboardingState}}</td>
+                            <td>{{item.pnfdUsageState}}</td>
+                            <td>
+                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i>
+                                <span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">
+                                    <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+                                        <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>
+                                    </nz-upload>
+                                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"
+                                        style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"
+                                        *ngIf="item.id==vnfPkgId">
+                                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+                                    </button>
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </nz-table>
+            </nz-spin>
+
+        </div>
+    </nz-tab>
 </nz-tabset>
 
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
index aca14585..b4d92fde 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
@@ -42,9 +42,58 @@ hr {
 }
   
 .list {
-    background-color: #fff;
+    // background-color: #fff;
     border-radius: 5px;
-    padding: 10px;
+    // padding: 10px;
+    .listupload {
+        width: 22%;
+        float: left;
+        margin-left: 13%;
+    }
+    .listlin {
+        float: left;
+        width: 1%;
+        margin-left: 10%;
+        height: 177px;
+        margin-bottom: 30px;
+        border-right: 2px solid #EEEEEE;
+    }
+    .listfile {
+        float: left;
+        width: 44%;
+        margin-left: 10%;
+        .listfilebgc { 
+        background-color: #fff;
+        border-bottom: 8px solid #F7F8FC;
+        }
+        .listfilebgc {
+            background-color: #fff;
+            height: 30px;
+            border-radius: 2px;
+            line-height: 2;
+            color: #42548F;
+            border-bottom: 4px solid #F7F8FC;
+            >div {
+                float: left;
+            }
+           :first-child {
+               width: 6%;
+           }
+           :nth-child(2){
+                width:20%;
+           }
+           :nth-child(3){
+               width: 60%;
+               text-align: center;
+           }
+           :nth-child(4){
+            padding-left: 4%;
+           }
+           .color {
+               color:rgba(66,84,143,0.5);
+           }
+        }
+    }
     nz-table {
         tbody {
             td {
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 5429a9c1..23b954c8 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -8,7 +8,13 @@
 // 表格每页条数选项单位置
 nz-table {
     .ant-table-thead>tr>th {
-        color: #3fa8eb; //标题字体颜色
+        color:rgba(60,79,140,0.5); //标题字体颜色
+        background-color: #F7F8FC;
+        border-bottom: 0px solid #e8e8e8;
+    }
+    .ant-table-tbody>tr>td{
+        background-color:#fff;
+        border-bottom: 8px solid #F7F8FC;
     }
     .ant-spin-container {
         nz-pagination {
@@ -114,4 +120,63 @@ body {
     input {
         width: 165px;
     }
-}
\ No newline at end of file
+}
+
+// D版本更改背景颜色修改
+nz-layout {
+    .ant-layout {
+        background:#F7F8FC;
+    }
+    .list[_ngcontent-c3]{
+        background-color: #F7F8FC;
+        padding: 0px !important; 
+    }
+}
+// onboard-vnf-vm页面调整
+// 頭部導航
+.ant-tabs-bar {
+    box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+    border-bottom:none !important;
+    background-color: #fff;
+}
+.ant-tabs-nav {
+    padding-left: 15px !important;
+    padding-top: 14px !important; 
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+    background-color: #fff !important;
+    border: 1px solid #fff !important;
+    border-radius: 2px !important;
+    margin-right: 0px !important;
+    padding: 0 35px !important;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+    background: #fff !important;
+    border-color: #7BC7F3 !important;
+    color: #7BC7F3 !important;
+}
+.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content {
+    padding: 20px;
+}
+.ant-tabs.ant-tabs-card > .ant-tabs-bar .ant-tabs-nav-container {
+    height: 55px !important;
+}
+.ant-upload.ant-upload-drag {
+    border: 2px dashed #d9d9d9 !important;
+}
+.ant-upload.ant-upload-drag p.ant-upload-text {
+    color:#42548F !important;
+    font-family:"ArialMT" !important;
+    font-size: 13px !important;
+}
+// 時間框
+.ant-calendar-picker .ant-input {
+    background-color: #fff;
+    border-color: #EEEEEE;
+}
+.ant-calendar-picker:hover {
+    border-color: #58B7F9;
+}
+.ant-calendar-picker {
+    width: 234px !important;
+}