|
|
@ -4,7 +4,7 @@
|
|
|
|
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
|
|
|
|
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
|
|
|
|
<template v-if="i.type === 'customBoard'">
|
|
|
|
<template v-if="i.type === 'customBoard'">
|
|
|
|
<CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
|
|
|
|
<CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
|
|
|
|
</template>
|
|
|
|
</template>00
|
|
|
|
<template v-if="i.type === 'customData'">
|
|
|
|
<template v-if="i.type === 'customData'">
|
|
|
|
<CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
|
|
|
|
<CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
@ -55,6 +55,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import TimeNode from './nodes/form/timeNode.vue';
|
|
|
|
import TimeNode from './nodes/form/timeNode.vue';
|
|
|
|
import DataNode from './nodes/data/dataNode.vue';
|
|
|
|
import DataNode from './nodes/data/dataNode.vue';
|
|
|
|
import LineNode from './nodes/board/lineNode.vue';
|
|
|
|
import LineNode from './nodes/board/lineNode.vue';
|
|
|
@ -72,6 +73,9 @@ import TextNode from './nodes/form/textNode.vue';
|
|
|
|
import ImgNode from './nodes/form/imgNode.vue';
|
|
|
|
import ImgNode from './nodes/form/imgNode.vue';
|
|
|
|
import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
|
|
|
|
import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
|
|
|
|
import StaticDataNode from './nodes/data/staticDataNode.vue';
|
|
|
|
import StaticDataNode from './nodes/data/staticDataNode.vue';
|
|
|
|
|
|
|
|
import { getBoardApi } from '@/views/boardGenerate/api/boardList';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
|
|
const nodes = ref([]);
|
|
|
|
const nodes = ref([]);
|
|
|
|
const edges = ref([]);
|
|
|
|
const edges = ref([]);
|
|
|
@ -97,8 +101,62 @@ const getInputData = (e) => {
|
|
|
|
return outputData;
|
|
|
|
return outputData;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
nodes.value = JSON.parse(localStorage.getItem('NODES') || '[]');
|
|
|
|
getBoardApi(router.currentRoute.value.query.id)
|
|
|
|
edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
|
|
|
|
.then((res) => {
|
|
|
|
|
|
|
|
let data = res.data;
|
|
|
|
|
|
|
|
nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
|
|
|
|
|
|
|
|
let data = {};
|
|
|
|
|
|
|
|
let savaField = ['customData', 'options'];
|
|
|
|
|
|
|
|
let dataContent = JSON.parse(e.dataContent) || {};
|
|
|
|
|
|
|
|
Object.keys(dataContent).forEach((key) => {
|
|
|
|
|
|
|
|
if (savaField.includes(key)) {
|
|
|
|
|
|
|
|
data[key] = dataContent[key];
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
if (Array.isArray(dataContent[key])) {
|
|
|
|
|
|
|
|
data[key] = [];
|
|
|
|
|
|
|
|
} else if (dataContent[key] && typeof dataContent[key] === 'object' && !Array.isArray(dataContent[key])) {
|
|
|
|
|
|
|
|
data[key] = {};
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
data[key] = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
id: e.pagePointId,
|
|
|
|
|
|
|
|
name: e.pagePointName,
|
|
|
|
|
|
|
|
dimensions: {
|
|
|
|
|
|
|
|
width: e.width,
|
|
|
|
|
|
|
|
height: e.height
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
position: {
|
|
|
|
|
|
|
|
x: e.posX,
|
|
|
|
|
|
|
|
y: e.posY
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
type: e.pointType,
|
|
|
|
|
|
|
|
data: JSON.parse(e.dataContent)
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}) : [{
|
|
|
|
|
|
|
|
id: `area_${uuidv4().replaceAll('-', '_')}`,
|
|
|
|
|
|
|
|
name: 'area',
|
|
|
|
|
|
|
|
type: 'area',
|
|
|
|
|
|
|
|
position: {
|
|
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: {}
|
|
|
|
|
|
|
|
}];
|
|
|
|
|
|
|
|
edges.value = data.designPageEdgesList.map(e => {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
id: e.pageEdgesId,
|
|
|
|
|
|
|
|
source: e.sourceNodeId,
|
|
|
|
|
|
|
|
target: e.targetNodeId,
|
|
|
|
|
|
|
|
type: e.edgeType,
|
|
|
|
|
|
|
|
targetHandle: e.targetHandleId,
|
|
|
|
|
|
|
|
sourceHandle: e.sourceHandleId
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}) || [];
|
|
|
|
|
|
|
|
});
|
|
|
|
area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
|
|
|
|
area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|