feat: add slicing management page in services module

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

15 files changed, 431 insertions, 19 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 333ac520..f579c7e4 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -81,6 +81,9 @@ import { ScaleModelComponent } from './views/services/services-list/scale-model/
 import { HealModelComponent } from './views/services/services-list/heal-model/heal-model.component';
 import { Monitor5gComponent } from './views/fcaps/monitor-5g/monitor-5g.component';
 import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component';
+import { SlicingTaskManagementComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-management.component';
+import { SlicingResourceManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-resource-management.component';
+import { SlicingTaskModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component';
 
 @NgModule({
   providers: [
@@ -128,7 +131,10 @@ import { SlicingManagementComponent } from './views/services/slicing-management/
     ScaleModelComponent,
     HealModelComponent,
     Monitor5gComponent,
-    SlicingManagementComponent
+    SlicingManagementComponent,
+    SlicingTaskManagementComponent,
+    SlicingResourceManagementComponent,
+    SlicingTaskModelComponent
   ],
   imports: [
     BrowserModule,
diff --git a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts
index f9bf9a9c..5ce0d108 100644
--- a/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/delete-model/delete-model.component.ts
@@ -1,25 +1,25 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-delete-model',
-  templateUrl: './delete-model.component.html',
-  styleUrls: ['./delete-model.component.less']
+    selector: 'app-delete-model',
+    templateUrl: './delete-model.component.html',
+    styleUrls: ['./delete-model.component.less']
 })
 export class DeleteModelComponent implements OnInit {
-  @Input()deleteModalVisible: boolean;
-  @Input()thisService;
-  @Input()terminationType;
-  @Input()loadingAnimateShow;
-  @Input()templateDeleteSuccessFaild;
-  @Input()gracefulTerminationTimeout;
+    @Input() deleteModalVisible: boolean;
+    @Input() thisService;
+    @Input() terminationType;
+    @Input() loadingAnimateShow;
+    @Input() templateDeleteSuccessFaild;
+    @Input() gracefulTerminationTimeout;
 
-  @Output() cancel = new EventEmitter<boolean>();
-  @Output() deleteModalOK = new EventEmitter<any>();
+    @Output() cancel = new EventEmitter<boolean>();
+    @Output() deleteModalOK = new EventEmitter<any>();
 
-  constructor() { }
+    constructor() { }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
     deleteOk() {
         this.deleteModalVisible = false;
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
index 91062607..59401e02 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
@@ -1,3 +1,8 @@
-<p>
-  slicing-management works!
-</p>
+<nz-tabset>
+  <nz-tab nzTitle="Slicing Task Management">
+    <app-slicing-task-management></app-slicing-task-management>
+  </nz-tab>
+  <nz-tab nzTitle="Slicing Resource Management">
+    <app-slicing-resource-management></app-slicing-resource-management>
+  </nz-tab>
+</nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
new file mode 100644
index 00000000..0408552d
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.html
@@ -0,0 +1,3 @@
+<p>
+  slicing-resource-management works!
+</p>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.less
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts
new file mode 100644
index 00000000..6a22984b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingResourceManagementComponent } from './slicing-resource-management.component';
+
+describe('SlicingResourceManagementComponent', () => {
+  let component: SlicingResourceManagementComponent;
+  let fixture: ComponentFixture<SlicingResourceManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SlicingResourceManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlicingResourceManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
new file mode 100644
index 00000000..38dc48c8
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-resource-management.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slicing-resource-management',
+  templateUrl: './slicing-resource-management.component.html',
+  styleUrls: ['./slicing-resource-management.component.less']
+})
+export class SlicingResourceManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
new file mode 100644
index 00000000..6a5abe88
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
@@ -0,0 +1,37 @@
+<div>
+  <div nz-row>
+    <div nz-col nzSpan="6">
+      <span>Status：</span>
+      <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="selectedValue">
+        <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
+        <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
+        <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
+      </nz-select>
+    </div>
+  </div>
+  <div>
+    <nz-table #basicTable [nzData]="listOfData">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Age</th>
+          <th>Status</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of basicTable.data">
+          <td>{{ data.name }}</td>
+          <td>{{ data.age }}</td>
+          <td>{{ data.status===0?"Checking Configuration":"Creating Slicing" }}</td>
+          <td>
+            <a (click)="showdetail(data)">Show Detail</a>
+          </td>
+        </tr>
+      </tbody>
+    </nz-table>
+  </div>
+  <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData"
+    (cancel)="showDetail=$event">
+  </app-slicing-task-model>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
new file mode 100644
index 00000000..1de685d6
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
@@ -0,0 +1,3 @@
+nz-select {
+    width: 200px;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts
new file mode 100644
index 00000000..a2631a98
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingTaskManagementComponent } from './slicing-task-management.component';
+
+describe('SlicingTaskManagementComponent', () => {
+  let component: SlicingTaskManagementComponent;
+  let fixture: ComponentFixture<SlicingTaskManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SlicingTaskManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlicingTaskManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
new file mode 100644
index 00000000..ad29c5ed
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slicing-task-management',
+  templateUrl: './slicing-task-management.component.html',
+  styleUrls: ['./slicing-task-management.component.less']
+})
+export class SlicingTaskManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+  showDetail: boolean = false;
+  selectedValue = null;
+  detailData: object = {};
+  moduleTitle: string = "";
+  listOfData = [
+    {
+      key: '1',
+      name: 'John Brown',
+      age: 32,
+      status: 0
+    },
+    {
+      key: '2',
+      name: 'Jim Green',
+      age: 42,
+      status: 0
+    },
+    {
+      key: '3',
+      name: 'Joe Black',
+      age: 32,
+      status: 1
+    }
+  ];
+  showdetail(data: any) {
+    console.log(data, this.showDetail)
+    this.detailData = data;
+    this.showDetail = true;
+    this.moduleTitle = data.status === 0 ? "Check Configuration" : "View Progress";
+  }
+}
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
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less
new file mode 100644
index 00000000..aad9a554
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.less
@@ -0,0 +1,15 @@
+nz-select {
+    width: 70%;
+}
+
+.taskmodel_list {
+    margin-bottom: 20px;
+
+    .listitem_subtitle {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.85);
+        margin-bottom: 16px;
+        font-weight: 500;
+    }
+
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts
new file mode 100644
index 00000000..a6c02728
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingTaskModelComponent } from './slicing-task-model.component';
+
+describe('SlicingTaskModelComponent', () => {
+  let component: SlicingTaskModelComponent;
+  let fixture: ComponentFixture<SlicingTaskModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SlicingTaskModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlicingTaskModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
new file mode 100644
index 00000000..2abe8d44
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-slicing-task-model',
+  templateUrl: './slicing-task-model.component.html',
+  styleUrls: ['./slicing-task-model.component.less']
+})
+export class SlicingTaskModelComponent implements OnInit {
+  @Input() showDetail: boolean;
+  @Input() moduleTitle: string;
+  @Input() modelData: object;
+  @Output() cancel = new EventEmitter<boolean>();
+
+  constructor() { }
+  checkDetail: [{}] = [{
+    id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",
+    name: "5G Slice eMMB",
+    snssai: "1-010101",
+    arrivedtime: "2019-10-29 10:00",
+    status: "Checking"
+  }]; //配置审核详情
+  businessRequirement: [{}] = [{
+    name: "5G Slice eMMB",
+    snssai: "1-010101",
+    expiretime: "2019-10-29 10:00",
+    area: "Beijing",
+  }];//业务需求信息
+  NSTinfo: [{}] = [{
+    id: "46da8cf8-0878-48ac-bea3-f2200959411a",
+    name: "eMBB instancel"
+  }];//匹配NST信息
+  selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a';
+  selectedServiceName = '';
+  serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c'];
+  serviceData: {} = {
+    "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela",
+    "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb",
+    "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc",
+  };
+
+  ngOnInit() {
+    this.serviceIdChange(this.selectedServiceId)
+  }
+
+  serviceIdChange(value: string): void {
+    this.selectedServiceName = this.serviceData[value];
+    console.log(this.selectedServiceName, "=====")
+  }
+  resetService() {
+    this.selectedServiceId = "";
+    this.serviceIdChange(this.selectedServiceId);
+  }
+
+  handleCancel() {
+    this.showDetail = false;
+    this.cancel.emit(this.showDetail);
+  }
+  handleOk() {
+    this.handleCancel();
+  }
+}