BKBase Flow Graph

蓝鲸基础流程图组件，提供任务流程可视化展示能力。

安装

pnpm add @bkui-vue/bkbase-flow-graph
pnpm add @blueking/bkflow.js # 流程图相关功能依赖此包，必须安装

使用方法

基础用法

import FlowGraph from '@bkui-vue/bkbase-flow-graph';
import '@bkui-vue/bkbase-flow-graph/dist/style.css';

const container = document.getElementById('container');
const graph = new FlowGraph({
  container,
  flowGraphData: {
    locations: [], // 节点数据
    lines: [], // 连线数据
    version: '1.0', // 版本号
  },
  isReadonly: false, // 是否只读模式
});

graph.init();

数据结构

interface ComponentOptions {
  container: string;
  flowGraphData: FlowGraphData;
  isReadonly: boolean;
}

interface FlowGraphData {
  locations: Location[]; // 节点数据
  lines: Line[]; // 连线数据
  version: string; // 版本号
}

interface Location {
  flow_id: number; // 流程ID
  node_id: number; // 节点ID
  node_name: string; // 节点名称
  node_type: string; // 节点类型
  status: string; // 节点状态
  version: string; // 版本
  frontend_info: {
    // 前端展示信息
    x: number; // 节点x坐标
    y: number; // 节点y坐标
  };
  running_info: {
    // 运行信息
    status: 'failed' | 'running' | 'stop'; // 运行状态
    error_messages?: string[]; // 错误信息
    recent_execute_success_rate?: number; // 最近执行成功率
    history?: string[]; // 历史记录
  };
}

interface Line {
  from_node_id: number; // 起始节点ID
  to_node_id: number; // 目标节点ID
  frontend_info: {
    // 前端展示信息
    source: {
      id: string;
      arrow: string;
    };
    target: {
      id: string;
      arrow: string;
    };
  };
}

API

构造函数选项

| 参数 | 类型 | 必填 | 默认值 | 说明 | | ------------- | ------------- | ---- | ------ | -------------- | | container | string | 是 | - | 图形渲染容器ID | | flowGraphData | FlowGraphData | 是 | - | 流程图数据 | | isReadonly | boolean | 是 | - | 是否只读模式 |

实例方法

| 方法名 | 说明 | | ---------- | -------------- | | init | 初始化流程图 | | render | 重新渲染流程图 | | destroy | 销毁实例 | | bindEvents | 绑定事件 | | on | 绑定事件监听器 |

事件

通过 on 方法监听节点事件：

const graph = new FlowGraph({
  container: '#app',
  flowGraphData: {
    locations: [
      {
        flow_id: 155,
        node_id: 1102,
        node_name: '蓝鲸监控告警数据',
        node_type: 'stream_source',
        status: 'running',
        frontend_info: {
          x: 218,
          y: 145,
        },
        running_info: {
          status: 'running',
          error_messages: [],
        },
      },
    ],
    lines: [
      {
        from_node_id: 1102,
        to_node_id: 1103,
        frontend_info: {
          source: {
            node_id: 1102,
            id: 'bk_node_1',
            arrow: 'Right',
          },
          target: {
            id: 'bk_node_2',
            arrow: 'Left',
          },
        },
      },
    ],
    version: 'V1.0',
  },
  isReadonly: false,
}).on('nodeDblClick', (node, event) => {
  console.log('节点双击', node, event);
});

支持的事件类型：

| 事件名 | 回调参数 | 说明 | | ------------ | ---------------- | ------------ | | nodeDblClick | (node: Location) | 节点双击事件 | | nodeClick | (node: Location) | 节点点击事件 |

完整示例

import FlowGraph from '@bkui-vue/bkbase-flow-graph';

const graph = new FlowGraph({
  container: '#app',
  flowGraphData: {
    locations: [
      {
        flow_id: 155,
        node_id: 1102,
        node_name: '蓝鲸监控告警数据',
        node_type: 'stream_source',
        status: 'running',
        frontend_info: {
          x: 218,
          y: 145,
        },
        running_info: {
          status: 'running',
          error_messages: [],
        },
      },
    ],
    lines: [
      {
        from_node_id: 1102,
        to_node_id: 1103,
        frontend_info: {
          source: {
            node_id: 1102,
            id: 'bk_node_1',
            arrow: 'Right',
          },
          target: {
            id: 'bk_node_2',
            arrow: 'Left',
          },
        },
      },
    ],
    version: 'V1.0',
  },
  isReadonly: false,
})
  .on('nodeDblClick', node => {
    console.log('节点双击', node);
  })
  .on('nodeClick', node => {
    console.log('节点点击', node);
  });

graph.render();

本地开发

环境准备

1. 安装依赖

pnpm install

2. 启动开发服务器

pnpm run dev

开发服务器启动后，访问：

http://localhost:3500/playground/index.html

开发注意事项

1. 国际化

• 组件默认使用中文
• 通过 cookie 中的 blueking_language 判断语言
• 支持中文和英文两种语言

2. 节点状态说明

• failed: 执行异常
• running: 正在执行
• stop: 已停止

3. 本地开发

• 开发服务器默认端口为 3500
• 需要通过 /playground/index.html 路径访问开发页面
• 支持热更新