hightopo实现电力拓扑着色功能

电力系统中传统意义上的网络拓扑着色是指确定网络元件的带电状态，并在图上以不同的颜色表示。

曾经想过，通过设备的带电状态来判断进行着色，比如对于一个设备，如果他的电压在规定范围内，就判断该设备带电，就对其颜色属性进行修改着色，同理各种母线线路也当做设备处理，判断母线电压并进行上色。

这种方案在正常运行中是没有问题的，但是还有一种模拟操作，就是对电网进行模拟分合闸操作，此时就不能依据是否带电来进行着色了，所以要从根本上解决着色问题还是必须罗列出设备之间的关联关系图，然后从进线开始遍历图进行着色。

对于之前的拓扑图，在图纸绘制的过程中，只是将图标拖拽到图纸当中去，但图标与图标之间并没有任何关联，也没有上下级的关系。

对于两个组件的，在图纸中仅仅标名了在X,Y轴的坐标，并没有拓扑关系。

通过实验发现hightopo自带的连线功能，可以在两个node节点间建立关联关系。

 Edge类型node会通过source和target连接两个节点，借此我们可以依据这种关联建立这种图关联

关联建立之后，我们就可以依据关联图进行着色。

进入代码层面，在页面加载事件中，我们需要遍历图中节点，建立“图”关系。

//建立图对象
var graph={}
//获得图纸中的所有节点
var datas=view.dm().getDatas()
//遍历节点
for(var i=0;i<datas.length;i++){
   var data=datas.get(i)
   //如果节点类型是ht连线类型
   if(data instanceof ht.Edge){
       //获得该连线的ID
       var id=data.getId()
       //分别获得Edge连接的两个node节点
       var nodeId=data.getSource().getId()
       var nodeId2=data.getTarget().getId()
       //图中如果没有nodeID,为nodeID创建一个空数组,如果有nodeID就将nodeID对应的连接关系数组取                        
       //出来,将新的连接关系放入
       graph[nodeId]=graph[nodeId]||[]
       //该节点通过哪条线与哪个节点关联
       graph[nodeId].push({node:nodeId2,edge:id})
       graph[nodeId2]=graph[nodeId2]||[]
       graph[nodeId2].push({node:nodeId,edge:id})
       //先设置断电颜色,后期颜色以参数的形式传过来
       data.s('edge.color','rgb(200,200,200)')
    }else{
       //如果节点类型不是Node
       //如果是图像类型，将其background设为断电颜色
       data.s('shape.background','rgb(200,200,200)')
       //如果是组件类型（组件将其背景色通过attr引出为borderColor，修改borderColor为断电颜色）
       data.a('borderColor','rgb(200,200,200)')
    }
        //console.log(i,data.s('edge.color'),data.s('shape.background'))
}

//记录已经着色的node,如果已经着色就不会在重复着色了(重复上色会有问题，比如两条母线不同着色顺序会有影响)
var colorNodes=[]
//着色函数
var fillColor=function(node){
   //如果着色数组包含这个节点
   if(colorNodes.indexOf(node)!=-1){
       return
   }
   console.log(node)
   colorNodes.push(node)
   
   node.s('shape.background','rgb(212,0,0)')
   //从图中获得节点关联数组    
   var nodeIds=graph[node.getId()]
   //遍历关联节点数组
   for(var i=0;i<nodeIds.length;i++){
       //关联的线
       var edgeId=nodeIds[i].edge
       var edge=view.dm().getDataById(edgeId)
       //对关联的线进行带点着色
       edge.s('edge.color','rgb(212,0,0)')
       //关联的节点
       var nodeId2=nodeIds[i].node
       var node2=view.dm().getDataById(nodeId2)
       //如果是开关就包含state属性,如果state属性!=-1即开关属于合闸状态,对下一节点进行着色
       if(node2.a('state')!=-1){
           fillColor(node2)
           console.log(node2.a('state'));
           console.log(node2);
           node2.a('borderColor','rgb(212,0,0)')
       }
    }
 }
 var start1=view.dm().getDataByTag('start1')
 var start2 = view.dm().getDataByTag('start2')
 fillColor(start1)
 fillColor(start2)
 

当然在代码中写死的颜色属性都可以通过参数或者组件自身绑定属性进行动态配置。

之后我们运行图纸

 就会根据开关的状态进行着色。