"an_5qi": "8",\r
"an_coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "],\r
"tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
- "tn_suggest_nssi_name": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+ "tn_suggest_nssi_name": "eMBB TNinstance1",\r
"tn_latency": "10",\r
"tn_bandwidth": "300",\r
"cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
</tbody>
</nz-table>
</div>
- <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [modelData]="detailData"
+ <app-slicing-task-model [moduleTitle]="moduleTitle" [showDetail]="showDetail" [taskId]="taskId"
(cancel)="showDetail=$event">
</app-slicing-task-model>
</div>
\ No newline at end of file
}
showDetail: boolean = false;
selectedValue = null;
- detailData: object = {};
+ // detailData: object = {};
+ taskId: string;
moduleTitle: string = "";
- listOfData = [];
- statusOptions = TASK_PROCESSING_STATUS;
+ listOfData: any[] = [];
+ statusOptions: any[] = TASK_PROCESSING_STATUS;
getTaskList (): void{
this.myhttp.getSlicingTaskList('1', '10').subscribe (res => {
})
}
- showdetail(data: any) {
- this.detailData = data;
+ showdetail(data: any): void {
+ this.taskId = data.task_id;
this.showDetail = true;
this.moduleTitle = data.status;
}
<ng-template #checkItem let-check>
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<div nz-col nzSpan="10">
- <span>Task ID： {{ check.id }}</span>
+ <span>Task ID： {{ check.task_id }}</span>
</div>
<div nz-col nzSpan="8">
- <span>Task Name： {{ check.name }}</span>
+ <span>Task Name： {{ check.task_name }}</span>
</div>
<div nz-col nzSpan="6">
- <span>S-NSSAI：{{ check.snssai }}</span>
+ <span>S-NSSAI：{{ check.cn_service_snssai }}</span>
</div>
</nz-list-item>
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<div nz-col nzSpan="10">
- <span>Arrived Time： {{ check.arrivedtime }}</span>
+ <span>Arrived Time： {{ check.create_timer }}</span>
</div>
<div nz-col nzSpan="8">
- <span>Status： {{ check.status }}</span>
+ <span>Status： {{ check.processing_status }}</span>
</div>
</nz-list-item>
</ng-template>
<nz-list class="taskmodel_list" [nzDataSource]="businessRequirement" nzBordered [nzHeader]="'业务需求信息：'"
[nzFooter]="null" [nzRenderItem]="businessItem">
<ng-template #businessItem let-item>
- <nz-list-item>
- <span class="ant-typography">Name：</span>
- {{ item.name }}
- </nz-list-item>
- <nz-list-item>
- <span class="ant-typography">S-NSSAI： </span>
- {{ item.snssai }}
- </nz-list-item>
- <nz-list-item>
- <span class="ant-typography">Time： </span>
- {{ item.expiretime }}
- </nz-list-item>
- <nz-list-item>
- <span class="ant-typography">Area： </span>
- {{ item. area }}
+ <nz-list-item *ngFor="let ite of businessList " nz-row>
+ <div nz-col nz-Span='10'>
+ <span class="ant-typography">{{ ite.title }} : {{ item[ite.key] }}</span>
+ </div>
</nz-list-item>
</ng-template>
</nz-list>
<ng-template #taskItem let-item>
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<div nz-col nzSpan="12">
- <span>NST ID： {{ item.id }}</span>
+ <span>NST ID： {{ item.nst_id }}</span>
</div>
<div nz-col nzSpan="12">
- <span>NST Name： {{ item.name }}</span>
+ <span>NST Name： {{ item.nst_name }}</span>
</div>
</nz-list-item>
</ng-template>
- </nz-list>
-
+ </nz-list>
<div>
<nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
</nz-list-item>
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<p class="listitem_subtitle" nz-col nzSpan="24">匹配的共享切片子网实例：</p>
- <nz-card nzType="inner" nz-col nzSpan="24" nzTitle="无线域：">
- <div nz-row [nzGutter]="8">
- <div nz-col nzSpan="12">
- 切片子网实例 ID：
- <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
- <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
- </nz-select>
- </div>
- <div nz-col nzSpan="8">
- 切片子网实例名称：{{selectedServiceName}}
- </div>
- <div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
- class="anticon anticon-plus"></i></button>
- <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
- nzTheme="outline"></i></button>
- </div>
- </div>
- </nz-card>
- <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="传输域：">
+ <nz-card *ngFor="let item of slicingSubnet" nzType="inner" nz-col nzSpan="24" [nzTitle]="item.title">
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="12">
切片子网实例 ID：
- <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
+ <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)">
<nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
- 切片子网实例名称：{{selectedServiceName}}
+ 切片子网实例名称：{{item.slicingName}}
</div>
<div nz-col nzSpan="4">
<button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
</div>
</div>
</nz-card>
- <nz-card nzType="inner" nz-col nzSpan="24" style="margin-top:16px;" nzTitle="核心网域：">
-
- <div nz-row [nzGutter]="12" nzType="flex" nzAlign="middle">
- <div nz-col nzSpan="12">
- 切片子网实例 ID：
- <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
- <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
- </nz-select>
- </div>
- <div nz-col nzSpan="8">
- 切片子网实例名称：{{selectedServiceName}}
- </div>
- <div nz-col nzSpan="4">
- <button nz-button nzType="primary" (click)="resetService()">
- <i nz-icon class="anticon anticon-plus"></i>
- </button>
- <button nz-button nzType="primary">
- <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
- </button>
- </div>
- </div>
- </nz-card>
</nz-list-item>
</nz-list>
</div>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { SlicingTaskServices } from '../../../../../core/services/slicingTaskServices';
+import { BUSINESS_REQUIREMENT } from '../../../../../../constants/constants';
@Component({
selector: 'app-slicing-task-model',
export class SlicingTaskModelComponent implements OnInit {
@Input() showDetail: boolean;
@Input() moduleTitle: string;
- @Input() modelData: object;
+ @Input() taskId: string;
@Output() cancel = new EventEmitter<boolean>();
- constructor() { }
- checkDetail: [{}] = [{
- id: "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",
- name: "5G Slice eMMB",
- snssai: "1-010101",
- arrivedtime: "2019-10-29 10:00",
- status: "Checking"
- }]; //配置审核详情
- businessRequirement: [{}] = [{
- name: "5G Slice eMMB",
- snssai: "1-010101",
- expiretime: "2019-10-29 10:00",
- area: "Beijing",
- }];//业务需求信息
- NSTinfo: [{}] = [{
- id: "46da8cf8-0878-48ac-bea3-f2200959411a",
- name: "eMBB instancel"
- }];//匹配NST信息
- selectedServiceId = '46da8cf8-0878-48ac-bea3-f2200959411a';
- selectedServiceName = '';
+ constructor(private http: SlicingTaskServices) { }
+
+ // 业务需求列表
+ businessList: object[] = BUSINESS_REQUIREMENT;
+ // 配置审核详情
+ checkDetail: object[] = [{}];
+ //业务需求信息
+ businessRequirement: object[] = [{}];
+ //匹配NST信息
+ NSTinfo: object[] = [{}];
+ // 共享切片实例
+ selectedServiceId: string;
+ selectedServiceName: string;
+ // 子网实例
+ slicingSubnet: any[] = [
+ {
+ title: '无线域',
+ slicingId: '',
+ slicingName: ''
+ },
+ {
+ title: '传输域',
+ slicingId: '',
+ slicingName: ''
+ },
+ {
+ title: '核心网域',
+ slicingId: '',
+ slicingName: ''
+ }
+ ]
+
+ ngOnInit() { }
+
+ ngOnChanges() {
+ if (this.showDetail) {
+ this.getautidInfo();
+ }
+ }
+
+ getautidInfo(): void {
+ this.http.getAuditInfo(this.taskId).subscribe( res => {
+ const { result_header: { result_code } } = res;
+ if (+result_code === 200) {
+ const { task_id, task_name, create_timer, processing_status, business_demand_info, nst_info, nsi_nssi_info, business_demand_info: { service_snssai } } = res.result_body;
+ const {
+ suggest_nsi_id,
+ suggest_nsi_name,
+ an_suggest_nssi_id,
+ an_suggest_nssi_name,
+ tn_suggest_nssi_id,
+ tn_suggest_nssi_name,
+ cn_suggest_nssi_id,
+ cn_suggest_nssi_name } = nsi_nssi_info;
+ // 处理配置审核详情数据
+ this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }];
+ // 业务需求信息数据
+ this.businessRequirement = [business_demand_info];
+ this.NSTinfo = [nst_info];
+ // 共享切片实例
+ this.selectedServiceId = suggest_nsi_id;
+ this.selectedServiceName = suggest_nsi_name;
+ // 子网实例
+ this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
+ this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+ this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
+ this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
+ this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
+ this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+ }
+ })
+ }
+
+
+
+
+
+
serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c'];
serviceData: {} = {
"46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela",
"46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc",
};
- ngOnInit() {
- this.serviceIdChange(this.selectedServiceId)
- }
+
serviceIdChange(value: string): void {
this.selectedServiceName = this.serviceData[value];
}
handleOk() {
this.handleCancel();
+ // 对应操作逻辑未编写
+
}
}
export const TASK_PROCESSING_STATUS = [\r
- {\r
- title: '规划阶段',\r
- value: 'Planning'\r
- },\r
- {\r
- title: '审核阶段',\r
- value: 'Waiting to Confirm'\r
- }, \r
- {\r
- title: '切片创建中',\r
- value: 'Creating'\r
- },\r
- {\r
- title: '创建完成',\r
- value: 'Completed'\r
- }\r
- ]
\ No newline at end of file
+ {\r
+ title: '规划阶段',\r
+ value: 'Planning'\r
+ },\r
+ {\r
+ title: '审核阶段',\r
+ value: 'Waiting to Confirm'\r
+ },\r
+ {\r
+ title: '切片创建中',\r
+ value: 'Creating'\r
+ },\r
+ {\r
+ title: '创建完成',\r
+ value: 'Completed'\r
+ }\r
+]\r
+\r
+export const BUSINESS_REQUIREMENT = [\r
+ {\r
+ title: '切片业务名称',\r
+ key: 'service_name'\r
+ },\r
+ {\r
+ title: 'S-NSSAI',\r
+ key: 'service_snssai'\r
+ },\r
+ {\r
+ title: '用户下行带宽（Mbps）',\r
+ key: 'exp_data_rate_dl'\r
+ },\r
+ {\r
+ title: '用户上行带宽（Mbps）',\r
+ key: 'exp_data_rate_u'\r
+ },\r
+ {\r
+ title: '游牧性',\r
+ key: 'ue_mobility_level'\r
+ },\r
+ {\r
+ title: '时延（ms）',\r
+ key: 'latency'\r
+ },\r
+ {\r
+ title: '使用期限（月）',\r
+ key: 'use_interval'\r
+ },\r
+ {\r
+ title: '区域',\r
+ key: 'coverage_area_ta_list'\r
+ },\r
+ {\r
+ title: '激活因子（%）',\r
+ key: 'activity_factor'\r
+ },\r
+ {\r
+ title: '共享等级',\r
+ key: 'resource_sharing_level'\r
+ },\r
+ {\r
+ title: '上行区域流量密度（Mbps/km ）',\r
+ key: 'area_traffic_cap_ul'\r
+ },\r
+ {\r
+ title: '连接规模数',\r
+ key: 'max_number_of_ues'\r
+ },\r
+ {\r
+ title: '下行区域流量密度（Mbps/km ）',\r
+ key: 'area_traffic_cap_dl'\r
+ }\r
+ \r
+] \r
Code Review / usecase-ui.git / commitdiff