From 469a666d1164207a807e6e67c63d08cbb9a6ac0e Mon Sep 17 00:00:00 2001
From: wangyuerg <wangyuerg@chinamobile.com>
Date: Tue, 2 Mar 2021 16:07:45 +0800
Subject: feat:create detail

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Issue-ID: USECASEUI-527
Change-Id: Ibf772723d59d97cc4a6bb1b5e6a8a51180510577
---
 .../business-order/business-order.component.html   |   9 ++++-
 .../business-order/business-order.component.less   |  42 ++++++++++++++++++++-
 .../business-order/business-order.component.ts     |   7 ++++
 .../src/assets/images/coverageAreaMap.png          | Bin 0 -> 78043 bytes
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 usecaseui-portal/src/assets/images/coverageAreaMap.png

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
index ff4dade4..e95e2452 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
@@ -7,13 +7,18 @@
                     {{ item.title }}
                 </nz-form-label>
                 <nz-form-control [nzSpan]="16">
-                    <nz-tooltip [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'"
+                    <nz-tooltip    [nzTitle]="item.scoped&&item.scopedText?item.scopedText:''" [nzPlacement]="'right'"
                         [nzTrigger]="'focus'">
-                        <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'"
+                        <input nz-input nz-tooltip   [id]="item.key" [name]="item.key" *ngIf="item.type === 'input'"
                             [(ngModel)]="slicing_order_info[item.key]"
                             [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
                             [placeholder]="item.placeholder ? item.placeholder : ''"
                             (blur)="item.required ? this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()" />
+                            <div *ngIf="item.coverflag" class="detail-wrap">
+                               <p>Note: If coverageArea is not at all provided by the user (as it is an optional input, and also optional in Service Profile), we will assume that the entire network is required to be covered. For Coverage Area Number, please enter the rectangle grid numbers corresponding to the physical coverage areas that you see on the map image. The following image shows the rectangular grid numbers for a coverage area, you can take it as an example:</p> 
+                                <img src="../../../../../../assets/images/coverageAreaMap.png" class="detail-img"/>
+                            </div>
+                            <span class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" >?</span>
                     </nz-tooltip>
                     <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
                         *ngIf="item.type === 'radio'">
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
index 3d0813f4..c0b15eb3 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less
@@ -29,4 +29,44 @@
 
 .error-input-border {
   border-color: red !important;
-}
\ No newline at end of file
+}
+
+.detail-wrap{
+  width: 300px;
+  height: 450px;
+  background: rgba(0, 0, 0, .8);
+  line-height: 20px;
+  border-radius: 4px;
+  text-indent: 2em;
+  position: absolute;
+  right: -200px;
+  top: -458px;
+  color:#ffffff;
+  p{
+    padding: 10px 10px 0 10px;
+
+  }
+}
+.detail-icon{
+  position: absolute;
+   right: -16px;
+cursor: pointer;
+
+}
+
+.detail-wrap::before{
+  content: '';
+    display: block;
+    position: absolute;
+    right: 178px;
+    bottom: -16px;
+    border: 20px solid transparent;
+    border: 8px solid transparent;
+    border-top: 8px solid  rgba(0, 0, 0, .8);
+}
+.detail-img{
+  width: 200px;
+  height: 200px;
+  display: block;
+  margin: 0 auto;
+}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
index 4d3c7972..9789c76f 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
@@ -21,6 +21,13 @@ export class BusinessOrderComponent implements OnInit {
 	ngOnChanges() {
 		this.AreaFormatting();
 	}
+    detailFn(flag){
+	  COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
+		  if(item.key=='coverageAreaNumber'){
+			item["coverflag"] = flag == true ? false:true
+		  }
+	  })
+	}
 
 	@Input() showModel: boolean;
 	@Output() cancel = new EventEmitter<boolean>();
diff --git a/usecaseui-portal/src/assets/images/coverageAreaMap.png b/usecaseui-portal/src/assets/images/coverageAreaMap.png
new file mode 100644
index 00000000..d002f239
Binary files /dev/null and b/usecaseui-portal/src/assets/images/coverageAreaMap.png differ
-- 
cgit 1.2.3-korg