vue+antvG6实现网络拓扑编辑功能

实现方法

1.参照案例搭建框架

参考链接:https://github.com/keman5/welabx-g6

2.造轮子

1.自定义节点

实现代码:

G6.registerNode(
            "card-node",
            {
                drawShape: function drawShape(cfg, group) {
                    const shape = group.addShape("rect", {
                        attrs: {
                            x: 0,
                            y: 0,
                            width: 80,
                            height: 80,
                        },
                        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                        name: "main-box",
                        draggable: true,
                    });
                    // left icon
                    group.addShape("image", {
                        attrs: {
                            x: 0,
                            y: 0,
                            height: 80,
                            width: 80,
                            img: cfg.img,
                        },
                        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                        name: "node-icon",
                    });
                    group.addShape("rect", {
                        attrs: {
                            x: 0,
                            y: 0,
                            width: 80,
                            height: 80,
                            fill: "blue",
                            opacity: 0,
                        },
                        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                        name: "title-box",
                        draggable: true,
                    });
                    if (cfg.number > 0) {
                        group.addShape("circle", {
                            attrs: {
                                y: 80,
                                x: 80,
                                r: 15,
                                stroke: "red",
                                fill: "red",
                                cursor: "pointer",
                            },
                            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                            name: "buaiji",
                        });
                        let number = 0;
                        let x = 0;
                        if (cfg.number > 0 && cfg.number < 10) {
                            number = cfg.number;
                            x = 76;
                        } else if (cfg.number > 9 && cfg.number < 100) {
                            number = cfg.number;
                            x = 73;
                        } else if (cfg.number > 99) {
                            number = "99+";
                            x = 70;
                        }
                        group.addShape("text", {
                            attrs: {
                                textBaseline: "top",
                                y: 75,
                                x: x,
                                lineHeight: 20,
                                text: number,
                                fill: "#fff",
                                fontWeight: 1000,
                                cursor: "pointer",
                            },
                            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                            name: "buaijishuzi",
                        });
                    }
                    // title text
                    group.addShape("text", {
                        attrs: {
                            textBaseline: "top",
                            y: -15,
                            x: 0,
                            lineHeight: 20,
                            text: cfg.textlabel,
                            fill: "#fff",
                            fontWeight: 1000,
                        },
                        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                        name: "title",
                    });

                    // The content list
                    if (cfg.panels.length > 0) {
                        cfg.panels.forEach((item, index) => {
                            // name text
                            group.addShape("text", {
                                attrs: {
                                    textBaseline: "top",
                                    y: 90 + index * cfg.nodeFontSize,
                                    x: 0,
                                    lineHeight: 20,
                                    fontSize: cfg.nodeFontSize,
                                    text: item.start + ":" + item.middle + item.end,
                                    fill: cfg.textcolor,
                                    fontWeight: 1000,
                                },
                                // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
                                name: `index-title-${index}`,
                            });
                        });
                    }

                    return shape;
                },
            },
            "single-node"
        );

2.自定义动画

官方提供四种,这里只展示其中一个

G6.registerEdge(
            "lineline-growth",
            {
                afterDraw(cfg, group) {
                    const shape = group.get("children")[0];
                    const length = shape.getTotalLength();
                    shape.animate(
                        (ratio) => {
                            // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
                            const startLen = ratio * length;
                            // Calculate the lineDash
                            const cfg = {
                                lineDash: [startLen, length - startLen],
                            };
                            return cfg;
                        },
                        {
                            repeat: true, // Whether executes the animation repeatly
                            duration: Number(cfg.dashtime) * 1000, // the duration for executing once
                        }
                    );
                },
            },
            "line" // extend the built-in edge 'cubic'
        );

3.边上的监控项

由于G6自带的边上的文字不支持换行,而且无法拖拽

实现思路如下

1.创建一个透明的自定义节点

2.给节点配置监控项

3.将节点拖拽到边附近

提示:一定要给一个填充色,然后透明度设置为0,不然无法选中这个节点

3.编辑界面-所有属性可配置(按需要对照官网拼数据即可)

这些代码比较简单,就不贴了

节点配置

边配置

监控项配置

组配置

4.存储

将图数据转换为json存储在数据库

最后