feat:add detail model of slicing nsi page and add nssi detail model Base code

Change-Id: I1636bc07415a8e6588bfa742333c684351082d62
Issue-ID: USECASEUI-369
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

1 files changed, 64 insertions, 4 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
index a90a90d1..47bd9e59 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
@@ -1,4 +1,64 @@
-<p>
-  nsi-model works!
-  <button (click)="button()">我是nsi--button</button>
-</p>
+<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Carry Slicing Businress List ：'" [nzFooter]="null">
+  <nz-table
+          #businessTable
+          [nzData]="businessList"
+          [nzShowPagination]="false"
+          nzHideOnSinglePage
+  >
+    <thead>
+    <tr>
+      <th>Service Instance Id</th>
+      <th>Service Instance Name</th>
+      <th>Service Type</th>
+      <th>Status</th>
+      <th width="100px">Detail</th>
+    </tr>
+    </thead>
+    <tbody>
+    <ng-template ngFor let-data [ngForOf]="businessTable.data" let-i="index">
+      <tr>
+        <td>{{ data.service_instance_id }}</td>
+        <td>{{ data.service_instance_name }}</td>
+        <td>{{ data.service_type }}</td>
+        <td>{{ data.service_snssai }}</td>
+        <td>{{ data.orchestration_status }}</td>
+        <td>
+          <a (click)="showBusinessDetail(data)">detail</a>
+        </td>
+      </tr>
+    </ng-template>
+    </tbody>
+  </nz-table>
+</nz-list>
+<nz-list class="taskmodel_list"  nzBordered [nzHeader]="'Include Slicing NSSI List ：'" [nzFooter]="null">
+  <nz-table
+          #nssiTable
+          [nzData]="nssiList"
+          [nzShowPagination]="false"
+          nzHideOnSinglePage
+  >
+    <thead>
+    <tr>
+      <th>Service Instance Id</th>
+      <th>Service Instance Name</th>
+      <th>Service Type</th>
+      <th>Status</th>
+      <th width="100px">Detail</th>
+    </tr>
+    </thead>
+    <tbody>
+    <ng-template ngFor let-data [ngForOf]="nssiTable.data" let-i="index">
+      <tr>
+        <td>{{ data.service_instance_id }}</td>
+        <td>{{ data.service_instance_name }}</td>
+        <td>{{ data.service_type }}</td>
+        <td>{{ data.environment_context }}</td>
+        <td>{{ data.orchestration_status }}</td>
+        <td>
+          <a (click)="showNssiDetail(data)">detail</a>
+        </td>
+      </tr>
+    </ng-template>
+    </tbody>
+  </nz-table>
+</nz-list>
\ No newline at end of file