summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
authorwangyuerg <wangyuerg@chinamobile.com>2021-03-02 16:07:45 +0800
committerxu ran <xuranyjy@chinamobile.com>2021-03-02 08:59:29 +0000
commit469a666d1164207a807e6e67c63d08cbb9a6ac0e (patch)
tree5c20aff2ae2297f4f8b706f6f827c87add31940f /usecaseui-portal/src
parent55e54ca0fddd6d885fe021da086ae8065fc140bd (diff)
feat:create detail
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com> Issue-ID: USECASEUI-527 Change-Id: Ibf772723d59d97cc4a6bb1b5e6a8a51180510577
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html9
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.less42
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts7
-rw-r--r--usecaseui-portal/src/assets/images/coverageAreaMap.pngbin0 -> 78043 bytes
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
Binary files differ