Support NS Package Upload for VF-C

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

3 files changed, 592 insertions, 357 deletions

diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts
index 1cf1e359..5738256e 100644
--- a/usecaseui-portal/src/app/onboard.service.ts
+++ b/usecaseui-portal/src/app/onboard.service.ts
@@ -5,169 +5,193 @@ import { onboardTableData, onboardDataVNF, onboardDataPNF } from './dataInterfac
 
 @Injectable()
 export class onboardService {
-
   constructor(private http: HttpClient) { }
+  /* location */
+  baseUrl = "./assets/json";
+  url = {
+    // 数据列表
+    onboardTableData: this.baseUrl + "/onboard-vnf-mf/onboardTableData.json",
+    onboardDataVNF: this.baseUrl + "/onboard-vnf-mf/onboardDataVNF.json",
+    onboardDataPNF: this.baseUrl + "/onboard-vnf-mf/onboardDataPNF.json",
+    //ns sdc
+    sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json",
+    // vnf sdc
+    sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json",
+
+    //创建nspackages
+    creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json",
+       
+    //onboard ns sdc data 
+    onboardNs: this.baseUrl + "/onboard-vnf-mf//listData/onboardNs.json",
+    //onboard VNF sdc data 
+    onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json",
+ 
+    // Delete ns package
+    deleteNspack: this.baseUrl + "/onboard-vnf-mf/deleteNspack.json",
+    // Delete Vnf vfc package
+    deleteVnfPack: this.baseUrl + "/deleteVnfPack.json",
+    // Delete Pnf package
+    deletePnfPack: this.baseUrl + "/deletePnfPack.json",
+
+    // // download ns package
+    // downloadNsData: this.baseUrl + "/downloadData.json",
+    // //download vnf package 
+    // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json"
     
-//   baseUrl = "./assets/json";
-//   url = {
-   
-//     // 数据列表
-//     onboardTableData: this.baseUrl + "/onboardTableData.json",
-//     onboardDataVNF: this.baseUrl + "/onboardDataVNF.json",
-//     onboardDataPNF: this.baseUrl + "/onboardDataPNF.json",
-
-//     //创建nspackages
-//     creatensData: this.baseUrl + "/creatensData.json",
-    
-//     deleteService: this.baseUrl + "/deleteService.json?",
+  }
 
-//     // Delete ns package
-//     deleteNspack: this.baseUrl + "/deleteNspack.json",
-//     // download ns package
-//     downloadNsData: this.baseUrl + "/downloadData.json",
-//   }
+//---------------------------------------------------------------------------------------
+  /* line up 线上*/
+  // baseUrl = "/api/usecaseui/server/v1/uui-lcm/";
+  // baseUrlUp = "/api/usecaseui/server/v1/";
+  // url = {
+  //   // 数据列表Data
+  //   onboardTableData: this.baseUrl + "ns-packages",
+  //   onboardDataVNF: this.baseUrl + "vnf-packages",
+  //   onboardDataPNF: this.baseUrl + "pnf-packages",
+  //   //ns sdc
+  //   sdc_nsListData: this.baseUrl + "sdc-ns-packages",
+  //   //vnf sdc
+  //   sdc_vnfListData: this.baseUrl + "sdc-vf-packages",
+
+  //   //创建 creatensData
+  //   creatensData: this.baseUrl + "_jsonData",  //本地
+
+  //   //onboard
+  //   //onboard ns sdc data 
+  //   onboardNs: this.baseUrl + "ns-packages",
+  //   //onboard VNF sdc data 
+  //   onboardVNF: this.baseUrl + "vf-packages",
+
+  //   // Delete ns package
+  //   deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=XXXXX",
+  //   // Delete Vnf vfc package
+  //   deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=XXXXX",
+  //   // Delete Pnf package
+  //   deletePnfPack: this.baseUrl + "",
+
+  //   // // download ns package
+  //   // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX",
+  //   // //download vnf package 
+  //   // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX"
+    
+  // }
 
+  //-------------------------------------------------------------------------------------
   // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1';
  
-  baseUrl = '/api/usecaseui/server/v1';
-  url={
-    // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
-    // homeLineData:this.baseUrl + "/...........",
-    // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
-    // servicesTableData:this.baseUrl + "/xxxxxxxx.json",
-    // onboardTableData:this.baseUrl + "/xxxxxxx.json",
+  // baseUrl = '/api/usecaseui/server/v1';
+  // url={
+  //   // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0",
+  //   // homeLineData:this.baseUrl + "/...........",
+  //   // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx",
+  //   // servicesTableData:this.baseUrl + "/xxxxxxxx.json",
+  //   // onboardTableData:this.baseUrl + "/xxxxxxx.json",
     
-    // 数据列表
-    onboardTableData: this.baseUrl + "/uui-lcm/ns-packages",
-    onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages",
-    onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages",
+  //   // 数据列表
+  //   onboardTableData: this.baseUrl + "/uui-lcm/ns-packages",
+  //   onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages",
+  //   onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages",
 
-    //创建nspackages
-    // creatensData: this.baseUrl + "/creatensData.json",
+  //   //创建nspackages
+  //   // creatensData: this.baseUrl + "/creatensData.json",
     
-    // deleteService: this.baseUrl + "/deleteService.json?",
+  //   // deleteService: this.baseUrl + "/deleteService.json?",
 
-    // Delete ns package
-    deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage",
-    // download ns package
-    downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage",
-  }
+  //   // Delete ns package
+  //   deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage",
+  //   // download ns package
+  //   downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage",
+  // }
 
-//   创建ns数据
-//   getCreatensData(paramsObj):Observable<HttpResponse<creatensData>>{
-//     let params = new HttpParams({fromObject:paramsObj});
-//     return this.http.get<creatensData>(this.url.creatensData,{observe:'response',params});
-//     // return this.http.post<any>(this.url.createService,requestBody);
-//   }
-
-//   getCreatensData() {
-//     return this.http.get(this.url.creatensData);
-//   }
-  // onboard NS Data
-  getOnboardTableData(paramsObj): Observable<HttpResponse<onboardTableData>> {
-    // let params = new HttpParams({ fromObject: paramsObj });
-    // return this.http.get<onboardTableData>(this.url.onboardTableData, { observe: 'response', params });
-    return this.http.get<any>(this.url["onboardTableData"]);
-  }
-  // Ns Id 
-  getNsIdData(paramsObj): Observable<HttpResponse<onboardDataVNF>> {
-    // let params = new HttpParams({ fromObject: paramsObj });
-    // return this.http.get<onboardDataVNF>(this.url.onboardDataVNF, { observe: 'response', params });
-    return this.http.post<any>(this.url["onboardDataVNF"],{});
+//-----------------------------------Function-start------------------------------------------------------
+  /* 查询数据列表 */
+  // NS Data
+  getOnboardTableData(paramsObj): Observable<HttpResponse<any>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    return this.http.get<any>(this.url.onboardTableData, { observe: 'response', params });
+    // return this.http.get<any>(this.url["onboardTableData"]);
   }
 
-  // Delete ns package
-  deleteNsIdData(paramsObj): Observable<HttpResponse<any>> {
+  // NS SDC Data
+  getSDC_NSTableData(paramsObj): Observable<HttpResponse<onboardTableData>> {
     let params = new HttpParams({ fromObject: paramsObj });
-    // return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params });
-    return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+    return this.http.get<onboardTableData>(this.url.sdc_nsListData, { observe: 'response', params });
+    // return this.http.get<any>(this.url["onboardTableData"]);
   }
-  // download  
-  downloadNsData(paramsObj): Observable<HttpResponse<any>> {
-    console.log(66,paramsObj)
+  
+ // VNF Data
+  getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> {
     let params = new HttpParams({ fromObject: paramsObj });
-    return this.http.get<any>(this.url.downloadNsData, { observe: 'response', params });
+    return this.http.get<any>(this.url.onboardDataVNF, { observe: 'response', params });
   }
-  // onboard VNF Data
-  getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> {
-    // let params = new HttpParams({ fromObject: paramsObj });
-    return this.http.post<any>(this.url.onboardDataVNF, paramsObj);
+ // onboard VNF sdc Data
+  getSDC_VNFTableData(){
+    return this.http.get<any>(this.url["sdc_vnfListData"]);
   }
 
-  // onboard PNF Data
+  // PNF Data
   getOnboardTablePnfData(paramsObj): Observable<HttpResponse<onboardDataPNF>> {
     let params = new HttpParams({ fromObject: paramsObj });
-    return this.http.post<any>(this.url.onboardDataPNF, paramsObj);
+    return this.http.get<any>(this.url.onboardDataPNF, { observe: 'response', params });
   }
-  testObservable() {
-    let myObservable = new Observable((observer) => {
-      observer.next(1);
-      observer.next((n) => {
-        console.log(3 + n);
-      })
-      setTimeout(() => {
-        observer.next(66666)
-      }, 100)
-      observer.next(() => {
-        setTimeout((n) => {
-          console.log("9999---" + n);
-        }, 10)
-      })
-      // observer.error(2);
-      // observer.complete();
-    });
-
-    myObservable.subscribe((e) => {
-      if (typeof e == "function") {
-        e(5)
-      }
-      console.log(e);
-    }, (err) => {
-      console.log(err);
-    }, () => {
-      console.log(555);
-    })
+//-------------------------------------------------------------------------------------
+
+  //创建--上传前拖拽文件后，获取到id  //线上接口 post
+  // getCreatensData(url_upId,requestBody) {
+  //   return this.http.post<any>(this.url.creatensData.replace("_jsonData",url_upId),requestBody);  //线上
+  // }
+
+   //创建--上传前拖拽文件后，获取到id //本地json get
+   getCreatensData(url_upId) {
+    return this.http.get<any>(this.url.creatensData.replace("_jsonData",url_upId)); 
   }
 
-  //---------------------------------------------------------------------------------
+  //------------------------------------------------------------------------------
+  //onboard sdc ns 
+  getNsonboard(requestBody) {
+    return this.http.post<any>(this.url["onboardNs"], requestBody);
+  }
+  //onboard sdc vnf
+  getVnfonboard(requestBody) {
+    return this.http.post<any>(this.url["onboardVNF"], requestBody);
+  }
 
-  // // 服务详情数据 
-  // getInstanceDetails(id){
-  //   let url = this.baseUrl + "/detailsData.json?id=" + id;
-  //   return this.http.get<instanceDetail>(url);
-  // }
+  //--------------------------------------------------------------------------
+  // Delete ns vfc package
+  deleteNsIdData(paramsObj): Observable<HttpResponse<any>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    console.log(11111,params)
+    return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params });
+    // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+  }
 
-  // 删除接口
-//   deleteInstance(obj) {
-//     let httpOptions = {
-//       headers: new HttpHeaders({
-//         'Content-Type': 'application/json',
-//         'Accept': 'application/json',
-//         'Authorization': 'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA=='
-//       }),
-//       body: {
-//         'globalSubscriberId': obj.globalSubscriberId,
-//         'serviceType': obj.serviceType
-//       }
-//     };
-//     return this.http.get<any>(this.url.deleteService);  //本地模拟
-//     // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
-//   }
-
-  // 时间格式化 毫秒转正常值
-  dateformater(vmstime) {
-    if (!vmstime) {
-      return ''
-    }
-    let mstime = Number((vmstime + '').slice(0, 13));
-    let time = new Date(mstime);
-    let year = time.getFullYear();
-    let month = time.getMonth() + 1;
-    let day = time.getDate();
-    let hours = time.getHours();
-    let minutes = time.getMinutes();
-    let seconds = time.getSeconds();
-    let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
-    return formattime;
+  // Delete Vnf vfc package
+  deleteVnfIdData(paramsObj): Observable<HttpResponse<any>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    console.log(11111,params)
+    return this.http.get<any>(this.url.deleteVnfPack, { observe: 'response', params });
+    // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
   }
+
+  // Delete Pnf package
+  deletePnfIdData(paramsObj): Observable<HttpResponse<any>> {
+    let params = new HttpParams({ fromObject: paramsObj });
+    console.log(11111,params)
+    return this.http.get<any>(this.url.deletePnfPack, { observe: 'response', params });
+    // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params });
+  }
+//------------------------------------------------------------------------------
+  // download  nspak
+  // downloadNsData(paramsObj): Observable<HttpResponse<any>> {
+  //   console.log(66,paramsObj)
+  //   let params = new HttpParams({ fromObject: paramsObj });
+  //   return this.http.get<any>(this.url.downloadNsData, { observe: 'response', params });
+  // }
+  //  // download  Vnfpak
+  // downloadVnfData(){
+  //   return this.http.get<any>(this.url.downloadVnfData)
+  // }
+//---------------------------------Function-end-------------------------------------------  
+
 }
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 c0e91543..c552ba73 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
@@ -13,18 +13,7 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> Onboard VNF </h3>
-<nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
-    <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-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or
-        other band files</p>
-</nz-upload>
-<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0" style="margin-top: 16px">
-    {{ uploading ? 'Uploading' : 'Start Upload' }}
-</button>
+
 <!-- <button nz-button nzType="primary" (click)="showModal()">
     <i class="anticon anticon-plus-circle-o"></i><span> Create </span>
 </button>
@@ -45,12 +34,32 @@
 </nz-tabset> -->
 
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, url)">
+    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab,nsdInfoId,url)">
         <!-- nsList -->
         <div class="list" *ngIf="tab === 'NS'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+            <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <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-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
+                style="margin-top: 16px">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+            <!-- tablist -->
+            <nz-table #nzTable [nzData]="tableData" 
+                nzShowSizeChanger [nzFrontPagination]="true" 
+                [nzShowQuickJumper]="true"
+                [nzPageSizeOptions]="[5,10,15,20]" 
+                [nzTotal]='total' [(nzPageSize)]="pageSize" 
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading" 
+                nzSize="middle" 
+                (nzPageSizeChange)="searchNsData(true)">
+                <!-- (nzPageIndexChange)="searchNsData()"  -->
                 <thead (nzSortChange)="sort($event)" nzSingleSort>
                     <tr>
                         <th nzWidth="5%">NO</th>
@@ -60,7 +69,7 @@
                         <th nzWidth="15%">Onboarding State</th>
                         <th nzWidth="20%">Operational State</th>
                         <th nzWidth="20%">Usage State</th>
-                        <th nzWidth="15%"></th>
+                        <th nzWidth="15%">Operation button</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -76,61 +85,49 @@
                         <td *ngIf="item.version">{{ item.version }}</td>
                         <td>
                             <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
+                        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span>
                             <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> -->
                         </td>
                         <td>{{item.nsdOperationalState}}</td>
                         <td>{{item.nsdUsageState}}</td>
                         <td>
                             <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"></i>
-                            <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
-                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
+                            <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> -->
+                            <i class="anticon anticon-delete" (click)="deleteNsService(i,item.id)" *ngIf="item.id"></i>
+                            <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> -->
                         </td>
                     </tr>
                 </tbody>
             </nz-table>
         </div>
         <!-- VNFList -->
-        <!-- <div class="list" *ngIf="tab === 'VNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
-                        <th nzWidth="20%">Type</th>
-                        <th nzWidth="20%">Version</th>
-                        <th nzWidth="15%">Onboarding State</th>
-                        <th nzWidth="20%">Operational State</th>
-                    </tr>
-                </thead> -->
-        <!-- <tbody>
-                    <tr *ngFor="let item of nzTable.data; let i = index; ">
-                        <td>{{item.id}}</td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.type}}</td>
-                        <td>{{item.version}}</td>
-                        <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                        </td>
-                        <td> -->
-        <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-        <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.id)"></i>
-                            <i class="anticon anticon-download" (click)="downloadVnfService(item.id)" *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id }}"></i>
-                        </td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </div> -->
         <div class="list" *ngIf="tab === 'VNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+            <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <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-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
+                style="margin-top: 16px">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+            <!-- tabList -->
+            <nz-table #nzTable [nzData]="tableData" 
+                nzShowSizeChanger
+                [nzFrontPagination]="true" 
+                [nzShowQuickJumper]="true" 
+                [nzPageSizeOptions]="[5,10,15,20]" 
+                [nzTotal]= 'total'
+                [(nzPageSize)]="pageSize" 
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading"
+                nzSize="middle"
+                (nzPageSizeChange)="searchVnfData(true)">
+                 <!--(nzPageIndexChange)="searchVnfData()" -->
                 <thead (nzSortChange)="sort($event)" nzSingleSort>
                     <tr>
                         <th nzWidth="5%">NO</th>
@@ -146,23 +143,25 @@
                     <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
                     <tr *ngFor="let item of nzTable.data; let i = index; ">
                         <!-- <td>{{i+1}}</td> -->
-                        <td>{{item.id}}</td>
-                        <td>{{item.vnfProductName}}</td>
-                        <td>{{item.vnfdVersion}}</td>
+                        <td *ngIf="item.id">{{item.id}}</td>
+                        <td *ngIf="item.uuid">{{item.uuid}}</td>
+                        <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+                        <td *ngIf="item.name">{{item.name}}</td>
+                        <td  *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
+                        <td  *ngIf="item.version">{{item.version}}</td>
                         <td>{{item.onboardingState}}</td>
                         <td>{{item.usageState}}</td>
                         <td>{{item.operationalState}}</td>
                         <!-- <td>
-                <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                </td> -->
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span>
+                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                        </td> -->
                         <td>
                             <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
-                                *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i>
-                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
+                            <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> -->
+                            <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id}}" *ngIf="item.id"></i>
                         </td>
                     </tr>
                     <!-- </ng-template> -->
@@ -170,44 +169,32 @@
             </nz-table>
         </div>
         <!-- PNFList -->
-        <!-- <div class="list" *ngIf="tab === 'PNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
-                <thead (nzSortChange)="sort($event)" nzSingleSort>
-                    <tr>
-                        <th nzWidth="5%">NO</th>
-                        <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th>
-                        <th nzWidth="20%">Type</th>
-                        <th nzWidth="20%">Version</th>
-                        <th nzWidth="15%">Onboarding State</th>
-                        <th nzWidth="20%">Operational State</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr *ngFor="let item of nzTable.data; let i = index; ">
-                        <td>{{item.id}}</td>
-                        <td>{{item.name}}</td>
-                        <td>{{item.type}}</td>
-                        <td>{{item.version}}</td>
-                        <td>
-                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-                                            'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-                        </td>
-                        <td>
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataPnfService(item.id)"></i>
-                            <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"  *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)" id="{{ item.id }}"></i>
-                        </td>
-                    </tr>
-                </tbody>
-            </nz-table>
-        </div> -->
         <div class="list" *ngIf="tab === 'PNF'">
-            <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
-                [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-                [nzLoading]="loading" nzSize="middle" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+            <h3 class="title"> Onboard {{tabTitle}} </h3>
+            <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-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
+            </nz-upload>
+            <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
+                style="margin-top: 16px">
+                {{ uploading ? 'Uploading' : 'Start Upload' }}
+            </button>
+            <!-- tabList -->
+            <nz-table #nzTable [nzData]="tableData" 
+                nzShowSizeChanger
+                [nzFrontPagination]="true" 
+                [nzShowQuickJumper]="true" 
+                [nzPageSizeOptions]="[5,10,15,20]" 
+                [nzTotal]= 'total'
+                [(nzPageSize)]="pageSize" 
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading"
+                nzSize="middle"
+                (nzPageSizeChange)="searchPnfData(true)">
+                 <!-- (nzPageIndexChange)="searchPnfData()"  -->
                 <thead (nzSortChange)="sort($event)" nzSingleSort>
                     <tr>
                         <th nzWidth="5%">NO</th>
@@ -228,16 +215,15 @@
                         <td>{{item.pnfdOnboardingState}}</td>
                         <td>{{item.pnfdUsageState}}</td>
                         <!-- <td>
-        <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
-        'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
-        <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
-        </td> -->
+                            <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded',
+                                'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span>
+                            <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress>
+                        </td> -->
                         <td>
                             <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> -->
-                            <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)"
-                                *ngIf="item.uuid"></i>
-                            <i class="anticon anticon-download" (click)="downloadService(item.id)"></i>
-                            <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></i>
+                            <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> -->
+                            <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> -->
+                            <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)"></i>
                         </td>
                     </tr>
                     <!-- </ng-template> -->
@@ -245,4 +231,5 @@
             </nz-table>
         </div>
     </nz-tab>
-</nz-tabset>
\ No newline at end of file
+</nz-tabset>
+
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 77befe17..650f2162 100644
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -5,6 +5,7 @@ import { onboardService } from '../../onboard.service';
 import { slideToRight } from '../../animates';
 import { NzMessageService, UploadFile } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -14,38 +15,185 @@ import { filter } from 'rxjs/operators';
 })
 export class OnboardVnfVmComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
-
+  //url
+  url = {
+    // ns: 'http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content',
+    // vnf: 'http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content',
+    // pnf: 'http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content'
+    ns: 'https://jsonplaceholder.typicode.com/posts/',
+    vnf: 'https://jsonplaceholder.typicode.com/posts/',
+    pnf: 'https://jsonplaceholder.typicode.com/posts/',
+  };
+  nsdInfoId = '';
+  vnfPkgId ='';
+  pnfdInfoId = '';
+  tabTitle = "NS";
   uploading = false;
-  fileList: UploadFile[] = [];
-  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService) { }
+  fileListNS: UploadFile[] = [];
+  fileListVNF: UploadFile[] = [];
+  fileListPNF: UploadFile[] = [];
+  constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { }
 
+  //default 默认调用ns数据
   ngOnInit() {
+    console.log("11111111111111")
     this.getTableData();
   }
 
-  beforeUpload = (file: UploadFile): boolean => {
-    this.fileList.push(file);
-    console.log('beforeUpload')
-    // this.myhttp.getCreatensData()
-    //   .subscribe((data) => {
-    //     console.log(33, data);
-    //   }, (err) => {
-    //     console.log(err);
-    //   })
+  //表格数据
+  tableData:any;
+  sdcData:any;
+  vfcData:any;
+  pageIndex = 1;
+  pageSize = 10;
+  total;
+  loading = false;
+  sortName = null;
+  sortValue = null;
+  tabs = ['NS', 'VNF', 'PNF'];
+  
+  isVisible = false;
+  isOkLoading = false;
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleCancel(): void {
+    this.isVisible = false;
+  }
+
+  // 处理tab切换 请求数据
+  handleTabChange(tab,nsdInfoId,url) {
+    this.tabTitle = tab;
+    console.log(tab);
+    console.log(this.url);
+    switch (tab) {
+      case 'NS':
+        // this.pageIndex = 1;
+        // this.pageSize = 10;
+          this.getTableData();
+        break
+      case 'VNF':
+        // this.pageIndex = 1;
+        // this.pageSize = 10;
+          this.getTableVnfData()
+        break
+      case 'PNF':
+        // this.pageIndex = 1;
+        // this.pageSize = 10;
+          this.getTablePnfData()
+        break
+    }
+  }
+
 
+  //before put 创建--上传之前将文件拖拽到页面时
+    // requestBody = {
+    //        "userDefinedData": {
+    //             "additionalProp1": "string",
+    //             "additionalProp2": "string",
+    //             "additionalProp3": "string"
+    //        }
+    //   }
+    //  requestBody = {};
+   // ns  beforeUpload
+  beforeUploadNS = (file: UploadFile): boolean => {
+    this.fileListNS.push(file);
+    console.log('beforeUpload');
+      // this.myhttp.getCreatensData("createNetworkServiceData",requestBody)//线上
+      this.myhttp.getCreatensData("creatensDataNS")  //本地
+        .subscribe((data) => {
+          console.log("拖拽文件后返回的数据NS-->", data);
+          this.nsdInfoId = data["id"];
+          console.log("拖拽文件后返回的数据的id-->",this.nsdInfoId);
+        }, (err) => {
+          console.log(err);
+        })
     return false;
   }
 
-  handleUpload(): void {
+  //vnf  beforeUpload
+  beforeUploadVNF = (file: UploadFile,tab): boolean => {
+    this.fileListVNF.push(file);
+    console.log('beforeUpload');
+      // this.myhttp.getCreatensData("createVnfData",requestBody)//线上
+      this.myhttp.getCreatensData("creatensDataVNF") //本地
+        .subscribe((data) => {
+          console.log("拖拽文件后返回的数据VNF-->", data);
+          this.vnfPkgId = data["id"];
+          console.log("拖拽文件后返回的数据的id-->",this.vnfPkgId);
+        }, (err) => {
+          console.log(err);
+        })
+    return false;
+  }
+
+  // //pnf eforeUpload
+  beforeUploadPNF = (file: UploadFile,tab): boolean => {
+    this.fileListPNF.push(file);
+    console.log('beforeUpload');
+      // this.myhttp.getCreatensData("createPnfData",requestBody)  //线上
+      this.myhttp.getCreatensData("creatensDataPNF")  //本地
+        .subscribe((data) => {
+          console.log("拖拽文件后返回的数据PNF-->", data);
+          this.pnfdInfoId = data["id"];
+          console.log("拖拽文件后返回的数据的id-->",this.pnfdInfoId);
+        }, (err) => {
+          console.log(err);
+        })
+    return false;
+  }
+    
+
+  //拖拽后点击上传按钮
+  onClick (tab) {
+    switch (tab) {
+      case 'NS':
+      console.log(this.nsdInfoId);
+      // this.handleUpload('http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content');
+        this.handleUpload(this.url.ns,tab);
+        this.getTableData();
+        break
+      case 'VNF':
+      console.log(this.vnfPkgId);
+     // this.handleUpload('http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content'); 
+        this.handleUpload(this.url.vnf,tab); 
+        this.getTableVnfData()
+        break
+      case 'PNF':
+      console.log(this.pnfdInfoId);
+      // this.handleUpload('http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content');
+        this.handleUpload(this.url.pnf,tab);  
+        this.getTablePnfData();  
+        break
+    }
+  }
+
+  //put Upload 上传
+  handleUpload(url,tab): void { 
     console.log('startUpload')
     const formData = new FormData();
     // tslint:disable-next-line:no-any
-    this.fileList.forEach((file: any) => {
-      formData.append('files[]', file);
-    });
+    switch (tab) {
+      case 'NS':
+      this.fileListNS.forEach((file: any) => {
+        formData.append('files[]', file);
+      });
+    break
+    case 'VNF':
+      this.fileListVNF.forEach((file: any) => {
+        formData.append('files[]', file);
+      });
+    break
+    case 'PNF':
+      this.fileListPNF.forEach((file: any) => {
+        formData.append('files[]', file);
+      });
+    break
+    }
     this.uploading = true;
     // You can use any AJAX library you like
-    const req = new HttpRequest('POST', 'https://jsonplaceholder.typicode.com/posts/', formData, {
+    const req = new HttpRequest('POST', url, formData, {
       reportProgress: true,
       withCredentials: true
     });
@@ -55,7 +203,6 @@ export class OnboardVnfVmComponent implements OnInit {
       .subscribe(
         (event: {}) => {
           this.uploading = false;
-          this.getTableData();
           console.log('upload successfully')
           this.msg.success('upload successfully.');
         },
@@ -66,30 +213,9 @@ export class OnboardVnfVmComponent implements OnInit {
         }
       );
   }
-  //表格数据
-  tableData = [];
-  sdData = [];
-  vfcData = [];
-  pageIndex = 1;
-  pageSize = 10;
-  total = 100;
-  loading = false;
-  sortName = null;
-  sortValue = null;
-  tabs = ['NS', 'VNF', 'PNF'];
-  
-  isVisible = false;
-  isOkLoading = false;
-  showModal(): void {
-    this.isVisible = true;
-  }
 
-  handleCancel(): void {
-    this.isVisible = false;
-  }
-  // getCreatensData() {
+//----------------------------------------------------------------------------------------------
 
-  // }
   // 获取NS列表
   getTableData() {
     // 查询参数: 当前页码，每页条数，排序方式
@@ -98,31 +224,31 @@ export class OnboardVnfVmComponent implements OnInit {
       pageSize: this.pageSize,
       nameSort: this.sortValue
     }
-
+    //vfc
     this.myhttp.getOnboardTableData(paramsObj)
-      .subscribe((data) => {
-        console.log(99, data);
-        this.total = data.body.total;
-        this.sdData = data.body.tableList;
-        console.log(this.sdData);
-      }, (err) => {
-        console.log(err);
-      })
-
-    this.myhttp.getOnboardTablePnfData(paramsObj)
-      .subscribe((data) => {
-        console.log(222, data);
-        this.total = data.body.total;
-        this.vfcData = data.body.tableList;
-        console.log(this.vfcData);
-        this.tableData = this.vfcData.concat(this.sdData)
-        console.log(99, this.tableData)
-      }, (err) => {
-        console.log(err);
-      })
+    .subscribe((data) => {
+      console.log(data)
+      this.total = data["body"].length; //body length
+      console.log( this.total)
+      // this.sdData = data.body.tableList;
+      this.vfcData = data.body;
+      console.log(typeof this.vfcData)
+      console.log("NSlist-vfc-->",data.body)
+    }, (err) => {
+      console.log(err);
+    })
+    // sdc
+    this.myhttp.getSDC_NSTableData(paramsObj)
+    .subscribe((data) => {
+      console.log('NSlist-sdc-->',data)
+      this.sdcData = data.body;
+      this.tableData = this.vfcData.concat(this.sdcData)
+    }, (err) => {
+     console.log(err);
+    })
   }
 
-  // 获取VNF列表
+  // 获取vnf列表
   getTableVnfData() {
     // 查询参数: 当前页码，每页条数，排序方式
     let paramsObj = {
@@ -133,15 +259,28 @@ export class OnboardVnfVmComponent implements OnInit {
 
     this.myhttp.getOnboardTableVnfData(paramsObj)
       .subscribe((data) => {
-        console.log(222, data);
-        this.total = data.body.total;
-        this.tableData = data.body.tableList;
+        console.log("vnfList-->", data);
+        // this.total = data["body"].length; //body length
+        // console.log( this.total)
+        this.vfcData = data.body;
+        // this.tableData = data.body;
+        console.log("vnfList-vfc-->",data.body)
+      }, (err) => {
+        console.log(err);
+      })
+
+    // sdc
+    this.myhttp.getSDC_VNFTableData()
+      .subscribe((data) => {
+        console.log('vnfList-sdc-->',data)
+        this.sdcData = data;
+        this.tableData = this.vfcData.concat(this.sdcData)
       }, (err) => {
         console.log(err);
       })
   }
 
-  // 获取VNF列表
+  // 获取pnf列表
   getTablePnfData() {
     // 查询参数: 当前页码，每页条数，排序方式
     let paramsObj = {
@@ -152,30 +291,14 @@ export class OnboardVnfVmComponent implements OnInit {
 
     this.myhttp.getOnboardTablePnfData(paramsObj)
       .subscribe((data) => {
-        console.log(222, data);
-        this.total = data.body.total;
-        this.tableData = data.body.tableList;
+        console.log("pnfList-->", data);
+        this.total = data["body"]; //body length
+        this.tableData = data.body;
       }, (err) => {
         console.log(err);
       })
   }
-  // 处理tab切换
-  handleTabChange(tab) {
-    console.log(tab)
-    switch (tab) {
-      case 'NS':
-        // this.tableData = []
-        
-        this.getTableData()
-        break
-      case 'VNF':
-        this.getTableVnfData()
-        break
-      case 'PNF':
-        this.getTablePnfData()
-        break
-    }
-  }
+
 
   sort(sort: { key: string, value: string }): void {
     console.log(sort);
@@ -183,16 +306,66 @@ export class OnboardVnfVmComponent implements OnInit {
     this.sortValue = sort.value;
     this.getTableData();
   }
-  searchData(reset:boolean = false){
-    console.log(reset)
-    this.getTableData();
-  }
-  // onboard
-  updataService(id) {
+  
+//-----------------------------------------------------------------------------------
+
+  //选择条数
+  // searchNsData(reset: boolean = false) {
+  //   console.log('dddd',reset)
+  //   this.getTableData();
+  // }
+
+
+  /* onboard  上传按钮 */
+  // ns onboard
+  updataNsService(id) {
     console.log(id);
+    let requestBody = {
+        "csarId": id
+    }
+    this.myhttp.getNsonboard(requestBody)
+      .subscribe((data) => {
+        console.log('onboard ns sdc', data);
+      }, (err) => {
+        console.log(err);
+      })
+    
+  }
+
+  // searchVnfData(reset: boolean = false) {
+  //   console.log('vvvv',reset)
+  //   this.getTableVnfData();
+  // }
+
+  // vnf onboard
+  updataVnfService(id) {
+    console.log(id)
+    let requestBody = {
+      "csarId": id
   }
-  //delete
-  deleteService(index,pkgid) {
+  this.myhttp.getVnfonboard(requestBody)
+    .subscribe((data) => {
+      console.log('onboard vnf sdc', data);
+    }, (err) => {
+      console.log(err);
+    })
+  }
+
+  // searchPnfData(reset: boolean = false) {
+  //   console.log('pppp',reset)
+  //   this.getTablePnfData();
+  // }
+
+  // pnf onboard ?
+  updataPnfService(id) {
+    console.log('pnf',id);
+  }
+
+
+  //--------------------------------------------------------------------------------
+  /* delete  删除按钮 */
+  //delete nsItem
+  deleteNsService(index,pkgid) {
     console.log(pkgid)
     console.log("deleteService!");
     this.myhttp.deleteNsIdData(pkgid)
@@ -201,16 +374,67 @@ export class OnboardVnfVmComponent implements OnInit {
       }, (err) => {
         console.log(err);
       })
+      console.log(index)
+    this.tableData.splice(index, 1)
+    console.log(this.tableData.length)
+	//  this.getTableData()
+   }
+
+  //delete vnfItem
+  deleteVnfService(index,pkgid) {
+    console.log(pkgid)
+    console.log("deleteVnfService!");
+    this.myhttp.deleteVnfIdData(pkgid)
+      .subscribe((data) => {
+        console.log(44, data);
+      }, (err) => {
+        console.log(err);
+      })
+      console.log(index)
     this.tableData.splice(index, 1)
+    console.log(this.tableData.length)
+    this.getTableVnfData()
   }
-  downloadService(id) {
-    console.log('download')
-    console.log(id)
-    this.myhttp.downloadNsData(id)
-    .subscribe((data) => {
-      console.log(44, data);
-    }, (err) => {
-      console.log(err);
-    })
+
+  //delete PnfItem
+  deletePnfService(index,pkgid) {
+    console.log(pkgid)
+    console.log("deletePnfService!");
+    this.myhttp.deletePnfIdData(pkgid)
+      .subscribe((data) => {
+        console.log(44, data);
+      }, (err) => {
+        console.log(err);
+      })
+      console.log(index)
+    this.tableData.splice(index, 1)
+    console.log(this.tableData.length)
+    this.getTablePnfData()
   }
+
+
+//--------------------------------------------------------------------------------------
+  //download 下载
+  // downloadNsService(id) {
+  //   console.log('download')
+  //   console.log(id)
+  //   this.myhttp.downloadNsData(id)
+  //   .subscribe((data) => {
+  //     console.log(44, data);
+  //   }, (err) => {
+  //     console.log(err);
+  //   })
+  // }
+
+  // downloadVnfService() {
+  //   console.log('downloadVnf')
+  //   this.myhttp.downloadVnfData()
+  //   .subscribe((data) => {
+  //     console.log('downloadVnf pack', data);
+  //   }, (err) => {
+  //     console.log(err);
+  //   })
+  // }
+
+
 }