diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-detail')
4 files changed, 867 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css new file mode 100644 index 00000000..710bd104 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -0,0 +1,138 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #fff; + height: 90%; + overflow-y: auto; +} +.model .back { + position: absolute; + top: 10px; + right: 20px; +} +.model .detaildata { + position: relative; + width: 60%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 15px; +} +.model .detaildata h3.title { + height: 20px; + font: 700 20px/20px "Arial"; + color: #666; +} +.model .detaildata h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0px; + color: #000; +} +/* SOTN VPN */ +.model .detaildata .sotnvpn ul li { + display: inline-block; + height: 35px; + width: 49.5%; +} +.model .detaildata .sotnvpn ul li span { + display: inline-block; + width: 110px; + font: 700 14px "Arial"; + color: #3fa8eb; + vertical-align: middle; +} +/* site Detail */ +.model .detaildata .site .siteDetail { + position: fixed; + z-index: 10; + left: 260px; + top: 50px; + background-color: #fff; + box-shadow: 0px 0px 20px #000; + width: 50%; + max-height: 85%; + border-radius: 5px; + overflow-y: auto; +} +.model .detaildata .site h3 { + margin: 0; + height: 30px; + font: 700 16px/30px "Arial"; + padding-left: 10px; + background-color: #ddd; +} +.model .detaildata .site h3 .closeDetail { + cursor: pointer; + padding: 2px 15px; + color: #3fa8eb; +} +.model .detaildata .site ul li { + padding-left: 5px; + display: inline-block; + height: 35px; + width: 32%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.model .detaildata .site ul li span { + display: inline-block; + width: 95px; + font: 700 14px "Arial"; + color: #3fa8eb; + vertical-align: middle; +} + +/* 图 */ +.model .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; +} +.model .chart #detailChart { + position: relative; + width: 100%; + height: 80%; + margin-top: 20px; +} +.model .chart #detailChart .cloudcounty { + cursor: pointer; +} + +.model .chart #detailChart .couldDetail { + position: absolute; + left: 50%; + top: 10px; + width: 80%; + transform: translate(-50%,0); + height: 160px; + background-color: #aaa; + border-radius: 5px; + box-shadow: 0px 0px 20px #000; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html new file mode 100644 index 00000000..33d56eb9 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -0,0 +1,336 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Services List </h3> +<hr> +<div class="model"> + <!-- 详情数据 --> + <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button> + <div class="detaildata fl"> + <h3 class="title">{{detailParams.sotnvpnSer['service-instance-name']}} Instance Detail</h3> + <div class="sotnvpn clearfix"> + <h3>SOTN VPN Info</h3> + <ul> + <li><span>Name:</span> {{sotnVpnInfo.name}}</li> + <li><span>Description:</span> {{sotnVpnInfo.description}} </li> + <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li> + <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li> + <li><span>COS:</span> {{sotnVpnInfo.COS}}</li> + <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li> + <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li> + <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li> + <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li> + <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li> + <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li> + <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li> + <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li> + <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li> + </ul> + </div> + + <div class="site"> + <h3>Site List</h3> + <nz-table #nzTable [nzData]="siteList" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="20%"> Description </th> + <th nzWidth="15%"> Post Code </th> + <th nzWidth="15%"> Address </th> + <th nzWidth="15%"> VLAN </th> + <th nzWidth="10%"> Action </th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.baseNames.name}}</td> + <td>{{item.baseNames.description}}</td> + <td>{{item.baseNames.postcode}}</td> + <td>{{item.baseNames.address}}</td> + <td>{{item.baseNames.vlan}}</td> + <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + <div class="siteDetail" *ngIf="siteDetail"> + <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3> + <ul> + <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li> + <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li> + <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li> + <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li> + <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li> + <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li> + <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li> + <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li> + <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li> + <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li> + <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li> + <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li> + <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li> + <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li> + <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li> + </ul> + <div *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"> + <h3>CPE</h3> + <ul> + <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li> + <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li> + <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li> + <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li> + <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li> + <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li> + <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li> + </ul> + <h3>WAN Port</h3> + <nz-table #nzTable [nzData]="siteDetailData.wanportNames" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="20%"> Description </th> + <th nzWidth="15%"> PortType </th> + <th nzWidth="15%"> PortNumber </th> + <th nzWidth="15%"> IPAddress </th> + <th nzWidth="10%"> Action </th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.sitewanport_name}}</td> + <td>{{item.sitewanport_description}}</td> + <td>{{item.sitewanport_portType}}</td> + <td>{{item.sitewanport_portNumber}}</td> + <td>{{item.sitewanport_ipAddress}}</td> + <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()"> + <ng-template #modalTitle> + WAN Port Detail + </ng-template> + + <ng-template #modalContent> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p> + </ng-template> + + <ng-template #modalFooter> + <!-- <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button> --> + </ng-template> + </nz-modal> + </div> + + </div> + </div> + + <div class="sitegroup" *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"> + <h3>Site_Group List</h3> + <nz-table #nzTable [nzData]="siteGroupList" + [nzLoading]="loading" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="20%"> Group Name </th> + <th nzWidth="20%"> Topology </th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.name}}</td> + <td>{{item.topology}}</td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + </div> + <!-- 图 --> + <div class="chart fr"> + + <div id="detailChart"> + <!-- <svg width="100%" height="100%"> + <line *ngFor="let item of lines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#3fa8eb;stroke-width:2"/> + <image xlink:href="./assets/images/cloud-county.png" + class="cloudcounty" + (click)="toggleClick()" + (mouseover)="hoverShowcould()" + (mouseout)="hoverHidecould()" + x="175" y="175" height="50px" width="50px"/> + <image *ngFor="let item of siteImage" + xlink:href="./assets/images/cloud-city.png" + [attr.x]="item.x" [attr.y]="item.y" height="50px" width="50px"/> + </svg> + <div class="couldDetail" *ngIf="hoverShow || clickShow"> + + </div> --> + <svg width="100%" height="100%" style="position: relative"> + <!--背景大图--> + <image xlink:href="./assets/images/bigcloud.png" + class="backgroundcloud" + width="100%" + style="position: absolute;z-index:-1"> + </image> + <!--tp,site，domain之间的连线--> + <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#FFC000; stroke-width:2"></line> + <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line> + <!--本地domain--> + <g class="clouds"> + <image xlink:href="./assets/images/domain.png" + id="domain1" + width="20%" + x="10%" y="10%" + ></image> + <text dx="12%" dy="16%" style="font-size: 14px; fill:#666;width: 20px;"> + {{vpns[0].domain}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/domain.png" + id="domain2" + width="20%" + x="40%" y="13%" + ></image> + <text dx="43%" dy="19%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].domain}} + </text> + </g> + <!--domain1下连接的tp--> + <g class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp1" + height="16" width="20" + x="15%" y="25%" + ></image> + <text dx="18%" dy="27%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].sitetpname}} + </text> + </g> + <g class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp2" + height="16" width="20" + x="30%" y="10%" + ></image> + <text dx="30%" dy="6%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].othertpname}} + </text> + </g> + <!--domain2下连接的tp--> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp3" + height="16" width="20" + x="40%" y="10%" + ></image> + <text dx="40%" dy="9%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].othertpname}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp4" + height="16" width="20" + x="43%" y="28%" + ></image> + <text dx="46%" dy="30%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].sitetpname}} + </text> + </g> + <!--外部云--> + <g class="clouds"> + <image xlink:href="./assets/images/out-domain.png" + id="extent-cloud" + height="70.8" width="120" + x="66%" y="12%" + ></image> + <text dx="68%" dy="18%" style="font-size: 14px; fill: #666;width: 20px;"> + SP Partent Network + </text> + </g> + <!--本地的2个site--> + <g class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site1" + height="59" width="100" + x="0%" y="48%" + ></image> + <text dx="2%" dy="53%" style="font-size: 14px; fill: #666;width: 20px;"> + {{localSite[0]["service-instance-name"]}} + </text> + </g> + <g *ngIf="!detailSites" class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site2" + height="59" width="100" + x="25%" y="48%" + ></image> + <text dx="26%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;"> + {{localSite[1]["service-instance-name"]}} + </text> + </g> + <!--外部的2个site--> + <g *ngIf="!detailSites" class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site3" + height="59" width="100" + x="50%" y="48%" + ></image> + <text dx="52%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[1]["service-instance-name"]}} + </text> + </g> + <g class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site4" + height="59" width="100" + x="75%" y="48%" + ></image> + <text dx="80%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[0]["service-instance-name"]}} + </text> + </g> + </svg> + </div> + </div> + +</div> diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts new file mode 100644 index 00000000..dc5d34d9 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CcvpnDetailComponent } from './ccvpn-detail.component'; + +describe('CcvpnDetailComponent', () => { + let component: CcvpnDetailComponent; + let fixture: ComponentFixture<CcvpnDetailComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CcvpnDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CcvpnDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts new file mode 100644 index 00000000..c9d60ef8 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -0,0 +1,368 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-ccvpn-detail', + templateUrl: './ccvpn-detail.component.html', + styleUrls: ['./ccvpn-detail.component.css'] +}) +export class CcvpnDetailComponent implements OnInit { + + constructor(private myhttp:MyhttpService) { } + + ngOnInit() { + // this.getDetails(); + this.dataInit(); + this.drawImages(); + } + + @Input() detailParams; + @Input() namesTranslate; + @Output() closeDetail = new EventEmitter(); + + sotnVpnInfo:any; + siteList=[]; + siteGroupList=[]; + dataInit(){ + // 循环真实参数，对比名字转换配置文件，将真实参数名字改成通用名字 + this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs; + for(let key in this.sotnVpnInfo){ + for(let key2 in this.namesTranslate.sotnNameTranslate){ + let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_"); + if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){ + this.sotnVpnInfo[key2] = this.sotnVpnInfo[key]; + break; + } + } + } + + this.siteList = this.detailParams.siteSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; + }) + this.siteList.forEach((oneSite,idex)=>{ + oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[]; + for(let key in oneSite){ + let hasfind = false; + if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue }; + for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){ + if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){ + oneSite["baseNames"][key2] = oneSite[key]; + hasfind = true; + break; + } + } + if(hasfind){ continue }; + for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){ + if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){ + oneSite["cpeNames"][key3] = oneSite[key]; + hasfind = true; + break; + } + } + if(hasfind){ continue }; + let wanportStartName = key.split("_")[0]; + // 先分组，后面再变换名字 + let theItem = oneSite["wanportNames"].find((item,index)=>{ + if(item){ + return Object.keys(item)[0].startsWith(wanportStartName) + } + }) + theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]}) + } + let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames); + oneSite["wanportNames"].forEach((item)=>{ + for(let key in item){ + let newName = wanportTs.find((name)=>{ + return key.endsWith(name); + }) + newName?item[newName]=item[key]:null; + } + }) + + }) + + this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; + }) + this.siteGroupList.forEach((oneSiteGroup)=>{ + for(let key in oneSiteGroup){ + for(let key2 in this.namesTranslate.siteGroupNameTranslate){ + let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_"); + if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){ + oneSiteGroup[key2] = oneSiteGroup[key]; + break; + } + } + } + }) + console.log(this.siteList) + this.drawImage(this.siteList); + } + + // site详情 + siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]}; + siteDetail = false; + showSiteDetail(item){ + this.siteDetail = true; + this.siteDetailData = item; + } + + wanPortModal = false; + wanPortDetail = {}; + showWanportDetail(item){ + this.wanPortModal = true; + this.wanPortDetail = item; + } + handleCancel(){ + this.wanPortModal = false; + } + + // sitegroup详情 + + // site节点图形描绘 + // site分类，根据site查tp pnf --> allotted-resource + localSite = [];//本地site + outerSite = [];//外部site + + getSiteAResource(){ + return new Promise((res,rej)=>{ + this.detailParams.siteSer.forEach((site)=>{ + site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site); + }) + + if(this.localSite[0]["service-instance-name"].startsWith("Dc")){ + this.localSite.reverse(); + } + + if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){ + this.outerSite.reverse(); + } + + // 本地site获取tp pnf + this.localSite.forEach((site)=>{ + let obj = { + customerId: this.detailParams.customer.id, + serviceType: this.detailParams.serviceType, + serviceId: site["service-instance-id"] + } + this.myhttp.getAllottedResource(obj) + .subscribe((data)=>{ + // console.log(data); + let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"}); + // console.log(resource); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"]; + // console.log(tps_pnfs); + // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"]; + site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"]; + // // 通过pnfname获取domain（network-resource）; + // this.myhttp.getPnfDetail(site.pnfname) + // .subscribe((data2)=>{ + // // console.log(data2); + // let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"]; + // site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"]; + // res("sites-domain"); + // }) + res("sites-domain"); + }) + }) + }) + } + //通过sotn 查vpn-id --> tp pnf --> allotted-resource + relation = {sotn:{ + name:"sotn1", + vpns:[ + { + name:"vpn1", + domain:"domain1", + site:"site1", + tps:[ + {name:"tp1",lineto:"site1"}, + {name:"tp2",lineto:"domain1"} + ] + }, + { + name:"vpn2", + domain:"domain2", + site:"site2", + tps:[ + {name:"tp3",lineto:"site2"}, + {name:"tp4",lineto:"domain2"} + ] + } + ] + }}; + + vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}]; + getSotnAresource(){ + return new Promise((res,rej)=>{ + let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"] + .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"] + .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"]; + this.myhttp.getSotnConnectivity(connectivityId) + .subscribe((data)=>{ + // console.log(data); //默认一个connectivityId只能查到一个connectivity + let vpns = data.connectivity[0]["relationship-list"]["relationship"] + .filter((item)=>{ return item["related-to"]=="vpn-binding"}) + .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]}); + console.log(vpns); + this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}}); + this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{ + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2)=>{ + // console.log(data2); //默认一个vpnid只能查到一个vpnbinding + let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"] + .filter((item)=>{ return item["related-to"]=="p-interface"}) + .map((item2)=>{return item2["relationship-data"]}); + let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]}); + let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]}); + // console.log(pnfname) + // console.log(tpnames) + vpn.tps = tpnames; + // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项，即同domain + // console.log(thissite); + // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename}); + // 通过pnfname获取domain（network-resource）; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((data2)=>{ + // console.log(data2); + let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"]; + vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"]; + if(this.localSite[index]){ + vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename; + console.log(tpnames) + console.log(vpn.sitetpname) + vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname}); + }else{ + vpn.sitetpname = this.localSite[0].tpsitename; + vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname}); + } + + this.vpns = this.detailParams.sotnvpnSer.vpns; + res("sotn-domain"); + // console.log(vpn); + }) + + }) + }) + }) + }) + } + + drawImages(){ + + this.getSiteAResource().then((data)=>{ + console.log(data); + return this.getSotnAresource() + }).then((data)=>{ + console.log(data); + console.log(this.localSite); + this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true; + this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3; + // 当只有一个vpn的时候 + if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){ + let line = { + "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2 当本地云只有一朵的时候，tp2与本地site2相连 + } + this.detailLines.length = this.detailLines.length-6; + this.detailLines.push(line); + // 当本地site有两个的时候 + if(this.localSite.length==2){ + let line = { + "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3 + } + this.detailLines.push(line); + } + // 当外部site有两个的时候 + if(this.outerSite.length==2){ + let line = { + "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 + } + this.detailLines.push(line); + } + } + }) + // let allnodes = [this.getSiteAResource(),this.getSotnAresource()]; + // Promise.all(allnodes).then((data)=>{ + // console.log(data) + // console.log(this.localSite); + + + // }) + } + + detailSites=false; + detailLines=[ //详情拓扑图连线的坐标 + { + "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1 + }, + { + "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1 + } + , + { + "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2 + }, + + { + "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4 + }, + + { + "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2 + }, + { + "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3 + }, + { + "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3 + }, + + { + "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4 + }, + { + "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 + }, + { + "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3 + } + ]; + lines=[]; + siteImage=[]; + drawImage(sitelist){ + let cx = 200; + let cy = 200; + let r = 150; + let startAngle = -210 * (Math.PI/180); + let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1; + + this.lines = sitelist.map((item,index)=>{ + let x = cx + Math.cos(startAngle - step*index)*r; + let y = cy + Math.sin(startAngle - step*index)*r; + return {img:"line",x1:cx,y1:cy,x2:x,y2:y} + }) + this.siteImage = this.lines.map((item)=>{ + return {img:"site",x:item.x2 - 25,y:item.y2 - 25} + }) + console.log(this.siteImage,this.lines) + } + clickShow = false; + hoverShow = false; + toggleClick(){ + this.clickShow = !this.clickShow; + } + hoverShowcould(){ + this.hoverShow = true; + } + hoverHidecould(){ + this.hoverShow = false; + } + + + + goback(){ + this.closeDetail.emit(); + } + +} |