diff --git a/src/router/index.ts b/src/router/index.ts
index 97fb91d..fafc8b6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,16 +49,6 @@ export const constantRoutes: RouteRecordRaw[] = [
     hidden: true,
     component: () => import('@/views/boardGenerate/index.vue')
   },
-  {
-    path: '/boardGenerate1',
-    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/boardList.vue b/src/views/boardGenerate/boardList.vue
index 6bd0281..2c362d3 100644
--- a/src/views/boardGenerate/boardList.vue
+++ b/src/views/boardGenerate/boardList.vue
@@ -168,7 +168,7 @@ const createData = () => {
   }
 };
 const compileBoard = (row) => {
-  router.push({ path: '/boardGenerate1', query: { id: row.pageConfigId } });
+  router.push({ path: '/boardGenerate', query: { id: row.pageConfigId } });
 };
 const viewboard = (row) => {
   router.push({ path: '/boardView', query: { id: row.pageConfigId } });
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 4bc696e..ecae15a 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -1,373 +1,655 @@
 <template>
-  <div>
-    <div class="leftPanel">
-      <el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
-        <el-tab-pane label="图表组件" name="1">
-          <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 class="boardGenerate">
+    <div class="top">
+      <!--      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>-->
+      <div class="componentMenu">
+        <el-popover
+          :width="880"
+          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>
-          </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>
-          <template v-for="i in customBoard">
+          </template>
+          <div>
             <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'customBoard',i)"
+                     @dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <el-image style="width: 100%; height: 100%" :src="lineImg" fit="contain" />
+              </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 />
+                <el-image style="width: 100%; height: 100%" :src="multiLinesImg" fit="contain" />
               </template>
-              <div class="moduleText">{{ i.name }}</div>
+              <div class="moduleText">多折线</div>
             </el-card>
-          </template>
-        </el-tab-pane>
-        <el-tab-pane label="数据源" name="2">
-          <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)"
+                     @dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <el-image style="width: 100%; height: 100%" :src="curveImg" fit="contain" />
+              </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 />
+                <el-image style="width: 100%; height: 100%" :src="multiCurvesImg" fit="contain" />
               </template>
-              <div class="moduleText">{{ i.name }}</div>
+              <div class="moduleText">多曲线
+              </div>
             </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'lineBar')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <el-image style="width: 100%; height: 100%" :src="lineBarImg" fit="contain" />
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="barImg" fit="contain" />
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="backgroundBarImg" fit="contain" />
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="multiBarsImg" fit="contain" />
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="pieImg" fit="contain" />
+              </template>
+              <div class="moduleText">饼图</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'annular')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <el-image style="width: 100%; height: 100%" :src="annularImg" fit="contain" />
+              </template>
+              <div class="moduleText">中空饼图</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'dashboard')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <el-image style="width: 100%; height: 100%" :src="dashboardImg" fit="contain" />
+              </template>
+              <div class="moduleText">仪表盘</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'radar')"
+                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                     :body-style="{padding:'4px 0'}">
+              <template #header>
+                <el-image style="width: 100%; height: 100%" :src="radarImg" fit="contain" />
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="nightingaleRoseDiagramImg" fit="contain" />
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="carouselImg" fit="contain" />
+              </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>
-        </el-tab-pane>
-        <el-tab-pane label="表单组件" name="3">
-          <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 />
+          <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>
+                <div style="width: 100%;height: 100px;text-align: center">
+
+                  <el-image style="width:80px;height: 80px;margin-top: 10px;" :src="mapImg" fit="contain" />
+                </div>
+              </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>
+                <el-image style="width: 100%; height: 100%" :src="customizationRequestImg" fit="contain" />
+              </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>-->
+            <!--                <el-image style="width: 100%; height: 100%" :src="network" fit="contain" />-->
+            <!--              </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>
+                  <el-image style="width: 100%; height: 100%" :src="network" fit="contain" />
+                </template>
+                <div class="moduleText">{{ i.name }}</div>
+              </el-card>
             </template>
-            <div class="moduleText">文字</div>
-          </el-card>
-          <el-card class="moduleCard" shadow="never" :draggable="true"
-                   @dragstart="onDragStart($event, 'buttonNode')" :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>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <div class="content" @drop="onDrop">
-      <div class="pageSetting">
-        <span class="pageTitle">{{ pageTitle }}</span>
-        <div class="btns">
-          <el-button type="primary" text :icon="Setting" @click="pageSetting">页面配置</el-button>
-          <el-button type="primary" text :icon="Check" @click="save">保存</el-button>
-          <el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
-        </div>
+          </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain" />
+                </div>
+              </template>
+              <div class="moduleText">文字</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'buttonNode')"
+                     :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, 'inputNode')"
+                     :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, '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'}">
+              <template #header>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="timeImg" fit="contain" />
+                </div>
+              </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="imgImg" fit="contain" />
+                </div>
+              </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="iconImg" fit="contain" />
+                </div>
+              </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="videoImg" fit="contain" />
+                </div>
+              </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="timelineImg" fit="contain" />
+                </div>
+              </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="digitalFlopImg" fit="contain" />
+                </div>
+              </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>
+                <el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain" />
+              </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>
+                <div style="width: 100%;height: 100%;text-align: center">
+                  <el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain" />
+                </div>
+              </template>
+              <div class="moduleText">滚动表格</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'background')"
+                     :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="backgroundimg" fit="contain" />
+                </div>
+              </template>
+              <div class="moduleText">背景</div>
+            </el-card>
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'pagination')"
+                     :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="backgroundimg" fit="contain" />
+                </div>
+              </template>
+              <div class="moduleText">分页</div>
+            </el-card>
+          </div>
+        </el-popover>
       </div>
-      <div class="flowArea" v-loading="loading">
-        <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"
+      <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="isLock">
+              <el-icon style="cursor: pointer" color="#fff" :size="16" @click="i.draggable = !i.draggable">
+                <Unlock v-if="i.draggable" />
+                <Lock v-if="!i.draggable" />
+              </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: 'toBottom', 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"
+          :snapToGrid="isSnapToGrid"
+          :snapGrid="[10, 10]"
+          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>
+            <AreaNode v-bind="areaNodeProps" :pageData="pageData" @resize="(e) => handleResizeStop(e, areaNodeProps)" />
           </template>
+
           <template #node-customBoard="customBoardNodeProps">
-            <CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
-                             @resize="resize"></CustomBoardNode>
+            <CustomBoardNode v-bind="customBoardNodeProps" :inputData="getInputData(customBoardNodeProps.id)"
+                             @resize="(e) => handleResizeStop(e, customBoardNodeProps)" />
           </template>
+
           <template #node-customData="customDataNodeProps">
-            <CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
-                            @resize="resize"></CustomDataNode>
+            <CustomDataNode v-bind="customDataNodeProps" :inputData="getInputData(customDataNodeProps.id)"
+                            @resize="(e) => handleResizeStop(e, customDataNodeProps)" />
           </template>
+
           <template #node-line="lineNodeProps">
-            <LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
-                      @resize="resize"></LineNode>
+            <LineNode v-bind="lineNodeProps" :inputData="getInputData(lineNodeProps.id)"
+                      @resize="(e) => handleResizeStop(e, lineNodeProps)" />
           </template>
+
           <template #node-multiLines="multiLinesNodeProps">
-            <MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
-                            @resize="resize"></MultiLinesNode>
+            <MultiLinesNode v-bind="multiLinesNodeProps" :inputData="getInputData(multiLinesNodeProps.id)"
+                            @resize="(e) => handleResizeStop(e, multiLinesNodeProps)" />
           </template>
+
           <template #node-curve="curveNodeProps">
-            <CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps"
-                       @resize="resize"></CurveNode>
+            <CurveNode v-bind="curveNodeProps" :inputData="getInputData(curveNodeProps.id)"
+                       @resize="(e) => handleResizeStop(e, curveNodeProps)" />
           </template>
+
           <template #node-multiCurves="multiCurvesNodeProps">
-            <MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps"
-                             @resize="resize"></MultiCurvesNode>
+            <MultiCurvesNode v-bind="multiCurvesNodeProps" :inputData="getInputData(multiCurvesNodeProps.id)"
+                             @resize="(e) => handleResizeStop(e, multiCurvesNodeProps)" />
           </template>
+
+          <template #node-lineBar="lineBarNodeProps">
+            <LineBarNode v-bind="lineBarNodeProps" :inputData="getInputData(lineBarNodeProps.id)"
+                         @resize="(e) => handleResizeStop(e, lineBarNodeProps)" />
+          </template>
+
           <template #node-bar="barNodeProps">
-            <BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps"
-                     @resize="resize"></BarNode>
+            <BarNode v-bind="barNodeProps" :inputData="getInputData(barNodeProps.id)"
+                     @resize="(e) => handleResizeStop(e, barNodeProps)" />
           </template>
+
           <template #node-backgroundBar="backgroundBarNodeProps">
-            <BackgroundBarNode :inputData=getInputData(backgroundBarNodeProps.id) v-bind="backgroundBarNodeProps"
-                               @resize="resize"></BackgroundBarNode>
+            <BackgroundBarNode v-bind="backgroundBarNodeProps" :inputData="getInputData(backgroundBarNodeProps.id)"
+                               @resize="(e) => handleResizeStop(e, backgroundBarNodeProps)" />
           </template>
+
           <template #node-multiBars="multiBarsNodeProps">
-            <MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps"
-                           @resize="resize"></MultiBarsNode>
+            <MultiBarsNode v-bind="multiBarsNodeProps" :inputData="getInputData(multiBarsNodeProps.id)"
+                           @resize="(e) => handleResizeStop(e, multiBarsNodeProps)" />
           </template>
+
           <template #node-pie="pieNodeProps">
-            <PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
-                     @resize="resize"></PieNode>
+            <PieNode v-bind="pieNodeProps" :inputData="getInputData(pieNodeProps.id)"
+                     @resize="(e) => handleResizeStop(e, pieNodeProps)" />
           </template>
+
+          <template #node-annular="annularNodeProps">
+            <AnnularNode v-bind="annularNodeProps" :inputData="getInputData(annularNodeProps.id)"
+                         @resize="(e) => handleResizeStop(e, annularNodeProps)" />
+          </template>
+
+          <template #node-radar="radarNodeProps">
+            <RadarNode v-bind="radarNodeProps" :inputData="getInputData(radarNodeProps.id)"
+                       @resize="(e) => handleResizeStop(e, radarNodeProps)" />
+          </template>
+
+          <template #node-dashboard="dashboardNodeProps">
+            <DashboardNode v-bind="dashboardNodeProps" :inputData="getInputData(dashboardNodeProps.id)"
+                           @resize="(e) => handleResizeStop(e, dashboardNodeProps)" />
+          </template>
+
           <template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
-            <NightingaleRoseDiagramNode :inputData=getInputData(nightingaleRoseDiagramNodeProps.id)
-                                        v-bind="nightingaleRoseDiagramNodeProps"
-                                        @resize="resize"></NightingaleRoseDiagramNode>
+            <NightingaleRoseDiagramNode v-bind="nightingaleRoseDiagramNodeProps"
+                                        :inputData="getInputData(nightingaleRoseDiagramNodeProps.id)"
+                                        @resize="(e) => handleResizeStop(e, nightingaleRoseDiagramNodeProps)" />
           </template>
+
           <template #node-carousel="carouselNodeProps">
-            <CarouselNode :inputData=getInputData(carouselNodeProps.id) v-bind="carouselNodeProps"
-                          @resize="resize"></CarouselNode>
+            <CarouselNode v-bind="carouselNodeProps" :inputData="getInputData(carouselNodeProps.id)"
+                          @resize="(e) => handleResizeStop(e, carouselNodeProps)" />
           </template>
+
           <template #node-data="dataNodeProps">
-            <DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
-                      @resize="resize"></DataNode>
+            <DataNode v-bind="dataNodeProps" :inputData="getInputData(dataNodeProps.id)"
+                      @resize="(e) => handleResizeStop(e, dataNodeProps)" />
           </template>
+
           <template #node-text="textNodeProps">
-            <TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps"
-                      @resize="resize"></TextNode>
+            <TextNode v-bind="textNodeProps" :inputData="getInputData(textNodeProps.id)"
+                      @resize="(e) => handleResizeStop(e, textNodeProps)" />
           </template>
+
           <template #node-img="imgNodeProps">
-            <ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
-                     @resize="resize"></ImgNode>
+            <ImgNode v-bind="imgNodeProps" :inputData="getInputData(imgNodeProps.id)"
+                     @resize="(e) => handleResizeStop(e, imgNodeProps)" />
           </template>
+
           <template #node-icon="iconNodeProps">
-            <IconNode :inputData=getInputData(iconNodeProps.id) v-bind="iconNodeProps"
-                      @resize="resize"></IconNode>
+            <IconNode v-bind="iconNodeProps" :inputData="getInputData(iconNodeProps.id)"
+                      @resize="(e) => handleResizeStop(e, iconNodeProps)" />
           </template>
+
           <template #node-video="videoNodeProps">
-            <VideoNode :inputData=getInputData(videoNodeProps.id) v-bind="videoNodeProps"
-                       @resize="resize"></VideoNode>
+            <VideoNode v-bind="videoNodeProps" :inputData="getInputData(videoNodeProps.id)"
+                       @resize="(e) => handleResizeStop(e, videoNodeProps)" />
           </template>
+
           <template #node-timeline="timelineNodeProps">
-            <TimelineNode :inputData=getInputData(timelineNodeProps.id) v-bind="timelineNodeProps"
-                          @resize="resize"></TimelineNode>
+            <TimelineNode v-bind="timelineNodeProps" :inputData="getInputData(timelineNodeProps.id)"
+                          @resize="(e) => handleResizeStop(e, timelineNodeProps)" />
           </template>
+
           <template #node-digitalFlop="digitalFlopNodeProps">
-            <DigitalFlopNode :inputData=getInputData(digitalFlopNodeProps.id) v-bind="digitalFlopNodeProps"
-                             @resize="resize"></DigitalFlopNode>
+            <DigitalFlopNode v-bind="digitalFlopNodeProps" :inputData="getInputData(digitalFlopNodeProps.id)"
+                             @resize="(e) => handleResizeStop(e, digitalFlopNodeProps)" />
           </template>
 
           <template #node-inputNode="inputNodeProps">
-            <InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
-                       @resize="resize"></InputNode>
+            <InputNode v-bind="inputNodeProps" :inputData="getInputData(inputNodeProps.id)"
+                       @resize="(e) => handleResizeStop(e, inputNodeProps)" />
           </template>
+
           <template #node-buttonNode="buttonNodeProps">
-            <ButtonNode :inputData=getInputData(buttonNodeProps.id) v-bind="buttonNodeProps"
-                        @resize="resize"></ButtonNode>
+            <ButtonNode v-bind="buttonNodeProps" :inputData="getInputData(buttonNodeProps.id)"
+                        @resize="(e) => handleResizeStop(e, buttonNodeProps)" />
           </template>
+
+          <template #node-selectNode="selectNodeProps">
+            <SelectNode v-bind="selectNodeProps" :inputData="getInputData(selectNodeProps.id)"
+                        @resize="(e) => handleResizeStop(e, selectNodeProps)" />
+          </template>
+
           <template #node-time="timeNodeProps">
-            <TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
-                      @resize="resize"></TimeNode>
+            <TimeNode v-bind="timeNodeProps" :inputData="getInputData(timeNodeProps.id)"
+                      @resize="(e) => handleResizeStop(e, timeNodeProps)" />
           </template>
+
           <template #node-map="mapNodeProps">
-            <MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
-                     @resize="resize"></MapNode>
+            <MapNode v-bind="mapNodeProps" :inputData="getInputData(mapNodeProps.id)"
+                     @resize="(e) => handleResizeStop(e, mapNodeProps)" />
           </template>
+
           <template #node-staticData="staticDataNodeProps">
-            <StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps"
-                            @resize="resize"></StaticDataNode>
+            <StaticDataNode v-bind="staticDataNodeProps" :inputData="getInputData(staticDataNodeProps.id)"
+                            @resize="(e) => handleResizeStop(e, staticDataNodeProps)" />
           </template>
+
           <template #node-table="tableNodeProps">
-            <TableNode :inputData=getInputData(tableNodeProps.id) v-bind="tableNodeProps"
-                       @resize="resize"></TableNode>
+            <TableNode v-bind="tableNodeProps" :inputData="getInputData(tableNodeProps.id)"
+                       @resize="(e) => handleResizeStop(e, tableNodeProps)" />
           </template>
+
           <template #node-scrollTable="scrollTableNodeProps">
-            <ScrollTableNode :inputData=getInputData(scrollTableNodeProps.id) v-bind="scrollTableNodeProps"
-                             @resize="resize"></ScrollTableNode>
+            <ScrollTableNode v-bind="scrollTableNodeProps" :inputData="getInputData(scrollTableNodeProps.id)"
+                             @resize="(e) => handleResizeStop(e, scrollTableNodeProps)" />
+          </template>
+
+          <template #node-background="backgroundNodeProps">
+            <BackgroundNode v-bind="backgroundNodeProps" :inputData="getInputData(backgroundNodeProps.id)"
+                            @resize="(e) => handleResizeStop(e, backgroundNodeProps)" />
+          </template>
+
+          <template #node-pagination="paginationNodeProps">
+            <PaginationNode v-bind="paginationNodeProps" :inputData="getInputData(paginationNodeProps.id)"
+                            @resize="(e) => handleResizeStop(e, paginationNodeProps)" />
           </template>
         </VueFlow>
-      </div>
+
+      </FlowRuler>
     </div>
-    <div class="rightPanel">
-      <el-collapse
-        v-if="Object.keys(nodeDataForm).length>0 || Object.keys(nodeAttrForm).length>0|| Object.keys(customDataForm).length>0">
-        <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
+    <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%" />
@@ -389,397 +671,731 @@
                                @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
             </el-form-item>
           </el-form>
-        </el-collapse-item>
-        <el-collapse-item title="组件配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
+        </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-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="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
-              <el-input v-model="nodeAttrForm.xName" 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 :icon="icon[nodeAttrForm.icon]" />
-                    </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 plain @click="swiperOptionsVisible = true">
-                配置轮播图
-              </el-button>
-            </el-form-item>
-            <el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
-              <el-select
-                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 plain @click="tableOptionsVisible = true">
-                配置表格
-              </el-button>
-            </el-form-item>
-            <el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
-              <el-button 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>
-        </el-collapse-item>
-        <el-collapse-item title="自定义配置" name="3" v-if="Object.keys(customDataForm||{}).length>0">
-          <el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
-            <el-form-item label="自定义内容" v-if="Object.keys(customDataForm).includes('option')">
-              <el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
-            </el-form-item>
-            <el-form-item label="请求地址" v-if="Object.keys(customDataForm).includes('url')">
-              <el-input v-model="customDataForm.url">
-                <template #prepend>
-                  <el-select v-model="customDataForm.method" style="width: 100px">
-                    <el-option label="get" value="get" />
-                    <el-option label="post" value="post" />
-                    <el-option label="socket" value="socket" />
+            <el-collapse v-model="collapseActiveName" accordion expand-icon-position="left">
+              <el-collapse-item title="x轴设置" name="1" v-if="Object.keys(nodeAttrForm).includes('xName')">
+                <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-form-item label="x轴名称位置" v-if="Object.keys(nodeAttrForm).includes('xNameLocation')">
+                  <el-select
+                    v-model="nodeAttrForm.xNameLocation"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="左侧"
+                      value="start"
+                    />
+                    <el-option
+                      label="中心"
+                      value="center"
+                    />
+                    <el-option
+                      label="右侧"
+                      value="end"
+                    />
                   </el-select>
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="拓展代码" v-if="Object.keys(customDataForm).includes('script')">
-              <el-input type="textarea" v-model="customDataForm.script" style="width: 100%" />
-            </el-form-item>
+                </el-form-item>
+                <el-form-item label="x轴刻度文字居中" v-if="Object.keys(nodeAttrForm).includes('boundaryGap')">
+                  <el-switch v-model="nodeAttrForm.boundaryGap" />
+                </el-form-item>
+                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('xAxisLineShow')">
+                  <el-switch v-model="nodeAttrForm.xAxisLineShow" />
+                </el-form-item>
+                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('xAxisTickShow')">
+                  <el-switch v-model="nodeAttrForm.xAxisTickShow" />
+                </el-form-item>
+                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisTickInside')">
+                  <el-switch v-model="nodeAttrForm.xAxisTickInside" />
+                </el-form-item>
+                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisTickColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisTickColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInterval')">
+                  <el-switch v-model="nodeAttrForm.xAxisLabelInterval" />
+                </el-form-item>
+                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInside')">
+                  <el-switch v-model="nodeAttrForm.xAxisLabelInside" />
+                </el-form-item>
+                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelRotate')">
+                  <el-slider v-model="nodeAttrForm.xAxisLabelRotate" :min="0" :max="360" />
+                </el-form-item>
+                <el-form-item label="刻度文字格式化" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFormatter')">
+                  <el-input v-model="nodeAttrForm.xAxisLabelFormatter" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisLabelColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFontSize')">
+                  <el-slider v-model="nodeAttrForm.xAxisLabelFontSize" :min="6" :max="36" />
+                </el-form-item>
+                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelMargin')">
+                  <el-slider v-model="nodeAttrForm.xAxisLabelMargin" :min="0" :max="36" />
+                </el-form-item>
+                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineShow')">
+                  <el-switch v-model="nodeAttrForm.xAxisSplitLineShow" />
+                </el-form-item>
+                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.xAxisSplitLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineType')">
+                  <el-select
+                    v-model="nodeAttrForm.xAxisSplitLineType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="直线"
+                      value="solid"
+                    />
+                    <el-option
+                      label="虚线"
+                      value="dashed"
+                    />
+                    <el-option
+                      label="点线"
+                      value="dotted"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="y轴设置" name="2" v-if="Object.keys(nodeAttrForm).includes('yName')">
+                <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="y轴名称位置" v-if="Object.keys(nodeAttrForm).includes('yNameLocation')">
+                  <el-select
+                    v-model="nodeAttrForm.yNameLocation"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="顶部"
+                      value="start"
+                    />
+                    <el-option
+                      label="中心"
+                      value="center"
+                    />
+                    <el-option
+                      label="底部"
+                      value="end"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('yAxisLineShow')">
+                  <el-switch v-model="nodeAttrForm.yAxisLineShow" />
+                </el-form-item>
+                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('yAxisTickShow')">
+                  <el-switch v-model="nodeAttrForm.yAxisTickShow" />
+                </el-form-item>
+                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisTickInside')">
+                  <el-switch v-model="nodeAttrForm.yAxisTickInside" />
+                </el-form-item>
+                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisTickColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisTickColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInterval')">
+                  <el-switch v-model="nodeAttrForm.yAxisLabelInterval" />
+                </el-form-item>
+                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInside')">
+                  <el-switch v-model="nodeAttrForm.yAxisLabelInside" />
+                </el-form-item>
+                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelRotate')">
+                  <el-slider v-model="nodeAttrForm.yAxisLabelRotate" :min="0" :max="360" />
+                </el-form-item>
+                <el-form-item label="刻度文字内容格式" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFormatter')">
+                  <el-input v-model="nodeAttrForm.yAxisLabelFormatter" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisLabelColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFontSize')">
+                  <el-slider v-model="nodeAttrForm.yAxisLabelFontSize" :min="6" :max="36" />
+                </el-form-item>
+                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelMargin')">
+                  <el-slider v-model="nodeAttrForm.yAxisLabelMargin" :min="0" :max="36" />
+                </el-form-item>
+                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineShow')">
+                  <el-switch v-model="nodeAttrForm.yAxisSplitLineShow" />
+                </el-form-item>
+                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineColor')">
+                  <el-color-picker v-model="nodeAttrForm.yAxisSplitLineColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineType')">
+                  <el-select
+                    v-model="nodeAttrForm.yAxisSplitLineType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="直线"
+                      value="solid"
+                    />
+                    <el-option
+                      label="虚线"
+                      value="dashed"
+                    />
+                    <el-option
+                      label="点线"
+                      value="dotted"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-collapse-item>
+              <el-collapse-item title="边距设置" name="3" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
+                <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-collapse-item>
+              <el-collapse-item title="表格设置" name="4" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
+                <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('tableOptions')">
+                  <el-button class="optionsBtn" plain @click="tableCellOptionsVisible = true">
+                    配置表格
+                  </el-button>
+                </el-form-item>
+                <el-form-item label="表头是否显示" v-if="Object.keys(nodeAttrForm).includes('isThShow')">
+                  <el-switch v-model="nodeAttrForm.isThShow" />
+                </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-collapse-item>
+              <el-collapse-item title="通用设置" name="5">
+                <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="默认日期" 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('pageSizeField')">
+                  <el-input v-model="nodeAttrForm.pageSizeField" />
+                </el-form-item>
+                <el-form-item label="当前页字段" v-if="Object.keys(nodeAttrForm).includes('currentPageField')">
+                  <el-input v-model="nodeAttrForm.currentPageField" />
+                </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-button class="optionsBtn" plain @click="mapOptionsVisible = true">
+                    配置数据映射
+                  </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('backgroundImage')">
+                  <el-upload
+                    class="avatar-uploader"
+                    :action="uploadFileUrl"
+                    :show-file-list="false"
+                    :limit="1"
+                    accept=".jpg,.png"
+                    :headers="headers"
+                    :on-success="(res)=>nodeAttrForm.backgroundImage = res.data.url"
+                  >
+                    <img v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage" class="avatar"
+                         alt="" />
+                    <el-icon v-else class="avatar-uploader-icon">
+                      <Plus />
+                    </el-icon>
+                  </el-upload>
+                </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.iconSrc" 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="-1"
+                    :step="1"
+                    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('legendColor')">
+                  <el-color-picker v-model="nodeAttrForm.legendColor" show-alpha />
+                </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('defaultDataType')">
+                  <el-select
+                    clearable
+                    effect="light"
+                    v-model="nodeAttrForm.defaultDataType"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="单折线数据"
+                      value="line"
+                    />
+                    <el-option
+                      label="单曲线数据"
+                      value="curve"
+                    />
+                    <el-option
+                      label="单柱状图数据"
+                      value="bar"
+                    />
+                    <el-option
+                      label="多折线数据"
+                      value="multiLines"
+                    />
+                    <el-option
+                      label="多曲线数据"
+                      value="multiCurves"
+                    />
+                    <el-option
+                      label="多柱状图数据"
+                      value="multiBars"
+                    />
+                    <el-option
+                      label="饼图数据"
+                      value="pie"
+                    />
+                    <el-option
+                      label="仪表盘数据"
+                      value="dashboard"
+                    />
+                    <el-option
+                      label="雷达图数据"
+                      value="radar"
+                    />
+                    <el-option
+                      label="轮播图数据"
+                      value="carousel"
+                    />
+                    <el-option
+                      label="图片数据"
+                      value="image"
+                    />
+                    <el-option
+                      label="视频数据"
+                      value="video"
+                    />
+                    <el-option
+                      label="时间线数据"
+                      value="timeline"
+                    />
+                    <el-option
+                      label="翻牌器数据"
+                      value="digitalFlop"
+                    />
+                    <el-option
+                      label="表格数据"
+                      value="table"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="图表颜色" v-if="Object.keys(nodeAttrForm).includes('seriesColor')">
+                  <el-color-picker v-model="nodeAttrForm.seriesColor" show-alpha />
+                </el-form-item>
+                <el-form-item label="饼图标签格式" v-if="Object.keys(nodeAttrForm).includes('pieLabelFormatter')">
+                  <el-input v-model="nodeAttrForm.pieLabelFormatter" style="width: 100%" />
+                </el-form-item>
+                <el-form-item label="饼图中心位置" v-if="Object.keys(nodeAttrForm).includes('pieCenter')">
+                  <el-slider v-model="nodeAttrForm.pieCenter" :min="0" :max="100" />
+                </el-form-item>
+                <el-form-item label="饼图半径" v-if="Object.keys(nodeAttrForm).includes('pieRadius')">
+                  <el-slider v-model="nodeAttrForm.pieRadius" :min="0" :max="100" range />
+                </el-form-item>
+                <el-form-item label="发送脉冲类型" v-if="Object.keys(nodeAttrForm).includes('sendType')">
+                  <el-select
+                    multiple
+                    v-model="nodeAttrForm.sendType"
+                    placeholder="Select"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      label="确定"
+                      value="ok"
+                    />
+                    <el-option
+                      label="重置"
+                      value="reset"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="js脚本设置">
+                  <el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
+                </el-form-item>
+              </el-collapse-item>
+            </el-collapse>
           </el-form>
-        </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 style="display: inline-block;margin-right: 8px;">
-            <el-dropdown trigger="click" @command="nodeOperate">
-              <span class="el-dropdown-link" @click.stop>
-                <el-icon class="settingIcon">
-                  <Setting />
-                </el-icon>
-              </span>
-              <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>
-          <span class="cardSpan">
-          {{ i.name }}
-          </span>
         </div>
       </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">
+    <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-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"
           >
-            <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">
+            <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="950">
+      <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-option
+                label="图片"
+                value="图片"
+              />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="计算公式" width="200">
+          <template #default="scope">
+            <el-input v-model="scope.row.formula" style="width: 100%" />
+          </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="tableCellOptionsVisible" title="单元格设置" width="100%">
+      {{ (getInputData(nodeDataForm.id) || {}).tableData }}
+      <el-table
+        :data="(getInputData(nodeDataForm.id)||{}).tableData"
+        style="--el-table-border-color:#000"
+        :border="true"
+        :header-cell-style="{color:nodeAttrForm.thColor,backgroundColor:`${nodeAttrForm?.thBgColor} !important`}"
+        :header-row-style="{height:nodeAttrForm.thHeight }"
+        :show-header="nodeAttrForm.isThShow"
+        :style="{height: '100%'}"
+      >
+        <el-table-column v-for="(i,k) in nodeAttrForm.tableOptions" :key="k" :align="i.align" prop="date"
+                         :label="i.name"
+                         :width="i.width">
+          <template #default="scope">
+            <div @click.stop="cellClick(scope)">
+              <span
+                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
+                }}</span>
+              <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
+                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
+              </el-tag>
+              <el-image :preview-src-list="[scope.row[i.field]]"
+                        v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
+                        :style="{height:nodeAttrForm.tdHeight}"
+                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k + 1}`] || i.formula))"
+                        fit="contain" />
+              <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
+                           :stroke-width="26"
+                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)))" />
+              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
+                }}</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog v-model="cellOptionsVisible" title="单元格设置" width="500">
+      <el-form :model="cellOption" label-width="auto">
+        <el-form-item label="类型">
           <el-select
-            v-model="scope.row.type"
+            @change="cellTypeChange"
+            v-model="cellOption.type"
             placeholder="请选择"
             style="width: 100%"
           >
@@ -791,136 +1407,219 @@
               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>
+        </el-form-item>
+        <el-form-item label="计算公式">
+          <el-input @change="cellFormulaChange" v-model="cellOption.formula" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cellOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </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>
+    <el-dialog v-model="mapOptionsVisible" title="数据映射" width="500">
+      <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>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="mapOptionsVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-<script setup lang="ts">
-import { globalHeaders } from '@/utils/request';
-import { useRouter } from 'vue-router';
-import { v4 as uuidv4 } from 'uuid';
-import { Check, Close, Plus, Setting, StarFilled, Delete } from '@element-plus/icons-vue';
+<script setup>
+import backgroundBarImg from './images/backgroundBarImg.png';
+import pieImg from './images/pieImg.png';
+import multiCurvesImg from './images/multiCurvesImg.png';
+import lineBarImg from './images/lineBarImg.png';
+import multiLinesImg from './images/multiLinesImg.png';
+import multiBarsImg from './images/multiBarsImg.png';
+import annularImg from './images/annularImg.png';
+import radarImg from './images/radarImg.png';
+import carouselImg from './images/carouselImg.png';
+import network from './images/network.png';
+import nightingaleRoseDiagramImg from './images/nightingaleRoseDiagramImg.png';
+import curveImg from './images/curveImg.png';
+import dashboardImg from './images/dashboardImg.png';
+import lineImg from './images/lineImg.png';
+import barImg from './images/barImg.png';
+import customizationRequestImg from './images/customizationRequestImg.png';
+import mapImg from './images/mapImg.png';
+import backgroundimg from './images/backgroundimg.png';
+import scrollTableImg from './images/scrollTableImg.png';
+import timeImg from './images/timeImg.png';
+import timelineImg from './images/timelineImg.png';
+import videoImg from './images/videoImg.png';
+import inputNodeImg from './images/inputNodeImg.png';
+import digitalFlopImg from './images/digitalFlopImg.png';
+import iconImg from './images/iconImg.png';
+import imgImg from './images/imgImg.png';
+import textImg from './images/textImg.png';
+
+import FlowRuler from './FlowRuler.vue';
 import * as icon from '@element-plus/icons-vue';
+import { ArrowDown, Close, Delete, DocumentChecked, Lock, Plus, Setting, Unlock, View } 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 LineNode from './nodes/board/lineNode.vue';
-import MultiLinesNode from './nodes/board/multiLinesNode.vue';
-import CurveNode from './nodes/board/curveNode.vue';
-import MultiCurvesNode from './nodes/board/multiCurvesNode.vue';
-import BarNode from './nodes/board/barNode.vue';
-import BackgroundBarNode from './nodes/board/backgroundBarNode.vue';
-import MultiBarsNode from './nodes/board/multiBarsNode.vue';
-import StaticDataNode from './nodes/data/staticDataNode.vue';
-import CustomBoardNode from './nodes/board/customBoardNode.vue';
-import PieNode from './nodes/board/pieNode.vue';
-import NightingaleRoseDiagramNode from './nodes/board/nightingaleRoseDiagramNode.vue';
-import CarouselNode from './nodes/board/carouselNode.vue';
-import DataNode from './nodes/data/dataNode.vue';
-import CustomDataNode from './nodes/data/customDataNode.vue';
-import MapNode from './nodes/form/mapNode.vue';
-import InputNode from './nodes/form/inputNode.vue';
-import ButtonNode from './nodes/form/buttonNode.vue';
-import TimeNode from './nodes/form/timeNode.vue';
-import TextNode from './nodes/form/textNode.vue';
-import ImgNode from './nodes/form/imgNode.vue';
-import IconNode from './nodes/form/iconNode.vue';
-import VideoNode from './nodes/form/videoNode.vue';
-import TimelineNode from './nodes/form/timelineNode.vue';
-import DigitalFlopNode from './nodes/form/digitalFlopNode.vue';
-import AreaNode from './nodes/other/areaNode.vue';
-import TableNode from './nodes/form/tableNode.vue';
-import ScrollTableNode from './nodes/form/scrollTableNode.vue';
-import tool, { options } from './tool';
-import { getDataSourceList } from '@/views/boardGenerate/api/dataSource';
-import { editBoardApi, getBoardApi } from '@/views/boardGenerate/api/boardList';
+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 BackgroundNode from '@/views/boardGenerate/nodes/form/backgroundNode.vue';
+import PaginationNode from '@/views/boardGenerate/nodes/form/paginationNode.vue';
 
-const router = useRouter();
-// 获取自定义的方法
+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 AnnularNode from '@/views/boardGenerate/nodes/board/annularNode.vue';
+import DashboardNode from '@/views/boardGenerate/nodes/board/dashboardNode.vue';
+import RadarNode from '@/views/boardGenerate/nodes/board/radarNode.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 LineBarNode from '@/views/boardGenerate/nodes/board/lineBarNode.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 ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.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';
+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();
 
-
-// flow内置方法
+const isSnapToGrid = ref(false);
+const toggleSnapToGrid = (e) => {
+  if (e.key === 'Alt') {
+    isSnapToGrid.value = false;
+  }
+};
+const keyup = () => {
+  isSnapToGrid.value = true;
+};
+window.addEventListener('keydown', toggleSnapToGrid);
+window.addEventListener('keyup', keyup);
 const {
   addEdges,
   updateNode,
@@ -928,38 +1627,26 @@ const {
   addNodes
 } = useVueFlow();
 
-const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
-const headers = ref(globalHeaders());
+const gridSize = 200;
+
+const handleResizeStop = (event, node) => {
+  if (event.altKey) return;
+
+  const snappedWidth = Math.round(node.width / gridSize) * gridSize;
+  const snappedHeight = Math.round(node.height / gridSize) * gridSize;
+
+  updateNode(node.id, {
+    style: {
+      width: `${snappedWidth}px`,
+      height: `${snappedHeight}px`
+    }
+  });
+};
 
-const icons = ref([]);
-const selectIconInput = ref('');
-const loading = ref(false)
-const pageSettingVisible = ref(false);
-const pageSettingForm = ref({});
-const tableOptionsVisible = ref(false);
-const tableClassOptionsVisible = ref(false);
-const swiperOptionsVisible = ref(false);
-const pageTitle = ref('页面名称');
-const leftPanelState = ref('1');
-const pageData = ref({});
-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({});
 onMounted(async () => {
+  console.log(123123);
   icons.value = Object.keys(icon);
-  loading.value = true
+  loading.value = true;
   getDataSourceList({
     pageNum: 1,
     pageSize: 9999999
@@ -970,10 +1657,14 @@ onMounted(async () => {
           name: e.dataSourceName,
           url: e.requestUrl,
           method: e.requestMethod,
-          outputData: e.designDataFieldList
+          outputData: e.designDataFieldList,
+          type: e.responseType,
+          db: e.fieldOne,
+          SQL: e.fieldTwo,
+          isPage: e.fieldThree === 'true'
         };
       });
-    });
+    })
   customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
   await nextTick();
   getBoardApi(router.currentRoute.value.query.id)
@@ -995,7 +1686,6 @@ onMounted(async () => {
             } else {
               data[key] = null;
             }
-
           }
         });
         return {
@@ -1010,6 +1700,7 @@ onMounted(async () => {
             y: e.posY
           },
           type: e.pointType,
+          draggable: e.fieldTwo === 'true',
           data: JSON.parse(e.dataContent)
         };
       }) : [{
@@ -1033,15 +1724,47 @@ onMounted(async () => {
         };
       }) || [];
       pageData.value = JSON.parse(data.customContent) || {};
+      nextTick(() => {
+        isSnapToGrid.value = true;
+      });
     })
-    .finally(()=>{
+    .finally(() => {
 
-      loading.value = false
-    })
+      loading.value = false;
+    });
 });
+const icons = ref([]);
+const selectIconInput = ref('');
+const collapseActiveName = ref('1');
+const loading = ref(false);
+const pageSettingVisible = ref(false);
+const tableCellOptionsVisible = ref(false);
+const cellOptionsVisible = ref(false);
+const tableOptionsVisible = ref(false);
+const tableClassOptionsVisible = ref(false);
+const swiperOptionsVisible = ref(false);
+const mapOptionsVisible = 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 cellOption = 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':
@@ -1069,7 +1792,6 @@ const logEvent = async (eventname, event) => {
       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;
@@ -1081,7 +1803,6 @@ const logEvent = async (eventname, event) => {
       }
       break;
     case 'contextmenu':
-      console.log('contextmenu', event);
   }
 };
 const resize = (e, id) => {
@@ -1111,9 +1832,16 @@ const getInputData = (e) => {
   });
   return outputData;
 };
+const selectTabs = (e) => {
+  tabs.value = e;
+};
+const setPageData = () => {
+  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
+  pageSettingVisible.value = false;
+};
+
 const pageSetting = () => {
   pageSettingVisible.value = true;
-  // pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA')) || {};
   pageSettingForm.value = pageData.value;
 };
 const save = () => {
@@ -1123,7 +1851,7 @@ const save = () => {
     customContent: JSON.stringify(pageSettingForm.value),
     designPagePointList: nodes.value.map((e, index) => {
       let data = {};
-      let savaField = ['customData', 'options'];
+      let savaField = ['customData', 'options', 'isLock'];
       Object.keys(e.data).forEach((key) => {
         if (savaField.includes(key)) {
           data[key] = e.data[key];
@@ -1137,22 +1865,39 @@ const save = () => {
           }
         }
       });
-      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)
-      };
+      if (e.type === 'area') {
+        return {
+          activeFlag: '1',
+          pageConfigId: boardData.value.pageConfigId,
+          pagePointId: e.id,
+          pagePointName: e.name,
+          fieldOne: index,
+          fieldTwo: e.draggable,
+          width: e.dimensions.width || '',
+          height: e.dimensions.height || '',
+          posX: e.position.x,
+          posY: e.position.y,
+          pointType: e.type,
+          dataContent: JSON.stringify(data)
+        };
+      } else {
+        return {
+          activeFlag: '1',
+          pageConfigId: boardData.value.pageConfigId,
+          pagePointId: e.id,
+          pagePointName: e.name,
+          fieldOne: index,
+          fieldTwo: e.draggable,
+          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,
@@ -1172,7 +1917,7 @@ const save = () => {
   })
     .finally(() => {
       loading.value = false;
-    })
+    });
   // localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
   //   let data = {};
   //   let savaField = ['customData', 'options'];
@@ -1228,29 +1973,10 @@ const clear = () => {
 
 };
 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
+    pageSettingForm.value.bg = res.data.url;
   }
 };
-const setPageData = () => {
-  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
-  // localStorage.setItem('PAGEDATA', JSON.stringify(pageData.value));
-  pageSettingVisible.value = false;
-};
-const asd = () => {
-  console.log(12312);
-};
 const nodeOperate = (data) => {
   let type = data.type;
   const index = nodes.value.indexOf(data.node);
@@ -1260,6 +1986,9 @@ const nodeOperate = (data) => {
     case 'toTop':
       nodes.value = [...nodes.value.filter(e => e.id !== data.node.id), data.node];
       break;
+    case 'toBottom':
+      nodes.value = [data.node, ...nodes.value.filter(e => e.id !== data.node.id)];
+      break;
     case 'moveUp':
       arr.splice(index, 1);
       arr.splice(index + 1, 0, item);
@@ -1291,46 +2020,369 @@ const pitchOnNode = (e) => {
   nodeDataForm.value = e;
   customDataForm.value = e.data.customData;
 };
-let a = { "x1": ["2025-09-22", "2025-09-23", "2025-09-24"], "y1": ["40", "59", "50"], "y2": ["3", "6", "1"] };
+
+const cellClick = (e) => {
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(v => v.index === e.$index && v.cellIndex === e.cellIndex) || {};
+  console.log(e);
+  cellOption.value = {
+    ...(nodeAttrForm.value.tableOptions?.[e.cellIndex] || {}),
+    $index: e.$index,
+    $cellIndex: e.cellIndex,
+    formula: option.formula,
+    type: option.type
+  };
+  cellOptionsVisible.value = true;
+};
+
+const cellTypeChange = (value) => {
+  if (!nodeAttrForm.value.tableCellOptions) {
+    nodeAttrForm.value.tableCellOptions = [];
+  }
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
+  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
+  option.type = cellOption.value.type;
+  if (index === -1) {
+    nodeAttrForm.value.tableCellOptions.push({
+      index: cellOption.value.$index,
+      cellIndex: cellOption.value.$cellIndex,
+      type: value,
+      formula: cellOption.value.formula
+    });
+  } else {
+    nodeAttrForm.value.tableCellOptions[index].type = value;
+  }
+};
+
+const cellFormulaChange = (value) => {
+  if (!nodeAttrForm.value.tableCellOptions) {
+    nodeAttrForm.value.tableCellOptions = [];
+  }
+  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
+  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
+  option.formula = cellOption.value.formula;
+  if (index === -1) {
+    nodeAttrForm.value.tableCellOptions.push({
+      index: cellOption.value.$index,
+      cellIndex: cellOption.value.$cellIndex,
+      type: cellOption.value.type,
+      formula: value
+    });
+  } else {
+    nodeAttrForm.value.tableCellOptions[index].formula = value;
+  }
+
+};
+
+const formulaFun = (row, formula) => {
+  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
+    if (key === 'tableData') {
+      return key;
+    }
+    if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
+      return row[key] || 0;
+    } else {
+      return `"${row[key]}"`;
+    }
+  });
+  let res = 0;
+  try {
+    const fun = new Function('tableData', `return ${data}`);
+    res = fun((getInputData(nodeDataForm.value.id) || {}).tableData);
+  } catch (err) {
+    res = 0;
+  }
+  if (`${res}`.trim() !== '' && !isNaN(res)) {
+    res = res.toFixed(2);
+  }
+  return res;
+};
+const setText = (value, row, formula) => {
+  if (!formula) {
+    return value;
+  } else {
+    return formulaFun(row, formula);
+  }
+};
+
+ 
 </script>
-<style lang="less" scoped>
-:deep( .swiper-slide-active) {
+<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;
 }
-:deep(.vue-flow__node-area) {
-  z-index: -1 !important;
-  pointer-events: none !important;
-}
 
-:deep(.avatar-uploader) .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
+.boardGenerate {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-}
+  --boardGenerateTopHeight: 50px;
 
-:deep(.avatar-uploader) .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
+  .top {
+    width: 100%;
+    height: var(--boardGenerateTopHeight);
+    background-color: #1C1F20;
+    border-bottom: 1px solid #000;
+    position: relative;
 
-:deep(.el-icon.avatar-uploader-icon) {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  text-align: center;
+    .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;
+
+
+    /deep/ .vue-flow__resize-control {
+      background-color: #409EFF !important;
+      border: 1px solid white;
+
+      .handle {
+        background-color: #409EFF !important;
+      }
+    }
+
+  }
+
+  .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;
+  width: 100px;
   vertical-align: top;
 
   :deep(.el-card__body) {
@@ -1338,6 +2390,10 @@ let a = { "x1": ["2025-09-22", "2025-09-23", "2025-09-24"], "y1": ["40", "59", "
     padding: 0 !important;
   }
 
+  :deep(.el-card__header) {
+    padding: 0 !important;
+  }
+
   .moduleText {
     display: flex;
     justify-content: center;
@@ -1351,120 +2407,9 @@ let a = { "x1": ["2025-09-22", "2025-09-23", "2025-09-24"], "y1": ["40", "59", "
     overflow: hidden;
   }
 }
-
-.leftPanel {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 300px;
-  height: 100%;
-  border-right: 1px solid #409EFF;
-  overflow: auto;
-}
-
-.content {
-  position: absolute;
-  top: 0;
-  left: 300px;
-  width: calc(100% - 300px - 300px);
-  height: 100%;
-
-  .pageSetting {
-    width: 100%;
-    height: 50px;
-    border-bottom: 1px solid #409EFF;
-    position: relative;
-
-    .pageTitle {
-      line-height: 50px;
-      margin-left: 8px;
-    }
-
-    .btns {
-      position: absolute;
-      right: 8px;
-      display: inline-block;
-      line-height: 50px;
-
-      button {
-        vertical-align: inherit;
-
-      }
-    }
-  }
-
-  .flowArea {
-    width: 100%;
-    height: calc(100% - 50px);
-  }
-}
-
-.rightPanel {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 300px;
-  height: 100%;
-  border-left: 1px solid #409EFF;
-  overflow: auto;
-}
-
-.avatar {
-  width: 384px;
-  height: 216px
-}
-
-.nodeCard {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 50px;
-  padding: 0 12px;
-  background-color: #fff;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-
-  &:hover {
-    background-color: #f0f7ff;
-    box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.08),
-    0 4px 8px -4px rgba(0, 0, 0, 0.08);
-
-    .settingIcon {
-      color: #409EFF;
-    }
-  }
-
-  .cardSpan {
-    flex: 1;
-    font-size: 14px;
-    color: #333;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    padding-left: 8px;
-  }
-
-  .settingIcon {
-    font-size: 18px;
-    color: #888;
-    transition: color 0.3s ease;
-  }
-
-  .el-dropdown-link {
-    display: flex;
-    align-items: center;
-    height: 100%;
-  }
-}
-
 </style>
-
 <style>
-.el-notification {
-  display: none !important;
-}
+
 
 </style>
+
diff --git a/src/views/boardGenerate/index1.vue b/src/views/boardGenerate/index1.vue
deleted file mode 100644
index 7302904..0000000
--- a/src/views/boardGenerate/index1.vue
+++ /dev/null
@@ -1,2407 +0,0 @@
-<template>
-  <div class="boardGenerate">
-    <div class="top">
-      <!--      <el-button @click="nodes.forEach(e=>e.draggable =true)">11</el-button>-->
-      <div class="componentMenu">
-        <el-popover
-          :width="880"
-          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>
-                <el-image style="width: 100%; height: 100%" :src="lineImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="multiLinesImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="curveImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="multiCurvesImg" fit="contain" />
-              </template>
-              <div class="moduleText">多曲线
-              </div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'lineBar')"
-                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
-                     :body-style="{padding:'4px 0'}">
-              <template #header>
-                <el-image style="width: 100%; height: 100%" :src="lineBarImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="barImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="backgroundBarImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="multiBarsImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="pieImg" fit="contain" />
-              </template>
-              <div class="moduleText">饼图</div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'annular')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
-                     :body-style="{padding:'4px 0'}">
-              <template #header>
-                <el-image style="width: 100%; height: 100%" :src="annularImg" fit="contain" />
-              </template>
-              <div class="moduleText">中空饼图</div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'dashboard')"
-                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
-                     :body-style="{padding:'4px 0'}">
-              <template #header>
-                <el-image style="width: 100%; height: 100%" :src="dashboardImg" fit="contain" />
-              </template>
-              <div class="moduleText">仪表盘</div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'radar')"
-                     :style="{display:'inline-block',margin:'0 4px 4px 0'}"
-                     :body-style="{padding:'4px 0'}">
-              <template #header>
-                <el-image style="width: 100%; height: 100%" :src="radarImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="nightingaleRoseDiagramImg" fit="contain" />
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="carouselImg" fit="contain" />
-              </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>
-                <div style="width: 100%;height: 100px;text-align: center">
-
-                  <el-image style="width:80px;height: 80px;margin-top: 10px;" :src="mapImg" fit="contain" />
-                </div>
-              </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>
-                <el-image style="width: 100%; height: 100%" :src="customizationRequestImg" fit="contain" />
-              </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>-->
-            <!--                <el-image style="width: 100%; height: 100%" :src="network" fit="contain" />-->
-            <!--              </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>
-                  <el-image style="width: 100%; height: 100%" :src="network" fit="contain" />
-                </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain" />
-                </div>
-              </template>
-              <div class="moduleText">文字</div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'buttonNode')"
-                     :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, 'inputNode')"
-                     :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, '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'}">
-              <template #header>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="timeImg" fit="contain" />
-                </div>
-              </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="imgImg" fit="contain" />
-                </div>
-              </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="iconImg" fit="contain" />
-                </div>
-              </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="videoImg" fit="contain" />
-                </div>
-              </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="timelineImg" fit="contain" />
-                </div>
-              </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="digitalFlopImg" fit="contain" />
-                </div>
-              </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>
-                <el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain" />
-              </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>
-                <div style="width: 100%;height: 100%;text-align: center">
-                  <el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain" />
-                </div>
-              </template>
-              <div class="moduleText">滚动表格</div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'background')"
-                     :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="backgroundimg" fit="contain" />
-                </div>
-              </template>
-              <div class="moduleText">背景</div>
-            </el-card>
-            <el-card class="moduleCard" shadow="never" :draggable="true"
-                     @dragstart="onDragStart($event, 'pagination')"
-                     :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="backgroundimg" fit="contain" />
-                </div>
-              </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="isLock">
-              <el-icon style="cursor: pointer" color="#fff" :size="16" @click="i.draggable = !i.draggable">
-                <Unlock v-if="i.draggable" />
-                <Lock v-if="!i.draggable" />
-              </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: 'toBottom', 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"
-          :snapToGrid="isSnapToGrid"
-          :snapGrid="[10, 10]"
-          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" @resize="(e) => handleResizeStop(e, areaNodeProps)" />
-          </template>
-
-          <template #node-customBoard="customBoardNodeProps">
-            <CustomBoardNode v-bind="customBoardNodeProps" :inputData="getInputData(customBoardNodeProps.id)"
-                             @resize="(e) => handleResizeStop(e, customBoardNodeProps)" />
-          </template>
-
-          <template #node-customData="customDataNodeProps">
-            <CustomDataNode v-bind="customDataNodeProps" :inputData="getInputData(customDataNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, customDataNodeProps)" />
-          </template>
-
-          <template #node-line="lineNodeProps">
-            <LineNode v-bind="lineNodeProps" :inputData="getInputData(lineNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, lineNodeProps)" />
-          </template>
-
-          <template #node-multiLines="multiLinesNodeProps">
-            <MultiLinesNode v-bind="multiLinesNodeProps" :inputData="getInputData(multiLinesNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, multiLinesNodeProps)" />
-          </template>
-
-          <template #node-curve="curveNodeProps">
-            <CurveNode v-bind="curveNodeProps" :inputData="getInputData(curveNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, curveNodeProps)" />
-          </template>
-
-          <template #node-multiCurves="multiCurvesNodeProps">
-            <MultiCurvesNode v-bind="multiCurvesNodeProps" :inputData="getInputData(multiCurvesNodeProps.id)"
-                             @resize="(e) => handleResizeStop(e, multiCurvesNodeProps)" />
-          </template>
-
-          <template #node-lineBar="lineBarNodeProps">
-            <LineBarNode v-bind="lineBarNodeProps" :inputData="getInputData(lineBarNodeProps.id)"
-                         @resize="(e) => handleResizeStop(e, lineBarNodeProps)" />
-          </template>
-
-          <template #node-bar="barNodeProps">
-            <BarNode v-bind="barNodeProps" :inputData="getInputData(barNodeProps.id)"
-                     @resize="(e) => handleResizeStop(e, barNodeProps)" />
-          </template>
-
-          <template #node-backgroundBar="backgroundBarNodeProps">
-            <BackgroundBarNode v-bind="backgroundBarNodeProps" :inputData="getInputData(backgroundBarNodeProps.id)"
-                               @resize="(e) => handleResizeStop(e, backgroundBarNodeProps)" />
-          </template>
-
-          <template #node-multiBars="multiBarsNodeProps">
-            <MultiBarsNode v-bind="multiBarsNodeProps" :inputData="getInputData(multiBarsNodeProps.id)"
-                           @resize="(e) => handleResizeStop(e, multiBarsNodeProps)" />
-          </template>
-
-          <template #node-pie="pieNodeProps">
-            <PieNode v-bind="pieNodeProps" :inputData="getInputData(pieNodeProps.id)"
-                     @resize="(e) => handleResizeStop(e, pieNodeProps)" />
-          </template>
-
-          <template #node-annular="annularNodeProps">
-            <AnnularNode v-bind="annularNodeProps" :inputData="getInputData(annularNodeProps.id)"
-                         @resize="(e) => handleResizeStop(e, annularNodeProps)" />
-          </template>
-
-          <template #node-radar="radarNodeProps">
-            <RadarNode v-bind="radarNodeProps" :inputData="getInputData(radarNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, radarNodeProps)" />
-          </template>
-
-          <template #node-dashboard="dashboardNodeProps">
-            <DashboardNode v-bind="dashboardNodeProps" :inputData="getInputData(dashboardNodeProps.id)"
-                           @resize="(e) => handleResizeStop(e, dashboardNodeProps)" />
-          </template>
-
-          <template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
-            <NightingaleRoseDiagramNode v-bind="nightingaleRoseDiagramNodeProps"
-                                        :inputData="getInputData(nightingaleRoseDiagramNodeProps.id)"
-                                        @resize="(e) => handleResizeStop(e, nightingaleRoseDiagramNodeProps)" />
-          </template>
-
-          <template #node-carousel="carouselNodeProps">
-            <CarouselNode v-bind="carouselNodeProps" :inputData="getInputData(carouselNodeProps.id)"
-                          @resize="(e) => handleResizeStop(e, carouselNodeProps)" />
-          </template>
-
-          <template #node-data="dataNodeProps">
-            <DataNode v-bind="dataNodeProps" :inputData="getInputData(dataNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, dataNodeProps)" />
-          </template>
-
-          <template #node-text="textNodeProps">
-            <TextNode v-bind="textNodeProps" :inputData="getInputData(textNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, textNodeProps)" />
-          </template>
-
-          <template #node-img="imgNodeProps">
-            <ImgNode v-bind="imgNodeProps" :inputData="getInputData(imgNodeProps.id)"
-                     @resize="(e) => handleResizeStop(e, imgNodeProps)" />
-          </template>
-
-          <template #node-icon="iconNodeProps">
-            <IconNode v-bind="iconNodeProps" :inputData="getInputData(iconNodeProps.id)"
-                      @resize="(e) => handleResizeStop(e, iconNodeProps)" />
-          </template>
-
-          <template #node-video="videoNodeProps">
-            <VideoNode v-bind="videoNodeProps" :inputData="getInputData(videoNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, videoNodeProps)" />
-          </template>
-
-          <template #node-timeline="timelineNodeProps">
-            <TimelineNode v-bind="timelineNodeProps" :inputData="getInputData(timelineNodeProps.id)"
-                          @resize="(e) => handleResizeStop(e, timelineNodeProps)" />
-          </template>
-
-          <template #node-digitalFlop="digitalFlopNodeProps">
-            <DigitalFlopNode v-bind="digitalFlopNodeProps" :inputData="getInputData(digitalFlopNodeProps.id)"
-                             @resize="(e) => handleResizeStop(e, digitalFlopNodeProps)" />
-          </template>
-
-          <template #node-inputNode="inputNodeProps">
-            <InputNode v-bind="inputNodeProps" :inputData="getInputData(inputNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, inputNodeProps)" />
-          </template>
-
-          <template #node-buttonNode="buttonNodeProps">
-            <ButtonNode v-bind="buttonNodeProps" :inputData="getInputData(buttonNodeProps.id)"
-                        @resize="(e) => handleResizeStop(e, buttonNodeProps)" />
-          </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)" />
-          </template>
-
-          <template #node-map="mapNodeProps">
-            <MapNode v-bind="mapNodeProps" :inputData="getInputData(mapNodeProps.id)"
-                     @resize="(e) => handleResizeStop(e, mapNodeProps)" />
-          </template>
-
-          <template #node-staticData="staticDataNodeProps">
-            <StaticDataNode v-bind="staticDataNodeProps" :inputData="getInputData(staticDataNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, staticDataNodeProps)" />
-          </template>
-
-          <template #node-table="tableNodeProps">
-            <TableNode v-bind="tableNodeProps" :inputData="getInputData(tableNodeProps.id)"
-                       @resize="(e) => handleResizeStop(e, tableNodeProps)" />
-          </template>
-
-          <template #node-scrollTable="scrollTableNodeProps">
-            <ScrollTableNode v-bind="scrollTableNodeProps" :inputData="getInputData(scrollTableNodeProps.id)"
-                             @resize="(e) => handleResizeStop(e, scrollTableNodeProps)" />
-          </template>
-
-          <template #node-background="backgroundNodeProps">
-            <BackgroundNode v-bind="backgroundNodeProps" :inputData="getInputData(backgroundNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, backgroundNodeProps)" />
-          </template>
-
-          <template #node-pagination="paginationNodeProps">
-            <PaginationNode v-bind="paginationNodeProps" :inputData="getInputData(paginationNodeProps.id)"
-                            @resize="(e) => handleResizeStop(e, paginationNodeProps)" />
-          </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="x轴设置" name="1" v-if="Object.keys(nodeAttrForm).includes('xName')">
-                <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-form-item label="x轴名称位置" v-if="Object.keys(nodeAttrForm).includes('xNameLocation')">
-                  <el-select
-                    v-model="nodeAttrForm.xNameLocation"
-                    placeholder="Select"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      label="左侧"
-                      value="start"
-                    />
-                    <el-option
-                      label="中心"
-                      value="center"
-                    />
-                    <el-option
-                      label="右侧"
-                      value="end"
-                    />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="x轴刻度文字居中" v-if="Object.keys(nodeAttrForm).includes('boundaryGap')">
-                  <el-switch v-model="nodeAttrForm.boundaryGap" />
-                </el-form-item>
-                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('xAxisLineShow')">
-                  <el-switch v-model="nodeAttrForm.xAxisLineShow" />
-                </el-form-item>
-                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLineColor')">
-                  <el-color-picker v-model="nodeAttrForm.xAxisLineColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('xAxisTickShow')">
-                  <el-switch v-model="nodeAttrForm.xAxisTickShow" />
-                </el-form-item>
-                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisTickInside')">
-                  <el-switch v-model="nodeAttrForm.xAxisTickInside" />
-                </el-form-item>
-                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisTickColor')">
-                  <el-color-picker v-model="nodeAttrForm.xAxisTickColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInterval')">
-                  <el-switch v-model="nodeAttrForm.xAxisLabelInterval" />
-                </el-form-item>
-                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelInside')">
-                  <el-switch v-model="nodeAttrForm.xAxisLabelInside" />
-                </el-form-item>
-                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelRotate')">
-                  <el-slider v-model="nodeAttrForm.xAxisLabelRotate" :min="0" :max="360" />
-                </el-form-item>
-                <el-form-item label="刻度文字格式化" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFormatter')">
-                  <el-input v-model="nodeAttrForm.xAxisLabelFormatter" style="width: 100%" />
-                </el-form-item>
-                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelColor')">
-                  <el-color-picker v-model="nodeAttrForm.xAxisLabelColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelFontSize')">
-                  <el-slider v-model="nodeAttrForm.xAxisLabelFontSize" :min="6" :max="36" />
-                </el-form-item>
-                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('xAxisLabelMargin')">
-                  <el-slider v-model="nodeAttrForm.xAxisLabelMargin" :min="0" :max="36" />
-                </el-form-item>
-                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineShow')">
-                  <el-switch v-model="nodeAttrForm.xAxisSplitLineShow" />
-                </el-form-item>
-                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineColor')">
-                  <el-color-picker v-model="nodeAttrForm.xAxisSplitLineColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('xAxisSplitLineType')">
-                  <el-select
-                    v-model="nodeAttrForm.xAxisSplitLineType"
-                    placeholder="Select"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      label="直线"
-                      value="solid"
-                    />
-                    <el-option
-                      label="虚线"
-                      value="dashed"
-                    />
-                    <el-option
-                      label="点线"
-                      value="dotted"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-collapse-item>
-              <el-collapse-item title="y轴设置" name="2" v-if="Object.keys(nodeAttrForm).includes('yName')">
-                <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="y轴名称位置" v-if="Object.keys(nodeAttrForm).includes('yNameLocation')">
-                  <el-select
-                    v-model="nodeAttrForm.yNameLocation"
-                    placeholder="Select"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      label="顶部"
-                      value="start"
-                    />
-                    <el-option
-                      label="中心"
-                      value="center"
-                    />
-                    <el-option
-                      label="底部"
-                      value="end"
-                    />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="是否显示轴线" v-if="Object.keys(nodeAttrForm).includes('yAxisLineShow')">
-                  <el-switch v-model="nodeAttrForm.yAxisLineShow" />
-                </el-form-item>
-                <el-form-item label="轴线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLineColor')">
-                  <el-color-picker v-model="nodeAttrForm.yAxisLineColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="是否显示刻度线" v-if="Object.keys(nodeAttrForm).includes('yAxisTickShow')">
-                  <el-switch v-model="nodeAttrForm.yAxisTickShow" />
-                </el-form-item>
-                <el-form-item label="刻度线是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisTickInside')">
-                  <el-switch v-model="nodeAttrForm.yAxisTickInside" />
-                </el-form-item>
-                <el-form-item label="刻度线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisTickColor')">
-                  <el-color-picker v-model="nodeAttrForm.yAxisTickColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="是否显示全部刻度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInterval')">
-                  <el-switch v-model="nodeAttrForm.yAxisLabelInterval" />
-                </el-form-item>
-                <el-form-item label="刻度文字是否朝内" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelInside')">
-                  <el-switch v-model="nodeAttrForm.yAxisLabelInside" />
-                </el-form-item>
-                <el-form-item label="刻度文字旋转角度" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelRotate')">
-                  <el-slider v-model="nodeAttrForm.yAxisLabelRotate" :min="0" :max="360" />
-                </el-form-item>
-                <el-form-item label="刻度文字内容格式" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFormatter')">
-                  <el-input v-model="nodeAttrForm.yAxisLabelFormatter" style="width: 100%" />
-                </el-form-item>
-                <el-form-item label="刻度文字颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelColor')">
-                  <el-color-picker v-model="nodeAttrForm.yAxisLabelColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="刻度文字大小" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelFontSize')">
-                  <el-slider v-model="nodeAttrForm.yAxisLabelFontSize" :min="6" :max="36" />
-                </el-form-item>
-                <el-form-item label="刻度文字距离线距离" v-if="Object.keys(nodeAttrForm).includes('yAxisLabelMargin')">
-                  <el-slider v-model="nodeAttrForm.yAxisLabelMargin" :min="0" :max="36" />
-                </el-form-item>
-                <el-form-item label="是否显示分隔线" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineShow')">
-                  <el-switch v-model="nodeAttrForm.yAxisSplitLineShow" />
-                </el-form-item>
-                <el-form-item label="分隔线颜色" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineColor')">
-                  <el-color-picker v-model="nodeAttrForm.yAxisSplitLineColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="分隔线样式" v-if="Object.keys(nodeAttrForm).includes('yAxisSplitLineType')">
-                  <el-select
-                    v-model="nodeAttrForm.yAxisSplitLineType"
-                    placeholder="Select"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      label="直线"
-                      value="solid"
-                    />
-                    <el-option
-                      label="虚线"
-                      value="dashed"
-                    />
-                    <el-option
-                      label="点线"
-                      value="dotted"
-                    />
-                  </el-select>
-                </el-form-item>
-              </el-collapse-item>
-              <el-collapse-item title="边距设置" name="3" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
-                <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-collapse-item>
-              <el-collapse-item title="表格设置" name="4" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
-                <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('tableOptions')">
-                  <el-button class="optionsBtn" plain @click="tableCellOptionsVisible = true">
-                    配置表格
-                  </el-button>
-                </el-form-item>
-                <el-form-item label="表头是否显示" v-if="Object.keys(nodeAttrForm).includes('isThShow')">
-                  <el-switch v-model="nodeAttrForm.isThShow" />
-                </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-collapse-item>
-              <el-collapse-item title="通用设置" name="5">
-                <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="默认日期" 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('pageSizeField')">
-                  <el-input v-model="nodeAttrForm.pageSizeField" />
-                </el-form-item>
-                <el-form-item label="当前页字段" v-if="Object.keys(nodeAttrForm).includes('currentPageField')">
-                  <el-input v-model="nodeAttrForm.currentPageField" />
-                </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-button class="optionsBtn" plain @click="mapOptionsVisible = true">
-                    配置数据映射
-                  </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('backgroundImage')">
-                  <el-upload
-                    class="avatar-uploader"
-                    :action="uploadFileUrl"
-                    :show-file-list="false"
-                    :limit="1"
-                    accept=".jpg,.png"
-                    :headers="headers"
-                    :on-success="(res)=>nodeAttrForm.backgroundImage = res.data.url"
-                  >
-                    <img v-if="nodeAttrForm.backgroundImage" :src="nodeAttrForm.backgroundImage" class="avatar"  alt=""/>
-                    <el-icon v-else class="avatar-uploader-icon">
-                      <Plus />
-                    </el-icon>
-                  </el-upload>
-                </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.iconSrc" 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="-1"
-                    :step="1"
-                    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('legendColor')">
-                  <el-color-picker v-model="nodeAttrForm.legendColor" show-alpha />
-                </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('defaultDataType')">
-                  <el-select
-                    clearable
-                    effect="light"
-                    v-model="nodeAttrForm.defaultDataType"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      label="单折线数据"
-                      value="line"
-                    />
-                    <el-option
-                      label="单曲线数据"
-                      value="curve"
-                    />
-                    <el-option
-                      label="单柱状图数据"
-                      value="bar"
-                    />
-                    <el-option
-                      label="多折线数据"
-                      value="multiLines"
-                    />
-                    <el-option
-                      label="多曲线数据"
-                      value="multiCurves"
-                    />
-                    <el-option
-                      label="多柱状图数据"
-                      value="multiBars"
-                    />
-                    <el-option
-                      label="饼图数据"
-                      value="pie"
-                    />
-                    <el-option
-                      label="仪表盘数据"
-                      value="dashboard"
-                    />
-                    <el-option
-                      label="雷达图数据"
-                      value="radar"
-                    />
-                    <el-option
-                      label="轮播图数据"
-                      value="carousel"
-                    />
-                    <el-option
-                      label="图片数据"
-                      value="image"
-                    />
-                    <el-option
-                      label="视频数据"
-                      value="video"
-                    />
-                    <el-option
-                      label="时间线数据"
-                      value="timeline"
-                    />
-                    <el-option
-                      label="翻牌器数据"
-                      value="digitalFlop"
-                    />
-                    <el-option
-                      label="表格数据"
-                      value="table"
-                    />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="图表颜色" v-if="Object.keys(nodeAttrForm).includes('seriesColor')">
-                  <el-color-picker v-model="nodeAttrForm.seriesColor" show-alpha />
-                </el-form-item>
-                <el-form-item label="饼图标签格式" v-if="Object.keys(nodeAttrForm).includes('pieLabelFormatter')">
-                  <el-input v-model="nodeAttrForm.pieLabelFormatter" style="width: 100%" />
-                </el-form-item>
-                <el-form-item label="饼图中心位置" v-if="Object.keys(nodeAttrForm).includes('pieCenter')">
-                  <el-slider v-model="nodeAttrForm.pieCenter" :min="0" :max="100" />
-                </el-form-item>
-                <el-form-item label="饼图半径" v-if="Object.keys(nodeAttrForm).includes('pieRadius')">
-                  <el-slider v-model="nodeAttrForm.pieRadius" :min="0" :max="100" range />
-                </el-form-item>
-                <el-form-item label="发送脉冲类型" v-if="Object.keys(nodeAttrForm).includes('sendType')">
-                  <el-select
-                    multiple
-                    v-model="nodeAttrForm.sendType"
-                    placeholder="Select"
-                    style="width: 100%"
-                  >
-                    <el-option
-                      label="确定"
-                      value="ok"
-                    />
-                    <el-option
-                      label="重置"
-                      value="reset"
-                    />
-                  </el-select>
-                </el-form-item>
-                <el-form-item label="js脚本设置">
-                  <el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
-                </el-form-item>
-              </el-collapse-item>
-            </el-collapse>
-          </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="950">
-      <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-option
-                label="图片"
-                value="图片"
-              />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column label="计算公式" width="200">
-          <template #default="scope">
-            <el-input v-model="scope.row.formula" style="width: 100%" />
-          </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="tableCellOptionsVisible" title="单元格设置" width="100%">
-      {{ (getInputData(nodeDataForm.id) || {}).tableData }}
-      <el-table
-        :data="(getInputData(nodeDataForm.id)||{}).tableData"
-        style="--el-table-border-color:#000"
-        :border="true"
-        :header-cell-style="{color:nodeAttrForm.thColor,backgroundColor:`${nodeAttrForm?.thBgColor} !important`}"
-        :header-row-style="{height:nodeAttrForm.thHeight }"
-        :show-header="nodeAttrForm.isThShow"
-        :style="{height: '100%'}"
-      >
-        <el-table-column v-for="(i,k) in nodeAttrForm.tableOptions" :key="k" :align="i.align" prop="date"
-                         :label="i.name"
-                         :width="i.width">
-          <template #default="scope">
-            <div @click.stop="cellClick(scope)">
-              <span
-                v-if="(scope.row[`cellType${k+1}`] || i.type) === '文本'">{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
-                }}</span>
-              <el-tag type="primary" v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '标签'">
-                {{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)) }}
-              </el-tag>
-              <el-image :preview-src-list="[scope.row[i.field]]"
-                        v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '图片'" style="width: 100%;"
-                        :style="{height:nodeAttrForm.tdHeight}"
-                        :src="setText(scope.row[i.field],scope.row,(scope.row[`cellFormula${k + 1}`] || i.formula))"
-                        fit="contain" />
-              <el-progress v-else-if="(scope.row[`cellType${k+1}`] || i.type) === '进度条'" :text-inside="true"
-                           :stroke-width="26"
-                           :percentage="parseFloat(setText(scope.row[i.field],scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula)))" />
-              <span v-else>{{ setText(scope.row[i.field], scope.row, (scope.row[`cellFormula${k + 1}`] || i.formula))
-                }}</span>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
-    <el-dialog v-model="cellOptionsVisible" title="单元格设置" width="500">
-      <el-form :model="cellOption" label-width="auto">
-        <el-form-item label="类型">
-          <el-select
-            @change="cellTypeChange"
-            v-model="cellOption.type"
-            placeholder="请选择"
-            style="width: 100%"
-          >
-            <el-option
-              label="文本"
-              value="文本"
-            />
-            <el-option
-              label="标签"
-              value="标签"
-            />
-            <el-option
-              label="进度条"
-              value="进度条"
-            />
-            <el-option
-              label="图片"
-              value="图片"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="计算公式">
-          <el-input @change="cellFormulaChange" v-model="cellOption.formula" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="cellOptionsVisible = false">关闭</el-button>
-        </div>
-      </template>
-    </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>
-    <el-dialog v-model="mapOptionsVisible" title="数据映射" width="500">
-      <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>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="mapOptionsVisible = false">关闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-<script setup>
-import backgroundBarImg from './images/backgroundBarImg.png';
-import pieImg from './images/pieImg.png';
-import multiCurvesImg from './images/multiCurvesImg.png';
-import lineBarImg from './images/lineBarImg.png';
-import multiLinesImg from './images/multiLinesImg.png';
-import multiBarsImg from './images/multiBarsImg.png';
-import annularImg from './images/annularImg.png';
-import radarImg from './images/radarImg.png';
-import carouselImg from './images/carouselImg.png';
-import network from './images/network.png';
-import nightingaleRoseDiagramImg from './images/nightingaleRoseDiagramImg.png';
-import curveImg from './images/curveImg.png';
-import dashboardImg from './images/dashboardImg.png';
-import lineImg from './images/lineImg.png';
-import barImg from './images/barImg.png';
-import customizationRequestImg from './images/customizationRequestImg.png';
-import mapImg from './images/mapImg.png';
-import backgroundimg from './images/backgroundimg.png';
-import scrollTableImg from './images/scrollTableImg.png';
-import timeImg from './images/timeImg.png';
-import timelineImg from './images/timelineImg.png';
-import videoImg from './images/videoImg.png';
-import inputNodeImg from './images/inputNodeImg.png';
-import digitalFlopImg from './images/digitalFlopImg.png';
-import iconImg from './images/iconImg.png';
-import imgImg from './images/imgImg.png';
-import textImg from './images/textImg.png';
-
-import FlowRuler from './FlowRuler.vue';
-import * as icon from '@element-plus/icons-vue';
-import { ArrowDown, Close, Delete, DocumentChecked, Lock, Plus, Setting, Unlock, View } 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 BackgroundNode from '@/views/boardGenerate/nodes/form/backgroundNode.vue';
-import PaginationNode from '@/views/boardGenerate/nodes/form/paginationNode.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 AnnularNode from '@/views/boardGenerate/nodes/board/annularNode.vue';
-import DashboardNode from '@/views/boardGenerate/nodes/board/dashboardNode.vue';
-import RadarNode from '@/views/boardGenerate/nodes/board/radarNode.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 LineBarNode from '@/views/boardGenerate/nodes/board/lineBarNode.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 ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.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';
-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 isSnapToGrid = ref(true);
-const toggleSnapToGrid = (e) => {
-  if (e.key === 'Alt') {
-    isSnapToGrid.value = false;
-  }
-};
-const keyup = () => {
-  isSnapToGrid.value = true;
-};
-window.addEventListener('keydown', toggleSnapToGrid);
-window.addEventListener('keyup', keyup);
-const {
-  addEdges,
-  updateNode,
-  removeNodes,
-  addNodes
-} = useVueFlow();
-
-const gridSize = 200;
-
-const handleResizeStop = (event, node) => {
-  if (event.altKey) return;
-
-  const snappedWidth = Math.round(node.width / gridSize) * gridSize;
-  const snappedHeight = Math.round(node.height / gridSize) * gridSize;
-
-  updateNode(node.id, {
-    style: {
-      width: `${snappedWidth}px`,
-      height: `${snappedHeight}px`
-    }
-  });
-};
-
-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,
-          type: e.responseType,
-          db: e.fieldOne,
-          SQL: e.fieldTwo,
-          isPage: e.fieldThree === 'true'
-        };
-      });
-    })
-  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,
-          draggable: e.fieldTwo === 'true',
-          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 tableCellOptionsVisible = ref(false);
-const cellOptionsVisible = ref(false);
-const tableOptionsVisible = ref(false);
-const tableClassOptionsVisible = ref(false);
-const swiperOptionsVisible = ref(false);
-const mapOptionsVisible = 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 cellOption = 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':
-      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':
-  }
-};
-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 setPageData = () => {
-  pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
-  pageSettingVisible.value = false;
-};
-
-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', 'isLock'];
-      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;
-          }
-        }
-      });
-      if (e.type === 'area') {
-        return {
-          activeFlag: '1',
-          pageConfigId: boardData.value.pageConfigId,
-          pagePointId: e.id,
-          pagePointName: e.name,
-          fieldOne: index,
-          fieldTwo: e.draggable,
-          width: e.dimensions.width || '',
-          height: e.dimensions.height || '',
-          posX: e.position.x,
-          posY: e.position.y,
-          pointType: e.type,
-          dataContent: JSON.stringify(data)
-        };
-      } else {
-        return {
-          activeFlag: '1',
-          pageConfigId: boardData.value.pageConfigId,
-          pagePointId: e.id,
-          pagePointName: e.name,
-          fieldOne: index,
-          fieldTwo: e.draggable,
-          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 => {
-      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) => {
-  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 'toBottom':
-      nodes.value = [data.node, ...nodes.value.filter(e => e.id !== data.node.id)];
-      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;
-};
-
-const cellClick = (e) => {
-  let option = (nodeAttrForm.value.tableCellOptions || []).find(v => v.index === e.$index && v.cellIndex === e.cellIndex) || {};
-  console.log(e);
-  cellOption.value = {
-    ...(nodeAttrForm.value.tableOptions?.[e.cellIndex] || {}),
-    $index: e.$index,
-    $cellIndex: e.cellIndex,
-    formula: option.formula,
-    type: option.type
-  };
-  cellOptionsVisible.value = true;
-};
-
-const cellTypeChange = (value) => {
-  if (!nodeAttrForm.value.tableCellOptions) {
-    nodeAttrForm.value.tableCellOptions = [];
-  }
-  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
-  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
-  option.type = cellOption.value.type;
-  if (index === -1) {
-    nodeAttrForm.value.tableCellOptions.push({
-      index: cellOption.value.$index,
-      cellIndex: cellOption.value.$cellIndex,
-      type: value,
-      formula: cellOption.value.formula
-    });
-  } else {
-    nodeAttrForm.value.tableCellOptions[index].type = value;
-  }
-};
-
-const cellFormulaChange = (value) => {
-  if (!nodeAttrForm.value.tableCellOptions) {
-    nodeAttrForm.value.tableCellOptions = [];
-  }
-  let option = (nodeAttrForm.value.tableCellOptions || []).find(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex) || {};
-  let index = (nodeAttrForm.value.tableCellOptions || []).findIndex(e => e.index === cellOption.value.$index && e.cellIndex === cellOption.value.$cellIndex);
-  option.formula = cellOption.value.formula;
-  if (index === -1) {
-    nodeAttrForm.value.tableCellOptions.push({
-      index: cellOption.value.$index,
-      cellIndex: cellOption.value.$cellIndex,
-      type: cellOption.value.type,
-      formula: value
-    });
-  } else {
-    nodeAttrForm.value.tableCellOptions[index].formula = value;
-  }
-
-};
-
-const formulaFun = (row, formula) => {
-  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
-    if (key === 'tableData') {
-      return key;
-    }
-    if (`${row[key]}`?.trim() !== '' && !isNaN(row[key])) {
-      return row[key] || 0;
-    } else {
-      return `"${row[key]}"`;
-    }
-  });
-  let res = 0;
-  try {
-    const fun = new Function('tableData', `return ${data}`);
-    res = fun((getInputData(nodeDataForm.value.id) || {}).tableData);
-  } catch (err) {
-    res = 0;
-  }
-  if (`${res}`.trim() !== '' && !isNaN(res)) {
-    res = res.toFixed(2);
-  }
-  return res;
-};
-const setText = (value, row, formula) => {
-  if (!formula) {
-    return value;
-  } else {
-    return formulaFun(row, formula);
-  }
-};
-</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;
-
-
-    /deep/ .vue-flow__resize-control {
-      background-color: #409EFF !important;
-      border: 1px solid white;
-
-      .handle {
-        background-color: #409EFF !important;
-      }
-    }
-
-  }
-
-  .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: 100px;
-  vertical-align: top;
-
-  :deep(.el-card__body) {
-    height: 40px;
-    padding: 0 !important;
-  }
-
-  :deep(.el-card__header) {
-    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>
-<style>
-
-
-</style>
diff --git a/src/views/boardGenerate/index2.vue b/src/views/boardGenerate/index2.vue
deleted file mode 100644
index e17907c..0000000
--- a/src/views/boardGenerate/index2.vue
+++ /dev/null
@@ -1,1668 +0,0 @@
-<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>
diff --git a/src/views/boardGenerate/nodes/form/scrollTableNode.vue b/src/views/boardGenerate/nodes/form/scrollTableNode.vue
index 556408b..eb47dd2 100644
--- a/src/views/boardGenerate/nodes/form/scrollTableNode.vue
+++ b/src/views/boardGenerate/nodes/form/scrollTableNode.vue
@@ -6,7 +6,7 @@
 
     <div class="custom-node"
          :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"
+      <div style="background-color: #094170" v-if="props.data.options.isThShow"
            :style="{ height:props.data.options.thHeight, color:props.data.options.thColor,backgroundColor:props.data.options?.thBgColor }">
         <div class="scrollTable" style="font-weight: bold;"
              :style="{width: i.width || '100px',textAlign:i.align || 'left',lineHeight:props.data.options.thHeight}"
@@ -27,16 +27,22 @@
           <div class="scrollTable" style="font-weight: bold;"
                :style="{width: i.width || '100px',height:props.data.options.tdHeight,lineHeight:props.data.options.tdHeight,textAlign:i.align || 'left' }"
                v-for="(i,k) in props.data.options.tableOptions">
-            <span v-if="i.type === '文本'">{{ setText(((props.inputData.tableData || [])[k] || {})[i.field], i.formula)
-              }}</span>
-            <el-tag type="primary" v-else-if="i.type === '标签'">
-              {{ setText(((props.inputData.tableData || [])[k] || {})[i.field], i.formula) }}
-            </el-tag>
-            <el-image :preview-src-list="[((props.inputData.tableData || [])[k] || {})[i.field]]"
-                      v-else-if="i.type === '图片'" style="width: 100%;" :style="{height:props.data.options.tdHeight}"
-                      :src="setText(((props.inputData.tableData || [])[k] || {})[i.field],i.formula)" fit="contain" />
+            <span v-if="i.type === '文本'">
+              {{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula)}}
+            </span>
 
-            <span v-else>{{ setText(((props.inputData.tableData || [])[k] || {})[i.field], i.formula) }}</span>
+            <el-progress class="progress" v-else-if="i.type === '进度条'" :text-inside="true"
+                         :stroke-width="26"
+                         :percentage="parseFloat(setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula))" />
+
+            <el-tag type="primary" v-else-if="i.type === '标签'">
+              {{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
+            </el-tag>
+            <el-image :preview-src-list="[((props.inputData.tableData || [])[index] || {})[i.field]]"
+                      v-else-if="i.type === '图片'" style="width: 100%;" :style="{height:props.data.options.tdHeight}"
+                      :src="setText(((props.inputData.tableData || [])[index] || {})[i.field],i.formula)" fit="contain" />
+
+            <span v-else>{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span>
 
           </div>
         </div>
@@ -125,6 +131,13 @@ const resize = (e) => {
 .scrollTable {
   display: inline-block;
   vertical-align: top;
+  position: relative;
+}
+.progress{
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  transform: translateY(-50%);
 }
 </style>
 
diff --git a/src/views/print/nodes/selectNode.vue b/src/views/print/nodes/selectNode.vue
index b014f2c..e9dac5c 100644
--- a/src/views/print/nodes/selectNode.vue
+++ b/src/views/print/nodes/selectNode.vue
@@ -24,7 +24,6 @@
           {{ text }}
           </span>
       </div>
-
     </div>
   </div>
 </template>
@@ -180,6 +179,7 @@ const border = () => {
   .span {
     text-align: center;
     width: 100%;
+    font-size: 14px;
   }
 }