最近通过G6画图,需要将iview里面的控件编排到g6的图标中
第一步:
注册dom节点组件
通过v-show 将 控件隐藏到界面内,
通过document.getElementById(“btn”)获取控件innerHTML
将html变量赋值给组件的html属性,
第二步:
设置graph的renderer属性为"svg"
第三步:
节点绑定shape 类型为自己注册的节点
console.log(document.getElementById("btn"));
G6.registerNode("switch-node", {
draw: (cfg, group) => {
const stroke = cfg.style ? cfg.style.stroke || "#5B8FF9" : "#5B8FF9";
const shape = group.addShape("dom", {
attrs: {
width: 50,
height: 25,
html: document.getElementById("btn").innerHTML
},
draggable: true
});
return shape;
}
});
<template>
<div id="mountNode">
<div id="btn" v-show="false">
<i-switch ref="btn" />
</div>
</div>
</template>
<script>
import G6 from "@antv/g6";
export default {
name: "liquid_level_warning_index",
data() {
return {
nodeDatas: {
hydraulicLiftingDevice: 0
},
nodesData: [
{
switch: 1,
name: "S 液压升降装置",
level: "down"
},
{
switch: 1,
name: "1#首侧推",
level: "down"
},
{
switch: 1,
name: "G1",
level: "up"
},
{
switch: 1,
name: "1#舵机",
level: "down"
},
{
switch: 1,
name: "T1",
level: "down"
},
{
switch: 1,
name: "G2",
level: "up"
},
{
switch: 1,
name: "T2",
level: "down"
},
{
switch: 1,
name: "2#舵机",
level: "down"
},
{
switch: 1,
name: "G3",
level: "up"
},
{
switch: 1,
name: "2#首侧推",
level: "down"
},
{
switch: 1,
name: "岸电",
level: "null"
}
],
nodes: [
{
id: -3,
x: 100,
y: 200,
size: [3]
}
],
edges: []
};
},
created() {
//不能在created方法中初始化
//this.initG6()
},
mounted() {
this.calData();
this.initG6();
},
methods: {
calData() {
for (var i = 0; i < this.nodesData.length; i++) {
this.edges.push({ target: (i * 3).toString(), source: ((i - 1) * 3).toString()});
this.edges.push({ target: (i * 3 + 1).toString(), source: (i * 3).toString()});
this.edges.push({ target: (i * 3 + 2).toString(), source: (i * 3 + 1).toString()});
if (this.nodesData[i].level === "down") {
this.nodes.push({
id: (i * 3).toString(),
x: i * 90 + 150,
y: 200,
size: [3]
});
this.nodes.push({
id: (i * 3 + 1).toString(),
x: i * 90 + 150,
y: 300,
type: "switch-node"
});
this.nodes.push({
id: (i * 3 + 2).toString(),
x: i * 90 + 150,
y: 400,
type: "Circle",
size: [30, 30],
label: this.nodesData[i].name
});
/* {
target: "2",
source: "1"
},
{
target: "3",
source: "2"
},
{
target: "4",
source: "3"
},*/
}
if (this.nodesData[i].level === "up") {
this.nodes.push({
id: i * 3,
x: i * 50 + 150,
y: 200,
size: [3]
});
this.nodes.push({
id: i * 3 + 1,
x: i * 50 + 150,
y: 120,
type: "switch-node"
});
this.nodes.push({
id: i * 3 + 2,
x: i * 50 + 150,
y: 50,
type: "Circle",
size: [30, 30],
label: this.nodesData[i].name
});
}
if (this.nodesData[i].level === "null") {
this.nodes.push({
id: i * 3,
x: i * 90 + 150,
y: 200,
size: [3]
});
this.nodes.push({
id: i * 3 + 1,
x: (i + 1) * 90 + 150,
y: 200,
type: "switch-node"
});
this.nodes.push({
id: i * 3 + 2,
x: (i + 3) * 90 + 150,
y: 200,
type: "Circle",
size: [40, 40],
label: this.nodesData[i].name
});
}
}
console.log(this.edges);
console.log(this.nodes);
},
initG6() {
const data = {
nodes: this.nodes,
edges: this.edges
};
console.log(document.getElementById("btn"));
G6.registerNode("switch-node", {
draw: (cfg, group) => {
const stroke = cfg.style ? cfg.style.stroke || "#5B8FF9" : "#5B8FF9";
const shape = group.addShape("dom", {
attrs: {
width: 50,
height: 25,
html: document.getElementById("btn").innerHTML
},
draggable: true
});
return shape;
}
});
const graph = new G6.Graph({
container: "mountNode",
width: window.innerWidth,
height: window.innerHeight,
renderer: "svg",
defaultEdge: {
style: {
stroke: "#e2e2e2"
}
}
});
graph.read(data);
}
}
};
</script>