diff --git a/package.json b/package.json
index c4867ab..8be1de0 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
     "@highlightjs/vue-plugin": "2.1.0",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/core": "^1.43.1",
     "@vue-flow/node-resizer": "^1.4.0",
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 419505e..378efdb 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -1,402 +1,413 @@
 <template>
-  <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>
-        </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, '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>
-        <template v-for="i in customBoard">
+  <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, 'customBoard',i)"
-                   :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                   @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">{{ 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)"
-                   :style="{display:'inline-block',margin:'0 4px 4px 0'}"
+                   @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">{{ i.name }}</div>
+            <div class="moduleText">多折线</div>
           </el-card>
-        </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 />
+          <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, '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>
+          <template v-for="i in customBoard">
+            <el-card class="moduleCard" shadow="never" :draggable="true"
+                     @dragstart="onDragStart($event, 'customBoard',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 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 />
+        </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)"
+                     :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 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 />
+        </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 />
+            </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-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>
+      <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"
+        >
+          <Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
+
+          <template #node-area="areaNodeProps">
+            <AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode>
           </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 #node-customBoard="customBoardNodeProps">
+            <CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
+                             @resize="resize"></CustomBoardNode>
           </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>
+          <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-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-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-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>
+        </VueFlow>
       </div>
     </div>
-    <div class="flowArea">
-      <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-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-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-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>
-      </VueFlow>
+    <div class="rightPanel">
+      <el-collapse>
+        <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
+          <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
+            <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>
+        </el-collapse-item>
+        <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
+          <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="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('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('imgSrc')">
+              <el-input v-model="nodeAttrForm.imgSrc" 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>
+        </el-collapse-item>
+        <el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
+          <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-select>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+      </el-collapse>
     </div>
   </div>
-  <div class="rightPanel">
-    <el-collapse>
-      <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
-        <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
-          <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>
-      </el-collapse-item>
-      <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
-        <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="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('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('imgSrc')">
-            <el-input v-model="nodeAttrForm.imgSrc" 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>
-      </el-collapse-item>
-      <el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
-        <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-select>
-              </template>
-            </el-input>
-          </el-form-item>
-        </el-form>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
   <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
     <el-form :model="pageSettingForm">
       <el-form-item label="页面大小" label-width="80px">
@@ -411,11 +422,12 @@
       <el-form-item label="页面背景" label-width="80px">
         <el-upload
           class="avatar-uploader"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :action="uploadFileUrl"
           :show-file-list="false"
           :limit="1"
           accept=".jpg,.png"
-          :before-upload="pageBgUploadSuccess"
+          :headers="headers"
+          :on-success="pageBgUploadSuccess"
         >
           <img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
           <el-icon v-else class="avatar-uploader-icon">
@@ -435,6 +447,7 @@
   </el-dialog>
 </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 } from '@element-plus/icons-vue';
@@ -472,6 +485,11 @@ const {
   updateNode
 } = useVueFlow();
 
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
+const headers = ref(globalHeaders());
+
+const loading = ref(false)
 const pageSettingVisible = ref(false);
 const pageSettingForm = ref({});
 const pageTitle = ref('页面名称');
@@ -492,6 +510,7 @@ const customData = ref([]);
 const customBoard = ref([]);
 const boardData = ref({});
 onMounted(async () => {
+  loading.value = true
   getDataSourceList({
     pageNum: 1,
     pageSize: 9999999
@@ -566,7 +585,11 @@ onMounted(async () => {
         };
       }) || [];
       pageData.value = JSON.parse(data.customContent) || {};
-    });
+    })
+    .finally(()=>{
+
+      loading.value = false
+    })
   // pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
 });
 const customDataForm = ref({});
@@ -755,18 +778,21 @@ const clear = () => {
   edges.value = [];
 
 };
-const pageBgUploadSuccess = (file) => {
-  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;
+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 setPageData = () => {
   pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
diff --git a/src/views/boardGenerate/nodes/board/barNode.vue b/src/views/boardGenerate/nodes/board/barNode.vue
index b05e05d..89faef6 100644
--- a/src/views/boardGenerate/nodes/board/barNode.vue
+++ b/src/views/boardGenerate/nodes/board/barNode.vue
@@ -61,6 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
+    show:props.data?.options?.legend||false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -71,6 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
+    show:props.data?.options?.tooltip||false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -185,6 +187,12 @@ const getOption = () => {
       title: {
         text: props.data.options.title || ''
       },
+    legend: {
+      show: props.data?.options?.legend || false,
+    },
+    tooltip: {
+      show:props.data?.options?.tooltip||false,
+    },
       grid: {
         top: props.data?.options?.gridTop + '%' || '20%',
         left: props.data?.options?.gridLeft + '%' || '20%',
diff --git a/src/views/boardGenerate/nodes/board/curveNode.vue b/src/views/boardGenerate/nodes/board/curveNode.vue
index c3a5b1a..f875681 100644
--- a/src/views/boardGenerate/nodes/board/curveNode.vue
+++ b/src/views/boardGenerate/nodes/board/curveNode.vue
@@ -61,6 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
+    show:props.data?.options?.legend||false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -71,6 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
+    show:props.data?.options?.tooltip||false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -192,6 +194,12 @@ const getOption = () => {
     title: {
       text: props.data.options.title || ''
     },
+    legend: {
+      show: props.data?.options?.legend || false,
+    },
+    tooltip: {
+      show:props.data?.options?.tooltip||false,
+    },
     grid: {
       top: props.data?.options?.gridTop + '%' || '20%',
       left: props.data?.options?.gridLeft + '%' || '20%',
diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue
index f73b5fa..5075d44 100644
--- a/src/views/boardGenerate/nodes/board/lineNode.vue
+++ b/src/views/boardGenerate/nodes/board/lineNode.vue
@@ -61,6 +61,7 @@ const defaultOption = {
     top: '5%'
   },
   legend: {
+    show:props.data?.options?.legend||false,
     icon: 'circle',
     top: '5%',
     right: '5%',
@@ -71,6 +72,7 @@ const defaultOption = {
     }
   },
   tooltip: {
+    show:props.data?.options?.tooltip||false,
     trigger: 'axis',
     axisPointer: {
       label: {
@@ -189,6 +191,12 @@ const getOption = () => {
     title: {
       text: props.data.options.title || ''
     },
+    legend: {
+      show: props.data?.options?.legend || false,
+    },
+    tooltip: {
+      show:props.data?.options?.tooltip||false,
+    },
     grid: {
       top: props.data?.options?.gridTop + '%' || '20%',
       left: props.data?.options?.gridLeft + '%' || '20%',
@@ -235,7 +243,7 @@ onMounted(() => {
 });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-
+    console.log(1123);
     chart && chart.setOption(getOption(), false);
   }
 }, { deep: true, immediate: true });
diff --git a/src/views/boardGenerate/nodes/board/multiBarsNode.vue b/src/views/boardGenerate/nodes/board/multiBarsNode.vue
index f8ffe02..997a736 100644
--- a/src/views/boardGenerate/nodes/board/multiBarsNode.vue
+++ b/src/views/boardGenerate/nodes/board/multiBarsNode.vue
@@ -76,6 +76,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show:props.data?.options?.legend||false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -86,6 +87,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {
diff --git a/src/views/boardGenerate/nodes/board/multiCurvesNode.vue b/src/views/boardGenerate/nodes/board/multiCurvesNode.vue
index 3e2186f..346f83b 100644
--- a/src/views/boardGenerate/nodes/board/multiCurvesNode.vue
+++ b/src/views/boardGenerate/nodes/board/multiCurvesNode.vue
@@ -76,6 +76,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show: props.data?.options?.legend || false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -86,6 +87,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {
diff --git a/src/views/boardGenerate/nodes/board/multiLinesNode.vue b/src/views/boardGenerate/nodes/board/multiLinesNode.vue
index b533997..70e0c93 100644
--- a/src/views/boardGenerate/nodes/board/multiLinesNode.vue
+++ b/src/views/boardGenerate/nodes/board/multiLinesNode.vue
@@ -76,6 +76,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show:props.data?.options?.legend||false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -86,6 +87,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {
diff --git a/src/views/boardGenerate/nodes/board/pieNode.vue b/src/views/boardGenerate/nodes/board/pieNode.vue
index 6e94c00..3dc6ec8 100644
--- a/src/views/boardGenerate/nodes/board/pieNode.vue
+++ b/src/views/boardGenerate/nodes/board/pieNode.vue
@@ -62,6 +62,7 @@ const getOption = () => {
       top: '5%'
     },
     legend: {
+      show:props.data?.options?.legend||false,
       icon: 'circle',
       top: '5%',
       right: '5%',
@@ -72,6 +73,7 @@ const getOption = () => {
       }
     },
     tooltip: {
+      show:props.data?.options?.tooltip||false,
       trigger: 'axis',
       axisPointer: {
         label: {
@@ -102,6 +104,7 @@ const getOption = () => {
         type: 'pie',
         radius: '50%',
         label: {
+          show:props.data?.options?.label||false,
           formatter: '{b}:  {d}%'
         }
       }
@@ -109,7 +112,7 @@ const getOption = () => {
   };
   let xData = [props.inputData?.x1 || []];
   let yData = [props.inputData?.y1 || []];
-  console.log(props.inputData); 
+  console.log(chartOption);
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
   let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
   Array(length).fill(0).forEach((_, i) => {
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index b3c9c1b..25e2672 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -10,13 +10,13 @@ const getId = (type) => {
 
 const getOption = (e) => {
   if (e === 'line' || e === 'multiLines') {
-    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
   } else if (e === 'bar' || e === 'multiBars') {
-    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
   } else if (e === 'curve' || e === 'multiCurves') {
-    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
+    return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
   } else if (e === 'pie') {
-    return { title: '', yNames: [] };
+    return { title: '', yNames: [], tooltip:true, legend:true,label:true };
   } else if (e === 'customBoard') {
     return { title: '', yNames: [] };
   } else if (e === 'data') {
diff --git a/src/views/boardGenerate/view.vue b/src/views/boardGenerate/view.vue
index fb2ee04..fae1144 100644
--- a/src/views/boardGenerate/view.vue
+++ b/src/views/boardGenerate/view.vue
@@ -5,7 +5,6 @@
       <template v-if="i.type === 'customBoard'">
         <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
       </template>
-      00
       <template v-if="i.type === 'customData'">
         <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
       </template>
@@ -101,8 +100,8 @@ const getInputData = (e) => {
   });
   return outputData;
 };
-onMounted(() => {
-  getBoardApi(router.currentRoute.value.query.id)
+onMounted(async () => {
+  await getBoardApi(router.currentRoute.value.query.id)
     .then((res) => {
       let data = res.data;
       nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
@@ -157,8 +156,10 @@ onMounted(() => {
           sourceHandle: e.sourceHandleId
         };
       }) || [];
+      area.value = JSON.parse(data.customContent) || {};
     });
-  area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
+  // area.value = nodes.value.find(e=>e.type==='area')
+  // console.log('area.value',area.value);
 });
 </script>
 <style lang="less" scoped>
diff --git a/src/views/print/index.vue b/src/views/print/index.vue
index 171f0bd..83f5143 100644
--- a/src/views/print/index.vue
+++ b/src/views/print/index.vue
@@ -20,6 +20,7 @@
         <el-input v-model="zoomInput" disabled style="margin-left: 8px;width:100px" />
         <el-button @click="zoomChange(0.1)" icon="ZoomIn" circle style="margin-left: 8px;" />
         <el-button type="primary" @click="view" style="margin-left: 12px;">预览</el-button>
+        <el-button type="primary" @click="imp" style="margin-left: 12px;">场景1</el-button>
         <el-button type="primary" @click="save" style="margin-left: 12px;">保存</el-button>
         <el-button type="primary" @click="clear" style="margin-left: 12px;">清空</el-button>
       </div>
@@ -442,17 +443,17 @@ const logEvent = async (eventname, event) => {
       break;
   }
 };
-// const nodes = ref([{
-//   id: pid.value,
-//   name: 'area',
-//   type: 'area',
-//   position: {
-//     x: 0,
-//     y: 0
-//   },
-//   data: {}
-// }]);
-const nodes = ref([]);
+const nodes = ref([{
+  id: pid.value,
+  name: 'area',
+  type: 'area',
+  position: {
+    x: 0,
+    y: 0
+  },
+  data: {}
+}]);
+// const nodes = ref([]);
 const edges = ref([]);
 
 const setPage = (type, width, height) => {
@@ -487,6 +488,17 @@ const save = () => {
   localStorage.setItem('printNodes', JSON.stringify(nodes.value));
 };
 const clear = () => {
+  pid.value =  `area_${uuidv4().replaceAll('-', '_')}`
+   nodes.value = [{
+    id: pid.value,
+    name: 'area',
+    type: 'area',
+    position: {
+      x: 0,
+      y: 0
+    },
+    data: {}
+  }]
 };
 
 onMounted(() => {
@@ -497,8 +509,11 @@ onMounted(() => {
       zoom: 1
     });
   });
-  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
-  pid.value = nodes.value.find(e => e.name === 'area')?.id;
+  let nodesData = localStorage.getItem('printNodes')
+  if(nodesData){
+    nodes.value = JSON.parse(nodesData);
+    pid.value = nodes.value.find(e => e.name === 'area')?.id;
+  }
   console.log(nodes.value);
 });
 watch(() => flowRef.value?.viewport, () => {
@@ -524,6 +539,11 @@ window.addEventListener('keyup', keyup);
 const nodeChange = () => {
   updateNode(nodeData.value.id, JSON.parse(JSON.stringify(nodeData.value)), { replace: false });
 };
+const imp = () =>{
+let json ='[{"id":"text_e0ed2e33_b370_493f_9e85_179277939055","type":"text","dimensions":{"width":189,"height":76},"computedPosition":{"x":283.4645669291338,"y":0,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":0},"data":{"options":{"field":"planDetailId","default":"","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":true,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent"},{"id":"text_af484d4b_42c0_463f_b0f7_eb0f716fbc5a","type":"text","dimensions":{"width":189,"height":19},"computedPosition":{"x":283.4645669291338,"y":94.48818897637794,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":94.48818897637794},"data":{"options":{"default":"planId","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent","style":{"width":"189px","height":"18.89763779527559px"}},{"id":"barCode_1dd4465e_928c_49f2_867b_061fc5f96843","type":"barCode","dimensions":{"width":189,"height":76},"computedPosition":{"x":0,"y":188.97637795275588,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":0,"y":188.97637795275588},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"barCode","extent":"parent"},{"id":"QRCode_9ad0beba_b555_45ac_a1c6_23f23a6c9e9a","type":"QRCode","dimensions":{"width":189,"height":189},"computedPosition":{"x":529.1338582677165,"y":151.1811023622047,"z":1000},"handleBounds":{"source":null,"target":null},"selected":true,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":529.1338582677165,"y":151.1811023622047},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"QRCode","extent":"parent"}]'
+  nodes.value = JSON.parse(json);
+  pid.value = nodes.value.find(e => e.name === 'area')?.id;
+}
 </script>
 <style lang="less" scoped>
 .borderOption {