龙空技术网

基于react的流程调度图、思维导图、数据流向图

程序猿peapeay 1969

前言:

现在朋友们对“车辆调度数据流程图”大体比较讲究,咱们都需要分析一些“车辆调度数据流程图”的相关内容。那么小编同时在网摘上汇集了一些关于“车辆调度数据流程图””的相关资讯,希望各位老铁们能喜欢,你们快快来学习一下吧!

流程调度图关键组件操作代码

import React from 'react';import { Card } from 'antd';import { ItemPanel, Item } from 'gg-editor';import styles from './index.less';import CustomNode from "./CustomNode";import Router from "./Router";import ParallelGateway from "./ParallelGateway";import Startnode from "./Startnode";import Endnode from "./Endnode";import Branchnode from './Branchnode';import Gathernode from './Gathernode';import { Button } from 'antd';const FlowItemPanel = () => {  return (    <ItemPanel className={styles.itemPanel}>      <Card bordered={false}>      <CustomNode />      <Router />      <ParallelGateway />      <Startnode />      <Endnode/>      <Branchnode/>      <Gathernode/>        <Item          type="node"          // size="200*100"          shape="start-node"          style ={{            stroke:"blue",          }}          model={{            // id: 'node',            label: { // 节点标签                text: '测试节点', // 文本内容                modulename:"openapi"            },                      }}        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="play-circle"  >起始</Button>        </div>        </Item>​        <Item          type="node"          // size="200*100"          shape="end-node"          style ={{            stroke:"blue",          }}          model={{            // id: 'node',            label: { // 节点标签                text: '测试节点', // 文本内容            },                      }}        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="pause-circle"  >结束</Button>        </div>        </Item>​         <Item          type="node"               shape="paragete-node"          style ={{            stroke:"blue",          }}          model={{            // id: 'node',            label: { // 节点标签                text: '测试节点', // 文本内容            },                      }}        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="pic-center"  >并行网关</Button>        </div>        </Item>​​         <Item          type="node"                   shape="branch-node"          style ={{            stroke:"blue",          }}          model={{            // id: 'node',            label: { // 节点标签                text: '测试节点', // 文本内容            },                      }}        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="branches"  >分支网关</Button>        </div>        </Item>​​        <Item          type="node"          shape="gather-node"          style ={{            stroke:"blue",          }}          model={{            // id: 'node',            label: { // 节点标签                text: '测试节点', // 文本内容            },          }}        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="fullscreen-exit"  >汇聚网关</Button>        </div>        </Item>​        <Item          type="node"          shape="router-node"          model={{            label: 'Decision',          }}​        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="question-circle"  shape = "polygon">判断器</Button>        </div>        </Item>​​        <Item          type="node"          shape="custom-node"          style ={{            stroke:"blue",          }}          model={{            label: { // 节点标签                text: '测试节点', // 文本内容            },          }}        >        <div style={{ borderLeft:"10px solid #00F" ,border:"1px dashed blue" ,  borderRadius: "5px", }}>        <Button icon="tool"  >执行器</Button>        </div>        </Item>​      </Card>    </ItemPanel>  );};​export default FlowItemPanel;

地址:

流程调度图

地址:

数据指向图

地址:

思维导图

代码目录结构

代码下载地址:

标签: #车辆调度数据流程图