diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation')
3 files changed, 172 insertions, 44 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 ceaaaf35..e0ce4b99 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -294,13 +294,17 @@ hr { color: #06A7E2; font-size: 16px; font-weight: 500; - border-left: 10px solid #f3f3f3; margin-bottom: 30px; - box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5); + /*box-shadow: 0px 10px 15px 2px rgba(222, 222, 222, 0.5);*/ + /*background: url("../../../assets/images/ccvpn-createbanner.png") no-repeat;*/ + /*background-size: 100% 100%;*/ + background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); + /*background-color:rgba(188, 231, 248, 1);*/ + border-radius:4px; } .model .chart #createChart { width: 100%; - /*height: 50vh;*/ + height: 220px; margin-top: 20px; position: relative; } @@ -317,5 +321,5 @@ hr { } .model .creation .sotnvpn,.model .creation .site,.model .creation .sitegroup{ background: #fff; - padding: 30px; + padding: 30px 30px 0 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 05a29a79..f1906285 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -28,26 +28,39 @@ </div> <!-- chart --> <div class="chart"> - Create Service + <span style="padding: 25px;display: inline-block;"> + Create Service {{createParams.commonParams.templateType}} + </span> <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> + <image id="domain" xlink:href="../../assets/images/domain1.png" style="width: 15%" + x="40%" y="0" /> + <!--<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"/>--> + + <!--<!– <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" [attr.y]="item.y" width="50px"/>--> + <!--<!–<text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}–>--> + <!--<!–</text>–>--> + <!--</g>--> + <!--<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" [attr.y]="item.y" width="50px"/>--> + <!--<!–<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> --> @@ -81,9 +94,6 @@ <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 @@ -97,6 +107,9 @@ <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 style="width: 130px">Reroute Enabled:</span> + <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch> + </li> <li><span>Color Aware:</span> <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch> </li> 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 3a478e0e..40ea977d 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -13,7 +13,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; +import * as d3 from 'd3'; +import * as $ from 'jquery'; import { MyhttpService } from '../myhttp.service'; @Component({ @@ -294,25 +296,134 @@ export class CcvpnCreationComponent implements OnInit { // this.deleteGroupSite(groupIndex + 1); //The first line number is 1 when deleting } - // site Node graphic depiction - lines=[]; - siteImage=[]; - drawImage(sitelist){ - let cx = 200; - let cy = 200; - let r = 180; - let startAngle = -210 * (Math.PI/180); - let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1; - - this.lines = sitelist.map((item,index)=>{ - let x = cx + Math.cos(startAngle - step*index)*r; - let y = cy + Math.sin(startAngle - step*index)*r; - return {img:"line",site:item.baseData.name,x1:cx,y1:cy,x2:x,y2:y} - }) - this.siteImage = this.lines.map((item)=>{ - return {img:"site",name:item.site,x:item.x2 - 40,y:item.y2 - 40} - }) - } +// Site node graphic depiction + lines = []; + siteImage = []; + tpImage = []; + imgmap = { + '1': './assets/images/domain1.png', + '2': './assets/images/site.png' + }; + + drawImage(sitelist) { + let cx = 550; + let cy = 0; + let innerx1 = 720; + let innery1 = 80; + let ox = 950; + let oy = 0; + let innerx2 = 780; + let innery2 = 60; + let lateX1 = Math.random() * 30 + 55; + let lateY1 = Math.random() * -20 + 10; + let lateX2 = 15; + let lateY2 = 20; + // let step = sitelist.length > 1 ?sitelist.length: 1; + + this.lines = sitelist.map((item, index) => { + let step = index + 1; + let x = cx; + let y = cy; + let innerX = innerx1; + let innerY = innery1; + if (step % 2 != 0) { + x = cx; + y = cy; + innerX = innerx1; + innerY = innery1; + if (step == 1) { + innerX = innerx1; + innerY = innery1; + } else { + x = cx - lateX1 * Math.ceil((step / 2)) >= 0 ? cx - lateX1 * Math.ceil((step / 2)) : -(cx - lateX1 * Math.ceil((step / 2))); + y = cy + lateY1 * step >= 0 ? cy + lateY1 * step : -(cy + lateY1 * step); + innerX = this.lines[step - 3].innerX - lateX2; + innerY = this.lines[step - 3].innerY + lateY2; + } + } else { + x = ox; + y = oy; + innerX = innerx2; + innerY = innery2; + if (step / 2 == 1) { + innerX = innerx2; + innerY = innery2; + } else { + x = ox + lateX1 * (step / 2) >= 0 ? ox + lateX1 * (step / 2) : -(ox + lateX1 * (step / 2)); + y = oy + lateY1 * step >= 0 ? oy + lateY1 * step : -(oy + lateY1 * step); + innerX = this.lines[step - 3].innerX + lateX2; + innerY = this.lines[step - 3].innerY + lateY2; + } + } + return { + img: "line", + site: item.baseData.name, + x1: x + 25, + y1: y + 25, + x2: innerX, + y2: innerY, + innerX: innerX, + innerY: innerY + } + }); + + console.log(this.lines) + this.render(this.imgmap, this.lines); + } + + render(imgmap, lines) { + + //enter + var svg = d3.select("svg"), + _g_lines = svg.selectAll('line.line') + .data(lines) + .enter() + .append('line') + .style('stroke', '#3fa8eb' + ) + .style('stroke-width', 2) + .attr('class', 'line') + .attr("x1", function (d) { + return d.x1; + }) + .attr("y1", function (d) { + return d.y1; + }) + .attr("x2", function (d) { + return d.x2; + }) + .attr("y2", function (d) { + return d.y2; + }), + _g_site = svg.selectAll('g.g-site') + .data(lines) + .enter() + .append('g') + .style('cursor', 'pointer') + .attr('class', 'g-site'); + _g_site.append('image') + .style("width", "50px") + .attr('xlink:href', function (d) { + return imgmap[2]; + }) + .attr("x", function (d) { + return d.x1 - 25; + }) + .attr("y", function (d) { + return d.y1 - 25; + }) + + //quit + svg.selectAll("g.g-site") + .data(lines) + .exit() //Select a picture without bound data + .remove(); + svg.selectAll("line.line") + .data(lines) + .exit() //Select the connection without binding data + .remove(); + + } siteName=null; siteNameStyle = { |