vue2-x6-dag自定义vue组件节点

news2024/11/29 10:42:37
效果如图

在这里插入图片描述

官方案例

人工智能建模 DAG 图
vue2中自定义节点

代码

1.dag.json

[
    {
      "id": "1",
      "shape": "dag-node",
      "x": 290,
      "y": 110,
      "data": {
        "label": "读数据",
        "status": "success"
      },
      "ports": [
        {
          "id": "1-1",
          "group": "bottom"
        }
      ]
    },
    {
      "id": "2",
      "shape": "dag-node",
      "x": 290,
      "y": 225,
      "data": {
        "label": "逻辑回归",
        "status": "success"
      },
      "ports": [
        {
          "id": "2-1",
          "group": "top"
        },
        {
          "id": "2-2",
          "group": "bottom"
        },
        {
          "id": "2-3",
          "group": "bottom"
        }
      ]
    },
    {
      "id": "3",
      "shape": "dag-node",
      "x": 170,
      "y": 350,
      "data": {
        "label": "模型预测",
        "status": "success"
      },
      "ports": [
        {
          "id": "3-1",
          "group": "top"
        },
        {
          "id": "3-2",
          "group": "bottom"
        }
      ]
    },
    {
      "id": "4",
      "shape": "dag-node",
      "x": 450,
      "y": 350,
      "data": {
        "label": "读取参数",
        "status": "success"
      },
      "ports": [
        {
          "id": "4-1",
          "group": "top"
        },
        {
          "id": "4-2",
          "group": "bottom"
        }
      ]
    },
    {
      "id": "5",
      "shape": "dag-edge",
      "source": {
        "cell": "1",
        "port": "1-1"
      },
      "target": {
        "cell": "2",
        "port": "2-1"
      },
      "zIndex": 0
    },
    {
      "id": "6",
      "shape": "dag-edge",
      "source": {
        "cell": "2",
        "port": "2-2"
      },
      "target": {
        "cell": "3",
        "port": "3-1"
      },
      "zIndex": 0
    },
    {
      "id": "7",
      "shape": "dag-edge",
      "source": {
        "cell": "2",
        "port": "2-3"
      },
      "target": {
        "cell": "4",
        "port": "4-1"
      },
      "zIndex": 0
    }
  ]

2.index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>vue2-x6-DAG自定义vue组件节点</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@antv/x6@1.34.14/dist/x6.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@antv/x6-vue-shape@1.1.4/dist/x6-vue-shape.js"></script>
    <style>
        .node {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: #fff;
            border: 1px solid #c2c8d5;
            border-left: 4px solid #5F95FF;
            border-radius: 4px;
            box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
        }

        .node img {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            margin-left: 8px;
        }

        .node .label {
            display: inline-block;
            flex-shrink: 0;
            width: 104px;
            margin-left: 8px;
            color: #666;
            font-size: 12px;
        }

        .node .status {
            flex-shrink: 0;
        }

        .node.success {
            border-left: 4px solid #52c41a;
        }

        .node.failed {
            border-left: 4px solid #ff4d4f;
        }

        .node.running .status img {
            animation: spin 1s linear infinite;
        }

        .x6-node-selected .node {
            border-color: #1890ff;
            border-radius: 2px;
            box-shadow: 0 0 0 4px #d4e8fe;
        }

        .x6-node-selected .node.success {
            border-color: #52c41a;
            border-radius: 2px;
            box-shadow: 0 0 0 4px #ccecc0;
        }

        .x6-node-selected .node.failed {
            border-color: #ff4d4f;
            border-radius: 2px;
            box-shadow: 0 0 0 4px #fedcdc;
        }

        .x6-edge:hover path:nth-child(2) {
            stroke: #1890ff;
            stroke-width: 1px;
        }

        .x6-edge-selected path:nth-child(2) {
            stroke: #1890ff;
            stroke-width: 1.5px !important;
        }

        @keyframes running-line {
            to {
                stroke-dashoffset: -1000;
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="workflow">
        <h5>注意事项：</h5>
        <h6>1.必须启动前端服务访问，使用hbuilderx运行内置浏览器或者vscode安装Live Server插件，打开文件右键，选择“open with five server”即可，否则跨域！！！</h6>
        <h6>2.cdn或本地引入方式x6-vue-shape版本必须和x6同一个大版本！！！</h6>
        <button @click="add">外部点击Add第一个元素num</button>
        <div id="container"></div>
    </div>
</body>

</html>
<script>

    // 自定义vue组件节点
    const nodeBox = Vue.component('node-box', {
        template: `
            <div :class="['node', status]"  @click="nodeDrag()">
                <img :src="image.logo" />
                <span class="label">{{label}}内部Add:{{ num }}</span>
                <span class="status">
                    <img v-if="status === 'success'" :src="image.success" />
                    <img v-if="status === 'failed'" :src="image.failed" />
                    <img v-if="status === 'running'" :src="image.running" />
                </span>
            </div>
        `,
        inject: ["getGraph", "getNode"],
        data() {
            return {
                // 自定义测试数字
                num: 0,
                // 自定义节点名称
                label: '',
                // 自定义节点状态
                status: '',
                // 状态数据icon
                image: {
                    logo: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
                    success:
                        'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*6l60T6h8TTQAAAAAAAAAAAAAARQnAQ',
                    failed:
                        'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SEISQ6My-HoAAAAAAAAAAAAAARQnAQ',
                    running:
                        'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*t8fURKfgSOgAAAAAAAAAAAAAARQnAQ',
                }
            }
        },
        mounted() {
            const node = this.getNode();
            // 监听数据改变事件，通过外部控制节点数据
            node.on("change:data", ({ current }) => {
                this.num = current.num;
                this.label = current.label;
                this.status = current.status;
            });

        },
        methods: {
            // 内部控制节点数据,节点拖动后触发，拿到x,y数据回传后端
            nodeDrag() {
                const node = this.getNode();
                const { num } = node.getData();
                node.setData({
                    num: num + 1,
                });
                console.log('节点坐标:', node.position())
            },
        },
    })
    // 父页面
    const workflow = new Vue({
        el: '#workflow',
        data() {
            return {
                graph: null,
            };
        },
        mounted() {
            // 使用 CDN 引入时暴露了 X6 全局变量
            const { Graph, Path } = X6
            // 自定义vue节点
            Graph.registerNode("dag-node", {
                inherit: "vue-shape",
                x: 200,
                y: 150,
                width: 180,
                height: 36,
                component: {
                    template: `<node-box />`,
                    components: {
                        nodeBox,
                    },
                },
                ports: {
                    groups: {
                        top: {
                            position: 'top',
                            attrs: {
                                circle: {
                                    r: 4,
                                    magnet: true,
                                    stroke: '#C2C8D5',
                                    strokeWidth: 1,
                                    fill: '#fff',
                                },
                            },
                        },
                        bottom: {
                            position: 'bottom',
                            attrs: {
                                circle: {
                                    r: 4,
                                    magnet: true,
                                    stroke: '#C2C8D5',
                                    strokeWidth: 1,
                                    fill: '#fff',
                                },
                            },
                        },
                    },
                },
            });
            // 注册连接线
            Graph.registerEdge(
                'dag-edge',
                {
                    inherit: 'edge',
                    attrs: {
                        line: {
                            stroke: '#C2C8D5',
                            strokeWidth: 1,
                            targetMarker: null,
                        },
                    },
                },
                true,
            )
            // 注册连接线弧度
            Graph.registerConnector(
                'algo-connector',
                (s, e) => {
                    const offset = 4
                    const deltaY = Math.abs(e.y - s.y)
                    const control = Math.floor((deltaY / 3) * 2)

                    const v1 = { x: s.x, y: s.y + offset + control }
                    const v2 = { x: e.x, y: e.y - offset - control }

                    return Path.normalize(
                        `M ${s.x} ${s.y}
                        L ${s.x} ${s.y + offset}
                        C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${e.x} ${e.y - offset}
                        L ${e.x} ${e.y}
                        `,
                    )
                },
                true,
            )
            // 定义画布
            const graph = new Graph({
                container: document.getElementById('container'),
                // 对齐线
                snapline: true,
                width: 800,
                height: 600,
                panning: {
                    enabled: true,
                    eventTypes: ['leftMouseDown', 'mouseWheel'],
                },
                mousewheel: {
                    enabled: true,
                    modifiers: 'ctrl',
                    factor: 1.1,
                    maxScale: 1.5,
                    minScale: 0.5,
                },
                highlighting: {
                    magnetAdsorbed: {
                        name: 'stroke',
                        args: {
                            attrs: {
                                fill: '#fff',
                                stroke: '#31d0c6',
                                strokeWidth: 4,
                            },
                        },
                    },
                },
                connecting: {
                    snap: true,
                    allowBlank: false,
                    allowLoop: false,
                    highlight: true,
                    connector: 'algo-connector',
                    connectionPoint: 'anchor',
                    anchor: 'center',
                    validateMagnet({ magnet }) {
                        return magnet.getAttribute('port-group') !== 'top'
                    },
                    createEdge() {
                        return graph.createEdge({
                            shape: 'dag-edge',
                            attrs: {
                                line: {
                                    strokeDasharray: '5 5',
                                },
                            },
                            zIndex: -1,
                        })
                    },
                },
                selecting: {
                    enabled: true,
                    multiple: true,
                    rubberEdge: true,
                    rubberNode: true,
                    modifiers: 'shift',
                    rubberband: true,
                },
            });
            this.graph = graph
            // 连接线，连接完成事件
            graph.on('edge:connected', ({ edge }) => {
                edge.attr({
                    line: {
                        strokeDasharray: '',
                    },
                })
            })
            // 监听子节点数据改变
            graph.on('node:change:data', ({ node }) => {
                const edges = graph.getIncomingEdges(node)
                const { status } = node.getData()
                edges?.forEach((edge) => {
                    if (status === 'running') {
                        edge.attr('line/strokeDasharray', 5)
                        edge.attr('line/style/animation', 'running-line 30s infinite linear')
                    } else {
                        edge.attr('line/strokeDasharray', '')
                        edge.attr('line/style/animation', '')
                    }
                })
            })
            // 数据状态
            const nodeStatusList = [
                [
                    {
                        id: '1',
                        status: 'running',
                    },
                    {
                        id: '2',
                        status: 'default',
                    },
                    {
                        id: '3',
                        status: 'default',
                    },
                    {
                        id: '4',
                        status: 'default',
                    },
                ],
                [
                    {
                        id: '1',
                        status: 'success',
                    },
                    {
                        id: '2',
                        status: 'running',
                    },
                    {
                        id: '3',
                        status: 'default',
                    },
                    {
                        id: '4',
                        status: 'default',
                    },
                ],
                [
                    {
                        id: '1',
                        status: 'success',
                    },
                    {
                        id: '2',
                        status: 'success',
                    },
                    {
                        id: '3',
                        status: 'running',
                    },
                    {
                        id: '4',
                        status: 'running',
                    },
                ],
                [
                    {
                        id: '1',
                        status: 'success',
                    },
                    {
                        id: '2',
                        status: 'success',
                    },
                    {
                        id: '3',
                        status: 'success',
                    },
                    {
                        id: '4',
                        status: 'failed',
                    },
                ],
            ]

            // 初始化节点/边
            const init = (data) => {
                const cells = []
                data.forEach((item) => {
                    if (item.shape === 'dag-node') {
                        cells.push(graph.createNode(item))
                    } else {
                        cells.push(graph.createEdge(item))
                    }
                })
                graph.resetCells(cells)
            }

            // 显示节点状态
            const showNodeStatus = async (statusList) => {
                const status = statusList.shift()
                status?.forEach((item) => {
                    const { id, status } = item
                    const node = graph.getCellById(id)
                    const data = node.getData()
                    node.setData({
                        ...data,
                        status: status,
                        num: 0,
                    })
                })
                setTimeout(() => {
                    showNodeStatus(statusList)
                }, 3000)
            }
            // 模拟数据
            fetch('./dag.json')
                .then((response) => response.json())
                .then((data) => {
                    // 加载节点
                    init(data)
                    // 节点状态
                    showNodeStatus(nodeStatusList)
                    // 将画布内容中心与视口中心对齐
                    graph.centerContent()
                })


        },
        methods: {
            // 控制子组件内部变量
            add() {
                const nodes = this.graph.getNodes();
                console.log(nodes)
                if (nodes.length) {
                    nodes.forEach((node) => {
                        // 1 为该组件id，正式环境根据传参id来控制具体某个元素内部
                        if (node.id == 1) {
                            const { num } = node.getData();
                            node.setData({
                                num: num + 1,
                            });
                        }
                    });
                }
            },
        }
    });
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1008136.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023CVPR：图像恢复的又一力作

2023CVPR：图像恢复的又一力作

今天要分享的论文是2023CVPR《Efficient and Explicit Modelling of Image Hierarchies for Image Restoration》&#xff0c;图像恢复领域的又一力作&#xff0c;提供了新的发现&#xff0c;给出了新的解决方案 代码 https://github.com/ofsoundof/GRL-Image-Restoration 问…
阅读更多...
C语言指针快速入门

C语言指针快速入门

指针的基本介绍 简单的说指针用于表示地址&#xff0c;存放的是一个地址 获取指针的地址 //指针的入门 #include <stdio.h>int main() {int num 1;//num的地址是多少//说明1&#xff1a;如果要输出一个变量的地址使用的格式是%p//说明2&#xff1a;&num 表示取出n…
阅读更多...
百度SEO优化攻略（提高网站排名的必修课）

百度SEO优化攻略（提高网站排名的必修课）

百度SEO优化策略介绍&#xff1a; 在百度搜索引擎中&#xff0c;网站的排名越靠前&#xff0c;就越能吸引更多的流量和用户。要想让网站排名更高&#xff0c;就必须进行SEO优化。百度SEO优化是一个长期的过程&#xff0c;需要不断调整和优化。下面介绍5个优化方法&#xff0c;…
阅读更多...
C++ - 二叉树OJ题

C++ - 二叉树OJ题

二叉树的两种层序遍历 在写之前&#xff0c;我们先来看两种二叉树的层序遍历&#xff1a; 1.给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 输入&#xff1a;root [3,9,20,null,null…
阅读更多...
靠差异化上了短剧“牌桌”后，百度准备怎么做生态？

靠差异化上了短剧“牌桌”后，百度准备怎么做生态？

从最初的野蛮生长到如今的百花齐放&#xff0c;短剧市场已然进入了质量与创意的竞争。 据《中国网络视听发展研究报告》数据显示&#xff0c;行业内重点网络微短剧上线数量从2021年的58部&#xff0c;飙升到2022年的172部。相比起前几年处于风口时的爆发式增长&#xff0c;“分…
阅读更多...
广读论文核心思路汇总笔记 （一些有意思的论文and论文在研究的一些有意思的问题or场景应用）

广读论文核心思路汇总笔记 （一些有意思的论文and论文在研究的一些有意思的问题or场景应用）

思路可借鉴和学习 On the Generalization of Multi-modal Contrastive Learning CoRR, ICML&#xff08;2023&#xff09; 摘要&#xff1a;多模态对比学习&#xff08;MMCL&#xff09;最近引起了广泛关注&#xff0c;因为它在视觉任务上的表现优于其他方法&#xff0c;这些方…
阅读更多...
ASP.NET dotnet 3.5 实验室信息管理系统LIMS源码

ASP.NET dotnet 3.5 实验室信息管理系统LIMS源码

技术架构&#xff1a;ASP.NET dotnet 3.5 LIMS作为一个信息管理系统&#xff0c;它有着和ERP、MIS之类管理软件的共性&#xff0c;如它是通过现代管理模式与计算机管理信息系统支持企业或单位合理、系统地管理经营与生产&#xff0c;最大限度地发挥现有设备、资源、人、技术的…
阅读更多...
Apifox 关于token的使用方式

Apifox 关于token的使用方式

前言&#xff0c;关于token的使用&#xff0c;仅做了简单的demo测试token效果。 1.手动登录获取token 顾名思义&#xff0c;因为只有登录之后才有token的信息&#xff0c;所以在调用其他接口前需要拥有token才能访问。 操作步骤 1)添加环境变量、全局参数 这里拿测试环境举…
阅读更多...
vue基础 组合式和响应式 模板语法 计算属性

vue基础 组合式和响应式 模板语法 计算属性

模板语法 | Vue.js 根据文档 组合式和响应式 响应式 响应api单网页实例式 组合式 组合式api单网页实例 模板语法 文本插值 {{msg}} 最基本的数据绑定形式是文本插值&#xff0c;它使用的是“Mustache”语法 (即双大括号)&#xff1a; <script setup> import {onMo…
阅读更多...
Promethues(五)查询-PromQL 语言-保证易懂好学

Promethues(五)查询-PromQL 语言-保证易懂好学

一、介绍 普罗米修斯提供了一种称为PromQL&#xff08;普罗米修斯查询语言&#xff09;的函数式查询语言&#xff0c;允许用户实时选择和聚合时间序列数据。 表达式的结果可以显示为图形&#xff0c;在 Prometheus 的表达式浏览器中显示为表格数据&#xff0c;也可以通过 HTT…
阅读更多...
EMQX的docker部署与使用(mqtt)

EMQX的docker部署与使用(mqtt)

1&#xff1a;先创建一个挂载emqx的目录 2&#xff1a;docker拉去emqx docker pull emqx/emqx:latest2-1&#xff1a;先启动一次eqmx&#xff0c;然后停止&#xff0c;删除容器 docker run -d --name emqx --privilegedtrue -p 1883:1883 -p 8883:8883 -p 8083:8083 -p 8084…
阅读更多...
Spring Bean生命周期图扩展接口介绍spring的简化配置

Spring Bean生命周期图扩展接口介绍spring的简化配置

目录 1. 生命周期简图 2. 扩展接口介绍 2.1 Aware接口 2.2 BeanPostProcessor接口 2.3 InitializingBean 2.4 DisposableBean 2.5 BeanFactoryPostProcessor接口 3. spring的简化配置 3.1 项目搭建 3.2 Bean的配置和值注入 3.3 AOP的示例 1. 生命周期简图 2. 扩展接…
阅读更多...
Mobileye CEO来华：只有能控制住成本的公司，才能活下来

Mobileye CEO来华：只有能控制住成本的公司，才能活下来

‍作者|德新 编辑|王博 上午9点近一刻&#xff0c;Mobileye CEO Amnon Shuashua步入酒店的会议室。由于Amnon本人是以色列希伯来大学的计算机科学教授&#xff0c;大部分人更习惯称他为「教授」。 时近以色列的新年&#xff0c;这趟教授的中国之行安排十分紧凑。 他率领了一…
阅读更多...
IP地址在各行业中的应用场景

IP地址在各行业中的应用场景

1、互联网交易、支付反欺诈 通过分析IP应用场景、IP地址的出现位置的离散程度、分布情况综合用户行为及时间判断IP地址风险程度&#xff0c;过滤机器流量。在登陆、交易、支付等多个环节结合多重验证等技术减少欺诈行为。 2、P2P平台反“羊毛党” 通过分析IP应用场景、位置信…
阅读更多...
得帆云“智改数转，非同帆响”-AIGC+低代码PaaS平台系列白皮书，正式发布！

得帆云“智改数转，非同帆响”-AIGC+低代码PaaS平台系列白皮书，正式发布！

5月16日下午&#xff0c;由上海得帆信息技术有限公司编写&#xff0c;上海市工业互联网协会指导的以“智改数转&#xff0c;非同帆响”为主题的《得帆云 AIGC低代码PaaS平台系列白皮书》正式在徐汇西岸国际人工智能中心发布。 本次发布会受到了上海市徐汇区政府、各大媒体和业内…
阅读更多...
c刷题(四）

c刷题(四）

获得月份天数 获得月份天数_牛客题霸_牛客网 这道题可以用switch case语句解&#xff0c;不过这道题更简单的方法是数组&#xff0c;关键点在于判断是否为闰年。 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include<assert.h> int year_run(int n) …
阅读更多...
Go 异常处理

Go 异常处理

代码在执行的过程中可能因为一些逻辑上的问题而出现错误 func test1(a, b int) int {result : a / breturn result } func main() {resut : test1(10, 0)fmt.Println(resut) }panic: runtime error: integer divide by zero goroutine 1 [running]: …
阅读更多...
【数据库】数据库系统概论（一）— 概念

【数据库】数据库系统概论（一）— 概念

theme: qklhk-chocolate 基本概念 数据 描述事物的符号记录称为数据。 记录时是计算机中表示和存储数据的一种格式或一种方法。 数据库 数据库是长期存储在计算机内、有组织、可共享的大量数据的集合。 数据库中的数据按一定的数据模型组织、描述和储存。具有较小冗余度…
阅读更多...
我的创作纪念日（第1024天）

我的创作纪念日（第1024天）

机缘 当我开始在CSDN上创作时&#xff0c;我的初心主要是出于对技术的热爱和对知识分享的渴望。我一直以来都对计算机科学和技术领域充满兴趣&#xff0c;并且热衷于学习和探索新的技术知识和应用。通过在CSDN上发表文章和分享我的经验和见解&#xff0c;我希望能够与更多的技…
阅读更多...
基于webman的CMS，企业官网通用PHP后台管理系统

基于webman的CMS，企业官网通用PHP后台管理系统

2023年9月11日10:47:00 仓库地址&#xff1a; https://gitee.com/open-php/zx-webman-website 还有laravelscui的版本目前还未开源&#xff0c;电商laravel版本差不多&#xff0c;后续在移植webman 算是比较标准的phpvue的项目 CMS&#xff0c;企业官网通用PHP后台管理系统 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023