<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>
+ <h3 class="title">{{detailParams['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>
+
+ <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>
+
+ </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> {{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>
+ <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li>
+ <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li>
+ <li *ngIf="detailParams.serviceDomain == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li>
+ <li *ngIf="detailParams.serviceDomain == '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>
-
- <div class="site">
- <h3>Site List</h3>
- <nz-table #nzTable [nzData]="siteList"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
+ <div *ngIf="detailParams.serviceDomain == '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%"> Post Code </th>
- <th nzWidth="15%"> Address </th>
- <th nzWidth="15%"> VLAN </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.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>
+ </thead>
+ <tbody>
+
+ <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>
+
+ </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 #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>
+ <ng-template #modalFooter>
+ </ng-template>
+ </nz-modal>
</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="sitegroup" *ngIf="detailParams.serviceDomain == '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>
+
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.topology}}</td>
+ </tr>
+
+ </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 id="detailChart">
+ <svg id="togo">
- </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>
+ </svg>
+ </div>
</div>
</div>
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);
+ }
+
}
Code Review / usecase-ui.git / commitdiff