From 2156dd58179b238ac36d723d469e79c7fdf0cddf Mon Sep 17 00:00:00 2001 From: cyuamber Date: Wed, 27 Jan 2021 15:49:45 +0800 Subject: feat: change the data struc and loading timer of csmf page Change-Id: Ia7aec7439dd4909c76f4f2733482814335e83b22 Issue-ID: USECASEUI-531 Signed-off-by: cyuamber --- usecaseui-portal/src/app/shared/utils/utils.ts | 16 +-- .../business-order/business-order.component.html | 122 ++++++++++----------- .../business-order/business-order.component.ts | 34 ++---- .../business-order/constants.ts | 32 +++--- .../csmf-slicing-business-management.component.ts | 34 +++--- 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): 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 @@ - - -
-
- - - {{ item.title }} - - - +
+ + + + {{ item.title }} + + + + - - - - - - - - - - - - {{rulesText[i]}} - - + [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()" /> + + + + + + + + + + {{rulesText[i]}} + + -
-
- - - - - - - - - - -
+
+
+ + + + + + + + + +
- - -
- - \ No newline at end of file +
+ + +
+ \ 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: 'Name: ' + 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); -- cgit 1.2.3-korg