summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/ccvpn-creation
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-03-14 17:32:28 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-03-14 17:32:49 +0800
commit96d989b84a7ebb4e288442cf888af3357f961046 (patch)
tree7adf295285254e41f9b12cad9a03896a31fc0971 /usecaseui-portal/src/app/ccvpn-creation
parent8d5ff3d30de0c774fd8048fb36a451b206681f1b (diff)
Service instance topology front-end development
Change-Id: Ie39ede5583468def6ddfdbf6aa15b44aca61b982 Issue-ID: USECASEUI-224 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation')
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css12
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html53
-rw-r--r--usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts151
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"/>-->
+
+ <!--&lt;!&ndash; <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> &ndash;&gt;-->
+ <!--&lt;!&ndash;<text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>&ndash;&gt;-->
+ <!--<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"/>-->
+ <!--&lt;!&ndash;<text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}&ndash;&gt;-->
+ <!--&lt;!&ndash;</text>&ndash;&gt;-->
+ <!--</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"/>-->
+ <!--&lt;!&ndash;<text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}&ndash;&gt;-->
+ <!--&lt;!&ndash;</text>&ndash;&gt;-->
+ <!--</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 = {