feat:create detail

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

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 ff4dade..e95e245 100644 (file)
--- 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 3d0813f..c0b15eb 100644 (file)
--- 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 4d3c797..9789c76 100644 (file)
--- 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 (file)
index 0000000..d002f23
Binary files /dev/null and b/usecaseui-portal/src/assets/images/coverageAreaMap.png differ