diff --git a/src/views/system/preview/index.vue b/src/views/system/preview/index.vue
index 432a502..95a68fc 100644
--- a/src/views/system/preview/index.vue
+++ b/src/views/system/preview/index.vue
@@ -1,888 +1,889 @@
 <template>
-  <div id="vue-g6-editor">
-    <el-row>
-      <el-col :span="24">
-        <!-- <header>vue-g6-editor</header> -->
-      </el-col>
-    </el-row>
-    <!-- 工具栏 -->
-    <el-row>
-      <el-col :span="24">
-        <div id="toolbar">
-          <!-- <font-awesome-icon icon="fa fa-history" />
-          <font-awesome-icon icon="heart" />
-          <font-awesome-icon icon="clock" />
-          <font-awesome-icon icon="clock" style="color: #476151" />
-          <i
-            class="el-icon-edit"
-            data-command="save"
-            title="保存"
-            @click="submitForm"
-            >保存</i
-          > -->
-          <!-- <font-awesome-icon icon="heart" /> -->
-          <!-- <FontAwesomeIcon icon="far fa-copy" /> -->
-          <font-awesome-icon
-            data-command="save"
-            class="command fa fa-floppy-o"
-            icon="command far far fa-copy"
-            title="保存"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-reply-all"
-            title="历史数据"
-            @click="readHistoryData"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            class="fa fa-hdd-o"
-            icon="fas fa-file"
-            title="上传数据"
-            @click="readUploadData"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            icon="fas fa-download"
-            style="margin-left: 10px"
-            title="另存为文件"
-            @click="saveAsFile"
-            >文件</font-awesome-icon
-          >
-          <!-- <FontAwesomeIcon icon="fas fa-image" /> -->
-
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-image"
-            title="另存为图片"
-            @click="openSaveAsImageDialog"
-          ></font-awesome-icon>
-
-          <font-awesome-icon
-            style="margin-left: 10px"
-            data-command="undo"
-            icon="fas fa-undo"
-            class="command fa fa-undo"
-            title="撤销"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            data-command="redo"
-            class="command fa fa-repeat"
-            icon="fas fa-repeat"
-            title="重做"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            data-command="delete"
-            class="command fa fa-trash-o"
-            icon="fas fa-trash-alt"
-            title="删除"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            data-command="zoomOut"
-            class="command fa fa-search-minus"
-            icon="fas fa-search-minus"
-            title="缩小"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            data-command="zoomIn"
-            icon="fas fa-search-plus"
-            class="command fa fa-search-plus"
-            title="放大"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-eraser"
-            data-command="clear"
-            class="command fa fa-eraser"
-            title="清除画布"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-arrow-up"
-            data-command="toFront"
-            class="command fa fa-arrow-up"
-            title="提升层级"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-arrow-down"
-            data-command="toBack"
-            class="command fa fa-arrow-down"
-            title="下降层级"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-check-square"
-            data-command="selectAll"
-            class="command fa fa-check-square-o"
-            title="全选"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="far fa-copy"
-            data-command="copy"
-            class="command fa fa-files-o"
-            title="复制"
-          ></font-awesome-icon>
-
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-clone"
-            data-command="paste"
-            class="command fa fa-clipboard"
-            title="粘贴"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-expand"
-            data-command="autoZoom"
-            class="command fa fa-expand"
-            title="实际大小"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-compress"
-            data-command="resetZoom"
-            class="command fa fa-compress"
-            title="适应页面"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-object-group"
-            data-command="addGroup"
-            class="command fa fa-object-group"
-            title="组合"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-object-ungroup"
-            data-command="unGroup"
-            class="command fa fa-object-ungroup"
-            title="取消组合"
-          ></font-awesome-icon>
-          <font-awesome-icon
-            style="margin-left: 10px"
-            icon="fas fa-crop"
-            data-command="multiSelect"
-            class="command fa fa fa-crop"
-            title="多选"
-          ></font-awesome-icon>
-        </div>
-      </el-col>
-    </el-row>
-    <!-- 元素面板 + 画布 + 属性栏 -->
-    <el-row>
-      <!-- 元素面板 -->
-      <el-col :span="2">
-        <div id="itempannel">
-          <!-- 开始节点 -->
-          <div
-            id="startNode"
-            class="getItem"
-            data-type="node"
-            data-shape="flow-circle"
-            data-size="72*72"
-            data-label="开始节点"
-            data-color="#FA8C16"
-            data-nodeType="startNode"
-          >
-            <img draggable="false" :src="startNodeSVGUrl" alt srcset />
-          </div>
-          <!-- 常规节点 -->
-          <div
-            id="regularNode"
-            class="getItem"
-            data-type="node"
-            data-size="100*50"
-            data-label="常规节点"
-            data-color="#1890ff"
-          >
-            <img draggable="false" :src="regularNodeSVGUrl" alt srcset />
-          </div>
-
-          <!-- 条件节点 -->
-          <div
-            id="judgeNode"
-            class="getItem"
-            data-type="node"
-            data-shape="flow-rhombus"
-            data-size="80*80"
-            data-label="条件节点"
-            data-color="#13C2C2"
-          >
-            <img draggable="false" :src="conditionNodeSVGUrl" />
-          </div>
-          <!-- 自定义节点 -->
-          <div
-            class="getItem"
-            data-type="node"
-            data-shape="customNode"
-            data-size="80*48"
-            data-labeltitle=""
-            data-labelconcent=""
-            data-color="#722ED1"
-          >
-            <img draggable="false" :src="nNodeSVGUrl" />
-          </div>
-
-          <!-- 结束节点 -->
-          <div
-            id="endNode"
-            class="getItem"
-            data-type="node"
-            data-shape="flow-circle"
-            data-size="80*80"
-            data-label="结束节点"
-            data-color="#FA8C16"
-            data-nodeType="endNode"
-          >
-            <img draggable="false" :src="endNodeSVGUrl" />
-          </div>
-        </div>
-      </el-col>
-      <!-- 画布 -->
-      <el-col :span="18">
+    <div id="vue-g6-editor">
+      <el-row>
         <el-col :span="24">
-          <div id="page"></div>
+          <!-- <header>vue-g6-editor</header> -->
         </el-col>
-      </el-col>
-      <!-- 属性栏 -->
-      <el-col :span="4">
-        <section class="right-part">
-          <div id="detailpannel">
-            <!-- 节点属性栏 -->
-            <div
-              id="nodeAttributeBar"
-              class="pannel"
-              data-status="node-selected"
+      </el-row>
+      <!-- 工具栏 -->
+      <el-row>
+        <el-col :span="24">
+          <div id="toolbar">
+            <!-- <font-awesome-icon icon="fa fa-history" />
+            <font-awesome-icon icon="heart" />
+            <font-awesome-icon icon="clock" />
+            <font-awesome-icon icon="clock" style="color: #476151" />
+            <i
+              class="el-icon-edit"
+              data-command="save"
+              title="保存"
+              @click="submitForm"
+              >保存</i
+            > -->
+            <!-- <font-awesome-icon icon="heart" /> -->
+            <!-- <FontAwesomeIcon icon="far fa-copy" /> -->
+            <font-awesome-icon
+              data-command="save"
+              class="command fa fa-floppy-o"
+              icon="command far far fa-copy"
+              title="保存"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-reply-all"
+              title="历史数据"
+              @click="readHistoryData"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              class="fa fa-hdd-o"
+              icon="fas fa-file"
+              title="上传数据"
+              @click="readUploadData"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              icon="fas fa-download"
+              style="margin-left: 10px"
+              title="另存为文件"
+              @click="saveAsFile"
+              >文件</font-awesome-icon
             >
-              <div class="title">节点属性</div>
-              <div class="main">
-                <el-form
-                  :model="nodeAttributeForm"
-                  label-position="top"
-                  label-width="80px"
-                >
-                  <el-form-item label="节点文本" v-if="type != 'customNode'">
-                    <el-input
-                      v-model="nodeAttributeForm.label"
-                      @change="saveNodeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="标题" v-if="type == 'customNode'">
-                    <el-input
-                      type="textarea"
-                      v-model="nodeAttributeForm.labeltitle"
-                      @change="saveNodeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="内容" v-if="type == 'customNode'">
-                    <el-input
-                      type="textarea"
-                      v-model="nodeAttributeForm.labelconcent"
-                      @change="saveNodeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="宽度">
-                    <el-input
-                      v-model="nodeAttributeForm.width"
-                      @change="saveNodeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="高度">
-                    <el-input
-                      v-model="nodeAttributeForm.height"
-                      @change="saveNodeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="颜色">
-                    <el-color-picker
-                      v-model="nodeAttributeForm.color"
-                      @change="saveNodeAttribute"
-                    ></el-color-picker>
-                  </el-form-item>
-                </el-form>
-              </div>
+            <!-- <FontAwesomeIcon icon="fas fa-image" /> -->
+  
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-image"
+              title="另存为图片"
+              @click="openSaveAsImageDialog"
+            ></font-awesome-icon>
+  
+            <font-awesome-icon
+              style="margin-left: 10px"
+              data-command="undo"
+              icon="fas fa-undo"
+              class="command fa fa-undo"
+              title="撤销"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              data-command="redo"
+              class="command fa fa-repeat"
+              icon="fas fa-repeat"
+              title="重做"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              data-command="delete"
+              class="command fa fa-trash-o"
+              icon="fas fa-trash-alt"
+              title="删除"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              data-command="zoomOut"
+              class="command fa fa-search-minus"
+              icon="fas fa-search-minus"
+              title="缩小"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              data-command="zoomIn"
+              icon="fas fa-search-plus"
+              class="command fa fa-search-plus"
+              title="放大"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-eraser"
+              data-command="clear"
+              class="command fa fa-eraser"
+              title="清除画布"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-arrow-up"
+              data-command="toFront"
+              class="command fa fa-arrow-up"
+              title="提升层级"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-arrow-down"
+              data-command="toBack"
+              class="command fa fa-arrow-down"
+              title="下降层级"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-check-square"
+              data-command="selectAll"
+              class="command fa fa-check-square-o"
+              title="全选"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="far fa-copy"
+              data-command="copy"
+              class="command fa fa-files-o"
+              title="复制"
+            ></font-awesome-icon>
+  
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-clone"
+              data-command="paste"
+              class="command fa fa-clipboard"
+              title="粘贴"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-expand"
+              data-command="autoZoom"
+              class="command fa fa-expand"
+              title="实际大小"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-compress"
+              data-command="resetZoom"
+              class="command fa fa-compress"
+              title="适应页面"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-object-group"
+              data-command="addGroup"
+              class="command fa fa-object-group"
+              title="组合"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-object-ungroup"
+              data-command="unGroup"
+              class="command fa fa-object-ungroup"
+              title="取消组合"
+            ></font-awesome-icon>
+            <font-awesome-icon
+              style="margin-left: 10px"
+              icon="fas fa-crop"
+              data-command="multiSelect"
+              class="command fa fa fa-crop"
+              title="多选"
+            ></font-awesome-icon>
+          </div>
+        </el-col>
+      </el-row>
+      <!-- 元素面板 + 画布 + 属性栏 -->
+      <el-row>
+        <!-- 元素面板 -->
+        <el-col :span="2">
+          <div id="itempannel">
+            <!-- 开始节点 -->
+            <div
+              id="startNode"
+              class="getItem"
+              data-type="node"
+              data-shape="flow-circle"
+              data-size="72*72"
+              data-label="开始节点"
+              data-color="#FA8C16"
+              data-nodeType="startNode"
+            >
+              <img draggable="false" :src="startNodeSVGUrl" alt srcset />
             </div>
-            <!-- 边属性栏 -->
+            <!-- 常规节点 -->
             <div
-              id="edgeAttributeBar"
-              class="pannel"
-              data-status="edge-selected"
+              id="regularNode"
+              class="getItem"
+              data-type="node"
+              data-size="100*50"
+              data-label="常规节点"
+              data-color="#1890ff"
             >
-              <div class="title">边属性</div>
-              <div class="main">
-                <el-form
-                  :model="edgeAttributeForm"
-                  label-position="top"
-                  label-width="80px"
-                >
-                  <el-form-item label="边文本">
-                    <el-input
-                      v-model="edgeAttributeForm.label"
-                      @change="saveEdgeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <el-form-item label="关键字">
-                    <el-input
-                    type="textarea"
-                      v-model="edgeAttributeForm.keyword"
-                      @change="saveEdgeAttribute"
-                    ></el-input>
-                  </el-form-item>
-                  <!-- <el-form-item label="边文本">
-                    <el-select
-                      v-model="edgeAttributeForm.shape"
-                      @change="saveEdgeAttribute"
-                    >
-                      <el-option
-                        label="流程图折线"
-                        value="flow-polyline"
-                      ></el-option>
-                      <el-option
-                        label="流程图圆⻆折线"
-                        value="flow-polyline-round"
-                      ></el-option>
-                      <el-option
-                        label="流程图曲线"
-                        value="flow-smooth"
-                      ></el-option>
-                    </el-select>
-                  </el-form-item> -->
-                </el-form>
-              </div>
+              <img draggable="false" :src="regularNodeSVGUrl" alt srcset />
             </div>
+  
+            <!-- 条件节点 -->
             <div
-              id="groupAttributeBar"
-              class="pannel"
-              data-status="group-selected"
+              id="judgeNode"
+              class="getItem"
+              data-type="node"
+              data-shape="flow-rhombus"
+              data-size="80*80"
+              data-label="条件节点"
+              data-color="#13C2C2"
             >
-              <div class="title">群组属性栏</div>
+              <img draggable="false" :src="conditionNodeSVGUrl" />
             </div>
+            <!-- 自定义节点 -->
             <div
-              id="canvasAttributeBar"
-              class="pannel"
-              data-status="canvas-selected"
+              class="getItem"
+              data-type="node"
+              data-shape="customNode"
+              data-size="80*48"
+              data-labeltitle=""
+              data-labelconcent=""
+              data-color="#722ED1"
             >
-              <div class="title">画布属性栏</div>
-              <div class="main">
-                <el-form label-width="80px" label-position="right">
-                  <el-form-item label="网格对齐">
-                    <el-checkbox
-                      v-model="canvasAttributeForm.grid"
-                      @change="toggleGridShowStatus"
-                    ></el-checkbox>
-                  </el-form-item>
-                </el-form>
-              </div>
+              <img draggable="false" :src="nNodeSVGUrl" />
             </div>
+  
+            <!-- 结束节点 -->
             <div
-              id="multiAttributeBar"
-              class="pannel"
-              data-status="multi-selected"
+              id="endNode"
+              class="getItem"
+              data-type="node"
+              data-shape="flow-circle"
+              data-size="80*80"
+              data-label="结束节点"
+              data-color="#FA8C16"
+              data-nodeType="endNode"
             >
-              <div class="title">多选时属性栏</div>
+              <img draggable="false" :src="endNodeSVGUrl" />
             </div>
           </div>
-          <!-- 缩略图 -->
-          <div id="minimap">
-            <div class="title">缩略图</div>
-          </div>
-        </section>
-      </el-col>
-    </el-row>
-    <!-- 弹窗 -->
-    <article>
-      <!-- 下载图片 -->
-      <section class="save-as-image-dialog">
-        <el-dialog
-          title="下载图片"
-          :visible.sync="saveAsImageDialogVisible"
-          width="360px"
-        >
-          <el-form label-width="100px" label-position="top">
-            <el-form-item label="选择图片格式">
-              <el-select v-model="saveAsImageFormat">
-                <el-option label="jpg" value="jpg">
-                  <span style="float: left">jpg</span>
-                  <span style="float: right; color: #8492a6; font-size: 13px"
-                    >白色背景</span
+        </el-col>
+        <!-- 画布 -->
+        <el-col :span="18">
+          <el-col :span="24">
+            <div id="page"></div>
+          </el-col>
+        </el-col>
+        <!-- 属性栏 -->
+        <el-col :span="4">
+          <section class="right-part">
+            <div id="detailpannel">
+              <!-- 节点属性栏 -->
+              <div
+                id="nodeAttributeBar"
+                class="pannel"
+                data-status="node-selected"
+              >
+                <div class="title">节点属性</div>
+                <div class="main">
+                  <el-form
+                    :model="nodeAttributeForm"
+                    label-position="top"
+                    label-width="80px"
                   >
-                </el-option>
-                <el-option label="png" value="png">
-                  <span style="float: left">png</span>
-                  <span style="float: right; color: #8492a6; font-size: 13px"
-                    >透明背景</span
+                    <el-form-item label="节点文本" v-if="type != 'customNode'">
+                      <el-input
+                        v-model="nodeAttributeForm.label"
+                        @change="saveNodeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="标题" v-if="type == 'customNode'">
+                      <el-input
+                        type="textarea"
+                        v-model="nodeAttributeForm.labeltitle"
+                        @change="saveNodeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="内容" v-if="type == 'customNode'">
+                      <el-input
+                        type="textarea"
+                        v-model="nodeAttributeForm.labelconcent"
+                        @change="saveNodeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="宽度">
+                      <el-input
+                        v-model="nodeAttributeForm.width"
+                        @change="saveNodeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="高度">
+                      <el-input
+                        v-model="nodeAttributeForm.height"
+                        @change="saveNodeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="颜色">
+                      <el-color-picker
+                        v-model="nodeAttributeForm.color"
+                        @change="saveNodeAttribute"
+                      ></el-color-picker>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+              <!-- 边属性栏 -->
+              <div
+                id="edgeAttributeBar"
+                class="pannel"
+                data-status="edge-selected"
+              >
+                <div class="title">边属性</div>
+                <div class="main">
+                  <el-form
+                    :model="edgeAttributeForm"
+                    label-position="top"
+                    label-width="80px"
                   >
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <span slot="footer">
-            <el-button @click="saveAsImageDialogVisible = false"
-              >取 消</el-button
-            >
-            <el-button type="primary" @click="saveAsImage">确 定</el-button>
-          </span>
-        </el-dialog>
-      </section>
-    </article>
-    <!-- 右键菜单 -->
-    <section>
-      <div id="contextmenu">
-        <div data-status="node-selected" class="menu">
-          <el-button data-command="copy" class="command">复制</el-button>
-          <el-button data-command="paste" class="command">粘贴</el-button>
-          <el-button data-command="delete" class="command">删除</el-button>
-        </div>
-        <div data-status="edge-selected" class="menu">
-          <el-button data-command="delete" class="command">删除</el-button>
-        </div>
-        <div data-status="group-selected" class="menu">
-          <el-button data-command="copy" class="command">复制</el-button>
-          <el-button data-command="paste" class="command">粘贴</el-button>
-          <el-button data-command="unGroup" class="command">取消组合</el-button>
-          <el-button data-command="delete" class="command">删除</el-button>
-        </div>
-        <div data-status="canvas-selected" class="menu">
-          <el-button data-command="undo" class="command">撤销</el-button>
-          <el-button data-command="redo" class="command disable"
-            >重做</el-button
+                    <el-form-item label="边文本">
+                      <el-input
+                        v-model="edgeAttributeForm.label"
+                        @change="saveEdgeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <el-form-item label="关键字">
+                      <el-input
+                      type="textarea"
+                        v-model="edgeAttributeForm.keyword"
+                        @change="saveEdgeAttribute"
+                      ></el-input>
+                    </el-form-item>
+                    <!-- <el-form-item label="边文本">
+                      <el-select
+                        v-model="edgeAttributeForm.shape"
+                        @change="saveEdgeAttribute"
+                      >
+                        <el-option
+                          label="流程图折线"
+                          value="flow-polyline"
+                        ></el-option>
+                        <el-option
+                          label="流程图圆⻆折线"
+                          value="flow-polyline-round"
+                        ></el-option>
+                        <el-option
+                          label="流程图曲线"
+                          value="flow-smooth"
+                        ></el-option>
+                      </el-select>
+                    </el-form-item> -->
+                  </el-form>
+                </div>
+              </div>
+              <div
+                id="groupAttributeBar"
+                class="pannel"
+                data-status="group-selected"
+              >
+                <div class="title">群组属性栏</div>
+              </div>
+              <div
+                id="canvasAttributeBar"
+                class="pannel"
+                data-status="canvas-selected"
+              >
+                <div class="title">画布属性栏</div>
+                <div class="main">
+                  <el-form label-width="80px" label-position="right">
+                    <el-form-item label="网格对齐">
+                      <el-checkbox
+                        v-model="canvasAttributeForm.grid"
+                        @change="toggleGridShowStatus"
+                      ></el-checkbox>
+                    </el-form-item>
+                  </el-form>
+                </div>
+              </div>
+              <div
+                id="multiAttributeBar"
+                class="pannel"
+                data-status="multi-selected"
+              >
+                <div class="title">多选时属性栏</div>
+              </div>
+            </div>
+            <!-- 缩略图 -->
+            <div id="minimap">
+              <div class="title">缩略图</div>
+            </div>
+          </section>
+        </el-col>
+      </el-row>
+      <!-- 弹窗 -->
+      <article>
+        <!-- 下载图片 -->
+        <section class="save-as-image-dialog">
+          <el-dialog
+            title="下载图片"
+            :visible.sync="saveAsImageDialogVisible"
+            width="360px"
           >
+            <el-form label-width="100px" label-position="top">
+              <el-form-item label="选择图片格式">
+                <el-select v-model="saveAsImageFormat">
+                  <el-option label="jpg" value="jpg">
+                    <span style="float: left">jpg</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px"
+                      >白色背景</span
+                    >
+                  </el-option>
+                  <el-option label="png" value="png">
+                    <span style="float: left">png</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px"
+                      >透明背景</span
+                    >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+            <span slot="footer">
+              <el-button @click="saveAsImageDialogVisible = false"
+                >取 消</el-button
+              >
+              <el-button type="primary" @click="saveAsImage">确 定</el-button>
+            </span>
+          </el-dialog>
+        </section>
+      </article>
+      <!-- 右键菜单 -->
+      <section>
+        <div id="contextmenu">
+          <div data-status="node-selected" class="menu">
+            <el-button data-command="copy" class="command">复制</el-button>
+            <el-button data-command="paste" class="command">粘贴</el-button>
+            <el-button data-command="delete" class="command">删除</el-button>
+          </div>
+          <div data-status="edge-selected" class="menu">
+            <el-button data-command="delete" class="command">删除</el-button>
+          </div>
+          <div data-status="group-selected" class="menu">
+            <el-button data-command="copy" class="command">复制</el-button>
+            <el-button data-command="paste" class="command">粘贴</el-button>
+            <el-button data-command="unGroup" class="command">取消组合</el-button>
+            <el-button data-command="delete" class="command">删除</el-button>
+          </div>
+          <div data-status="canvas-selected" class="menu">
+            <el-button data-command="undo" class="command">撤销</el-button>
+            <el-button data-command="redo" class="command disable"
+              >重做</el-button
+            >
+          </div>
+          <div data-status="multi-selected" class="menu">
+            <el-button data-command="copy" class="command">复制</el-button>
+            <el-button data-command="paste" class="command">粘贴</el-button>
+            <el-button data-command="addGroup" class="command">组合</el-button>
+          </div>
         </div>
-        <div data-status="multi-selected" class="menu">
-          <el-button data-command="copy" class="command">复制</el-button>
-          <el-button data-command="paste" class="command">粘贴</el-button>
-          <el-button data-command="addGroup" class="command">组合</el-button>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-<script>
-import G6Editor from "@antv/g6-editor";
-import mixin from "../mianview/mixin";
-import { insertScriptEdgeNode,selectScriptEdgeNode } from "@/api/system/preview";
-import Cookies from 'js-cookie'
-import { construct } from "netflix-conductor-json-tree/dist/index";
-export default {
-  name: "VueG6Editor",
-  mixins: [mixin],
-  data() {
-    return {
-      type: '',
-      state: {
-        edgeTextColor: '#000' // 默认为黑色
-      },
-      form: {
-        scriptInfoId: null,
-        flowScheme: null,
-        nodes: [],
-        edges: [],
-      },
-      // 节点属性表单
+      </section>
+    </div>
+  </template>
+  <script>
+  import G6Editor from "@antv/g6-editor";
+  import mixin from "../mianview/mixin";
+  import { insertScriptEdgeNode,selectScriptEdgeNode } from "@/api/system/preview";
+  import Cookies from 'js-cookie'
+  import { construct } from "netflix-conductor-json-tree/dist/index";
+  export default {
+    name: "VueG6Editor",
+    mixins: [mixin],
+    data() {
+      return {
+        type: '',
+        state: {
+          edgeTextColor: '#000' // 默认为黑色
+        },
+        form: {
+          scriptInfoId: null,
+          flowScheme: null,
+          nodes: [],
+          edges: [],
+        },
+        // 节点属性表单
+        nodeAttributeForm: {
+          // title:"",
+          // contont:"",
+          labeltitle: "",
+          label: "",
+          labelconcent: "",
+          width: "",
+          height: ""
+        },
+        // 节点属性表单
+        edgeAttributeForm: {
+          keyword: '',
+          label: ""
+        },
+        // 画布属性栏表单
+        canvasAttributeForm: {
+          grid: true,
+          cell: 20
+        },
+        // SVG节点图片URL地址
+        startNodeSVGUrl: require("../mianview/start-node.svg"),
+        endNodeSVGUrl: require("../mianview/end-node.svg"),
+        regularNodeSVGUrl: require("../mianview/regular-node.svg"),
+        conditionNodeSVGUrl: require("../mianview/condition-node.svg"),
+        nNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
+        // modelNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
+        // 编辑器
+        editor: null,
+        saveAsImageDialogVisible: false,
+        saveAsImageFormat: "jpg"
+      };
+    },
+    watch: {
       nodeAttributeForm: {
-        // title:"",
-        // contont:"",
-        labeltitle: "",
-        label: "",
-        labelconcent: "",
-        width: "",
-        height: ""
-      },
-      // 节点属性表单
-      edgeAttributeForm: {
-        keyword: '',
-        label: ""
-      },
-      // 画布属性栏表单
-      canvasAttributeForm: {
-        grid: true,
-        cell: 20
-      },
-      // SVG节点图片URL地址
-      startNodeSVGUrl: require("../mianview/start-node.svg"),
-      endNodeSVGUrl: require("../mianview/end-node.svg"),
-      regularNodeSVGUrl: require("../mianview/regular-node.svg"),
-      conditionNodeSVGUrl: require("../mianview/condition-node.svg"),
-      nNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
-      // modelNodeSVGUrl: "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
-      // 编辑器
-      editor: null,
-      saveAsImageDialogVisible: false,
-      saveAsImageFormat: "jpg"
-    };
-  },
-  watch: {
-    nodeAttributeForm: {
-      handler(newVal, oldVal) {
-        if (newVal.labeltitle || newVal.labelconcent) {
-          this.$set(this.nodeAttributeForm, 'labelconcent', newVal.labelconcent)
-          this.$set(this.nodeAttributeForm, 'labeltitle', newVal.labeltitle)
-          // this.nodeAttributeForm.labelconcent=newVal.labelconcent
-          // this.nodeAttributeForm.labeltitle=newVal.labeltitle
-          this.nodeAttributeForm.label = newVal.labeltitle + '\n' + newVal.labelconcent;
-        } else {
-          this.nodeAttributeForm.label = newVal.label
-        }
-        console.log('obj发生了变化', newVal, oldVal)
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    this.initG6Editor();
-    this.getlist()
-
-    this.form.edges.forEach(e => {
-      if (e.keyword) {
-        // e.label=e.label
-        e.label = {
-          text: e.label,
-          fill: 'red'
-        }
-
+        handler(newVal, oldVal) {
+          if (newVal.labeltitle || newVal.labelconcent) {
+            this.$set(this.nodeAttributeForm, 'labelconcent', newVal.labelconcent)
+            this.$set(this.nodeAttributeForm, 'labeltitle', newVal.labeltitle)
+            // this.nodeAttributeForm.labelconcent=newVal.labelconcent
+            // this.nodeAttributeForm.labeltitle=newVal.labeltitle
+            this.nodeAttributeForm.label = newVal.labeltitle + '\n' + newVal.labelconcent;
+          } else {
+            this.nodeAttributeForm.label = newVal.label
+          }
+          console.log('obj发生了变化', newVal, oldVal)
+        },
+        deep: true
       }
-
-    })
-    // this.editor.getCurrentPage().save()
-    // this.editor.getCurrentPage().read(this.form);
-  },
-  created() {
-
-
-  },
-  methods: {
-  getlist(){
-    selectScriptEdgeNode(Cookies.get('id')).then(res=>{
-      this.form=JSON.parse(res.data.flowScheme)
-      this.editor.getCurrentPage().read(this.form);
-      // console.log(this.form,'this.form')
-
-    })
-  },
-
-    // 初始化
-    initG6Editor() {
-      const _this = this;
-      const editor = new G6Editor();
-      this.editor = editor;
-      G6Editor.track(false);
-      const Command = G6Editor.Command;
-      // 注册新命令save
-      Command.registerCommand("save", {
-        // 禁止保存命令进入队列
-        queue: false,
-        // 命令是否可用
-        enable: (editor) => {
-          return true;
-        },
-        // 正向命令
-        execute(editor) {
-          let needSaveData = editor.getCurrentPage().save();
-          let newObj = JSON.parse(JSON.stringify(needSaveData))
-          newObj.scriptInfoId = Cookies.get('id')
-          newObj.flowScheme = JSON.stringify(needSaveData)
-          newObj.edges.forEach(e => {
-            if (e.keyword) {
-              // e.label=e.label
-              e.label = e.label.text
-            }
-            e.code = e.id
-            delete e.id
-          })
-          newObj.nodes.forEach(e => {
-            e.code = e.id
-            delete e.id
-          })
-          console.log(newObj, 'newObj');
-          // this.form.nodes=newObj.nodes
-          // this.form.edges=newObj.edges
-          // newObj.edges.forEach(e => {
-          //   if (e.keyword) {
-          //     // e.label=e.label
-          //     e.label = e.label.text
-          //   }
-          // })
-          insertScriptEdgeNode(newObj).then(res => {
-            if (res.code == 200) {
-              _this.$message.success("数据保存成功");
-              _this.getlist()
-            } else {
-              _this.$modal.msgError(res.msg);
-            }
-
-          })
-          // newObj.nodes.forEach(e => { 
-          //   var text = e.label.replace(/\n/g, ",");
-          //   var concet = text.split(',')
-          //   console.log(concet, 'text')
-          //   e.labeltitle = concet[0]
-          //   e.labelconcent = concet[1]
-
-
-          // })
-
-          let testcs = JSON.stringify(needSaveData)
-          let test = JSON.parse(testcs)
-          console.log(testcs, 'JSON.stringify(needSaveData)');
-          console.log(test, 'test');
-          // localStorage.setItem("flowData", JSON.stringify(needSaveData));
-          _this.save(needSaveData);
-
-        },
-        // 反向命令
-        back(editor) {
-          console.log("反向命令");
-        },
-        // 快捷键：Ctrl + S
-        shortcutCodes: [
-          ["metaKey", "s"],
-          ["ctrlKey", "s"]
-        ]
-      });
-      // 画布
-      const flow = new G6Editor.Flow({
-        graph: {
-          container: "page"
-        },
-        align: {
-          line: {
-            // 对齐线颜色
-            stroke: "#FA8C16",
-            // 对齐线粗细
-            lineWidth: 1
-          },
-          // 开启全方位对齐
-          item: true,
-          // 网格对齐
-          grid: true
-        },
-        grid: {
-          // 网孔尺寸
-          cell: 18
-        },
-        shortcut: {
-          // 开启自定义命令保存的快捷键
-          save: true
+    },
+    mounted() {
+      this.initG6Editor();
+      this.getlist()
+  
+      this.form.edges.forEach(e => {
+        if (e.keyword) {
+          // e.label=e.label
+          e.label = {
+            text: e.label,
+            fill: 'red'
+          }
+  
         }
-      });
-      window.flow = flow;
-
-      // 设置边
-      flow.getGraph().edge({
-        shape: "flow-polyline"
-      });
-
-      // 元素面板栏
-      const itempannel = new G6Editor.Itempannel({
-        container: "itempannel"
-      });
-      // 工具栏
-      const toolbar = new G6Editor.Toolbar({
-        container: "toolbar"
-      });
-      // 属性栏
-      const detailpannel = new G6Editor.Detailpannel({
-        container: "detailpannel"
-      });
-      // 缩略图
-      let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width;
-      minimapWidth = Number(minimapWidth.replace(/px$/, ""));
-      const minimap = new G6Editor.Minimap({
-        container: "minimap",
-        width: minimapWidth,
-        height: 200
-      });
-      // 右键菜单
-      const contextmenu = new G6Editor.Contextmenu({
-        container: "contextmenu"
-      });
-      // 挂载以上组件到Editor
-      editor.add(flow);
-      editor.add(itempannel);
-      editor.add(toolbar);
-      editor.add(detailpannel);
-      editor.add(minimap);
-      editor.add(contextmenu);
-      // 挂载到window，方便调试
-      window.editor = editor;
-
-      // 获取当前画布
-      const currentPage = editor.getCurrentPage();
-      currentPage.on("afterchange", (e) => {
-        if (e.action === "add") {
-          if (e.model.nodetype === "startNode" || e.model.nodetype === "endNode") {
-            let nodes = this.editor.getCurrentPage().getNodes();
-            for (const item of nodes) {
-              if (item.model.nodetype === e.model.nodetype && item.model.id !== e.model.id) {
-                this.editor.getCurrentPage().remove(e.item);
-                this.$message.warning("只能有一个开始节点或结束节点");
+  
+      })
+      // this.editor.getCurrentPage().save()
+      // this.editor.getCurrentPage().read(this.form);
+    },
+    created() {
+  
+  
+    },
+    methods: {
+    getlist(){
+      selectScriptEdgeNode(Cookies.get('id')).then(res=>{
+        this.form=JSON.parse(res.data.flowScheme)
+        this.editor.getCurrentPage().read(this.form);
+        // console.log(this.form,'this.form')
+  
+      })
+    },
+  
+      // 初始化
+      initG6Editor() {
+        const _this = this;
+        const editor = new G6Editor();
+        this.editor = editor;
+        G6Editor.track(false);
+        const Command = G6Editor.Command;
+        // 注册新命令save
+        Command.registerCommand("save", {
+          // 禁止保存命令进入队列
+          queue: false,
+          // 命令是否可用
+          enable: (editor) => {
+            return true;
+          },
+          // 正向命令
+          execute(editor) {
+            let needSaveData = editor.getCurrentPage().save();
+            let newObj = JSON.parse(JSON.stringify(needSaveData))
+            newObj.scriptInfoId = Cookies.get('id')
+            newObj.flowScheme = JSON.stringify(needSaveData)
+            newObj.edges.forEach(e => {
+              if (e.keyword) {
+                // e.label=e.label
+                e.label = e.label.text
+              }
+              e.code = e.id
+              delete e.id
+            })
+            newObj.nodes.forEach(e => {
+              e.code = e.id
+              delete e.id
+            })
+            console.log(newObj, 'newObj');
+            // this.form.nodes=newObj.nodes
+            // this.form.edges=newObj.edges
+            // newObj.edges.forEach(e => {
+            //   if (e.keyword) {
+            //     // e.label=e.label
+            //     e.label = e.label.text
+            //   }
+            // })
+            insertScriptEdgeNode(newObj).then(res => {
+              if (res.code == 200) {
+                _this.$message.success("数据保存成功");
+                _this.getlist()
+              } else {
+                _this.$modal.msgError(res.msg);
+              }
+  
+            })
+            // newObj.nodes.forEach(e => { 
+            //   var text = e.label.replace(/\n/g, ",");
+            //   var concet = text.split(',')
+            //   console.log(concet, 'text')
+            //   e.labeltitle = concet[0]
+            //   e.labelconcent = concet[1]
+  
+  
+            // })
+  
+            let testcs = JSON.stringify(needSaveData)
+            let test = JSON.parse(testcs)
+            console.log(testcs, 'JSON.stringify(needSaveData)');
+            console.log(test, 'test');
+            // localStorage.setItem("flowData", JSON.stringify(needSaveData));
+            _this.save(needSaveData);
+  
+          },
+          // 反向命令
+          back(editor) {
+            console.log("反向命令");
+          },
+          // 快捷键：Ctrl + S
+          shortcutCodes: [
+            ["metaKey", "s"],
+            ["ctrlKey", "s"]
+          ]
+        });
+        // 画布
+        const flow = new G6Editor.Flow({
+          graph: {
+            container: "page"
+          },
+          align: {
+            line: {
+              // 对齐线颜色
+              stroke: "#FA8C16",
+              // 对齐线粗细
+              lineWidth: 1
+            },
+            // 开启全方位对齐
+            item: true,
+            // 网格对齐
+            grid: true
+          },
+          grid: {
+            // 网孔尺寸
+            cell: 18
+          },
+          shortcut: {
+            // 开启自定义命令保存的快捷键
+            save: true
+          }
+        });
+        window.flow = flow;
+  
+        // 设置边
+        flow.getGraph().edge({
+          shape: "flow-polyline"
+        });
+  
+        // 元素面板栏
+        const itempannel = new G6Editor.Itempannel({
+          container: "itempannel"
+        });
+        // 工具栏
+        const toolbar = new G6Editor.Toolbar({
+          container: "toolbar"
+        });
+        // 属性栏
+        const detailpannel = new G6Editor.Detailpannel({
+          container: "detailpannel"
+        });
+        // 缩略图
+        let minimapWidth = getComputedStyle(document.querySelector(".right-part")).width;
+        minimapWidth = Number(minimapWidth.replace(/px$/, ""));
+        const minimap = new G6Editor.Minimap({
+          container: "minimap",
+          width: minimapWidth,
+          height: 200
+        });
+        // 右键菜单
+        const contextmenu = new G6Editor.Contextmenu({
+          container: "contextmenu"
+        });
+        // 挂载以上组件到Editor
+        editor.add(flow);
+        editor.add(itempannel);
+        editor.add(toolbar);
+        editor.add(detailpannel);
+        editor.add(minimap);
+        editor.add(contextmenu);
+        // 挂载到window，方便调试
+        window.editor = editor;
+  
+        // 获取当前画布
+        const currentPage = editor.getCurrentPage();
+        currentPage.on("afterchange", (e) => {
+          if (e.action === "add") {
+            if (e.model.nodetype === "startNode" || e.model.nodetype === "endNode") {
+              let nodes = this.editor.getCurrentPage().getNodes();
+              for (const item of nodes) {
+                if (item.model.nodetype === e.model.nodetype && item.model.id !== e.model.id) {
+                  this.editor.getCurrentPage().remove(e.item);
+                  this.$message.warning("只能有一个开始节点或结束节点");
+                }
               }
             }
           }
-        }
-      });
-      // 监听（选择对象后）事件
-      currentPage.on("afteritemselected", (ev) => {
-        console.log("打印所选对象属性", ev.item);
-        console.log("打印所选对象数据模型", ev.item.model);
-        const selectedItemDataModel = ev.item.model
-        // 如果选择的对象是节点
-        if (ev.item.isNode) {
-          this.type = selectedItemDataModel.shape
-
-          if (selectedItemDataModel.label && selectedItemDataModel.labelconcent=='' && selectedItemDataModel.labeltitle=='') {
-            var text = selectedItemDataModel.label.replace(/\n/g, ",");
-            var concet = text.split(',')
-            console.log(concet, 'text')
-            if (concet.length == 2) {
-              this.nodeAttributeForm.labeltitle = concet[0]
-              this.nodeAttributeForm.labelconcent = concet[1]
-
-            } else if (concet.length == 1) {
-              this.nodeAttributeForm.label = concet[0];
+        });
+        // 监听（选择对象后）事件
+        currentPage.on("afteritemselected", (ev) => {
+          console.log("打印所选对象属性", ev.item);
+          console.log("打印所选对象数据模型", ev.item.model);
+          const selectedItemDataModel = ev.item.model
+          // 如果选择的对象是节点
+          if (ev.item.isNode) {
+            this.type = selectedItemDataModel.shape
+  
+            if (selectedItemDataModel.label && selectedItemDataModel.labelconcent=='' && selectedItemDataModel.labeltitle=='') {
+              var text = selectedItemDataModel.label.replace(/\n/g, ",");
+              var concet = text.split(',')
+              console.log(concet, 'text')
+              if (concet.length == 2) {
+                this.nodeAttributeForm.labeltitle = concet[0]
+                this.nodeAttributeForm.labelconcent = concet[1]
+  
+              } else if (concet.length == 1) {
+                this.nodeAttributeForm.label = concet[0];
+              }
+            } else {
+              this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
+              this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
             }
-          } else {
-            this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
-            this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
+            if(!this.nodeAttributeForm.labelconcent && !this.nodeAttributeForm.labeltitle){
+            this.nodeAttributeForm.label = selectedItemDataModel.label;
+            }
+            // this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
+            // this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
+  
+            this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0];
+            this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1];
+            this.nodeAttributeForm.color = selectedItemDataModel.color;
           }
-          if(!this.nodeAttributeForm.labelconcent && !this.nodeAttributeForm.labeltitle){
-          this.nodeAttributeForm.label = selectedItemDataModel.label;
+          // 如果选择的对象是边
+          if (ev.item.isEdge) {
+            ev.item.graph.edge({
+              shape: "flow-polyline-round"
+            });
+            let newObj = JSON.parse(JSON.stringify(selectedItemDataModel))
+            if (newObj.keyword) {
+              console.log(newObj, '1111111')
+              this.edgeAttributeForm.label = newObj.label.text;
+            } else {
+              this.edgeAttributeForm.label = selectedItemDataModel.label;
+            }
+            this.edgeAttributeForm.shape = selectedItemDataModel.shape;
+            this.edgeAttributeForm.keyword = selectedItemDataModel.keyword;
+            // this.edgeAttributeForm.keyword = '00';
           }
-          // this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
-          // this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
-
-          this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0];
-          this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1];
-          this.nodeAttributeForm.color = selectedItemDataModel.color;
+        });
+        // 监听（删除后）事件
+        currentPage.on("afterdelete", (ev) => { });
+      },
+      // 打开保存为图片弹窗
+      openSaveAsImageDialog() {
+        this.saveAsImageDialogVisible = true;
+      },
+      // 开启/关闭网格对齐
+      toggleGridShowStatus(value) {
+        if (value) {
+          this.editor.getCurrentPage().showGrid();
+        } else {
+          this.editor.getCurrentPage().hideGrid();
         }
-        // 如果选择的对象是边
-        if (ev.item.isEdge) {
-          ev.item.graph.edge({
-            shape: "flow-polyline-round"
-          });
-          let newObj = JSON.parse(JSON.stringify(selectedItemDataModel))
-          if (newObj.keyword) {
-            console.log(newObj, '1111111')
-            this.edgeAttributeForm.label = newObj.label.text;
-          } else {
-            this.edgeAttributeForm.label = selectedItemDataModel.label;
-          }
-          this.edgeAttributeForm.shape = selectedItemDataModel.shape;
-          this.edgeAttributeForm.keyword = selectedItemDataModel.keyword;
-          // this.edgeAttributeForm.keyword = '00';
+      },
+      // 保存为图片
+      saveAsImage() {
+        let newCanvas;
+        if (this.saveAsImageFormat === "jpg") {
+          let canvas = this.editor.getCurrentPage().saveImage();
+          newCanvas = document.createElement("canvas");
+          newCanvas.width = canvas.width;
+          newCanvas.height = canvas.height;
+          let newContext = newCanvas.getContext("2d");
+          newContext.fillStyle = "#fff";
+          newContext.fillRect(0, 0, newCanvas.width, newCanvas.height);
+          newContext.drawImage(canvas, 0, 0);
         }
-      });
-      // 监听（删除后）事件
-      currentPage.on("afterdelete", (ev) => { });
-    },
-    // 打开保存为图片弹窗
-    openSaveAsImageDialog() {
-      this.saveAsImageDialogVisible = true;
-    },
-    // 开启/关闭网格对齐
-    toggleGridShowStatus(value) {
-      if (value) {
-        this.editor.getCurrentPage().showGrid();
-      } else {
-        this.editor.getCurrentPage().hideGrid();
+        if (this.saveAsImageFormat === "png") {
+          newCanvas = this.editor.getCurrentPage().saveImage();
+        }
+        let imageDataURL = newCanvas.toDataURL();
+        let downloadLink = document.createElement("a");
+        downloadLink.download = "图片.jpg";
+        downloadLink.href = imageDataURL;
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink);
+        this.saveAsImageDialogVisible = false;
+      },
+      // 保存
+      // submitForm() {
+      //   const _this = this;
+      //   let needSaveData = editor.getCurrentPage().save();
+      //   console.log(needSaveData, 'needSaveData');
+      //   localStorage.setItem("flowData", JSON.stringify(needSaveData));
+      //   _this.save(needSaveData);
+      //   _this.$message.success("数据已保存");
+  
+      // },
+      // 保存为文件
+      saveAsFile() {
+        let sub = this.editor.getCurrentPage().save()
+        console.log(sub, 'sub')
+        let jsonString = JSON.stringify(this.editor.getCurrentPage().save());
+        let blob = new Blob([jsonString]);
+        let blobURL = URL.createObjectURL(blob);
+        let downloadLink = document.createElement("a");
+        downloadLink.download = "数据.json";
+        downloadLink.href = blobURL;
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        URL.revokeObjectURL(blobURL);
+        document.body.removeChild(downloadLink);
+      },
+      // 读取历史数据
+      readHistoryData() {
+        let stringData = localStorage.getItem("flowData");
+        if (stringData === "" || stringData === "{}" || stringData === null) {
+          this.$message.warning("无历史数据");
+          return;
+        }
+        let jsonData = JSON.parse(stringData);
+        this.editor.getCurrentPage().read(jsonData);
+      },
+      // 读取上传数据
+      readUploadData() {
+        let uploadButton = document.createElement("input");
+        uploadButton.setAttribute("type", "file");
+        uploadButton.setAttribute("accept", ".json");
+        uploadButton.addEventListener("change", (e) => {
+          console.dir(uploadButton);
+          let file = uploadButton.files[0];
+          let fileReader = new FileReader();
+          fileReader.onload = (event) => {
+            console.log(event);
+            let text = JSON.parse(event.target.result);
+            console.log(text);
+            this.editor.getCurrentPage().read(text);
+          };
+          fileReader.readAsText(file);
+        });
+        uploadButton.click();
+      },
+      //
+      save(source) {
+        let edges = source.edges;
+        let nodes = source.nodes;
+        console.log(construct);
+        let res = construct(source);
+        console.log(JSON.stringify(res, null, 2));
       }
-    },
-    // 保存为图片
-    saveAsImage() {
-      let newCanvas;
-      if (this.saveAsImageFormat === "jpg") {
-        let canvas = this.editor.getCurrentPage().saveImage();
-        newCanvas = document.createElement("canvas");
-        newCanvas.width = canvas.width;
-        newCanvas.height = canvas.height;
-        let newContext = newCanvas.getContext("2d");
-        newContext.fillStyle = "#fff";
-        newContext.fillRect(0, 0, newCanvas.width, newCanvas.height);
-        newContext.drawImage(canvas, 0, 0);
-      }
-      if (this.saveAsImageFormat === "png") {
-        newCanvas = this.editor.getCurrentPage().saveImage();
-      }
-      let imageDataURL = newCanvas.toDataURL();
-      let downloadLink = document.createElement("a");
-      downloadLink.download = "图片.jpg";
-      downloadLink.href = imageDataURL;
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      document.body.removeChild(downloadLink);
-      this.saveAsImageDialogVisible = false;
-    },
-    // 保存
-    // submitForm() {
-    //   const _this = this;
-    //   let needSaveData = editor.getCurrentPage().save();
-    //   console.log(needSaveData, 'needSaveData');
-    //   localStorage.setItem("flowData", JSON.stringify(needSaveData));
-    //   _this.save(needSaveData);
-    //   _this.$message.success("数据已保存");
-
-    // },
-    // 保存为文件
-    saveAsFile() {
-      let sub = this.editor.getCurrentPage().save()
-      console.log(sub, 'sub')
-      let jsonString = JSON.stringify(this.editor.getCurrentPage().save());
-      let blob = new Blob([jsonString]);
-      let blobURL = URL.createObjectURL(blob);
-      let downloadLink = document.createElement("a");
-      downloadLink.download = "数据.json";
-      downloadLink.href = blobURL;
-      document.body.appendChild(downloadLink);
-      downloadLink.click();
-      URL.revokeObjectURL(blobURL);
-      document.body.removeChild(downloadLink);
-    },
-    // 读取历史数据
-    readHistoryData() {
-      let stringData = localStorage.getItem("flowData");
-      if (stringData === "" || stringData === "{}" || stringData === null) {
-        this.$message.warning("无历史数据");
-        return;
-      }
-      let jsonData = JSON.parse(stringData);
-      this.editor.getCurrentPage().read(jsonData);
-    },
-    // 读取上传数据
-    readUploadData() {
-      let uploadButton = document.createElement("input");
-      uploadButton.setAttribute("type", "file");
-      uploadButton.setAttribute("accept", ".json");
-      uploadButton.addEventListener("change", (e) => {
-        console.dir(uploadButton);
-        let file = uploadButton.files[0];
-        let fileReader = new FileReader();
-        fileReader.onload = (event) => {
-          console.log(event);
-          let text = JSON.parse(event.target.result);
-          console.log(text);
-          this.editor.getCurrentPage().read(text);
-        };
-        fileReader.readAsText(file);
-      });
-      uploadButton.click();
-    },
-    //
-    save(source) {
-      let edges = source.edges;
-      let nodes = source.nodes;
-      console.log(construct);
-      let res = construct(source);
-      console.log(JSON.stringify(res, null, 2));
     }
-  }
-};
-</script>
-
-<style lang="less">
-@import url("../mianview/index.less");
-</style>
+  };
+  </script>
+  
+  <style lang="less">
+  @import url("../mianview/index.less");
+  </style>
+  
\ No newline at end of file