Fix instance detail for CCVPN

Change-Id: I33749a6fea3dfb3fb1f649adc7ad99a9967825ae
Issue-ID: USECASEUI-171
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

4 files changed, 996 insertions, 642 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
index 710bd104..02c3d4c6 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -135,4 +135,22 @@ hr {
     background-color: #aaa;
     border-radius: 5px;
     box-shadow: 0px 0px 20px #000;
+}
+#togo{
+    width: 600px;
+    height:400px;
+    border:1px solid #ccc;
+    user-select: none;
+}
+#togo text{
+    font-size:10px;
+    fill:#1A2C3F;
+    text-anchor: middle;
+}
+
+#togo .link{
+    stroke:#FFC000;
+}
+#togo .node-title{
+    font-size: 14px;
 }
\ 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
index 33d56eb9..cd3e2067 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -16,321 +16,178 @@
 <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>
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
index dc5d34d9..b8afc9c3 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
@@ -1,3 +1,18 @@
+/*
+    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.
+*/
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CcvpnDetailComponent } from './ccvpn-detail.component';
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index c9d60ef8..6f30253d 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -3,366 +3,830 @@ import { MyhttpService } from '../myhttp.service';
 import * as d3 from 'd3';
 
 @Component({
-  selector: 'app-ccvpn-detail',
-  templateUrl: './ccvpn-detail.component.html',
-  styleUrls: ['./ccvpn-detail.component.css']
+    selector: 'app-ccvpn-detail',
+    templateUrl: './ccvpn-detail.component.html',
+    styleUrls: ['./ccvpn-detail.component.css']
 })
 export class CcvpnDetailComponent implements OnInit {
 
-  constructor(private myhttp:MyhttpService) { }
-
-  ngOnInit() {
-    // this.getDetails();
-    this.dataInit();
-    this.drawImages();
-  }
-
-  @Input() detailParams;
-  @Input() namesTranslate;
-  @Output() closeDetail = new EventEmitter();
-
-  sotnVpnInfo:any;
-  siteList=[];
-  siteGroupList=[];
-  dataInit(){
-    // 循环真实参数，对比名字转换配置文件，将真实参数名字改成通用名字
-    this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs;
-    for(let key in this.sotnVpnInfo){
-      for(let key2 in this.namesTranslate.sotnNameTranslate){
-        let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_");
-        if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
-          this.sotnVpnInfo[key2] = this.sotnVpnInfo[key];
-          break;
-        }
-      }        
+    constructor(private myhttp:MyhttpService) { }
+
+    ngOnInit() {
+        // this.getDetails();
+        this.dataInit();
+        this.drawImages();
     }
 
-    this.siteList = this.detailParams.siteSer.map((item)=>{
-      return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
-    })
-    this.siteList.forEach((oneSite,idex)=>{
-      oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[];
-      for(let key in oneSite){
-        let hasfind = false;
-        if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue };
-        for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){
-          if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){
-            oneSite["baseNames"][key2] = oneSite[key];
-            hasfind = true;
-            break;
-          }
-        }
-        if(hasfind){ continue };
-        for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){
-          if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){
-            oneSite["cpeNames"][key3] = oneSite[key];
-            hasfind = true;
-            break;
-          }
+    @Input() detailParams;
+    @Input() namesTranslate;
+    @Output() closeDetail = new EventEmitter();
+
+    sotnVpnInfo:any;
+    siteList=[];
+    siteGroupList=[];
+    dataInit(){
+        console.log(this.detailParams);
+
+        this.sotnVpnInfo = JSON.parse(this.detailParams['input-parameters']).service.parameters.requestInputs;
+        for(let key in this.sotnVpnInfo){
+            for(let key2 in this.namesTranslate.sotnNameTranslate){
+                let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_");
+                if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+                    this.sotnVpnInfo[key2] = this.sotnVpnInfo[key];
+                    break;
+                }
+            }
         }
-        if(hasfind){ continue };
-        let wanportStartName = key.split("_")[0];
-        // 先分组，后面再变换名字
-        let theItem =  oneSite["wanportNames"].find((item,index)=>{
-          if(item){
-            return Object.keys(item)[0].startsWith(wanportStartName)
-          }   
+
+        this.siteList = this.detailParams.siteSer.map((item)=>{
+            return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
         })
-        theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]})
-      }
-      let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames);
-      oneSite["wanportNames"].forEach((item)=>{
-        for(let key in item){
-          let newName = wanportTs.find((name)=>{
-            return key.endsWith(name);
-          })
-          newName?item[newName]=item[key]:null;
-        }
-      })
-
-    })
-    
-    this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
-      return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
-    })
-    this.siteGroupList.forEach((oneSiteGroup)=>{
-      for(let key in oneSiteGroup){
-        for(let key2 in this.namesTranslate.siteGroupNameTranslate){
-          let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_");
-          if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
-            oneSiteGroup[key2] = oneSiteGroup[key];
-            break;
-          }
-        }
-      }
-    })
-    console.log(this.siteList)
-    this.drawImage(this.siteList);
-  }
-
-  // site详情
-  siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]};
-  siteDetail = false;
-  showSiteDetail(item){
-    this.siteDetail = true;
-    this.siteDetailData = item;
-  }
-
-  wanPortModal = false;
-  wanPortDetail = {};
-  showWanportDetail(item){
-    this.wanPortModal = true;
-    this.wanPortDetail = item;
-  }
-  handleCancel(){
-    this.wanPortModal = false;
-  }
-
-  // sitegroup详情
-
-  // site节点图形描绘
-  // site分类，根据site查tp pnf --> allotted-resource
-  localSite = [];//本地site
-  outerSite = [];//外部site
-  
-  getSiteAResource(){
-    return new Promise((res,rej)=>{
-      this.detailParams.siteSer.forEach((site)=>{
-        site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
-      })
-    
-      if(this.localSite[0]["service-instance-name"].startsWith("Dc")){
-        this.localSite.reverse();
-      }
-
-      if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){
-        this.outerSite.reverse();
-      }
-
-      // 本地site获取tp pnf
-      this.localSite.forEach((site)=>{
-        let obj = {
-          customerId: this.detailParams.customer.id,
-          serviceType: this.detailParams.serviceType,
-          serviceId: site["service-instance-id"]
-        }
-        this.myhttp.getAllottedResource(obj)
-          .subscribe((data)=>{
-            // console.log(data);
-            let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
-            // console.log(resource);
-            let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
-            // console.log(tps_pnfs);
-            // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"];
-            site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
-            // // 通过pnfname获取domain（network-resource）;
-            // this.myhttp.getPnfDetail(site.pnfname)
-            //   .subscribe((data2)=>{
-            //     // console.log(data2);
-            //     let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
-            //     site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
-            //     res("sites-domain");
-            //   })
-            res("sites-domain");
-          })
-      })
-    })   
-  }
-  //通过sotn 查vpn-id --> tp pnf --> allotted-resource
-  relation = {sotn:{
-    name:"sotn1",
-    vpns:[
-      {
-        name:"vpn1",
-        domain:"domain1",
-        site:"site1",
-        tps:[
-          {name:"tp1",lineto:"site1"},
-          {name:"tp2",lineto:"domain1"}
-        ]
-      },
-      {
-        name:"vpn2",
-        domain:"domain2",
-        site:"site2",
-        tps:[
-          {name:"tp3",lineto:"site2"},
-          {name:"tp4",lineto:"domain2"}
-        ]
-      }
-    ]
-  }};
-
-  vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}];
-  getSotnAresource(){
-    return new Promise((res,rej)=>{
-      let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"]
-                            .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"]
-                            .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"];
-      this.myhttp.getSotnConnectivity(connectivityId)
-        .subscribe((data)=>{
-          // console.log(data);  //默认一个connectivityId只能查到一个connectivity
-          let vpns = data.connectivity[0]["relationship-list"]["relationship"]
-                      .filter((item)=>{ return item["related-to"]=="vpn-binding"})
-                      .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]});         
-          console.log(vpns);
-          this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}});
-          this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{
-            this.myhttp.getVpnBinding(vpn.name)
-              .subscribe((data2)=>{
-                // console.log(data2); //默认一个vpnid只能查到一个vpnbinding
-                let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"]
-                                .filter((item)=>{ return item["related-to"]=="p-interface"})
-                                .map((item2)=>{return item2["relationship-data"]});
-                let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]});
-                let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]});
-                // console.log(pnfname)
-                // console.log(tpnames)
-                vpn.tps = tpnames;
-                // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项，即同domain
-                // console.log(thissite);
-                // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename});
-                // 通过pnfname获取domain（network-resource）;
-                this.myhttp.getPnfDetail(pnfname[0])
-                  .subscribe((data2)=>{
-                    // console.log(data2);
-                    let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
-                    vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
-                    if(this.localSite[index]){
-                      vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename;
-                      console.log(tpnames)
-                      console.log(vpn.sitetpname)
-                      vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
-                    }else{
-                      vpn.sitetpname = this.localSite[0].tpsitename;
-                      vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
+        this.siteList.forEach((oneSite,idex)=>{
+            oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[];
+            for(let key in oneSite){
+                let hasfind = false;
+                if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue };
+                for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){
+                    if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){
+                        oneSite["baseNames"][key2] = oneSite[key];
+                        hasfind = true;
+                        break;
+                    }
+                }
+                if(hasfind){ continue };
+                for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){
+                    if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){
+                        oneSite["cpeNames"][key3] = oneSite[key];
+                        hasfind = true;
+                        break;
+                    }
+                }
+                if(hasfind){ continue };
+                let wanportStartName = key.split("_")[0];
+
+                let theItem =  oneSite["wanportNames"].find((item,index)=>{
+                    if(item){
+                        return Object.keys(item)[0].startsWith(wanportStartName)
                     }
+                })
+                theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]})
+            }
+            let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames);
+            oneSite["wanportNames"].forEach((item)=>{
+                for(let key in item){
+                    let newName = wanportTs.find((name)=>{
+                        return key.endsWith(name);
+                    })
+                    newName?item[newName]=item[key]:null;
+                }
+            })
+
+        })
 
-                    this.vpns = this.detailParams.sotnvpnSer.vpns;
-                    res("sotn-domain");
-                    // console.log(vpn);
-                  })
-               
-              })
-          })
+        this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
+            return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
         })
-    })
-  }
-  
-  drawImages(){
-
-    this.getSiteAResource().then((data)=>{
-      console.log(data);
-      return this.getSotnAresource()
-    }).then((data)=>{
-      console.log(data);
-      console.log(this.localSite);
-      this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true;
-      this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3;
-      // 当只有一个vpn的时候
-      if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){
-        let line =  {
-            "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2   当本地云只有一朵的时候，tp2与本地site2相连 
-          }
-        this.detailLines.length = this.detailLines.length-6;
-        this.detailLines.push(line);
-        // 当本地site有两个的时候
-        if(this.localSite.length==2){
-          let line = {
-            "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
-          }
-          this.detailLines.push(line);
+        this.siteGroupList.forEach((oneSiteGroup)=>{
+            for(let key in oneSiteGroup){
+                for(let key2 in this.namesTranslate.siteGroupNameTranslate){
+                    let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_");
+                    if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+                        oneSiteGroup[key2] = oneSiteGroup[key];
+                        break;
+                    }
+                }
+            }
+        })
+    }
+
+
+    siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]};
+    siteDetail = false;
+    showSiteDetail(item){
+        this.siteDetail = true;
+        this.siteDetailData = item;
+    }
+
+    wanPortModal = false;
+    wanPortDetail = {};
+    showWanportDetail(item){
+        this.wanPortModal = true;
+        this.wanPortDetail = item;
+    }
+    handleCancel(){
+        this.wanPortModal = false;
+    }
+
+
+
+
+
+    localSite = [];
+    outerSite = [];
+
+    getSiteAResource(){
+        return new Promise((res,rej)=>{
+            this.detailParams.siteSer.forEach((site)=>{
+                site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
+            });
+
+            if(this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")){
+                this.localSite.reverse();
+            }
+
+            if(this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")){
+                this.outerSite.reverse();
+            }
+            console.log(this.localSite);
+            console.log(this.outerSite);
+
+            this.localSite.forEach((site)=>{
+                let obj = {
+                    customerId: this.detailParams.customer.id,
+                    serviceType: this.detailParams.serviceType,
+                    serviceId: site["service-instance-id"]
+                };
+                this.myhttp.getAllottedResource(obj)
+                    .subscribe((data)=>{
+                        let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
+                        let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
+                        site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
+                        res("sites-domain");
+                    })
+            })
+        })
+    }
+
+
+    vpns = [{
+        name:"",
+        domain: "",
+        tp1: "",
+        tp2: "",
+        tps:[],
+        site: [],
+        type: "domain",
+        start:false,
+        end:false
+    }];
+    cloudDomain={
+        cloud: "Partent Network",
+        site: [],
+        type: "cloud"
+    };
+    d3Data={
+        dates:[],
+        linkss:[]
+    };
+    svg=d3.select("#togo");
+    scale=1;
+    width=600;
+    height=600;
+    container;
+    nodes;
+    lineGroup;
+
+    getSotnAresource(){
+        return new Promise((res,rej)=>{
+            let connectivityId = this.detailParams["relationship-list"]["relationship"]
+                .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"]
+                .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"];
+            this.myhttp.getSotnConnectivity(connectivityId)
+                .subscribe((data)=>{
+
+                    let vpns = data.connectivity[0]["relationship-list"]["relationship"]
+                        .filter((item)=>{ return item["related-to"]=="vpn-binding"})
+                        .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]});
+                    console.log(vpns);
+                    this.detailParams.vpns = vpns.map((item)=>{return {
+                        name:item,
+                        domain: "",
+                        tp1: "",
+                        tp2: "",
+                        tps:[],
+                        site: [],
+                        type: "domain",
+                        start:false,
+                        end:false
+                    }});
+                    this.detailParams.vpns.forEach((vpn,index)=>{
+                        this.myhttp.getVpnBinding(vpn.name)
+                            .subscribe((data2)=>{
+
+                                let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"]
+                                    .filter((item)=>{ return item["related-to"]=="p-interface"})
+                                    .map((item2)=>{return item2["relationship-data"]});
+                                let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]});
+                                let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]});
+
+                                vpn.tps = tpnames;
+                                this.myhttp.getPnfDetail(pnfname[0])
+                                    .subscribe((data2)=>{
+
+                                        let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
+                                        vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
+                                        console.log(this.localSite)
+                                        for(let i=0;i<this.localSite.length;i++){
+                                            for(let a=0;a<this.detailParams.vpns.length;a++){
+                                                let tps=this.detailParams.vpns[a].tps;
+                                                if(i==0){
+                                                    if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){
+                                                        this.detailParams.vpns[a].site=[];
+                                                        let index=tps.indexOf(this.localSite[i]["tpsitename"]);
+                                                        let tp1=tps.slice(index,1)[0];
+                                                        let tp2=tps.find((name)=>{return name != tp1});
+                                                        this.detailParams.vpns[a].tp1=tp1;
+                                                        this.detailParams.vpns[a].tp2=tp2;
+                                                        this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]);
+                                                        this.detailParams.vpns[a].start=true;
+                                                        let first=this.detailParams.vpns.splice(a,1)[0];
+                                                        console.log(first)
+                                                        this.detailParams.vpns.unshift(first);
+                                                        console.log(this.detailParams.vpns)
+                                                    }else {
+                                                        this.detailParams.vpns[a].tp1=tps[0];
+                                                        this.detailParams.vpns[a].tp2=tps[1];
+                                                    }
+
+                                                } else if(i==1){
+                                                    if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){
+                                                        let thisDomain=this.detailParams.vpns[a].domain;
+                                                        if(thisDomain==this.detailParams.vpns[0].domain){
+                                                            console.log(this.detailParams.vpns[0]);
+                                                            console.log(this.localSite[i]["service-instance-name"]);
+                                                            this.detailParams.vpns[0].site.push(this.localSite[i]["service-instance-name"])
+                                                            console.log(this.detailParams.vpns[0])
+                                                        }else {
+                                                            this.detailParams.vpns[a].site=[];
+                                                            let index=tps.indexOf(this.localSite[i]["tpsitename"]);
+                                                            let tp2=tps.slice(index,1)[0];
+                                                            let tp1=tps.find((name)=>{return name != tp2});
+                                                            this.detailParams.vpns[a].tp1=tp1;
+                                                            this.detailParams.vpns[a].tp2=tp2;
+                                                            console.log("有多个domain,2个site");
+                                                            this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]);
+                                                            this.detailParams.vpns[a].start=false;
+                                                            this.detailParams.vpns[a].end=true;
+                                                            let last=this.detailParams.vpns.splice(a,1)[0];
+                                                            console.log(last);
+                                                            this.detailParams.vpns.push(last);
+                                                        }
+
+                                                    }
+                                                }
+
+                                            }
+                                        }
+                                        for(let b=0;b<this.outerSite.length;b++){
+                                            this.cloudDomain.site.push(this.outerSite[b]["service-instance-name"]);
+                                        }
+                                        this.detailParams.vpns.push(this.cloudDomain);
+                                        console.log(this.detailParams.vpns);
+                                        this.vpns = this.detailParams.vpns;
+                                        console.log(this.vpns);
+                                        res(this.detailParams.vpns);
+                                    })
+
+                            })
+                    })
+                })
+        })
+    }
+
+    drawImages(){
+        this.getSiteAResource().then((data)=>{
+            console.log(data);
+            return this.getSotnAresource();
+        }).then((data)=>{
+            console.log(data);
+            this.detailParams.vpns.forEach((item)=>{
+                if(item.type == "domain" && item.site.length == 0){
+                    this.d3Data.dates.push(
+                        {
+                            name: item.domain,
+                            type: 'domain'
+                        },{
+                            name: item.tp1,
+                            type: 'tp'
+
+                        },{
+                            name: item.tp2,
+                            type: 'tp'
+                        });
+                    this.d3Data.linkss.push({
+                        source: item.domain,
+                        target: item.domain
+                    },{
+                        source: item.domain,
+                        target: item.tp1
+                    },{
+                        source: item.domain,
+                        target: item.tp2
+                    })
+                };
+                if (item.type == "domain" && item.site.length == 1) {
+                    this.d3Data.dates.push({
+                        name: item.domain,
+                        type: 'domain'
+                    }, {
+                        name: item.tp1,
+                        type: 'tp'
+                    }, {
+                        name: item.tp2,
+                        type: 'tp'
+                    });
+                    this.d3Data.linkss.push({
+                        source: item.domain,
+                        target: item.domain
+                    }, {
+                        source: item.domain,
+                        target: item.tp1
+                    }, {
+                        source: item.domain,
+                        target: item.tp2
+                    });
+                    if (item.start == true && item.end == false) {
+                        this.d3Data.dates.push(
+                            {
+                                name: item.site[0],
+                                type: 'site'
+                            });
+                        this.d3Data.linkss.push({
+                            source: item.tp1,
+                            target: item.site[0]
+                        })
+                    }
+                    if (item.start == false && item.end == true) {
+                        this.d3Data.dates.push(
+                            {
+                                name: item.site[0],
+                                type: 'site'
+                            });
+                        this.d3Data.linkss.push({
+                            source: item.tp2,
+                            target: item.site[0]
+                        })
+                    }
+
+                }else if (item.type == "domain" && item.site.length == 2) {
+                    this.d3Data.dates.push({
+                            name: item.domain,
+                            type: 'domain'
+                        }, {
+                            name: item.tp1,
+                            type: 'tp'
+                        }, {
+                            name: item.tp2,
+                            type: 'tp'
+                        },
+                        {
+                            name: item.site[0],
+                            type: 'site'
+                        },
+                        {
+                            name: item.site[1],
+                            type: 'site'
+                        });
+                    this.d3Data.linkss.push({
+                        source: item.domain,
+                        target: item.domain
+                    }, {
+                        source: item.domain,
+                        target: item.tp1
+                    }, {
+                        source: item.domain,
+                        target: item.tp2
+                    }, {
+                        source: item.tp1,
+                        target: item.site[0]
+                    }, {
+                        source: item.tp2,
+                        target: item.site[1]
+                    });
+                }else if (item.type == "cloud" && item.site.length == 1) {
+                    this.d3Data.dates.push({
+                            name: item.cloud,
+                            type: 'cloud'
+                        },
+                        {
+                            name: item.site[0],
+                            type: 'site'
+                        });
+                    this.d3Data.linkss.push({
+                        source: item.cloud,
+                        target: item.cloud
+                    }, {
+                        source: item.cloud,
+                        target: item.site[0]
+                    })
+                }
+                else if (item.type == "cloud" && item.site.length == 2) {
+                    this.d3Data.dates.push({
+                            name: item.cloud,
+                            type: 'cloud',
+                            source: item.cloud,
+                            target: item.cloud
+                        },
+                        {
+                            name: item.site[0],
+                            type: 'site',
+                            source: item.cloud,
+                            target: item.site[0]
+                        },
+                        {
+                            name: item.site[1],
+                            type: 'site',
+                            source: item.cloud,
+                            target: item.site[1]
+                        });
+                    this.d3Data.linkss.push({
+                        source: item.cloud,
+                        target: item.cloud
+                    }, {
+                        source: item.cloud,
+                        target: item.site[0]
+                    }, {
+                        source: item.cloud,
+                        target: item.site[1]
+                    })
+                }
+
+
+            });
+
+            var siteNum = 0;
+
+            for (var b = 0; b < this.d3Data.dates.length; b++) {
+                if (this.d3Data.dates[b].type == "site") {
+                    siteNum++;
+                }
+            }
+
+            if (this.detailParams.vpns.length == 2) {
+                var source = this.detailParams.vpns.find((item) => {return item["type"] == "domain"}).site[1];
+                var target = this.detailParams.vpns.find((item) => {return item["type"] == "cloud"}).site[0];
+                this.d3Data.linkss.push({
+                    source: source,
+                    target: target
+                })
+            } else if (this.detailParams.vpns.length > 2) {
+                if (siteNum == 2) {
+                    for (var c = 0; c < this.detailParams.vpns.length - 1; c++) {
+                        if (c + 1 == this.detailParams.vpns.length - 1) {
+                            var sourcess = this.detailParams.vpns[c].tp2,
+                                targetss = this.detailParams.vpns.find((item)=> {return item["type"] == "cloud";}).cloud;
+                            this.d3Data.linkss.push({
+                                source: sourcess,
+                                target: targetss
+                            });
+                            break;
+                        }
+                        var sources = this.detailParams.vpns[c].tp2,
+                            targets = this.detailParams.vpns[c + 1].tp1;
+                        this.d3Data.linkss.push({
+                            source: sources,
+                            target: targets
+                        })
+                    }
+                } else if (siteNum == 4) {
+                    for (var c = 0; c < this.detailParams.vpns.length - 1; c++) {
+                        if (c + 1 == this.detailParams.vpns.length - 1) {
+                            break;
+                        }
+                        var sources = this.detailParams.vpns[c].tp2,
+                            targets = this.detailParams.vpns[c + 1].tp1;
+                        this.d3Data.linkss.push({
+                            source: sources,
+                            target: targets
+                        })
+                    }
+                }
+            }
+            setTimeout(this.render(),0)
+        });
+    }
+
+
+
+    clickShow = false;
+    hoverShow = false;
+    toggleClick(){
+        this.clickShow = !this.clickShow;
+    }
+    hoverShowcould(){
+        this.hoverShow = true;
+    }
+    hoverHidecould(){
+        this.hoverShow = false;
+    }
+
+
+
+    goback(){
+        this.closeDetail.emit();
+    }
+
+
+    render() {
+        console.log("dadada");
+        console.log(this.d3Data);
+        console.log(this.detailParams.vpns);
+        this.scale = 1;
+
+        this.svg .attr('width', this.width)
+            .attr('height', this.height);
+        this.container = this.svg.append('g')
+            .attr('transform', 'scale(' + this.scale + ')');
+
+        this.initPosition();
+        this.initLink();
+        this.initNode();
+    }
+
+
+    initPosition() {
+        let origin = [this.width / 6, this.height / 7];
+        var data=this.d3Data.dates;
+        let points = this.getVertices(origin, Math.min(this.width, this.height) * 0.3,data.length,this.detailParams.vpns);
+
+        this.d3Data.dates.forEach((item,i)=>{
+            item.x = points[i].x;
+            item.y = points[i].y;
+        })
+    }
+
+
+    getVertices(origin, r, n,data) {
+        if (typeof n !== 'number') return;
+        var ox = origin[0];
+        var oy = origin[1];
+        var i = 0;
+        var points = [];
+        var tempAngle =180,
+            reduce=50,
+            add=100;
+        for(let a=0;a<this.detailParams.vpns.length;a++){
+            if(this.detailParams.vpns[a].type=="domain"){
+                if(this.detailParams.vpns[a].site.length == 0){
+                    tempAngle =180*i;
+                    points.push({
+                        x: ox +tempAngle,
+                        y: oy
+                    },{
+                        x: ox +tempAngle-reduce,
+                        y: oy+add
+                    },{
+                        x: ox +tempAngle+reduce,
+                        y: oy+add
+                    });
+                    i++;
+                }else if((this.detailParams.vpns[a].site.length == 1)){
+                    tempAngle =180*i;
+                    points.push({
+                        x: ox +tempAngle,
+                        y: oy
+                    },{
+                        x: ox +tempAngle-reduce,
+                        y: oy+add
+                    },{
+                        x: ox +tempAngle+reduce,
+                        y: oy+add
+                    },{
+                        x: ox +tempAngle-1.5*reduce,
+                        y: oy+2*add
+                    });
+                    i++;
+                } else if((this.detailParams.vpns[a].site.length == 2)){
+                    tempAngle =350*i;
+                    reduce=70;
+                    points.push({
+                            x: ox +tempAngle,
+                            y: oy
+                        },{
+                            x: ox +tempAngle-reduce,
+                            y: oy+add
+                        },{
+                            x: ox +tempAngle+reduce,
+                            y: oy+add
+                        },{
+                            x: ox +tempAngle-1.5*reduce,
+                            y: oy+2*add
+                        }
+                        ,{
+                            x: ox +tempAngle+reduce,
+                            y: oy+2*add
+                        });
+                    i++;
+                }
+
+            }else if((this.detailParams.vpns[a].type=="cloud")){
+                if((this.detailParams.vpns[a].site.length ==1)){
+                    tempAngle =180*i;
+                    points.push({
+                        x: ox +tempAngle,
+                        y: oy
+                    },{
+                        x: ox +tempAngle+1.5*reduce,
+                        y: oy+2*add
+                    });
+                    i++;
+                } else if((this.detailParams.vpns[a].site.length == 2)){
+                    if((this.detailParams.vpns.length>2)){
+                        tempAngle =180*i;
+                    }else{
+                        tempAngle =400*i;
+                    }
+                    points.push({
+                            x: ox +tempAngle,
+                            y: oy
+                        },{
+                            x: ox +tempAngle-1.5*reduce,
+                            y: oy+2*add
+                        }
+                        ,{
+                            x: ox +tempAngle+1.5*reduce,
+                            y: oy+2*add
+                        });
+                    i++;
+                }
+
+            }
+        }
+
+        return points;
+    }
+
+
+    initLink() {
+        this.drawLinkLine();
+    }
+
+
+    initNode() {
+        var self = this;
+
+        this.nodes = this.container.selectAll(".node")
+            .data(this.d3Data.dates)
+            .enter()
+            .append("g")
+            .attr("transform", function (d) {
+                return "translate(" + d.x + "," + d.y + ")";
+            })
+            .attr('class', 'node')
+            .style("cursor","pointer")
+            .call(d3.behavior.drag()
+                .on("drag", function (d) {
+                    self.onDrag(this, d)
+                })
+            );
+
+
+        this.drawNodeSymbol();
+
+        this.drawNodeTitle();
+    }
+
+
+
+    drawNodeSymbol() {
+        var  imgmap = {
+            'domain': '../../assets/images/domain.png',
+            'tp': '../../assets/images/tp.png',
+            'site': '../../assets/images/site.png',
+            'cloud': '../../assets/images/out-domain.png'
+        };
+
+
+        this.nodes.append('image')
+            .attr('width', function (d) {
+                let width = "15%";
+                switch (d.type) {
+                    case 'domain':
+                        width ="15%";
+                        break;
+                    case 'tp':
+                        width ="4%";
+                        break;
+                    case 'site':
+                        width ="10%";
+                        break;
+                    case 'cloud':
+                        width ="15%";
+                        break;
+                    default:
+                        break;
+                }
+                return width;
+            })
+            .attr('height', function (d) {
+                let height = "15%";
+                switch (d.type) {
+                    case 'domain':
+                        height ="15%";
+                        break;
+                    case 'tp':
+                        height ="4%";
+                        break;
+                    case 'site':
+                        height ="10%";
+                        break;
+                    case 'cloud':
+                        height ="15%";
+                        break;
+                    default:
+                        break;
+                }
+                return height;
+            })
+            .attr('xlink:href', function (d) {
+                return imgmap[d.type];
+            })
+            .attr('x',function () {
+                return -this.getBBox().width/2
+            })
+            .attr('y',function () {
+                return -this.getBBox().height/2
+            });
+    }
+
+
+
+    drawNodeTitle() {
+
+        this.nodes.append("text")
+            .attr('class','node-title')
+            .text(function (d) {
+                return d.name;
+            })
+            .attr("dx",function (d) {
+                var x=0;
+                if(d.type=="tp"){
+                    x=20;
+                }else {
+                    x=0;
+                }
+                return x;
+            })
+            .attr("dy",function (d) {
+                var y=0;
+                if(d.type=="tp"){
+                    y=25;
+                }else {
+                    y=0;
+                }
+                return y;
+            });
+    }
+
+
+    drawLinkLine() {
+        let data = this.d3Data.dates;
+        if (this.lineGroup) {
+            this.lineGroup.selectAll('.link')
+                .attr('d', link => genLinkPath(link))
+        } else {
+            this.lineGroup = this.container.append('g');
+            this.lineGroup.selectAll('.link')
+                .data(this.d3Data.linkss)
+                .enter()
+                .append('path')
+                .attr('class', 'link')
+                .attr('d',function (link) {
+                    return genLinkPath(link)
+                })
+
         }
-        // 当外部site有两个的时候
-        if(this.outerSite.length==2){
-          let line = {
-            "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
-          }
-          this.detailLines.push(line);
+        function genLinkPath(d) {
+            let sx = data.find(function(item){
+                return item["name"]==d.source;
+            }).x;
+            let sy = data.find(function(item){
+                return item["name"]==d.source;
+            }).y;
+            let tx =data.find(function(item){
+                return item["name"]==d.target;
+            }).x;
+            let ty =data.find(function(item){
+                return item["name"]==d.target;
+            }).y;
+            return 'M' + sx + ',' + sy + ' L' + tx + ',' + ty;
         }
-      }
-    })
-    // let allnodes = [this.getSiteAResource(),this.getSotnAresource()];
-    // Promise.all(allnodes).then((data)=>{
-    //   console.log(data)
-    //   console.log(this.localSite);
-
-
-    // })
-  }
-
-  detailSites=false;
-  detailLines=[ //详情拓扑图连线的坐标
-    {
-      "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1
-    },
-    {
-      "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1
     }
-    ,
-    {
-      "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2
-    },
-
-    {
-      "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4
-    },
-
-    {
-      "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2
-    },
-    {
-      "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3
-    },
-    {
-      "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3
-    },
-
-    {
-      "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4
-    },
-    {
-      "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
-    },
-    {
-      "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
+
+
+
+    update(d) {
+        this.drawLinkLine();
     }
-  ];
-  lines=[];
-  siteImage=[];
-  drawImage(sitelist){
-    let cx = 200;
-    let cy = 200;
-    let r = 150;
-    let startAngle = -210 * (Math.PI/180);
-    let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;
-
-    this.lines = sitelist.map((item,index)=>{
-      let x = cx + Math.cos(startAngle - step*index)*r;
-      let y = cy + Math.sin(startAngle - step*index)*r;
-      return {img:"line",x1:cx,y1:cy,x2:x,y2:y}
-    })
-    this.siteImage = this.lines.map((item)=>{
-      return {img:"site",x:item.x2 - 25,y:item.y2 - 25}
-    })
-    console.log(this.siteImage,this.lines)
-  }
-  clickShow = false;
-  hoverShow = false;
-  toggleClick(){
-    this.clickShow = !this.clickShow;
-  }
-  hoverShowcould(){
-    this.hoverShow = true;
-  }
-  hoverHidecould(){
-    this.hoverShow = false;
-  }
-
-
-
-  goback(){
-    this.closeDetail.emit();
-  }
+
+
+    onDrag(ele, d) {
+        d.x = d3.event.x;
+        d.y = d3.event.y;
+        d3.select(ele)
+            .attr('transform', "translate(" + d3.event.x + "," + d3.event.y + ")");
+        this.update(d);
+    }
+
 
 }