From 0fbc1fb29af5fa3b99d81e67379ab186e47f8561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 11 Jul 2025 17:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                |    5 +
 src/views/boardGenerate/index.vue  |    2 +-
 src/views/boardGenerate/index2.vue | 1668 ++++++++++++++++++++++++++++
 3 files changed, 1674 insertions(+), 1 deletion(-)
 create mode 100644 src/views/boardGenerate/index2.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index d747c29..93c962b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -51,6 +51,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     hidden: true,
     component: () => import('@/views/boardGenerate/index1.vue')
   },
+  {
+    path: '/boardGenerate2',
+    hidden: true,
+    component: () => import('@/views/boardGenerate/index2.vue')
+  },
   {
     path: '/boardView',
     hidden: true,
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index c2b2fb0..ce227b0 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -662,7 +662,7 @@
         </el-collapse-item>
       </el-collapse>
       <div v-else>
-        <div v-for="i in nodes.filter(e=>e.type!=='area').reverse()" class="nodeCard" @click="pitchOnNode(i)"
+        <div v-for="i in nodes.filter(e=>e.type!=='area').reverse()" class="nodeCard" @click="pitchOnNode(i)">
           <div style="display: inline-block;margin-right: 8px;">
             <el-dropdown trigger="click" @command="nodeOperate">
               <span class="el-dropdown-link" @click.stop>
diff --git a/src/views/boardGenerate/index2.vue b/src/views/boardGenerate/index2.vue
new file mode 100644
index 0000000..e17907c
--- /dev/null
+++ b/src/views/boardGenerate/index2.vue
@@ -0,0 +1,1668 @@
+<template>
+  <div class="boardGenerate">
+    <div class="top">
+      <div class="componentMenu">
+        <el-popover
+          :width="620"
+          trigger="click"
+          placement="bottom-start">
+          <template #reference>
+            <div style="margin-left: 20px;display: inline-block">
+              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
+                <path
+                  d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
+                  fill="#ddd" p-id="10516"></path>
+              </svg>
+              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
+                <ArrowDown />
+              </el-icon>
+            </div>
+          </template>
+          <div>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">折线</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'multiLines')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">多折线</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">曲线</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'multiCurves')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">多曲线
+              </div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'bar')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">柱状图</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'backgroundBar')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">背景柱状图</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'multiBars')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">多柱状图
+              </div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'pie')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">饼图</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'nightingaleRoseDiagram')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">南丁格尔玫瑰图</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'carousel')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">轮播图</div>
+            </el-card>
+          </div>
+        </el-popover>
+        <el-popover
+          :width="620"
+          trigger="click"
+          placement="bottom-start">
+          <template #reference>
+            <div style="margin-left: 30px;display: inline-block">
+              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
+                <path
+                  d="M108.8 224v576C108.8 902.4 313.6 960 512 960s403.2-57.6 403.2-160v-576C915.2 12.8 108.8 12.8 108.8 224z m742.4 390.4c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V518.4C249.6 563.2 384 588.8 512 588.8s262.4-25.6 339.2-70.4v96z m0-300.8v108.8c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V313.6h6.4c6.4 6.4 12.8 12.8 19.2 12.8h6.4c12.8 6.4 19.2 6.4 32 12.8 19.2 12.8 32 12.8 44.8 19.2 70.4 19.2 147.2 25.6 230.4 25.6s160-6.4 230.4-25.6c12.8-6.4 25.6-6.4 38.4-12.8 12.8-6.4 25.6-6.4 32-12.8h6.4c12.8-6.4 19.2-12.8 32-19.2-6.4 0 0 0 0 0zM512 128c217.6 0 339.2 64 339.2 96S729.6 320 512 320 172.8 256 172.8 224 294.4 128 512 128z m0 768c-217.6 0-339.2-64-339.2-96V704c76.8 44.8 211.2 70.4 339.2 70.4s262.4-25.6 339.2-70.4v89.6c0 38.4-121.6 102.4-339.2 102.4z"
+                  fill="#ddd" p-id="22021"></path>
+              </svg>
+              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
+                <ArrowDown />
+              </el-icon>
+            </div>
+          </template>
+          <div>
+
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">映射</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'staticData')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">静态数据</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">设备数据</div>
+            </el-card>
+            <template v-for="i in customData">
+              <el-card class="moduleCard" shadow="never" :draggable="true"
+                       @dragstart="onDragStart($event, 'customData',i)"
+                       :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                       :body-style="{padding:'4px 0'}">
+                <template #header>
+                  <StarFilled />
+                </template>
+                <div class="moduleText">{{ i.name }}</div>
+              </el-card>
+            </template>
+          </div>
+        </el-popover>
+        <el-popover
+          :width="620"
+          trigger="click"
+          placement="bottom-start"
+        >
+          <template #reference>
+            <div style="margin-left: 30px;display: inline-block">
+              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
+                <path
+                  d="M959.825022 384.002258V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V384.002258zM146.66502 146.66502a63.737872 63.737872 0 0 1 45.336109-18.784682h639.997742A63.961844 63.961844 0 0 1 895.884854 192.001129V320.062089H127.880338V192.001129A63.737872 63.737872 0 0 1 146.66502 146.66502z m269.1267 461.308451v-223.971213h192.181751v223.971213h-192.181751z m192.181751 63.940169v223.971214h-192.181751v-223.971214h192.181751z m-256.12192-63.940169H127.880338v-223.971213h223.971213v223.971213z m-205.186531 269.235073a63.466939 63.466939 0 0 1-18.784682-45.209673V671.91364h223.971213v223.971214H192.001129a63.625887 63.625887 0 0 1-45.336109-18.67631z m749.219834-45.209673A63.763159 63.763159 0 0 1 831.998871 895.884854H671.91364v-223.971214h223.971214v160.085231z m0-224.0254h-223.971214v-223.971213h223.971214v223.971213z"
+                  fill="#ddd" p-id="23072"></path>
+              </svg>
+              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
+                <ArrowDown />
+              </el-icon>
+            </div>
+          </template>
+          <div>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">文字</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'inputNode')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </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'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">时间</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'img')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">图片</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'icon')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">图标</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'video')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">视频</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'timeline')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">时间线</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'digitalFlop')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">数字翻牌器</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'table')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">普通表格</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'scrollTable')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <StarFilled />
+              </template>
+              <div class="moduleText">滚动表格</div>
+            </el-card>
+          </div>
+        </el-popover>
+      </div>
+      <div class="optionsMenu">
+        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top"
+                 @click="pageSetting">
+          <Setting />
+        </el-icon>
+        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="save">
+          <DocumentChecked />
+        </el-icon>
+        <el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="clear">
+          <View />
+        </el-icon>
+      </div>
+    </div>
+    <div class="left">
+      <div class="title">
+        图层
+      </div>
+      <div class="levels">
+        <el-dropdown
+          style="min-width: 100%;display: inline-block"
+          v-for="i in nodes.filter(e => e.type !== 'area').reverse()"
+          :key="i.id"
+          trigger="contextmenu"
+          @command="nodeOperate">
+          <div class="level" :class="{isSelect: i.selected}" @contextmenu.prevent @click="pitchOnNode(i)">
+            <div class="isShow">
+              <el-icon style="cursor: pointer" color="#fff" :size="16">
+                <View />
+              </el-icon>
+            </div>
+            <div class="icon">
+              <svg viewBox="0 0 1024 1024" width="16" height="16" style="margin-left: 10px;">
+                <path
+                  d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
+                  fill="#ddd"
+                ></path>
+              </svg>
+            </div>
+            <div class="boardName">
+              <span style="display: inline-block;">{{ i.name }}</span>
+            </div>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="{ type: 'toTop', node: i }">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{ type: 'moveUp', node: i }">上移一层</el-dropdown-item>
+              <el-dropdown-item :command="{ type: 'moveDown', node: i }">下移一层</el-dropdown-item>
+              <el-dropdown-item :command="{ type: 'copy', node: i }">复制</el-dropdown-item>
+              <el-dropdown-item :command="{ type: 'del', node: i }">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <div class="center" @drop="onDrop" v-loading="loading">
+      <FlowRuler>
+        <VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
+                 default-marker-color="#409EFF"
+                 @connect="logEvent('connect', $event)"
+                 @node-click="logEvent('click', $event)"
+                 @pane-click="logEvent('paneClick', $event)"
+                 @node-drag-start="logEvent('nodeDrag', $event)"
+                 @node-contextMenu="logEvent('contextmenu', $event)"
+                 @dragover="onDragOver"
+        >
+          <Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
+
+          <template #node-area="areaNodeProps">
+            <AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode>
+          </template>
+          <template #node-customBoard="customBoardNodeProps">
+            <CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
+                             @resize="resize"></CustomBoardNode>
+          </template>
+          <template #node-customData="customDataNodeProps">
+            <CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
+                            @resize="resize"></CustomDataNode>
+          </template>
+          <template #node-line="lineNodeProps">
+            <LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
+                      @resize="resize"></LineNode>
+          </template>
+          <template #node-multiLines="multiLinesNodeProps">
+            <MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
+                            @resize="resize"></MultiLinesNode>
+          </template>
+          <template #node-curve="curveNodeProps">
+            <CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps"
+                       @resize="resize"></CurveNode>
+          </template>
+          <template #node-multiCurves="multiCurvesNodeProps">
+            <MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps"
+                             @resize="resize"></MultiCurvesNode>
+          </template>
+          <template #node-bar="barNodeProps">
+            <BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps"
+                     @resize="resize"></BarNode>
+          </template>
+          <template #node-backgroundBar="backgroundBarNodeProps">
+            <BackgroundBarNode :inputData=getInputData(backgroundBarNodeProps.id) v-bind="backgroundBarNodeProps"
+                               @resize="resize"></BackgroundBarNode>
+          </template>
+          <template #node-multiBars="multiBarsNodeProps">
+            <MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps"
+                           @resize="resize"></MultiBarsNode>
+          </template>
+          <template #node-pie="pieNodeProps">
+            <PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
+                     @resize="resize"></PieNode>
+          </template>
+          <template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
+            <NightingaleRoseDiagramNode :inputData=getInputData(nightingaleRoseDiagramNodeProps.id)
+                                        v-bind="nightingaleRoseDiagramNodeProps"
+                                        @resize="resize"></NightingaleRoseDiagramNode>
+          </template>
+          <template #node-carousel="carouselNodeProps">
+            <CarouselNode :inputData=getInputData(carouselNodeProps.id) v-bind="carouselNodeProps"
+                          @resize="resize"></CarouselNode>
+          </template>
+          <template #node-data="dataNodeProps">
+            <DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
+                      @resize="resize"></DataNode>
+          </template>
+          <template #node-text="textNodeProps">
+            <TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps"
+                      @resize="resize"></TextNode>
+          </template>
+          <template #node-img="imgNodeProps">
+            <ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
+                     @resize="resize"></ImgNode>
+          </template>
+          <template #node-icon="iconNodeProps">
+            <IconNode :inputData=getInputData(iconNodeProps.id) v-bind="iconNodeProps"
+                      @resize="resize"></IconNode>
+          </template>
+          <template #node-video="videoNodeProps">
+            <VideoNode :inputData=getInputData(videoNodeProps.id) v-bind="videoNodeProps"
+                       @resize="resize"></VideoNode>
+          </template>
+          <template #node-timeline="timelineNodeProps">
+            <TimelineNode :inputData=getInputData(timelineNodeProps.id) v-bind="timelineNodeProps"
+                          @resize="resize"></TimelineNode>
+          </template>
+          <template #node-digitalFlop="digitalFlopNodeProps">
+            <DigitalFlopNode :inputData=getInputData(digitalFlopNodeProps.id) v-bind="digitalFlopNodeProps"
+                             @resize="resize"></DigitalFlopNode>
+          </template>
+
+          <template #node-inputNode="inputNodeProps">
+            <InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
+                       @resize="resize"></InputNode>
+          </template>
+          <template #node-time="timeNodeProps">
+            <TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
+                      @resize="resize"></TimeNode>
+          </template>
+          <template #node-map="mapNodeProps">
+            <MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
+                     @resize="resize"></MapNode>
+          </template>
+          <template #node-staticData="staticDataNodeProps">
+            <StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps"
+                            @resize="resize"></StaticDataNode>
+          </template>
+          <template #node-table="tableNodeProps">
+            <TableNode :inputData=getInputData(tableNodeProps.id) v-bind="tableNodeProps"
+                       @resize="resize"></TableNode>
+          </template>
+          <template #node-scrollTable="scrollTableNodeProps">
+            <ScrollTableNode :inputData=getInputData(scrollTableNodeProps.id) v-bind="scrollTableNodeProps"
+                             @resize="resize"></ScrollTableNode>
+          </template>
+        </VueFlow>
+      </FlowRuler>
+    </div>
+    <div class="right">
+      <div class="tabs">
+        <div v-if="Object.keys(nodeDataForm).length>0" class="tab" :class="{active : tabs === 0}"
+             @click="selectTabs(0)">
+          属性设置
+        </div>
+        <div v-if="Object.keys(nodeAttrForm).length>0" class="tab" :class="{active : tabs === 1}"
+             @click="selectTabs(1)">
+          样式设置
+        </div>
+      </div>
+      <div class="tabItems">
+        <div class="tabItem" v-if="Object.keys(nodeDataForm).length>0 && tabs === 0">
+          <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
+            <el-form-item label="组件名称">
+              <el-input v-model="nodeDataForm.name" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="x">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item label="y">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item label="宽度">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+            <el-form-item label="高度">
+              <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
+                               @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
+          <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
+            <el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
+              <el-collapse-item title="Consistency" name="1">
+                <el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
+                  <el-input v-model="nodeAttrForm.xName" style="width: 100%" />
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="Feedback" name="2">
+                <div>
+                  Operation feedback: enable the users to clearly perceive their
+                  operations by style updates and interactive effects;
+                </div>
+                <div>
+                  Visual feedback: reflect current state by updating or rearranging
+                  elements of the page.
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="Efficiency" name="3">
+                <div>
+                  Simplify the process: keep operating process simple and intuitive;
+                </div>
+                <div>
+                  Definite and clear: enunciate your intentions clearly so that the
+                  users can quickly understand and make decisions;
+                </div>
+                <div>
+                  Easy to identify: the interface should be straightforward, which helps
+                  the users to identify and frees them from memorizing and recalling.
+                </div>
+              </el-collapse-item>
+              <el-collapse-item title="Controllability" name="4">
+                <div>
+                  Decision making: giving advices about operations is acceptable, but do
+                  not make decisions for the users;
+                </div>
+                <div>
+                  Controlled consequences: users should be granted the freedom to
+                  operate, including canceling, aborting or terminating current
+                  operation.
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+            <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
+              <el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
+              <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('number')">
+              <el-input-number :controls="false" autocomplete="off" v-model="nodeAttrForm.number" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
+              <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
+              <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
+            </el-form-item>
+            <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
+              <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
+            </el-form-item>
+            <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
+              <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
+            </el-form-item>
+            <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
+              <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
+            </el-form-item>
+            <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
+              <el-date-picker
+                v-model="nodeAttrForm.defaultTime"
+                type="datetimerange"
+                range-separator="到"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                style="width: 100%;height: 100%"
+                :value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
+                :format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
+              />
+            </el-form-item>
+            <el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')">
+              <el-input v-model="nodeAttrForm.format" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
+              <el-input v-model="nodeAttrForm.field" />
+            </el-form-item>
+            <el-form-item label="时间戳字段名" v-if="Object.keys(nodeAttrForm).includes('timestampField')">
+              <el-input v-model="nodeAttrForm.timestampField" />
+            </el-form-item>
+            <el-form-item label="是否显示时间戳" v-if="Object.keys(nodeAttrForm).includes('isTimestamp')">
+              <el-switch v-model="nodeAttrForm.isTimestamp" />
+            </el-form-item>
+            <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
+              <el-input v-model="nodeAttrForm.startTimeId" />
+            </el-form-item>
+            <el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
+              <el-input v-model="nodeAttrForm.endTimeId" />
+            </el-form-item>
+            <el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
+              <el-table :data="nodeAttrForm.dataMap" style="width: 100%">
+                <el-table-column label="源字段" min-width="120">
+                  <template #default="scope">
+                    <el-input v-model="scope.row.source" style="width: 100%" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="映射字段" min-width="120">
+                  <template #default="scope">
+                    <el-input v-model="scope.row.target" style="width: 100%" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" min-width="120">
+                  <template #default="scope">
+                    <el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
+                添加映射
+              </el-button>
+            </el-form-item>
+            <el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
+              <el-input v-model="nodeAttrForm.text" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
+              <el-select
+                v-model="nodeAttrForm.align"
+                placeholder="Select"
+                style="width: 100%"
+              >
+                <el-option
+                  label="左对齐"
+                  value="left"
+                />
+                <el-option
+                  label="居中对齐"
+                  value="center"
+                />
+                <el-option
+                  label="右对齐"
+                  value="right"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
+              <el-color-picker v-model="nodeAttrForm.color" show-alpha />
+            </el-form-item>
+            <el-form-item label="背景颜色" v-if="Object.keys(nodeAttrForm).includes('backgroundColor')">
+              <el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
+            </el-form-item>
+            <el-form-item label="是否显示边框" v-if="Object.keys(nodeAttrForm).includes('isBorder')">
+              <el-switch v-model="nodeAttrForm.isBorder" />
+            </el-form-item>
+            <el-form-item label="边框颜色"
+                          v-if="Object.keys(nodeAttrForm).includes('borderColor') && nodeAttrForm.isBorder">
+              <el-color-picker v-model="nodeAttrForm.borderColor" show-alpha />
+            </el-form-item>
+            <el-form-item label="时间戳颜色" v-if="Object.keys(nodeAttrForm).includes('timestampColor')">
+              <el-color-picker v-model="nodeAttrForm.timestampColor" show-alpha />
+            </el-form-item>
+            <el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
+              <el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="图标" v-if="Object.keys(nodeAttrForm).includes('icon')">
+              <el-popover
+                placement="bottom"
+                :width="400"
+                trigger="click"
+              >
+                <template #reference>
+                  <el-input readonly v-model="nodeAttrForm.icon" style="width: 100%" placeholder="选择图标">
+                    <template #prepend>
+                      <el-button style="background-color: #0000">
+                        <template #icon>
+                          <el-icon class="el-icon--right" color="#fff">
+                            <component :is="icon[nodeAttrForm.icon]" />
+                          </el-icon>
+                        </template>
+                      </el-button>
+                    </template>
+                  </el-input>
+                </template>
+                <el-input v-model="selectIconInput" style="width: 100%" placeholder="筛选图标" />
+                <div style="height: 50vh;overflow-y: auto">
+                  <!--                  <el-tooltip-->
+                  <!--                    class="box-item"-->
+                  <!--                    effect="dark"-->
+                  <!--                    :content="i"--
+                  <!--                    placement="bottom"-->
+                  <!--                    v-for="i in icons.filter(e=>e.includes(selectIconInput))"-->
+                  <!--                  >-->
+                  <el-button :icon="icon[i]" @click="nodeAttrForm.icon = i"
+                             :type="nodeAttrForm.icon === i ? 'primary':''"
+                             v-for="i in icons.filter(e=>e.includes(selectIconInput))"
+                             style="margin-top: 4px;margin-left: 0;margin-right: 4px;" />
+                  <!--                  </el-tooltip>-->
+                </div>
+              </el-popover>
+
+            </el-form-item>
+            <el-form-item label="图标路径" v-if="Object.keys(nodeAttrForm).includes('iconSrc')">
+              <el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="视频路径" v-if="Object.keys(nodeAttrForm).includes('videoSrc')">
+              <el-input v-model="nodeAttrForm.videoSrc" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
+              <el-input v-model="nodeAttrForm.title" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
+              <el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
+            </el-form-item>
+            <el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
+              <el-input-number
+                v-model="nodeAttrForm.timeout"
+                :min="1000"
+                :step="1000"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item label="提示框" v-if="Object.keys(nodeAttrForm).includes('tooltip')">
+              <el-switch v-model="nodeAttrForm.tooltip" active-text="显示" inactive-text="隐藏" />
+            </el-form-item>
+            <el-form-item label="图例" v-if="Object.keys(nodeAttrForm).includes('legend')">
+              <el-switch v-model="nodeAttrForm.legend" active-text="显示" inactive-text="隐藏" />
+            </el-form-item>
+            <el-form-item label="饼图标签" v-if="Object.keys(nodeAttrForm).includes('label')">
+              <el-switch v-model="nodeAttrForm.label" active-text="显示" inactive-text="隐藏" />
+            </el-form-item>
+            <el-form-item label="轮播设置" v-if="Object.keys(nodeAttrForm).includes('swiperOptions')">
+              <el-button class="optionsBtn" plain @click="swiperOptionsVisible = true">
+                配置轮播图
+              </el-button>
+            </el-form-item>
+            <el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
+              <el-select
+                effect="dark"
+                v-model="nodeAttrForm.imageFit"
+                style="width: 100%"
+              >
+                <el-option
+                  label="填充满"
+                  value="fill"
+                />
+                <el-option
+                  label="固定比例"
+                  value="contain"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="图片集" v-if="Object.keys(nodeAttrForm).includes('carouselImages')">
+              <el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
+            </el-form-item>
+            <el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
+              <el-button class="optionsBtn" plain @click="tableOptionsVisible = true">
+                配置表格
+              </el-button>
+            </el-form-item>
+            <el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
+              <el-button class="optionsBtn" plain @click="tableClassOptionsVisible = true">
+                配置动画
+              </el-button>
+            </el-form-item>
+            <el-form-item label="表头高度" v-if="Object.keys(nodeAttrForm).includes('thHeight')">
+              <el-input v-model="nodeAttrForm.thHeight" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="行高度" v-if="Object.keys(nodeAttrForm).includes('tdHeight')">
+              <el-input v-model="nodeAttrForm.tdHeight" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="表头文字颜色" v-if="Object.keys(nodeAttrForm).includes('thColor')">
+              <el-color-picker v-model="nodeAttrForm.thColor" show-alpha />
+            </el-form-item>
+            <el-form-item label="行文字颜色" v-if="Object.keys(nodeAttrForm).includes('tdColor')">
+              <el-badge value="99" class="item" :offset="[-8,0]"
+                        v-for="(i,k) in nodeAttrForm.tdColor">
+                <el-color-picker style="margin-right: 4px;" v-model="nodeAttrForm.tdColor[k]" show-alpha />
+                <template #content>
+                  <div class="custom-content" @click="nodeAttrForm.tdColor.splice(k, 1)">
+                    <el-icon>
+                      <Close />
+                    </el-icon>
+                  </div>
+                </template>
+              </el-badge>
+              <el-button :icon="Plus" @click="nodeAttrForm.tdColor.push('#fff')" />
+            </el-form-item>
+            <el-form-item label="表头背景颜色" v-if="Object.keys(nodeAttrForm).includes('thBgColor')">
+              <el-color-picker v-model="nodeAttrForm.thBgColor" show-alpha />
+            </el-form-item>
+            <el-form-item label="行背景颜色" v-if="Object.keys(nodeAttrForm).includes('tdBgColor')">
+              <el-badge value="99" class="item" :offset="[-8,0]"
+                        v-for="(i,k) in nodeAttrForm.tdBgColor">
+                <el-color-picker style="margin-right: 8px;"
+                                 v-model="nodeAttrForm.tdBgColor[k]" show-alpha />
+                <template #content>
+                  <div class="custom-content" @click="nodeAttrForm.tdBgColor.splice(k, 1)">
+                    <el-icon>
+                      <Close />
+                    </el-icon>
+                  </div>
+                </template>
+              </el-badge>
+              <el-button :icon="Plus" @click="nodeAttrForm.tdBgColor.push('#fff')" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
+      <el-form :model="pageSettingForm">
+        <el-form-item label="页面大小" label-width="80px">
+          <el-input v-model="pageSettingForm.width" style="width: calc(50% - 10px)" autocomplete="off"
+                    placeholder="缺省则为不限制" />
+          <span style="width: 20px;text-align: center">
+        X
+        </span>
+          <el-input v-model="pageSettingForm.height" style="width: calc(50% - 10px)" autocomplete="off"
+                    placeholder="缺省则为不限制" />
+        </el-form-item>
+        <el-form-item label="页面背景" label-width="80px">
+          <el-upload
+            class="avatar-uploader"
+            :action="uploadFileUrl"
+            :show-file-list="false"
+            :limit="1"
+            accept=".jpg,.png"
+            :headers="headers"
+            :on-success="pageBgUploadSuccess"
+          >
+            <img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="pageSettingVisible = false">取消</el-button>
+          <el-button type="primary" @click="setPageData">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="tableOptionsVisible" title="表格设置" width="800">
+      <el-table :data="nodeAttrForm.tableOptions">
+        <el-table-column label="列名称" width="150">
+          <template #default="scope">
+            <el-input v-model="scope.row.name" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="数据字段" width="200">
+          <template #default="scope">
+            <el-input v-model="scope.row.field" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="列宽">
+          <template #default="scope">
+            <el-input v-model="scope.row.width" style="width: 100%" />
+          </template>
+        </el-table-column>
+        <el-table-column label="对齐方式">
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.align"
+              placeholder="请选择"
+              style="width: 100%"
+            >
+              <el-option
+                label="左对齐"
+                value="left"
+              />
+              <el-option
+                label="居中"
+                value="center"
+              />
+              <el-option
+                label="右对齐"
+                value="right"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型">
+          <template #default="scope">
+            <el-select
+              v-model="scope.row.type"
+              placeholder="请选择"
+              style="width: 100%"
+            >
+              <el-option
+                label="文本"
+                value="文本"
+              />
+              <el-option
+                label="标签"
+                value="标签"
+              />
+              <el-option
+                label="图片"
+                value="图片"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button :icon="Delete" circle @click="nodeAttrForm.tableOptions.splice(scope.$index, 1)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-button size="small" :icon="Plus" style="width: 100%" @click="nodeAttrForm.tableOptions.push({})">添加
+      </el-button>
+    </el-dialog>
+    <el-dialog v-model="tableClassOptionsVisible" title="动画设置" width="500">
+      <el-form :model="nodeAttrForm.tableClassOption" label-width="auto">
+        <el-form-item label="滚动速度">
+          <el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.step" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="开启滚动的数据量">
+          <el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.limitMoveNum" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="鼠标悬停停止">
+          <el-switch v-model="nodeAttrForm.tableClassOption.hoverStop" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="tableClassOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog v-model="swiperOptionsVisible" title="轮播设置" width="500">
+      <el-form v-if="swiperOptionsVisible" :model="nodeAttrForm.swiperOptions" label-width="auto">
+        <el-form-item label="自动播放">
+          <el-switch v-model="nodeAttrForm.swiperOptions.autoplay" />
+        </el-form-item>
+        <el-form-item label="切换间隔">
+          <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.delay" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="鼠标悬停停止">
+          <el-switch v-model="nodeAttrForm.swiperOptions.pauseOnMouseEnter" />
+        </el-form-item>
+        <el-form-item label="过渡时间">
+          <el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.speed" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="循环播放">
+          <el-switch v-model="nodeAttrForm.swiperOptions.loop" />
+        </el-form-item>
+        <el-form-item label="显示导航按钮">
+          <el-switch v-model="nodeAttrForm.swiperOptions.navigation" />
+        </el-form-item>
+        <el-form-item label="动画效果">
+          <el-select
+            v-model="nodeAttrForm.swiperOptions.effect"
+            style="width: 100%"
+          >
+            <el-option
+              label="默认"
+              value="slide"
+            />
+            <el-option
+              label="淡入淡出"
+              value="fade"
+            />
+            <el-option
+              label="立方体"
+              value="cube"
+            />
+            <el-option
+              label="翻转"
+              value="flip"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="swiperOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+
+import FlowRuler from './FlowRuler.vue';
+import {
+  ArrowDown,
+  View,
+  DocumentChecked,
+  Close,
+  Plus,
+  Setting,
+  StarFilled,
+  Delete
+} from '@element-plus/icons-vue';
+import * as icon from '@element-plus/icons-vue';
+import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
+import tool, { options } from '@/views/boardGenerate/tool.js';
+import { v4 as uuidv4 } from 'uuid';
+import { Background } from '@vue-flow/background';
+import CarouselNode from '@/views/boardGenerate/nodes/board/carouselNode.vue';
+import CustomBoardNode from '@/views/boardGenerate/nodes/board/customBoardNode.vue';
+import DataNode from '@/views/boardGenerate/nodes/data/dataNode.vue';
+import ImgNode from '@/views/boardGenerate/nodes/form/imgNode.vue';
+import TimelineNode from '@/views/boardGenerate/nodes/form/timelineNode.vue';
+import ScrollTableNode from '@/views/boardGenerate/nodes/form/scrollTableNode.vue';
+import TextNode from '@/views/boardGenerate/nodes/form/textNode.vue';
+import CurveNode from '@/views/boardGenerate/nodes/board/curveNode.vue';
+import PieNode from '@/views/boardGenerate/nodes/board/pieNode.vue';
+import LineNode from '@/views/boardGenerate/nodes/board/lineNode.vue';
+import MultiLinesNode from '@/views/boardGenerate/nodes/board/multiLinesNode.vue';
+import BackgroundBarNode from '@/views/boardGenerate/nodes/board/backgroundBarNode.vue';
+import MultiCurvesNode from '@/views/boardGenerate/nodes/board/multiCurvesNode.vue';
+import DigitalFlopNode from '@/views/boardGenerate/nodes/form/digitalFlopNode.vue';
+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 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';
+import VideoNode from '@/views/boardGenerate/nodes/form/videoNode.vue';
+import BarNode from '@/views/boardGenerate/nodes/board/barNode.vue';
+import CustomDataNode from '@/views/boardGenerate/nodes/data/customDataNode.vue';
+import AreaNode from '@/views/boardGenerate/nodes/other/areaNode.vue';
+import StaticDataNode from '@/views/boardGenerate/nodes/data/staticDataNode.vue';
+import MapNode from '@/views/boardGenerate/nodes/form/mapNode.vue';
+import { getDataSourceList } from '@/views/boardGenerate/api/dataSource.js';
+import { editBoardApi, getBoardApi } from '@/views/boardGenerate/api/boardList.js';
+import { globalHeaders } from '@/utils/request.ts';
+
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = ref(globalHeaders());
+const { onDragStart, onDrop, onDragOver } = tool();
+const router = useRouter();
+
+const {
+  addEdges,
+  updateNode,
+  removeNodes,
+  addNodes
+} = useVueFlow();
+
+onMounted(async () => {
+  icons.value = Object.keys(icon);
+  loading.value = true;
+  getDataSourceList({
+    pageNum: 1,
+    pageSize: 9999999
+  })
+    .then((res) => {
+      customData.value = res.rows.map(e => {
+        return {
+          name: e.dataSourceName,
+          url: e.requestUrl,
+          method: e.requestMethod,
+          outputData: e.designDataFieldList
+        };
+      });
+    });
+  customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
+  await nextTick();
+  getBoardApi(router.currentRoute.value.query.id)
+    .then((res) => {
+      let data = res.data;
+      boardData.value = data;
+      nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.sort((a, b) => a.fieldOne - b.fieldOne).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
+        };
+      }) || [];
+      pageData.value = JSON.parse(data.customContent) || {};
+    })
+    .finally(() => {
+
+      loading.value = false;
+    });
+});
+const icons = ref([]);
+const selectIconInput = ref('');
+const collapseActiveName = ref('1');
+const loading = ref(false);
+const pageSettingVisible = ref(false);
+const tableOptionsVisible = ref(false);
+const tableClassOptionsVisible = ref(false);
+const swiperOptionsVisible = ref(false);
+const tabs = ref(0);
+const nodes = ref([{
+  id: `area_${uuidv4().replaceAll('-', '_')}`,
+  name: 'area',
+  type: 'area',
+  position: {
+    x: 0,
+    y: 0
+  },
+  data: {}
+}]);
+const edges = ref([]);
+const customData = ref([]);
+const customBoard = ref([]);
+const boardData = ref({});
+const pageData = ref({});
+const customDataForm = ref({});
+const nodeAttrForm = ref({});
+const nodeDataForm = ref({});
+const pageSettingForm = ref({});
+const logEvent = async (eventname, event) => {
+  switch (eventname) {
+    case 'connect':
+      if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
+        addEdges({
+          id: `${event.source}---${event.target}`,
+          source: event.source,
+          target: event.target,
+          type: 'bezier',
+          animated: true,
+          markerEnd: MarkerType.ArrowClosed,
+          sourceHandle: event.sourceHandle,
+          style: { stroke: '#409EFF' }
+        });
+      }
+      break;
+    case 'paneClick':
+      nodeAttrForm.value = {};
+      nodeDataForm.value = {};
+      customDataForm.value = {};
+      break;
+    case 'click':
+      nodeAttrForm.value = event.node.data.options;
+      nodeDataForm.value = event.node;
+      customDataForm.value = event.node.data.customData;
+      break;
+    case 'nodeDrag':
+      console.log(event.nodes);
+      if (event.nodes.length === 1) {
+        nodeAttrForm.value = event.node.data.options;
+        nodeDataForm.value = event.node;
+        customDataForm.value = event.node.data.customData;
+      } else {
+        nodeAttrForm.value = {};
+        nodeDataForm.value = {};
+        customDataForm.value = {};
+      }
+      break;
+    case 'contextmenu':
+      console.log('contextmenu', event);
+  }
+};
+const resize = (e, id) => {
+  nodes.value.forEach((item) => {
+    if (item.selected && item.id !== id) {
+      item.dimensions = {
+        width: e.params.width,
+        height: e.params.height
+      };
+    }
+  });
+};
+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;
+};
+const selectTabs = (e) => {
+  tabs.value = e;
+};
+
+const pageSetting = () => {
+  pageSettingVisible.value = true;
+  pageSettingForm.value = pageData.value;
+};
+const save = () => {
+  loading.value = true;
+  editBoardApi({
+    ...boardData.value,
+    customContent: JSON.stringify(pageSettingForm.value),
+    designPagePointList: nodes.value.map((e, index) => {
+      let data = {};
+      let savaField = ['customData', 'options'];
+      Object.keys(e.data).forEach((key) => {
+        if (savaField.includes(key)) {
+          data[key] = e.data[key];
+        } else {
+          if (Array.isArray(e.data[key])) {
+            data[key] = [];
+          } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+            data[key] = {};
+          } else {
+            data[key] = null;
+          }
+        }
+      });
+      return {
+        activeFlag: '1',
+        pageConfigId: boardData.value.pageConfigId,
+        pagePointId: e.id,
+        pagePointName: e.name,
+        fieldOne: index,
+        width: e.dimensions.width,
+        height: e.dimensions.height,
+        posX: e.position.x,
+        posY: e.position.y,
+        pointType: e.type,
+        dataContent: JSON.stringify(data)
+      };
+    }),
+    designPageEdgesList: edges.value.map(e => {
+      console.log(e);
+      return {
+        activeFlag: '1',
+        pageConfigId: boardData.value.pageConfigId,
+        pageEdgesId: e.id,
+        sourceNodeId: e.source,
+        targetNodeId: e.target,
+        edgeType: e.type,
+        targetHandleId: e.targetHandle,
+        sourceHandleId: e.sourceHandle
+      };
+    })
+  }).then(() => {
+    ElMessage({
+      type: 'success',
+      message: '保存成功'
+    });
+  })
+    .finally(() => {
+      loading.value = false;
+    });
+  // localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
+  //   let data = {};
+  //   let savaField = ['customData', 'options'];
+  //   Object.keys(e.data).forEach((key) => {
+  //     if (savaField.includes(key)) {
+  //       data[key] = e.data[key];
+  //     } else {
+  //       if (Array.isArray(e.data[key])) {
+  //         data[key] = [];
+  //       } else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
+  //         data[key] = {};
+  //       } else {
+  //         data[key] = null;
+  //       }
+  //
+  //     }
+  //   });
+  //   return {
+  //     id: e.id,
+  //     name: e.name,
+  //     dimensions: e.dimensions,
+  //     position: e.position,
+  //     type: e.type,
+  //     data: data
+  //   };
+  // })));
+  // localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => {
+  //   return {
+  //     id: e.id,
+  //     source: e.source,
+  //     target: e.target,
+  //     type: e.type,
+  //     animated: e.animated,
+  //     markerEnd: e.markerEnd,
+  //     targetHandle: e.targetHandle,
+  //     sourceHandle: e.sourceHandle,
+  //     style: e.style
+  //   };
+  // })));
+};
+const clear = () => {
+  nodes.value = [{
+    id: `area_${uuidv4().replaceAll('-', '_')}`,
+    name: 'area',
+    type: 'area',
+    position: {
+      x: 0,
+      y: 0
+    },
+    data: {}
+  }];
+  edges.value = [];
+
+};
+const pageBgUploadSuccess = (res) => {
+  // const getFileText = (file) => {
+  //   const reader = new FileReader();
+  //   reader.onload = function(e) {
+  //     const fileContent = e.target.result;
+  //     console.log(fileContent);
+  //     pageSettingForm.value.bg = fileContent;
+  //   };
+  //   reader.readAsDataURL(file);
+  // };
+  // getFileText(file);
+  // return false;
+  if (res.code === 200) {
+    pageSettingForm.value.bg = res.data.url;
+  }
+};
+const nodeOperate = (data) => {
+  let type = data.type;
+  const index = nodes.value.indexOf(data.node);
+  let arr = JSON.parse(JSON.stringify(nodes.value));
+  const item = arr[index];
+  switch (type) {
+    case 'toTop':
+      nodes.value = [...nodes.value.filter(e => e.id !== data.node.id), data.node];
+      break;
+    case 'moveUp':
+      arr.splice(index, 1);
+      arr.splice(index + 1, 0, item);
+      nodes.value = arr;
+      break;
+    case 'moveDown':
+      arr.splice(index, 1);
+      arr.splice(index - 1, 0, item);
+      nodes.value = arr;
+      break;
+    case 'copy':
+      item.id = options.getId(item.type);
+      addNodes(item);
+      break;
+    case 'del':
+      removeNodes([data.node.id]);
+      break;
+  }
+};
+const pitchOnNode = (e) => {
+  nodes.value.forEach(v => {
+    if (v.id === e.id) {
+      v.selected = true;
+    } else {
+      v.selected = false;
+    }
+  });
+  nodeAttrForm.value = e.data.options;
+  nodeDataForm.value = e;
+  customDataForm.value = e.data.customData;
+};
+</script>
+<style scoped lang="less">
+
+:deep(.swiper-slide-active) {
+  pointer-events: none;
+}
+
+:deep(.vue-flow__node-area) {
+  z-index: -1 !important;
+  pointer-events: none !important;
+}
+
+.custom-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.boardGenerate {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  --boardGenerateTopHeight: 50px;
+
+  .top {
+    width: 100%;
+    height: var(--boardGenerateTopHeight);
+    background-color: #1C1F20;
+    border-bottom: 1px solid #000;
+    position: relative;
+
+    .componentMenu {
+      display: inline-block;
+    }
+
+    .optionsMenu {
+      vertical-align: top;
+      display: inline-block;
+      position: absolute;
+      right: 20px;
+    }
+  }
+
+  .left {
+    width: 200px;
+    display: inline-block;
+    height: calc(100vh - var(--boardGenerateTopHeight));
+    overflow: auto;
+    background-color: #1C1F20;
+    border-right: 1px solid #000;
+
+    .title {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      color: #FFF;
+      background-color: #293133;
+      border-bottom: 1px solid #000;
+    }
+
+    .levels {
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow: auto;
+      background-color: #1C1F20;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .level {
+
+        display: flex;
+        align-items: center;
+        height: 50px;
+        padding-left: 20px;
+        border-bottom: 1px solid #000;
+
+        .isShow, .icon, .boardName {
+          display: flex;
+          align-items: center;
+        }
+
+        .isShow {
+          width: 30px;
+          min-width: 30px;
+          height: 50px;
+          border-right: 1px solid #000;
+        }
+
+        .icon {
+          width: 40px;
+          min-width: 40px;
+        }
+
+        .boardName {
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+
+      .isSelect {
+        background-color: #494949;
+
+        .isShow {
+          border-right: 1px solid #373737;
+        }
+      }
+    }
+
+  }
+
+  .center {
+    width: calc(100% - 500px);
+    display: inline-block;
+    background-color: #1C1F20;
+    height: calc(100vh - var(--boardGenerateTopHeight));
+    overflow: auto;
+  }
+
+  .right {
+    width: 300px;
+    display: inline-block;
+    height: calc(100vh - var(--boardGenerateTopHeight));
+    overflow: auto;
+    background-color: #1C1F20;
+    border-left: 1px solid #000;
+
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid black;
+      background-color: #1C1F20;
+
+      .tab {
+        padding: 8px 16px;
+        font-size: 14px;
+        background: transparent;
+        cursor: pointer;
+        color: #ccc;
+      }
+
+      .tab.active {
+        background: #222;
+        color: #fff;
+        border-bottom: none;
+        border-radius: 4px 4px 0 0;
+        position: relative;
+        top: 1px;
+        z-index: 1;
+      }
+    }
+
+    .tabItems {
+      width: 100%;
+      height: calc(100% - 50px);
+      background-color: #222;
+
+      .tabItem {
+        .el-collapse {
+          border: none;
+
+          :deep(.el-collapse-item) {
+            .el-collapse-item__header {
+              background-color: #0000;
+              color: #ccc;
+              border: none;
+            }
+
+            .el-collapse-item__wrap {
+              background-color: #0000;
+              border: none;
+            }
+          }
+
+        }
+
+        :deep(.el-form-item__label) {
+          color: #ccc;
+        }
+
+        :deep(.el-input__wrapper) {
+          background: #222;
+          border-color: #333;
+          box-shadow: 0 0 0 1px #666 inset;
+
+          .el-input__inner {
+            color: #ccc;
+          }
+        }
+
+        :deep(.el-input-number__decrease) {
+          background-color: #666;
+          border: none;
+          color: #ccc;
+        }
+
+        :deep(.el-input-number__increase) {
+          background-color: #666;
+          border: none;
+          color: #ccc;
+        }
+
+        :deep(.el-input-tag) {
+          background: #222;
+          border-color: #333;
+          box-shadow: 0 0 0 1px #666 inset;
+
+          .el-input-tag__inner {
+            .el-tag {
+              background-color: #666;
+              color: #ccc;
+            }
+          }
+        }
+
+        :deep(.el-switch__label) {
+          color: #ccc;
+
+          &.is-active {
+            color: var(--el-color-primary);
+          }
+        }
+
+        :deep(.el-input-group__prepend) {
+          background-color: #0000;
+          border: 1px solid #666;
+          box-shadow: none;
+        }
+
+        .optionsBtn {
+          background-color: #0000;
+          border-color: #ccc;
+          color: #ccc;
+        }
+
+        :deep(.el-select__wrapper) {
+          background-color: #666;
+          border: none;
+          color: #ccc;
+
+          .el-select__placeholder {
+            color: #ccc;
+          }
+        }
+
+        :deep(.el-textarea__inner) {
+          background-color: #0000;
+          border: none;
+          color: #ccc;
+          box-shadow: 0 0 0 1px #666 inset;
+        }
+
+        :deep(.el-table) {
+
+        }
+      }
+    }
+
+  }
+}
+
+.moduleCard {
+  width: 80px;
+  vertical-align: top;
+
+  :deep(.el-card__body) {
+    height: 40px;
+    padding: 0 !important;
+  }
+
+  .moduleText {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+</style>