|
|
|
@ -30,17 +30,14 @@ |
|
|
|
<div class="box-header"> |
|
|
|
<el-icon style="cursor: pointer;" @click="fitView" size="18"><Aim /></el-icon> |
|
|
|
</div> |
|
|
|
<div class="fx-content"> |
|
|
|
<div class="fx-content" id="container" ref="nodeBox"> |
|
|
|
<!-- <div class="no-widget-hint" v-if="!state.taskChainList.length">请从左侧列表中选择组件.</div> --> |
|
|
|
|
|
|
|
<VueFlow fit-view-on-init class="my-flow" v-model="elements" @nodeClick="nodeClickHandler" disable> |
|
|
|
<!-- <VueFlow fit-view-on-init class="my-flow" v-model="elements" @nodeClick="nodeClickHandler" disable> |
|
|
|
<Background /> |
|
|
|
<!-- <Panel :position="PanelPosition.TopRight"></Panel> --> |
|
|
|
<!-- <Controls /> --> |
|
|
|
<template #node-custom="props"> |
|
|
|
<CustomNode :node="props" /> |
|
|
|
</template> |
|
|
|
</VueFlow> |
|
|
|
</VueFlow> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="fx-east"> |
|
|
|
@ -66,20 +63,21 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup name="sysMenu"> |
|
|
|
import '@vue-flow/core/dist/style.css'; |
|
|
|
// import '@vue-flow/core/dist/style.css'; |
|
|
|
/* import the default theme (optional) */ |
|
|
|
import '@vue-flow/core/dist/theme-default.css'; |
|
|
|
// import '@vue-flow/core/dist/theme-default.css'; |
|
|
|
|
|
|
|
import { Background, Panel, Controls } from '@vue-flow/additional-components' |
|
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core' |
|
|
|
// import { Background, Panel, Controls } from '@vue-flow/additional-components' |
|
|
|
// import { VueFlow, useVueFlow } from '@vue-flow/core' |
|
|
|
import { onMounted, reactive, ref } from 'vue'; |
|
|
|
import { Calendar, Grid, Aim } from '@element-plus/icons-vue' |
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus'; |
|
|
|
import CustomNode from './customNode.vue' |
|
|
|
import { getEquipmentList, del } from '/@/api/equipment'; |
|
|
|
import { Session } from '/@/utils/storage'; |
|
|
|
import { Graph } from '@antv/x6' |
|
|
|
|
|
|
|
const { nodes, addNodes, updateEdge, removeEdges, getElements, getNode, addEdges, fitView, updateNode, edges } = useVueFlow() |
|
|
|
// const { nodes, addNodes, updateEdge, removeEdges, getElements, getNode, addEdges, fitView, updateNode, edges } = useVueFlow() |
|
|
|
const data = [ |
|
|
|
// { id: '1', type: 'process', label: 'Node 1', position: { x: 250, y: 5 }, background: '#42B983' }, |
|
|
|
// { id: '2', label: 'Node 2', position: { x: 100, y: 100 } }, |
|
|
|
@ -92,7 +90,48 @@ const data = [ |
|
|
|
// { id: 'e1-3', source: '1', target: '3', type: 'edgeType' }, |
|
|
|
// { id: 'e1-4', source: '5', target: '6', type: 'edgeType' }, |
|
|
|
] |
|
|
|
Graph.registerNode( |
|
|
|
'custom-node', |
|
|
|
{ |
|
|
|
inherit: 'rect', // 继承于 rect 节点 |
|
|
|
width: 100, |
|
|
|
height: 40, |
|
|
|
markup: [ |
|
|
|
{ |
|
|
|
tagName: 'rect', // 标签名称 |
|
|
|
selector: 'body', // 选择器 |
|
|
|
}, |
|
|
|
{ |
|
|
|
tagName: 'image', |
|
|
|
selector: 'img', |
|
|
|
}, |
|
|
|
{ |
|
|
|
tagName: 'text', |
|
|
|
selector: 'label', |
|
|
|
}, |
|
|
|
], |
|
|
|
attrs: { |
|
|
|
body: { |
|
|
|
stroke: '#8f8f8f', |
|
|
|
strokeWidth: 1, |
|
|
|
fill: '#fff', |
|
|
|
rx: 6, |
|
|
|
ry: 6, |
|
|
|
}, |
|
|
|
img: { |
|
|
|
'xlink:href': |
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', |
|
|
|
width: 16, |
|
|
|
height: 16, |
|
|
|
x: 12, |
|
|
|
y: 12, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
true, |
|
|
|
) |
|
|
|
let elements = ref(data) |
|
|
|
let nodeBox = ref(null); |
|
|
|
const collapseActiveNames = ref<string[]>(['1', '2', '3']); |
|
|
|
const isAwait = ref(false); |
|
|
|
// const addEquipmentRef = ref<InstanceType<typeof AddEquipment>>(); |
|
|
|
@ -120,12 +159,63 @@ const state = reactive({ |
|
|
|
onMounted(async () => { |
|
|
|
state.orgData = Session.get('orgList') ?? []; |
|
|
|
state.queryParams.position = state.orgData[0]?.code || ''; |
|
|
|
handleQuery(); |
|
|
|
// handleQuery(); |
|
|
|
setTimeout(() => { |
|
|
|
initGraph(); |
|
|
|
}, 100) |
|
|
|
}); |
|
|
|
const nodeClickHandler = () => { |
|
|
|
console.log(nodes.value, edges.value) |
|
|
|
} |
|
|
|
const initGraph = () => { |
|
|
|
const graph = new Graph({ |
|
|
|
container: nodeBox.value, |
|
|
|
background: { |
|
|
|
// color: '#F2F7FA', |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
visible: true, |
|
|
|
type: 'doubleMesh', |
|
|
|
args: [ |
|
|
|
{ |
|
|
|
color: '#eee', // 主网格线颜色 |
|
|
|
thickness: 1, // 主网格线宽度 |
|
|
|
}, |
|
|
|
{ |
|
|
|
color: '#ddd', // 次网格线颜色 |
|
|
|
thickness: 1, // 次网格线宽度 |
|
|
|
factor: 4, // 主次网格线间隔 |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}) |
|
|
|
const source = graph.addNode({ |
|
|
|
shape: 'custom-node', // 可以直接使用上面注册过的 shape |
|
|
|
x: 40, |
|
|
|
y: 40, |
|
|
|
label: 'hello', |
|
|
|
}) |
|
|
|
|
|
|
|
const target = graph.addNode({ |
|
|
|
shape: 'custom-node', |
|
|
|
x: 160, |
|
|
|
y: 180, |
|
|
|
label: 'world', |
|
|
|
}) |
|
|
|
|
|
|
|
graph.addEdge({ |
|
|
|
source, |
|
|
|
target, |
|
|
|
attrs: { |
|
|
|
line: { |
|
|
|
stroke: '#8f8f8f', |
|
|
|
strokeWidth: 1, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}) |
|
|
|
|
|
|
|
graph.centerContent() |
|
|
|
} |
|
|
|
// 修改节点是否await |
|
|
|
const changeSwitch = () => { |
|
|
|
var node = nodes.value.find((el) => el.selected); |
|
|
|
|
肖正
4 weeks ago
