Fix instance detail for CCVPN

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

1 files changed, 152 insertions, 295 deletions

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>