summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts')
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts1158
1 files changed, 811 insertions, 347 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index c9d60ef8..6f30253d 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -3,366 +3,830 @@ 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']
+ 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;
- }
- }
+ constructor(private myhttp:MyhttpService) { }
+
+ ngOnInit() {
+ // this.getDetails();
+ this.dataInit();
+ this.drawImages();
}
- 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;
- }
+ @Input() detailParams;
+ @Input() namesTranslate;
+ @Output() closeDetail = new EventEmitter();
+
+ sotnVpnInfo:any;
+ siteList=[];
+ siteGroupList=[];
+ dataInit(){
+ console.log(this.detailParams);
+
+ this.sotnVpnInfo = JSON.parse(this.detailParams['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;
+ }
+ }
}
- if(hasfind){ continue };
- let wanportStartName = key.split("_")[0];
- // 先分组，后面再变换名字
- let theItem = oneSite["wanportNames"].find((item,index)=>{
- if(item){
- return Object.keys(item)[0].startsWith(wanportStartName)
- }
+
+ this.siteList = this.detailParams.siteSer.map((item)=>{
+ return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
})
- 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.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.vpns = this.detailParams.sotnvpnSer.vpns;
- res("sotn-domain");
- // console.log(vpn);
- })
-
- })
- })
+ this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
+ return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
})
- })
- }
-
- 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);
+ 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;
+ }
+ }
+ }
+ })
+ }
+
+
+ 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;
+ }
+
+
+
+
+
+ localSite = [];
+ outerSite = [];
+
+ 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] && this.localSite[0]["service-instance-name"].startsWith("Dc")){
+ this.localSite.reverse();
+ }
+
+ if(this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")){
+ this.outerSite.reverse();
+ }
+ console.log(this.localSite);
+ console.log(this.outerSite);
+
+ 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)=>{
+ let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
+ let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
+ site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
+ res("sites-domain");
+ })
+ })
+ })
+ }
+
+
+ vpns = [{
+ name:"",
+ domain: "",
+ tp1: "",
+ tp2: "",
+ tps:[],
+ site: [],
+ type: "domain",
+ start:false,
+ end:false
+ }];
+ cloudDomain={
+ cloud: "Partent Network",
+ site: [],
+ type: "cloud"
+ };
+ d3Data={
+ dates:[],
+ linkss:[]
+ };
+ svg=d3.select("#togo");
+ scale=1;
+ width=600;
+ height=600;
+ container;
+ nodes;
+ lineGroup;
+
+ getSotnAresource(){
+ return new Promise((res,rej)=>{
+ let connectivityId = this.detailParams["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)=>{
+
+ 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.vpns = vpns.map((item)=>{return {
+ name:item,
+ domain: "",
+ tp1: "",
+ tp2: "",
+ tps:[],
+ site: [],
+ type: "domain",
+ start:false,
+ end:false
+ }});
+ this.detailParams.vpns.forEach((vpn,index)=>{
+ this.myhttp.getVpnBinding(vpn.name)
+ .subscribe((data2)=>{
+
+ 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"]});
+
+ vpn.tps = tpnames;
+ this.myhttp.getPnfDetail(pnfname[0])
+ .subscribe((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"];
+ console.log(this.localSite)
+ for(let i=0;i<this.localSite.length;i++){
+ for(let a=0;a<this.detailParams.vpns.length;a++){
+ let tps=this.detailParams.vpns[a].tps;
+ if(i==0){
+ if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){
+ this.detailParams.vpns[a].site=[];
+ let index=tps.indexOf(this.localSite[i]["tpsitename"]);
+ let tp1=tps.slice(index,1)[0];
+ let tp2=tps.find((name)=>{return name != tp1});
+ this.detailParams.vpns[a].tp1=tp1;
+ this.detailParams.vpns[a].tp2=tp2;
+ this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]);
+ this.detailParams.vpns[a].start=true;
+ let first=this.detailParams.vpns.splice(a,1)[0];
+ console.log(first)
+ this.detailParams.vpns.unshift(first);
+ console.log(this.detailParams.vpns)
+ }else {
+ this.detailParams.vpns[a].tp1=tps[0];
+ this.detailParams.vpns[a].tp2=tps[1];
+ }
+
+ } else if(i==1){
+ if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){
+ let thisDomain=this.detailParams.vpns[a].domain;
+ if(thisDomain==this.detailParams.vpns[0].domain){
+ console.log(this.detailParams.vpns[0]);
+ console.log(this.localSite[i]["service-instance-name"]);
+ this.detailParams.vpns[0].site.push(this.localSite[i]["service-instance-name"])
+ console.log(this.detailParams.vpns[0])
+ }else {
+ this.detailParams.vpns[a].site=[];
+ let index=tps.indexOf(this.localSite[i]["tpsitename"]);
+ let tp2=tps.slice(index,1)[0];
+ let tp1=tps.find((name)=>{return name != tp2});
+ this.detailParams.vpns[a].tp1=tp1;
+ this.detailParams.vpns[a].tp2=tp2;
+ console.log("有多个domain,2个site");
+ this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]);
+ this.detailParams.vpns[a].start=false;
+ this.detailParams.vpns[a].end=true;
+ let last=this.detailParams.vpns.splice(a,1)[0];
+ console.log(last);
+ this.detailParams.vpns.push(last);
+ }
+
+ }
+ }
+
+ }
+ }
+ for(let b=0;b<this.outerSite.length;b++){
+ this.cloudDomain.site.push(this.outerSite[b]["service-instance-name"]);
+ }
+ this.detailParams.vpns.push(this.cloudDomain);
+ console.log(this.detailParams.vpns);
+ this.vpns = this.detailParams.vpns;
+ console.log(this.vpns);
+ res(this.detailParams.vpns);
+ })
+
+ })
+ })
+ })
+ })
+ }
+
+ drawImages(){
+ this.getSiteAResource().then((data)=>{
+ console.log(data);
+ return this.getSotnAresource();
+ }).then((data)=>{
+ console.log(data);
+ this.detailParams.vpns.forEach((item)=>{
+ if(item.type == "domain" && item.site.length == 0){
+ this.d3Data.dates.push(
+ {
+ name: item.domain,
+ type: 'domain'
+ },{
+ name: item.tp1,
+ type: 'tp'
+
+ },{
+ name: item.tp2,
+ type: 'tp'
+ });
+ this.d3Data.linkss.push({
+ source: item.domain,
+ target: item.domain
+ },{
+ source: item.domain,
+ target: item.tp1
+ },{
+ source: item.domain,
+ target: item.tp2
+ })
+ };
+ if (item.type == "domain" && item.site.length == 1) {
+ this.d3Data.dates.push({
+ name: item.domain,
+ type: 'domain'
+ }, {
+ name: item.tp1,
+ type: 'tp'
+ }, {
+ name: item.tp2,
+ type: 'tp'
+ });
+ this.d3Data.linkss.push({
+ source: item.domain,
+ target: item.domain
+ }, {
+ source: item.domain,
+ target: item.tp1
+ }, {
+ source: item.domain,
+ target: item.tp2
+ });
+ if (item.start == true && item.end == false) {
+ this.d3Data.dates.push(
+ {
+ name: item.site[0],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.tp1,
+ target: item.site[0]
+ })
+ }
+ if (item.start == false && item.end == true) {
+ this.d3Data.dates.push(
+ {
+ name: item.site[0],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.tp2,
+ target: item.site[0]
+ })
+ }
+
+ }else if (item.type == "domain" && item.site.length == 2) {
+ this.d3Data.dates.push({
+ name: item.domain,
+ type: 'domain'
+ }, {
+ name: item.tp1,
+ type: 'tp'
+ }, {
+ name: item.tp2,
+ type: 'tp'
+ },
+ {
+ name: item.site[0],
+ type: 'site'
+ },
+ {
+ name: item.site[1],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.domain,
+ target: item.domain
+ }, {
+ source: item.domain,
+ target: item.tp1
+ }, {
+ source: item.domain,
+ target: item.tp2
+ }, {
+ source: item.tp1,
+ target: item.site[0]
+ }, {
+ source: item.tp2,
+ target: item.site[1]
+ });
+ }else if (item.type == "cloud" && item.site.length == 1) {
+ this.d3Data.dates.push({
+ name: item.cloud,
+ type: 'cloud'
+ },
+ {
+ name: item.site[0],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.cloud,
+ target: item.cloud
+ }, {
+ source: item.cloud,
+ target: item.site[0]
+ })
+ }
+ else if (item.type == "cloud" && item.site.length == 2) {
+ this.d3Data.dates.push({
+ name: item.cloud,
+ type: 'cloud',
+ source: item.cloud,
+ target: item.cloud
+ },
+ {
+ name: item.site[0],
+ type: 'site',
+ source: item.cloud,
+ target: item.site[0]
+ },
+ {
+ name: item.site[1],
+ type: 'site',
+ source: item.cloud,
+ target: item.site[1]
+ });
+ this.d3Data.linkss.push({
+ source: item.cloud,
+ target: item.cloud
+ }, {
+ source: item.cloud,
+ target: item.site[0]
+ }, {
+ source: item.cloud,
+ target: item.site[1]
+ })
+ }
+
+
+ });
+
+ var siteNum = 0;
+
+ for (var b = 0; b < this.d3Data.dates.length; b++) {
+ if (this.d3Data.dates[b].type == "site") {
+ siteNum++;
+ }
+ }
+
+ if (this.detailParams.vpns.length == 2) {
+ var source = this.detailParams.vpns.find((item) => {return item["type"] == "domain"}).site[1];
+ var target = this.detailParams.vpns.find((item) => {return item["type"] == "cloud"}).site[0];
+ this.d3Data.linkss.push({
+ source: source,
+ target: target
+ })
+ } else if (this.detailParams.vpns.length > 2) {
+ if (siteNum == 2) {
+ for (var c = 0; c < this.detailParams.vpns.length - 1; c++) {
+ if (c + 1 == this.detailParams.vpns.length - 1) {
+ var sourcess = this.detailParams.vpns[c].tp2,
+ targetss = this.detailParams.vpns.find((item)=> {return item["type"] == "cloud";}).cloud;
+ this.d3Data.linkss.push({
+ source: sourcess,
+ target: targetss
+ });
+ break;
+ }
+ var sources = this.detailParams.vpns[c].tp2,
+ targets = this.detailParams.vpns[c + 1].tp1;
+ this.d3Data.linkss.push({
+ source: sources,
+ target: targets
+ })
+ }
+ } else if (siteNum == 4) {
+ for (var c = 0; c < this.detailParams.vpns.length - 1; c++) {
+ if (c + 1 == this.detailParams.vpns.length - 1) {
+ break;
+ }
+ var sources = this.detailParams.vpns[c].tp2,
+ targets = this.detailParams.vpns[c + 1].tp1;
+ this.d3Data.linkss.push({
+ source: sources,
+ target: targets
+ })
+ }
+ }
+ }
+ setTimeout(this.render(),0)
+ });
+ }
+
+
+
+ clickShow = false;
+ hoverShow = false;
+ toggleClick(){
+ this.clickShow = !this.clickShow;
+ }
+ hoverShowcould(){
+ this.hoverShow = true;
+ }
+ hoverHidecould(){
+ this.hoverShow = false;
+ }
+
+
+
+ goback(){
+ this.closeDetail.emit();
+ }
+
+
+ render() {
+ console.log("dadada");
+ console.log(this.d3Data);
+ console.log(this.detailParams.vpns);
+ this.scale = 1;
+
+ this.svg .attr('width', this.width)
+ .attr('height', this.height);
+ this.container = this.svg.append('g')
+ .attr('transform', 'scale(' + this.scale + ')');
+
+ this.initPosition();
+ this.initLink();
+ this.initNode();
+ }
+
+
+ initPosition() {
+ let origin = [this.width / 6, this.height / 7];
+ var data=this.d3Data.dates;
+ let points = this.getVertices(origin, Math.min(this.width, this.height) * 0.3,data.length,this.detailParams.vpns);
+
+ this.d3Data.dates.forEach((item,i)=>{
+ item.x = points[i].x;
+ item.y = points[i].y;
+ })
+ }
+
+
+ getVertices(origin, r, n,data) {
+ if (typeof n !== 'number') return;
+ var ox = origin[0];
+ var oy = origin[1];
+ var i = 0;
+ var points = [];
+ var tempAngle =180,
+ reduce=50,
+ add=100;
+ for(let a=0;a<this.detailParams.vpns.length;a++){
+ if(this.detailParams.vpns[a].type=="domain"){
+ if(this.detailParams.vpns[a].site.length == 0){
+ tempAngle =180*i;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle+reduce,
+ y: oy+add
+ });
+ i++;
+ }else if((this.detailParams.vpns[a].site.length == 1)){
+ tempAngle =180*i;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle+reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle-1.5*reduce,
+ y: oy+2*add
+ });
+ i++;
+ } else if((this.detailParams.vpns[a].site.length == 2)){
+ tempAngle =350*i;
+ reduce=70;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle+reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle-1.5*reduce,
+ y: oy+2*add
+ }
+ ,{
+ x: ox +tempAngle+reduce,
+ y: oy+2*add
+ });
+ i++;
+ }
+
+ }else if((this.detailParams.vpns[a].type=="cloud")){
+ if((this.detailParams.vpns[a].site.length ==1)){
+ tempAngle =180*i;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle+1.5*reduce,
+ y: oy+2*add
+ });
+ i++;
+ } else if((this.detailParams.vpns[a].site.length == 2)){
+ if((this.detailParams.vpns.length>2)){
+ tempAngle =180*i;
+ }else{
+ tempAngle =400*i;
+ }
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-1.5*reduce,
+ y: oy+2*add
+ }
+ ,{
+ x: ox +tempAngle+1.5*reduce,
+ y: oy+2*add
+ });
+ i++;
+ }
+
+ }
+ }
+
+ return points;
+ }
+
+
+ initLink() {
+ this.drawLinkLine();
+ }
+
+
+ initNode() {
+ var self = this;
+
+ this.nodes = this.container.selectAll(".node")
+ .data(this.d3Data.dates)
+ .enter()
+ .append("g")
+ .attr("transform", function (d) {
+ return "translate(" + d.x + "," + d.y + ")";
+ })
+ .attr('class', 'node')
+ .style("cursor","pointer")
+ .call(d3.behavior.drag()
+ .on("drag", function (d) {
+ self.onDrag(this, d)
+ })
+ );
+
+
+ this.drawNodeSymbol();
+
+ this.drawNodeTitle();
+ }
+
+
+
+ drawNodeSymbol() {
+ var imgmap = {
+ 'domain': '../../assets/images/domain.png',
+ 'tp': '../../assets/images/tp.png',
+ 'site': '../../assets/images/site.png',
+ 'cloud': '../../assets/images/out-domain.png'
+ };
+
+
+ this.nodes.append('image')
+ .attr('width', function (d) {
+ let width = "15%";
+ switch (d.type) {
+ case 'domain':
+ width ="15%";
+ break;
+ case 'tp':
+ width ="4%";
+ break;
+ case 'site':
+ width ="10%";
+ break;
+ case 'cloud':
+ width ="15%";
+ break;
+ default:
+ break;
+ }
+ return width;
+ })
+ .attr('height', function (d) {
+ let height = "15%";
+ switch (d.type) {
+ case 'domain':
+ height ="15%";
+ break;
+ case 'tp':
+ height ="4%";
+ break;
+ case 'site':
+ height ="10%";
+ break;
+ case 'cloud':
+ height ="15%";
+ break;
+ default:
+ break;
+ }
+ return height;
+ })
+ .attr('xlink:href', function (d) {
+ return imgmap[d.type];
+ })
+ .attr('x',function () {
+ return -this.getBBox().width/2
+ })
+ .attr('y',function () {
+ return -this.getBBox().height/2
+ });
+ }
+
+
+
+ drawNodeTitle() {
+
+ this.nodes.append("text")
+ .attr('class','node-title')
+ .text(function (d) {
+ return d.name;
+ })
+ .attr("dx",function (d) {
+ var x=0;
+ if(d.type=="tp"){
+ x=20;
+ }else {
+ x=0;
+ }
+ return x;
+ })
+ .attr("dy",function (d) {
+ var y=0;
+ if(d.type=="tp"){
+ y=25;
+ }else {
+ y=0;
+ }
+ return y;
+ });
+ }
+
+
+ drawLinkLine() {
+ let data = this.d3Data.dates;
+ if (this.lineGroup) {
+ this.lineGroup.selectAll('.link')
+ .attr('d', link => genLinkPath(link))
+ } else {
+ this.lineGroup = this.container.append('g');
+ this.lineGroup.selectAll('.link')
+ .data(this.d3Data.linkss)
+ .enter()
+ .append('path')
+ .attr('class', 'link')
+ .attr('d',function (link) {
+ return genLinkPath(link)
+ })
+
}
- // 当外部site有两个的时候
- if(this.outerSite.length==2){
- let line = {
- "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
- }
- this.detailLines.push(line);
+ function genLinkPath(d) {
+ let sx = data.find(function(item){
+ return item["name"]==d.source;
+ }).x;
+ let sy = data.find(function(item){
+ return item["name"]==d.source;
+ }).y;
+ let tx =data.find(function(item){
+ return item["name"]==d.target;
+ }).x;
+ let ty =data.find(function(item){
+ return item["name"]==d.target;
+ }).y;
+ return 'M' + sx + ',' + sy + ' L' + tx + ',' + ty;
}
- }
- })
- // 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
+
+
+
+ update(d) {
+ this.drawLinkLine();
}
- ];
- 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();
- }
+
+
+ onDrag(ele, d) {
+ d.x = d3.event.x;
+ d.y = d3.event.y;
+ d3.select(ele)
+ .attr('transform', "translate(" + d3.event.x + "," + d3.event.y + ")");
+ this.update(d);
+ }
+
}