|
|
|
@ -5,98 +5,133 @@
|
|
|
|
:style="{zIndex:k,left: (i.position?.x / (parseFloat(area?.width)|| 1920))*100 +'%',top: (i.position?.y / (parseFloat(area?.height) || 1080))*100 +'%'}">
|
|
|
|
:style="{zIndex:k,left: (i.position?.x / (parseFloat(area?.width)|| 1920))*100 +'%',top: (i.position?.y / (parseFloat(area?.height) || 1080))*100 +'%'}">
|
|
|
|
|
|
|
|
|
|
|
|
<template v-if="i.type === 'customBoard'">
|
|
|
|
<template v-if="i.type === 'customBoard'">
|
|
|
|
<CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
|
|
|
|
<CustomBoardNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
|
|
|
|
|
|
|
|
:inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'customData'">
|
|
|
|
<template v-if="i.type === 'customData'">
|
|
|
|
<CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
|
|
|
|
<CustomDataNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></CustomDataNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'staticData'">
|
|
|
|
<template v-if="i.type === 'staticData'">
|
|
|
|
<StaticDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></StaticDataNode>
|
|
|
|
<StaticDataNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></StaticDataNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'line'">
|
|
|
|
<template v-if="i.type === 'line'">
|
|
|
|
<LineNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></LineNode>
|
|
|
|
<LineNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></LineNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'multiLines'">
|
|
|
|
<template v-if="i.type === 'multiLines'">
|
|
|
|
<MultiLinesNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MultiLinesNode>
|
|
|
|
<MultiLinesNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></MultiLinesNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'curve'">
|
|
|
|
<template v-if="i.type === 'curve'">
|
|
|
|
<CurveNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CurveNode>
|
|
|
|
<CurveNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></CurveNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'multiCurves'">
|
|
|
|
<template v-if="i.type === 'multiCurves'">
|
|
|
|
<MultiCurvesNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MultiCurvesNode>
|
|
|
|
<MultiCurvesNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
|
|
|
|
|
|
|
|
:inputData=getInputData(i.id) v-bind="i"></MultiCurvesNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'bar'">
|
|
|
|
<template v-if="i.type === 'bar'">
|
|
|
|
<BarNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></BarNode>
|
|
|
|
<BarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></BarNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'backgroundBar'">
|
|
|
|
<template v-if="i.type === 'backgroundBar'">
|
|
|
|
<BackgroundBarNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></BackgroundBarNode>
|
|
|
|
<BackgroundBarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
|
|
|
|
|
|
|
|
:inputData=getInputData(i.id) v-bind="i"></BackgroundBarNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'multiBars'">
|
|
|
|
<template v-if="i.type === 'multiBars'">
|
|
|
|
<MultiBarsNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MultiBarsNode>
|
|
|
|
<MultiBarsNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></MultiBarsNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'data'">
|
|
|
|
<template v-if="i.type === 'data'">
|
|
|
|
<DataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></DataNode>
|
|
|
|
<DataNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></DataNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'inputNode'">
|
|
|
|
<template v-if="i.type === 'inputNode'">
|
|
|
|
<InputNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></InputNode>
|
|
|
|
<InputNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></InputNode>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template v-if="i.type === 'selectNode'">
|
|
|
|
|
|
|
|
<SelectNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></SelectNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'time'">
|
|
|
|
<template v-if="i.type === 'time'">
|
|
|
|
<TimeNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TimeNode>
|
|
|
|
<TimeNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></TimeNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'map'">
|
|
|
|
<template v-if="i.type === 'map'">
|
|
|
|
<MapNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MapNode>
|
|
|
|
<MapNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></MapNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'text'">
|
|
|
|
<template v-if="i.type === 'text'">
|
|
|
|
<TextNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TextNode>
|
|
|
|
<TextNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></TextNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'img'">
|
|
|
|
<template v-if="i.type === 'img'">
|
|
|
|
<ImgNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></ImgNode>
|
|
|
|
<ImgNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></ImgNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'icon'">
|
|
|
|
<template v-if="i.type === 'icon'">
|
|
|
|
<IconNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></IconNode>
|
|
|
|
<IconNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></IconNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'video'">
|
|
|
|
<template v-if="i.type === 'video'">
|
|
|
|
<VideoNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></VideoNode>
|
|
|
|
<VideoNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></VideoNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'timeline'">
|
|
|
|
<template v-if="i.type === 'timeline'">
|
|
|
|
<TimelineNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TimelineNode>
|
|
|
|
<TimelineNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></TimelineNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'pie'">
|
|
|
|
<template v-if="i.type === 'pie'">
|
|
|
|
<PieNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></PieNode>
|
|
|
|
<PieNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></PieNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'nightingaleRoseDiagram'">
|
|
|
|
<template v-if="i.type === 'nightingaleRoseDiagram'">
|
|
|
|
<NightingaleRoseDiagramNode :isView="true" :inputData=getInputData(i.id)
|
|
|
|
<NightingaleRoseDiagramNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
|
|
|
|
|
|
|
|
:inputData=getInputData(i.id)
|
|
|
|
v-bind="i"></NightingaleRoseDiagramNode>
|
|
|
|
v-bind="i"></NightingaleRoseDiagramNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'carousel'">
|
|
|
|
<template v-if="i.type === 'carousel'">
|
|
|
|
<CarouselNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CarouselNode>
|
|
|
|
<CarouselNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></CarouselNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'table'">
|
|
|
|
<template v-if="i.type === 'table'">
|
|
|
|
<TableNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TableNode>
|
|
|
|
<TableNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></TableNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'scrollTable'">
|
|
|
|
<template v-if="i.type === 'scrollTable'">
|
|
|
|
<ScrollTableNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></ScrollTableNode>
|
|
|
|
<ScrollTableNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
|
|
|
|
|
|
|
|
:inputData=getInputData(i.id) v-bind="i"></ScrollTableNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'background'">
|
|
|
|
<template v-if="i.type === 'background'">
|
|
|
|
<BackgroundNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></BackgroundNode>
|
|
|
|
<BackgroundNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></BackgroundNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'pagination'">
|
|
|
|
<template v-if="i.type === 'pagination'">
|
|
|
|
<PaginationNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></PaginationNode>
|
|
|
|
<PaginationNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></PaginationNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'annular'">
|
|
|
|
<template v-if="i.type === 'annular'">
|
|
|
|
<AnnularNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></AnnularNode>
|
|
|
|
<AnnularNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></AnnularNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'dashboard'">
|
|
|
|
<template v-if="i.type === 'dashboard'">
|
|
|
|
<DashboardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></DashboardNode>
|
|
|
|
<DashboardNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></DashboardNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'radar'">
|
|
|
|
<template v-if="i.type === 'radar'">
|
|
|
|
<RadarNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></RadarNode>
|
|
|
|
<RadarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></RadarNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'lineBar'">
|
|
|
|
<template v-if="i.type === 'lineBar'">
|
|
|
|
<LineBarNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></LineBarNode>
|
|
|
|
<LineBarNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true" :inputData=getInputData(i.id)
|
|
|
|
|
|
|
|
v-bind="i"></LineBarNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="i.type === 'digitalFlop'">
|
|
|
|
<template v-if="i.type === 'digitalFlop'">
|
|
|
|
<DigitalFlopNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></DigitalFlopNode>
|
|
|
|
<DigitalFlopNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
|
|
|
|
|
|
|
|
:inputData=getInputData(i.id) v-bind="i"></DigitalFlopNode>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -104,6 +139,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
|
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
import AreaNode from './nodes/other/areaNode.vue';
|
|
|
|
import AreaNode from './nodes/other/areaNode.vue';
|
|
|
|
|
|
|
|
|
|
|
|
import BackgroundNode from '@/views/boardGenerate/nodes/form/backgroundNode.vue';
|
|
|
|
import BackgroundNode from '@/views/boardGenerate/nodes/form/backgroundNode.vue';
|
|
|
|
@ -126,6 +162,7 @@ import BarNode from './nodes/board/barNode.vue';
|
|
|
|
import BackgroundBarNode from './nodes/board/backgroundBarNode.vue';
|
|
|
|
import BackgroundBarNode from './nodes/board/backgroundBarNode.vue';
|
|
|
|
import MultiBarsNode from './nodes/board/multiBarsNode.vue';
|
|
|
|
import MultiBarsNode from './nodes/board/multiBarsNode.vue';
|
|
|
|
import InputNode from './nodes/form/inputNode.vue';
|
|
|
|
import InputNode from './nodes/form/inputNode.vue';
|
|
|
|
|
|
|
|
import SelectNode from './nodes/form/selectNode.vue';
|
|
|
|
import MapNode from './nodes/form/mapNode.vue';
|
|
|
|
import MapNode from './nodes/form/mapNode.vue';
|
|
|
|
import CustomBoardNode from './nodes/board/customBoardNode.vue';
|
|
|
|
import CustomBoardNode from './nodes/board/customBoardNode.vue';
|
|
|
|
import CustomDataNode from './nodes/data/customDataNode.vue';
|
|
|
|
import CustomDataNode from './nodes/data/customDataNode.vue';
|
|
|
|
@ -147,6 +184,8 @@ const router = useRouter();
|
|
|
|
const nodes = ref([]);
|
|
|
|
const nodes = ref([]);
|
|
|
|
const edges = ref([]);
|
|
|
|
const edges = ref([]);
|
|
|
|
const area = ref({});
|
|
|
|
const area = ref({});
|
|
|
|
|
|
|
|
const ratioWidth = ref(1);
|
|
|
|
|
|
|
|
const ratioHeight = ref(1);
|
|
|
|
const getInputData = (e) => {
|
|
|
|
const getInputData = (e) => {
|
|
|
|
let outputData = {};
|
|
|
|
let outputData = {};
|
|
|
|
let nodeIds = edges.value.map(v => {
|
|
|
|
let nodeIds = edges.value.map(v => {
|
|
|
|
@ -183,7 +222,6 @@ onMounted(async () => {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
data[key] = null;
|
|
|
|
data[key] = null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
@ -221,6 +259,14 @@ onMounted(async () => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}) || [];
|
|
|
|
}) || [];
|
|
|
|
area.value = JSON.parse(data.customContent) || {};
|
|
|
|
area.value = JSON.parse(data.customContent) || {};
|
|
|
|
|
|
|
|
if (!area.value.width) {
|
|
|
|
|
|
|
|
const screenWidth = window.screen.width;
|
|
|
|
|
|
|
|
ratioWidth.value = screenWidth / 1920;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!area.value.height) {
|
|
|
|
|
|
|
|
const screenHeight = window.screen.height;
|
|
|
|
|
|
|
|
ratioHeight.value = screenHeight / 1080;
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
夜笙歌
7 months ago