merge server

.env.dev

@@ -12,6 +12,7 @@ ENV = 'development'
 VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/开发环境
+# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 
 # 路由懒加载

package.json

@@ -41,6 +41,7 @@
     "url": "https://github.com/YunaiV/ruoyi-vue-pro"
   },
   "dependencies": {
+    "@antv/x6": "^2.15.3",
     "@babel/parser": "7.18.4",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.27.2",

src/components/DialogForm/index.vue

@@ -109,6 +109,7 @@
 <script>
 import { getAccessToken } from '@/utils/auth';
 import tupleImg from '@/assets/images/tuple.png';
+import cache from '@/views/extend/processFlow/cache';
 
 /**
  * 找到最长的label
@@ -190,6 +191,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		hasFiles: {
+			type: Boolean,
+			default: false,
+		},
 		labelPosition: {
 			type: String,
 			default: 'right',
@@ -232,7 +237,9 @@ export default {
 		dataForm: {
 			handler(val) {
 				this.form = JSON.parse(JSON.stringify(val));
-				this.form.files = this.form.files ?? [];
+				if (this.hasFiles) {
+					this.form.files = this.form.files ?? [];
+				}
 			},
 			deep: true,
 			immediate: true,
@@ -311,6 +318,11 @@ export default {
 										'list' in response.data
 											? response.data.list
 											: response.data;
+
+									if (opt.cache) {
+										cache.store(opt.cache, list);
+									}
+
 									this.$set(
 										this.optionListOf,
 										opt.prop,

src/mixins/lb/basicPageMixin.js

@@ -28,10 +28,37 @@ export default {
 			// tableBtn: [], // 占位
 			// searchBarFormConfig: [], // 占位
 			// // 弹窗表单配置
-			// dialogFormConfig: [], // 占位
+			// dialogFormConfig: [], // 
+			updateUrl: '',
+			addUrl: '',
+			pageUrl: '',
+			form: {}
 		};
 	},
 	methods: {
+		// utils
+		http(url, method, payload) {
+			return this.$axios({
+				url,
+				method,
+				params: method === 'get' ? payload : null,
+				data: method !== 'get' ? payload : null,
+			})
+		},
+		put(payload) {
+			return this.http(this.updateUrl, 'put', payload);
+		},
+		post(payload) {
+			return this.http(this.addUrl, 'post', payload);
+		},
+		recv(payload) {
+			return this.http(this.pageUrl, 'get', payload);
+		},
+		info(payload) {
+			return this.http(this.infoUrl, 'get', payload);
+		},
+
+
 		// 过滤后端传回的详情数据
 		filterData(data, keys) {
 			const obj = {};

src/views/core/base/equipmentType/index.vue

@@ -37,7 +37,12 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
+			<DialogForm
+				v-if="open"
+				ref="form"
+				v-model="form"
+				:has-files="true"
+				:rows="rows" />
 		</base-dialog>
 	</div>
 </template>

src/views/extend/processFlow/cache.js

@@ -0,0 +1,53 @@
+let timers = [];
+
+export default {
+
+    exists(key) {
+        const _ = localStorage.getItem('stored_keys');
+        return _ ? _.split(',')?.indexOf(key) != -1 : false;
+    },
+
+    store(key, value, duration = null) {
+        if (!localStorage.getItem('stored_keys')) localStorage.setItem('stored_keys', key);
+        else localStorage.setItem('stored_keys', localStorage.getItem('stored_keys') + ',' + key);
+
+        localStorage.setItem(key, JSON.stringify(value));
+        console.log('store duration', duration)
+        if (duration) {
+            if (timers[key]) clearTimeout(timers[key]);
+            timers[key] = setTimeout(() => {
+                console.log("clear cache", key)
+                this.clear([key]);
+            }, duration * 1000);
+        }
+    },
+
+    /**
+     * 
+     * @param {*} key 
+     * @param {*} cb 
+     * @param {*} param2 force 强制更新，调用cb
+     * @returns 
+     */
+    async getList(key, cb = null, { force = false, duration = null } = {}) {
+        if (this.exists(key) && !force) {
+            return JSON.parse(localStorage.getItem(key))
+        } else {
+            const list = await cb();
+            this.store(key, list, duration);
+            return list;
+        }
+    },
+
+    clear(keys) {
+        if (keys && keys.length) {
+            let stored_keys = localStorage.getItem('stored_keys').split(',');
+            keys.forEach((key) => {
+                stored_keys = stored_keys.filter((item) => item != key);
+            });
+            localStorage.setItem('stored_keys', stored_keys);
+            return;
+        }
+        localStorage.removeItem('stored_keys');
+    },
+}

src/views/extend/processFlow/index.vue

@@ -0,0 +1,367 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-10-19 10:03:42
+    description: 
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<section class="process-flow">
+			<el-button class="process-item__add-btn" @click="handleAdd">
+				+ 新增工艺
+			</el-button>
+			<ProcessItem
+				v-for="item in list"
+				:key="item.id"
+				:id="item.id"
+				:name="item.name"
+				:line="item.lineName"
+				:desc="item.remark"
+				:isActive="item.enabled"
+				@edit="handleUpdate" />
+		</section>
+
+		<base-dialog
+			:dialogTitle="title"
+			:dialogVisible="open"
+			@close="cancel"
+			@cancel="cancel"
+			width="45%"
+			@confirm="submitForm">
+			<DialogForm
+				v-if="open"
+				key="index-dialog-form"
+				ref="form"
+				v-model="form"
+				:rows="rows" />
+		</base-dialog>
+	</div>
+</template>
+
+<script>
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+// import cache from './cache';
+
+const ProcessItem = {
+	name: 'ProcessItem',
+	components: {},
+	props: ['id', 'name', 'line', 'desc', 'isActive'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {
+		handleEdit() {
+			this.$emit('edit', this.id);
+		},
+		handleViewDetail(e) {
+			this.$router.push({
+				name: 'ProcessFlowView',
+				params: {
+					id: this.id,
+				},
+			});
+		},
+	},
+	render: function (h) {
+		return (
+			<div
+				class={'process-item' + (this.isActive ? ' active' : '')}
+				style="display: flex; flex-direction: column; position: relative;">
+				<div
+					class="process-item__content"
+					style="flex: 1; display: flex; align-items: center; cursor: pointer;"
+					title="点击查看详细工序列表"
+					onClick={this.handleViewDetail}>
+					{this.isActive ? (
+						<span style="display: inline-block; width: 10px; height: 10px; border-radius: 100%; background: #0ebe3a; position: absolute; top: 20px; right: 20px;" />
+					) : (
+						''
+					)}
+					<svg-icon
+						icon-class="tree-table"
+						style="margin-left: 12px; width: 48px; height: 48px; color: #0858ff33"
+					/>
+					<div
+						class="info"
+						style="margin-left: 12px; display: flex; flex-direction: column;">
+						<h2 style="margin: 20px 0 0; font-weight: 600; font-size: 18px; ">
+							{this.name}
+						</h2>
+						<h3 style="margin: 0;  font-weight: 400; font-size: 14px; line-height: 2; color: #888;">
+							{this.line || '/'}
+						</h3>
+						<p style="margin: 0; text-overflow: ellipse; white-space: nowrap; font-weight: 400; font-size: 14px; line-height: 1.25; color: #888;">
+							{this.desc}
+						</p>
+					</div>
+				</div>
+				<div
+					class="process-item__footer"
+					style="background: #f7f9fa; border-top: 1px solid #0001;">
+					<el-row gutter={20}>
+						<el-col
+							span={8}
+							style="text-align: center; border-right: 1px solid #0001">
+							<el-button
+								type="text"
+								style="color: #0007; line-height: 1.75"
+								onClick={this.handleEdit}>
+								编辑
+							</el-button>
+						</el-col>
+						<el-col
+							span={8}
+							style="text-align: center; border-right: 1px solid #0001">
+							<el-button type="text" style="color: #0007; line-height: 1.75">
+								复制
+							</el-button>
+						</el-col>
+						<el-col span={8} style="text-align: center;">
+							<el-button type="text" style="color: #0007; line-height: 1.75">
+								删除
+							</el-button>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		);
+	},
+};
+
+export default {
+	name: 'ProcessFlow',
+	components: { ProcessItem },
+	mixins: [basicPageMixin],
+	props: {},
+	data() {
+		return {
+			updateUrl: '/extend/process-flow/update',
+			addUrl: '/extend/process-flow/create',
+			pageUrl: '/extend/process-flow/page',
+			infoUrl: '/extend/process-flow/get',
+			searchBarKeys: ['name', 'code', 'lineId', 'productId'],
+			searchBarFormConfig: [
+				{
+					label: '工艺流程列表',
+				},
+			],
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+				code: null,
+				name: null,
+				productId: null,
+				lineId: null,
+			},
+			lineList: null,
+			list: [],
+			rows: [
+				[
+					{
+						input: true,
+						label: '工艺名称',
+						prop: 'name',
+						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						// bind: {
+						// 	disabled: this.editMode == 'detail', // some condition, like detail mode...
+						// }
+					},
+					{
+						input: true,
+						label: '工艺编码',
+						prop: 'code',
+						// url: '/base/core-equipment/getCode',
+					},
+				],
+				[
+					{
+						select: true,
+						label: '产线',
+						prop: 'lineId',
+						// cache: 'processFlow::lineList',
+						url: '/base/core-production-line/listAll',
+						bind: {
+							filterable: true,
+						},
+					},
+
+					{
+						switch: true,
+						label: '是否启用',
+						prop: 'enabled',
+						bind: {
+							'active-value': 1,
+							'inactive-value': 0,
+						},
+					},
+				],
+				[
+					{
+						textarea: true,
+						label: '功能描述',
+						prop: 'remark',
+					},
+				],
+			],
+			form: {
+				id: null,
+				code: null,
+				name: null,
+				productId: null,
+				lineId: null,
+				enabled: 1,
+				remark: null,
+				externalCode: null,
+			},
+		};
+	},
+	computed: {},
+	mounted() {
+		this.getList();
+	},
+	methods: {
+		cancel() {
+			this.open = false;
+			this.reset();
+		},
+		reset() {
+			this.form = {
+				id: null,
+				code: null,
+				name: null,
+				productId: null,
+				lineId: null,
+				enabled: 1,
+				remark: null,
+				externalCode: null,
+			};
+			this.resetForm('form');
+		},
+		handleAdd() {
+			this.reset();
+			this.open = true;
+			this.showUploadComponents = false;
+			this.title = '添加工艺';
+		},
+		async handleUpdate(id) {
+			this.reset();
+			const { data } = await this.info({ id });
+			this.form = data;
+			this.open = true;
+			this.title = '修改工艺';
+		},
+		submitForm() {
+			this.$refs['form'].validate((valid) => {
+				if (!valid) {
+					return;
+				}
+				// 修改的提交
+				if (this.form.id != null) {
+					this.put(this.form).then((response) => {
+						this.$modal.msgSuccess('修改成功');
+						this.open = false;
+						this.getList();
+					});
+					return;
+				}
+				// 添加的提交
+				this.post(this.form).then((response) => {
+					this.$modal.msgSuccess('新增成功');
+					this.open = false;
+					this.getList();
+				});
+			});
+		},
+
+		async getList() {
+			this.loading = true;
+			const { code, data } = await this.recv(this.queryParams);
+			if (code == 0) {
+				this.list = data.list;
+				this.total = data.total;
+				this.loading = false;
+				return;
+			}
+			this.loading = false;
+		},
+
+		// async getList() {
+		// 	this.loading = true;
+		// 	const { code, data } = await this.recv(this.queryParams);
+		// 	if (code == 0) {
+		// 		const list = [];
+		// 		for (const item of data.list) {
+		// 			const newItem = await this.itemAttachName(item);
+		// 			list.push(newItem);
+		// 		}
+		// 		this.list = list;
+		// 		this.total = data.total;
+		// 		this.loading = false;
+		// 		return;
+		// 	}
+		// 	this.loading = false;
+		// },
+
+		// async itemAttachName(item) {
+		// 	if (!this.lineList) {
+		// 		this.lineList = await cache.getList(
+		// 			'processFlow::lineList',
+		// 			async () => {
+		// 				const { code, data } = await this.$axios(
+		// 					'/base/core-production-line/listAll'
+		// 				);
+		// 				if (code == 0) {
+		// 					return data;
+		// 				}
+		// 			}
+		// 		);
+		// 	}
+		// 	return {
+		// 		...item,
+		// 		lineName: this.lineList.find((line) => line.id == item.lineId)?.name,
+		// 	};
+		// },
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.process-flow {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	grid-auto-rows: 200px;
+	gap: 24px;
+}
+
+.process-item__add-btn {
+	display: grid;
+	border: 1px solid #ccc;
+	font-size: 20px;
+	color: #ccc;
+	border-style: dashed;
+	border-radius: 6px;
+	place-items: center;
+	cursor: pointer;
+	transition: all 0.2s ease-in;
+
+	&:hover {
+		color: #555;
+		border-color: #555;
+	}
+}
+
+.process-item {
+	border-radius: 4px;
+	box-shadow: 0 0 6px 1px #ccc;
+	overflow: hidden;
+
+	// &.active {
+	// 	box-shadow: 0 0 6px 1px #18c8bf66;
+	// }
+}
+</style>

src/views/extend/processFlowView/components/ProcessBomList.vue

@@ -0,0 +1,104 @@
+<!-- 
+    filename: ProcessBomList.vue
+    author: liubin
+    date: 2023-10-20 15:00:58
+    description: 
+-->
+
+<template>
+	<section class="process-bom">
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<div
+			class="btns"
+			style="
+				text-align: right;
+				position: absolute;
+				top: 20px;
+				right: 20px;
+				display: flex;
+			">
+			<el-button type="primary" plain class="btn-create" icon="el-icon-plus">
+				分配设备
+			</el-button>
+			<el-input
+				icon="el-icon-search"
+				placeholder="搜索"
+				style="margin-left: 20px">
+				<i slot="prefix" class="el-input__icon el-icon-search"></i>
+			</el-input>
+		</div>
+
+		<!-- 列表 -->
+		<base-table
+			:table-props="tableProps"
+			:page="queryParams.pageNo"
+			:limit="queryParams.pageSize"
+			:table-data="list"
+			@emitFun="handleEmitFun">
+			<method-btn
+				v-if="tableBtn.length"
+				slot="handleBtn"
+				label="操作"
+				:width="120"
+				:method-list="tableBtn"
+				@clickBtn="handleTableBtnClick" />
+		</base-table>
+
+		<!-- 分页组件 -->
+		<pagination
+			v-show="total > 0"
+			:total="total"
+			:page.sync="queryParams.pageNo"
+			:limit.sync="queryParams.pageSize"
+			@pagination="getList" />
+	</section>
+</template>
+
+<script>
+export default {
+	name: 'ProcessBom',
+	components: {},
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [{ label: '工序下设备' }],
+			tableProps: [
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				// },
+				{ prop: 'name', label: '设备名称' },
+				{ prop: 'code', label: '物料BOM' },
+				{ prop: 'remark', label: '参数BOM' },
+			],
+			list: [],
+			total: 0,
+			tableBtn: [],
+			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
+			},
+		};
+	},
+	computed: {},
+	methods: {
+		handleEmitFun() {},
+		handleTableBtnClick() {},
+		getList() {},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.process-bom {
+	position: relative;
+    flex: 1;
+	padding: 12px 20px;
+	background: #fff;
+	border-radius: 8px;
+}
+</style>

src/views/extend/processFlowView/components/ProcessDetail.vue

@@ -0,0 +1,214 @@
+<!-- 
+    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>

src/views/extend/processFlowView/components/ProcessInfo.vue

@@ -0,0 +1,89 @@
+<!-- 
+    filename: ProcessInfo.vue
+    author: liubin
+    date: 2023-10-20 15:00:58
+    description: 
+-->
+
+<template>
+	<section class="process-info">
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<el-row :gutter="20">
+			<el-col :span="6">
+				<InfoItem label="工艺名称" value="测试工艺" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="产线" value="A4" />
+			</el-col>
+			<el-col :span="12">
+				<InfoItem
+					label="工艺描述"
+					value="咯热门asdfkj alsdfk ;lkj flskdjf sadf" />
+			</el-col>
+		</el-row>
+
+		<el-row :gutter="20" style="margin-top: 12px;">
+			<el-col :span="6">
+				<InfoItem label="创建人" value="xxse" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="创建时间" value="2023-10-22 10:11:00" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="更新人" value="xxse" />
+			</el-col>
+			<el-col :span="6">
+				<InfoItem label="更新时间" value="2023-10-22 10:11:00" />
+			</el-col>
+		</el-row>
+	</section>
+</template>
+
+<script>
+import basicPageMixin from '@/mixins/lb/basicPageMixin';
+
+const InfoItem = {
+	name: 'InfoItem',
+	components: {},
+	props: ['label', 'value'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+	render: function (h) {
+		return (
+			<div style="display: flex; align-items: center; font-size: 14px; line-height: 1.5">
+				<span style="width: 100px; text-align: left; font-weight: 700">{this.label}:</span>
+				<span style="width: 200px; text-align: left; text-overflow: ellipse; white-space: nowrap">
+					{this.value}
+				</span>
+			</div>
+		);
+	},
+};
+
+export default {
+	name: 'ProcessInfo',
+	components: { InfoItem },
+	mixins: [basicPageMixin],
+	props: {},
+	data() {
+		return {
+			infoUrl: '/extend/process-flow/get',
+			searchBarFormConfig: [{ label: '工艺详情' }],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-info {
+	padding: 12px 20px 20px;
+	background: #fff;
+	border-radius: 8px;
+}
+</style>

src/views/extend/processFlowView/components/ProcessNode.js

@@ -0,0 +1,135 @@
+import { Node, ObjectExt } from '@antv/x6';
+
+
+export default class ProcessNode extends Node {
+
+}
+
+ProcessNode.config({
+    width: 240,
+    height: 100,
+    markup: [
+        {
+            tagName: 'rect',
+            attrs: {
+                x: 0,
+                y: 0,
+                width: 200,
+                height: 100,
+                fill: 'transparent',
+                stroke: '#0b58ff'
+            },
+        },
+        {
+            tagName: 'rect',
+            attrs: {
+                x: 0,
+                y: 0,
+                width: 200,
+                height: 50,
+                fill: '#ffffff',
+            },
+        },
+        {
+            tagName: 'rect',
+            attrs: {
+                x: 0,
+                y: 50,
+                width: 200,
+                height: 50,
+                fill: '#f8f8f8',
+            },
+        },
+        {
+            tagName: 'text',
+            selector: 'processName',
+            attrs: {
+                x: 20,
+                y: 30,
+                // fill: '#777',
+                // fontSize: 14
+            },
+        },
+        {
+            tagName: 'text',
+            selector: 'workshopName',
+            attrs: {
+                x: 115,
+                y: 30,
+                // fill: '#777',
+                // fontSize: 14
+            },
+        },
+        {
+            tagName: 'text',
+            selector: 'processDesc',
+            // textContent: '工序00A',
+            attrs: {
+                x: 26,
+                y: 80,
+                fill: '#777',
+                fontSize: 14
+            },
+        },
+        // {
+        //     tagName: 'text',
+        //     textContent: '工序名称',
+        //     attrs: {
+        //         x: 20,
+        //         y: 30,
+        //     },
+        // },
+        // {
+        //     tagName: 'text',
+        //     textContent: '工段名称',
+        //     attrs: {
+        //         x: 115,
+        //         y: 30,
+        //     },
+        // },
+        // {
+        //     tagName: 'text',
+        //     selector: 'processName',
+        //     // textContent: '工序00A',
+        //     attrs: {
+        //         x: 26,
+        //         y: 80,
+        //         fill: '#777',
+        //         fontSize: 14
+        //     },
+        // },
+        // {
+        //     tagName: 'text',
+        //     selector: 'workshopName',
+        //     // textContent: '工段1',
+        //     attrs: {
+        //         x: 128,
+        //         y: 80,
+        //         fill: '#777',
+        //         fontSize: 14
+        //     },
+        // },
+    ],
+    //
+    propHooks(metadata) {
+        const { processName, workshopName, processDesc, processId, ...others } = metadata;
+        // debugger;
+        if (processName) {
+            console.log("processName", processName)
+            ObjectExt.setByPath(others, 'attrs/processName/text', processName);
+        }
+        if (workshopName) {
+            console.log("workshopName", workshopName)
+            ObjectExt.setByPath(others, 'attrs/workshopName/text', workshopName);
+        }
+        if (processDesc) {
+            console.log("processDesc", processDesc)
+            ObjectExt.setByPath(others, 'attrs/processDesc/text', processDesc);
+        }
+        if (processId) {
+            console.log("processId", processId)
+            ObjectExt.setByPath(others, 'processId', processId);
+        }
+        return others;
+    }
+})

src/views/extend/processFlowView/index.vue

@@ -0,0 +1,44 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-10-18 12:25:46
+    description: 
+-->
+
+<template>
+	<div class="app-container process-flow-view">
+		<ProcessInfo />
+		<ProcessDetail style="margin-top: 16px" />
+		<ProcessBomList style="margin-top: 16px" />
+	</div>
+</template>
+
+<script>
+import ProcessInfo from './components/ProcessInfo.vue';
+import ProcessBomList from './components/ProcessBomList.vue';
+import ProcessDetail from './components/ProcessDetail.vue';
+
+export default {
+	name: 'ProcessFlowView',
+	components: { ProcessInfo, ProcessDetail, ProcessBomList },
+	props: {},
+	data() {
+		return {};
+	},
+	activated() {
+		console.log('activated...', this.$route.params);
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-flow-view {
+	padding: 8px;
+	flex: 1;
+	background: #f2f4f9;
+	display: flex;
+	flex-direction: column;
+}
+</style>