怎么做黑彩票网站,代做效果图的网站好,哪个网站可以免费学编程,珠海网红打卡景点vue LogicFlow 实现流程图展示 1.背景
部门主要负责低代码平台#xff0c;配置端负责配置流程图#xff0c;引擎端负责流程执行#xff0c;原引擎端只负责流程执行控制以及流程历史列表展示。现在提出个新的要求#xff0c;认为仅历史记录不直观#xff0c;需要在展示完…vue LogicFlow 实现流程图展示 1.背景
部门主要负责低代码平台配置端负责配置流程图引擎端负责流程执行原引擎端只负责流程执行控制以及流程历史列表展示。现在提出个新的要求认为仅历史记录不直观需要在展示完整配置流程图的基础上显示执行历史路线。经过初步分析决定在当前项目的基础上使用LogicFlow渲染从配置端获取的流程图
2.方案设计
配置端为流程设计器引擎端通过配置端接口获取流程图所有的节点信息json在引擎端根据json分析出各节点以及连线的信息并整合形成logicFlow适用的节点连线数据根据节点连线数据渲染流程图使显示与配置端配置流程图基本保持一致引擎端获取流程执行历史对执行过的节点以及节点之间的连线高亮从而显示完整的执行历史路线
3.准备工作
安装npm install logicflow/core --save引入import LogicFlow from logicflow/core;版本^1.2.22框架vue
4.运行问题排查
运行报错ERROR in F:/app/node_modules/preact/src/jsx.d.ts(1462,3):1462:3 Cannot find name SubmitEvent.
可能原因在LogicFlow的package.json文件中dependencies: {preact: ^10.4.8}依赖的preact版本与当前项目的preact版本不一致导致ts校验报错解决npm install preact^10.4.8安装相应版本的preact
运行报错ERROR in F:/app/node_modules/logicflow/core/types/util/mobx.d.ts(1,106):1:106 Cannot find module mobx
可能原因在LogicFlow的package.json文件中devDependencies: {mobx: ^5.15.7}找不到依赖的第三方库解决npm install mobx^5.15.7安装相应版本的mobx按道理来说devDependencies中依赖的库是不需要安装的不清楚具体什么原因需要安装
5.关键实现
1.挂载
// index.js
div classcontainer reflf_ref/divimport LogicFlow from logicflow/corethis.lf new LogicFlow({container: this.$refs.lf_ref,isSilentMode: true // 静默模式仅用于展示
})
this.lf.render(this.lf_data)2.自定义节点 基于某种类型节点改动可继承该类型节点类若需要自定义整个节点则需继承htmlNode类去自定义构建html节点 // customRect.js
import { HtmlNodeModel, HtmlNode } from logicflow/coreclass CustomRectModel extends HtmlNodeModel {setAttributes() {const { properties } thisthis.width properties.widththis.height properties.height}
}
class CustomRectNode extends HtmlNode {setHtml(rootEl) {const { properties } this.props.modelconst el document.createElement(div)el.className custom-rect-containconst html div classicon-sidediv classicon-typei classnew-web-icon icon-flow_sp/i/divdiv classicon-statusi classnew-web-icon icon-success/i/div/divdiv classinfo-sidediv classname-text${properties.af_actname || properties.value}/divdiv classmember-text${properties.af_assignee || }/divdiv classstatus-text${properties.af_choice || }/div/divel.innerHTML html// 需要先把之前渲染的子节点清除掉rootEl.innerHTML rootEl.appendChild(el)}
}export default {type: custom-rect,view: CustomRectNode,model: CustomRectModel
}// index.js
import customRect from ./components/customRect
this.lf.register(customRect)3.自定义样式 自定义节点后需要搭配自定义样式vue中会给节点样式增加唯一后缀以实现样式隔离因此如果需要修改logicFlow生成的节点需要使用深层选择器 我使用的是less对应的深层选择器是::v-deepsass应该是:deep() style langless scoped
.container {width: 100%;height: 100%;overflow: hidden;::v-deep {// 此处定义各种自定义样式类的样式}
}
/style4.流程json分析 原配置端的流程配置是基于Angular实现的流程设计器流程协议与logicFlow并不通用需要对配置端获取的流程协议的参数进行调整才可用于logicFlow的渲染 json数据转换为logicFlow数据的具体逻辑实现在此不多做赘述毕竟json格式不一定一致 {// 节点属性将当前节点作为起始节点的线的id用于设置logicFlow中线的sourceNodeoutgoing: [{resourceId: sid-58F1C9BC-DEEE-4775-90FB-C3E55993E194}],// 节点/线属性标志idresourceId: sid-F73FFA42-61DD-4834-8A2D-1611588E1F6B,// 节点/线属性左上以及右下位置的坐标需要根据两个坐标计算logicFlow中节点的x坐标、y坐标以及宽高bounds: {upperLeft: {x: 45,y: 270},lowerRight: {x: 75,y: 300}},// 节点/线属性id对应不同类型其他则均为普通节点// StartNoneEvent开始节点EndNoneEvent结束节点// ExclusiveGateway分支节点// SequenceFlow线stencil: {id: },// 线属性dockers作为线连接节点的锚点若仅两元素则为直线若多于两元素则表示该连线为折线超出的docker作为折线的中间点// 节点的锚点在logicFlow中并不适用计算折线pointsList时可根据节点方位选择节点边上任一坐标进行连接dockers: [{x: 20.5,y: 20.5},{x: 50,y: 40}],properties: {},// 线属性线目标节点的id用于设置logicFlow中线的targetNodetarget: {resourceId: sid-0DA5B3EC-1E1F-4335-AA26-682E9C8D1DAC}
}
