Use G6 to complete the topology map, highlight, add new nodes, re-render, and destroy the canvas
<template>
<div>
<div class="box">
<button type="text" @click="add">新增</button>
<div id="dd"></div>
</div>
</div>
</template>
<script>
import G6 from "@antv/g6";
let textColor = "#59FDFC";
export default {
data() {
return {
i: 4,
len: 40,
devicetopologyChart: "",
deviceTopologyData: {
id: "工业系统",
children: [
{
id: "工厂1",
children: [
{
id: "产线1", value: "1" },
{
id: "产线2", value: "2" },
{
id: "产线3", value: "3" },
],
},
],
},
};
},
created() {
},
methods: {
add() {
let obj = {
id: "产线" + this.i,
value: "1维稳任务而",
};
this.i++;
// 销毁画布
this.devicetopologyChart.destroy();
this.deviceTopologyData.children[0].children.push(obj);
// 重新渲染
this.deviceInitTopology("dd");
},
deviceInitTopology(val) {
let dataID = [];
// 获取渲染数据
let data = this.deviceTopologyData;
const width = document.getElementById(val).scrollWidth;
const height = document.getElementById(val).scrollHeight || 500;
const graph = new G6.TreeGraph({
container: val,
width,
height,
modes: {
default: [
{
type: "collapse-expand",
onChange: function onChange(item, collapsed) {
const data = item.get("model").data;
data.collapsed = collapsed;
return true;
},
},
// 'drag-canvas',
"zoom-canvas",
],
},
defaultNode: {
size: 26,
anchorPoints: [
[0, 0.5],
[1, 0.5],
],
style: {
fill: "#696969",
stroke: "#5B8FF9",
},
},
defaultEdge: {
type: "cubic-horizontal",
style: {
stroke: "#A3B1BF",
},
},
nodeStateStyles: {
selected: {
fill: textColor,
},
online: {
fill: "#00FF00",
},
alarm: {
fill: "#FF0000",
},
warn: {
fill: "#FFFF00",
},
},
layout: {
type: "mindmap",
direction: "H",
getId: function getId(d) {
// console.log(d.id);
dataID.push(d.id);
return d.id;
},
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 12;
},
getHGap: function getHGap() {
return 50;
},
getSide: () => {
// 子节点往右边对齐
return "right";
},
},
});
graph.node(function (node) {
return {
label: node.id,
labelCfg: {
offset: 10,
position:
node.children && node.children.length > 0 ? "left" : "right",
style: {
fill: textColor,
},
},
};
});
graph.on("node:click", function (event) {
const {
item } = event;
// console.log(item._cfg)
// console.log(dataID,1)
dataID.map((key, index) => {
if (key !== item) {
graph.setItemState(key, "alarm", false);
}
});
graph.setItemState(item, "alarm", true);
graph.setItemState("产线3", "online", true);
});
this.devicetopologyChart = graph;
// data是渲染数据
graph.data(data);
graph.render();
graph.fitView();
// 让产线3一直为online这个颜色
this.colorChange();
},
colorChange() {
this.devicetopologyChart.setItemState("产线3", "online", true);
},
},
mounted() {
this.deviceInitTopology("dd");
},
};
</script>
<style>
#dd {
width: 500px;
height: 500px;
margin: 0 auto;
}
.box {
width: 500px;
height: auto;
margin: 0 auto;
}
</style>