add process flow and process node

2023-10-20 16:03:40 +08:00
parent 15da20fac7
commit a787935263
9 changed files with 681 additions and 244 deletions
--- a/src/views/extend/processFlowView/components/ProcessDetail.vue
+++ b/src/views/extend/processFlowView/components/ProcessDetail.vue
@@ -0,0 +1,175 @@
+<!-- 
+    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>