diff options
8 files changed, 832 insertions, 383 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index 35fdbef5..54b92d03 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -25,80 +25,125 @@ hr { margin-bottom: 10px; } .model { - background-color: #fff; - height: 90%; + background-color: #F7F8FC; + /*height: 100%;*/ overflow-y: auto; } +.creation-model{ + position: relative; +} +.top-title{ /*2019.01.22 add*/ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} .model .back { position: absolute; top: 10px; right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + color: #fff; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + /*font: 700 20px/20px "Arial";*/ + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + /*top:10px;*/ + +} +.model .submit{ + position: absolute; + width:84px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.model .submit:hover,.model .back:hover,.model .site>button:hover,.model .sitegroup>button:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + border: none; } .model .creation { - position: relative; - width: 60%; - height: 100%; + width: 100%; + /*height: 60vh;*/ overflow-y: auto; border-radius: 5px; padding: 15px; } -.model .creation h3.title { - height: 20px; - font: 700 20px/20px "Arial"; - color: #666; -} .model .creation h3 { height: 20px; font: 700 16px/20px "Arial"; margin: 5px 0px; color: #000; } -.model .creation .submit { - position: absolute; - top: 10px; - right: 20px; -} /* SOTN VPN */ .model .creation .sotnvpn ul li { display: inline-block; - height: 35px; - width: 49.5%; + height: 40px; + width: 24.5%; + margin-bottom: 40px; } .model .creation .sotnvpn ul li span { display: inline-block; width: 110px; font: 700 14px "Arial"; - color: #3fa8eb; + color: #3C4F8C; vertical-align: middle; } .model .creation .sotnvpn ul li input { - width: 165px; + width: 234px; + height: 40px; + border-radius:4px; + outline: none; } /* Site List */ /* addsite model */ .model .sitemodel { position: absolute; - z-index: 10; - left: 10px; + z-index: 1001; + left: 100px; top: 60px; background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 60%; + /*box-shadow: 0px 0px 20px #000;*/ + width:650px; + /*width:1300px;px*/ max-height: 90%; - border-radius: 5px; + border-radius:2px; overflow-y: auto; } -.model .sitemodel h3 { - height: 30px; - font: 700 16px/30px "Arial"; - border-bottom: 1px solid #aaa; - padding-left: 10px; -} -.model .sitemodel h4 { - height: 30px; - font: 700 16px/30px "Arial"; - padding-left: 10px; - background-color: #ddd; +.model .sitemodel h3,.sitegroupmodal>h3{ + width: 92%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + /*padding-left: 10px;*/ + color: #06A7E2; + /*color: #ffffff;*/ + /*background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);*/ + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; } .model .sitemodel .inputs { padding: 10px 20px 0; @@ -106,21 +151,46 @@ hr { .model .sitemodel .inputs ul li { display: inline-block; height: 35px; + line-height: 35px; width: 49.5%; } .model .sitemodel .inputs ul li span { display: inline-block; - width: 110px; - font: 700 14px "Arial"; - color: #3fa8eb; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; vertical-align: middle; + float: left; } -.model .sitemodel .inputs input { - width: 165px; +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { + width: 156px; + float: right; + margin-right: 30px; } .model .sitemodel .action { - float: left; - padding: 10px; + text-align: center; + margin-top: 30px; + margin-bottom: 20px; +} + +.model .sitemodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.sitemodel h3 button{ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.sitemodel h3 button:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; } .model nz-table tbody td i.anticon:hover { @@ -129,6 +199,24 @@ hr { } /* site table */ +.model .site>button,.model .sitegroup>button,.sitemodel h3>button{ + width:36px; + height:36px; + color: #fff; + background:linear-gradient(270deg,rgba(63,156,255,1) 0%,rgba(98,193,246,1) 100%); + border-radius:4px; + border: none!important; +} +.sitemodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} +.model nz-table tbody th{ + color:rgba(60,79,140,0.5); + font-size: 16px; +} .model .site nz-table tbody td i.anticon:hover { color: #3fa8eb; cursor: pointer; @@ -136,49 +224,75 @@ hr { /* WAN Port */ /* Site Group List */ -.model .sitegroup .sitegroupmodal { + +.model .sitegroupmodal { position: absolute; - z-index: 10; - left: 200px; - top: 300px; - background-color: #fff; - box-shadow: 0px 0px 20px #000; - width: 330px; - border-radius: 5px; + z-index: 1001; + width: 360px!important; + height: 376px!important; + left:35%; + top:40%; + margin-top: -188px; + margin-left: -180px; + background: #ffffff; } -.model .sitegroup .sitegroupmodal h3 { - height: 30px; - font: 700 16px/30px "Arial"; - border-bottom: 1px solid #aaa; - padding-left: 10px; +.sitegroupmodal .list-div{ + width: 100%; + height: 32px !important; + line-height: 32px; + margin-bottom: 10px; } -.model .sitegroup .sitegroupmodal .inputs { - padding: 10px 20px 0; +.sitegroupmodal .list-div > span { + line-height: 32px !important; + color: #3C4F8C; + margin-left: 30px; } -.model .sitegroup .sitegroupmodal span { - display: inline-block; - width: 100px; - margin-bottom: 10px; +.sitegroupmodal .list-div input, .sitegroupmodal .list-div nz-select { + margin-right: 50px; } -.model .sitegroup .sitegroupmodal .inputs input { - width: 165px; +.sitegroupmodal .action{ + text-align: center; + margin-top: 30px; } -.model .sitegroup .sitegroupmodal .action { - float: right; - padding: 10px; +.sitegroupmodal .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 8px; +} +.sitegroupmodal .action button:nth-child(2){ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + color: #fff; +} +.sitegroupmodal .action button:nth-child(2):hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; +} +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; } -/* 图 */ +/* chart */ .model .chart { - width: 40%; + width: 100%; padding: 10px; - height: 100%; + /*height: 30vh;*/ border-left: 10px solid #f3f3f3; + margin-bottom: 30px; + box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); } .model .chart #createChart { width: 100%; - height: 80%; + /*height: 50vh;*/ margin-top: 20px; position: relative; } @@ -193,3 +307,7 @@ hr { overflow: hidden; text-overflow: ellipsis; } +.model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{ + background: #fff; + padding: 30px; +} 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> - <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> - <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> + <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> + + <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> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index 4dd3f5c2..ace7ac42 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -19,11 +19,22 @@ export class CcvpnCreationComponent implements OnInit { @Input() namesTranslate; //输入项参数名字转换 @Output() closeCreate = new EventEmitter(); + //tabBarStyle + tabBarStyle = { + "height": "58px", + "width": "528px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; templateParameters = {}; getTemParameters(){ //获取模板参数 let chosedtemplates = Object.values(this.createParams.templates); // console.log(this.createParams); console.log(chosedtemplates); //模板id数组 + if(this.createParams.commonParams.templateType == 'SOTN'){ + this.tabBarStyle["width"]="351px"; + } let types = ["sotnvpn","site","sdwanvpn"]; chosedtemplates.forEach((item,index)=>{ this.myhttp.getTemplateParameters(types[index],item) diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index 28162251..ff977190 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -38,7 +38,8 @@ </nz-dropdown> <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i - class="anticon anticon-plus-circle-o"></i><span> Create </span></button> + class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span> + </button> <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="CREATE" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> <div class="select-list"> @@ -96,7 +97,7 @@ </div> </li> </ul> - <div class="list"> + <div class="list" [ngClass]="{'listdisplay':listDisplay == true}"> <nz-table *ngIf="1" #nzTable [nzData]="tableData" nzShowSizeChanger @@ -136,7 +137,8 @@ <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding', 'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001', 'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}">{{data.tips}}</span> - <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress> + <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false" + nzStatus="active"></nz-progress> </td> <td> <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" @@ -161,7 +163,7 @@ <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress> </td> <td> - <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" + <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" class="anticon anticon-reload" (click)="healService(item)"></i> </td> </tr> @@ -169,7 +171,8 @@ </tbody> </nz-table> - <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()"> + <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" + (nzOnOk)="scaleOk()"> <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance? </h3> Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || @@ -194,7 +197,7 @@ </nz-select> </div> </nz-modal> - <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" + <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()"> <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance? </h3> @@ -211,7 +214,8 @@ [(ngModel)]="gracefulTerminationTimeout"> </div> </nz-modal> - <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()"> + <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" + (nzOnOk)="healOk()"> <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance? </h3> Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 3ef3fde2..0e59ca2e 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -24,6 +24,9 @@ hr { background-color: #dce1e7; margin-bottom: 20px; } +.ant-tabs-bar{ + margin-bottom: 0!important; +} .action { margin-bottom: 15px; padding: 28px; @@ -85,16 +88,20 @@ hr { .create.ant-btn.ant-btn-primary{ border: none; } + .create:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + } } .top-num{ overflow: auto; + width: 100%; } .top-list{ position: relative; - width:360px; + width:22%; height:160px; - margin: 15px 15px 30px 15px; + margin: 15px 1.5%; float: left; background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%); box-shadow:0px 10px 15px 2px rgba(222,222,222,1); @@ -102,17 +109,17 @@ hr { } .top-list .round{ position: absolute; - width:80px; - height:80px; - line-height: 80px; + width: 60px; + height: 60px; + line-height: 60px; text-align: center; top:50%; left: 10px; - margin-top: -40px; + margin-top: -30px; background:#E0EDFF; border:2px solid rgba(224,237,255,1); border-radius: 50%; - font-size:18px; + font-size:16px; font-family:ArialMT; color:#3C4F8C; } @@ -123,8 +130,11 @@ hr { line-height: 20px; top:50%; margin-top: -20px; - right: 20px; + right: 15px; color: #fff; + span:nth-child(1){ + font-size: 22px; + } } .list { background-color: #fff; @@ -207,9 +217,9 @@ hr { top: 0; width: 100%; height: 100vh; - background-color: #f3f3f3; + background-color: #F7F8FC; overflow-y: auto; - padding: 20px 32px; + //padding: 20px 32px; z-index: 3; } /*2019.01.14*/ @@ -236,3 +246,6 @@ hr { line-height: 32px; } +.listdisplay{ + display: none; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 7149ae2f..2dfbc942 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -140,6 +140,7 @@ export class ServicesListComponent implements OnInit { // createshow = false; createshow2 = false; + listDisplay = false; createData:Object={}; handleOk(): void { // console.log('Button ok clicked!'); @@ -153,6 +154,7 @@ export class ServicesListComponent implements OnInit { }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4}; this.createshow2 = true; + this.listDisplay = true; } } @@ -461,9 +463,11 @@ export class ServicesListComponent implements OnInit { closeCreate(obj){ if(!obj){ this.createshow = false; //close + this.listDisplay = false; return false; } this.createshow = false; + this.listDisplay = false; console.log(obj); let newData; //Newly created service data for the main table let stageNum = 0; //Different stages of progress, used to add up subsequent service progress; @@ -584,9 +588,11 @@ export class ServicesListComponent implements OnInit { e2eCloseCreate(obj){ if(!obj){ this.createshow2 = false; // + this.listDisplay = false; return false; } this.createshow2 = false; // + this.listDisplay = false; console.log(obj); let newData; // let createParams = "?customerId="+this.customerSelected.id + @@ -638,9 +644,11 @@ export class ServicesListComponent implements OnInit { nsCloseCreate(obj){ if(!obj){ this.createshow2 = false; // + this.listDisplay = false; return false; } this.createshow2 = false; // + this.listDisplay = false; console.log(obj); let newData; // // step1 diff --git a/usecaseui-portal/src/assets/images/noDatalist.png b/usecaseui-portal/src/assets/images/noDatalist.png Binary files differnew file mode 100644 index 00000000..a7f612ef --- /dev/null +++ b/usecaseui-portal/src/assets/images/noDatalist.png diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 93e5251c..9574b8e0 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -46,6 +46,9 @@ nz-table { width: 40px; height: 40px; line-height: 40px; + background: rgba(255, 255, 255, 1); + border-radius: 2px; + margin: 0 5px; .ant-pagination-item-link, .ant-pagination-item-link:after { width: 40px; height: 40px; @@ -54,6 +57,7 @@ nz-table { } .ant-pagination-item.ant-pagination-item-active { background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); + border: none; border-radius: 2px; a { color: #fff; @@ -128,6 +132,9 @@ nz-pagination { width: 40px; height: 40px; line-height: 40px; + background: rgba(255, 255, 255, 1); + border-radius: 2px; + margin: 0 5px; .ant-pagination-item-link, .ant-pagination-item-link:after { width: 40px; height: 40px; @@ -137,6 +144,7 @@ nz-pagination { .ant-pagination-item.ant-pagination-item-active { background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); border-radius: 2px; + border: none; a { color: #fff; } @@ -248,6 +256,7 @@ nz-layout { //2019.01.21 add services-list.component.html +//creat框 nz-modal { .ant-modal { height: 628px; @@ -255,7 +264,22 @@ nz-modal { } .ant-modal-content{ height: 628px; - background:transparent; + background: transparent; + .ant-modal-close-x { + width: 25px; + height: 25px; + line-height: 25px; + margin-top: 12px; + margin-right: 12px; + } + .ant-modal-close-x::before { + color: #fff; + width: 25px; + height: 25px; + line-height: 25px; + border-radius: 50%; + border: 1px solid #fff; + } } .ant-modal-header,ant-modal-title,.ant-modal-footer{ background:transparent; @@ -299,7 +323,7 @@ nz-modal { button:nth-child(1){ background:#EEEEEE; border-radius:2px; - margin-left: 50px; + //margin-left: 50px; margin-right: 10px; span{ color: #9DA7C5; @@ -317,5 +341,216 @@ nz-modal { font-size: 14px !important; } } + button:nth-child(2):hover { + background: linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + } + } +} + +//2019.01.25 add ccvpn-creation.component.html +.model .creation nz-tabset { + box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); + .ant-tabs-bar { + .ant-tabs-nav-container { + height: 59px !important; + .ant-tabs-nav { + padding: 0 !important; + } + .ant-tabs-ink-bar { + display: none !important; + } + ; + .ant-tabs-tab { + width: 175px; + height: 59px !important; + line-height: 38px; + text-align: center; + border-radius: 4px 4px 0px 0px; + border: 1px solid rgba(238, 238, 238, 0.8); + border-bottom: 0; + color: #06A7E2; + font-size: 18px; + } + ; + .ant-tabs-nav .ant-tabs-tab-active { + color: #fff; + background: linear-gradient(90deg, rgba(99, 194, 246, 1) 0%, rgba(62, 155, 255, 1) 100%); + } + } + } + .ant-tabs-content { + background: #fff; + padding: 0; + .ant-tabs-tabpane { + height: 486px; + background: #fff; + border-radius: 0px 0px 4px 4px; + border: 1px solid rgba(63, 156, 255, 0.8); + } + } +} + +.model .creation .sotnvpn ul li nz-date-picker { + nz-picker { + .ant-calendar-picker { + .ant-calendar-picker-input.ant-input { + //width: 180px!important; + height: 40px !important; + } + } + } +} + +.model .creation .sotnvpn ul li nz-select { + .ant-select-selection.ant-select-selection--single { + height: 40px; + .ant-select-selection__rendered { + line-height: 35px; + } + } +} + +.model .creation .site nz-table, .model .creation .sitegroup nz-table { + .ant-table-wrapper { + margin: 20px 0; + .ant-table-small { + border: none; + .ant-table-tbody tr td { + padding: 10px 8px; + border-bottom: 5px solid #F7F8FC; + color: #3C4F8C; + } + .ant-table-tbody tr:hover > td { + background: #F7F7FA !important; + } + } + } + .ant-table-empty{ + .ant-spin-container{ + .ant-table-small{ + .ant-table-content{ + .ant-table-thead tr th{ + padding-bottom: 20px; + } + .ant-table-placeholder{ + background:url("./assets/images/noDatalist.png") no-repeat 50% 0; + span{ + display: inline-block; + padding-top: 60px; + } + } + } + } + } } -}
\ No newline at end of file +} +//2019.01.29 add +.sitemodel nz-table { + .ant-table-wrapper { + + } + .ant-table-small { + border: none; + //border-top: 1px solid #e8e8e8; + border-radius: 4px; + .ant-table-body{ + table{ + padding: 0 1px; + .ant-table-thead{ + tr{ + height: 45px; + color:rgba(60,79,140,0.5); + th{ + border: none; + color:rgba(60,79,140,0.5); + font-size: 16px; + font-weight: 500; + } + } + } + .ant-table-tbody > tr > td{ + border-top: 1px solid #e8e8e8; + border-bottom: 2px solid #F7F8FC; + padding-top: 10px; + padding-bottom: 10px; + } + } + } + .ant-table-placeholder{ + font-size: 16px; + background:url("./assets/images/noDatalist.png") no-repeat 50% 0; + span { + display: inline-block; + padding-top: 50px; + } + } + } + +} + +.sitegroupmodal nz-table { + .ant-table-wrapper { + margin: 0 auto; + margin-top: 30px; + width: 340px; + } + .ant-table-small { + border: none; + border-top: 1px solid #e8e8e8; + border-radius: 4px; + .ant-table-body{ + table{ + padding: 0 1px; + .ant-table-thead{ + tr{ + font-size: 16px; + height: 45px; + color: #3C4F8C; + } + } + } + } + .ant-table-placeholder{ + font-size: 16px; + background:url("./assets/images/noDatalist.png") no-repeat 50% 0; + span { + display: inline-block; + padding-top: 50px; + } + } + } + +} +//2019.02.01 gong add +.list#services-list nz-table{ + .ant-table-wrapper{ + .ant-spin-container{ + .ant-table-content{ + .ant-table-scroll{ + .ant-table-header{ + overflow:auto!important; + margin-bottom: 0!important; + } + } + } + } + } + .ant-table-empty{ + .ant-spin-container{ + .ant-table-content{ + .ant-table-thead tr th{ + padding-bottom: 20px; + border-bottom: 1px solid #e8e8e8; + } + .ant-table-placeholder{ + background:url("assets/images/noDatalist.png") no-repeat 50% 0; + border: none; + span{ + display: inline-block; + padding-top: 50px; + } + } + } + } + } +} |
