修改报表生成

src/views/boardGenerate/index1.vue

@@ -245,6 +245,18 @@
               </template>
               <div class="moduleText">输入框</div>
             </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'selectNode')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg" fit="contain" />
+                </div>
+              </template>
+              <div class="moduleText">选择框</div>
+            </el-card>
             <el-card class="moduleCard" shadow="never" :draggable="true"
                      @dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
                      :body-style="{padding:'4px 0'}">
@@ -565,6 +577,11 @@
                        @resize="(e) => handleResizeStop(e, inputNodeProps)" />
           </template>
 
+          <template #node-selectNode="selectNodeProps">
+            <SelectNode v-bind="selectNodeProps" :inputData="getInputData(selectNodeProps.id)"
+                        @resize="(e) => handleResizeStop(e, selectNodeProps)" />
+          </template>
+
           <template #node-time="timeNodeProps">
             <TimeNode v-bind="timeNodeProps" :inputData="getInputData(timeNodeProps.id)"
                       @resize="(e) => handleResizeStop(e, timeNodeProps)" />
@@ -1535,6 +1552,8 @@ import DigitalFlopNode from '@/views/boardGenerate/nodes/form/digitalFlopNode.vu
 import NightingaleRoseDiagramNode from '@/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue';
 import IconNode from '@/views/boardGenerate/nodes/form/iconNode.vue';
 import InputNode from '@/views/boardGenerate/nodes/form/inputNode.vue';
+import SelectNode from '@/views/boardGenerate/nodes/form/selectNode.vue';
+
 import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
 import TableNode from '@/views/boardGenerate/nodes/form/tableNode.vue';
 import MultiBarsNode from '@/views/boardGenerate/nodes/board/multiBarsNode.vue';

src/views/boardGenerate/nodes/board/annularNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/backgroundBarNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/barNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/carouselNode.vue

@@ -1,14 +1,14 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <swiper-container style="color: #fff" v-bind="swiperOptions" v-if="swiperShow"
-                        :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+                        :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
         <swiper-slide v-for="i in list"
-                      :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+                      :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
           <el-image :style="{width:'100%',height:'100%'}" :src="i" :fit="props.data.options.imageFit || 'contain'" />
 
           <!--          <img :src="i" style="width: 100%; height: 100%; object-fit: contain;" />-->
@@ -27,6 +27,16 @@ import { Handle, Position } from '@vue-flow/core';
 
 const swiperShow = ref(true);
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/curveNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/customBoardNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" @resizeEnd="(e) => $emit('resize', e)" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/dashboardNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/lineBarNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/lineNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/multiBarsNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/multiCurvesNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/multiLinesNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/nightingaleRoseDiagramNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer  @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/pieNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/board/radarNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%;height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -17,6 +17,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/data/customDataNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
                  v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-button :type="isErr ? 'danger':'primary'"
                  :style="{width:props.dimensions.width  +'px',height:props.dimensions.height+'px'}"
                  :icon="Connection">{{ props.data.customData.name }}
@@ -29,6 +29,16 @@ import { querySql } from '@/views/boardGenerate/api/dataSource.js';
 
 const isErr = ref(false);
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false
@@ -139,6 +149,13 @@ onMounted(() => {
   getOutputData();
 });
 
+
+watch(() => JSON.parse(JSON.stringify([props.inputData])), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    getOutputData();
+  }
+}, { deep: true, immediate: true });
+
 let interval = setInterval(() => {
   getOutputData();
 }, Math.max(props.data.options?.timeout || 5 * 1000, 1000));

src/views/boardGenerate/nodes/data/dataNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-button :type="isErr ? 'danger':'primary'"
                  :style="{width:props.dimensions.width  +'px',height:props.dimensions.height+'px'}"
                  :icon="Connection">设备运行数量
@@ -28,6 +28,16 @@ import { options } from '../../tool.js';
 const isErr = ref(false);
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/data/staticDataNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" :color="dataIsJson?'#ff0000':'#fff'" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-input ref="textArea" type="textarea" v-model="input" placeholder="输入JSON"
                 style="width: 100%;height: 100%;" />
     </div>
@@ -24,6 +24,16 @@ const input = ref('');
 const dataIsJson = ref(true);
 const textArea = ref();
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/backgroundNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%; height: 100%;background-repeat: no-repeat; background-size: 100% 100%;"
            :style="{backgroundImage:`url(${props.data.options.backgroundImage})`,backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}">
 
@@ -20,6 +20,16 @@ import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/customFormNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-input v-model="input" placeholder="输入值" style="width: 100%;height: 100%" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -18,6 +18,16 @@ import { Handle, Position } from '@vue-flow/core';
 
 const input = ref('');
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/customTableNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-table
         :data="getData(props.inputData.tableData)"
         v-if="scrollShow"
@@ -279,6 +279,16 @@ const a = {
 const scrollShow = ref(true);
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/digitalFlopNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
     <div class="custom-node"
-         :style="{color:'#fff',width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{color:'#fff',width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <vue-number-roll-plus
         style="display: inline-block;margin-right: 4px;"
         :number="item"
@@ -26,6 +26,16 @@ import 'vue3-number-roll-plus/main.css';
 
 const list = ref([]);
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/iconNode.vue

@@ -1,14 +1,14 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-icon style="color: #fff"
                v-if="props.data.options.icon || !(props.inputData?.imgSrc ||props.data.options.iconSrc)"
-               :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',fontSize:props.dimensions.width+'px' }">
+               :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',fontSize:props.dimensions.width+'px' }">
         <component :is="icon[props.data.options.icon]" />
       </el-icon>
       <el-image style="width: 100%; height: 100%" v-if="props.inputData?.imgSrc || props.data.options.iconSrc"
@@ -25,6 +25,16 @@ import { Handle, Position } from '@vue-flow/core';
 import * as icon from '@element-plus/icons-vue';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/imgNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-image style="width: 100%; height: 100%"
                 :src="props.inputData?.imgSrc ||props.data.options.imgSrc || 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
                 fit="contain" />
@@ -19,6 +19,16 @@ import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/inputNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-input v-model="input" placeholder="输入值" style="width: 100%;height: 100%" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
@@ -18,6 +18,16 @@ import { Handle, Position } from '@vue-flow/core';
 
 const input = ref('');
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/mapNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-button type="primary" :style="{width:props.dimensions.width  +'px',height:props.dimensions.height+'px'}"
                  :icon="Refresh">数据映射
       </el-button>
@@ -20,6 +20,16 @@ import { Refresh } from '@element-plus/icons-vue';
 import { Handle, Position } from '@vue-flow/core';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false
@@ -55,8 +65,8 @@ const convertData = () => {
   props.data.options.dataMap.forEach(item => {
     rule[item.target] = item.source;
   });
-  console.log('props.inputData', props.inputData);
-  console.log('rule', rule);
+  // console.log('props.inputData', props.inputData);
+  // console.log('rule', rule);
   let res = {};
   Object.keys(rule).forEach(item => {
     if (Object.keys(props.inputData).includes(rule[item])) {
@@ -66,7 +76,7 @@ const convertData = () => {
       // res[item] = props.inputData[item];
     }
   });
-  console.log('res', res);
+  // console.log('res', res);
   props.data.outputData = res;
 };
 watch(() => JSON.parse(JSON.stringify(props.inputData)), (obj1, obj2) => {

src/views/boardGenerate/nodes/form/paginationNode.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
                  v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="width: 100%; height: 100%;">
         <el-pagination
           v-model:current-page="currentPage"
@@ -40,6 +40,16 @@ const size = ref('default');
 const background = ref(false);
 const disabled = ref(false);
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false
@@ -94,6 +104,7 @@ const resize = (e) => {
 };
 watch(() => JSON.parse(JSON.stringify(props.inputData || '{}')), (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    console.log(props.inputData);
     if (Array.isArray(props.inputData?.total)) {
       total.value = props.inputData?.total[0] || 0;
     } else {

src/views/boardGenerate/nodes/form/scrollTableNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <div style="background-color: #094170"
            :style="{ height:props.data.options.thHeight, color:props.data.options.thColor,backgroundColor:props.data.options?.thBgColor }">
         <div class="scrollTable" style="font-weight: bold;"
@@ -57,6 +57,16 @@ const classOptions = ref({
   limitMoveNum: 5
 });
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/selectNode.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
+                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+
+    <div class="custom-node"
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+
+      <el-select v-model="input" placeholder="请选择" style="width: 100%; ">
+        <el-option
+          v-for="(item,index) in ((props.inputData||{}).selectData || [])"
+          :key="index"
+          :label="item[props.data.options?.labelField || 'label']"
+          :value="item[props.data.options?.valueField || 'value']"
+        />
+      </el-select>
+    </div>
+    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
+    <Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
+  </div>
+</template>
+<script setup>
+import { defineEmits, defineProps, ref } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import { Handle, Position } from '@vue-flow/core';
+
+const input = ref('');
+const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  isView: {
+    type: Boolean,
+    required: false
+  },
+  inputData: {
+    type: Object,
+    required: false
+  },
+  id: {
+    type: String,
+    required: true
+  },
+  isHideHandle: {
+    type: Boolean,
+    required: false
+  },
+  selected: {
+    type: Boolean,
+    required: false
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  dimensions: {
+    type: Object,
+    required: true
+  }
+});
+
+watch(() => [JSON.parse(JSON.stringify(input.value || '')), JSON.parse(JSON.stringify(props.data.options.field))], (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    if (props.data?.options?.field) {
+      props.data.outputData[props.data.options.field] = input.value;
+    }
+  }
+}, { deep: true, immediate: true });
+watch(() => JSON.parse(JSON.stringify(props.data.options?.defaultInput || '')), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    input.value = props.data.options.defaultInput;
+    if (props.data?.options?.field) {
+      props.data.outputData[props.data.options.field] = input.value;
+    }
+  }
+}, { deep: true, immediate: true });
+const emit = defineEmits(['resize']);
+const resize = (e) => {
+  emit('resize', e, props.id);
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+

src/views/boardGenerate/nodes/form/tableNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-table
         :data="getData(props.inputData.tableData)"
         v-if="scrollShow"
@@ -281,6 +281,16 @@ const a = {
 const scrollShow = ref(true);
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false
@@ -323,9 +333,11 @@ const formulaFun = (row, formula) => {
   });
   let res = 0;
   try {
-    const fun = new Function('tableData', `return ${data}`);
+    const fun = new Function('tableData', data.includes('return') ? data : `return ${data}`);
     res = fun(getData(props.inputData.tableData));
+    console.log('res', res);
   } catch (err) {
+    console.log('err', err);
     res = 0;
   }
   if (`${res}`.trim() !== '' && !isNaN(res)) {

src/views/boardGenerate/nodes/form/textNode.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
@@ -19,6 +19,16 @@ import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/timeNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-date-picker
         v-model="value"
         type="datetimerange"
@@ -28,6 +28,16 @@ import { Handle, Position } from '@vue-flow/core';
 
 const value = ref('');
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/timelineNode.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
       <el-timeline style="width: 100%">
         <el-timeline-item
           :hide-timestamp="!props.data.options.isTimestamp"
@@ -43,6 +43,16 @@ const list = ref([
   }
 ]);
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/nodes/form/videoNode.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                  @resize="resize" />
 
     <div class="custom-node"
-         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
+         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
 
       <video autoplay muted playsinline :width="props.dimensions.width" :height="props.dimensions.height" controls
              v-if="videoShow">
@@ -23,6 +23,16 @@ import { Handle, Position } from '@vue-flow/core';
 
 const videoShow = ref(true);
 const props = defineProps({
+  ratioWidth: {
+    type: Number,
+    required: false,
+    default: 1
+  },
+  ratioHeight: {
+    type: Number,
+    required: false,
+    default: 1
+  },
   isView: {
     type: Boolean,
     required: false

src/views/boardGenerate/tool.js

@@ -304,6 +304,8 @@ const getOption = (e) => {
     return { dataMap: [] };
   } else if (e === 'inputNode') {
     return { field: 'input', defaultInput: '' };
+  } else if (e === 'selectNode') {
+    return { field: 'select', defaultInput: '', labelField: 'label', valueField: 'value' };
   } else if (e === 'time') {
     return { startTimeId: 'startTime', endTimeId: 'endTime', defaultTime: [], format: '' };
   } else if (e === 'text') {

src/views/boardGenerate/view.vue

@@ -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 +'%'}">
 
       <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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>
       </template>
       <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 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 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 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 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 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 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 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 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 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>
 
     </div>
@@ -104,6 +139,7 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
+import { v4 as uuidv4 } from 'uuid';
 import AreaNode from './nodes/other/areaNode.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 MultiBarsNode from './nodes/board/multiBarsNode.vue';
 import InputNode from './nodes/form/inputNode.vue';
+import SelectNode from './nodes/form/selectNode.vue';
 import MapNode from './nodes/form/mapNode.vue';
 import CustomBoardNode from './nodes/board/customBoardNode.vue';
 import CustomDataNode from './nodes/data/customDataNode.vue';
@@ -147,6 +184,8 @@ const router = useRouter();
 const nodes = ref([]);
 const edges = ref([]);
 const area = ref({});
+const ratioWidth = ref(1);
+const ratioHeight = ref(1);
 const getInputData = (e) => {
   let outputData = {};
   let nodeIds = edges.value.map(v => {
@@ -183,7 +222,6 @@ onMounted(async () => {
             } else {
               data[key] = null;
             }
-
           }
         });
         return {
@@ -221,6 +259,14 @@ onMounted(async () => {
         };
       }) || [];
       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>