feat:create detail

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Issue-ID: USECASEUI-527
Change-Id: Ibf772723d59d97cc4a6bb1b5e6a8a51180510577

4 files changed, 55 insertions, 3 deletions

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
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/coverageAreaMap.png