From a1d79e1a35490a5ea4d1a383bb66057d466ef3b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=97=AB=E6=99=93=E8=8C=B9?= <1935832701@qq.com>
Date: Mon, 17 Jun 2024 09:44:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/Scriptpreview/index.vue | 1773 +++++++++++-----------
 1 file changed, 886 insertions(+), 887 deletions(-)

diff --git a/src/views/system/Scriptpreview/index.vue b/src/views/system/Scriptpreview/index.vue
index ec74d0e..a669abe 100644
--- a/src/views/system/Scriptpreview/index.vue
+++ b/src/views/system/Scriptpreview/index.vue
@@ -1,900 +1,899 @@
 <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> -->
-        </el-col>
-        <!-- 画布 -->
-        <el-col :span="20">
-          <el-col :span="24">
-            <div id="page"></div>
-          </el-col>
-        </el-col>
-        <!-- 属性栏 -->
-        <el-col :span="4">
-          <section class="right-part">
-            <!-- 缩略图 -->
-            <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"
+  <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
           >
-            <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>
-      </section>
-    </div>
-  </template>
-  <script>
-  import G6Editor from "@antv/g6-editor";
-  import mixin from "../mianview/mixin";
-  import { selectScriptEdgeNode } from "@/api/system/preview";
-  import { construct } from "netflix-conductor-json-tree/dist/index";
-  import Cookies from 'js-cookie'
-  export default {
-    name: "VueG6Editor",
-    mixins: [mixin],
-    data() {
-      return {
-        form: {
-        scriptInfoId: null,
-        flowScheme: null,
-        nodes: [],
-        edges: [],
-      },
-        // form: {
-        //   nodes: [{
-        //     color
-        //       :
-        //       "#FA8C16",
-        //     id
-        //       :
-        //       "655c5165",
-        //     index
-        //       :
-        //       0,
-        //     label
-        //       :
-        //       "自我介绍确认",
-        //     nodetype
-        //       :
-        //       "startNode",
-        //     shape
-        //       :
-        //       "flow-circle",
-        //     size
-        //       :
-        //       "72*72",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       441.5124969482422,
-        //     y
-        //       :
-        //       60.79999542236328,
-        //   }, {
-        //     color
-        //       :
-        //       "#1890ff",
-        //     id
-        //       :
-        //       "8660695d",
-        //     index
-        //       :
-        //       1,
-        //     label
-        //       :
-        //       "家属是否能代打",
-        //     size
-        //       :
-        //       "100*50",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       242.5124969482422,
-        //     y
-        //       :
-        //       183.5999984741211,
-        //   },
-        //   {
-        //     color
-        //       :
-        //       "#1890ff",
-        //     id
-        //       :
-        //       "59c9ceed",
-        //     index
-        //       :
-        //       2,
-        //     label
-        //       :
-        //       "常规节点",
-        //     size
-        //       :
-        //       "100*50",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       606.5124969482422,
-        //     y
-        //       :
-        //       187.5999984741211,
-        //   }, {
-        //     color
-        //       :
-        //       "#722ED1",
-        //     id
-        //       :
-        //       "16f4c8ba",
-        //     index
-        //       :
-        //       5,
-        //     label
-        //       :
-        //       "你好，我这边是#机构#的工作人员",
-        //     shape
-        //       :
-        //       "flow-capsule",
-        //     size
-        //       :
-        //       "200*48",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       433.5124969482422,
-        //     y
-        //       :
-        //       125.5999984741211,
-        //   }, {
-        //     color
-        //       :
-        //       "#722ED1",
-        //     id
-        //       :
-        //       "e4839dcc",
-        //     index
-        //       :
-        //       6,
-        //     label
-        //       :
-        //       "好的是这样的",
-        //     shape
-        //       :
-        //       "flow-capsule",
-        //     size
-        //       :
-        //       "80*48",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       233.5124969482422,
-        //     y
-        //       :
-        //       251.5999984741211,
-        //   }, {
-        //     color
-        //       :
-        //       "#1890ff",
-        //     id
-        //       :
-        //       "392ca0b8",
-        //     index
-        //       :
-        //       7,
-        //     label
-        //       :
-        //       "家属不能代打",
-        //     size
-        //       :
-        //       "100*50",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       55.51249694824219,
-        //     y
-        //       :
-        //       299.5999984741211
-        //   }, {
-        //     color
-        //       :
-        //       "#1890ff",
-        //     id
-        //       :
-        //       "6bcab22d",
-        //     index
-        //       :
-        //       8,
-        //     label
-        //       :
-        //       "家属能代打",
-        //     size
-        //       :
-        //       "100*50",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       384.5124969482422,
-        //     y
-        //       :
-        //       307.5999984741211
-        //   },
-        //   {
-        //     color
-        //       :
-        //       "#722ED1",
-        //     id
-        //       :
-        //       "dc5de91f",
-        //     index
-        //       :
-        //       11,
-        //     label
-        //       :
-        //       "好的 麻烦转告一下",
-        //     shape
-        //       :
-        //       "flow-capsule",
-        //     size
-        //       :
-        //       "200*48",
-        //     type
-        //       :
-        //       "node",
-        //     x
-        //       :
-        //       55.51249694824219,
-        //     y
-        //       :
-        //       366.5
-  
-        //   }],
-        //   edges: [{
-        //     id: "b04d23c7",
-        //     index
-        //       :
-        //       3,
-        //     label
-        //       :
-        //       "是本人",
-        //     shape
-        //       :
-        //       "flow-polyline-round",
-        //     source
-        //       :
-        //       "655c5165",
-        //     sourceAnchor
-        //       :
-        //       1,
-        //     target
-        //       :
-        //       "59c9ceed",
-        //     targetAnchor
-        //       :
-        //       0,
-        //   }, {
-        //     id
-        //       :
-        //       "7894068d",
-        //     index
-        //       :
-        //       4,
-        //     label
-        //       :
-        //       "是家属",
-        //     shape
-        //       :
-        //       "flow-polyline-round",
-        //     source
-        //       :
-        //       "655c5165",
-        //     sourceAnchor
-        //       :
-        //       3,
-        //     target
-        //       :
-        //       "8660695d",
-        //     targetAnchor
-        //       :
-        //       0,
-        //   }, {
-        //     id
-        //       :
-        //       "6aa429cc",
-        //     index
-        //       :
-        //       9,
-        //     label
-        //       :
-        //       "能带大",
-        //     shape
-        //       :
-        //       "flow-polyline-round",
-        //     source
-        //       :
-        //       "8660695d",
-        //     sourceAnchor
-        //       :
-        //       3,
-        //     target
-        //       :
-        //       "392ca0b8",
-        //     targetAnchor
-        //       :
-        //       0,
-        //   },
-        //   {
-        //     id
-        //       :
-        //       "02bfc4d0",
-        //     index
-        //       :
-        //       10,
-        //     label
-        //       :
-        //       "不能代打",
-        //     shape
-        //       :
-        //       "flow-polyline-round",
-        //     source
-        //       :
-        //       "8660695d",
-        //     sourceAnchor
-        //       :
-        //       1,
-        //     target
-        //       :
-        //       "6bcab22d",
-        //     targetAnchor
-        //       :
-        //       0
-        //   }
-        //   ]
-  
-        // },
-        // 节点属性表单
-        nodeAttributeForm: {
-          label: "",
-          width: "",
-          height: ""
-        },
-        // 节点属性表单
-        edgeAttributeForm: {
-          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"
-      };
-    },
-    mounted() {
-      this.initG6Editor();
-      this.getlist();
-      // this.editor.getCurrentPage().save()
-      this.editor.getCurrentPage().hideGrid();
-      this.editor.getCurrentPage().read(this.form);
-    },
-    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')
+          <!-- <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> -->
+      </el-col>
+      <!-- 画布 -->
+      <el-col :span="20">
+        <el-col :span="24">
+          <div id="page"></div>
+        </el-col>
+      </el-col>
+      <!-- 属性栏 -->
+      <el-col :span="4">
+        <section class="right-part">
+          <!-- 缩略图 -->
+          <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>
+    </section>
+  </div>
+</template>
+<script>
+import G6Editor from "@antv/g6-editor";
+import mixin from "../mianview/mixin";
+import { selectScriptEdgeNode } from "@/api/system/preview";
+import { construct } from "netflix-conductor-json-tree/dist/index";
+import Cookies from 'js-cookie'
+export default {
+  name: "VueG6Editor",
+  mixins: [mixin],
+  data() {
+    return {
+      form: {
+      scriptInfoId: null,
+      flowScheme: null,
+      nodes: [],
+      edges: [],
+    },
+      // form: {
+      //   nodes: [{
+      //     color
+      //       :
+      //       "#FA8C16",
+      //     id
+      //       :
+      //       "655c5165",
+      //     index
+      //       :
+      //       0,
+      //     label
+      //       :
+      //       "自我介绍确认",
+      //     nodetype
+      //       :
+      //       "startNode",
+      //     shape
+      //       :
+      //       "flow-circle",
+      //     size
+      //       :
+      //       "72*72",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       441.5124969482422,
+      //     y
+      //       :
+      //       60.79999542236328,
+      //   }, {
+      //     color
+      //       :
+      //       "#1890ff",
+      //     id
+      //       :
+      //       "8660695d",
+      //     index
+      //       :
+      //       1,
+      //     label
+      //       :
+      //       "家属是否能代打",
+      //     size
+      //       :
+      //       "100*50",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       242.5124969482422,
+      //     y
+      //       :
+      //       183.5999984741211,
+      //   },
+      //   {
+      //     color
+      //       :
+      //       "#1890ff",
+      //     id
+      //       :
+      //       "59c9ceed",
+      //     index
+      //       :
+      //       2,
+      //     label
+      //       :
+      //       "常规节点",
+      //     size
+      //       :
+      //       "100*50",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       606.5124969482422,
+      //     y
+      //       :
+      //       187.5999984741211,
+      //   }, {
+      //     color
+      //       :
+      //       "#722ED1",
+      //     id
+      //       :
+      //       "16f4c8ba",
+      //     index
+      //       :
+      //       5,
+      //     label
+      //       :
+      //       "你好，我这边是#机构#的工作人员",
+      //     shape
+      //       :
+      //       "flow-capsule",
+      //     size
+      //       :
+      //       "200*48",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       433.5124969482422,
+      //     y
+      //       :
+      //       125.5999984741211,
+      //   }, {
+      //     color
+      //       :
+      //       "#722ED1",
+      //     id
+      //       :
+      //       "e4839dcc",
+      //     index
+      //       :
+      //       6,
+      //     label
+      //       :
+      //       "好的是这样的",
+      //     shape
+      //       :
+      //       "flow-capsule",
+      //     size
+      //       :
+      //       "80*48",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       233.5124969482422,
+      //     y
+      //       :
+      //       251.5999984741211,
+      //   }, {
+      //     color
+      //       :
+      //       "#1890ff",
+      //     id
+      //       :
+      //       "392ca0b8",
+      //     index
+      //       :
+      //       7,
+      //     label
+      //       :
+      //       "家属不能代打",
+      //     size
+      //       :
+      //       "100*50",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       55.51249694824219,
+      //     y
+      //       :
+      //       299.5999984741211
+      //   }, {
+      //     color
+      //       :
+      //       "#1890ff",
+      //     id
+      //       :
+      //       "6bcab22d",
+      //     index
+      //       :
+      //       8,
+      //     label
+      //       :
+      //       "家属能代打",
+      //     size
+      //       :
+      //       "100*50",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       384.5124969482422,
+      //     y
+      //       :
+      //       307.5999984741211
+      //   },
+      //   {
+      //     color
+      //       :
+      //       "#722ED1",
+      //     id
+      //       :
+      //       "dc5de91f",
+      //     index
+      //       :
+      //       11,
+      //     label
+      //       :
+      //       "好的 麻烦转告一下",
+      //     shape
+      //       :
+      //       "flow-capsule",
+      //     size
+      //       :
+      //       "200*48",
+      //     type
+      //       :
+      //       "node",
+      //     x
+      //       :
+      //       55.51249694824219,
+      //     y
+      //       :
+      //       366.5
+
+      //   }],
+      //   edges: [{
+      //     id: "b04d23c7",
+      //     index
+      //       :
+      //       3,
+      //     label
+      //       :
+      //       "是本人",
+      //     shape
+      //       :
+      //       "flow-polyline-round",
+      //     source
+      //       :
+      //       "655c5165",
+      //     sourceAnchor
+      //       :
+      //       1,
+      //     target
+      //       :
+      //       "59c9ceed",
+      //     targetAnchor
+      //       :
+      //       0,
+      //   }, {
+      //     id
+      //       :
+      //       "7894068d",
+      //     index
+      //       :
+      //       4,
+      //     label
+      //       :
+      //       "是家属",
+      //     shape
+      //       :
+      //       "flow-polyline-round",
+      //     source
+      //       :
+      //       "655c5165",
+      //     sourceAnchor
+      //       :
+      //       3,
+      //     target
+      //       :
+      //       "8660695d",
+      //     targetAnchor
+      //       :
+      //       0,
+      //   }, {
+      //     id
+      //       :
+      //       "6aa429cc",
+      //     index
+      //       :
+      //       9,
+      //     label
+      //       :
+      //       "能带大",
+      //     shape
+      //       :
+      //       "flow-polyline-round",
+      //     source
+      //       :
+      //       "8660695d",
+      //     sourceAnchor
+      //       :
+      //       3,
+      //     target
+      //       :
+      //       "392ca0b8",
+      //     targetAnchor
+      //       :
+      //       0,
+      //   },
+      //   {
+      //     id
+      //       :
+      //       "02bfc4d0",
+      //     index
+      //       :
+      //       10,
+      //     label
+      //       :
+      //       "不能代打",
+      //     shape
+      //       :
+      //       "flow-polyline-round",
+      //     source
+      //       :
+      //       "8660695d",
+      //     sourceAnchor
+      //       :
+      //       1,
+      //     target
+      //       :
+      //       "6bcab22d",
+      //     targetAnchor
+      //       :
+      //       0
+      //   }
+      //   ]
+
+      // },
+      // 节点属性表单
+      nodeAttributeForm: {
+        label: "",
+        width: "",
+        height: ""
+      },
+      // 节点属性表单
+      edgeAttributeForm: {
+        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"
+    };
   },
-      // 初始化
-      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;
+  mounted() {
+    this.initG6Editor();
+    this.getlist();
+    // this.editor.getCurrentPage().save()
+    this.editor.getCurrentPage().hideGrid();
+    this.editor.getCurrentPage().read(this.form);
+  },
+  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();
+          console.log(needSaveData, 'needSaveData');
+          // JSON.parse(JSON.stringify(needSaveData))
+          const text =JSON.stringify(needSaveData)
+          console.log(JSON.parse(JSON.stringify(text)), 'text');
+          localStorage.setItem("flowData", JSON.stringify(needSaveData));
+          _this.save(needSaveData);
+        },
+        // 反向命令
+        back(editor) {
+          console.log("反向命令");
+          console.log(editor);
+        },
+        // 快捷键：Ctrl + S
+        shortcutCodes: [
+          ["metaKey", "s"],
+          ["ctrlKey", "s"]
+        ]
+      });
+      // 画布
+      const flow = new G6Editor.Flow({
+        graph: {
+          container: "page"
+        },
+        align: {
+          line: {
+            // 对齐线颜色
+            stroke: "#FA8C16",
+            // 对齐线粗细
+            lineWidth: 1
           },
-          // 正向命令
-          execute(editor) {
-            let needSaveData = editor.getCurrentPage().save();
-            console.log(needSaveData, 'needSaveData');
-            // JSON.parse(JSON.stringify(needSaveData))
-            const text =JSON.stringify(needSaveData)
-            console.log(JSON.parse(JSON.stringify(text)), 'text');
-            localStorage.setItem("flowData", JSON.stringify(needSaveData));
-            _this.save(needSaveData);
-          },
-          // 反向命令
-          back(editor) {
-            console.log("反向命令");
-            console.log(editor);
-          },
-          // 快捷键：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("只能有一个开始节点或结束节点");
-                }
+          // 开启全方位对齐
+          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.nodeAttributeForm.label = selectedItemDataModel.label;
-            this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0];
-            this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1];
-            this.nodeAttributeForm.color = selectedItemDataModel.color;
-          }
-          // 如果选择的对象是边
-          if (ev.item.isEdge) {
-            ev.item.graph.edge({
-              shape: "flow-polyline-round"
-            });
-            this.edgeAttributeForm.label = selectedItemDataModel.label;
-            this.edgeAttributeForm.shape = selectedItemDataModel.shape;
-          }
-        });
-        // 监听（删除后）事件
-        currentPage.on("afterdelete", (ev) => { });
-      },
-      // 打开保存为图片弹窗
-      openSaveAsImageDialog() {
-        this.saveAsImageDialogVisible = true;
-      },
-      // 开启/关闭网格对齐
-      toggleGridShowStatus(value) {
-        if (value) {
-          this.editor.getCurrentPage().showGrid();
-        } else {
-          this.editor.getCurrentPage().hideGrid();
         }
-      },
-      // 保存为图片
-      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("afteritemselected", (ev) => {
+        console.log("打印所选对象属性", ev.item);
+        console.log("打印所选对象数据模型", ev.item.model);
+        const selectedItemDataModel = ev.item.model;
+        // 如果选择的对象是节点
+        if (ev.item.isNode) {
+          this.nodeAttributeForm.label = selectedItemDataModel.label;
+          this.nodeAttributeForm.width = selectedItemDataModel.size.split("*")[0];
+          this.nodeAttributeForm.height = selectedItemDataModel.size.split("*")[1];
+          this.nodeAttributeForm.color = selectedItemDataModel.color;
         }
-        if (this.saveAsImageFormat === "png") {
-          newCanvas = this.editor.getCurrentPage().saveImage();
+        // 如果选择的对象是边
+        if (ev.item.isEdge) {
+          ev.item.graph.edge({
+            shape: "flow-polyline-round"
+          });
+          this.edgeAttributeForm.label = selectedItemDataModel.label;
+          this.edgeAttributeForm.shape = selectedItemDataModel.shape;
         }
-        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));
+      });
+      // 监听（删除后）事件
+      currentPage.on("afterdelete", (ev) => { });
+    },
+    // 打开保存为图片弹窗
+    openSaveAsImageDialog() {
+      this.saveAsImageDialogVisible = true;
+    },
+    // 开启/关闭网格对齐
+    toggleGridShowStatus(value) {
+      if (value) {
+        this.editor.getCurrentPage().showGrid();
+      } else {
+        this.editor.getCurrentPage().hideGrid();
       }
+    },
+    // 保存为图片
+    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>
-  
\ No newline at end of file
+  }
+};
+</script>
+
+<style lang="less">
+@import url("../mianview/index.less");
+</style>