Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3
Issue-ID: USECASEUI-154
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

1 files changed, 1195 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
new file mode 100644
index 00000000..0174aa77
--- /dev/null
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -0,0 +1,1195 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import * as d3 from 'd3';
+import * as $ from 'jquery';
+import {networkHttpservice} from '../networkHttpservice.service';
+
+@Component({
+  selector: 'app-ccvpn-network',
+  templateUrl: './ccvpn-network.component.html',
+  styleUrls: ['./ccvpn-network.component.css']
+})
+export class CcvpnNetworkComponent implements OnInit {
+
+  constructor(private myhttp: networkHttpservice) {
+  }
+
+  ngOnInit() {
+    var thisNg = this;
+    thisNg.getD3Data();
+
+
+    //本地云TP端口断开连线 ，直接点击线可删除连线
+    $('#tpContainer').on('click', '.line-local', function () {
+      thisNg.isVisible = false;
+      thisNg.delBoxisVisible = true;
+      thisNg.delcloud = false;
+
+      thisNg.delTp1 = $(this).attr('data-tp1');
+      thisNg.delTp2 = $(this).attr('data-tp2');
+      thisNg.delNode1 = $(this).attr('data-node1');
+      thisNg.delNode2 = $(this).attr('data-node2');
+      thisNg.delVersion = $(this).attr('data-version');
+      thisNg.delLinkname = $(this).attr('data-link');
+
+      thisNg.delLinkIndex = $(this);
+      let dataD3 = thisNg.d3Data;
+      for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
+        if (dataD3[p]['name'] == thisNg.delTp1) {
+          thisNg.network.push(dataD3[p]['source']['name']);
+        }
+        if (dataD3[p]['name'] == thisNg.delTp2) {
+          thisNg.network.push(dataD3[p]['source']['name']);
+        }
+      }
+      thisNg.delNetwork1 = thisNg.network[0];
+      thisNg.delNetwork2 = thisNg.network[1];
+    });
+
+    //外部云 断开连线 ，直接点击线可删除连线
+    $('#tpContainer').on('click', '.cloudline', function () {
+      thisNg.isVisible = false;
+      thisNg.delBoxisVisible = true;
+      thisNg.delcloud = true;
+
+      thisNg.delTp1 = $(this).attr('data-tp1');
+      thisNg.delTp2 = $(this).attr('data-tp2');
+      thisNg.delNode1 = $(this).attr('data-node1');
+      thisNg.delNode2 = $(this).attr('data-node2');
+      thisNg.delVersion = $(this).attr('data-version');
+      thisNg.delNetwork1 = $(this).attr('data-network');
+      thisNg.delNetwork2 =$(this).attr('data-cloudnetwork');
+      thisNg.delcloudUrl =$(this).attr('data-url');
+      thisNg.delLinkname = $(this).attr('data-link');
+      thisNg.aaiId =$(this).attr('data-aaiid');
+      thisNg.getCloudUrl(thisNg.aaiId,thisNg);
+    });
+  }
+
+  addLinkDisabled = true;
+  isVisible = false;
+  outCloudShow = false;
+  inputshow = false;
+  delBoxisVisible = false;
+
+  d3Data = [];//D3渲染需要的数据
+  logicalLinks = [];//logicalLinks接口返回的已有的连线数据
+  linkName=null;//连线的名字link-name
+  networkOption = [];//表单network下拉选框填充的数据
+  nodeOption1 = {};//node下拉选框填充的数据
+  tpOption1 = [];//node下拉选框填充的数据
+  tpOption2 = [];//node下拉选框填充的数据
+  networkVal1 = null;//network1下拉框默认数据
+  networkVal2 = null;//network2下拉框默认数据
+  selectedNode1 = null;//node1下拉框默认数据
+  selectedNode2 = null;//node2下拉框默认数据
+  selecteTpName1 = null;//TP1下拉框默认数据
+  selecteTpName2 = null;//TP2下拉框默认数据
+  cloudUrl = null;//外部云URL地址
+  cloudNetwork = null;//外部云network名称
+  cloudNode = null;//外部云Node名称
+  cloudTp = null;//外部云Tp名称
+  dataCloud=[];//外部云的信息
+  dataCloudLink=[];
+  aaiId="";
+  charge=-200;
+
+  //删除连线时 右侧框显示的数据
+  delLinkname=null;
+  delNetwork1 = null;
+  delNode1 = null;
+  delTp1 = null;
+  delcloudUrl = null;
+  delNetwork2 = null;
+  delNode2 = null;
+  delTp2 = null;
+  delVersion = null;
+  delLinkIndex = null;
+  network = [];
+  delcloud = false;
+
+  winWidth = $('.content').width();
+  winHeight = $('.content').height();
+
+
+  imgmap = {
+    '1': '../assets/images/cloud-county1.png',
+    '2': '../assets/images/cloud-city1.png',
+    '3': '../assets/images/cloud-out.png',
+  };
+  tpoption = {
+    container: '#tpContainer',
+    data: '',
+    width: 1000,
+    height: this.winHeight
+  };
+
+  showForm(): void {
+    if (this.addLinkDisabled == false) {
+      this.isVisible = true;
+      this.delBoxisVisible = false;
+    }
+  }
+
+  hideForm(): void {
+    this.isVisible = false;
+    this.delBoxisVisible = false;
+    this.linkName=null;
+    this.networkVal1 = null;//初始化network1下拉框默认数据
+    this.networkVal2 = null;//初始化network2下拉框默认数据
+    this.selectedNode1 = null;//初始化node1下拉框默认数据
+    this.selectedNode2 = null;//初始化node2下拉框默认数据
+    this.selecteTpName1 = null;//初始化TP1下拉框默认数据
+    this.selecteTpName2 = null;//初始化TP2下拉框默认数据
+    // this.localUrl=null;//本地云URL地址
+    this.cloudUrl = null;//外部云URL地址
+    this.cloudNetwork = null;//外部云network名称
+    this.cloudNode = null;//外部云Node名称
+    this.cloudTp = null;//外部云Tp名称
+  }
+
+
+  tpName=null;
+  tpNameStyle = {
+    'display':'none',
+    'left':'0',
+    'top':'0'
+  };
+  showtp($event,item){
+    console.log(111111111)
+    this.tpName = item;
+    this.tpNameStyle.display = 'block';
+  }
+  movetp($event,item){
+    this.tpNameStyle.left = $event.clientX  + "px";
+    this.tpNameStyle.top = $event.clientY - 35 + "px";
+  }
+  hidetp($event){
+    this.tpNameStyle.display = 'none';
+  }
+
+  //获取云图数据
+  getD3Data() {
+    this.myhttp.getNetworkD3Data()
+      .subscribe((data) => {
+        if(data.length==0){
+          this.addLinkDisabled = false;
+          return;
+        };
+        for(let ii=0;ii<data.length;ii++){
+          if(data[ii]["aaiId"]!=""){
+            this.dataCloud=data.splice(ii,1)
+          }
+        }
+        for (var i = 0; i < data.length; i++) {
+          let name1 = {}, name2 = {};
+          let nodess = [];
+          name1['name'] = name2['network'] = data[i]['networkId'];
+          name1['type'] = '1';
+          name1['source'] = i;
+          this.d3Data.push(name1);
+          for (let c = 0; c < data[i]["pnfs"].length; c++) {
+            nodess.push(data[i]['pnfs'][c]['pnfName']);
+            this.nodeOption1[name2['network']] = nodess;
+          }
+          this.networkOption.push(name2);
+        }
+        console.log(this.networkOption)
+        for (var i = 0; i < data.length; i++) {
+          let tp_length = data[i]['tps'].length;
+          for (var h = 0; h < tp_length; h++) {
+            let name2 = {};
+            let interface_name = data[i]['tps'][h]['interface-name'];
+            name2['name'] = interface_name;
+            name2['type'] = '2';
+            name2['source'] = i;
+            this.d3Data.push(name2);
+          }
+        }
+        for (let b = 0; b < this.d3Data.length; b++) {
+          this.d3Data[b]['target'] = b;
+        }
+        this.initPosition(this.d3Data);
+        setTimeout(this.render(this.d3Data, this.imgmap,this.dataCloud,this.charge,data),0)
+      }, (err) => {
+        console.log(err);
+      });
+
+  }
+
+  //获取云图初始的连线状态 getlogicalLinksData
+  getLinksData() {
+    this.myhttp.getLogicalLinksData()
+      .subscribe((data) => {
+        console.log(data["status"])
+        if (data["status"]=="FAILED") {
+          return;
+        }
+        for (let i = 0; i < data["logical-link"].length; i++) {
+            if(data["logical-link"][i]["relationship-list"]["relationship"].length>2){
+                this.dataCloudLink=data["logical-link"].splice(i,1);
+            }
+        }
+        console.log(this.dataCloudLink)
+        for (let i = 0; i < data["logical-link"].length; i++) {
+          let textval = [];
+          textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+          textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+          textval[2] = data['logical-link'][i]['resource-version'];//version
+          textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+          textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+          textval[5] = data['logical-link'][i]['operational-status'];
+          textval[6] = data['logical-link'][i]['link-name'];
+          this.logicalLinks.push(textval);
+          this.chose(textval);
+        }
+        if(this.dataCloudLink.length>0){
+          this.getcloudLine(this.dataCloudLink)
+        }
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+  //D3云图渲染
+  render(nodes, imgmap,dataCloud,charge,dataD3) {
+    var thiss = this;
+    var _this = this.tpoption,
+      width = null,
+      height = _this.height;
+    if (_this.width > 800) {
+      width = _this.width;
+    } else {
+      width = 800;
+    }
+
+    var str="";
+    for(var i=0;i<10;i++){
+      str+="<div>这是div"+i+"</div>"
+    }
+
+    if(dataD3.length<=4){
+      charge=-850;
+    }else if(dataD3.length>4 && dataD3.length<=6) {
+      charge=-700;
+    }else if(dataD3.length>6 && dataD3.length<=10) {
+      charge=-600;
+    }else {
+      charge=-150;
+    }
+    var svg = d3.select(_this.container).append('svg')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('id', 'content-svg')
+        .style('pointer-events', 'all'),
+      graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
+
+      _g_nodes = graph.selectAll('g.node')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .style('display', function (d) {
+          var display = 'block';
+          switch (d.type) {
+            case '1':
+              display = 'none';
+              break;
+            case '2':
+              display = 'none';
+              break;
+            default:
+              break;
+          }
+          return display;
+        })
+        .style('cursor', 'pointer')
+        .attr('class', 'node'),
+
+      _g_lines = graph.selectAll('line.line')
+        .data(nodes)
+        .enter()
+        .append('g')
+        .style('display', 'none')
+        .attr('class', 'line');
+
+
+    _g_lines.append('line')
+      .style('stroke', '#93c62d'
+      )
+      .style('stroke-width', 2);
+
+    _g_nodes.append('image')
+      .attr('width', function (d) {
+        var width = 40;
+        switch (d.type) {
+          case '1':
+            width = 4.4 * width;
+            break;
+          case '2':
+            width = 0.12 * width;
+            break;
+          default:
+            break;
+        }
+        return width;
+      })
+      .attr('height', function (d) {
+        var height = 20;
+        switch (d.type) {
+          case '1':
+            height = 3.5 * height;
+            break;
+          case '2':
+            height = 0.2 * height;
+            break;
+          default:
+            break;
+        }
+        return height;
+      })
+      .attr('xlink:href', function (d) {
+        return imgmap[d.type];
+      });
+
+    _g_nodes.append('text')
+      .text(function (d) {
+        return d.name;
+      })
+      .style('transform', function (d) {
+        var x = null;
+        var y = null;
+        switch (d.type) {
+          case '1':
+            x = 7;
+            y = -7;
+            break;
+          case '2':
+            x = 1;
+            y = -2;
+            break;
+          default:
+            break;
+        }
+        return 'translate(' + x + '%,' + y + '%)';
+      })
+      .style('font-size', function (d) {
+        var size = 14;
+        switch (d.type) {
+          case '1':
+            size = 14;
+            break;
+          case '2':
+            size = 12;
+            break;
+          default:
+            break;
+        }
+        return size;
+      })
+      .style('fill', function (d) {
+        var color = '#666';
+        switch (d.type) {
+          case '1':
+            color = '#666';
+            break;
+          case '2':
+            color = '#666';
+            break;
+          default:
+            break;
+        }
+        return color;
+      })
+      .style('font-weight', '500');
+
+
+    //线上添加自定义属性
+    _g_lines.each(function (d, i) {
+      var _this = d3.select(this);
+      if (d.name) {
+        _this.attr('data-text', d.name);
+      }
+    });
+    var force = d3.layout.force()
+      .size([1000,this.winHeight])
+      .linkDistance(5)
+      // .theta(0)
+      .charge(charge)
+      .nodes(nodes)
+      .links(nodes)
+      .start();
+    // let distanceMax2=1;
+    // force.distanceMax = function(_) {
+    //   return arguments.length ? (distanceMax2 = _ * _, force) : Math.sqrt(distanceMax2);
+    // };
+    //添加拖拽行为
+    // _g_nodes.call(this.getDragBehavior(force));
+
+
+    force.on('tick', function (d) {
+      nodes.forEach(function(d,i){
+
+        d.x = d.x - 25 < 0     ? 25 : d.x ;
+        d.x = d.x + 25 > width ? width - 25 : d.x ;
+        d.y = d.y - 15 < 0      ? 15 : d.y ;
+        d.y = d.y + 15> height ? height - 15 : d.y ;
+      });
+      if(force.alpha()<=0.1){
+
+
+        _g_nodes.style('display', function (d) {
+
+
+          var display = 'block';
+          switch (d.type) {
+            case '1':
+              display = 'block';
+              break;
+            case '2':
+              display = 'none';
+              break;
+            default:
+              break;
+          }
+          return display;
+        });
+
+      _g_lines.select('line')
+        .attr('x1', function (d) {
+          return d.source.x;
+        })
+        .attr('y1', function (d) {
+          return d.source.y;
+        })
+        .attr('x2', function (d) {
+          return d.target.x;
+        })
+        .attr('y2', function (d) {
+          return d.target.y;
+        });
+
+      _g_nodes.attr('transform', function (d) {
+        // console.log(d)
+        // if(d["type"]==1){
+        //   d["x"]=400;
+        //   d["y"]=400;
+        // }else {
+        //   d["x"]=d["x"];
+        //   d["y"]=d["y"]
+        // }
+        var image = d3.select(this).select('image')[0][0],
+          halfWidth = parseFloat(image.attributes[0]['value']) / 2,
+          halfHeight = parseFloat(image.attributes[1]['value']) / 2;
+
+
+        return 'translate(' + (d.x - halfWidth) + ',' + (d.y - halfHeight) + ')';
+      });
+
+      _g_nodes.select('text').attr('dy', function (d) {
+        var image = this.previousSibling,
+          height = parseFloat(image.attributes[1]['value']),
+          fontSize = 12;
+        return height + 1.5 * fontSize;
+      });
+
+
+      }
+
+    });
+
+    force.on('end', function () {
+
+      force.stop();
+      if(dataCloud.length>0){
+        thiss.getoutCloud(dataCloud,imgmap);
+      }
+      thiss.getLinksData();
+      thiss.addLinkDisabled = false;
+    });
+
+  };
+
+  //拓扑图拖拽效果
+  getDragBehavior(force) {
+
+    return d3.behavior.drag()
+      .origin(function (d) {
+        return d;
+      })
+      .on('dragstart', dragstart)
+      .on('drag', dragging)
+      .on('dragend', dragend);
+
+    function dragstart(d) {
+      d3.event.sourceEvent.stopPropagation();
+      d3.select(this).classed('dragging', true);
+      force.start();
+    }
+
+    function dragging(d) {
+      d.x = d3.event.x;
+      d.y = d3.event.y;
+    }
+
+    function dragend(d) {
+      d3.select(this).classed('dragging', false);
+    }
+
+  }
+
+  //初始化节点位置
+  initPosition(datas) {
+    let origin = [this.tpoption.width / 2, this.tpoption.height / 2];
+    let points = this.getVertices(origin, Math.min(this.tpoption.width/2, this.tpoption.height/2), datas.length);
+    datas.forEach((item, i) => {
+      item.x = points[i].x;
+      item.y = points[i].y;
+    });
+  }
+
+  //根据多边形获取定位点
+  getVertices(origin, r, n) {
+    if (typeof n !== 'number') return;
+    var ox = origin[0];
+    var oy = origin[1];
+    var angle = 30 * n / n;
+    var i = 0;
+    var points = [];
+    var tempAngle = 0;
+    while (i < n) {
+      tempAngle = (i * angle * Math.PI) / 180;
+      points.push({
+        x: ox - r * Math.sin(tempAngle),
+        y: oy - r * Math.cos(tempAngle),
+      });
+      i++;
+    }
+    return points;
+  }
+
+  //渲染外部云
+  getoutCloud(dataCloud,imgmap) {
+    var _this = this,
+      width;
+    let networkId=dataCloud[0]["networkId"];
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    var svg = d3.select('#content-svg');
+    svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+    var out = d3.select('#out');
+    out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+    out.append('text').text(networkId)
+      .style('transform', 'translate(0，0)')
+      .style('font-size', '16')
+      .style('font-weight', '400')
+      .attr('dx', '40')
+      .attr('dy', '70')
+      .style('fill', '#666');
+  }
+
+  //外部云连接
+  getcloudLine(dataCloudLink) {
+    let textval = [];
+    textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1
+    textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2
+    textval[2] = dataCloudLink[0]['resource-version'];//version
+    textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1
+    textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2
+    textval[5] = dataCloudLink[0]['operational-status'];//status
+    textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId
+    textval[7] =this.dataCloud[0]["networkId"];
+    console.log(this.dataCloud);
+    let dataD3=this.d3Data;
+    for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network
+      if (dataD3[p]['name'] ==  textval[0]) {
+        textval[8] =dataD3[p]['source']['name'];//network1
+      }
+    }
+    textval[9] =dataCloudLink[0]["link-name"];
+
+    let lines_json = {};
+    var _this = this,
+      width;
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == textval[0]) {
+        //获取二级的x,y坐标
+        $('.node').eq(i).show();
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+        lines_json['x2'] = width - 100;
+        lines_json['y2'] = 100;
+      }
+    }
+    var x1 = lines_json['x1'];
+    var y1 = lines_json['y1'];
+    var x2 = lines_json['x2'];
+    var y2 = lines_json['y2'];
+    var color='#14bb58';
+    if(textval[5]=="up"){
+      color='#14bb58';
+    }else {
+      color='red';
+    }
+    var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+    var svg = d3.select('#graph');
+    $(".cloudline").remove();
+    $('#graph').prepend(line);
+    $('.cloudline').attr({
+      x1: x1 + 100,
+      y1: y1 + 10,
+      x2: x2,
+      y2: y2,
+      'data-tp1': textval[0],
+      'data-tp2': textval[1],
+      'data-version': textval[2],
+      'data-node1':textval[3],
+      'data-node2':textval[4],
+      'data-network':textval[8],
+      'data-cloudnetwork':textval[7],
+      'data-url':"",
+      'data-aaiid':textval[6],
+      "data-link":textval[9]
+    });
+    svg.html(svg.html());
+  }
+
+  //查询外部云host url地址
+  getCloudUrl(aaiId,thisNg){
+    this.myhttp.queryCloudUrl(aaiId)
+      .subscribe((data) => {
+        thisNg.delcloudUrl=data["service-url"];
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+
+  //右侧表单下拉选框数据填充 三级联动
+  //Left Port
+  network1Change(value: string): void {
+    this.selectedNode1 = this.nodeOption1[value][0];
+    this.getPInterfaces1();
+  }
+
+  node1Change(): void {
+    this.getPInterfaces1();
+  }
+
+  //获取指定node下的TP数据
+  getPInterfaces1() {
+    let params = {
+      pnfName: this.selectedNode1,
+    };
+    this.myhttp.getPInterfacesData1(params)
+      .subscribe((data) => {
+        this.tpOption1 = [];
+        for (let i = 0; i < data.length; i++) {
+          let tpName = data[i]['interface-name'];
+          this.tpOption1.push(tpName);
+        }
+        this.selecteTpName1 = this.tpOption1[0];
+      }, (err) => {
+        // console.log(err);
+      });
+  }
+
+  //Right Port
+  network2Change(value: string): void {
+    this.selectedNode2 = this.nodeOption1[value][0];
+    this.getPInterfaces2();
+  }
+
+  node2Change(): void {
+    this.getPInterfaces2();
+  }
+
+  //获取指定node下的TP数据
+  getPInterfaces2() {
+    let params = {
+      pnfName: this.selectedNode2,
+    };
+    this.myhttp.getPInterfacesData2(params)
+      .subscribe((data) => {
+        this.tpOption2 = [];
+        for (let i = 0; i < data.length; i++) {
+          let tpName = data[i]['interface-name'];
+          this.tpOption2.push(tpName);
+        }
+        this.selecteTpName2 = this.tpOption2[0];
+      }, (err) => {
+        // console.log(err);
+      });
+  }
+
+  //提交表单，连线
+  submitForm(): void {
+    //当页面ONAP未选中，即本地云端TP连线
+    var _thiss = this;
+    if (this.inputshow == false) {
+      if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) {
+        alert('服务端口不能为空，请选择端口信息');
+        return;
+      } else if (this.networkVal1 == this.networkVal2) {
+        alert('同一云服务下的TP端口不能相连！');
+        return;
+      }
+      let tp_links = [],
+        tp1 = this.selecteTpName1,
+        tp2 = this.selecteTpName2;
+      for (let i = 0; i < $(".line-local").length; i++) {
+        let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+        let data_text2 = $('.line-local').eq(i).attr('data-tp2');
+        tp_links.push(data_text1);
+        tp_links.push(data_text2);
+      }
+      if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) {
+        alert('此端口号连线已存在！');
+        return;
+      }
+      this.createTpLinks();
+
+    } else {
+      //当页面ONAP选中，即创建外部云，连线
+      if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) {
+        alert('服务端口信息不能为空，请填写完整的端口信息');
+        return;
+      }
+      let tp_links = [],
+        tp1 = this.selecteTpName1;
+      for (let i = 0; i < $(".line-local").length; i++) {
+        let data_text1 = $('.line-local').eq(i).attr('data-tp1');
+        tp_links.push(data_text1);
+      }
+      if (tp_links.indexOf(tp1) != -1) {
+        alert('此端口号连线已存在！');
+        return;
+      }
+      Promise
+        .all([this.createCloudNetwork(), this.createPnfs(), this.createCloudTp(), this.createCloudLinks()])
+        .then(function (results) {
+          console.log(results);
+          if (results.indexOf('FAIL') == -1) {
+            // _thiss.queryOutCloudLink();
+            _thiss.outCloudShow = true;
+            _thiss.outCloud(_thiss.imgmap);
+            setTimeout(_thiss.cloudLine(_thiss.networkVal1, _thiss.selectedNode1, _thiss.selecteTpName1, _thiss.cloudUrl, _thiss.cloudNetwork, _thiss.cloudNode, _thiss.cloudTp, 121211,"up",_thiss.linkName), 0);
+            _thiss.hideForm();
+          } else {
+            console.log('失败');
+          }
+        });
+
+    }
+  }
+
+  //创建tp连线 调用接口createLink
+  createTpLinks() {
+    let params = {
+      'link-name': this.linkName,
+      'in-maint': false,
+      'link-type': 'cross-link',
+      'speed-value': '10000',
+      'operational-status': 'up',
+      'relationship-list': {
+        'relationship': [
+          {
+            'related-to': this.selecteTpName1,
+            'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1
+          },
+          {
+            'related-to': this.selecteTpName2,
+            'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2
+          }
+        ]
+      }
+    };
+    this.myhttp.createLink(params)
+      .subscribe((data) => {
+        if (data["status"] == 'SUCCESS') {
+          this.queryAddLink();
+        }
+      }, (err) => {
+        // console.log(err);
+        alert('系统忙，连接失败！');
+      });
+  }
+
+  //创建tp连接线后马上查询新增的连线
+  queryAddLink() {
+    let linkName=this.linkName,
+      selecteTpName1 = this.selecteTpName1,
+      selecteTpName2 = this.selecteTpName2,
+      selectedNode1 = this.selectedNode1,
+      selectedNode2 = this.selectedNode2;
+    let params = {
+      'link-name': selecteTpName1 + '_' + selecteTpName2,
+    };
+    this.myhttp.querySpecificLinkInfo(params)
+      .subscribe((data) => {
+        let version = data['resource-version'],
+          operational_status = data['operational-status'];
+        let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status,linkName];
+        this.hideForm();
+        this.chose(textval);
+      }, (err) => {
+        // console.log(err);
+        alert('系统忙，连接失败！');
+      });
+  }
+
+  //两个TP之间的连线 坐标获取
+  chose(textval) {
+    var lines_json = {};
+    lines_json['tp1'] = textval[0];
+    lines_json['tp2'] = textval[1];
+    lines_json['version'] = textval[2];
+    lines_json['node1'] = textval[3];
+    lines_json['node2'] = textval[4];
+    lines_json['status'] = textval[5];
+    lines_json['linkname'] = textval[6];
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == textval[0]) {
+        $('.node').eq(i).show();
+        //获取二级的x,y坐标
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+      }
+      if ($('.node').eq(i).find('text').html() == textval[1]) {
+        $('.node').eq(i).show();
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]);
+      }
+    }
+
+    this.addLine(lines_json);
+  }
+
+  //两个TP之间的连线 连线渲染
+  addLine(lines) {
+    let tp1 = lines.tp1;
+    let tp2 = lines.tp2;
+    let version = lines.version;
+    let node1 = lines.node1;
+    let node2 = lines.node2;
+    let status = lines.status;
+    let linkname = lines.linkname;
+    let x1 = lines.x1;
+    let y1 = lines.y1 + 5;
+    let x2 = lines.x2;
+    let y2 = lines.y2 + 5;
+    let color = '#14bb58';
+    if (status == 'up') {
+      color = '#14bb58';
+    } else {
+      color = 'red';
+    }
+    let line = '<line class=\'line line-local \' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>';
+    let svg = d3.select('#graph');
+    $('#graph').prepend(line);
+    $('.line').first().attr({
+      x1: x1,
+      y1: y1,
+      x2: x2,
+      y2: y2,
+      'data-tp1': tp1,
+      'data-tp2': tp2,
+      'data-version': version,
+      'data-node1': node1,
+      'data-node2': node2,
+      "data-link":linkname
+    });
+    svg.html(svg.html());
+  }
+
+  //创建外部云连线后，马上查询连线
+  queryOutCloudLink() {
+    let networkVal1 = this.networkVal1,
+      selectedNode1 = this.selectedNode1,
+      selecteTpName1 = this.selecteTpName1,
+      cloudUrl = this.cloudUrl,
+      cloudNetWork = this.cloudNetwork,
+      cloudNode = this.cloudNode,
+      cloudTp = this.cloudTp,
+      linkname=this.linkName;
+    let params = {
+      'link-name': linkname,
+    };
+    this.myhttp.querySpecificLinkInfo(params)
+      .subscribe((data) => {
+        let version = data['resource-version'];
+        let status = data['operational-status'];
+        let link_name = data['link-name'];
+        this.outCloudShow = true;
+        this.outCloud(this.imgmap);
+        setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name), 0);
+      }, (err) => {
+        // console.log(err);
+        alert('系统忙，连接失败！');
+      });
+  }
+
+  //新增外部云
+  outCloud(imgmap) {
+    var _this = this,
+      width;
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    var svg = d3.select('#content-svg');
+    svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+    var out = d3.select('#out');
+    out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
+    out.append('text').text('Partner Network')
+      .style('transform', 'translate(0，0)')
+      .style('font-size', '16')
+      .style('font-weight', 'bold')
+      .attr('dx', '40')
+      .attr('dy', '70')
+      .style('fill', '#fff');
+  }
+
+  //新增 外部云连接
+  cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name) {
+    let lines_json = {};
+    var _this = this,
+      width;
+    if (_this.tpoption.width > 800) {
+      width = _this.tpoption.width;
+    } else {
+      width = 800;
+    }
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == networkVal1) {
+        //获取二级的x,y坐标
+        var translates = $('.node').eq(i).css('transform');
+        lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
+        lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
+        lines_json['x2'] = width - 100;
+        lines_json['y2'] = 100;
+      }
+    }
+    var x1 = lines_json['x1'];
+    var y1 = lines_json['y1'];
+    var x2 = lines_json['x2'];
+    var y2 = lines_json['y2'];
+    var color='#14bb58';
+    if(status=="up"){
+      color='#14bb58';
+    }else {
+      color='red';
+    }
+    var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>";
+    var svg = d3.select('#graph');
+    $(".cloudline").remove();
+    $('#graph').prepend(line);
+    $('.cloudline').attr({
+      x1: x1 + 100,
+      y1: y1 + 10,
+      x2: x2,
+      y2: y2,
+      'data-tp1': selecteTpName1,
+      'data-tp2': cloudTp,
+      'data-version': version,
+      'data-node1':selectedNode1,
+      'data-node2':cloudNode,
+      'data-network':networkVal1,
+      'data-cloudnetwork':cloudNetWork,
+      'data-url':cloudUrl,
+      "data-link":link_name
+    });
+    svg.html(svg.html());
+  }
+
+  //创建外部云，连线时调用以下4个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks
+  createCloudNetwork() {
+    let _thiss = this;
+    let params = {
+      'selflink': this.cloudUrl,
+      'network-id': this.cloudNetwork,
+      'provider-id': '',
+      'client-id': '',
+      'te-topo-id': ''
+    };
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createNetwrok(params)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  createPnfs() {
+    let _thiss = this;
+    let params= {
+      "pnf-name": this.cloudNode,
+      "pnf-id": "",
+      "in-maint": "",
+      "admin-status": "up",
+      "operational-status": "up",
+      "relationship-list": {
+        "relationship": {
+          "related-to": "network-resource",
+          "relationship-label": "tosca.relationships.network.LinksTo",
+          "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork,
+          "relationship-data": {
+            "relationship-key": "network-resource.network-id",
+            "relationship-value": this.cloudNetwork
+          }
+        }
+      }
+    };
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createNetwrok(params)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  createCloudTp() {
+    let _thiss = this;
+    let params= {
+      "interface-name": this.cloudTp,
+      "speed-value": "100000",
+      "in-maint": "true",
+      "network-ref": "",
+      "transparent": "",
+      "operational-status": "up",
+    };
+    let cloudNodeName=this.cloudNode;
+
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createTp(params,cloudNodeName)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          // console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  createCloudLinks() {
+    let _thiss = this;
+    let params={
+      "link-name":  this.linkName,
+      "in-maint": "",
+      "link-type": "",
+      "speed-value": "",
+      "relationship-list": {
+        "relationship" : [
+          {
+            "related-to": this.selecteTpName1,
+            "related-link": "/aai/v13/network/pnfs/pnf/"+this.selectedNode1+"/p-interfaces/p-interface/"+this.selecteTpName1
+          },
+          {
+            "related-to": this.cloudTp,
+            "related-link": "/aai/v13/network/pnfs/pnf/"+this.cloudNode+"/p-interfaces/p-interface/"+this.cloudTp
+          }
+        ]
+      }
+    };
+    var pro = new Promise(function (resolve, reject) {
+      //做一些异步操作
+      _thiss.myhttp.createCloudLink(params)
+        .subscribe((data) => {
+          resolve(data["status"]);
+        }, (err) => {
+          // console.log(err);
+        });
+    });
+    return pro;
+  }
+
+  //本地云TP端口 删除连线 调用接口deleteLink
+  delLink(): void {
+    let deltp1 = this.delTp1,
+      deltp2 = this.delTp2,
+      version = this.delVersion,
+      delLinkIndex = this.delLinkIndex;
+    let params = {
+      'logical-link': this.delLinkname,
+      'resource-version': version,
+    };
+    this.myhttp.deleteLink(params)
+      .subscribe((data) => {
+        if (data["status"] == 'SUCCESS') {
+          this.delLine(deltp1, deltp2);
+          console.log(delLinkIndex)
+          delLinkIndex.remove();
+        }
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+  delLine(val1, val2) {
+    for (let i = 0; i < $(".node").length; i++) {
+      if ($('.node').eq(i).find('text').html() == val1) {
+        $('.node').eq(i).hide();
+      }
+      if ($('.node').eq(i).find('text').html() == val2) {
+        $('.node').eq(i).hide();
+      }
+    }
+    this.delBoxisVisible = false;
+  }
+
+  //外部云 删除连线 调用接口deleteCloudLine
+  delCloudLink() : void {
+    let deltp1 = this.delTp1,
+      deltp2 = this.delTp2,
+      version = this.delVersion;
+    let params = {
+      'logical-link': this.delLinkname,
+      'resource-version': version,
+    };
+    this.myhttp.deleteLink(params)
+      .subscribe((data) => {
+        console.log(data)
+        if (data["status"] == 'SUCCESS') {
+          this.delLine(deltp1, deltp2);
+          $('.cloudline').remove();
+        }
+      }, (err) => {
+        console.log(err);
+      });
+  }
+
+}