twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add flowChart components

Browse Source
This commit is contained in:
xiaoxian521
2021-04-15 23:10:28 +08:00
parent f886a38694
commit c7f6ff6514
21 changed files with 1029 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/components/seamless-scroll/index.vue
View File

@@ -4,10 +4,18 @@
<template #header>
<div class="card-header">
<span>无缝滚动示例</span>
<el-button class="button" type="text" @click="changeDirection('top')">向上滚动</el-button>
<el-button class="button" type="text" @click="changeDirection('bottom')">向下滚动</el-button>
<el-button class="button" type="text" @click="changeDirection('left')">向左滚动</el-button>
<el-button class="button" type="text" @click="changeDirection('right')">向右滚动</el-button>
<el-button class="button" type="text" @click="changeDirection('top')">
<span :style="{color: classOption.direction === 'top' ? 'red' : ''}">向上滚动</span>
</el-button>
<el-button class="button" type="text" @click="changeDirection('bottom')">
<span :style="{color: classOption.direction === 'bottom' ? 'red' : ''}">向下滚动</span>
</el-button>
<el-button class="button" type="text" @click="changeDirection('left')">
<span :style="{color: classOption.direction === 'left' ? 'red' : ''}">向左滚动</span>
</el-button>
<el-button class="button" type="text" @click="changeDirection('right')">
<span :style="{color: classOption.direction === 'right' ? 'red' : ''}">向右滚动</span>
</el-button>
</div>
</template>
<SeamlessScroll ref="scroll" :data="listData" :class-option="classOption" class="warp">

272
src/views/flow-chart/dataTurbo.json Normal file
View File

@@ -0,0 +1,272 @@
{
"flowElementList": [
{
"incoming": [],
"outgoing": [
"Flow_33inf2k"
],
"dockers": [],
"type": 2,
"properties": {
"a": "efrwe",
"b": "wewe",
"name": "开始",
"x": 280,
"y": 200,
"text": {
"x": 280,
"y": 200,
"value": "开始"
},
"logicFlowType": "bpmn:startEvent"
},
"key": "Event_1d42u4p"
},
{
"incoming": [
"Flow_379e0o9"
],
"outgoing": [],
"dockers": [],
"type": 3,
"properties": {
"a": "efrwe",
"b": "wewe",
"name": "结束",
"x": 920,
"y": 200,
"text": {
"x": 920,
"y": 200,
"value": "结束"
},
"logicFlowType": "bpmn:endEvent"
},
"key": "Event_08p8i6q"
},
{
"incoming": [
"Flow_0pfouf0"
],
"outgoing": [
"Flow_3918lhh"
],
"dockers": [],
"type": 6,
"properties": {
"a": "efrwe",
"b": "wewe",
"name": "网关",
"x": 580,
"y": 200,
"text": {
"x": 580,
"y": 200,
"value": "网关"
},
"logicFlowType": "bpmn:exclusiveGateway"
},
"key": "Gateway_1fngqgj"
},
{
"incoming": [
"Flow_33inf2k"
],
"outgoing": [
"Flow_0pfouf0"
],
"dockers": [],
"type": 4,
"properties": {
"a": "efrwe",
"b": "wewe",
"name": "用户",
"x": 420,
"y": 200,
"text": {
"x": 420,
"y": 200,
"value": "用户"
},
"logicFlowType": "bpmn:userTask"
},
"key": "Activity_2mgtaia"
},
{
"incoming": [
"Flow_3918lhh"
],
"outgoing": [
"Flow_379e0o9"
],
"dockers": [],
"type": 5,
"properties": {
"a": "efrwe",
"b": "wewe",
"name": "服务",
"x": 760,
"y": 200,
"text": {
"x": 760,
"y": 200,
"value": "服务"
},
"logicFlowType": "bpmn:serviceTask"
},
"key": "Activity_1sp8qc8"
},
{
"incoming": [
"Event_1d42u4p"
],
"outgoing": [
"Activity_2mgtaia"
],
"type": 1,
"dockers": [],
"properties": {
"name": "边",
"text": {
"x": 331,
"y": 200,
"value": "边"
},
"startPoint": {
"x": 298,
"y": 200
},
"endPoint": {
"x": 370,
"y": 200
},
"pointsList": [
{
"x": 298,
"y": 200
},
{
"x": 370,
"y": 200
}
],
"logicFlowType": "bpmn:sequenceFlow"
},
"key": "Flow_33inf2k"
},
{
"incoming": [
"Activity_2mgtaia"
],
"outgoing": [
"Gateway_1fngqgj"
],
"type": 1,
"dockers": [],
"properties": {
"name": "边2",
"text": {
"x": 507,
"y": 200,
"value": "边2"
},
"startPoint": {
"x": 470,
"y": 200
},
"endPoint": {
"x": 555,
"y": 200
},
"pointsList": [
{
"x": 470,
"y": 200
},
{
"x": 555,
"y": 200
}
],
"logicFlowType": "bpmn:sequenceFlow"
},
"key": "Flow_0pfouf0"
},
{
"incoming": [
"Gateway_1fngqgj"
],
"outgoing": [
"Activity_1sp8qc8"
],
"type": 1,
"dockers": [],
"properties": {
"name": "边3",
"text": {
"x": 664,
"y": 200,
"value": "边3"
},
"startPoint": {
"x": 605,
"y": 200
},
"endPoint": {
"x": 710,
"y": 200
},
"pointsList": [
{
"x": 605,
"y": 200
},
{
"x": 710,
"y": 200
}
],
"logicFlowType": "bpmn:sequenceFlow"
},
"key": "Flow_3918lhh"
},
{
"incoming": [
"Activity_1sp8qc8"
],
"outgoing": [
"Event_08p8i6q"
],
"type": 1,
"dockers": [],
"properties": {
"name": "边4",
"text": {
"x": 871,
"y": 200,
"value": "边4"
},
"startPoint": {
"x": 810,
"y": 200
},
"endPoint": {
"x": 902,
"y": 200
},
"pointsList": [
{
"x": 810,
"y": 200
},
{
"x": 902,
"y": 200
}
],
"logicFlowType": "bpmn:sequenceFlow"
},
"key": "Flow_379e0o9"
}
]
}

132
src/views/flow-chart/index.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<div class="logic-flow-view">
<!-- 辅助工具栏 -->
<Control
class="demo-control"
v-if="lf"
:lf="lf"
:catTurboData="false"
@catData="$_catData"
@catTurboData="$_catTurboData"
></Control>
<!-- 节点面板 -->
<NodePanel :lf="lf" :nodeList="nodeList"></NodePanel>
<!-- 画布 -->
<div id="LF-Turbo"></div>
<!-- 数据查看面板 -->
<el-dialog title="数据" v-model="dataVisible" width="50%">
<DataDialog :graphData="graphData"></DataDialog>
</el-dialog>
</div>
</template>
<script>
import LogicFlow from '@logicflow/core'
import { Snapshot, BpmnElement } from '@logicflow/extension'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'
import NodePanel from '/@/components/FlowChart/src/NodePanel.vue'
import Control from '/@/components/FlowChart/src/Control.vue'
import DataDialog from '/@/components/FlowChart/src/DataDialog.vue'
import { toTurboData, toLogicflowData } from '/@/components/FlowChart/src/adpterForTurbo.ts'
import { BpmnNode } from '/@/components/FlowChart/src/config.ts'
import demoData from './dataTurbo.json'
export default {
name: 'LF',
components: { NodePanel, Control, DataDialog },
data() {
return {
lf: null,
dialogVisible: false,
graphData: null,
dataVisible: false,
config: {
grid: true,
background: {
color: '#f7f9ff'
},
keyboard: {
enabled: true
},
},
nodeList: BpmnNode,
}
},
mounted() {
this.$_initLf()
},
methods: {
$_initLf() {
// 画布配置
LogicFlow.use(Snapshot)
// 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
LogicFlow.use(BpmnElement)
const lf = new LogicFlow({ ...this.config, container: document.querySelector('#LF-Turbo') })
this.lf = lf
// 设置边类型bpmn:sequenceFlow为默认类型
lf.setDefaultEdgeType('bpmn:sequenceFlow')
this.$_render()
},
$_render() {
// Turbo数据转换为LogicFlow内部识别的数据结构
const lFData = toLogicflowData(demoData)
this.lf.render(lFData)
},
closeDialog() {
this.$data.dialogVisible = false
},
$_catData() {
this.$data.graphData = this.$data.lf.getGraphData()
this.$data.dataVisible = true
},
$_catTurboData() {
debugger
const graphData = this.$data.lf.getGraphData()
// 数据转化为Turbo识别的数据结构
this.$data.graphData = toTurboData(graphData)
this.$data.dataVisible = true
},
goto() {
this.$router.push('/')
}
}
}
</script>
<style>
.logic-flow-view {
height: 100vh;
position: relative;
}
.demo-title {
text-align: center;
margin: 20px;
}
.demo-control {
position: absolute;
top: 50px;
right: 100px;
z-index: 2;
}
#LF-Turbo {
width: 100vw;
height: 85%;
outline: none;
margin: 10px 0 0 10px;
}
.time-plus {
cursor: pointer;
}
.add-panel {
position: absolute;
z-index: 11;
background-color: white;
padding: 10px 5px;
}
.el-drawer__body {
height: 80%;
overflow: auto;
margin-top: -30px;
z-index: 3;
}
</style>