summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/ccvpn-detail
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-detail')
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css138
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html336
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts368
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();
+ }
+
+}