From 320f56e77cbb75838f4e520eaeca90e5f99a69e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Tue, 6 May 2025 18:05:48 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=84=E6=80=81=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/main.ts | 5 +- src/permission.ts | 11 +- src/router/index.ts | 5 + src/views/boardGenerate/index.vue | 496 +++++++++++++++++- .../nodes/board/customBoardNode.vue | 238 +++++++++ .../boardGenerate/nodes/board/lineNode.vue | 209 ++++++++ .../nodes/data/customDataNode.vue | 0 .../boardGenerate/nodes/data/dataNode.vue | 94 ++++ .../nodes/form/customFormNode.vue | 0 .../boardGenerate/nodes/form/inputNode.vue | 65 +++ .../boardGenerate/nodes/form/timeNode.vue | 77 +++ src/views/boardGenerate/nodes/lineNode.vue | 151 ------ .../boardGenerate/nodes/other/areaNode.vue | 16 + src/views/boardGenerate/tool.js | 123 +++-- src/views/boardGenerate/view.vue | 381 ++++++++++++++ 16 files changed, 1655 insertions(+), 217 deletions(-) create mode 100644 src/views/boardGenerate/nodes/board/customBoardNode.vue create mode 100644 src/views/boardGenerate/nodes/board/lineNode.vue create mode 100644 src/views/boardGenerate/nodes/data/customDataNode.vue create mode 100644 src/views/boardGenerate/nodes/data/dataNode.vue create mode 100644 src/views/boardGenerate/nodes/form/customFormNode.vue create mode 100644 src/views/boardGenerate/nodes/form/inputNode.vue create mode 100644 src/views/boardGenerate/nodes/form/timeNode.vue delete mode 100644 src/views/boardGenerate/nodes/lineNode.vue create mode 100644 src/views/boardGenerate/nodes/other/areaNode.vue create mode 100644 src/views/boardGenerate/view.vue diff --git a/package.json b/package.json index 02b340a..1e58e74 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@highlightjs/vue-plugin": "2.1.0", "@vue-flow/background": "^1.3.2", "@vue-flow/core": "^1.43.1", + "@vue-flow/node-resizer": "^1.4.0", "@vueup/vue-quill": "1.2.0", "@vueuse/core": "10.9.0", "animate.css": "4.1.1", diff --git a/src/main.ts b/src/main.ts index e494a6b..7891e84 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,8 +3,9 @@ import { createApp, provide } from 'vue'; import 'virtual:uno.css'; import '@/assets/styles/index.scss'; import 'element-plus/theme-chalk/dark/css-vars.css'; -import '@vue-flow/core/dist/style.css' -import '@vue-flow/core/dist/theme-default.css' +import '@vue-flow/core/dist/style.css'; +import '@vue-flow/core/dist/theme-default.css'; +import '@vue-flow/node-resizer/dist/style.css'; // App、router、store import App from './App.vue'; diff --git a/src/permission.ts b/src/permission.ts index 7087520..15feebc 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -10,7 +10,7 @@ import useSettingsStore from '@/store/modules/settings'; import usePermissionStore from '@/store/modules/permission'; NProgress.configure({ showSpinner: false }); -const whiteList = ['/boardGenerate','/board1','/board2','/login', '/register', '/social-callback']; +const whiteList = ['/boardGenerate', '/boardView', '/board1', '/board2', '/login', '/register', '/social-callback']; router.beforeEach(async (to, from, next) => { NProgress.start(); @@ -41,7 +41,14 @@ router.beforeEach(async (to, from, next) => { } }); // @ts-ignore - next({ path: to.path, replace: true, params: to.params, query: to.query, hash: to.hash, name: to.name as string }); // hack方法 确保addRoutes已完成 + next({ + path: to.path, + replace: true, + params: to.params, + query: to.query, + hash: to.hash, + name: to.name as string + }); // hack方法 确保addRoutes已完成 } } else { next(); diff --git a/src/router/index.ts b/src/router/index.ts index c5f050c..29275b3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -31,6 +31,11 @@ export const constantRoutes: RouteRecordRaw[] = [ hidden: true, component: () => import('@/views/boardGenerate/index.vue') }, + { + path: '/boardView', + hidden: true, + component: () => import('@/views/boardGenerate/view.vue') + }, { path: '/board1', hidden: true, diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue index ad87ba6..684a650 100644 --- a/src/views/boardGenerate/index.vue +++ b/src/views/boardGenerate/index.vue @@ -8,50 +8,520 @@ - 图表 + 折线 + + + + 自定义图表1 + + + + + + 设备数据 + + + + + + 输入框 + + + + 时间 - Config - Role - Task
- + + + + + + +
-
+
+ + + + + + + + + + + + {{ nodes }} +
+ --- +
+ {{ edges }} +
- diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue new file mode 100644 index 0000000..1fdfc01 --- /dev/null +++ b/src/views/boardGenerate/nodes/board/lineNode.vue @@ -0,0 +1,209 @@ + + + diff --git a/src/views/boardGenerate/nodes/data/customDataNode.vue b/src/views/boardGenerate/nodes/data/customDataNode.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/boardGenerate/nodes/data/dataNode.vue b/src/views/boardGenerate/nodes/data/dataNode.vue new file mode 100644 index 0000000..002d933 --- /dev/null +++ b/src/views/boardGenerate/nodes/data/dataNode.vue @@ -0,0 +1,94 @@ + + + diff --git a/src/views/boardGenerate/nodes/form/customFormNode.vue b/src/views/boardGenerate/nodes/form/customFormNode.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/views/boardGenerate/nodes/form/inputNode.vue b/src/views/boardGenerate/nodes/form/inputNode.vue new file mode 100644 index 0000000..f4704bc --- /dev/null +++ b/src/views/boardGenerate/nodes/form/inputNode.vue @@ -0,0 +1,65 @@ + + + + diff --git a/src/views/boardGenerate/nodes/form/timeNode.vue b/src/views/boardGenerate/nodes/form/timeNode.vue new file mode 100644 index 0000000..6987c4c --- /dev/null +++ b/src/views/boardGenerate/nodes/form/timeNode.vue @@ -0,0 +1,77 @@ + + + + diff --git a/src/views/boardGenerate/nodes/lineNode.vue b/src/views/boardGenerate/nodes/lineNode.vue deleted file mode 100644 index fb5f7e0..0000000 --- a/src/views/boardGenerate/nodes/lineNode.vue +++ /dev/null @@ -1,151 +0,0 @@ - - - diff --git a/src/views/boardGenerate/nodes/other/areaNode.vue b/src/views/boardGenerate/nodes/other/areaNode.vue new file mode 100644 index 0000000..8010033 --- /dev/null +++ b/src/views/boardGenerate/nodes/other/areaNode.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js index e225e1f..9d4a00a 100644 --- a/src/views/boardGenerate/tool.js +++ b/src/views/boardGenerate/tool.js @@ -2,71 +2,96 @@ import { useVueFlow } from '@vue-flow/core'; import { ref, watch } from 'vue'; import { v4 as uuidv4 } from 'uuid'; -const nodeType = ref(''); -const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow(); const getId = (type) => { return `${type}_${uuidv4().replaceAll('-', '_')}`; }; -const onDragStart = (event, type) => { - if (event.dataTransfer) { - event.dataTransfer.setData('application/vueflow', type); - event.dataTransfer.effectAllowed = 'move'; - } - - nodeType.value = type; - document.addEventListener('drop', onDragEnd); -}; -const onDragEnd = () => { - nodeType.value = null; - document.removeEventListener('drop', onDragEnd); -}; const getOption = (e) => { - return { - deviceType: e, deviceName: '' - }; + if (e === 'line') { + return {}; + } else if (e === 'data') { + return {}; + } else if (e === 'inputNode') { + return { field: '' }; + } else if (e === 'time') { + return { startTimeId: 'startTime', endTimeId: 'endTime' }; + } else { + return {}; + } }; - - -const onDragOver = (event) => { - event.preventDefault(); - - if (nodeType.value) { - - if (event.dataTransfer) { - event.dataTransfer.dropEffect = 'move'; - } +const getNodeSize = (e) => { + console.log(e); + if (e === 'line') { + return { width: 300, height: 150 }; + } else if (e === 'data') { + return { width: 200, height: 50 }; + } else if (e === 'inputNode') { + return { width: 100, height: 30 }; + } else { + return { width: 100, height: 100 }; } }; -const onDrop = (event) => { - console.log('onDrop', event); - const position = screenToFlowCoordinate({ - x: event.clientX, y: event.clientY - }); +const tool = () => { + const nodeType = ref(''); + const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow(); + const onDragStart = (event, type) => { + if (event.dataTransfer) { + event.dataTransfer.setData('application/vueflow', type); + event.dataTransfer.effectAllowed = 'move'; + } - const nodeId = getId(nodeType.value); - const newNode = { - id: nodeId, name: nodeType.value, type: nodeType.value, dimensions: { - width: 100, height: 60 - }, position, data: { label: nodeId, options: getOption(nodeType.value), deviceData: {} } + nodeType.value = type; + document.addEventListener('drop', onDragEnd); }; + const onDragEnd = () => { + nodeType.value = null; + document.removeEventListener('drop', onDragEnd); + }; + const onDrop = (event) => { + console.log(event); + const dimensions = getNodeSize(nodeType.value); + + const position = screenToFlowCoordinate({ + x: event.clientX, y: event.clientY + }); + + const nodeId = getId(nodeType.value); + const newNode = { + id: nodeId, + name: nodeType.value, + type: nodeType.value, + dimensions, + position, + data: { label: nodeId, options: getOption(nodeType.value), outputData: {} } + }; - const { off } = onNodesInitialized(() => { - updateNode(nodeId, (node) => ({ - position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 } - })); + const { off } = onNodesInitialized(() => { + updateNode(nodeId, (node) => ({ + position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 } + })); - off(); - }); + off(); + }); - addNodes(newNode); + addNodes(newNode); + }; + const onDragOver = (event) => { + event.preventDefault(); + + if (nodeType.value) { + + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'move'; + } + } + }; + return { + onDragStart, onDragEnd, onDrop, onDragOver + }; }; - -export { - onDragStart, onDragEnd, onDrop, onDragOver -}; +export default tool; diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue new file mode 100644 index 0000000..ff96192 --- /dev/null +++ b/src/views/boardGenerate/view.vue @@ -0,0 +1,381 @@ + + +