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(); } }