summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-02-13 09:41:51 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-02-13 09:59:00 +0800
commiteedea1498658f6c6a07cbad256bca1ab8218ea06 (patch)
tree1fb4bb9f5100ecb166d28092a1c9fce21a714e23 /usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
parentfe1c58a91464f603905d4e7a327208ed374d9829 (diff)
Fix instance instantiation for CCVPN
Change-Id: I0f9eefab631fabfaf8ea73f35a65a505e91b5bdf Issue-ID: USECASEUI-220 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html')
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html646
1 files changed, 353 insertions, 293 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
index 15486238..1b54b7bc 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html
@@ -13,301 +13,361 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<h3 class="title"> Services List </h3>
-<hr>
-<div class="model">
- <!-- 创建数据 -->
- <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
- <div class="creation fl">
- <h3 class="title">{{createParams.commonParams.templateType}} Instance Creation</h3>
- <div class="sotnvpn clearfix">
- <h3>SOTN VPN Info</h3>
- <ul>
- <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
- <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
- <li><span>Start Time:</span>
- <nz-date-picker [(ngModel)]="sotnInfo.startTime"
- (ngModelChange)="startTimeChange($event)"
- nzPlaceHolder="start time"
- nzShowTime>
- </nz-date-picker>
- </li>
- <li><span>End Time:</span>
- <nz-date-picker [(ngModel)]="sotnInfo.endTime"
- (ngModelChange)="endTimeChange($event)"
- nzPlaceHolder="end time"
- nzShowTime>
- </nz-date-picker>
- </li>
- <li><span>COS:</span>
- <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="premium" nzLabel="premium"></nz-option>
- <nz-option nzValue="standard" nzLabel="standard"></nz-option>
- </nz-select>
- </li>
- <li><span>Reroute Enabled:</span> <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch> </li>
- <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
- <li><span>Dual Link:</span>
- <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.dualLink" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
- <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
- <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
- </nz-select>
- </li>
- <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
- <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
- <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
- <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
- <li><span>Color Aware:</span> <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch> </li>
- <li><span>Coupling Flag:</span> <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch> </li>
- </ul>
- </div>
-
- <div class="site">
- <h3>Site List</h3>
- <button nz-button (click)="addSite()">Add Site</button>
- <nz-table #siteTable [nzData]="siteTableData"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
- <tr>
- <th nzWidth="10%"> NO. </th>
- <th nzWidth="15%"> Name </th>
- <th nzWidth="15%"> Description </th>
- <th nzWidth="15%"> Post Code </th>
- <th nzWidth="15%"> Address </th>
- <th nzWidth="15%"> VLAN </th>
- <th nzWidth="15%"> Action </th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
- <tr *ngFor="let item of siteTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.baseData.name}}</td>
- <td>{{item.baseData.description}}</td>
- <td>{{item.baseData.postcode}}</td>
- <td>{{item.baseData.address}}</td>
- <td>{{item.baseData.vlan}}</td>
- <td>
- <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
- <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
- </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- </div>
-
- <div class="sitegroup" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
- <h3>Site_Group List</h3>
- <button nz-button (click)="addSiteGroup()">Add Group</button>
- <div class="sitegroupmodal" *ngIf="siteGroupModelShow">
- <h3>Site_Group</h3>
- <div class="inputs">
- <span>Group Name:</span> <input nz-input [(ngModel)]="siteGroupModelData.name"> <br>
- <span>Topology:</span>
- <nz-select style="width: 165px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
- <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
- </nz-select>
- <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading" [nzShowPagination]="false" nzSize="small">
- <thead>
- <tr>
- <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="groupModal_checkAll($event)"></th>
- <th> Site Name</th>
- <th> Role</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of groupModalTable.data; let i = index;">
- <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus($event)"></td>
- <td>{{ item.siteName }}</td>
- <td>
- <nz-select style="width: 80px;" [(ngModel)]="item.role"
- nzAllowClear nzPlaceHolder="Choose"
- [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
- <nz-option nzValue="hub" nzLabel="hub"></nz-option>
- <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
- </nz-select>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </div>
- <div class="action">
- <button nz-button nzType="primary" (click)="addsitegroup_OK()">OK</button>
- <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
- </div>
- </div>
- <nz-table #siteGroupTable [nzData]="siteGroupTableData"
- [nzLoading]="loading"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
- <tr>
- <th nzWidth="10%"> NO. </th>
- <th nzWidth="20%"> Group Name </th>
- <th nzWidth="20%"> Topology </th>
- <th nzWidth="20%"> Sites </th>
- <th nzWidth="15%"> Role </th>
- <th nzWidth="15%"> Action </th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
- <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.name}}</td>
- <td>{{item.topology}}</td>
- <td>{{item.sites}}</td>
- <td>{{item.role}}</td>
- <td>
- <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
- <span class="action" (click)="deleteGroupSite(i+1)"><i class="anticon anticon-delete"></i></span>
- </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- </div>
+<!--<h3 class="title"> Services List </h3>-->
+<!--<hr>-->
+<div class="model creation-model">
+ <!-- 创建数据 -->
+ <div class="top-title">
+ <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3>
+ <div class="fl" style="width: 20%">
+ <button class="submit" nz-button (click)="submit()"><span>Create</span></button>
+ <button class="back" nz-button (click)="goback()">
+ <span>
+ <i nz-icon type="rollback" theme="outline" >
+ <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="rollback" aria-hidden="true" style="transform: scaleX(1.7) scaleY(-1.1) translate(-2px)"><path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 0 0 0 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path></svg>
+ </i>
+ </span>
+ </button>
+ </div>
+ </div>
+ <!-- 图 -->
+ <div class="chart">
+ Create Service
+ {{createParams.commonParams.templateType}}
+ <div id="createChart">
+ <svg width="100%" height="100%">
+ <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%"
+ style="stroke:#3fa8eb;stroke-width:2"/>
+ <image xlink:href="./assets/images/cloud-site.png"
+ x="25%" y="30%" width="50%"/>
+ <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
+ <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
+ <g *ngFor="let item of siteImage"
+ (mouseover)="showSite($event,item)"
+ (mousemove)="moveSite($event,item)"
+ (mouseout)="hideSite($event)">
+ <image
+ xlink:href="./assets/images/site.png"
+ [attr.x]="item.x" y="65%" width="80px"/>
+ <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}
+ </text>
+ </g>
- <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
- </div>
- <!-- site模态框 -->
- <div class="sitemodel" *ngIf="siteModelShow">
- <h3>Site_Enterprise Service</h3>
- <div class="inputs">
- <ul>
- <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
- <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
- <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span>
- <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.type" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
- <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
- </nz-select>
- </li>
- <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span>
- <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.role" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
- <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
- </nz-select>
- </li>
- <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
- <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
- <li><span>Address:</span>
- <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.address" nzAllowClear nzPlaceHolder="Choose">
- <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}" nzLabel="{{item}}"></nz-option>
- </nz-select>
- </li>
- </ul>
+ </svg>
+ <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
+ </div>
</div>
- <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
- <h4>CPE</h4>
- <div class="inputs">
- <ul>
- <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
- <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
- <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
- <li><span>Class:</span>
- <nz-select style="width: 165px;" [(ngModel)]="siteCpeData.device_class" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
- <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
- </nz-select>
- </li>
- <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
- <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
- <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
- </ul>
- </div>
- <h4>WAN Port</h4>
- <div>
- <nz-table #siteModalTable [nzData]="siteWanData"
- [nzLoading]="loading"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
- <tr>
- <th nzWidth="10%"> NO. </th>
- <th nzWidth="15%"> Name </th>
- <th nzWidth="15%"> Description </th>
- <th nzWidth="15%"> PortType </th>
- <th nzWidth="18%"> PortNumber </th>
- <th nzWidth="17%"> IPAddress </th>
- <th nzWidth="10%"> Action </th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
- <tr *ngFor="let item of siteModalTable.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>
- <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
- </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- </div>
- <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit" (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
- <ul class="wanPortModalList">
- <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
- <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
- <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description"></li>
- <li><span>Port Type:</span>
- <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear nzPlaceHolder="Choose">
- <nz-option nzValue="GE" nzLabel="GE"></nz-option>
- <nz-option nzValue="FE" nzLabel="FE"></nz-option>
- <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
- <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
- <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
- <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
- </nz-select>
- </li>
- <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber"></li>
- <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
- <li><span>Provider IP Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress"></li>
- <li><span>Transport Nerwork:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName"></li>
- <li><span>Input Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth"></li>
- <li><span>Output Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth"></li>
- </ul>
- </nz-modal>
+ <div class="creation">
+ <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
+ <nz-tab nzTitle="SOTN VPN Info">
+ <div class="sotnvpn clearfix">
+ <!--<h3>SOTN VPN Info</h3>-->
+ <ul>
+ <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
+ <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
+ <li><span>Start Time:</span>
+ <nz-date-picker [(ngModel)]="sotnInfo.startTime"
+ (ngModelChange)="startTimeChange($event)"
+ nzPlaceHolder="start time"
+ nzShowTime>
+ </nz-date-picker>
+ </li>
+ <li><span>End Time:</span>
+ <nz-date-picker [(ngModel)]="sotnInfo.endTime"
+ (ngModelChange)="endTimeChange($event)"
+ nzPlaceHolder="end time"
+ nzShowTime>
+ </nz-date-picker>
+ </li>
+ <li><span>COS:</span>
+ <nz-select style="width: 234px;height: 40px" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
+ <nz-option nzValue="premium" nzLabel="premium"></nz-option>
+ <nz-option nzValue="standard" nzLabel="standard"></nz-option>
+ </nz-select>
+ </li>
+ <li><span style="width: 130px">Reroute Enabled:</span>
+ <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch>
+ </li>
+ <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
+ <li><span>Dual Link:</span>
+ <nz-select style="width: 234px;height: 40px" [(ngModel)]="sotnInfo.dualLink" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
+ <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
+ <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
+ <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
+ <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
+ <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
+ <li><span>Color Aware:</span>
+ <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch>
+ </li>
+ <li><span style="width: 130px">Coupling Flag:</span>
+ <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch>
+ </li>
+ </ul>
+ </div>
+ </nz-tab>
+ <nz-tab nzTitle="Site List">
+ <div class="site">
+ <!--<h3>Site List</h3>-->
+ <button nz-button (click)="addSite()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
+ <nz-table #siteTable [nzData]="siteTableData"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO.</th>
+ <th nzWidth="15%"> Name</th>
+ <th nzWidth="15%"> Description</th>
+ <th nzWidth="15%"> Post Code</th>
+ <th nzWidth="15%"> Address</th>
+ <th nzWidth="15%"> VLAN</th>
+ <th nzWidth="15%"> Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.baseData.name}}</td>
+ <td>{{item.baseData.description}}</td>
+ <td>{{item.baseData.postcode}}</td>
+ <td>{{item.baseData.address}}</td>
+ <td>{{item.baseData.vlan}}</td>
+ <td>
+ <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> &nbsp;
+ <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ </nz-tab>
+ <nz-tab nzTitle="Site_Group List" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+ <div class="sitegroup" >
+ <!--<h3>Site_Group List</h3>-->
+ <button nz-button (click)="addSiteGroup()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
+ <nz-table #siteGroupTable [nzData]="siteGroupTableData"
+ [nzLoading]="loading"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO.</th>
+ <th nzWidth="20%"> Group Name</th>
+ <th nzWidth="20%"> Topology</th>
+ <th nzWidth="20%"> Sites</th>
+ <th nzWidth="15%"> Role</th>
+ <th nzWidth="15%"> Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.topology}}</td>
+ <td>{{item.sites}}</td>
+ <td>{{item.role}}</td>
+ <td>
+ <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span>
+ &nbsp;
+ <span class="action" (click)="deleteGroupSite(i+1)"><i
+ class="anticon anticon-delete"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ </nz-tab>
+ </nz-tabset>
</div>
+ <!-- site模态框 -->
+ <div class="sitemodel" *ngIf="siteModelShow">
+ <h3>Site_Enterprise Service</h3>
+ <div class="inputs">
+ <ul>
+ <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
+ <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
+ <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span>
+ <nz-select [(ngModel)]="siteBaseData.type" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
+ <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
+ </nz-select>
+ </li>
+ <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span>
+ <nz-select [(ngModel)]="siteBaseData.role" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
+ <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
+ <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
+ <li><span>Address:</span>
+ <nz-select [(ngModel)]="siteBaseData.address" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}"
+ nzLabel="{{item}}"></nz-option>
+ </nz-select>
+ <!--<input nz-input [(ngModel)]="siteBaseData.address">-->
+ </li>
+ </ul>
+ </div>
+ <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
+ <h3>CPE</h3>
+ <div class="inputs">
+ <ul>
+ <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
+ <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
+ <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
+ <li><span>Class:</span>
+ <nz-select [(ngModel)]="siteCpeData.device_class" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
+ <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
+ <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
+ <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
+ </ul>
+ </div>
+ <h3>WAN Port
+ <button nz-button ><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
+ </h3>
+ <div>
+ <nz-table #siteModalTable [nzData]="siteWanData"
+ [nzLoading]="loading"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th > NO.</th>
+ <th> Name</th>
+ <th > Description</th>
+ <th > PortType</th>
+ <th > PortNumber</th>
+ <th > IPAddress</th>
+ <!--<th > Provider IP Address</th>-->
+ <!--<th > Transport Nerwork</th>-->
+ <!--<th > Input Bandwidth</th>-->
+ <!--<th > Output Bandwidth</th>-->
+ <th > Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteModalTable.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>
+ <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
+ </div>
+ <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit"
+ (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
+ <ul class="wanPortModalList">
+ <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
+ <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
+ <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description">
+ </li>
+ <li><span>Port Type:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option nzValue="GE" nzLabel="GE"></nz-option>
+ <nz-option nzValue="FE" nzLabel="FE"></nz-option>
+ <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
+ <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
+ <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
+ <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
+ </nz-select>
+ </li>
+ <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber">
+ </li>
+ <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
+ <li><span>Provider IP Address:</span> <input nz-input
+ [(ngModel)]="siteWanParams.sitewanport_providerIpAddress">
+ </li>
+ <li><span>Transport Nerwork:</span> <input nz-input
+ [(ngModel)]="siteWanParams.sitewanport_transportNetworkName">
+ </li>
+ <li><span>Input Bandwidth:</span> <input nz-input
+ [(ngModel)]="siteWanParams.sitewanport_inputBandwidth">
+ </li>
+ <li><span>Output Bandwidth:</span> <input nz-input
+ [(ngModel)]="siteWanParams.sitewanport_outputBandwidth">
+ </li>
+ </ul>
+ </nz-modal>
+ </div>
- <div class="action">
- <button nz-button nzType="primary" (click)="addsite_OK()">OK</button>
- <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
- </div>
- </div>
- <!-- 图 -->
- <div class="chart fr">
- Create Service
- {{createParams.commonParams.templateType}}
- <div id="createChart">
- <svg width="100%" height="100%">
- <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%" style="stroke:#3fa8eb;stroke-width:2"/>
- <image xlink:href="./assets/images/cloud-site.png"
- x="25%" y="30%" width="50%"/>
- <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
- <g *ngFor="let item of siteImage"
- (mouseover)="showSite($event,item)"
- (mousemove)="moveSite($event,item)"
- (mouseout)="hideSite($event)">
- <image
- xlink:href="./assets/images/site.png"
- [attr.x]="item.x" y="65%" width="80px"/>
- <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}</text>
- </g>
-
- </svg>
- <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
- </div>
- </div>
-
+ <div class="action">
+ <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
+ <button nz-button nzType="primary" (click)="addsite_OK()">Add</button>
+ </div>
+ </div>
+ <!--sitegroupmodal-->
+ <div class="sitegroupmodal" *ngIf="siteGroupModelShow" >
+ <h3>Site_Group</h3>
+ <div class="inputs">
+ <div class="list-div">
+ <span class="fl">Group Name:</span>
+ <input nz-input [(ngModel)]="siteGroupModelData.name" style="width: 170px" class="fr">
+ </div>
+ <div class="list-div">
+ <span class="fl">Topology:</span>
+ <nz-select style="width: 170px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear
+ nzPlaceHolder="Choose" class="fr">
+ <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
+ <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
+ </nz-select>
+ </div>
+ <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading"
+ [nzShowPagination]="false" nzSize="small">
+ <thead>
+ <tr>
+ <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
+ (nzCheckedChange)="groupModal_checkAll($event)"></th>
+ <th> Site Name</th>
+ <th> Role</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of groupModalTable.data; let i = index;">
+ <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked"
+ (nzCheckedChange)="refreshStatus($event)"></td>
+ <td>{{ item.siteName }}</td>
+ <td>
+ <nz-select style="width: 80px;" [(ngModel)]="item.role"
+ nzAllowClear nzPlaceHolder="Choose"
+ [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
+ <nz-option nzValue="hub" nzLabel="hub"></nz-option>
+ <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
+ </nz-select>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ <div class="action">
+ <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
+ <button nz-button nzType="primary" (click)="addsitegroup_OK()">Add</button>
+ </div>
+ </div>
+ <div class="mask" *ngIf="siteModelShow || siteGroupModelShow"></div>
</div>