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 / (area?.width|| 1920))*100 +'%',top: (i.position?.y / (area?.height || 1080))*100 +'%'}">
      <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 === 'staticData'">
        <StaticDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></StaticDataNode>
      </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 { useRouter } from 'vue-router';
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';
import StaticDataNode from './nodes/data/staticDataNode.vue';
import { getBoardApi } from '@/views/boardGenerate/api/boardList';

const router = useRouter();

const nodes = ref([]);
const edges = ref([]);
const area = ref({});
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(async () => {
  await getBoardApi(router.currentRoute.value.query.id)
    .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(data.customContent) || {};
    });
});
</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>