From 3dc02c0ec1dba4c135f84d1bdece51dbe7f0ffd1 Mon Sep 17 00:00:00 2001 From: suixy <2277317060@qq.com> Date: Wed, 1 Apr 2026 18:10:18 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=92=8C=E6=A0=B7=E5=BC=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/permission.ts | 2 +- src/router/index.ts | 6 + src/views/visualEditor/index.vue | 207 +++++++++++++++++- src/views/visualEditor/nodes/area.vue | 28 +++ .../visualEditor/nodes/circuitComponent.vue | 2 +- .../visualEditor/nodes/deviceDataList.vue | 88 ++++++++ src/views/visualEditor/nodes/line.vue | 21 +- src/views/visualEditor/nodes/text.vue | 107 +++++++++ src/views/visualEditor/tool.js | 57 ++++- src/views/visualEditor/view.vue | 80 +++++++ 10 files changed, 581 insertions(+), 17 deletions(-) create mode 100644 src/views/visualEditor/nodes/area.vue create mode 100644 src/views/visualEditor/nodes/deviceDataList.vue create mode 100644 src/views/visualEditor/nodes/text.vue create mode 100644 src/views/visualEditor/view.vue diff --git a/src/permission.ts b/src/permission.ts index fa40865..2e19123 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -11,7 +11,7 @@ import { usePermissionStore } from '@/store/modules/permission'; import { ElMessage } from 'element-plus/es'; NProgress.configure({ showSpinner: false }); -const whiteList = ['/login', '/register', '/social-callback', '/register*', '/register/*', '/visualEditor']; +const whiteList = ['/login', '/register', '/social-callback', '/register*', '/register/*', '/visualEditor', '/view']; const isWhiteList = (path: string) => { return whiteList.some((pattern) => isPathMatch(pattern, path)); diff --git a/src/router/index.ts b/src/router/index.ts index 8438e11..d05276b 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -26,6 +26,11 @@ import Layout from '@/layout/index.vue'; // 公共路由 export const constantRoutes: RouteRecordRaw[] = [ + { + path: '/view', + hidden: true, + component: () => import('@/views/visualEditor/view.vue') + }, { path: '/visualEditor', hidden: true, @@ -117,3 +122,4 @@ const router = createRouter({ }); export default router; + diff --git a/src/views/visualEditor/index.vue b/src/views/visualEditor/index.vue index cd007ab..1e8a555 100644 --- a/src/views/visualEditor/index.vue +++ b/src/views/visualEditor/index.vue @@ -15,6 +15,19 @@
线
+ + +
文字
+ 元件2 -
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/views/visualEditor/nodes/circuitComponent.vue b/src/views/visualEditor/nodes/circuitComponent.vue index 5f9c1ac..132bc86 100644 --- a/src/views/visualEditor/nodes/circuitComponent.vue +++ b/src/views/visualEditor/nodes/circuitComponent.vue @@ -10,7 +10,7 @@ pointerEvents: props.isView ? 'auto' : 'none' }" > - + diff --git a/src/views/visualEditor/nodes/deviceDataList.vue b/src/views/visualEditor/nodes/deviceDataList.vue new file mode 100644 index 0000000..511c23b --- /dev/null +++ b/src/views/visualEditor/nodes/deviceDataList.vue @@ -0,0 +1,88 @@ + + + diff --git a/src/views/visualEditor/nodes/line.vue b/src/views/visualEditor/nodes/line.vue index a1bd4b7..0c70e43 100644 --- a/src/views/visualEditor/nodes/line.vue +++ b/src/views/visualEditor/nodes/line.vue @@ -10,16 +10,13 @@ pointerEvents: props.isView ? 'auto' : 'none' }" > -
+
+ diff --git a/src/views/visualEditor/tool.js b/src/views/visualEditor/tool.js index c025b7f..45a321d 100644 --- a/src/views/visualEditor/tool.js +++ b/src/views/visualEditor/tool.js @@ -9,8 +9,35 @@ const getId = (type) => { const getOption = (e) => { if (e === 'circuitComponent') { return { - title: '' + network: '', + id: '', + value: '' }; + } else { + return {}; + } +}; + +const getStyle = (e) => { + if (e === 'circuitComponent') { + return {}; + } else if (e === 'line') { + return { + width: 1, + lineType: 0, + rotate: 0, + transformOrigin1: 'center', + transformOrigin2: 'center', + color: '#000' + }; + } else if (e === 'text1') { + return { + align: 'center', + whiteSpace: 'nowrap', + color: '#000' + }; + } else { + return {}; } }; const getNodeSize = (e) => { @@ -18,6 +45,10 @@ const getNodeSize = (e) => { return { width: 50, height: 50 }; } else if (e === 'line') { return { width: 100, height: 20 }; + } else if (e === 'deviceDataList') { + return { width: 100, height: 20 }; + } else if (e === 'text1') { + return { width: 100, height: 20 }; } }; const nameEnum = {}; @@ -55,7 +86,7 @@ const tool = () => { type: nodeType.value, dimensions, position, - data: { options: getOption(nodeType.value), outputData: {}, customData: customData.value } + data: { options: getOption(nodeType.value), style: getStyle(nodeType.value), customData: customData.value } }; const { off } = onNodesInitialized(() => { @@ -67,6 +98,28 @@ const tool = () => { }); addNodes(newNode); + if (nodeType.value === 'circuitComponent') { + const childrenNodeId = getId('deviceDataList'); + const childrenNode = { + id: childrenNodeId, + parentNode: nodeId, + name: nameEnum['deviceDataList'], + draggable: true, + type: 'deviceDataList', + dimensions: getNodeSize('deviceDataList'), + position: { x: newNode.dimensions.width, y: 0 }, + data: { options: getOption('deviceDataList'), style: getStyle('deviceDataList') } + }; + const { off } = onNodesInitialized(() => { + updateNode(childrenNodeId, (node) => ({ + position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 } + })); + + off(); + }); + + addNodes(childrenNode); + } }; const onDragOver = (event) => { event.preventDefault(); diff --git a/src/views/visualEditor/view.vue b/src/views/visualEditor/view.vue new file mode 100644 index 0000000..7d752a4 --- /dev/null +++ b/src/views/visualEditor/view.vue @@ -0,0 +1,80 @@ + + +