Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3
Issue-ID: USECASEUI-154
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

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