From efe8695e4e37d2616d4de926522f1906e4dcadef 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, 15 May 2025 17:48:12 +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 --- src/views/boardGenerate/index.vue | 237 +++++++++++------- .../boardGenerate/nodes/board/barNode.vue | 5 + .../boardGenerate/nodes/board/curveNode.vue | 5 + .../nodes/board/customBoardNode.vue | 5 + .../boardGenerate/nodes/board/lineNode.vue | 5 + .../nodes/board/multiBarsNode.vue | 5 + .../nodes/board/multiCurvesNode.vue | 5 + .../nodes/board/multiLinesNode.vue | 5 + .../boardGenerate/nodes/board/pieNode.vue | 5 + 9 files changed, 180 insertions(+), 97 deletions(-) diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue index 3b8e271..f8879d8 100644 --- a/src/views/boardGenerate/index.vue +++ b/src/views/boardGenerate/index.vue @@ -225,102 +225,133 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 添加映射 - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 添加映射 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -389,8 +420,10 @@ const { onDragStart, onDrop, onDragOver } = tool(); // flow内置方法 const { - addEdges + addEdges, + updateNode } = useVueFlow(); +console.log(updateNode); const pageSettingVisible = ref(false); const pageSettingForm = ref({}); @@ -418,7 +451,9 @@ onMounted(async () => { edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]'); pageData.value = JSON.parse(localStorage.getItem('PAGEDATA')); }); +const customDataForm = ref({}); const nodeAttrForm = ref({}); +const nodeDataForm = ref({}); const logEvent = async (eventname, event) => { switch (eventname) { case 'connect': @@ -437,15 +472,23 @@ const logEvent = async (eventname, event) => { break; case 'paneClick': nodeAttrForm.value = {}; + nodeDataForm.value = {}; + customDataForm.value = {}; break; case 'click': nodeAttrForm.value = event.node.data.options; + nodeDataForm.value = event.node; + customDataForm.value = event.node.data.customData; break; case 'nodeDrag': if (event.nodes.length === 1) { nodeAttrForm.value = event.node.data.options; + nodeDataForm.value = event.node; + customDataForm.value = event.node.data.customData; } else { nodeAttrForm.value = {}; + nodeDataForm.value = {}; + customDataForm.value = {}; } break; case 'contextmenu': diff --git a/src/views/boardGenerate/nodes/board/barNode.vue b/src/views/boardGenerate/nodes/board/barNode.vue index 2be3529..e4c4c7d 100644 --- a/src/views/boardGenerate/nodes/board/barNode.vue +++ b/src/views/boardGenerate/nodes/board/barNode.vue @@ -209,6 +209,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize(); diff --git a/src/views/boardGenerate/nodes/board/curveNode.vue b/src/views/boardGenerate/nodes/board/curveNode.vue index 78d5de0..7df5999 100644 --- a/src/views/boardGenerate/nodes/board/curveNode.vue +++ b/src/views/boardGenerate/nodes/board/curveNode.vue @@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize(); diff --git a/src/views/boardGenerate/nodes/board/customBoardNode.vue b/src/views/boardGenerate/nodes/board/customBoardNode.vue index 93c49a3..8ad429f 100644 --- a/src/views/boardGenerate/nodes/board/customBoardNode.vue +++ b/src/views/boardGenerate/nodes/board/customBoardNode.vue @@ -94,6 +94,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize(); diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue index d6bf8e2..ca4f323 100644 --- a/src/views/boardGenerate/nodes/board/lineNode.vue +++ b/src/views/boardGenerate/nodes/board/lineNode.vue @@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize(); diff --git a/src/views/boardGenerate/nodes/board/multiBarsNode.vue b/src/views/boardGenerate/nodes/board/multiBarsNode.vue index f574dd9..f8ffe02 100644 --- a/src/views/boardGenerate/nodes/board/multiBarsNode.vue +++ b/src/views/boardGenerate/nodes/board/multiBarsNode.vue @@ -219,6 +219,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize(); diff --git a/src/views/boardGenerate/nodes/board/multiCurvesNode.vue b/src/views/boardGenerate/nodes/board/multiCurvesNode.vue index 68edce3..3e2186f 100644 --- a/src/views/boardGenerate/nodes/board/multiCurvesNode.vue +++ b/src/views/boardGenerate/nodes/board/multiCurvesNode.vue @@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { diff --git a/src/views/boardGenerate/nodes/board/multiLinesNode.vue b/src/views/boardGenerate/nodes/board/multiLinesNode.vue index 23e8bc7..b533997 100644 --- a/src/views/boardGenerate/nodes/board/multiLinesNode.vue +++ b/src/views/boardGenerate/nodes/board/multiLinesNode.vue @@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { diff --git a/src/views/boardGenerate/nodes/board/pieNode.vue b/src/views/boardGenerate/nodes/board/pieNode.vue index 0727eb7..b043382 100644 --- a/src/views/boardGenerate/nodes/board/pieNode.vue +++ b/src/views/boardGenerate/nodes/board/pieNode.vue @@ -139,6 +139,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string chart && chart.setOption(getOption(), true); } }, { deep: true, immediate: true }); +watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { + if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { + chart?.resize(); + } +}, { deep: true, immediate: true }); const emit = defineEmits(['resize']); const resize = (e) => { chart.resize();