summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2021-01-27 15:49:45 +0800
committercyuamber <xuranyjy@chinamobile.com>2021-01-27 15:49:50 +0800
commit2156dd58179b238ac36d723d469e79c7fdf0cddf (patch)
treeb24614505729b6fcf203c285de033a07f31c11f9 /usecaseui-portal/src/app
parentdb0ce30f2215a7983d43a86855d0a36bf0b12bc0 (diff)
feat: change the data struc and loading timer of csmf page
Change-Id: Ia7aec7439dd4909c76f4f2733482814335e83b22 Issue-ID: USECASEUI-531 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/shared/utils/utils.ts16
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html122
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts34
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts32
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts34
5 files changed, 108 insertions, 130 deletions
diff --git a/usecaseui-portal/src/app/shared/utils/utils.ts b/usecaseui-portal/src/app/shared/utils/utils.ts
index 63e19075..0633778c 100644
--- a/usecaseui-portal/src/app/shared/utils/utils.ts
+++ b/usecaseui-portal/src/app/shared/utils/utils.ts
@@ -104,13 +104,13 @@ export class Util {
if (!this.deepCheck(target[i])) {
return false;
}
- }
+ }
} else if (type === '[object Object]') {
for (const prop in target) {
if (target.hasOwnProperty(prop)) {
- if (!this.deepCheck(target[prop])) {
- return false;
- }
+ if (!this.deepCheck(target[prop])) {
+ return false;
+ }
}
}
} else {
@@ -124,10 +124,10 @@ export class Util {
}
pick(obj: object, arr: Array<string>): Object {
return arr.reduce((iter, val) => {
- if(val in obj) {
- iter[val] = obj[val];
- }
- return iter;
+ if(val in obj) {
+ iter[val] = obj[val];
+ }
+ return iter;
}, {});
}
} \ No newline at end of file
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 38ecbf11..0f138db8 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
@@ -1,68 +1,60 @@
-<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
- <nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
- (nzOnOk)="handleOk()" nzWidth="80%">
- <div class="subnet_params_container">
- <form nz-form>
- <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
- <nz-form-label [nzSpan]="6" [nzRequired]="item.required" [nzFor]=" item.key">
- {{ item.title }}
- </nz-form-label>
- <nz-form-control [nzSpan]="15">
- <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
+<nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()" nzWidth="80%">
+ <div class="subnet_params_container">
+ <form nz-form>
+ <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
+ <nz-form-label [nzSpan]="6" [nzRequired]="item.required" [nzFor]=" item.key">
+ {{ item.title }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="15">
+ <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'"
[(ngModel)]="slicing_order_info[item.key]"
- [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
- *ngIf=" item.type === 'input'&&!item.scoped "
- [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()" />
- <nz-tooltip [nzTitle]="tooltipText" [nzPlacement]="'right'" [nzTrigger]="'focus'">
- <input nz-input nz-tooltip [id]="item.key" [name]="item.key" *ngIf="item.scoped"
- [(ngModel)]="slicing_order_info[item.key]"
- [ngClass]="{'error-input-border':validateRulesShow[i] === true}"
- (blur)="this.Util.validator(item.title,item.key,slicing_order_info[item.key],i,rulesText,validateRulesShow)"
- (focus)="changeTooltipText(item.title)" />
- </nz-tooltip>
- <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
- *ngIf="item.type === 'radio'">
- <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
- {{ option.title }}
- </label>
- </nz-radio-group>
- <nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
- *ngIf="item.type === 'select'">
- <nz-option [nzValue]="option.key" [nzLabel]="option.title"
- *ngFor="let option of item.options">
- </nz-option>
- </nz-select>
- <nz-form-explain *ngIf="item.type === 'input' && validateRulesShow[i]" class="validateRules">
- {{rulesText[i]}}
- </nz-form-explain>
- </nz-form-control>
+ [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()" />
+ </nz-tooltip>
+ <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+ *ngIf="item.type === 'radio'">
+ <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
+ {{ option.title }}
+ </label>
+ </nz-radio-group>
+ <nz-select [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
+ *ngIf="item.type === 'select'">
+ <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
+ </nz-option>
+ </nz-select>
+ <nz-form-explain *ngIf="item.type === 'input' && validateRulesShow[i]" class="validateRules">
+ {{rulesText[i]}}
+ </nz-form-explain>
+ </nz-form-control>
- <div *ngIf="item.type === 'city-select'">
- <div *ngFor="let area of areaList; let i = index">
- <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0"
- class="subnet_params_area" *ngFor="let item of area; let ind = index">
- <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
- (nzOpenChange)="handleChange(area, item)"
- (ngModelChange)=" handleChangeSelected(area, item) ">
- <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
- </nz-option>
- </nz-select>
- </nz-form-control>
- <nz-form-control [nzSpan]="1" [nzOffset]="1">
- <button nz-button nzType="primary" nzSize="small" class="subnet_params_button"
- *ngIf="!i" (click)="creatAreaList()">
- <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
- </button>
- <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i"
- (click)="deleteAreaList(i)">
- <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
- </button>
- </nz-form-control>
- </div>
+ <div *ngIf="item.type === 'city-select'">
+ <div *ngFor="let area of areaList; let i = index">
+ <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0"
+ class="subnet_params_area" *ngFor="let item of area; let ind = index">
+ <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
+ (nzOpenChange)="handleChange(area, item)"
+ (ngModelChange)=" handleChangeSelected(area, item) ">
+ <nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
+ </nz-option>
+ </nz-select>
+ </nz-form-control>
+ <nz-form-control [nzSpan]="1" [nzOffset]="1">
+ <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="!i"
+ (click)="creatAreaList()">
+ <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
+ </button>
+ <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i"
+ (click)="deleteAreaList(i)">
+ <i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
+ </button>
+ </nz-form-control>
</div>
- </nz-form-item>
- </form>
- </div>
- </nz-modal>
-</nz-spin> \ No newline at end of file
+ </div>
+ </nz-form-item>
+ </form>
+ </div>
+</nz-modal> \ No newline at end of file
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 8e58a60c..bfef2d20 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
@@ -40,10 +40,8 @@ export class BusinessOrderComponent implements OnInit {
coverageAreaNumber: null
};
areaList: any[] = [];
- isSpinning: boolean = false;
validateRulesShow: any[] = [];
rulesText: any[] = [];
- tooltipText: string = 'Scope: 1-100000';
AreaFormatting(): void {
let areaList = ['Beijing;Beijing;Haidian District;Wanshoulu Street'];
@@ -71,7 +69,7 @@ export class BusinessOrderComponent implements OnInit {
}
creatAreaList(): void {
- let arr = [
+ const arr = [
{
key: 'province',
selected: '',
@@ -156,30 +154,16 @@ export class BusinessOrderComponent implements OnInit {
coverageArea: '',
coverageAreaNumber: null
};
- }
-
- changeTooltipText(title: string): void {
- if (title === 'Max Number of UEs') {
- this.tooltipText = 'Scope: 1-100000'
- } else if (title === 'Data Rate Downlink (Mbps)' || title === 'Data Rate Uplink (Mbps)') {
- this.tooltipText = 'Scope: 100-3000'
- } else if (title === 'Latency') {
- this.tooltipText = 'Scope: 10-200'
- } else if (title === 'Use Interval (Month)') {
- this.tooltipText = 'Scope: ≥1'
- }
+ this.validateRulesShow = []
}
handleOk(): void {
const coverage_list: string[] = [];
- let coverageAreaNumber = null;
let coverageAreas;
COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
- if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea' && item.key !== 'coverageAreaNumber') {
+ if (item.required && item.type==="input") {
this.Util.validator(item.title,item.key, this.slicing_order_info[item.key], index, this.rulesText, this.validateRulesShow)
- }else if(item.key === 'coverageAreaNumber'){
- coverageAreaNumber = this.slicing_order_info[item.key]
}
});
if (this.validateRulesShow.indexOf(true) > -1) {
@@ -193,12 +177,12 @@ export class BusinessOrderComponent implements OnInit {
});
coverage_list.push(str.substring(0, str.length - 1));
});
-
if (coverage_list.length > 1) {
coverageAreas = coverage_list.join('|')
} else {
coverageAreas = coverage_list.toString();
}
+ const coverageAreaNumber = this.slicing_order_info["coverageAreaNumber"];
if(coverageAreaNumber){
this.slicing_order_info.coverageArea = `${coverageAreas}-${coverageAreaNumber}`;
}else{
@@ -209,14 +193,16 @@ export class BusinessOrderComponent implements OnInit {
const paramsObj = {
slicing_order_info: this.slicing_order_info
};
- console.log(paramsObj,"===>paramsObj")
- this.isSpinning = true;
const csmfSlicingPurchaseFailedCallback = () => {
this.handleCancel();
- this.isSpinning = false;
}
this.myhttp.csmfSlicingPurchase(paramsObj, csmfSlicingPurchaseFailedCallback).then(res => {
- this.isSpinning = false;
+ const result = res.result_header;
+ if(result&&result.result_code&&+result.result_code===200){
+ console.log(res)
+ }else{
+ this.message.create('error','Network error')
+ }
this.handleCancel();
})
}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
index 4f64a5c7..9f79bff6 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/constants.ts
@@ -1,46 +1,50 @@
export const COMMUNICATION_FORM_ITEMS = [
- /***
- title: MARK THE ITEM NAME,
- key: MARK THE ITEM KEY,
- type: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
- required: IF REQUIRED,
+ /*******
+ title /MUST/: MARK THE ITEM NAME,
+ key /MUST/: MARK THE ITEM KEY,
+ type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select
+ required /MUST/: IF REQUIRED,
scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT
+ scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST
placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT
options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT
- ***/
+ ********/
{
title: 'Communication Service Name',
key: 'name',
type:"input",
required:true
-
},
{
title: 'Max Number of UEs',
key: 'maxNumberofUEs',
type:"input",
scoped:true,
+ scopedText:'Scope: 1-100000',
required:true
},
{
- title: 'Data Rate Downlink (Mbps)',
- key: 'expDataRateDL',
+ title: 'Data Rate Uplink (Mbps)',
+ key: 'expDataRateUL',
type:"input",
scoped:true,
+ scopedText:'Scope: 100-3000',
required:true
},
{
- title: 'Latency',
- key: 'latency',
+ title: 'Data Rate Downlink (Mbps)',
+ key: 'expDataRateDL',
type:"input",
scoped:true,
+ scopedText:'Scope: 100-3000',
required:true
},
{
- title: 'Data Rate Uplink (Mbps)',
- key: 'expDataRateUL',
+ title: 'Latency',
+ key: 'latency',
type:"input",
scoped:true,
+ scopedText:'Scope: 10-200',
required:true
},
{
@@ -185,7 +189,7 @@ export const COMMUNICATION_FORM_ADDRESS = [
"name": "Shanghai City",
"county": [{
"id": "2001",
- "name": "udongxin District",
+ "name": "Pudongxin District",
"street": [
{
"id": "200101",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
index a448bcf2..20bcd104 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
@@ -32,7 +32,6 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
ngOnInit() {}
ngOnDestroy() {
- console.log(this.progressingTimer)
this.progressingTimer.forEach((item) => {
clearInterval(item.timer)
})
@@ -51,26 +50,29 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
getCSMFBusinessList(): void {
this.loading = true;
this.listOfData = [];
- let paramsObj = {
+ const paramsObj = {
status: this.selectedValue.toLocaleLowerCase(),
pageNo: this.pageIndex,
pageSize: this.pageSize
};
- let getCSMFSlicingBusinessListFailedCallback = () => {
+ const getCSMFSlicingBusinessListFailedCallback = () => {
this.loading = false;
}
this.myhttp.getCSMFSlicingBusinessList(paramsObj, getCSMFSlicingBusinessListFailedCallback).then(res => {
const { result_body: { slicing_order_list, record_number } } = res;
- this.loading = false;
+ setTimeout(() => {
+ this.loading = false;
+ }, 100);
+
this.total = record_number;
if (slicing_order_list !== null && slicing_order_list.length > 0) {
this.listOfData = slicing_order_list.map((item, index) => {
item.order_creation_time = moment(Number(item.order_creation_time)).format('YYYY-MM-DD HH:mm:ss');
if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) {
- let updata = (prodata: { operation_progress: string }) => {
+ const updata = (prodata: { operation_progress: string }) => {
item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
};
- let obj = {
+ const obj = {
serviceId: item.order_id
};
if (item.last_operation_type.toUpperCase() === 'DELETE') this.terminateStart[index] = true
@@ -120,23 +122,20 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
},
nzCancelText: 'No',
nzOnCancel: () => {
- let singleSlicing = Object.assign({}, this.listOfData[i]);
+ const singleSlicing = Object.assign({}, this.listOfData[i]);
this.listOfData[i] = singleSlicing;
this.listOfData = [...this.listOfData];
}
});
}
changeActivate(paramsObj: any, isActivate: boolean, index: number): void {
- this.loading = true;
- let changeActivateFailedCallback = () => {
- this.loading = false;
- let singleSlicing = Object.assign({}, this.listOfData[index]);
+ const changeActivateFailedCallback = () => {
+ const singleSlicing = Object.assign({}, this.listOfData[index]);
this.listOfData[index] = singleSlicing;
this.listOfData = [...this.listOfData];
this.getCSMFBusinessList();
}
this.myhttp.changeActivateSlicingService(paramsObj, isActivate, changeActivateFailedCallback).then((res) => {
- this.loading = false;
this.getCSMFBusinessList();
})
}
@@ -146,15 +145,12 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
nzTitle: 'Are you sure you want to terminate this task?',
nzContent: '<b>Name:&nbsp;</b>' + slicing.order_name,
nzOnOk: () => {
- let paramsObj = { serviceId: slicing.order_id };
+ const paramsObj = { serviceId: slicing.order_id };
this.terminateStart[index] = true;
- this.loading = true;
- let terminateFailedCallback = () => {
- this.loading = false;
+ const terminateFailedCallback = () => {
this.terminateStart[index] = false;
}
this.myhttp.terminateSlicingService(paramsObj, terminateFailedCallback).then(res => {
- this.loading = false;
this.getCSMFBusinessList();
})
},
@@ -166,8 +162,8 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
}
queryProgress(obj:any, index:number, callback:any) {
return new Promise(res => {
- let requery = () => {
- let queryProgressFailedCallback = () => {
+ const requery = () => {
+ const queryProgressFailedCallback = () => {
this.progressingTimer.forEach((item) => {
if (item.serviceId === obj.serviceId) {
clearInterval(item.timer);