hwmom-ui/src/views/boardGenerate/view.vue

<template>
  <div class="content"
       :style='`width:${area.width || "100%"};height:${area.height || "100%"};background-image:url(${area.bg})`'>
    <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'">
        <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
      </template>
      <template v-if="i.type === 'customData'">
        <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
      </template>
      <template v-if="i.type === 'line'">
        <LineNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></LineNode>
      </template>
      <template v-if="i.type === 'multiLines'">
        <MultiLinesNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MultiLinesNode>
      </template>
      <template v-if="i.type === 'curve'">
        <CurveNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CurveNode>
      </template>
      <template v-if="i.type === 'multiCurves'">
        <MultiCurvesNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MultiCurvesNode>
      </template>
      <template v-if="i.type === 'bar'">
        <BarNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></BarNode>
      </template>
      <template v-if="i.type === 'multiBars'">
        <MultiBarsNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MultiBarsNode>
      </template>
      <template v-if="i.type === 'data'">
        <DataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></DataNode>
      </template>
      <template v-if="i.type === 'inputNode'">
        <InputNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></InputNode>
      </template>
      <template v-if="i.type === 'time'">
        <TimeNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TimeNode>
      </template>
      <template v-if="i.type === 'map'">
        <MapNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></MapNode>
      </template>
      <template v-if="i.type === 'text'">
        <TextNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></TextNode>
      </template>
      <template v-if="i.type === 'img'">
        <ImgNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></ImgNode>
      </template>
      <template v-if="i.type === 'pie'">
        <PieNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></PieNode>
      </template>

    </div>
  </div>
</template>
<script setup lang="ts">
import TimeNode from './nodes/form/timeNode.vue';
import DataNode from './nodes/data/dataNode.vue';
import LineNode from './nodes/board/lineNode.vue';
import MultiLinesNode from './nodes/board/multiLinesNode.vue';
import CurveNode from './nodes/board/curveNode.vue';
import MultiCurvesNode from './nodes/board/multiCurvesNode.vue';
import BarNode from './nodes/board/barNode.vue';
import MultiBarsNode from './nodes/board/multiBarsNode.vue';
import InputNode from './nodes/form/inputNode.vue';
import MapNode from './nodes/form/mapNode.vue';
import AreaNode from './nodes/other/areaNode.vue';
import CustomBoardNode from './nodes/board/customBoardNode.vue';
import CustomDataNode from './nodes/data/customDataNode.vue';
import TextNode from './nodes/form/textNode.vue';
import ImgNode from './nodes/form/imgNode.vue';
import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';

const nodes = ref([]);
const edges = ref([]);
const area = ref({
  width: 1910,
  height: 970
});
const getInputData = (e) => {
  let outputData = {};
  let nodeIds = edges.value.map(v => {
    if (v.target === e) {
      return v.source;
    }
  });
  nodes.value.forEach(v => {
    if (nodeIds.includes(v.id)) {
      outputData = {
        ...outputData,
        ...v.data.outputData
      };
    }
  });
  return outputData;
};
onMounted(() => {
  nodes.value = JSON.parse(localStorage.getItem('NODES') || '[]');
  edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
  area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
});
</script>
<style lang="less" scoped>
.content {
  position: absolute;
  overflow: hidden;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.node {
  position: absolute;
}


</style>
<style>
.el-notification {
  display: none !important;
}

</style>