狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

Vue Flow 是Vue下流程繪制庫。安裝：

npm i --save @vue-flow/core 安裝核心組件

npm i --save @vue-flow/background 安裝背景組件

npm i --save @vue-flow/controls 安裝控件（放大，縮小等）組件

npm i --save @vue-flow/minimap 安裝縮略圖組件

引入組件：

import { Panel, PanelPosition, VueFlow, isNode, useVueFlow } from '@vue-flow/core'

import { Background } from '@vue-flow/background'

import { Controls } from '@vue-flow/controls'

import { MiniMap } from '@vue-flow/minimap'

引入樣式：

@import '@vue-flow/core/dist/style.css';

@import '@vue-flow/core/dist/theme-default.css';

<script setup>

import {TreeCanvas, Canvas} from 'butterfly-dag';

const root = document.getElementById('chart')

const canvas = new Canvas({

  root: root,

  disLinkable: true, // 可刪除連線

  linkable: true, // 可連線

  draggable: true, // 可拖動

  zoomable: true, // 可放大

  moveable: true, // 可平移

  theme: {

    edge: {

      shapeType: "AdvancedBezier",

      arrow: true,

      arrowPosition: 0.5, //箭頭位置(0 ~ 1)

      arrowOffset: 0.0, //箭頭偏移

    },

  },

});

canvas.draw(mockData, () => {

  //mockData為從mock中獲取的數據

  canvas.setGridMode(true, {

    isAdsorb: false, // 是否自動吸附,默認關閉

    theme: {

      shapeType: "circle", // 展示的類型，支持line & circle

      gap: 20, // 網格間隙

      background: "rgba(0, 0, 0, 0.65)", // 網格背景顏色

      circleRadiu: 1.5, // 圓點半徑

      circleColor: "rgba(255, 255, 255, 0.8)", // 圓點顏色

    },

  });

});

</script>

<template>

  <div id="chart"></div>

</template>

<template>

  /* 圖的畫布容器 */

  <div id="mountNode"></div>

</template>

<script setup>

import G6 from '@antv/g6';

// 定義數據源

const data = {

  // 點集

  nodes: [

    {

      id: 'node1',

      x: 100,

      y: 200,

    },

    {

      id: 'node2',

      x: 300,

      y: 200,

    },

  ],

  // 邊集

  edges: [

    // 表示一條從 node1 節點連接到 node2 節點的邊

    {

      source: 'node1',

      target: 'node2',

    },

  ],

};

// 創建 G6 圖實例

const graph = new G6.Graph({

  container: 'mountNode', // 指定圖畫布的容器 id

  // 畫布寬高

  width: 800,

  height: 500,

});

// 讀取數據

graph.data(data);

// 渲染圖

graph.render();

</script>

<template>

  <div ref="container">

    <div ref="sourceElement">Source</div>

    <div ref="targetElement">Target</div>

  </div>

</template>

<script setup>

import { ref, onMounted } from 'vue';

import { jsPlumb } from 'jsplumb';

const container = ref<HTMLElement | null>(null);

const sourceElement = ref<HTMLElement | null>(null);

const targetElement = ref<HTMLElement | null>(null);

onMounted(() => {

  // 創建 jsPlumb 實例

  const jsPlumbInstance = jsPlumb.getInstance();

  // 初始化 jsPlumb 實例設置

  if (container.value) {

    jsPlumbInstance.setContainer(container.value);

  }

  // 創建連接線

  if (sourceElement.value && targetElement.value) {

    jsPlumbInstance.connect({

      source: sourceElement.value,

      target: targetElement.value,

    });

  }

});

</script>

flowchat

start=>start: 開始

end=>end: 結束

input=>inputoutput: 我的輸入

output=>inputoutput: 我的輸出

operation=>operation: 我的操作

condition=>condition: 確認

start->input->operation->output->condition

condition(yes)->end

condition(no)->operation