qqsl-ngx-bpmn-diagram v0.0.4

BpmnDiagram

This library was generated with Angular CLI version 15.

Code scaffolding

Run ng generate component component-name --project bpmn-diagram to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project bpmn-diagram.

Note: Don't forget to add --project bpmn-diagram or else it will be added to the default project in your angular.json file.

Build

Run ng build bpmn-diagram to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build bpmn-diagram, go to the dist folder cd dist/bpmn-diagram and run npm publish.

Running unit tests

Run ng test bpmn-diagram to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

快速开始

Angular版本

当前支持的Angular版本 ^15.0.0

安装

$ npm install qqsl-ngx-bpmn-diagram --save

引入组件模块

最后你需要将想要使用的组件模块引入到你的 app.module.ts 文件和特性模块中。

以下面的 NgxBpmnDiagramModule 模块为例，先引入组件模块：

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { NgxBpmnDiagramModule } from "qqsl-ngx-bpmn-diagram";

@NgModule({
  declarations: [AppComponent],
  imports: [NgxBpmnDiagramModule],
})
export class AppModule {}

引入样式

使用全部组件样式

在 angular.json 中引入了

{
  "styles": ["node_modules/bpmn-diagram/bpmn-diagram.css"]
}

然后在模板中使用：

<!-- 编辑组件 -->
<ngx-bpmn-diagram-edit></ngx-bpmn-diagram-edit>
<!-- 预览组件 -->
<ngx-bpmn-diagram-preview></ngx-bpmn-diagram-preview>

浏览器兼容

支持现代浏览器。

Components

ngx-bpmn-diagram-edit

用于编辑 BPMN 流程图的组件，支持 XML 数据的编辑、自定义图标配置，以及保存事件。

参数

事件

参数示例

// 图标库使用项配置
const iconConfig: BpIconConfig = {
  group: [
    {
      name: "行政区划",
      type: "region",
      icons: [
        {
          code: "PROVINCE_POINT",
        },
        {
          code: "CITY_POINT",
        },
        {
          code: "COUNTY_POINT",
        },
        {
          code: "TOWN_POINT",
        },
      ],
    },
    {
      name: "标记",
      type: "tag",
      icons: [
        {
          code: "EARTHQUAKE_POINT",
        },
        {
          code: "PANORAMA",
        },
        {
          code: "FLOOD_CONTROL_HEADQUARTERS",
        },
      ],
    },
  ],
};

ngx-bpmn-diagram-preview

用于 BPMN 流程图预览的组件，支持传入 XML 数据、配置接口地址、设置图标库和事件配置等。

参数

节点详情接口

GET /overviewDiagram/nodeDetails

请求参数

返回示例

200 Response

{
  "iCode": "string",
  "name": "string",
  "type": "节点类型",
  "typeC": "节点类型中文",
  "attribute": [
    {
      "name": "string",
      "value": "属性值"
    }
  ]
}

返回结果

数据模型

{
  "iCode": "string",
  "name": "string",
  "type": "节点类型",
  "typeC": "节点类型中文",
  "attribute": [
    {
      "name": "string",
      "value": "属性值"
    }
  ]
}

预警接口

需要轮询

请求参数：

[
  {
    iCode: 'xxx',
    type: 'xx'
  },
  // ... 当前概画图xml中已绑定数据的所有节点iCode以及type（同上）
]

数据返回格式：

[
  {
    iCode: 'xxx',
    type: 'xx',
    status: '是否预警',
    reason: '预警原因',
    remark: '备注内容',
  },
  // ... 其他所传参数对应的预警信息返回（同上）
]