yudao-dev/src/views/extend/processFlowView/components/ProcessDetail.vue

215 lines
3.7 KiB
Vue
Raw Normal View History

2023-10-20 16:03:40 +08:00
<!--
filename: ProcessGraph.vue
author: liubin
date: 2023-10-20 15:00:58
description:
-->
<template>
<section class="process-graph">
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
2023-10-20 16:42:28 +08:00
<div
class="btns"
style="text-align: right; position: absolute; top: 20px; right: 20px">
<el-button
type="primary"
plain
class="btn-create"
icon="el-icon-plus"
@click="createDet">
新建工序
</el-button>
<el-button class="btn-serialize" @click="graphToJson">序列化</el-button>
<el-button class="btn-antiserialize" @click="jsonToGraph">
反序列化
</el-button>
</div>
2023-10-20 16:03:40 +08:00
<div class="process-graph__panel" ref="panel"></div>
</section>
</template>
<script>
import { Graph } from '@antv/x6';
import ProcessNode from './ProcessNode';
Graph.registerNode('process-node', ProcessNode);
export default {
name: 'ProcessGraph',
components: {},
props: {},
data() {
return {
2023-10-20 16:42:28 +08:00
graph: null,
2023-10-20 16:03:40 +08:00
searchBarFormConfig: [{ label: '工序列表' }],
};
},
mounted() {
const graph = new Graph({
container: this.$refs.panel,
grid: {
size: 10,
visible: false,
type: 'dot',
args: {
color: '#f005',
thickness: 1,
},
},
});
const pn1 = graph.addNode({
shape: 'process-node',
x: 30,
y: 30,
processName: '工序00A',
workshopName: '工段1',
2023-10-20 16:42:28 +08:00
processDesc: 'test test test',
processId: '1',
2023-10-20 16:03:40 +08:00
});
const pn2 = graph.addNode({
shape: 'process-node',
x: 240,
y: 30,
processName: '工序00B',
workshopName: '工段1',
2023-10-20 16:42:28 +08:00
processDesc: 'test test test',
processId: '1',
2023-10-20 16:03:40 +08:00
});
const pn3 = graph.addNode({
shape: 'process-node',
x: 360,
y: 30,
processName: '工序00C',
workshopName: '工段1',
2023-10-20 16:42:28 +08:00
processDesc: 'test test test',
processId: '1',
2023-10-20 16:03:40 +08:00
});
const pn4 = graph.addNode({
shape: 'process-node',
x: 360,
y: 120,
processName: '工序00D',
workshopName: '工段1',
2023-10-20 16:42:28 +08:00
processDesc: 'test test test',
processId: '1',
2023-10-20 16:03:40 +08:00
});
const pn5 = graph.addNode({
shape: 'process-node',
x: 500,
y: 30,
processName: '工序00E',
workshopName: '工段1',
2023-10-20 16:42:28 +08:00
processDesc: 'test test test',
processId: '1',
2023-10-20 16:03:40 +08:00
});
graph.addEdge({
source: pn1,
target: pn2,
attrs: {
line: {
stroke: '#0b58ff',
strokeWidth: 1,
targetMarker: {
// name: 'classic',
// name: 'async',
size: 0,
},
},
},
});
graph.addEdge({
source: pn2,
target: pn3,
attrs: {
line: {
stroke: '#0b58ff',
strokeWidth: 1,
targetMarker: {
// name: 'classic',
// name: 'async',
size: 0,
},
},
},
});
graph.addEdge({
source: pn2,
target: pn4,
attrs: {
line: {
stroke: '#0b58ff',
strokeWidth: 1,
targetMarker: {
// name: 'classic',
// name: 'async',
size: 0,
},
},
},
});
graph.addEdge({
source: pn3,
target: pn5,
attrs: {
line: {
stroke: '#0b58ff',
strokeWidth: 1,
targetMarker: {
// name: 'classic',
// name: 'async',
size: 0,
},
},
},
});
graph.addEdge({
source: pn4,
target: pn5,
attrs: {
line: {
stroke: '#0b58ff',
strokeWidth: 1,
targetMarker: {
// name: 'classic',
// name: 'async',
size: 0,
},
},
},
});
2023-10-20 16:42:28 +08:00
this.graph = graph;
2023-10-20 16:03:40 +08:00
},
computed: {},
2023-10-20 16:42:28 +08:00
methods: {
createDet() {},
jsonToGraph() {},
graphToJson() {
if (this.graph) {
console.log(JSON.stringify(this.graph.toJSON(), null, 2));
}
},
},
2023-10-20 16:03:40 +08:00
};
</script>
<style scoped lang="scss">
.process-graph {
padding: 12px 20px 20px;
background: #fff;
border-radius: 8px;
2023-10-20 16:42:28 +08:00
position: relative;
2023-10-20 16:03:40 +08:00
}
.process-graph__panel {
height: 300px;
}
</style>