jtopo使用说明

/************************************* jtopoCommon ************************************/

// const BASE_JTOPO_IMAGE = "http://10.10.10.164/cdnnms/img/jtopo/";
const defaultLinkColor = '0,200,255'

// 节点
function newSimpleNode(text) {
  var node = new JTopo.Node(text);
  // //节点颜色
  // node.fillColor = '0, 0, 255';

  //节点文字定位  var ps = ['Top_Left', 'Top_Center', 'Top_Right', 'Middle_Left', 'Middle_Center'
  //                 , 'Middle_Right', 'Bottom_Left', 'Bottom_Center', 'Bottom_Right'];
  node.textPosition = 'Bottom_Center';
  node.fontColor = '0,0,0';//节点字体颜色
  // scene.add(node);
  return node;
}

// 节点
function newNode(xpos, ypos, width, height, text) {
  var node = newSimpleNode(text);
  node.setLocation(xpos, ypos);
  node.setSize(width, height);
  return node;
}

// 节点
function newNodeImage(xpos, ypos, image, text) {
  var node = new JTopo.Node(text);
  node.setLocation(xpos, ypos);

  node.setImage( image, true);
  node.fontColor = '0,0,0';//节点字体颜色
  // scene.add(node);
  return node;
}


// 简单连线
function newLink(nodeA, nodeZ,almLevel) {
  var link = new JTopo.Link(nodeA, nodeZ);
  link.lineWidth = 3; // 线宽
  link.fontColor = '22,124,255' // 字体颜色
  // link.bundleOffset = 60; // 折线拐角处的长度
  // link.bundleGap = 20; // 线条之间的间隔
  link.textOffsetY = -15; // 文本偏移量（向下3个像素）
  // if (dashedPattern){
  //   link.dashedPattern = dashedPattern;
  // }
  if (almLevel != undefined && almLevel >= 0) {
    switch (almLevel) {
      // 告警等级 0—未知：紫, 1—提示：蓝,  2—一般：黄，3--严重：橙， 4--紧急:红
      case 0:
        link.strokeColor ='128,128,255';// 0—未知：紫
        break
      case 1:
        link.strokeColor ='32,32,255';// 1—提示：蓝
        break
      case 2:
        link.strokeColor ='255,255,0';// 2—一般：黄
        break
      case 3:
        link.strokeColor ='255,163,70';// 3--严重：橙
        break
      case 4:
        link.strokeColor ='255,0,0';//4--紧急:红
        break
      default:
        break
    }
  }
  // scene.add(link);
  return link;
}

// ---------- FoldLink
function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern) {
  var link = new JTopo.FoldLink(nodeA, nodeZ, text);
  link.direction = direction || 'horizontal';
  link.arrowsRadius = 15; //箭头大小
  link.lineWidth = 3; // 线宽
  link.bundleOffset = 60; // 折线拐角处的长度
  link.bundleGap = 20; // 线条之间的间隔
  link.textOffsetY = 3; // 文本偏移量（向下3个像素）
  link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
  link.dashedPattern = dashedPattern;
  // scene.add(link);
  return link;
}


// -----------FlexionalLink
/**
 *
 * @param nodeA
 * @param nodeZ
 * @param text
 * @param dashedPattern  默认实线， 5--虚线
 * @returns {h}
 */
function newFlexionalLink(nodeA, nodeZ, text, dashedPattern) {
  var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
  link.arrowsRadius = 10;
  link.lineWidth = 3; // 线宽
  link.offsetGap = 30;
  link.bundleGap = 15; // 线条之间的间隔
  link.textOffsetY = 10; // 文本偏移量（向下15个像素）
  link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
  link.dashedPattern = dashedPattern;
  // scene.add(link);
  return link;
}

export default {
  newSimpleNode,
  newNode,
  newNodeImage,
  newLink,
  newFoldLink,
  newFlexionalLink
}

/************************************* jtopoPanel ************************************/

import jtopoCommon from './jtopoCommon'

let JtopoObj = {}
JtopoObj.enableNodeLink = false // 是否开启连线
JtopoObj.scene = null // 场景
JtopoObj.topoViewId = null // 拓扑视图id
// 右键菜单function
JtopoObj.addLinkRightMenu = (link) => {
  if (!link) {
    return
  }
  // 增加右键菜单
  if (JtopoObj.link.rightEvent) {
    link.addEventListener('mouseup', function (event) {
      JtopoObj.link.rightEvent(this, event)
    })
  }
  // 增加双击菜单
  if (JtopoObj.link.dbclick) {
    link.addEventListener('dbclick', function (event) {
      JtopoObj.link.dbclick(this, event)
    })
  }
  if (JtopoObj.link.enterEvent) {
    link.addEventListener('mouseover', function (event) {
      JtopoObj.link.enterEvent(this, event)
    })
  }
  if (JtopoObj.link.leaveEvent) {
    link.addEventListener('mouseout', function (event) {
      JtopoObj.link.leaveEvent(this, event)
    })
  }
}

// 增加节点右键菜单
JtopoObj.addNodeRightMenu = (node) => {
  if (!node) {
    return
  }

  // 增加右键菜单
  if (JtopoObj.node.rightEvent) {
    node.addEventListener('mouseup', function (event) {
      JtopoObj.node.rightEvent(this, event)
    })
  }
  // 增加双击菜单
  if (JtopoObj.node.dbclick) {
    node.addEventListener('dbclick', function (event) {
      JtopoObj.node.dbclick(this, event)
    })
  }
}

// link事件
JtopoObj.link =
  {
    rightEvent: null,
    dbclick: null,
    enterEvent: null,
    leaveEvent: null,
    saveLinkData: null // 保存link数据function
  }
// node事件
JtopoObj.node =
  {
    rightEvent: null,
    dbclick: null
  }

/**
 * 设置节点事件
 * @param nodeObj
 */
function setNodeEvent (nodeObj) {
  if (nodeObj) {
    JtopoObj.node.rightEvent = nodeObj.rightEvent
    JtopoObj.node.dbclick = nodeObj.dbclick
  }
}

/**
 * 设置link事件
 * @param linkEventObj
 */
function setLinkEvent (linkEventObj) {
  if (linkEventObj) {
    JtopoObj.link.rightEvent = linkEventObj.rightEvent
    JtopoObj.link.dbclick = linkEventObj.dbclick
    JtopoObj.link.enterEvent = linkEventObj.enterEvent
    JtopoObj.link.leaveEvent = linkEventObj.leaveEvent
    JtopoObj.link.saveLinkData = linkEventObj.saveLinkData
  }
}
/**
 * 设置是否启用link
 * @param active
 */
function setEnableLink (active) {
  JtopoObj.enableNodeLink = active
}

/**
 * 初始化数据
 * @param topoViewId topo视图id
 * @param scene topo场景
 * @param addLinkRightMenu link右键菜单函数
 * @param saveLinkPortData 保存link函数
 */
function initData (topoViewId, scene) {
  JtopoObj.scene = scene
  JtopoObj.topoViewId = topoViewId
}

function addLinkEvent () {
  // 连线事件全局变量
  let beginNode = null
  let tempNodeA = new window.JTopo.Node('tempA')
  tempNodeA.setSize(1, 1)

  let tempNodeZ = new window.JTopo.Node('tempZ')
  tempNodeZ.setSize(1, 1)

  let tmpLink = new window.JTopo.Link(tempNodeA, tempNodeZ)
  // 连线事件
  const linkEvent = function (e) {
    if (e.target != null && e.target instanceof window.JTopo.Node) {
      if (JtopoObj.enableNodeLink && beginNode == null) {
        beginNode = e.target
        JtopoObj.scene.add(tmpLink)
        tempNodeA.setLocation(e.x, e.y)
        tempNodeZ.setLocation(e.x, e.y)
        return
      }
      if (beginNode != null && beginNode !== e.target) {
        let endNode = e.target
        let link = jtopoCommon.newLink(beginNode, endNode)
        JtopoObj.addLinkRightMenu(link)
        JtopoObj.scene.add(link)

        // 保存连接到数据库
        if (JtopoObj.link.saveLinkData) {
          const data = {topoId: JtopoObj.topoViewId, fromId: link.nodeA.nodeKey, toId: link.nodeZ.nodeKey}
          JtopoObj.link.saveLinkData(data)
        }
      }
    }
    beginNode = null
    JtopoObj.scene.remove(tmpLink)
  }

  JtopoObj.scene.mouseup(linkEvent)

  JtopoObj.scene.mousemove(function (e) {
    tempNodeZ.setLocation(e.x, e.y)
  })
}

// 获取所有link数据
function getAllLinkInfo () {
  let linkData = []
  const childs = JtopoObj.scene.childs
  for (let i = 0; i < childs.length; i++) {
    const item = childs[i]
    if (item.elementType !== 'link') {
      continue
    }
    linkData.push({
      linkId: item.nodeKey,
      fromId: item.nodeA.nodeKey,
      toId: item.nodeZ.nodeKey,
      fromPortId: item.fromPortId ? item.fromPortId : 0,
      toPortId: item.toPortId ? item.toPortId : 0
    })
  }
  return linkData
}

// 获取scene下的所有节点坐标
function getAllNodeInfo () {
  let nodePosData = []
  const childs = JtopoObj.scene.childs
  for (let i = 0; i < childs.length; i++) {
    const item = childs[i]
    if (item.elementType !== 'node') {
      continue
    }
    nodePosData.push({deviceId: item.nodeKey, xPos: item.x, yPos: item.y})
  }
  return nodePosData
}

/**
 * 增加link到场景
 * @param linkList
 */
function addLinkToSecne (linkList) {
  if (!linkList || linkList.length <= 0) {
    return
  }
  for (let i = 0; i < linkList.length; i++) {
    const linkItem = linkList[i]
    const nodeA = getNodeByKey(linkItem.fromId)
    const nodeZ = getNodeByKey(linkItem.toId)
    const almLevel = linkItem.almLevel
    if (nodeA && nodeZ) {
      let link = jtopoCommon.newLink(nodeA, nodeZ, almLevel)
      // 自定义属性
      link.fromPortId = linkItem.fromPortId
      link.fromPortName = linkItem.fromPortName
      link.toPortId = linkItem.toPortId
      link.toPortName = linkItem.toPortName
      link.nodeKey = linkItem.linkId
      JtopoObj.addLinkRightMenu(link)
      JtopoObj.scene.add(link)
    }
  }
}

function addNodeToScene (pageData, fnGetNodeImg) {
  if (!pageData || pageData.length <= 0) {
    return false
  }

  for (let i = 0; i < pageData.length; i++) {
    const tmpItem = pageData[i]
    let img = ''
    if (fnGetNodeImg) {
      img = fnGetNodeImg(tmpItem)
    }
    // 创建根节点
    let nodeItem = jtopoCommon.newNodeImage(tmpItem.xPos, tmpItem.yPos, img, tmpItem.deviceName)// 创建一个节点
    // 将设备id设置为节点nodeKey
    nodeItem.nodeKey = tmpItem.deviceId
    JtopoObj.addNodeRightMenu(nodeItem)
    JtopoObj.scene.add(nodeItem)// 放入到场景中
  }

  return true
}

// 根据key获取节点数据
function getNodeByKey (nodeKey) {
  const childs = JtopoObj.scene.childs
  for (let i = 0; i < childs.length; i++) {
    const item = childs[i]
    if (item.elementType !== 'node') {
      continue
    }
    if (item.nodeKey === nodeKey) {
      return item
    }
  }
  return null
}

/**
 * 设置节点告警
 * @param node
 * @param alarmText
 */
function setNodeWarning (node, alarmText) {
  setInterval(function () {
    if (node.alarm === alarmText) {
      node.alarm = null
    } else {
      node.alarm = alarmText
    }
  }, 600)
}

/**
 * 设置链路告警
 * @param link
 * @param linkText
 */
function setLinkWarning (link, linkText) {
  setInterval(function () {
    if (link.strokeColor === linkText) {
      link.strokeColor = '255,0,0'
    } else {
      link.strokeColor = linkText
    }
  }, 600)
}

export default {
  initData,
  setNodeEvent,
  setLinkEvent,
  setNodeWarning,
  setLinkWarning,
  setEnableLink,
  addLinkEvent,
  getAllLinkInfo,
  getAllNodeInfo,
  addLinkToSecne,
  addNodeToScene
}