model-logic-DAG

这是一个可用于模型、服务链式调用配置的DAG工具

Install

npm i model-logic-dag --save

Usage

在页面中使用

.vue file:

<ModelDAG
  ref="modelDAG"
  :stencils="stencils"
  :links="links"
></ModelDAG>

import ModelDAG from 'model-logic-dag'
export default {
  components: { ModelDAG }
}

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- | | preview | 预览模式 | Boolean | true | false | false | | stencils | 工具栏元素数据 | Array[stencil] | - | [] | | links | 元素连接线限制关系 | Array[link] | - | [] | | linksLimit | 是否开启元素连线关系限制，默认开启，需要传入links，存在links中的关系才允许被连线，为false时links参数无效 | Boolean | - | true | | background | 画布背景 | Object | - | {} | | grid | 画布网格 | Object | - | {} |

stencils示例

// item[].type 有以下类型
//   start |   end   |   model  |   rhombus  | logic
// 开始节点 ｜ 结束节点 ｜ 原子能力 ｜ 菱形逻辑节点 ｜ 逻辑节点
[
  {
    groupName: '原子能力',
    id: '1',
    items: [
      {
        label: '人头检测',
        type: 'model' //元素类型 默认为model
      },
      {
        label: '现金检测',
        type: 'model'
      },
      {
        label: '火焰检测',
        type: 'model'
      }
    ]
  },
  {
    groupName: '通用组件',
    id: '2',
    items: [
      {
        label: '逻辑判断',
        type: 'rhombus'
      }
    ]
  }
]

links示例

[
  {
    target: '2',
    source: '1'
  }
]

一组link包含一个source和一个target，当关系存在于links中时，连线关系才可以被建立，否则无法连接元素

Events

| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | link-click | 点击关系线时触发 | ({link, sourceNode, targetNode}) | | node-click | 点击节点时触发 | ({node, inputNodes, outputNodes}) | | node-add | 节点被添加到画布时触发 | (node) | | linked | 边连接时出发 | ({edge, sourceNode, targetNode}) | | cell-remove | 节点、边被删除时触发 | ({ cell, index, options }) |

Methods

clear()

清空画布

layout(...)

| 名称 | 类型 | 是否必填 | 可选值 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | ---- | | cellsData | Object | 是 | - | - | 需要被展示的元素数据 | | cellsData.nodes | Array | 是 | - | - | 需要被展示的元素节点数据 | | cellsData.edges | Array | 是 | - | - | 需要被展示的元素边数据 | | nodes.id | String | 是 | - | - | 元素节点的ID | | nodes.label | String | 是 | - | - | 节点标签文字 | | nodes.type | String | 是 | 'model' | 'begin' | 'rhombus' | - | 节点的类型 | | edge.source | String | 是 | - | - | 边的起始节点ID | | edge.target | String | 是 | - | - | 边的目标节点ID | | edge.sourcePosition | String | 否 | 'left' | 'top' | right | 边的起始点位于元素的位置 | | edge.targetPosition | String | 否 | 'right' | 'bottom' | left | 边的目标点位于元素的位置 |

{
  nodes: [
    {
      id: '原子能力1',
      label: '原子能力1',
      type: 'model' // model为方形元素，通常用于原子能力
    },
    {
      id: '原子能力2',
      label: '原子能力2',
      type: 'model'
    },
    {
      id: '逻辑组件1',
      label: '逻辑组件',
      type: 'rhombus',  // rhombus为菱形元素，通常用于逻辑判断
    }
  ],
  edges: [
    {
      source: 'begin-node',
      target: '原子能力1',
      sourcePosition: 'right',
      targetPosition: 'left'
    },
    {
      source: 'begin-node',
      target: '原子能力2'
    },
    {
      source: '原子能力1',
      target: '逻辑组件1'
    },
    {
      source: '原子能力2',
      target: '逻辑组件1'
    }
  ]
}

setEdgeStatus()

设置边的状态

| 名称 | 类型 | 是否必填 | 可选值 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | ---- | | edge | Object | 是 | - | - | 需要被修改的边 | | status | String | 是 | success | fail | - | 状态，也可以直接传入颜色来设置 |

toGraphJSON()

获取画布数据，用于还原画布

fromGraphJSON(...)

导入画布数据，还原画布

| 名称 | 类型 | 是否必填 | 可选值 | 默认值 | 描述 | | ---- | ---- | ---- | ---- | ---- | ---- | | cells | Array | 是 | - | - | 导入画布数据，还原画布,数据来源一般为toGraphJSON中获取的数据 |

getData()

获取业务数据

getCellById()

根据cell.id获取cell数据