<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>
+ <img src="../../../../../../assets/images/ask-img.png" alt="" class="detail-icon" *ngIf="item.key === 'coverageAreaNumber'" (mouseover)="detailFn(item.coverflag)" (mouseleave)="detailFn(item.coverflag)" />
</nz-tooltip>
<nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
*ngIf="item.type === 'radio'">
text-indent: 2em;
position: absolute;
right: -200px;
- top: -458px;
+ top: -430px;
color:#ffffff;
p{
padding: 10px 10px 0 10px;
}
.detail-icon{
position: absolute;
- right: -16px;
+ right: -26px;
+ bottom:-2px;
+ width:20px;
+ height:20px;
cursor: pointer;
}
content: '';
display: block;
position: absolute;
- right: 178px;
+ right: 175px;
bottom: -16px;
border: 20px solid transparent;
border: 8px solid transparent;
</nz-list>
<nz-list class="taskmodel_list" nzBordered [nzHeader]="'End to End Topology:'" [nzFooter]="null">
<div>status:{{status}}</div>
- <img style="width: 100%;" src="assets/images/slicing-business-management/example.png" alt="example" />
+ <!-- <img style="width: 100%;" src="assets/images/slicing-business-management/example.png" alt="example" /> -->
<!-- <img src="assets/images/slicing-business-management/server.svg" /> -->
+ <div class="warp">
+ <div class="header">
+ <p>AN</p>
+ <p>TN</p>
+ <p>CN</p>
+ </div>
+ <ul class="list-box">
+ <li>
+ <p>
+ <img src="../../../../../../../assets/images/an-img.png" class="anImg"/>
+ </p>
+ <p>{{outerData.anVersion}}</p>
+ </li>
+ <li class="vLan-line">
+ <p >
+ vLan:{{outerData.vLanText}}
+ </p>
+ <p class="online-vlan"></p>
+ </li>
+ <li>
+ <p>{{outerData.tnVersion}}</p>
+ <p>
+ <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
+ </p>
+ <p>{{outerData.tnText}}<br/>Gateway</p>
+ </li>
+ <li class="three-box" >
+ <p>{{outerData.mbps}} Mbps/yyyG</p>
+ <p>
+ {{outerData.msText}} ms
+ </p>
+ <p [ngClass]="{'online-type':outerData.orchestration_status!=='deactivated','offline-type':outerData.orchestration_status=='deactivated'}"></p>
+ <p class="">Link Type:{{outerData.linkType}}</p>
+ </li>
+ <li>
+ <p>{{outerData.tnEndVersion}}</p>
+ <p>
+ <img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
+ </p>
+ <p>{{outerData.tnEndText}}<br/>Gateway</p>
+ </li>
+ <li class="vLan-line">
+ <p >
+ vLan:{{outerData.cnVlan}}
+ </p>
+ <p class="online-vlan"></p>
+ </li>
+ <li>
+ <p>
+ <img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud"/>
+ </p>
+ <p>{{outerData.cnVersion}}</p>
+ </li>
+ </ul>
+ </div>
</nz-list>
</nz-spin>
\ No newline at end of file
.taskmodel_list{
margin-top: 20px;
}
+a{
+ text-decoration: none;
+}
+.header{
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 40px;
+ line-height: 40px;
+ color:#000;
+ margin:10px 20px;
+}
+.anImg{
+ width: 60px;
+ height: 85px;
+}
+.list-box{
+ display: flex;
+ justify-content:center;
+ align-items: center;
+
+}
+.list-box li{
+ position: relative;
+}
+.clear{
+ clear: both;
+}
+.online-vlan{
+ width: 100px;
+ height: 1px;
+ background: #000;
+}
+.online-type{
+ width: 200px;
+ height: 3px;
+ background: #6a9bd0;
+}
+.offline-type{
+ width: 200px;
+ height: 3px;
+ background: #7e848a;
+}
+.vLan-line{
+ text-align: center;
+ top:-20px;
+}
+.tnImg{
+ width: 85px;
+ height: 85px;
+}
+.three-box{
+ text-align: center;
+ top:-20px;
+}
+.cnCloud{
+ width: 230px;
+ height: 160px;
+}
\ No newline at end of file
nsiInfo: any[] = [];
taskModel: boolean = false;
isSpinning: boolean = true;
- status: string = ""
+ status: string = "";
ngOnInit() {
console.log(this.businessId, "id",this.outerData);
+ const param = {
+ anVersion:'10.2.3.4.5',
+ vLanText:'111',
+ tnVersion:'10.0.1.1.1',
+ tnText:'TN EDGEText',
+ mbps:'333',
+ msText:'555',
+ linkType:'p2p/mp2p',
+ tnEndVersion:'10.1.1.1',
+ tnEndText:'TN EDGEText',
+ cnVlan:'66',
+ cnVersion:'1.1.2.3'
+ }
+ this.outerData = {...this.outerData,...param}
+ console.log('new',this.outerData)
this.status = this.outerData.orchestration_status
this.getDetail()
}
});
this.businessRequirement = [{ ...business_demand_info, area }];
this.NSTinfo = [nst_info];
+ console.log('ngs',this.NSTinfo)
if (nsi_info.nsi_id !== null) {
this.nsiInfo = [nsi_info];
}
</div>
</td>
<td>
+ <!-- [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'}" -->
<a (click)="showdetail(data)"
- [ngClass]="{'cannotclick':data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'}">View
+ >View
Detail</a>
</td>
</tr>
Code Review / usecase-ui.git / commitdiff
