From a8791791d70ab2a3bc8cd18ca8578f26c40de03a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Thu, 5 Jun 2025 08:41:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E7=89=88=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 389 +++++++++++++++-------------- src/permission.ts | 2 +- src/views/boardGenerate/index.vue | 10 +- src/views/print/index.vue | 272 +++++++++++++++++--- src/views/print/nodes/areaNode.vue | 25 ++ src/views/print/nodes/image.vue | 56 +++++ src/views/print/nodes/textNode.vue | 58 +++++ src/views/print/tool.js | 109 ++++++++ 8 files changed, 695 insertions(+), 226 deletions(-) create mode 100644 src/views/print/nodes/areaNode.vue create mode 100644 src/views/print/nodes/image.vue create mode 100644 src/views/print/nodes/textNode.vue create mode 100644 src/views/print/tool.js diff --git a/index.html b/index.html index 9b240a1..4ee53e3 100644 --- a/index.html +++ b/index.html @@ -1,214 +1,215 @@ - - - - - - - 智造MOM平台系统 - - + - .loaded #loader-wrapper .loader-section.section-right { - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); - } - - .loaded #loader { - opacity: 0; - -webkit-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; - } - - .loaded #loader-wrapper { - visibility: hidden; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); - -webkit-transition: all 0.3s 1s ease-out; - transition: all 0.3s 1s ease-out; - } - - .no-js #loader-wrapper { - display: none; - } - - .no-js h1 { - color: #222222; - } - - #loader-wrapper .load_title { - font-family: 'Open Sans'; - color: #fff; - font-size: 19px; - width: 100%; - text-align: center; - z-index: 9999999999999; - position: absolute; - top: 60%; - opacity: 1; - line-height: 30px; - } - - #loader-wrapper .load_title span { - font-weight: normal; - font-style: italic; - font-size: 13px; - color: #fff; - opacity: 0.5; - } - - - - -
-
-
-
-
-
正在加载系统资源，请耐心等待
-
-
- - + +
+
+
+
+
+
正在加载系统资源，请耐心等待
+
+
+ + diff --git a/src/permission.ts b/src/permission.ts index fe672ca..266feeb 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', '/boardView', '/boardConstruction', '/board1', '/board2', '/login', '/register', '/social-callback']; +const whiteList = ['/print', '/boardGenerate', '/boardView', '/boardConstruction', '/board1', '/board2', '/login', '/register', '/social-callback']; router.beforeEach(async (to, from, next) => { NProgress.start(); diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue index 5c1ae7e..94a2101 100644 --- a/src/views/boardGenerate/index.vue +++ b/src/views/boardGenerate/index.vue @@ -565,8 +565,9 @@ onMounted(async () => { sourceHandle: e.sourceHandleId }; }) || []; + pageData.value = JSON.parse(data.customContent) || {}; }); - pageData.value = JSON.parse(localStorage.getItem('PAGEDATA')); + // pageData.value = JSON.parse(localStorage.getItem('PAGEDATA')); }); const customDataForm = ref({}); const nodeAttrForm = ref({}); @@ -599,6 +600,7 @@ const logEvent = async (eventname, event) => { console.log(event.node.data); break; case 'nodeDrag': + console.log(event.nodes); if (event.nodes.length === 1) { nodeAttrForm.value = event.node.data.options; nodeDataForm.value = event.node; @@ -642,12 +644,14 @@ const getInputData = (e) => { }; const pageSetting = () => { pageSettingVisible.value = true; - pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA')); + // pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA')) || {}; + pageSettingForm.value = pageData.value; }; const save = () => { editBoardApi({ ...boardData.value, + customContent: JSON.stringify(pageSettingForm.value), designPagePointList: nodes.value.map(e => { let data = {}; let savaField = ['customData', 'options']; @@ -766,7 +770,7 @@ const pageBgUploadSuccess = (file) => { }; const setPageData = () => { pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value)); - localStorage.setItem('PAGEDATA', JSON.stringify(pageData.value)); + // localStorage.setItem('PAGEDATA', JSON.stringify(pageData.value)); pageSettingVisible.value = false; }; diff --git a/src/views/print/index.vue b/src/views/print/index.vue index a02f2e7..7dafd88 100644 --- a/src/views/print/index.vue +++ b/src/views/print/index.vue @@ -1,39 +1,255 @@ - - + diff --git a/src/views/print/nodes/areaNode.vue b/src/views/print/nodes/areaNode.vue new file mode 100644 index 0000000..454cba1 --- /dev/null +++ b/src/views/print/nodes/areaNode.vue @@ -0,0 +1,25 @@ + + + + diff --git a/src/views/print/nodes/image.vue b/src/views/print/nodes/image.vue new file mode 100644 index 0000000..72e0983 --- /dev/null +++ b/src/views/print/nodes/image.vue @@ -0,0 +1,56 @@ + + + + diff --git a/src/views/print/nodes/textNode.vue b/src/views/print/nodes/textNode.vue new file mode 100644 index 0000000..7380021 --- /dev/null +++ b/src/views/print/nodes/textNode.vue @@ -0,0 +1,58 @@ + + + + diff --git a/src/views/print/tool.js b/src/views/print/tool.js new file mode 100644 index 0000000..6fd3f09 --- /dev/null +++ b/src/views/print/tool.js @@ -0,0 +1,109 @@ +import { useVueFlow } from '@vue-flow/core'; +import { ref, watch } from 'vue'; +import { v4 as uuidv4 } from 'uuid'; + + +const getId = (type) => { + return `${type}_${uuidv4().replaceAll('-', '_')}`; +}; + +const cmToPx = (cm) => { + return cm * 96 / 2.54; +}; + + +const getOption = (e) => { + if (e === 'text') { + return { name: '', field: '', default: '' }; + } else if (e === 'image') { + return { name: '', field: '', imageSrc: '', imageType: '' }; + } else { + return {}; + } +}; +const getNodeSize = (e) => { + if (e === 'line' || e === 'multiLines' || e === 'bar' || e === 'multiBars' || e === 'curve' || e === 'multiCurves' || e === 'customBoard' || e === 'pie') { + return { width: cmToPx(5), height: cmToPx(2) }; + } else { + return { width: cmToPx(5), height: cmToPx(2) }; + } +}; + +const tool = () => { + const nodeType = ref(''); + const parentId = ref(''); + const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow(); + const onDragStart = (event, type, pid) => { + if (event.dataTransfer) { + event.dataTransfer.setData('application/vueflow', type); + event.dataTransfer.effectAllowed = 'move'; + } + + nodeType.value = type; + parentId.value = pid; + document.addEventListener('drop', onDragEnd); + }; + const onDragEnd = () => { + nodeType.value = null; + document.removeEventListener('drop', onDragEnd); + }; + const onDrop = (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, + parentNode: parentId.value, + extent: 'parent', + dimensions, + position, + data: { 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 } + })); + + off(); + }); + + addNodes(newNode); + + }; + const onDragOver = (event) => { + event.preventDefault(); + + if (nodeType.value) { + + if (event.dataTransfer) { + event.dataTransfer.dropEffect = 'move'; + } + } + }; + return { + onDragStart, onDragEnd, onDrop, onDragOver + }; +}; +export default tool; + +export const options = { + isD: false, isJSON: (str) => { + if (typeof str === 'string') { + try { + JSON.parse(str); + return true; + } catch (e) { + return false; + } + } + return false; + }, cmToPx: cmToPx +};