path: root/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts

/*
    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);
      });
  }

}