feat: add slicing management page in services module

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

1 files changed, 149 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
new file mode 100644
index 00000000..f864dc92
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -0,0 +1,149 @@
+<nz-modal [nzVisible]="showDetail" nzWidth="85%" [nzTitle]="moduleTitle" (nzOnCancel)="handleCancel()"
+  (nzOnOk)="handleOk()">
+  <nz-list class="taskmodel_list" [nzDataSource]="checkDetail" nzBordered [nzHeader]="'配置审核详情：'" [nzFooter]="null"
+    [nzRenderItem]="checkItem">
+    <ng-template #checkItem let-check>
+      <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+        <div nz-col nzSpan="10">
+          <span>Task ID： {{ check.id }}</span>
+        </div>
+        <div nz-col nzSpan="8">
+          <span>Task Name： {{ check.name }}</span>
+        </div>
+        <div nz-col nzSpan="6">
+          <span>S-NSSAI：{{ check.snssai }}</span>
+        </div>
+      </nz-list-item>
+      <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+        <div nz-col nzSpan="10">
+          <span>Arrived Time： {{ check.arrivedtime }}</span>
+        </div>
+        <div nz-col nzSpan="8">
+          <span>Status： {{ check.status }}</span>
+        </div>
+      </nz-list-item>
+    </ng-template>
+  </nz-list>
+
+  <nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息：'"
+    [nzFooter]="null" [nzRenderItem]="businessItem">
+    <ng-template #businessItem let-item>
+      <nz-list-item>
+        <span class="ant-typography">Name：</span>
+        {{ item.name }}
+      </nz-list-item>
+      <nz-list-item>
+        <span class="ant-typography">S-NSSAI： </span>
+        {{ item.snssai }}
+      </nz-list-item>
+      <nz-list-item>
+        <span class="ant-typography">Time： </span>
+        {{ item.expiretime }}
+      </nz-list-item>
+      <nz-list-item>
+        <span class="ant-typography">Area： </span>
+        {{ item. area }}
+      </nz-list-item>
+    </ng-template>
+  </nz-list>
+
+  <nz-list class="taskmodel_list" [nzDataSource]="NSTinfo" nzBordered [nzHeader]="'匹配NST信息：'" [nzFooter]="null"
+    [nzRenderItem]="taskItem">
+    <ng-template #taskItem let-item>
+      <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+        <div nz-col nzSpan="12">
+          <span>NST ID： {{ item.id }}</span>
+        </div>
+        <div nz-col nzSpan="12">
+          <span>NST Name： {{ item.name }}</span>
+        </div>
+      </nz-list-item>
+    </ng-template>
+  </nz-list>
+
+
+  <div>
+    <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
+      <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+        <div nz-col nzSpan="12">
+          切片实例 ID：
+          <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+            <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+          </nz-select>
+        </div>
+        <div nz-col nzSpan="8">
+          切片实例名称：{{selectedServiceName}}
+        </div>
+        <div nz-col nzSpan="4">
+          <button nz-button nzType="primary" (click)="resetService()">
+            <i nz-icon class="anticon anticon-plus"></i>
+          </button>
+        </div>
+      </nz-list-item>
+      <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
+        <p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p>
+        <nz-card nzType="inner" nz-col nzSpan="24" nzTitle="无线域：">
+          <div nz-row [nzGutter]="8">
+            <div nz-col nzSpan="12">
+              切片子网实例 ID：
+              <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+                <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+              </nz-select>
+            </div>
+            <div nz-col nzSpan="8">
+              切片子网实例名称：{{selectedServiceName}}
+            </div>
+            <div nz-col nzSpan="4">
+              <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
+                  class="anticon anticon-plus"></i></button>
+              <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
+                  nzTheme="outline"></i></button>
+            </div>
+          </div>
+        </nz-card>
+        <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域：">
+          <div nz-row [nzGutter]="8">
+            <div nz-col nzSpan="12">
+              切片子网实例 ID：
+              <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+                <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+              </nz-select>
+            </div>
+            <div nz-col nzSpan="8">
+              切片子网实例名称：{{selectedServiceName}}
+            </div>
+            <div nz-col nzSpan="4">
+              <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
+                  class="anticon anticon-plus"></i></button>
+              <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
+                  nzTheme="outline"></i></button>
+            </div>
+          </div>
+        </nz-card>
+        <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域：">
+
+          <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle">
+            <div nz-col nzSpan="12">
+              切片子网实例 ID：
+              <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+                <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+              </nz-select>
+            </div>
+            <div nz-col nzSpan="8">
+              切片子网实例名称：{{selectedServiceName}}
+            </div>
+            <div nz-col nzSpan="4">
+              <button nz-button nzType="primary" (click)="resetService()">
+                <i nz-icon class="anticon anticon-plus"></i>
+              </button>
+              <button nz-button nzType="primary">
+                <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
+              </button>
+            </div>
+          </div>
+        </nz-card>
+      </nz-list-item>
+    </nz-list>
+  </div>
+
+</nz-modal>
\ No newline at end of file