diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
4 files changed, 94 insertions, 124 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts index d1ee6ae9..e1eee188 100644 --- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts +++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts @@ -1,10 +1,10 @@ import { Component, OnInit } from '@angular/core'; -import {SlicingTaskServices} from '.././../../core/services/slicingTaskServices'; -import {pieChartconfig,lineChartconfig} from './monitorEchartsConfig'; +import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices'; +import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig'; @Component({ - selector: 'app-monitor-5g', - templateUrl: './monitor-5g.component.html', - styleUrls: ['./monitor-5g.component.less'] + selector: 'app-monitor-5g', + templateUrl: './monitor-5g.component.html', + styleUrls: ['./monitor-5g.component.less'] }) export class Monitor5gComponent implements OnInit { @@ -19,34 +19,34 @@ export class Monitor5gComponent implements OnInit { loading = false; selectDate: number = 0; - trafficData: any[] =[]; - trafficLegend: any[] =[]; - trafficChartInit :Object = pieChartconfig; - trafficChartData :Object; + trafficData: any[] = []; + trafficLegend: any[] = []; + trafficChartInit: Object = pieChartconfig; + trafficChartData: Object; - onlineusersData: any[] =[]; - onlineuserXAxis :any[] = []; - onlineuserLegend :any[] = []; - onlineuserChartInit :Object = lineChartconfig; - onlineuserChartData :Object; + onlineusersData: any[] = []; + onlineuserXAxis: any[] = []; + onlineuserLegend: any[] = []; + onlineuserChartInit: Object = lineChartconfig; + onlineuserChartData: Object; - bandwidthData: any[] =[]; - bandwidthXAxis :any[] = []; - bandwidthLegend :any[] = []; - bandwidthChartInit :Object = lineChartconfig; - bandwidthChartData :Object; - ngOnInit() { - this.getBusinessList() - } + bandwidthData: any[] = []; + bandwidthXAxis: any[] = []; + bandwidthLegend: any[] = []; + bandwidthChartInit: Object = lineChartconfig; + bandwidthChartData: Object; + ngOnInit() { + this.getBusinessList() + } - getBusinessList (): void{ + getBusinessList(): void { this.loading = true; let paramsObj = { pageNo: this.pageIndex, pageSize: this.pageSize }; - this.myhttp.getSlicingBusinessList(paramsObj,false).subscribe (res => { - const { result_header: { result_code }, result_body: { slicing_business_list,record_number } } = res; + this.myhttp.getSlicingBusinessList(paramsObj, false).subscribe(res => { + const { result_header: { result_code }, result_body: { slicing_business_list, record_number } } = res; if (+result_code === 200) { this.total = record_number; this.loading = false; @@ -60,7 +60,7 @@ export class Monitor5gComponent implements OnInit { } onDateChange(result: Date): void { console.log('Selected Time: ', result); - if(result === null){ + if (result === null) { this.selectDate = 0; this.getChartsData() } @@ -75,30 +75,30 @@ export class Monitor5gComponent implements OnInit { if (!this.listOfData.length) { return false; } - if(this.selectDate !==0){ + if (this.selectDate !== 0) { time = this.selectDate } const service_list = []; this.listOfData.forEach(item => { - service_list.push({service_id: item.service_instance_id}); + service_list.push({ service_id: item.service_instance_id }); }); this.fetchTrafficData(service_list, time); this.fetchOnlineusersData(service_list, time); this.fetchBandwidthData(service_list, time); } - fetchTrafficData(service_list, time){ - this.myhttp.getFetchTraffic(service_list,time).subscribe (res => { + fetchTrafficData(service_list, time) { + this.myhttp.getFetchTraffic(service_list, time).subscribe(res => { const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res; - if (+result_code === 200 && slicing_usage_traffic_list.length >0) { - slicing_usage_traffic_list.forEach((item)=>{ + if (+result_code === 200 && slicing_usage_traffic_list.length > 0) { + slicing_usage_traffic_list.forEach((item) => { this.trafficData.push({ - name:item.service_id, - value:item.traffic_data + name: item.service_id, + value: item.traffic_data }); this.trafficLegend.push(item.service_id) }); this.trafficChartData = { - legend:{ + legend: { orient: 'vertical', left: '0px', bottom: '0px', @@ -116,23 +116,23 @@ export class Monitor5gComponent implements OnInit { } }) } - fetchOnlineusersData(service_list, time){ - this.myhttp.getFetchOnlineusers(service_list,time).subscribe (res => { + fetchOnlineusersData(service_list, time) { + this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => { const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res; if (+result_code === 200) { - slicing_online_user_list[0].online_user_list.map((key)=>{ + slicing_online_user_list[0].online_user_list.map((key) => { this.onlineuserXAxis.push(key.timestamp) }); - slicing_online_user_list.forEach((item)=>{ - this.onlineuserLegend.push(item.service_id); - this.onlineusersData.push({ - name: item.service_id, - type: 'line', - data:this.getOnlineuserSeriesData(item) - }) + slicing_online_user_list.forEach((item) => { + this.onlineuserLegend.push(item.service_id); + this.onlineusersData.push({ + name: item.service_id, + type: 'line', + data: this.getOnlineuserSeriesData(item) + }) }); this.onlineuserChartData = { - legend:{ + legend: { bottom: '0px', data: this.onlineuserLegend }, @@ -144,23 +144,23 @@ export class Monitor5gComponent implements OnInit { } }) } - fetchBandwidthData(service_list, time){ - this.myhttp.getFetchBandwidth(service_list,time).subscribe (res => { + fetchBandwidthData(service_list, time) { + this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => { const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res; if (+result_code === 200) { - slicing_total_bandwidth_list[0].total_bandwidth_list.map((key)=>{ + slicing_total_bandwidth_list[0].total_bandwidth_list.map((key) => { this.bandwidthXAxis.push(key.timestamp) }); - slicing_total_bandwidth_list.forEach((item)=>{ + slicing_total_bandwidth_list.forEach((item) => { this.bandwidthLegend.push(item.service_id); this.bandwidthData.push({ name: item.service_id, type: 'line', - data:this.getBandwidthSeriesData(item) + data: this.getBandwidthSeriesData(item) }) }); this.bandwidthChartData = { - legend:{ + legend: { bottom: '0px', data: this.bandwidthLegend }, @@ -172,16 +172,16 @@ export class Monitor5gComponent implements OnInit { } }) } - getOnlineuserSeriesData(item){ + getOnlineuserSeriesData(item) { let datas = []; - item.online_user_list.forEach((keys)=>{ + item.online_user_list.forEach((keys) => { datas.push(keys.online_users) }) return datas } - getBandwidthSeriesData(item){ + getBandwidthSeriesData(item) { let datas = []; - item.total_bandwidth_list.forEach((keys)=>{ + item.total_bandwidth_list.forEach((keys) => { datas.push(keys.total_bandwidth) }) return datas diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html index ff5ec273..c4aeb72e 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html @@ -2,45 +2,26 @@ <div nz-row> <div nz-col nzSpan="12" class="task_status"> <span>Status : </span> - <nz-select - nzShowSearch - nzAllowClear - [(ngModel)]="selectedValue" - nzPlaceHolder="Select a processing status" - (ngModelChange)="processingStatusChange()" - > - <nz-option - *ngFor="let item of statusOptions" - [nzLabel]="item.title" - [nzValue]="item.value" - ></nz-option> + <nz-select nzShowSearch nzAllowClear [(ngModel)]="selectedValue" nzPlaceHolder="Select a processing status" + (ngModelChange)="processingStatusChange()"> + <nz-option *ngFor="let item of statusOptions" [nzLabel]="item.title" [nzValue]="item.value"></nz-option> </nz-select> </div> </div> <div> - <nz-table - #basicTable - nzShowPagination - nzPageSizeOptions - nzShowSizeChanger - [nzTotal]="total" - [nzLoading]="loading" - [nzData]="listOfData" - [nzPageIndex]="pageNum" - [nzPageSize]="pageSize" - [nzFrontPagination]="false" - (nzPageSizeChange)="pageSizeChange($event)" - (nzPageIndexChange)="pageNumChange($event)" - > + <nz-table #basicTable nzShowPagination nzPageSizeOptions nzShowSizeChanger [nzTotal]="total" + [nzLoading]="loading" [nzData]="listOfData" [nzPageIndex]="pageNum" [nzPageSize]="pageSize" + [nzFrontPagination]="false" (nzPageSizeChange)="pageSizeChange($event)" + (nzPageIndexChange)="pageNumChange($event)"> <thead> <tr> - <th>任务ID</th> - <th>任务名称</th> + <th>Task ID</th> + <th>Task Name</th> <th>S-NSSAI</th> - <th>切片业务类型</th> - <th>到达时间</th> - <th>处理环节</th> - <th>操作</th> + <th>Service Type</th> + <th>Created time</th> + <th>Status</th> + <th>Action</th> </tr> </thead> <tbody> @@ -50,35 +31,21 @@ <td>{{ data.service_snssai }}</td> <td>{{ data.service_type }}</td> <td>{{ data.create_time | date: "yyyy-MM-dd HH:mm:ss"}}</td> - <td>{{ data.status }}</td> + <td>{{ data.processing_status }}</td> <td> - <span - *ngIf="data.processing_status === 'Planning'" - class="task_operation_disabled" - >{{ data.operation }}</span - > - <a - (click)="showdetail(data)" - *ngIf="data.processing_status !== 'Planning'" - >{{ data.operation }}</a - > + <span *ngIf="data.processing_status === 'Planning'" + class="task_operation_disabled">{{ data.operation }}</span> + <a (click)="showdetail(data)" + *ngIf="data.processing_status !== 'Planning'">{{ data.operation }}</a> </td> </tr> </tbody> </nz-table> </div> - <app-slicing-task-model - [moduleTitle]="moduleTitle" - [showDetail]="showDetail" - [taskId]="taskId" - (cancel)="showDetail = $event" - > + <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [taskId]="taskId" + (cancel)="showDetail = $event"> </app-slicing-task-model> - <app-check-process-model - [moduleTitle]="moduleTitle" - [showProcess]="showProcess" - [taskId]="taskId" - (cancel)="showProcess = $event" - > + <app-check-process-model [moduleTitle]="moduleTitle" [showProcess]="showProcess" [taskId]="taskId" + (cancel)="showProcess = $event"> </app-check-process-model> -</div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less index bc14d4ff..da4aa09f 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less @@ -1,13 +1,16 @@ nz-select { - width: 200px; + width: 220px; } -.task_status{ + +.task_status { margin-bottom: 20px; - span{ + + span { margin-right: 5%; } } + .task_operation_disabled { color: #A2ABCE; cursor: default; -} +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts index fd135a61..e9cb8398 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts @@ -94,20 +94,20 @@ export class SlicingTaskManagementComponent implements OnInit { this.listOfData = list.map(item => { switch (item.processing_status) { case 'Planning': - item.status = '规划阶段'; - item.operation = '任务处理' + // item.status = '规划阶段'; + item.operation = 'Process Task' break; case 'Waiting to Confirm': - item.status = '审核阶段'; - item.operation = '任务处理' + // item.status = '审核阶段'; + item.operation = 'Process Task' break; case 'Creating': - item.status = '切片创建中'; - item.operation = '查看进度' + // item.status = '切片创建中'; + item.operation = 'View Progress' break; case 'Completed': - item.status = '创建完成'; - item.operation = '查看结果' + // item.status = '创建完成'; + item.operation = 'View Result' break; } return item; |