import React from 'react';
import {message} from 'antd'
import vis from 'vis';
import {api as http} from '../../fetch';
let relation = { nodes: [], edges: [] }; //設置關聯圖的數據（nodes為節點、edges為關聯線）
const visDate={ //后端返回的數據格式
nodes:[
{
image:IconDomain,
label:'域名',
size:25,
id:1,
},
{
image:IconDomain,
label:'域名',
size:25,
id:2,
}
],edges:[
{
arrows:'to',
from:'1',
to:'2'
}
]
};
class Vis extends React.Component{
constructor(props) {
super(props);
this.state = {
relation: { nodes: [], edges: [] },
nodeheight:window.screen.height-326 //設置關聯圖高度為瀏覽器的高低減去頂部的高度
};
};
componentDidMount(){
this.props.onRef(this)
let nodeheight=window.screen.height-326;
this.setnode()
}
setnode=(url,name)=>{ //請求后端接口
http.get(url,{params:{name:name}})
.then(response=>{
if(response.code===1){
response.data.nodes.map((val,index)=>{
val.image=IconDomain;
val.is_root?val.size=70:val.size=150;
})
visDate.nodes=response.data.nodes
visDate.edges=response.data.organ
let container = document.getElementById("graph");
relation = { nodes: new vis.DataSet(), edges: new vis.DataSet() };
let data = this.findNode(visDate);
let option = {
// autoResize: true,
width: '100%',
height: this.state.nodeheight+'px',
nodes: {
shape: 'box',
// shape: 'image',
level:11,
font: {
size: 18,
color: 'red',
// margin:100
},
borderWidth: 2,
// widthConstraint:{
// minimum:150,
// maximum:150
// },
widthConstraint:150, //設置節點的寬度，超出換行
fixed:false, //設置節點固定,如果為真，則節點不會沿X方向移動
mass:2,
chosen:false,
labelHighlightBold:false
// margin:10
// physics: true,
},
edges: {
smooth: {
enabled: false, //設置線是否可彎曲
type: 'dynamic'
},
color: "#fff",
arrows: {
to: {
scaleFactor: 0.6 //箭頭大小
}
}
},
layout:{
randomSeed:1,//配置每次生成的節點位置都一樣，參數為數字1、2等
// hierarchical: {
// direction: 'UD',//UD:上下 DU:下上 LR:左右 RL:右左
// sortMethod: 'directed'
// }, //層級結構顯示}
},
physics: {
enabled: true, //節點不能重疊,整體圖回彈效果
solver: 'forceAtlas2Based',
barnesHut: {
gravitationalConstant: -4000,
centralGravity: 0.3,
springLength: 120,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
}
},
interaction: {
hover: true,//鼠標移過后加粗該節點和連接線
// dragNodes:false,//是否能拖動節點
selectable:false,//是否可以點擊選擇
hover:false,
// chosen:false,
// labelHighlightBold:false
}
};
let network = new vis.Network(container, data, option);
}else{
message.error(response.msg)
}
}).catch(error=>{
console.log(error)
})
}
findNode = (data, name) => { //根據名稱調用后端接口根據自己的業務來
data.nodes.map((value, index) => {
relation.nodes.update({
chosen:false,
widthConstraint:value.size,
id: value.id,
// image: value.image,
label: value.label,
size: value.size,
// level:Number(index),
shape:value.is_root?'circle':'box'}); //區分根節點和普通節點，根節點為圓形，普通節點為長方形
return relation
});
relation.edges.update(data.edges);
return relation
};
render(){
return(
<div style={{display:'flex'}}>
<div id="graph" style={{justifyContent:'center',width:'100%'}}>
</div>
</div>
)
}
}
export default Vis;