176 lines
2.8 KiB
Vue
176 lines
2.8 KiB
Vue
|
<!--
|
||
|
filename: ProcessGraph.vue
|
||
|
author: liubin
|
||
|
date: 2023-10-20 15:00:58
|
||
|
description:
|
||
|
-->
|
||
|
|
||
|
<template>
|
||
|
<section class="process-graph">
|
||
|
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
||
|
|
||
|
<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 {
|
||
|
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',
|
||
|
});
|
||
|
const pn2 = graph.addNode({
|
||
|
shape: 'process-node',
|
||
|
x: 240,
|
||
|
y: 30,
|
||
|
processName: '工序00B',
|
||
|
workshopName: '工段1',
|
||
|
});
|
||
|
|
||
|
const pn3 = graph.addNode({
|
||
|
shape: 'process-node',
|
||
|
x: 360,
|
||
|
y: 30,
|
||
|
processName: '工序00C',
|
||
|
workshopName: '工段1',
|
||
|
});
|
||
|
|
||
|
const pn4 = graph.addNode({
|
||
|
shape: 'process-node',
|
||
|
x: 360,
|
||
|
y: 120,
|
||
|
processName: '工序00D',
|
||
|
workshopName: '工段1',
|
||
|
});
|
||
|
|
||
|
const pn5 = graph.addNode({
|
||
|
shape: 'process-node',
|
||
|
x: 500,
|
||
|
y: 30,
|
||
|
processName: '工序00E',
|
||
|
workshopName: '工段1',
|
||
|
});
|
||
|
|
||
|
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,
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
});
|
||
|
},
|
||
|
computed: {},
|
||
|
methods: {},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style scoped lang="scss">
|
||
|
.process-graph {
|
||
|
padding: 12px 20px 20px;
|
||
|
background: #fff;
|
||
|
border-radius: 8px;
|
||
|
}
|
||
|
|
||
|
.process-graph__panel {
|
||
|
height: 300px;
|
||
|
}
|
||
|
</style>
|