yudao-dev/src/views/extend/processFlowView/components/ProcessDetail.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>