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>
|