import { DataSet, Network } from "vis/index-network";
import workService from '../../services/fos/work.service.js'
let workHttps = new workService()
let ori_data = null,
ori_data_new = null,
cur_data = {},
network = null,
container = null,
nodeBorderWidth = 5,
vm = null,
options = {
physics: {
enabled: false
},
interaction: { hover: true },
nodes: {
shape: "dot",
size: 10,
font: {
size: 13
},
borderWidth: nodeBorderWidth
},
edges: {
width: 1,
smooth: false,
font: {
size: 10
}
}
};
let bExcIds = { "0": [], "1": [], "2": [] };
let int = 0;
let nodeout = null
let nodecontext = null;
let edgecontext = null;
let colors = {
n: "#dddddd", // 闪烁背景色
y: "#ffff00", // 黄色 (闪烁背景色)
d: "#cf2b0b", // 深红 (闪烁背景色)
l: "#59db49", // 线默认色
r: "#ff3d32", // 红色 (节点出问题)
q:'#72D572', // 淡绿色 (未纳管)
g: "#0A8F08", // 绿色 (已纳管)
b: '#2CABE3', // 蓝色 (已部署)
};
// 0 异常,1 正常,2 黄色报警,3 橙色报警,4 红色报警,5 紫色报警
let levels = ["a", "l", "y", "o", "d", "v"];
let MapNodeIdIndex = {};
let MapEdgeIdIndex = {};
let registerNetworkEvent = () => {
network.on("dragStart", params => {
hidecontext();
});
network.on("dragEnd", params => {
hidecontext();
let scale = network.getScale();
if (scale < 0.3) {
scale = 0.3;
}
network.moveTo({ scale: scale });
localStorage.setItem("scale", JSON.stringify(scale));
localStorage.setItem(
"viewposition",
JSON.stringify(network.getViewPosition())
);
// network.moveTo();
// setTimeout(function () {
// network.moveNode(params.nodes[0], params.pointer.canvas.x, params.pointer.canvas.y)
// },2000)
if(params.nodes[0]){
cur_data.nodes._data[params.nodes[0]].x = params.pointer.canvas.x
cur_data.nodes._data[params.nodes[0]].y = params.pointer.canvas.y
cur_data.nodes._data[params.nodes[0]].axisX = params.pointer.canvas.x
cur_data.nodes._data[params.nodes[0]].axisY = params.pointer.canvas.y
// console.log(params.nodes[0], params.pointer.canvas.x, params.pointer.canvas.y)
let arr = []
let obj = {}
for(let k in cur_data.nodes._data){
obj={axisX:cur_data.nodes._data[k].axisX,axisY : cur_data.nodes._data[k].axisY,ip : cur_data.nodes._data[k].ip}
arr.push(obj)
ori_data.nodes.forEach((v,i)=>{
v.axisX = cur_data.nodes._data[k].axisX
v.axisY = cur_data.nodes._data[k].axisY
})
}
ori_data_new = ori_data
getNodesByJson(arr)
}else{}
});
network.on("zoom", params => {
let scale = network.getScale();
if (scale < 0.3) {
scale = 0.3;
}
network.moveTo({ scale: scale });
//防止放大缩小后还原
localStorage.setItem("scale", JSON.stringify(scale));
localStorage.setItem(
"viewposition",
JSON.stringify(network.getViewPosition())
);
});
//右击事件
network.on("oncontext", params => {
let __nodeId = network.getNodeAt({
x: params.pointer.DOM.x,
y: params.pointer.DOM.y
});
//判断是否存在弹窗，若存在先去掉再弹出新的
if($(".node-oncontext").show()){
$(".node-oncontext").remove()
}else{}
if (__nodeId) { // 获取点击节点id
// let isType = 3;
// let innerStr = "";
// let innerClass = "";
cur_data.nodes.forEach((v,i)=>{
if(v.id == __nodeId){
let div = document.createElement("div")
div.className = "node-oncontext";
nodeout = container.appendChild(div)
nodeout.innerHTML = "<div class='numManage'>账号管理</div>"
nodeout.style.left = params.pointer.DOM.x + "px"
nodeout.style.top = params.pointer.DOM.y + "px"
nodeout.style.display = "block";
document.querySelector(".node-oncontext").onclick = function () {
_store.commit('updateFormShow',true)
_store.commit('updateAccId',__nodeId)
}
}
})
} else {
hidecontext();
}
});
//屏蔽右键菜单
document.getElementsByTagName("canvas")[0].oncontextmenu = function(ev) {
ev.preventDefault();
};
window.Event.prototype.preventDefault = window.Event.prototype.preventDefault || function(){
//阻止冒泡
this.cancelBubble = true;
//阻止触发默认事件
this.returnValue = false;
}
// window.event.oncontextmenu = function(ev) {
// ev.preventDefault();
// };
//双击事件
network.on("doubleClick", params => {
saveviewpos();
hidecontext();
let id = params.nodes[0];
if (id == undefined) {
return;
}
localStorage.setItem("cfg", "");
let bexc = 0;
let bend = 0;
let v = ori_data.nodes[MapNodeIdIndex[id]];
bexc = v.bexc; //是否有异常子节点 0 没有光圈 1 正常光圈 2 有异常光圈
bend = v.bend;
if(bend == '1'){ //叶子节点
return
}
if (bexc != "0") {
id && redraw(id, 1);
} else {
id && redraw(id, 2);
}
});
//更新闪烁状态
int = setInterval(() => {
update_nodes_status();
}, 1000);
//屏蔽右键菜单
document.getElementsByTagName("canvas")[0].oncontextmenu = function(ev) {
ev.preventDefault();
};
};
let redraw = (id, qryType,that) => {
vm = that?that:vm
let cfg = {
qryType // 1,展开 2,收缩 3,刷新 4,按点查询
};
// cfg.vpnName = sessionStorage.getItem('topuVpnName');
if (qryType === 3 || qryType == 4) {
cfg.nodeId = id;
}
let list = [];
let listStr ="";
// let list = "";
if(qryType === 3){
ori_data = JSON.parse(sessionStorage.getItem('graph'))
container = document.querySelector(`#topuDiv`)
}
ori_data &&
ori_data.nodes.forEach(v => {
if (qryType == 1 || qryType == 2) {
if (v.ip == id) {
cfg.nodeId = v.ip;
}
}
// list.push({nodeid:v.ip})
list.push(v.ip)
// list += v.ip+","
listStr = list.join(",")
});
if (!list) {
return;
}
// cfg.nodeList = JSON.stringify(list);
cfg.nodelist = listStr;
cfg.extendLevel = 1;
localStorage.setItem("cfg", JSON.stringify(cfg));
// console.log(localStorage.getItem("cfg"))
// localStorage.setItem("cfg", cfg);
cfg.extendLevel = 1
workHttps.getListtopoall(cfg).then((res)=>{
if(res.code===0){
let data = res.data;
if(data.retNodes.length == 0 || data.retLinks.length == 0){
return
}
data.retNodes.forEach((v,i)=>{
if(!v.axisX || !v.axisY){
v.axisX = Math.ceil(Math.random()*400)
v.axisY = Math.ceil(Math.random()*400 + 100)
}
})
if(ori_data_new !== null){
for(let m=0;m<data.retNodes.length;m++){
for(let n=0;n<ori_data_new.nodes.length;n++){
if(m.ip == n.ip){
m.axisX = n.axisX
m.axisY = n.axisY
}
}
}
}
console.log(data)
update(data)
}else {
// _toast(res.msg)
}
}).catch((err=>{
}))
};
let update= (d) => {
// if (!network) {
// return;
// }
d = handleData(d)
sessionStorage.setItem("graph", JSON.stringify(d));
int = clearInterval(int);
nodecontext = null;
edgecontext = null;
bExcIds = { "0": [], "1": [], "2": [] };
MapNodeIdIndex = {};
MapEdgeIdIndex = {};
ori_data = d;
cur_data = JSON.parse(JSON.stringify(ori_data));
cur_data.nodes.forEach((v, i) => {
MapNodeIdIndex[v.id] = i
v.color = {}
if(v["bexc"] == "1"){
v.color = { border:colors.y}
}else if(v["bexc"] == "2"){
v.color = { border:colors.d}
}else {
v.borderWidth = 0 //无光圈
v.color = { background:colors.b}
}
if(v.status == '0'){
v.color.background = colors.r
}else if(v.status == '1'){
v.color.background = colors.b
}
bExcIds[v["bexc"]] &&
bExcIds[v["bexc"]].push(v);
});
cur_data.edges.forEach((v, i) => {
MapEdgeIdIndex[v.lkId] = i;
v.width = 1;
v.hoverWidth = 5;
if(v.state == "0"){
v.color = { color: "#780000",hover:"#780000",highlight:"#780000"};
}else if(v.state == "1"){
if(v.bandwidth==0){
v.color = { color: "#780000",hover:"#780000",highlight:"#780000"};
}else if(90<=v.useRate){
v.color = { color: "#ff0500",hover:"#ff0500",highlight:"#ff0500"};
}else if(70<=v.useRate){
v.color = { color: "#ff7100",hover:"#ff7100",highlight:"#ff7100"};
}else if(50<=v.useRate){
v.color = { color: "#ffff00",hover:"#ffff00",highlight:"#ffff00"};
}else{
v.color = { color: colors.l,hover:"#2CABE3",highlight:"#2CABE3"};
}
}
});
cur_data["edges"] = new DataSet(cur_data["edges"]);
cur_data["nodes"] = new DataSet(cur_data["nodes"]);
network = new Network(container, cur_data, options);
registerNetworkEvent();
moveTo();
// 计算
let initpos = JSON.parse(sessionStorage.getItem("initpos"));
let initid = sessionStorage.getItem("initid");
if (!initpos) {
return;
}
let initX = initpos.x;
let initY = initpos.y;
let newpos = network.getPositions([initid]);
if (!newpos[initid]) {
return;
}
let newX = newpos[initid].x;
let newY = newpos[initid].y;
sessionStorage.setItem("initpos", JSON.stringify(newpos[initid]));
let offsetX = initX - newX;
let offsetY = initY - newY;
if (offsetX != 0 || offsetY != 0) {
let T = JSON.parse(localStorage.getItem("viewposition"));
network.moveTo({
position: {
x: T.x - offsetX,
y: T.y - offsetY
}
});
localStorage.setItem(
"viewposition",
JSON.stringify({
x: T.x - offsetX,
y: T.y - offsetY
})
);
}
};
let moveTo = () => {
let scale = JSON.parse(localStorage.getItem("scale"));
let viewposition = JSON.parse(localStorage.getItem("viewposition"));
if (scale && viewposition) {
network.moveTo({
position: viewposition,
scale: scale
});
}
};
let saveviewpos = () => {
localStorage.setItem("scale", JSON.stringify(network.getScale()));
localStorage.setItem(
"viewposition",
JSON.stringify(network.getViewPosition())
);
};
let hidecontext = () => {
if (nodecontext) {
nodecontext.style.display = "none";
}
if (edgecontext) {
edgecontext.style.display = "none";
}
};
let update_nodes_status = () => {
if (cur_data["nodes"]) {
//正常光环的
if (bExcIds["1"].length > 0) {
bExcIds["1"].forEach(v => {
if (v.color.border == colors.n) {
v.color.border = colors.y;
} else if (v.color.border == colors.y) {
v.color.border = colors.n;
}
})
}
let obj = bExcIds["1"]
for(let i=0;i<obj.length;i++){
delete obj[i].axisX
delete obj[i].axisY
delete obj[i].x
delete obj[i].y
}
cur_data["nodes"].update(obj);
}
if (bExcIds["2"].length > 0) {
bExcIds["2"].forEach(v => {
if (v.color.border == colors.n) {
v.color.border = colors.d;
} else if (v.color.border == colors.d) {
v.color.border = colors.n;
}
});
let obj2 = bExcIds["2"]
for(let i=0;i<obj2.length;i++){
delete obj2[i].axisX
delete obj2[i].axisY
delete obj2[i].x
delete obj2[i].y
}
cur_data["nodes"].update(obj2);
}
};
let handleData = (data) =>{
let newData = {nodes:[],edges:[]}
if(data.retNodes.length !=0){
_store.commit('updateRetNode', data.retNodes)
data.retNodes.forEach((v,i)=>{
v.id = v.ip
v.x = v.axisX
v.y = v.axisY
v.label = v.nodeName
newData.nodes.push(v)
})
}
if(data.retLinks.length !=0){
data.retLinks.forEach((v,i)=>{
v.id = v.lkId
v.from = v.snode
v.to = v.dnode
newData.edges.push(v)
})
}
return newData
}
export default {
init: (ccClassName, data,that) => {
data = handleData(data)
vm = that
sessionStorage.setItem("graph", JSON.stringify(data));
container = document.querySelector(`#${ccClassName}`); //topu 容器
ori_data = data; //原始数据
cur_data = JSON.parse(JSON.stringify(ori_data)); //拷贝数据(使用)
//bexc 是否有异常子节点 0 没有光圈 1 正常光圈 2 有异常光圈 (光圈代表有子节点)
//status 节点状态 0 异常 1 正常 2 初始状态
//vpnStatus vpn部署状态 0 未纳管 1已纳管 2 已部署
cur_data.nodes.forEach((v, i) => {
MapNodeIdIndex[v.id] = i
v.color = {}
if(v["bexc"] == "1"){
v.color = { border:colors.y}
}else if(v["bexc"] == "2"){
v.color = { border:colors.d}
}else {
v.borderWidth = 0 //无光圈
}
if(v.status == '0'){
v.color.background = colors.r
}else {
if(v.status == '0'){
v.color.background = colors.q
}else if(v.status == '1'){
v.color.background = colors.b
}else if(v.status == '2'){
v.color.background = colors.g
}
}
bExcIds[v["bexc"]] &&
bExcIds[v["bexc"]].push(v);
});
//遍历 线
//state 0 正常 1异常
cur_data.edges.forEach((v, i) => {
MapEdgeIdIndex[v.lkId] = i;
v.width = 1;
v.hoverWidth = 5;
if(v.state == "0"){
v.color = { color: "#780000",hover:"#780000",highlight:"#780000"};
}
if(v.state == "1"){
if(v.bandwidth==0){
v.color = { color: "#780000",hover:"#780000",highlight:"#780000"};
}else if(90<=v.useRate){
v.color = { color: "#ff0500",hover:"#ff0500",highlight:"#ff0500"};
}else if(70<=v.useRate){
v.color = { color: "#ff7100",hover:"#ff7100",highlight:"#ff7100"};
}else if(50<=v.useRate){
v.color = { color: "#ffff00",hover:"#ffff00",highlight:"#ffff00"};
}else{
v.color = { color: colors.l,hover:"#2CABE3",highlight:"#2CABE3"};
}
// v.bandWidth
// v.from
// v.to
}
});
},
getnetwork: () => {
return network;
},
destroy: () => {
network && (network.destroy(), (network = null));
container && (container.innerHTML = "");
int = clearInterval(int);
ori_data = null;
cur_data = {};
bExcIds = { "0": [], "1": [], "2": [] };
int = 0;
nodecontext = null;
edgecontext = null;
MapNodeIdIndex = {};
MapEdgeIdIndex = {};
localStorage.removeItem("cfg");
localStorage.removeItem('scale');
localStorage.removeItem('viewposition');
},
cgraph: (fn, S, __fn) => {
//改变数据类型
cur_data["edges"] = new DataSet(cur_data["edges"]);
cur_data["nodes"] = new DataSet(cur_data["nodes"]);
//初始绘制图表
if (!container) return;
network = new Network(container, cur_data, options);
registerNetworkEvent();
if (!S) {
//计算位置
let initpos = network.getPositions();
let initid = Object.keys(initpos)[0];
sessionStorage.setItem("initpos", JSON.stringify(initpos[initid]));
sessionStorage.setItem("initid", initid);
}
},
redraw:redraw
};