qqsl-ngx-bpmn-diagram

v0.0.32

Published

3 months ago

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.

0High
0Medium
0Low

suyuovo

BpmnDiagram

This library was generated with Angular CLI version 15.

Code scaffolding

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/qqsl-ngx-bpmn-diagram/styles/bpmn-diagram.css",
    "node_modules/bpmn-js/dist/assets/diagram-js.css",
    "node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css"
  ]
}

然后在模板中使用：

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

浏览器兼容

支持现代浏览器。

Components

ngx-bpmn-diagram-edit

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

参数

| 参数名 | 类型 | 默认值 | 说明 | 支持全局配置 | |:-------------|:--------------------|:----------------|:----------------------------|:-------| | xml | { value: string } | BpmnEmptyXML | 要预览的 BPMN 流程图 XML，默认为空白 XML | | | baseUrl | string | "" | 接口的BaseURL，用于配置流程图相关操作 | | | iconConfig | BpIconConfig | { group: [] } | 自定义工具栏的图标库的配置(见参数示例) | |

事件

| 事件名 | 类型 | 默认值 | 说明 | |:---------|:--------------------------------|:----|:----------------------------| | onSave | EventEmitter<{ xml: string }> | - | 要预览的 BPMN 流程图 XML，默认为空白 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 数据、配置接口地址、设置图标库和事件配置等。

参数

| 参数名 | 类型 | 默认值 | 说明 | 支持全局配置 | |:-------------------|:--------------------|:----------------|:--------------------------------------------------|:-------| | xml | { value: string } | BpmnEmptyXML | 要预览的 BPMN 流程图 XML，默认为空白 XML | | | baseUrl | string | "" | 接口的BaseURL，用于配置流程图相关操作 | | | microServicePath | string | "" | 接口的microServicePath，例如：/services/qqsl-data-center | | | iconConfig | BpIconConfig | { group: [] } | 自定义工具栏的图标库的配置(见参数示例) | | | nodeEventConfig | BpNodeEventConfig | undefined | 节点事件配置，支持默认配置和特殊类型的事件绑定 | |

事件

| 事件名 | 类型 | 默认值 | 说明 | |:---------------|:-----------------------------|:----|:-------| | elementClick | EventEmitter<BpNodeParams> | - | 节点点击事件 |

节点详情接口

GET /overviewDiagram/nodeDetails

请求参数

| 名称 | 位置 | 类型 | 必选 | 说明 | |---------------|--------|--------|----|------| | iCode | query | string | 是 | 唯一编码 | | nodeType | query | string | 是 | 节点类型 | | Authorization | header | string | 否 | none |

返回示例

200 Response

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

预警接口

POST /api/application/overviewDiagram/earlyWarning

需要轮询

请求参数：

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

数据返回格式：

[
  {
		iCode: "", // 唯一编码
		type: "", // 类型
		typeC: "", // 类型中文
		status: true, // 是否有预警
		description: "", // 预警描述
		level: "", // 预警级别
		warning: "", // 预警值
		monitor: "" // 监测值
	},
  // ... 其他所传参数对应的预警信息返回（同上）
]