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

		<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 {
			graph: null,
			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',
            processDesc: 'test test test',
			processId: '1',
		});
		const pn2 = graph.addNode({
			shape: 'process-node',
			x: 240,
			y: 30,
			processName: '工序00B',
			workshopName: '工段1',
            processDesc: 'test test test',
			processId: '1',
		});

		const pn3 = graph.addNode({
			shape: 'process-node',
			x: 360,
			y: 30,
			processName: '工序00C',
			workshopName: '工段1',
            processDesc: 'test test test',
			processId: '1',
		});

		const pn4 = graph.addNode({
			shape: 'process-node',
			x: 360,
			y: 120,
			processName: '工序00D',
			workshopName: '工段1',
            processDesc: 'test test test',
			processId: '1',
		});

		const pn5 = graph.addNode({
			shape: 'process-node',
			x: 500,
			y: 30,
			processName: '工序00E',
			workshopName: '工段1',
            processDesc: 'test test test',
			processId: '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,
					},
				},
			},
		});

		this.graph = graph;
	},
	computed: {},
	methods: {
		createDet() {},
		jsonToGraph() {},
		graphToJson() {
			if (this.graph) {
				console.log(JSON.stringify(this.graph.toJSON(), null, 2));
			}
		},
	},
};
</script>

<style scoped lang="scss">
.process-graph {
	padding: 12px 20px 20px;
	background: #fff;
	border-radius: 8px;
	position: relative;
}

.process-graph__panel {
	height: 300px;
}
</style>