From baf0d2948dba975fad5d127ecf4df347e8f9a5e3 Mon Sep 17 00:00:00 2001
From: "20932067@zju.edu.cn" <Clay>
Date: Fri, 14 May 2021 22:53:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9top=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hchyun-ui/.env.development                    |   4 +-
 hchyun-ui/package.json                        |   1 +
 .../src/views/system/top/demo-topology.vue    | 648 +++---------
 .../system/top/packages/elements/checkbox.vue |   4 +-
 .../system/top/packages/elements/dropdown.vue | 386 +++----
 .../system/top/packages/elements/index.js     |   4 +-
 .../system/top/packages/elements/loading.vue  |   4 +-
 .../system/top/packages/{top.js => index.js}  |   4 +-
 .../system/top/packages/topology/index.js     |   4 +-
 .../topology/src/behavior/click-add-edge.js   |   4 +-
 .../topology/src/behavior/click-event-edit.js | 188 ++--
 .../topology/src/behavior/drag-add-edge.js    |   4 +-
 .../topology/src/behavior/drag-event-edit.js  |   2 +-
 .../topology/src/behavior/hover-event-edit.js |  42 +-
 .../packages/topology/src/behavior/index.js   |   2 +-
 .../topology/src/behavior/keyup-event-edit.js |   2 +-
 .../top/packages/topology/src/config/edge.js  |   2 +-
 .../top/packages/topology/src/config/index.js |   2 +-
 .../top/packages/topology/src/edge/base.js    |   2 +-
 .../top/packages/topology/src/edge/index.js   |  10 +-
 .../{cc-brokenline.js => top-brokenline.js}   |   4 +-
 .../src/edge/{cc-cubic.js => top-cubic.js}    |   4 +-
 .../src/edge/{cc-line.js => top-line.js}      |   4 +-
 .../edge/{cc-polyline.js => top-polyline.js}  |   4 +-
 .../packages/topology/src/edge/top-table.js   | 128 +++
 .../top/packages/topology/src/graph/index.js  |   4 +-
 .../top/packages/topology/src/node/base.js    |   2 +-
 .../packages/topology/src/node/er-table.js    |  21 -
 .../top/packages/topology/src/node/index.js   |  12 +-
 .../packages/topology/src/node/top-ertable.js | 243 +++++
 .../packages/topology/src/node/top-image.js   |   2 +-
 .../packages/topology/src/node/top-rect.js    |   2 +-
 .../packages/topology/src/node/top-test.js    |   3 +
 .../topology/src/plugins/d3-installer.js      |   2 +-
 .../packages/topology/src/theme/dark-style.js |   2 +-
 .../topology/src/theme/default-style.js       |  13 +-
 .../top/packages/topology/src/theme/index.js  |   2 +-
 .../topology/src/theme/office-style.js        |   2 +-
 .../packages/topology/src/toolbar-edit.vue    |  23 +-
 .../packages/topology/src/toolbar-preview.vue |   6 +-
 .../top/packages/topology/src/topology.vue    | 964 ++++++++++--------
 .../topology/src/utils/anchor/draw.js         |   3 +-
 .../topology/src/utils/anchor/er-draw.js      |  48 +
 .../topology/src/utils/anchor/index.js        |   6 +-
 .../topology/src/utils/anchor/set-state.js    |   3 +-
 .../topology/src/utils/anchor/update.js       |   2 +-
 .../topology/src/utils/collapse/index.js      |  11 +
 .../topology/src/utils/collapse/move.js       |  57 ++
 .../topology/src/utils/collapse/set-state.js  |  33 +
 .../packages/topology/src/utils/edge/index.js |   2 +-
 .../topology/src/utils/edge/set-state.js      |   2 +-
 .../top/packages/topology/src/utils/index.js  |   4 +-
 .../packages/topology/src/utils/node/index.js |   2 +-
 .../topology/src/utils/node/set-state.js      |   7 +-
 .../src/views/system/top/{ => utils}/index.js |   2 +-
 55 files changed, 1654 insertions(+), 1294 deletions(-)
 rename hchyun-ui/src/views/system/top/packages/{top.js => index.js} (92%)
 rename hchyun-ui/src/views/system/top/packages/topology/src/edge/{cc-brokenline.js => top-brokenline.js} (96%)
 rename hchyun-ui/src/views/system/top/packages/topology/src/edge/{cc-cubic.js => top-cubic.js} (77%)
 rename hchyun-ui/src/views/system/top/packages/topology/src/edge/{cc-line.js => top-line.js} (78%)
 rename hchyun-ui/src/views/system/top/packages/topology/src/edge/{cc-polyline.js => top-polyline.js} (98%)
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js
 delete mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw.js
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js
 create mode 100644 hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js
 rename hchyun-ui/src/views/system/top/{ => utils}/index.js (97%)

diff --git a/hchyun-ui/.env.development b/hchyun-ui/.env.development
index e3bbe48..8dc5e46 100644
--- a/hchyun-ui/.env.development
+++ b/hchyun-ui/.env.development
@@ -3,9 +3,9 @@ ENV = 'development'
 
 # 宏驰云管理系统/开发环境
 #VUE_APP_BASE_API = '/dev-api'
-#VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
+VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
 #VUE_APP_BASE_API = 'http://apibase.hchyun.com/dev-api'
-VUE_APP_BASE_API = 'http://apig.odliken.top/dev-api'
+#VUE_APP_BASE_API = 'http://apig.odliken.top/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/hchyun-ui/package.json b/hchyun-ui/package.json
index 09861f1..d2e6639 100644
--- a/hchyun-ui/package.json
+++ b/hchyun-ui/package.json
@@ -48,6 +48,7 @@
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "highlight.js": "9.18.5",
+    "jquery": "^3.6.0",
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
diff --git a/hchyun-ui/src/views/system/top/demo-topology.vue b/hchyun-ui/src/views/system/top/demo-topology.vue
index 5dc1759..3c0c0e9 100644
--- a/hchyun-ui/src/views/system/top/demo-topology.vue
+++ b/hchyun-ui/src/views/system/top/demo-topology.vue
@@ -15,555 +15,209 @@
 
 <script>
 /* 局部注册 */
-import { Topology } from '@/views/system/top/packages/top.js'
-import { deepClone, getRandomArrayElements } from '@/views/system/top/index'
+import { Topology } from "./packages/index";
+import { deepClone } from "./utils/index";
 
 export default {
-  name: 'DemoTopology',
+  name: "DemoTopology",
   components: {
-    'topology': Topology
+    "topology": Topology
   },
   data() {
     return {
       graphData: {
         nodes: [
-          // {
-          //   id: "job",
-          //   label: "Job",
-          //   type:'base',
-          //   attrs: [{
-          //     key: "id",
-          //     type: "number(3)"
-          //   },
-          //     {
-          //       key: "title",
-          //       type: "varchar(255)"
-          //     },
-          //     {
-          //       key: "level",
-          //       type: "number(3)"
-          //     }
-          //   ]
-          // },
           {
-            id: 'client-01',
-            x: -95,
-            y: -50,
-            label: '客户端-01',
-            labelCfg: {
-              position: 'bottom'
+            "id": "info",
+            "label": "Employee",
+            type:'top-ertable',
+            "attrs": [{
+              "key": "id",
+              "type": "number(6)"
             },
-            type: 'top-image',
-            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII=',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
+              {
+                "key": "key",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "gender",
+                "type": "enum(M, F)"
+              },
+              {
+                "key": "birthday",
+                "type": "date"
+              },
+              {
+                "key": "hometown",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "country",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "nation",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "jobId",
+                "type": "number(3)",
+                "relation": [{
+                  "key": "id",
+                  "nodeId": "job"
+                }]
+              },
+              {
+                "key": "phone",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "deptId",
+                "type": "number(6)",
+                "relation": [{
+                  "key": "id",
+                  "nodeId": "dept"
+                }]
+              },
+              {
+                "key": "startTime",
+                "type": "date"
+              },
+              {
+                "key": "leaveTime",
+                "type": "date"
+              }
+            ]
           },
           {
-            id: 'client-02',
-            x: 125,
-            y: -50,
-            label: '客户端-02',
-            labelCfg: {
-              position: 'bottom'
+            "id": "job",
+            "label": "Job",
+            type:'top-ertable',
+            "attrs": [{
+              "key": "id",
+              "type": "number(3)"
             },
-            type: 'top-image',
-            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII=',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
+              {
+                "key": "title",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "level",
+                "type": "number(3)"
+              }
+            ]
           },
           {
-            id: 'client-03',
-            x: 348,
-            y: -50,
-            label: '客户端-03',
-            labelCfg: {
-              position: 'bottom'
+            "id": "dept",
+            type:'top-ertable',
+            "label": "Department",
+            "attrs": [{
+              "key": "id",
+              "type": "number(6)"
             },
-            type: 'top-image',
-            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII=',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
-          },
-          {
-            id: 'firewall-01',
-            x: 14,
-            y: 88,
-            label: '防火墙',
-            labelCfg: {
-              position: 'bottom'
-            },
-            type: 'top-image',
-            img: 'data:image/png;base64,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',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
-          },
-          {
-            id: 'firewall-02',
-            x: 348,
-            y: 88,
-            label: '防火墙',
-            labelCfg: {
-              position: 'bottom'
-            },
-            type: 'top-image',
-            img: 'data:image/png;base64,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',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
-          },
-          {
-            id: 'server-01',
-            x: -95,
-            y: 205,
-            label: '服务器',
-            labelCfg: {
-              position: 'bottom'
-            },
-            type: 'top-image',
-            img: 'data:image/png;base64,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',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
-          },
-          {
-            id: 'server-02',
-            x: 348,
-            y: 205,
-            label: '服务器',
-            labelCfg: {
-              position: 'bottom'
-            },
-            type: 'top-image',
-            img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH4wEJAiUhu3KxYQAAA4pJREFUeNrtnM9rE0EUgL+Z3U21KLRpUdEqCGLBm0XpQTz01D9A8NCDf5x48OJZrEIRwYPiTUWw4kWhrbaptY0k2Z3xEBtTbZ3O7uwmxfedSsi8zHyZH29eyYIgCIIgHFWUb4P5+TuldGRkpMbExDhKeXdpX6y1rK83aLXae15/9OiuV5y4QB+mgXmgHlZVcDaAReBdnsaegnrf7jRwD7g26NEfkpfAArDs21D7vDlJkt0/Fzg6cgCuAzfyNPQSpFTv7acGPeIcjOZp5CWoDzvo0VZFXkH/DSLIQY5jPkyespfuirU23MrdGyt/n70FddrNcF76BlM7FnPyzCmUDjOprTGsNzZot5qFkk8vQcZkbDY+BxdkjOHYxGUuzt0kTpLCJ4AC0k6H5fevaWx8QheQ7j2DQi6DP2PqKELFMaroZyiFNqYXu0ifvQWFuivtF9NkGTpNg8wgk2W92JUtMa0jxsbPBRdkrSVOYz4uPQu6B8VpzHh9qjpBAEktV0LqGg7Kar6vrAW9zSurqY2MUukpVmYSXXQ5lNHn4cqDjAUV5gvYuy9XNYOs5UdzM7Cc7nJIjk8yOX0JHUVBYpos4+uLFzR3NivMg6zh+9ZacEHGGE6cHmNqdoY4qQXKg9q8efWcrW+rhfKgIbmLlVkcKBbbawYpIIqKVGkPiKs0yira202ypFN4UKDIOh2UVURRUl0mrXTEWP18cEFgidKYD4+X+otyxSJaQ5TG1CcvUOkxX8YMAlB0Z1CoU97abswoSgrFKWe0eVEQzFCgfW24BNlwAwsVxkuQLemYt8ZSP3uWc7Mzv5ZwgE06S1lbXGRrcxWlK9qDbEmJoskMY/o0k9OXiJNakJhpp4158pDmTgMdVVgPKpXdiROgHjSQJaaUKuU2b41BWc32yhpREodYYWSdtHebL1JC8RSkS6kHQV89KGC5I05jxiemqDQPKqcc8buiGFJQt7/FEs8huYsNL0O4SUse9HdcyYP+jeRBh0XyoAO8SB7kVCR5kCMqIHnQkUQEORBBDkSQAxHkQAQ5EEEORJADEeRABDkQQQ5EkAMR5EAEORBBDkSQAy9Bc3O3B93fysk7g/6bmZd3oG84Wr9bNcCXPA3z/tvnPnAVuAXUGF5ZCmgDD4CneQN40fdoihPAFbo/ty4sqKRHU6hWq90E3gLb4P9oily9KeP5HVU8u8NXjiAIgjDk/AScg2Sn0NCF6wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMS0wOVQwMjozNzozMyswODowML86bisAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDEtMDlUMDI6Mzc6MzMrMDg6MDDOZ9aXAAAAQ3RFWHRzb2Z0d2FyZQAvdXNyL2xvY2FsL2ltYWdlbWFnaWNrL3NoYXJlL2RvYy9JbWFnZU1hZ2ljay03Ly9pbmRleC5odG1svbV5CgAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABh0RVh0VGh1bWI6OkltYWdlOjpIZWlnaHQAMjU26cNEGQAAABd0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAyNTZ6MhREAAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5nP7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADE1NDY5NzI2NTMDzeR4AAAAEXRFWHRUaHVtYjo6U2l6ZQAxMDIxQoRbKe8AAABidEVYdFRodW1iOjpVUkkAZmlsZTovLy9ob21lL3d3d3Jvb3QvbmV3c2l0ZS93d3cuZWFzeWljb24ubmV0L2Nkbi1pbWcuZWFzeWljb24uY24vZmlsZXMvMTExLzExMTM0NjAucG5n+qGGyAAAAABJRU5ErkJggg==',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
-          },
-          {
-            id: 'database-01',
-            x: 125,
-            y: 150,
-            label: '数据库',
-            labelCfg: {
-              position: 'bottom'
-            },
-            type: 'top-image',
-            img: 'data:image/png;base64,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',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
-          },
-          {
-            id: 'database-02',
-            x: 125,
-            y: 290,
-            label: '数据库',
-            labelCfg: {
-              position: 'bottom'
-            },
-            type: 'top-image',
-            img: 'data:image/png;base64,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',
-            size: [55, 55],
-            width: 48,
-            height: 48,
-            anchorPoints: [
-              [0.5, 0], // top
-              [1, 0.5], // right
-              [0.5, 1], // bottom
-              [0, 0.5] // left
-            ],
-            appState: {
-              alert: false
-            },
-            appConfig: {
-              ip: '',
-              port: '',
-              sysName: ''
-            }
+              {
+                "key": "title",
+                "type": "varchar(255)"
+              },
+              {
+                "key": "desc",
+                "type": "text"
+              },
+              {
+                "key": "parent",
+                "type": "number(6)",
+                "relation": [{
+                  "key": "id",
+                  "nodeId": "dept"
+                }]
+              },
+              {
+                "key": "manager",
+                "type": "number(6)"
+              }
+            ]
           }
         ],
         edges: [
           {
-            id: 'edge-01',
-            source: 'client-03',
-            sourceAnchor: 2,
-            target: 'firewall-02',
-            type: 'cc-line',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 0
+            type:'top-table',
+            "source": "info",
+            "target": "job",
+            "sourceKey": "jobId",
+            "targetKey": "id"
           },
           {
-            id: 'edge-02',
-            source: 'client-01',
-            sourceAnchor: 2,
-            target: 'firewall-01',
-            type: 'cc-polyline',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 0
+            type:'top-table',
+            "source": "info",
+            "target": "dept",
+            "sourceKey": "deptId",
+            "targetKey": "id"
           },
           {
-            id: 'edge-03',
-            source: 'client-02',
-            sourceAnchor: 2,
-            target: 'firewall-02',
-            type: 'cc-polyline',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 3
-          },
-          {
-            id: 'edge-04',
-            source: 'firewall-02',
-            sourceAnchor: 2,
-            target: 'server-02',
-            type: 'cc-cubic',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 0
-          },
-          {
-            id: 'edge-05',
-            source: 'firewall-01',
-            sourceAnchor: 2,
-            target: 'server-01',
-            type: 'cc-cubic',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 0
-          },
-          {
-            id: 'edge-06',
-            source: 'server-01',
-            sourceAnchor: 1,
-            target: 'database-01',
-            type: 'cc-line',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 3
-          },
-          {
-            id: 'edge-07',
-            source: 'database-01',
-            sourceAnchor: 1,
-            target: 'server-02',
-            type: 'cc-line',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 3
-          },
-          {
-            id: 'edge-08',
-            source: 'server-02',
-            sourceAnchor: 3,
-            target: 'database-02',
-            type: 'cc-line',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 1
-          },
-          {
-            id: 'edge-09',
-            source: 'database-02',
-            sourceAnchor: 3,
-            target: 'server-01',
-            type: 'cc-line',
-            style: {
-              stroke: '#A3B1BF',
-              lineWidth: 2,
-              strokeOpacity: 0.92,
-              lineAppendWidth: 10,
-              startArrow: false,
-              endArrow: false
-            },
-            labelCfg: {
-              position: 'center',
-              autoRotate: false
-            },
-            targetAnchor: 1
+            type:'top-table',
+            "source": "dept",
+            "target": "dept",
+            "sourceKey": "parent",
+            "targetKey": "id"
           }
         ]
       },
       nodeTypeList: [
-        // { guid: 'blue', label: '蓝色', imgSrc: require('../../assets/images/blue.svg') },
-        // { guid: 'green', label: '绿色', imgSrc: require('@/assets/images/green.svg') },
-        // { guid: 'purple', label: '紫色', imgSrc: require('@/assets/images/purple.svg') }
+        // { guid: "blue", label: "蓝色", imgSrc: require("../../assets/images/blue.svg") },
+        // { guid: "green", label: "绿色", imgSrc: require("@/assets/images/green.svg") },
+        // { guid: "purple", label: "紫色", imgSrc: require("@/assets/images/purple.svg") }
       ],
       // 节点配置
       nodeAppConfig: {
-        ip: '节点IP',
-        port: '节点端口',
-        sysName: '设备名称'
+        ip: "节点IP",
+        port: "节点端口",
+        sysName: "设备名称"
       },
       autoRefreshTimer: null
-    }
+    };
   },
   mounted() {
-    let graphData = deepClone(this.graphData)
-    this.$refs.topology.initTopo(graphData)
-    this.randomChange()
+    let graphData = deepClone(this.graphData);
+    this.$refs.topology.initTopo(graphData);
+    this.randomChange();
   },
   methods: {
     doAutoRefresh(interval) {
       if (interval === -1) {
-        clearInterval(this.autoRefreshTimer)
+        clearInterval(this.autoRefreshTimer);
       } else {
-        clearInterval(this.autoRefreshTimer)
+        clearInterval(this.autoRefreshTimer);
         this.autoRefreshTimer = setInterval(() => {
-          this.randomChange()
-        }, interval)
-        this.$once('hook:beforeDestroy', () => {
-          clearInterval(this.autoRefreshTimer)
-        })
+          this.randomChange();
+        }, interval);
+        this.$once("hook:beforeDestroy", () => {
+          clearInterval(this.autoRefreshTimer);
+        });
       }
     },
     doChangeMode(graphMode) {
-      clearInterval(this.autoRefreshTimer)
-      let graphData = deepClone(this.graphData)
-      this.$refs.topology.changeGraphMode(graphData, graphMode)
+      clearInterval(this.autoRefreshTimer);
+      let graphData = deepClone(this.graphData);
+      this.$refs.topology.changeGraphMode(graphData, graphMode);
     },
     doManualRefresh() {
-      this.randomChange()
+      this.randomChange();
     },
     doSaveData(graphData) {
-      console.log(JSON.stringify(graphData))
+      console.log(JSON.stringify(graphData));
     },
     randomChange() {
-      let graphData = deepClone(this.$refs.topology.getGraphData())
-      // let { nodes, edges } = graphData
-      // let randomIdx = Math.floor((Math.random() * nodes.length))
-      // let randomNodeIds = getRandomArrayElements(nodes, 1).map(x => {
-      //   return x.id
-      // })
-      //todo 设置报警状态
-      // for (let i = 0, len = nodes.length; i < len; i++) {
-      //   let node = nodes[i]
-      //   if (randomNodeIds.indexOf(node.id) > -1) {
-      //     node.description = `<p class="tooltips-title text-center">${node.label}</p>
-      //           <table class="tooltips-table">
-      //           <tr>
-      //           <td style="text-align:left;color:#303133">设备IP: 10.5.97.1</td>
-      //           </tr>
-      //           <tr>
-      //           <td style="text-align:left;color:#303133">设备名称: chaincloud-01</td>
-      //           </tr>
-      //           <tr>
-      //           <td style="text-align:left;color:#ff0000">CPU使用率: 99%</td>
-      //           </tr>
-      //           <tr>
-      //           <td style="text-align:left;color:#ff0000">内存使用率: 72%</td>
-      //           </tr>
-      //           <tr>
-      //           <td style="text-align:left;color:#303133">最近刷新时间: 2021-10-23 16:04:13</td>
-      //           </tr>
-      //           </table>`
-      //     node.appState.alert = true
-      //   } else {
-      //     node.description = `<div>${node.label}</div>`
-      //     node.appState.alert = false
-      //   }
-      // }
-      this.$refs.topology.changeGraphData(graphData)
+      let graphData = deepClone(this.$refs.topology.getGraphData());
+      let { nodes } = graphData;
+      for (let i = 0, len = nodes.length; i < len; i++) {
+        let node = nodes[i];
+        node.description = `<div>${node.label}</div>`;
+        node.appState.alert = false;
+      }
+      this.$refs.topology.changeGraphData(graphData);
     }
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/hchyun-ui/src/views/system/top/packages/elements/checkbox.vue b/hchyun-ui/src/views/system/top/packages/elements/checkbox.vue
index 2609e14..aa36f62 100644
--- a/hchyun-ui/src/views/system/top/packages/elements/checkbox.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="checkbox" :class="{ 'checkbox-checked': checkVal }">
+  <div class="cc-checkbox" :class="{ 'checkbox-checked': checkVal }">
     <input
       id="checkbox"
       type="checkbox"
@@ -28,7 +28,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.checkbox {
+.cc-checkbox {
   display: inline-block;
   color: #606266;
   font-size: 14px;
diff --git a/hchyun-ui/src/views/system/top/packages/elements/dropdown.vue b/hchyun-ui/src/views/system/top/packages/elements/dropdown.vue
index 5659449..497489e 100644
--- a/hchyun-ui/src/views/system/top/packages/elements/dropdown.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/dropdown.vue
@@ -1,184 +1,228 @@
 <template>
-  <div class="cc-dropdown" @mouseover="onMouseOver" @mouseout="onMouseOut">
-    <span><a href="javascript:void(0);">{{ dropdownItems[activeIndex].label }}</a></span>
-    <div class="cc-dropdown-menu" ref="dropdownMenu" @mouseover="onMouseOver">
-      <ul>
-        <li
-          v-for="(dropdownItem, index) in dropdownItems"
-          :key="index"
-          @click="onItemClick(index, $event)"
-        >
-          <a href="javascript:void(0);">{{ dropdownItem.label }}</a>
-        </li>
-      </ul>
+    <div class="graph-op">
+        <i v-for="edgeItem in dropdownItems " :class="edgeItem.class" v-on:title="edgeItem.label" style="width: 120px;"
+           @click="onItemClick(edgeItem.guid, $event)">&nbsp;&nbsp;{{edgeItem.label}}</i>
     </div>
-  </div>
 </template>
 
 <script>
-export default {
-  name: 'CCDropdownList',
-  props: {
-    dropdownItems: {
-      type: Array,
-      default() {
-        return [
-          { value: 0, label: '未选择' },
-          { value: 1, label: '选项一' },
-          { value: 2, label: '选项二' },
-          { value: 3, label: '选项三' }
-        ]
-      }
-    },
-    defaultIndex: {
-      type: Number,
-      default() {
-        return 0
-      }
+    import $ from 'jquery'
+    export default {
+        name: 'CCDropdownList',
+        props: {
+            dropdownItems: {
+                type: Array,
+                default() {
+                    return [
+                    ]
+                }
+            },
+            defaultIndex: {
+                type: Number,
+                default() {
+                    return 0
+                }
+            }
+        },
+        data() {
+            return {
+                activeIndex: this.defaultIndex,
+                timeout: null
+            }
+        },
+        watch: {
+            activeIndex() {
+                this.$emit('change', this.activeIndex)
+            }
+        },
+        mounted() {
+            $('.iconfonts')[0].style.backgroundColor = '#ebeef2'
+        },
+        methods: {
+            onItemClick(index,e) {
+                let lineList = $('.iconfonts')
+                for (let i=0;i<lineList.length;i++){
+                    lineList[i].style.backgroundColor = '#ffffff'
+                }
+                if (e.path[0].style.backgroundColor=='rgb(255, 255, 255)'){
+                    e.path[0].style.backgroundColor = '#ebeef2'
+                }
+                if (index !== this.activeIndex) {
+                    this.activeIndex = index
+                }
+            }
+        }
     }
-  },
-  data() {
-    return {
-      activeIndex: this.defaultIndex,
-      timeout: null
-    }
-  },
-  watch: {
-    activeIndex() {
-      this.$emit('change', this.dropdownItems[this.activeIndex])
-    }
-  },
-  methods: {
-    onMouseOver() {
-      if (this.timeout) {
-        clearTimeout(this.timeout)
-      }
-      this.$refs.dropdownMenu.style.display = 'block'
-    },
-    onMouseOut() {
-      this.timeout = setTimeout(() => {
-        this.$refs.dropdownMenu.style.display = 'none'
-      }, 300)
-    },
-    onItemClick(index) {
-      this.$refs.dropdownMenu.style.display = 'none'
-      if (index !== this.activeIndex) {
-        this.activeIndex = index
-      }
-    }
-  }
-}
 </script>
 
 <style lang="scss" scoped>
-.cc-dropdown {
-  position: relative;
-  display: inline-block;
-  min-width: 100px;
-  text-align: center;
-  a {
-    color: #000;
-    text-decoration: none;
-  }
-  ul,
-  li {
-    list-style: none;
-  }
-  span {
-    display: block;
-    z-index: 2;
-    height: 30px;
-    line-height: 30px;
-    background-color: transparent;
-    font-size: 14px;
-    border-radius: 5px;
-    -webkit-transition: all .2s ease-in;
-    transition: all .2s ease-in;
-  }
-  span a:after{
-    content: " ";
-    display: inline-block;
-    width: 0;
-    height: 0;
-    font-size: 0;
-    line-height: 0;
-    border-bottom: solid 6px #000;
-    border-left: solid 4px transparent;
-    border-right: solid 4px transparent;
-    vertical-align: 3px;
-    margin-left: 10px;
-    -webkit-transition: all .2s ease-in;
-    transition: all .2s ease-in;
-  }
-}
 
-.cc-dropdown-menu {
-  position: absolute;
-  display: none;
-  top: 50px;
-  left: 0;
-  right: 0;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-  z-index: 1;
+    .iconfonts {
+        color: #666666;
 
-  /* 一个很重要的三角形*/
-  li:first-child:before {
-    display: block; /* 独占一行 */
-    content: " ";
-    font-size: 0;
-    line-height: 0;
-    margin: 0 auto; /* 居中 */
-    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 配合整体一样的投影 */
-    background-color: #fff;
-    width: 10px;
-    height: 10px;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg); /* 一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来 */
-    position: relative;
-    top: -5px; /* 露出上半部分*/
-    z-index: 1; /* 隐藏下半部分 */
-    -webkit-transition: all .2s ease-in;
-    transition: all .2s ease-in;
-  }
-  li a {
-    color: #888;
-    line-height: 46px;
-    border-bottom: solid 1px #eee;
-    font-size: 14px;
-    display: block;
-    background-color: #fff; /* 要有背景色才能盖住呀*/
-    position: relative;
-    z-index: 2; /* 这里很重要 要挡住三角形的下半部分*/
-    -webkit-transition: all .2s ease-in;
-    transition: all .2s ease-in;
-  }
-  /* 以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
-  li:first-child a{
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    margin-top: -10px;
-  }
-  li:last-child a{
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-bottom: none;
-  }
-  /*hover事件给了li，先改变三角 再改变a*/
-  li:hover:before{
-    background-color: #ecf5ff;
-  }
-  li:hover a {
-    background-color: #ecf5ff;
-    color: #66b1ff;
-  }
-}
+            font-size: 12px;
+            line-height: 20px;
+            height: 20px;
+            padding-bottom: 2px;
 
-.cc-dropdown:hover span{
-  background-color: transparent;
-}
-.cc-dropdown:hover span a:after {
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
+    }
+    .graph-op {
+        display: inline-block;
+        vertical-align: middle;
+
+        i {
+            width: 20px;
+            height: 20px;
+            margin: 0 6px;
+            line-height: 20px;
+            color: #a8a8a8;
+            text-align: center;
+            border-radius: 2px;
+            display: inline-block;
+            border: 1px solid rgba(2, 2, 2, 0);
+        }
+
+        i:hover {
+            cursor: pointer;
+            border: 1px solid #E9E9E9;
+        }
+
+        .disabled {
+            color: rgba(0, 0, 0, 0.25);
+        }
+
+        .disabled:hover {
+            cursor: not-allowed;
+            border: 1px solid rgba(2, 2, 2, 0);
+        }
+
+        .icon-select {
+            background-color: #EEEEEE;
+        }
+
+        .separator {
+            margin: 4px;
+            border-left: 1px solid #E9E9E9;
+        }
+    }
+    .cc-dropdown {
+        position: relative;
+        display: inline-block;
+        min-width: 100px;
+        text-align: center;
+
+        a {
+            color: #000;
+            text-decoration: none;
+        }
+
+        ul,
+        li {
+            list-style: none;
+        }
+
+        span {
+            display: block;
+            z-index: 2;
+            height: 30px;
+            line-height: 30px;
+            background-color: transparent;
+            font-size: 14px;
+            border-radius: 5px;
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+
+        span a:after {
+            content: " ";
+            display: inline-block;
+            width: 0;
+            height: 0;
+            font-size: 0;
+            line-height: 0;
+            border-bottom: solid 6px #000;
+            border-left: solid 4px transparent;
+            border-right: solid 4px transparent;
+            vertical-align: 3px;
+            margin-left: 10px;
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+    }
+
+    .cc-dropdown-menu {
+        position: absolute;
+        display: none;
+        top: 50px;
+        left: 0;
+        right: 0;
+        box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+        border-radius: 5px;
+        z-index: 1;
+
+        /* 一个很重要的三角形*/
+        li:first-child:before {
+            display: block; /* 独占一行 */
+            content: " ";
+            font-size: 0;
+            line-height: 0;
+            margin: 0 auto; /* 居中 */
+            box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* 配合整体一样的投影 */
+            background-color: #fff;
+            width: 10px;
+            height: 10px;
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg); /* 一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来 */
+            position: relative;
+            top: -5px; /* 露出上半部分*/
+            z-index: 1; /* 隐藏下半部分 */
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+
+        li a {
+            color: #888;
+            line-height: 46px;
+            border-bottom: solid 1px #eee;
+            font-size: 14px;
+            display: block;
+            background-color: #fff; /* 要有背景色才能盖住呀*/
+            position: relative;
+            z-index: 2; /* 这里很重要 要挡住三角形的下半部分*/
+            -webkit-transition: all .2s ease-in;
+            transition: all .2s ease-in;
+        }
+
+        /* 以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
+        li:first-child a {
+            border-top-left-radius: 5px;
+            border-top-right-radius: 5px;
+            margin-top: -10px;
+        }
+
+        li:last-child a {
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-bottom: none;
+        }
+
+        /*hover事件给了li，先改变三角 再改变a*/
+        li:hover:before {
+            background-color: #ecf5ff;
+        }
+
+        li:hover a {
+            background-color: #ecf5ff;
+            color: #66b1ff;
+        }
+    }
+
+    .cc-dropdown:hover span {
+        background-color: transparent;
+    }
+
+    .cc-dropdown:hover span a:after {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg);
+    }
 </style>
diff --git a/hchyun-ui/src/views/system/top/packages/elements/index.js b/hchyun-ui/src/views/system/top/packages/elements/index.js
index 03d3e71..81367e7 100644
--- a/hchyun-ui/src/views/system/top/packages/elements/index.js
+++ b/hchyun-ui/src/views/system/top/packages/elements/index.js
@@ -1,7 +1,7 @@
 /**
  * @author: clay
- * @data: 2021/11/14
- * @description: cceditor内部的通用组件
+ * @data: 2019/11/14
+ * @description: ClayTop内部的通用组件
  */
 
 import Checkbox from './checkbox'
diff --git a/hchyun-ui/src/views/system/top/packages/elements/loading.vue b/hchyun-ui/src/views/system/top/packages/elements/loading.vue
index a746470..f410a92 100644
--- a/hchyun-ui/src/views/system/top/packages/elements/loading.vue
+++ b/hchyun-ui/src/views/system/top/packages/elements/loading.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="model-overlay">
-    <div class="loading">
+    <div class="cc-loading">
       <svg class="circular" viewBox="0 0 50 50">
         <circle cx="25" cy="25" r="20" fill="none" stroke="#409EFF" stroke-width="5%" stroke-linecap="round"/>
       </svg>
@@ -34,7 +34,7 @@ export default {
   background-color: transparent;
 }
 
-.loading {
+.cc-loading {
   position: absolute;
   width: 50px;
   top: 45%;
diff --git a/hchyun-ui/src/views/system/top/packages/top.js b/hchyun-ui/src/views/system/top/packages/index.js
similarity index 92%
rename from hchyun-ui/src/views/system/top/packages/top.js
rename to hchyun-ui/src/views/system/top/packages/index.js
index a4baaf4..9c694ae 100644
--- a/hchyun-ui/src/views/system/top/packages/top.js
+++ b/hchyun-ui/src/views/system/top/packages/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/20
  * @description: 整合所有的组件，对外导出，即一个完整的组件库
  */
 
@@ -16,7 +16,7 @@ const install = function(Vue) {
   // 判断是否安装
   if (install.installed) return
   // 遍历注册全局组件
-  console.info('install----CCEditor: All----')
+  console.info('install----ClayTop: All----')
   components.map(component => Vue.component(component.name, component))
 }
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/index.js b/hchyun-ui/src/views/system/top/packages/topology/index.js
index caeacf1..797809f 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/20
  * @description: 导入组件，组件必须声明 name
  */
 
@@ -8,7 +8,7 @@ import Topology from './src/topology'
 
 // 为组件提供 install 安装方法，供按需引入
 Topology.install = function(Vue) {
-  console.info('install----CCEditor: Topology----')
+  console.info('install----ClayTop: Topology----')
   Vue.component(Topology.name, Topology)
 }
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
index d4c2c36..76831ff 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-add-edge.js
@@ -1,11 +1,9 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: edit mode: 通过先后点击两个节点来添加连线（容易和节点点击动作交叉，已弃用）
  */
 
-import G6 from '@antv/g6'
-import theme from '../theme'
 
 export default {
   name: 'click-add-edge',
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
index 8ed3f44..674f850 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/click-event-edit.js
@@ -1,124 +1,172 @@
 /**
- * @author: clay
- * @data: 2021/5/10
+ * @author: winyuan
+ * @data: 2019/07/16
+ * @repository: https://github.com/winyuan
  * @description: edit mode: 鼠标点击交互
  */
 
 // 用来获取调用此js的vue组件实例（this）
-let vm = null
+let vm = null;
 
 const sendThis = (_this) => {
-  vm = _this
-}
+  vm = _this;
+};
 
 export default {
   sendThis, // 暴露函数
-  name: 'click-event-edit',
+  name: "click-event-edit",
   options: {
     getEvents() {
       return {
-        'node:click': 'onNodeClick',
-        'node:contextmenu': 'onNodeRightClick',
-        'edge:click': 'onEdgeClick',
-        'edge:contextmenu': 'onEdgeRightClick',
-        'canvas:click': 'onCanvasClick'
-      }
+        "node:click": "onNodeClick",
+        "node:contextmenu": "onNodeRightClick",
+        "edge:click": "onEdgeClick",
+        "edge:contextmenu": "onEdgeRightClick",
+        "canvas:click": "onCanvasClick",
+      };
     },
+
+
     onNodeClick(event) {
       // todo..."selected"是g6自带的状态，在"drag-add-edge"中的"node:mouseup"事件也会触发，故此处不需要设置"selected"状态
       // let clickNode = event.item;
       // clickNode.setState('selected', !clickNode.hasState('selected'));
-      vm.currentFocus = 'node'
-      vm.rightMenuShow = false
-      this.updateVmData(event)
+
+
+      vm.currentFocus = "node";
+      vm.rightMenuShow = false;
+      this.updateVmData(event);
     },
     onNodeRightClick(event) {
-      let graph = vm.graph
-      let clickNode = event.item
-      let clickNodeModel = clickNode.getModel()
-      let selectedNodes = graph.findAllByState('node', 'selected')
-      let selectedNodeIds = selectedNodes.map(item => {return item.getModel().id})
-      vm.selectedNode = clickNode
+      let graph = vm.graph;
+      let clickNode = event.item;
+      let clickNodeModel = clickNode.getModel();
+      let selectedNodes = graph.findAllByState("node", "selected");
+      let selectedNodeIds = selectedNodes.map(item => {
+        return item.getModel().id;
+      });
+      vm.selectedNode = clickNode;
       // 如果当前点击节点是之前选中的某个节点，就进行下面的处理
       if (selectedNodes.length > 1 && selectedNodeIds.indexOf(clickNodeModel.id) > -1) {
-        vm.rightMenuShow = true
-        let rightMenu = vm.$refs.rightMenu
-        rightMenu.style.left = event.clientX + 'px'
-        rightMenu.style.top = event.clientY + 'px'
+        vm.rightMenuShow = true;
+        let rightMenu = vm.$refs.rightMenu;
+        rightMenu.style.left = event.clientX + "px";
+        rightMenu.style.top = event.clientY + "px";
       } else {
         // 隐藏右键菜单
-        vm.rightMenuShow = false
+        vm.rightMenuShow = false;
         // 先取消所有节点的选中状态
         selectedNodes.forEach(node => {
-          node.setState('selected', false)
-        })
+          node.setState("selected", false);
+        });
         // 再添加该节点的选中状态
-        clickNode.setState('selected', true)
-        vm.currentFocus = 'node'
-        this.updateVmData(event)
+        clickNode.setState("selected", true);
+        vm.currentFocus = "node";
+        this.updateVmData(event);
       }
-      graph.paint()
+      graph.paint();
     },
     onEdgeClick(event) {
-      let clickEdge = event.item
-      clickEdge.setState('selected', !clickEdge.hasState('selected'))
-      vm.currentFocus = 'edge'
-      this.updateVmData(event)
+      let clickEdge = event.item;
+      clickEdge.setState("selected", !clickEdge.hasState("selected"));
+      vm.currentFocus = "edge";
+      this.updateVmData(event);
     },
     onEdgeRightClick(event) {
-      let graph = vm.graph
-      let clickEdge = event.item
-      let clickEdgeModel = clickEdge.getModel()
-      let selectedEdges = graph.findAllByState('edge', 'selected')
+      let graph = vm.graph;
+      let clickEdge = event.item;
+      let clickEdgeModel = clickEdge.getModel();
+      let selectedEdges = graph.findAllByState("edge", "selected");
       // 如果当前点击节点不是之前选中的单个节点，才进行下面的处理
       if (!(selectedEdges.length === 1 && clickEdgeModel.id === selectedEdges[0].getModel().id)) {
         // 先取消所有节点的选中状态
-        graph.findAllByState('edge', 'selected').forEach(edge => {
-          edge.setState('selected', false)
-        })
+        graph.findAllByState("edge", "selected").forEach(edge => {
+          edge.setState("selected", false);
+        });
         // 再添加该节点的选中状态
-        clickEdge.setState('selected', true)
-        vm.currentFocus = 'edge'
-        this.updateVmData(event)
+        clickEdge.setState("selected", true);
+        vm.currentFocus = "edge";
+        this.updateVmData(event);
       }
-      let point = { x: event.x, y: event.y }
+      let point = { x: event.x, y: event.y };
     },
     onCanvasClick() {
-      vm.currentFocus = 'canvas'
-      vm.rightMenuShow = false
+      vm.currentFocus = "canvas";
+      vm.rightMenuShow = false;
     },
     updateVmData(event) {
-      if (event.item._cfg.type === 'node') {
+      let self = this
+      if (event.item._cfg.type === "node") {
+
+        // const item = event.item;
+        // let group = item.getContainer();
+        // let children = group.get("children");
+        // for (let i = 0, len = children.length; i < len; i++) {
+        //   const shape = children[i];
+        //   if (shape.get("name") === "collapses") {
+        //     console.log(shape.get("name"),"dkfjg");
+        //     self.graph.updateItem(item, {
+        //       collapsed: true,
+        //       size: [300, 50]
+        //     });
+        //     setTimeout(() => graph.layout(), 100);
+        //   } else if (shape.get("name") === "expands") {
+        //
+        //     console.log(shape.get("name"),"expands");
+        //     self.graph.updateItem(item, {
+        //       collapsed: false,
+        //       size: [300, 500]
+        //     });
+        //     setTimeout(() => graph.layout(), 100);
+        //   }
+        // }
         // 更新vm的data: selectedNode 和 selectedNodeParams
-        let clickNode = event.item
-        if (clickNode.hasState('selected')) {
-          let clickNodeModel = clickNode.getModel()
-          vm.selectedNode = clickNode
-          let nodeAppConfig = { ...vm.nodeAppConfig }
+
+
+        let clickNode = event.item;
+        // console.log(clickNode)
+        if (clickNode.hasState("selected")) {
+          let clickNodeModel = clickNode.getModel();
+          vm.selectedNode = clickNode;
+          let nodeAppConfig = { ...vm.nodeAppConfig };
           Object.keys(nodeAppConfig).forEach(function(key) {
-            nodeAppConfig[key] = ''
-          })
+            nodeAppConfig[key] = "";
+          });
           vm.selectedNodeParams = {
-            label: clickNodeModel.label || '',
+            label: clickNodeModel.label || "",
             appConfig: { ...nodeAppConfig, ...clickNodeModel.appConfig }
-          }
+          };
         }
-      } else if (event.item._cfg.type === 'edge') {
+      } else if (event.item._cfg.type === "edge") {
         // 更新vm的data: selectedEdge 和 selectedEdgeParams
-        let clickEdge = event.item
-        if (clickEdge.hasState('selected')) {
-          let clickEdgeModel = clickEdge.getModel()
-          vm.selectedEdge = clickEdge
-          let edgeAppConfig = { ...vm.edgeAppConfig }
+        let clickEdge = event.item;
+        if (clickEdge.hasState("selected")) {
+          let clickEdgeModel = clickEdge.getModel();
+          vm.selectedEdge = clickEdge;
+          let edgeAppConfig = { ...vm.edgeAppConfig };
           Object.keys(edgeAppConfig).forEach(function(key) {
-            edgeAppConfig[key] = ''
-          })
+            edgeAppConfig[key] = "";
+          });
           vm.selectedEdgeParams = {
-            label: clickEdgeModel.label || '',
+            label: clickEdgeModel.label || "",
             appConfig: { ...edgeAppConfig, ...clickEdgeModel.appConfig }
-          }
+          };
         }
       }
     }
   }
-}
+};
+const isInBBox = (point, bbox) => {
+  const {
+    x,
+    y
+  } = point;
+  const {
+    minX,
+    minY,
+    maxX,
+    maxY
+  } = bbox;
+
+  return x < maxX && x > minX && y > minY && y < maxY;
+};
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
index b6cb140..2bf97dd 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-add-edge.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
  * @description: edit mode: 通过拖拽节点上的锚点添加连线
  */
 import utils from '../utils'
@@ -100,7 +100,7 @@ export default {
             x: event.x,
             y: event.y
           },
-          type: self.graph.$C.edge.type || 'cc-line',
+          type: self.graph.$C.edge.type || 'top-line',
           style: G6.Util.mix({}, themeStyle.edgeStyle.default, self.graph.$C.edge.style)
         })
         self.drawEdge.isMoving = true
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
index cd18baa..08ebc57 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/drag-event-edit.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
  * @description: edit mode: 鼠标拖动节点的交互(记录拖拽前后的数据，用于【撤销】和【重做】)
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
index bf2b7e1..8754a5e 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/hover-event-edit.js
@@ -1,25 +1,45 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
  * @description: edit mode: 悬浮交互
  */
-
+// 用来获取调用此js的vue组件实例（this）
+let vm = null;
+const sendThis = (_this) => {
+  vm = _this;
+};
 export default {
-  name: 'hover-event-edit',
+  sendThis, // 暴露函数
+  name: "hover-event-edit",
   options: {
     getEvents() {
       return {
-        'node:mouseover': 'onNodeHover',
-        'node:mouseout': 'onNodeOut'
-      }
+        "node:mouseover": "onNodeHover",
+        "node:mouseout": "onNodeOut",
+      };
     },
     onNodeHover(event) {
-      let hoverNode = event.item
-      hoverNode.setState('hover', true)
+      let graph = vm.graph;
+      let hoverNode = event.item;
+
+      const name = event.shape.get("name");
+      const item = event.item;
+
+      if (name && name.startsWith("item")) {
+        graph.updateItem(item, {
+          selectedIndex: Number(name.split("-")[1])
+        });
+      } else {
+        graph.updateItem(item, {
+          selectedIndex: NaN
+        });
+      }
+      // console.log(item);
+      hoverNode.setState("hover", true);
     },
     onNodeOut(event) {
-      let hoverNode = event.item
-      hoverNode.setState('hover', false)
+      let hoverNode = event.item;
+      hoverNode.setState("hover", false);
     }
   }
-}
+};
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
index 6d2f96a..0410bfd 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
  * @description: register behaviors
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
index cbd8830..cdb6af3 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/behavior/keyup-event-edit.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/16
  * @description: edit mode: 键盘事件的交互，主要是删除节点和连线(记录删除前后的数据，用于【撤销】和【重做】)
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js b/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
index 2604961..a12862d 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/config/edge.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/16
  * @description: 线条的后期设置
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
index a6c12bb..abed973 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/config/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/16
  * @description: 配置
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
index 691a2fa..c13add9 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/base.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
  * @description: 线公共方法
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
index 76924a7..cf0147b 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/index.js
@@ -1,13 +1,13 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
  * @description: register edges
  */
 
-import ccLine from './cc-line'
-import ccBrokenline from './cc-brokenline'
-import ccPolyline from './cc-polyline'
-import ccCubic from './cc-cubic'
+import ccLine from './top-line'
+import ccBrokenline from './top-brokenline'
+import ccPolyline from './top-polyline'
+import ccCubic from './top-cubic'
 
 const obj = {
   ccLine,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
similarity index 96%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
index 45a294c..8873493 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-brokenline.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-brokenline.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/10/22
  * @description: 折线
  */
 
@@ -12,7 +12,7 @@ import theme from '../theme'
  * 现实现方法参考 https://g6.antv.vision/zh/examples/shape/customEdge#customPolyline
  */
 export default {
-  name: 'cc-brokenline',
+  name: 'top-brokenline',
   extendName: 'line',
   options: {
     ...base,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
similarity index 77%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
index dc01adb..aa83380 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-cubic.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-cubic.js
@@ -1,13 +1,13 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
  * @description: 曲线
  */
 
 import base from './base'
 
 export default {
-  name: 'cc-cubic',
+  name: 'top-cubic',
   extendName: 'cubic',
   options: {
     ...base
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-line.js
similarity index 78%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-line.js
index 898b532..be5a5ff 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-line.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-line.js
@@ -1,13 +1,13 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
  * @description: 直线
  */
 
 import base from './base'
 
 export default {
-  name: 'cc-line',
+  name: 'top-line',
   extendName: 'line',
   options: {
     ...base
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
similarity index 98%
rename from hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js
rename to hchyun-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
index 7435908..0c9a1c6 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/edge/cc-polyline.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-polyline.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/18
  * @description: 多段线
  */
 
@@ -8,7 +8,7 @@ import base from './base'
 import { polylineFinding } from './polyline-finding'
 
 export default {
-  name: 'cc-polyline',
+  name: 'top-polyline',
   extendName: 'single-edge',
   options: {
     ...base,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js
new file mode 100644
index 0000000..07d9d01
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/edge/top-table.js
@@ -0,0 +1,128 @@
+/**
+ * @author: clay
+ * @data: 2021/5/12 0:05
+ * @email: clay@hchyun.com
+ * @description: node
+ */
+export default {
+  name: 'top-table',
+  extendName: 'table',
+  options:{
+    draw(cfg, group) {
+      //todo 画线
+      const edge = group.cfg.item;
+      const sourceNode = edge.getSource().getModel();
+      const targetNode = edge.getTarget().getModel();
+
+      const sourceIndex = sourceNode.attrs.findIndex(
+        (e) => e.key === cfg.sourceKey
+      );
+
+      const sourceStartIndex = sourceNode.startIndex || 0;
+
+      let sourceY = 15;
+
+      if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) {
+        sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * 30;
+        sourceY = Math.min(sourceY, 300);
+      }
+
+      const targetIndex = targetNode.attrs.findIndex(
+        (e) => e.key === cfg.targetKey
+      );
+
+      const targetStartIndex = targetNode.startIndex || 0;
+
+      let targetY = 15;
+
+      if (!targetNode.collapsed && targetIndex > targetStartIndex - 1) {
+        targetY = (targetIndex - targetStartIndex + 0.5) * 30 + 30;
+        targetY = Math.min(targetY, 300);
+      }
+
+      const startPoint = {
+        ...cfg.startPoint
+      };
+      const endPoint = {
+        ...cfg.endPoint
+      };
+
+      startPoint.y = startPoint.y + sourceY;
+      endPoint.y = endPoint.y + targetY;
+
+      let shape;
+      if (sourceNode.id !== targetNode.id) {
+        shape = group.addShape("path", {
+          attrs: {
+            stroke: "#5B8FF9",
+            path: [
+              ["M", startPoint.x, startPoint.y],
+              [
+                "C",
+                endPoint.x / 3 + (2 / 3) * startPoint.x,
+                startPoint.y,
+                endPoint.x / 3 + (2 / 3) * startPoint.x,
+                endPoint.y,
+                endPoint.x,
+                endPoint.y,
+              ],
+            ],
+            endArrow: true,
+          },
+          name: "path-shape",
+        });
+      } else if (!sourceNode.collapsed) {
+        let gap = Math.abs((startPoint.y - endPoint.y) / 3);
+        if (startPoint["index"] === 1) {
+          gap = -gap;
+        }
+        shape = group.addShape("path", {
+          attrs: {
+            stroke: "#5B8FF9",
+            path: [
+              ["M", startPoint.x, startPoint.y],
+              [
+                "C",
+                startPoint.x - gap,
+                startPoint.y,
+                startPoint.x - gap,
+                endPoint.y,
+                startPoint.x,
+                endPoint.y,
+              ],
+            ],
+            endArrow: true,
+          },
+          name: "path-shape",
+        });
+      }
+
+      return shape;
+    },
+    afterDraw(cfg, group) {
+      const labelCfg = cfg.labelCfg || {};
+      const edge = group.cfg.item;
+      const sourceNode = edge.getSource().getModel();
+      const targetNode = edge.getTarget().getModel();
+      if (sourceNode.collapsed && targetNode.collapsed) {
+        return;
+      }
+      const path = group.find(
+        (element) => element.get("name") === "path-shape"
+      );
+
+      const labelStyle = Util.getLabelPosition(path, 0.5, 0, 0, true);
+      const label = group.addShape("text", {
+        attrs: {
+          ...labelStyle,
+          text: cfg.label || '',
+          fill: "#000",
+          textAlign: "center",
+          stroke: "#fff",
+          lineWidth: 1,
+        },
+      });
+      label.rotateAtStart(labelStyle.rotate);
+    },
+  }
+}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
index 0e9c346..5099dd9 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/graph/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: 图的布局方式/图的初始化
  */
 
@@ -33,7 +33,7 @@ const initGraph = {
       //   height: options.height
       // },
       defaultNode: {
-        type: 'top-rect',
+        type: 'cc-rect',
         labelCfg: {
           position: 'bottom'
         }
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
index eb7feb1..3bdc7ad 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/base.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: 节点基础方法
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
deleted file mode 100644
index eb7feb1..0000000
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/er-table.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @author: clay
- * @data: 2021/5/10
- * @description: 节点基础方法
- */
-
-import utils from '../utils'
-
-export default {
-  setState(name, value, item) {
-    // 设置节点状态
-    utils.node.setState(name, value, item)
-    // 设置锚点状态
-    utils.anchor.setState(name, value, item)
-  },
-  // 绘制后附加锚点
-  afterDraw(cfg, group) {
-    // 绘制锚点
-    utils.anchor.draw(cfg, group)
-  }
-}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
index 85fcbaf..9816418 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/index.js
@@ -1,15 +1,17 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: register nodes
  */
 
-import ccRect from './top-rect'
-import ccImage from './top-image'
+import Rect from './top-rect'
+import Image from './top-image'
+import ErTable from './top-ertable'
 
 const obj = {
-  ccRect,
-  ccImage
+  Rect,
+  Image,
+  ErTable
 }
 
 export default {
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js
new file mode 100644
index 0000000..523b276
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-ertable.js
@@ -0,0 +1,243 @@
+/**
+ * @author: clay
+ * @data: 2019/07/05
+ * @description: er数据库表基本图像
+ */
+
+import utils from '../utils'
+
+export default {
+  name: "top-ertable",
+  extendName: "ertable",
+  options: {
+    setState(name, value, item,group) {
+      // 设置节点状态
+      utils.node.setState(name, value, item,group);
+      // 设置锚点状态
+      utils.anchor.setState(name, value, item);
+      //设置收缩状态
+      utils.collapse.setState(item)
+    },
+    draw(cfg, group) {
+      const width = 250;
+      const height = 316;
+      const itemCount = 10;
+      const itemHeight = 30;
+      const boxStyle = {
+        stroke: "#096DD9",
+        radius: 4
+      };
+
+      const {
+        attrs = [],
+        startIndex = 0,
+        selectedIndex,
+        collapsed,
+        icon
+      } = cfg;
+      const list = attrs;
+      const afterList = list.slice(
+        Math.floor(startIndex),
+        Math.floor(startIndex + itemCount - 1)
+      );
+      const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30;
+
+      group.addShape("rect", {
+        attrs: {
+          fill: boxStyle.stroke,
+          height: 30,
+          width,
+          radius: [boxStyle.radius, boxStyle.radius, 0, 0]
+        },
+        draggable: true
+      });
+
+      let fontLeft = 12;
+
+      if (icon && icon.show !== false) {
+        group.addShape("image", {
+          attrs: {
+            x: 8,
+            y: 8,
+            height: 16,
+            width: 16,
+            ...icon
+          }
+        });
+        fontLeft += 18;
+      }
+
+      group.addShape("text", {
+        attrs: {
+          y: 22,
+          x: fontLeft,
+          fill: "#fff",
+          text: cfg.name,
+          fontSize: 12,
+          fontWeight: 500
+        }
+      });
+
+      group.addShape("rect", {
+        attrs: {
+          x: 0,
+          y: collapsed ? 30 : 300,
+          height: 15,
+          width,
+          fill: "#eee",
+          radius: [0, 0, boxStyle.radius, boxStyle.radius],
+          cursor: "pointer"
+        },
+        name: collapsed ? "expand" : "collapse"
+      });
+
+      group.addShape("text", {
+        attrs: {
+          x: width / 2 - 6,
+          y: (collapsed ? 30 : 300) + 12,
+          text: collapsed ? "+" : "-",
+          width,
+          fill: "#000",
+          radius: [0, 0, boxStyle.radius, boxStyle.radius],
+          cursor: "pointer"
+        },
+        name: collapsed ? "expands" : "collapses"
+      });
+
+      const keyshape = group.addShape("rect", {
+        attrs: {
+          x: 0,
+          y: 0,
+          width,
+          height: collapsed ? 45 : height,
+          ...boxStyle
+        },
+        draggable: true
+      });
+
+      if (collapsed) {
+        return keyshape;
+      }
+
+      const listContainer = group.addGroup({});
+      listContainer.setClip({
+        type: "rect",
+        attrs: {
+          x: -8,
+          y: 30,
+          width: width + 16,
+          height: 300 - 30
+        }
+      });
+      listContainer.addShape({
+        type: "rect",
+        attrs: {
+          x: 1,
+          y: 30,
+          width: width - 2,
+          height: 300 - 30,
+          fill: "#fff"
+        },
+        draggable: true
+      });
+
+      if (list.length > itemCount) {
+        const barStyle = {
+          width: 4,
+          padding: 0,
+          boxStyle: {
+            stroke: "#00000022"
+          },
+          innerStyle: {
+            fill: "#00000022"
+          }
+        };
+
+        listContainer.addShape("rect", {
+          attrs: {
+            y: 30,
+            x: width - barStyle.padding - barStyle.width,
+            width: barStyle.width,
+            height: height - 30,
+            ...barStyle.boxStyle
+          }
+        });
+
+        const indexHeight =
+          afterList.length > itemCount ?
+            (afterList.length / list.length) * height :
+            10;
+
+        listContainer.addShape("rect", {
+          attrs: {
+            y: 30 +
+              barStyle.padding +
+              (startIndex / list.length) * (height - 30),
+            x: width - barStyle.padding - barStyle.width,
+            width: barStyle.width,
+            height: Math.min(height, indexHeight),
+            ...barStyle.innerStyle
+          }
+        });
+      }
+      if (afterList) {
+        afterList.forEach((e, i) => {
+          const isSelected =
+            Math.floor(startIndex) + i === Number(selectedIndex);
+          let {
+            key = "", type
+          } = e;
+          if (type) {
+            key += " - " + type;
+          }
+          const label = key.length > 26 ? key.slice(0, 24) + "..." : key;
+
+          listContainer.addShape("rect", {
+            attrs: {
+              x: 1,
+              y: i * itemHeight - itemHeight / 2 + offsetY,
+              width: width - 4,
+              height: itemHeight,
+              radius: 2,
+              lineWidth: 1
+              // cursor: "pointer"
+            },
+            name: `item-${Math.floor(startIndex) + i}-content`,
+            draggable: true
+          });
+
+          if (!cfg.hideDot) {
+            // todo 左侧锚点
+            utils.anchor.erDraw(group, label, 0, i * itemHeight + offsetY, i, itemHeight, offsetY);
+            //todo 右侧锚点
+            utils.anchor.erDraw(group, label, width, i * itemHeight + offsetY, i, itemHeight, offsetY);
+          }
+
+          listContainer.addShape("text", {
+            attrs: {
+              name:'label',
+              x: 12,
+              y: i * itemHeight + offsetY + 6,
+              text: label,
+              fontSize: 12,
+              fill: "#000",
+              fontFamily: "Avenir,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol",
+              full: e,
+              fontWeight: isSelected ? 500 : 100,
+              cursor: "pointer"
+            },
+            name: `item-${Math.floor(startIndex) + i}`
+          });
+        });
+      }
+      return keyshape;
+    },
+
+    getAnchorPoints() {
+      return [
+        [0, 0],
+        [1, 0]
+      ];
+    }
+  }
+};
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
index 1ffb211..18e0622 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-image.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: 图片节点
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
index 4945056..4f7128d 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-rect.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: 矩形节点
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js
new file mode 100644
index 0000000..b28b04f
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/node/top-test.js
@@ -0,0 +1,3 @@
+
+
+
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js b/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
index 1018837..5991259 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/plugins/d3-installer.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/07/05
  * @description: install 3rd plugins
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
index ab8409b..b7c1832 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/dark-style.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/11/20
  * @description: dark style
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
index 7459cb6..e2d9c92 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/default-style.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: default style
  */
 
@@ -10,8 +10,8 @@ export default {
     default: {
       stroke: '#CED4D9',
       fill: 'transparent',
-      shadowOffsetX: 0,
-      shadowOffsetY: 4,
+      // shadowOffsetX: 0,
+      // shadowOffsetY: 4,
       shadowBlur: 10,
       shadowColor: 'rgba(13, 26, 38, 0.08)',
       lineWidth: 1,
@@ -20,9 +20,10 @@ export default {
     },
     selected: {
       shadowColor: '#ff240b',
-      shadowBlur: 4,
-      shadowOffsetX: 0,
-      shadowOffsetY: 0
+      shadowBlur: 2,
+      // shadowOffsetX: 0,
+      // shadowOffsetY: 0,
+      // fontSize:'50'
       // shadowColor: '#626262',
       // shadowBlur: 8,
       // shadowOffsetX: -1,
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
index dd2290f..02e514a 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: 编辑器主题样式 - 节点、连线的预设样式
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js b/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
index 48f425c..ebd4d55 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/theme/office-style.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/11/21
  * @description: office style
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
index 70eeb55..10eacef 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-edit.vue
@@ -2,12 +2,12 @@
   <div class="toolbar">
     <div class="left">
       <!--<el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
-      <cc-dropdown
-        class="edge-shape"
-        :dropdown-items="$parent.edgeShapeList"
-        @change="$parent.changeEdgeShapeHandler"
-      >
-      </cc-dropdown>
+<!--      <cc-dropdown-->
+<!--        class="edge-shape"-->
+<!--        :dropdown-items="$parent.edgeShapeList"-->
+<!--        @change="$parent.changeEdgeShapeHandler"-->
+<!--      >-->
+<!--      </cc-dropdown>-->
     </div>
     <div class="center">
       <div class="graph-ops">
@@ -29,6 +29,14 @@
         <i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
         <span class="separator"></span>
         <i class="iconfont icon-roi-select" id="multi-select" title="框选" @click="$parent.multiSelectHandler"></i>
+
+
+        <div v-if="$parent.$data.graphMode === 'edit'" class="iconfont zx"><cc-dropdown
+          class="edge-shape"
+          :dropdown-items="$parent.edgeShapeList"
+          @change="$parent.changeEdgeShapeHandler"
+        >
+        </cc-dropdown></div>
       </div>
     </div>
     <div class="right">
@@ -58,6 +66,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.zx{
+  float: right;
+}
 .toolbar {
   /*z-index: 3;*/
   /*width: 100%;*/
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue
index be9a3eb..c0c7a0d 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/toolbar-preview.vue
@@ -16,7 +16,7 @@
         <i class="iconfont icon-fit" title="适应画布" @click="$parent.autoZoomHandler"></i>
         <i class="iconfont icon-actualsize" title="实际尺寸" @click="$parent.resetZoomHandler"></i>
         <span class="separator"></span>
-        <checkbox @change="$parent.enableMinimapHandler">导航器</checkbox>
+        <cc-checkbox @change="$parent.enableMinimapHandler">导航器</cc-checkbox>
         <cc-dropdown :dropdown-items="refreshOptions" @change="toggleAutoRefresh"></cc-dropdown>
       </div>
     </div>
@@ -33,7 +33,7 @@ import { Checkbox, Button, Dropdown } from '../../elements'
 export default {
   name: 'ToolbarEdit',
   components: {
-    'checkbox': Checkbox,
+    'cc-checkbox': Checkbox,
     'cc-button': Button,
     'cc-dropdown': Dropdown
   },
@@ -159,7 +159,7 @@ export default {
       margin: 0 8px 0 12px;
     }
 
-    .checkbox {
+    .cc-checkbox {
       margin: 0 6px;
     }
   }
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue b/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue
index ac989be..a5e74ef 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/topology.vue
@@ -45,12 +45,13 @@
             <div class="pannel-title">节点</div>
             <div class="block-container">
               <span>节点标签</span>
-              <el-input v-model="selectedNodeParams.label" size="mini"></el-input>
-<!--              <input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label"/>-->
+              <!--<el-input v-model="selectedNodeParams.label" size="mini"></el-input>-->
+              <input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.label" />
               <div v-for="(value, key) in nodeAppConfig" :key="key">
                 <span>{{ value }}</span>
-                <el-input v-model="selectedNodeParams.appConfig[key]" size="mini"></el-input>
-<!--                <input class="params-input" type="text" autocomplete="off" v-model="selectedNodeParams.appConfig[key]"/>-->
+                <!--<el-input v-model="selectedNodeParams.appConfig[key]" size="mini"></el-input>-->
+                <input class="params-input" type="text" autocomplete="off"
+                       v-model="selectedNodeParams.appConfig[key]" />
               </div>
             </div>
           </div>
@@ -58,12 +59,11 @@
             <div class="pannel-title">连线</div>
             <div class="block-container">
               <span>连线标签</span>
-              <el-input v-model="selectedEdgeParams.label" size="mini"></el-input>
-<!--              <input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.label"/>-->
+              <input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.label" />
               <div v-for="(value, key) in edgeAppConfig" :key="key">
                 <span>{{ value }}</span>
-                <el-input v-model="selectedEdgeParams.appConfig[key]" size="mini"></el-input>
-<!--                <input class="params-input" type="text" autocomplete="off" v-model="selectedEdgeParams.appConfig[key]"/>-->
+                <input class="params-input" type="text" autocomplete="off"
+                       v-model="selectedEdgeParams.appConfig[key]" />
               </div>
             </div>
           </div>
@@ -73,7 +73,7 @@
           <div v-else>
             <div class="pannel-title">画布</div>
             <div class="block-container">
-              <checkbox @change="enableGridHandler">网格对齐</checkbox>
+              <cc-checkbox @change="enableGridHandler">网格对齐</cc-checkbox>
             </div>
           </div>
         </div>
@@ -86,7 +86,7 @@
         </div>
       </div>
     </div>
-    <loading v-if="loading" loading-text="自动布局中..."></loading>
+    <cc-loading v-if="loading" loading-text="自动布局中..."></cc-loading>
     <div class="right-menu" ref="rightMenu" v-show="rightMenuShow" @contextmenu.prevent>
       <ul v-if="currentFocus === 'node' && selectedNodes.length > 1">
         <li @click="alignHandler('horizontal')">水平对齐</li>
@@ -101,30 +101,30 @@
 </template>
 
 <script>
-import G6 from '@antv/g6'
+import G6 from "@antv/g6";
 
-import {Loading, Checkbox} from '../../elements'
-import ToolbarPreview from './toolbar-preview'
-import ToolbarEdit from './toolbar-edit'
-import registerEdge from './edge'
-import ccNode from './node'
-import ccBehavior from './behavior'
-import config from './config'
-import theme from './theme'
-import initGraph from './graph'
-import utils from './utils'
+import { Loading, Checkbox } from "../../elements";
+import ToolbarPreview from "./toolbar-preview";
+import ToolbarEdit from "./toolbar-edit";
+import registerEdge from "./edge";
+import Node from "./node";
+import Behavior from "./behavior";
+import config from "./config";
+import theme from "./theme";
+import initGraph from "./graph";
+import utils from "./utils";
 
-registerEdge(G6)
-ccNode.register(G6)
-ccBehavior.register(G6)
+registerEdge(G6);
+Node.register(G6);
+Behavior.register(G6);
 
 export default {
-  name: 'Topology',
+  name: "Topology",
   components: {
-    'checkbox': Checkbox,
-    'loading': Loading,
-    'toolbar-preview': ToolbarPreview,
-    'toolbar-edit': ToolbarEdit
+    "cc-checkbox": Checkbox,
+    "cc-loading": Loading,
+    "toolbar-preview": ToolbarPreview,
+    "toolbar-edit": ToolbarEdit
   },
   props: {
     // graphData: {
@@ -138,44 +138,44 @@ export default {
       default: () => {
         return [
           {
-            guid: 'server',
-            label: '服务器',
-            imgSrc: 'data:image/png;base64,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'
+            guid: "server",
+            label: "服务器",
+            imgSrc: "data:image/png;base64,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"
           },
           {
-            guid: 'database',
-            label: '数据库',
-            imgSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABHCAYAAACzmZFbAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAADKAAAAygAcBCQkAAAAB3RJTUUH4wEJAzk3qBMzWgAACuxJREFUeNrtm1uMJFd5x3/nUlXdPTM9szs7K9a7tuU1toWxsaNAbCAvQeAoRomEkJFAgJExAh7ioMTIfoisLFGsKC/BCAQk4ADCPIBRhFAQDw7INkaJQWCDZGPMYrzeG+udW1/qcupceKi+zIznuju3XfOXWtNddar6fL/6zne+75we+KMAEFt58zvu+yoCCCEglUbHCTquE9VHiOsNdNJARREEcKWhLFLKrIvJuliT40yBdxYVxXjv+fKRD+xuEHfc91W8tURJnbGpAzQmpnBlQQiBZKTJdbdcxWdve7+69Pqb4/r4vqg+NqHikaZMGqNCRQkQsKbApO2Qd1s+b825dO7l8rnHv2s++vVH3EtPP0uZpwgpUTqmffYU3ZnfY4sMFcV8+VO3by+IO488hNIRZZ7inaXe3Mueg4dpjE+y5+Ahnnz4SyN7Dx6erDX3Nk23dUgo9dr62J69CDHiSjPpnd0P7JVSjUitE6m0FEIC4L3HO+u8s0XwrgNiWip1RkXJjHc2zduzLwO/SUaaJzrTp9uzx4+eve4v35ubtENn+hRzp17EZF1G9kxRdFs0JqZ44K53bC6IO488xPypFzl47ZsQUjJ52dX87Dtfkgde98b9Y/suOeysuT6uNW5EyMsgXKOiZIIQahAaQkpx3o4XAiF4jxApkDtTTAupfuW9e8nm6U8R4tnO9Omj37zntpm//fZzYfbkCwjgsQf/hRveeTsP/vPaHrNqDz9y5CGy1gz7r7yO0X2XcPwXP47GD1x+ZTLSvEkq/Xap9fVSqiuFkA0EcotDzrKAAOe964Tgf+2MeQr437wz9+Tp5546dvimt7u8PcePvvKvvOHW9/Of971vYyA+fN/XuPrP38npXz/Nwde/iWO/+PFUY3zyL6SO3qV09BYh1SHR9+ldphCCC979zpXmUWvy/zbd9uOTl18zP3viKLWxPcyeOMrn73332iDu+vT3KfOUyUuvonX25FR9bM9tOql/UEXRjULIZKcN3RAU71Pv7P9Zkz+Yzp397ujka1onn/kJI5Ov4XN3//Witoue6ic++wgqijn13M9kkXVubU4dfDgZbX5Gx8lNFxoEACFlQ0Xx2+LG2INj+y75hsk6b73//juJkhr/8IXHFrftv7n7P57AlQWd6dP1qSuuvUtFyb1SqYmdNmYz5Wx5osy6/zR78oX/qo/tcdbkfO6TfwP0POIjn/oGZd6ldea4nrri2r/XSf3IxQYBQOnoYNwY+/c9Bw9/+IG/uwVXGj52/8NDEGfmn2F07wH2XX7NO3ScfFIIccENg/VKKjUa1Rr/ePcXH//T5v5DRK4+BHHZ/jdz/P+fiJVOPiCkGt/pzm61lNKXxrXR9/zbnTfjhR2CiGydiebloxT+hp3u5LZICHxh3/rxe741pogB0ADCg/CC4MKuzA02XSHgCoPJukJEaggihAAKbCcLUbNB/+RFKQG+sJi5dp62p32QAejnESEgtMJnBjPb6aeuF6WC85iZDr4okZEa2KqHpAQhQDnbRQhBNDmGkNtcO2w1BOsxZ1vYVtazeXhOv7J1wMy08cYST44ha9FO939T5NICM93GdYtlz+tljwaw7QyXG6JmAz3eQMa6InihjBoBePBFSTmfYlspwfkVm+vV7hVKh5luU7ZS9GgNPVpH1iKEkrsTSq9PwXpcbqqH2S0I1q15qV777hWQcraLnU+RSYRqJKhGjIwjhJYgxPaD6Y/vAISAtw6fW1xa4NICbyz4sO4lknWBGADxAZcZXGZgViC1QiYRMtHIWozUChGpKsgKsaDD/Ud1LsYuuTYEgvP40hGsw+clvui9rF9s/AZi/YZALJIPeGPxha2+UICQsgei+itjjVAVGKEEKImQlQeJQScXPtpeTuMheF+Nae8JPhCsx5uSYKvjoXSE4HsewTkZvzkglrEjuF7nF3Zs0E5UniIFglWWMUMPRggEHxbnNGHJd7LC5x0BsRqcRQYGggvgziOUbGFa8+qoLZbVYqoVCCH6w/xVpBAJMYxUPY8Ig5jz6lGoCyllH4UGmJ85hi0zxiYOkdSaO93DbZEt83x+5kXfGN03BNGaewlTtBFSEccjCHkRl+EInCtoz580aeflwSCQACF4dFQj7Zyh0zq10z3dUoXgac+fIEunSWrj9CPjYPoUQhGCY372RRCC0eYlVJtZF0vkEARvac0fpz13vFqDWbBZp5c29t4yN/1bSpPSnDiEjhp9ljttyTkDgIAp2rTmjpF1z1YJ2xItm1CF4Om0TlLkc4yMHaAxOoXWCbuz5FwdQFl2Sdtn6LRP42zOSknCqpllabrMTR+l2z5FvbGP+shkL5j2L9ttUCojvS8xRYese5YsncaW+aLzGwbRv7A0XUqT0mmdJE7GSOrj1OoT6KiOUjFQFVGVx20XnP53VhmQs4ayzCiyWfJsntJ08N6uCWCdIJaStuTZDHk2S0sqoqiOjhoktSY6qqN1DaUThBAIIeknbov5rBfUsIwf1HXVD0YIweNsgS1zyjLF5G3Ksost86oiHVR968+Vz6Ho6hnnHaZoY4o2aecMQkikilAqRqkYHVdghserc4NILVboZC+Q+eDwtsQ5g/eW4B3W5pRlhnemOu7KQaU6XLtYnwdsAohlnhoMnlIVkIB02KbyjmotYlDV9ECIPti+p/RcfeHTHz7l5b97RajbB2J1OAshheDBw4aHxir33UxtzXrEhgzcHZKwKZ51wSkQEh+8qIZdzyO8cwQCUip26W/ENh9ECLF3VvZnNgnQaU/Tmj1NafLzuvmFJGdNN+3OuSLvDkGUJqM0OXnWxvu1N0MudDlbkmdtD+Ddgh+KACitKU1G1p1ftii5WBS8J+3OYcsCrePB8QWzRjVW8qwNBOojE8iLbIHGuZK0M4cpuq84t8z0GcizNtYa6o1xoriOuMCnlRACpkjJ0nmcNcu2WTGPsGVBp3WWOKmT1EbRUe2CAxKCpzQ5Rd6hNNmqQ16vdaMi72KKDB0lxEmDKK6hlGa3JkYhBLwrMSanLFKsLdYV89a3Gx58b2bJkFKjo5gorqF1glJR75c1/df2leG9/UF88DhbYm2BNTnWmg3PfhtOsb23mMJiihQhJEpppIrQUYyUGqWjXmLW3+M8H0DDjdXBfigB7yzOWbyzWFvgXIl39rxmu/OqNULwWGvAml4kFkg5rDSV0kipe7vfAikkog9psF6x2Nh+geZ9v/IMEHzPcEcIDh88wfvz6Pkmg1gGTc8lHbgq4C7dGh8G3FW2w2HJ0w1cBNXnYgOGBm7Ejbc+ML86Kqx1aCmI3Tknbo0W2boQhAeyne7dNqoN9Je5F4GYBx7d6d5tox4FBusOC0EE4GvAb3e6h9ugnwDfXnhgaYz4OXAvcGane7qFeh64BzgG8IPvfWUIov+hp28BdwBP7XSPt0CPAbcDP1x6YrDg8MLzT3HFVTf2Pz4PPNJ7fxgY2WkLzlPHgAeovP3Z/sGFDvCK6fJtt35oKag/o6L4V8BlO23RBuSB3wDfAb4O/JIFWdySUbBy3rAMkKuBW4BbgT8B9rH78g4H/J4qGP4PlVe/sLDBUgBrglgGRl+NHpSbgTcDNwKHgCbbv2FkgFbP2KeBJ4AngaPAK/4xYyUIa4JYAwhUwXY/cAC4AbiSKqa8jiqubMXixDzwDPA7qlj2S+A08PJKF6wGYEMgNggn7kHYqpVfC3RYkBVu1OhNBbEBMFuqczX8j1pBfwDdkkDuWHNkOwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMS0wOVQwMzo1Nzo1NSswODowMC+mQVAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDEtMDlUMDM6NTc6NTUrMDg6MDBe+/nsAAAAQ3RFWHRzb2Z0d2FyZQAvdXNyL2xvY2FsL2ltYWdlbWFnaWNrL3NoYXJlL2RvYy9JbWFnZU1hZ2ljay03Ly9pbmRleC5odG1svbV5CgAAAGN0RVh0c3ZnOmNvbW1lbnQAIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgzkiQCwAAABh0RVh0VGh1bWI6OkRvY3VtZW50OjpQYWdlcwAxp/+7LwAAABh0RVh0VGh1bWI6OkltYWdlOjpIZWlnaHQAMTYyx8VtmgAAABd0RVh0VGh1bWI6OkltYWdlOjpXaWR0aAAxNTCRFw8oAAAAGXRFWHRUaHVtYjo6TWltZXR5cGUAaW1hZ2UvcG5nP7JWTgAAABd0RVh0VGh1bWI6Ok1UaW1lADE1NDY5Nzc0NzXswgeTAAAAEXRFWHRUaHVtYjo6U2l6ZQA4ODM0QjBK/QMAAABidEVYdFRodW1iOjpVUkkAZmlsZTovLy9ob21lL3d3d3Jvb3QvbmV3c2l0ZS93d3cuZWFzeWljb24ubmV0L2Nkbi1pbWcuZWFzeWljb24uY24vZmlsZXMvMTIwLzEyMDEwMzMucG5nBh0d2wAAAABJRU5ErkJggg=='
+            guid: "database",
+            label: "数据库",
+            imgSrc: "data:image/png;base64,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"
           },
           {
-            guid: 'firewall',
-            label: '防火墙',
-            imgSrc: 'data:image/png;base64,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'
+            guid: "firewall",
+            label: "防火墙",
+            imgSrc: "data:image/png;base64,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"
           },
           {
-            guid: 'client',
-            label: '客户端',
-            imgSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII='
+            guid: "client",
+            label: "客户端",
+            imgSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABICAYAAAB7qJLVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAACcQAAAnEAGUaVEZAAAAB3RJTUUH4wUGFSkCASqMfAAABb9JREFUeNrtnE1vG8cZgJ93hkty9WHISR2kimC1SOAgaIEg6CmpiwJFCwdtgBY+5hi76K2HXPMDeizQS5BrDjkZdmA4SNxDERT2oT0Z6ZcbBEVc1zHhKpJrkxSXOztvDxQZ0qYUrmUuV+I8F4GLmf14NPvOO7O7A4FCka8rcObMGQBUddbnWipUlWazSZZlABhjADh37tye9XYV3hfdx3svQXoPEcF7z82bN02SJKyurrKxsZHFcYy1FlXl0qVL4+uO2zgkW4DvA68Ca0xwR8wR4pyLWq2W3d7e9qr6b+CDer3+x263q8YYLl68+FClyrg9qSrWWrz3rwO/BY7N+urKSKVSYXl5GYBWqwXwRqfTefPWrVvvrq+vj61jxm3cuWWeAd4iyN4TYwxLS0tUKhWAJ1X1rbW1teP92P5Q+T329TzwrVlf0EHAWksURf2f68B3duvv9hK+yC4hJ/AwIoPurSIiy7uVyy1UjOnfPnOPcw71PledXOYqUZWTr77G8WdPzH1enqry2afXufaHj3Dd7sT1JhbuvefYN5/hez/4EfFiHebbN4kH+8QxbvztE+7c+NfE9XK18Kga9dLFLE+tw4nPPGIMNsoXXk2u0sDcN+0RlLyR9RGEB/ZDEF4wQXjBBOEFE4QXTDFDxoMyqVtAAjZ14VnqyLpp7vSpaETAVqPceXVeprp3n3madzZJO5MPfWdJVK+y/PQ3MHZ6kXaqMVyzjCx10zzEYyVLHZpNdxgdOs2CCcILJggvmCC8YILwgplqWijWYqsRekDSQluNEGuneoypCjfWsPzUEwcmNbRRZao5OBQw0jQVi4mm22oeG4dhaF/UhRwUQqdZMKV9wWS/E4xlvalKKVzxbGZ3SHQbyaleUWoSc9Q+hZTwBi6dcAFupp9xZft9Et/J39QVaibmZPxzjkcnStfSSyccoOE+p+n/h8E+Umxo+rs03Occj07M+lIeonz3HL2wkDeUDCMIWrq23aOUwmF/nV45VfcoZUhZMMsIgiffm6l9BGHBLD9S3WlTOuEKPFd9EacpLX8PyRlZVGHRHOG56oulbOmlEw5Ql0Veqv9wX/soo2woqXAor7D9UtpO87AShBdMEF4wQXjBBOEFE4QXTBBeMEF4weQe+OgDf+cV5z0KuaceJhYuwHanw3+bLeqLQulf+J4iSu9L5Cx1pEmSq+7kwo3hy9u3+PPvP2Dthe8iInPrXKS3psx//vFXthpfIGbyyLzrAjWqas0DO/JZxt+vfsw//3T14HxGMi0UMpfmrjZWeLvdxntfXVhYMHbMq1+PcqBAj7HCm80mwCbQXVpaiiVvzzBnqCr+q2U8uqr65W5lK3vs5JNWq3U9y7KX4jgmSN+dbrdLstN5ish1EfnLbr5Gtg6vUdjpdLh79+4pVf2diJTv8XeJGFo75lNjzK+zLLtcqVRwzrGwsMD58+cHZce2cBFZieP4J3Ecv5ym6e00Tb+tqtEEx55nUufc7Xa7/VNr7ZPAR8aYzXa7PVJo0MLPnj3b/089DbwN/AwIkidERMiyjK2tLZIkyUTkQxH5lap+UavVuHDhAjB+aP8G8AuC7FyoKuar9cCsqr6mqr9M05Th9NoMV6An+ZVZn/wh4uV6vV5LhkajgxieJAmqWqnVakshI3k8qGrdOTcSRQY/Njc3aTQadDqdWZ/noWYkpIgI9+/fJ8k5IRNgZ25JcW7v75kGIcVai7XWO+fSra0t4jgOC0LmJE1TukNrGIpIaq31w2s8DoxWq1UajUaysrJyzXv/453VggP749rGxkayuro62DASUlZWVhCRd4Crsz7TQ8AVEXnn6NGjIxtH0pFTp071w8i6qr4OnARqhAc8kyJAAlwxxrynqjecc1y+fHlQYCRI7yzSjjHmRpqmvzly5EhVVcNzzxyIiL937163Wq3ivefB6e2xCffp06cBhqccAznojyyHJ60CM+L/5UoejpR/JKUAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDUtMDZUMjE6NDE6MDIrMDg6MDCIwcUDAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTA1LTA2VDIxOjQxOjAyKzA4OjAw+Zx9vwAAAEN0RVh0c29mdHdhcmUAL3Vzci9sb2NhbC9pbWFnZW1hZ2ljay9zaGFyZS9kb2MvSW1hZ2VNYWdpY2stNy8vaW5kZXguaHRtbL21eQoAAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADYxMo3L7dgAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANzgzuT1cbQAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNTU3MTUwMDYyDS3pMwAAABF0RVh0VGh1bWI6OlNpemUAOTg0MUJ1EjZzAAAAYnRFWHRUaHVtYjo6VVJJAGZpbGU6Ly8vaG9tZS93d3dyb290L25ld3NpdGUvd3d3LmVhc3lpY29uLm5ldC9jZG4taW1nLmVhc3lpY29uLmNuL2ZpbGVzLzEyMy8xMjMzMzgyLnBuZ6YwiUMAAAAASUVORK5CYII="
           }
-        ]
+        ];
       }
     },
     nodeAppConfig: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       }
     },
     edgeAppConfig: {
       type: Object,
       default: () => {
-        return {}
+        return {};
       }
     }
   },
   data() {
     return {
-      graphBg: 'default-style',
+      graphBg: "default-style",
       toolbarShow: true,
       rightMenuShow: false,
       graphData: {
@@ -185,32 +185,33 @@ export default {
       loading: false,
       clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
       clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
+      //todo 设置线段的选择
       edgeShapeList: [
-        { guid: 'cc-line', label: '直线', class: 'iconfont icon-flow-line' },
-        { guid: 'cc-brokenline', label: '折线', class: 'iconfont icon-flow-broken' },
-        { guid: 'cc-polyline', label: '多段线', class: 'iconfont icon-flow-broken' },
-        { guid: 'cc-cubic', label: '曲线', class: 'iconfont icon-flow-curve' }
+        { guid: "top-line", label: "直线", class: "iconfont icon-flow-line" },
+        { guid: "top-brokenline", label: "折线", class: "iconfont icon-flow-broken" },
+        { guid: "top-polyline", label: "多段线", class: "iconfont icon-flow-broken" },
+        { guid: "top-cubic", label: "曲线", class: "iconfont icon-flow-curve" }
       ],
       graph: null,
       grid: null,
       minimap: null,
       //todo 修改进去时页面状态
-      graphMode: 'edit',
-
+      graphMode: "edit",
+      //todo 默认使用连线
       currentEdgeShape: {
-        guid: 'cc-line',
-        label: '直线'
+        guid: "top-line",
+        label: "直线"
       },
-      currentFocus: 'canvas',
+      currentFocus: "canvas",
       selectedNode: null,
       selectedNodeParams: {
-        label: '',
+        label: "",
         appConfig: this.nodeAppConfig
       },
       selectedNodeParamsTimeout: null,
       selectedEdge: null,
       selectedEdgeParams: {
-        label: '',
+        label: "",
         appConfig: this.edgeAppConfig
       },
       selectedEdgeParamsTimeout: null,
@@ -221,692 +222,763 @@ export default {
       undoCount: 0,
       onresizeTimeout: null,
       pasteCount: 0
-    }
+    };
   },
   computed: {
     disableUndo: function() {
-      return this.historyIndex === 0 || this.historyIndex - (this.undoCount + 1) < 0
+      return this.historyIndex === 0 || this.historyIndex - (this.undoCount + 1) < 0;
     },
     disableRedo: function() {
-      return this.historyIndex === 0 || this.historyIndex === 10 || this.undoCount < 1
+      return this.historyIndex === 0 || this.historyIndex === 10 || this.undoCount < 1;
     },
     disableCopy: function() {
-      return this.selectedNodes.length === 0
+      return this.selectedNodes.length === 0;
     },
     disablePaste: function() {
-      return this.nodesInClipboard.length === 0
+      return this.nodesInClipboard.length === 0;
     },
     disableDelete: function() {
-      return this.selectedNodes.length === 0 && this.selectedEdges.length === 0
+      return this.selectedNodes.length === 0 && this.selectedEdges.length === 0;
     },
     selectedNodes: function() {
-      let self = this
-      let graph = self.graph
+      let self = this;
+      let graph = self.graph;
       if (graph && !graph.destroyed) {
-        return graph.findAllByState('node', 'selected')
+        return graph.findAllByState("node", "selected");
       } else {
-        return []
+        return [];
       }
     },
     selectedEdges: function() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        return graph.findAllByState('edge', 'selected')
+        return graph.findAllByState("edge", "selected");
       } else {
-        return []
+        return [];
       }
     }
   },
   watch: {
     layoutType() {
-      this.initTopo(this.graphData)
+      this.initTopo(this.graphData);
     },
     selectedNodeParams: {
       deep: true,
       handler: function(newVal, oldVal) {
-        let selectedNodeModel = this.selectedNode.getModel()
+        let selectedNodeModel = this.selectedNode.getModel();
         if (utils.isObjectValueEqual(selectedNodeModel.appConfig, newVal.appConfig) && selectedNodeModel.label === newVal.label) {
-          return
+          return;
         }
         // 实时监听input值的变化，停止输入300ms后执行update，而不是时时update
-        clearTimeout(this.selectedNodeParamsTimeout)
+        clearTimeout(this.selectedNodeParamsTimeout);
         this.selectedNodeParamsTimeout = setTimeout(() => {
-          selectedNodeModel.label = newVal.label
-          selectedNodeModel.appConfig = newVal.appConfig
-          this.selectedNode.update(selectedNodeModel)
-        }, 300)
+          selectedNodeModel.label = newVal.label;
+          selectedNodeModel.appConfig = newVal.appConfig;
+          this.selectedNode.update(selectedNodeModel);
+        }, 300);
       }
     },
     selectedEdgeParams: {
       deep: true,
       handler: function(newVal, oldVal) {
-        let selectedEdgeModel = this.selectedEdge.getModel()
+        let selectedEdgeModel = this.selectedEdge.getModel();
         if (utils.isObjectValueEqual(selectedEdgeModel.appConfig, newVal.appConfig) && selectedEdgeModel.label === newVal.label) {
-          return
+          return;
         }
         // 实时监听input值的变化，停止输入300ms后执行update，而不是时时update
-        clearTimeout(this.selectedEdgeParamsTimeout)
+        clearTimeout(this.selectedEdgeParamsTimeout);
         this.selectedEdgeParamsTimeout = setTimeout(() => {
-          let selectedEdgeModel = this.selectedEdge.getModel()
-          selectedEdgeModel.label = newVal.label
-          selectedEdgeModel.appConfig = newVal.appConfig
-          this.selectedEdge.update(selectedEdgeModel)
-        }, 300)
+          let selectedEdgeModel = this.selectedEdge.getModel();
+          selectedEdgeModel.label = newVal.label;
+          selectedEdgeModel.appConfig = newVal.appConfig;
+          this.selectedEdge.update(selectedEdgeModel);
+        }, 300);
       }
     }
   },
   created() {
   },
   mounted() {
-    ccNode.obj.ccImage.sendThis(this)
-    ccBehavior.obj.clickEventEdit.sendThis(this)
-    ccBehavior.obj.dragAddEdge.sendThis(this)
-    ccBehavior.obj.dragEventEdit.sendThis(this)
-    ccBehavior.obj.keyupEventEdit.sendThis(this)
-    this.clearHistoryData()
+    Node.obj.Image.sendThis(this);
+    Behavior.obj.clickEventEdit.sendThis(this);
+    Behavior.obj.dragAddEdge.sendThis(this);
+    Behavior.obj.dragEventEdit.sendThis(this);
+    Behavior.obj.keyupEventEdit.sendThis(this);
+    Behavior.obj.hoverEventEdit.sendThis(this);
+    this.clearHistoryData();
     // this.initTopo(this.graphData)
     // this.autoZoomHandler()
     window.onresize = () => {
       return (() => {
-        this.onresizeHandler()
-      })()
-    }
+        this.onresizeHandler();
+      })();
+    };
   },
   beforeRouteUpdate(to, from, next) {
-    this.clearHistoryData()
-    next()
+    this.clearHistoryData();
+    next();
   },
   beforeRouteLeave(to, from, next) {
-    this.clearHistoryData()
-    next()
+    this.clearHistoryData();
+    next();
   },
   beforeDestroy() {
-    this.clearHistoryData()
+    this.clearHistoryData();
   },
   methods: {
     openFullScreenLoading() {
-      this.loading = true
+      this.loading = true;
     },
     closeFullScreenLoading() {
-      let self = this
+      let self = this;
       self.$nextTick(() => {
-        self.loading = false
-      })
+        self.loading = false;
+      });
     },
     dragstartHandler(event, nodeType) {
-      event.dataTransfer.setData('text', JSON.stringify(nodeType))
+      event.dataTransfer.setData("text", JSON.stringify(nodeType));
     },
     dragenterHandler(event) {
-      event.preventDefault()
+      event.preventDefault();
     },
     dragoverHandler(event) {
-      event.preventDefault()
+      event.preventDefault();
     },
     dropHandler(event) {
-      let nodeTypeStr = event.dataTransfer.getData('text')
-      let nodeType = JSON.parse(nodeTypeStr)
-      let clientX = event.clientX
-      let clientY = event.clientY
-      this.addNode(clientX, clientY, nodeType)
+      let nodeTypeStr = event.dataTransfer.getData("text");
+      let nodeType = JSON.parse(nodeTypeStr);
+      let clientX = event.clientX;
+      let clientY = event.clientY;
+      this.addNode(clientX, clientY, nodeType);
     },
     dragendHandler() {
     },
     initTopo(graphData) {
-      let self = this
+      let self = this;
       if (self.graph) {
-        self.graph.destroy()
+        self.graph.destroy();
       }
       // 【预览模式】 - 封装的节点展开/收缩交互
-      G6.registerBehavior('my-collapse-expand', {
+      G6.registerBehavior("my-collapse-expand", {
         getEvents() {
           return {
-            'node:click': 'onNodeClick'
-          }
+            "node:click": "onNodeClick"
+          };
         },
         onNodeClick(event) {
-          let clickNode = event.item
-          this.sourceNodeIds = [clickNode._cfg.id]
-          if (clickNode.hasState('collapse')) {
+          let clickNode = event.item;
+          this.sourceNodeIds = [clickNode._cfg.id];
+          if (clickNode.hasState("collapse")) {
             // 节点已收缩, 需要展开
-            let visible = true
-            this.collapseOrExpand(clickNode, visible)
-            clickNode.clearStates('collapse')
+            let visible = true;
+            this.collapseOrExpand(clickNode, visible);
+            clickNode.clearStates("collapse");
           } else {
             // 节点未收缩, 需要收缩
-            let visible = false
-            this.collapseOrExpand(clickNode, visible)
-            clickNode.setState('collapse', true)
+            let visible = false;
+            this.collapseOrExpand(clickNode, visible);
+            clickNode.setState("collapse", true);
           }
-          self.graph.paint()
+          self.graph.paint();
         },
         collapseOrExpand(sourceNode, visible) {
-          let outEdges = sourceNode.getOutEdges()
+          let outEdges = sourceNode.getOutEdges();
           for (let i = 0; i < outEdges.length; i++) {
-            let targetNode = outEdges[i].getTarget()
-            let targetNodeId = targetNode._cfg.id
+            let targetNode = outEdges[i].getTarget();
+            let targetNodeId = targetNode._cfg.id;
             if (!this.sourceNodeIds.includes(targetNodeId)) {
-              targetNode.changeVisibility(visible)
+              targetNode.changeVisibility(visible);
               // 如果一个节点隐藏/显示了，那么它关联的所有边都隐藏
-              let relationEdges = targetNode.getEdges()
+              let relationEdges = targetNode.getEdges();
               for (let i = 0; i < relationEdges.length; i++) {
-                relationEdges[i].changeVisibility(visible)
+                relationEdges[i].changeVisibility(visible);
               }
-              this.sourceNodeIds.push(targetNodeId)
+              this.sourceNodeIds.push(targetNodeId);
               // 递归, 该节点的下属节点继续隐藏
               if (targetNode.getOutEdges().length > 0) {
-                this.collapseOrExpand(targetNode, visible)
+                this.collapseOrExpand(targetNode, visible);
               }
             }
           }
         }
-      })
+      });
 
       // 图画布的定义
-      let graphContainer = self.$refs.graphContainer
-      let graphWidth = graphContainer.clientWidth
-      let graphHeight = graphContainer.clientHeight
+      let graphContainer = self.$refs.graphContainer;
+      let graphWidth = graphContainer.clientWidth;
+      let graphHeight = graphContainer.clientHeight;
       // Plugins
-      let plugins = []
+      let plugins = [];
       let modes = {
         default: [
-          'drag-canvas',
-          'drag-node',
+          "drag-canvas",
+          "drag-node",
           {
-            type: 'click-select',
-            trigger: 'ctrl',
+            type: "click-select",
+            trigger: "ctrl",
             multiple: true
           }
         ],
         preview: [
-          'drag-canvas',
-          'zoom-canvas',
+          "drag-canvas",
+          "zoom-canvas",
           // "drag-node",
           // 'click-select',
           {
-            type: 'tooltip',
+            type: "tooltip",
             formatText(model) {
-              return model.description || model.label
+              return model.description || model.label;
             }
           },
           {
-            type: 'edge-tooltip',
+            type: "edge-tooltip",
             formatText(model) {
-              return model.description || 'source:' + self.graph.findById(model.source).getModel().label + ' target:' + self.graph.findById(model.target).getModel().label
+              return model.description || "source:" + self.graph.findById(model.source).getModel().label + " target:" + self.graph.findById(model.target).getModel().label;
             }
           }
           // 自定义Behavior
           // 'my-collapse-expand'
         ],
         edit: [
-          'drag-node',
-          'drag-canvas',
+          "drag-node",
+          "drag-canvas",
           {
-            type: 'click-select',
+            type: "click-select",
             // trigger: 'ctrl', // TODO... 疑似官方bug，ctrl无效
             multiple: true
           },
           {
-            type: 'brush-select',
-            trigger: 'ctrl',
+            type: "brush-select",
+            trigger: "ctrl",
             includeEdges: false
           },
-          'right-click-node',
-          'right-click-edge',
+          "right-click-node",
+          "right-click-edge",
           // Group Behavior
           // 'drag-group',
           // 'collapse-expand-group',
           // 'drag-node-with-group',
           // 自定义Behavior
-          'hover-event-edit',
-          'click-event-edit',
-          'keyup-event',
-          'drag-event-edit',
-          'keyup-event-edit',
-          'drag-add-edge'
+          "hover-event-edit",
+          "click-event-edit",
+          "keyup-event",
+          "drag-event-edit",
+          "keyup-event-edit",
+          "drag-add-edge"
         ],
         addEdge: [
-          'drag-canvas',
+          "drag-canvas",
           // 自定义Behavior
-          'click-add-edge'
+          "click-add-edge"
         ],
         multiSelect: [
           {
-            type: 'brush-select',
-            trigger: 'drag',
+            type: "brush-select",
+            trigger: "drag",
             onSelect() {
-              this.graph.setMode('edit')
-              window.document.getElementById('multi-select').style.backgroundColor = 'transparent'
+              this.graph.setMode("edit");
+              window.document.getElementById("multi-select").style.backgroundColor = "transparent";
             }
           }
         ]
-      }
-      if (self.graphMode === 'edit') {
-        let navigator = self.$refs.navigator
-        let minimapWidth = navigator ? navigator.clientWidth : 160
-        let minimapHeight = navigator ? navigator.clientHeight : 120
-        minimapWidth = minimapWidth > 160 ? minimapWidth : 120
-        minimapHeight = minimapHeight > 160 ? minimapHeight : 120
+      };
+      if (self.graphMode === "edit") {
+        let navigator = self.$refs.navigator;
+        let minimapWidth = navigator ? navigator.clientWidth : 160;
+        let minimapHeight = navigator ? navigator.clientHeight : 120;
+        minimapWidth = minimapWidth > 160 ? minimapWidth : 120;
+        minimapHeight = minimapHeight > 160 ? minimapHeight : 120;
         let minimap = new G6.Minimap({
           size: [minimapWidth, minimapHeight],
-          container: 'g6-minimap',
-          type: 'default'
-        })
-        plugins.push(minimap)
+          container: "g6-minimap",
+          type: "default"
+        });
+        plugins.push(minimap);
       }
       /* 生成图 */
-      if (self.layoutType === 'force') {
+      if (self.layoutType === "force") {
         /* 力导布局: force-layout */
         self.graph = initGraph.forceLayoutGraph(G6, {
           plugins: plugins,
-          container: 'mount-topology',
+          container: "mount-topology",
           width: graphWidth,
           height: graphHeight,
           modes: modes,
           graphData: graphData
-        })
+        });
       } else {
         /* 默认布局: 自由布局 */
         self.graph = initGraph.commonGraph(G6, {
           plugins: plugins,
-          container: 'mount-topology',
+          container: "mount-topology",
           width: graphWidth,
           height: graphHeight,
           modes: modes,
           graphData: graphData
-        })
+        });
       }
-      self.graph.$C = config
-      self.graph.setMode(self.graphMode)
-      self.graph.refresh()
-      self.autoZoomHandler()
-      if (this.graphMode === 'preview') {
-        self.$refs.toolbarPreview.changeThemeActiveIndex(1)
-      } else if (this.graphMode === 'edit') {
+      self.graph.$C = config;
+      self.graph.setMode(self.graphMode);
+      self.graph.refresh();
+      self.autoZoomHandler();
+      if (this.graphMode === "preview") {
+        self.$refs.toolbarPreview.changeThemeActiveIndex(1);
+      } else if (this.graphMode === "edit") {
         // 由于 G6 目前不支持监听 Group 的点击事件，故自行实现
-        self.graph.on('click', evt => {
+        self.graph.on("click", evt => {
           if (evt.target.cfg.groupId) {
-            self.currentFocus = 'group'
-            self.selectedGroupId = evt.target.cfg.groupId
+            self.currentFocus = "group";
+            self.selectedGroupId = evt.target.cfg.groupId;
           }
-        })
-        self.graph.on('contextmenu', evt => {
+        });
+        self.graph.on("contextmenu", evt => {
           if (evt.target.cfg.groupId) {
-            self.currentFocus = 'group'
-            self.selectedGroupId = evt.target.cfg.groupId
-            self.rightMenuShow = true
+            self.currentFocus = "group";
+            self.selectedGroupId = evt.target.cfg.groupId;
+            self.rightMenuShow = true;
           }
-        })
+        });
       }
     },
     /* Deprecated method: 早期用d3-force手写的自动布局 */
     autoLayoutHandler() {
-      let self = this
+      let self = this;
       // 数据获取
-      let graphData = self.getGraphData()
+      let graphData = self.getGraphData();
       if (self.graph && !self.graph.destroyed) {
-        self.graph.destroy()
+        self.graph.destroy();
       }
-      let graphContainer = self.$refs.graphContainer
-      let graphWidth = graphContainer.clientWidth
-      let graphHeight = graphContainer.clientHeight
-      self.openFullScreenLoading()
+      let graphContainer = self.$refs.graphContainer;
+      let graphWidth = graphContainer.clientWidth;
+      let graphHeight = graphContainer.clientHeight;
+      self.openFullScreenLoading();
       let promise = new Promise((resolve) => {
         initGraph.forceLayoutGraph(resolve, G6, {
-          container: 'mount-topology',
+          container: "mount-topology",
           width: graphWidth,
           height: graphHeight,
           graphData: graphData
-        })
-      })
+        });
+      });
       promise.then(graph => {
-        self.graph = graph
-        self.closeFullScreenLoading()
-        self.initTopo(self.getGraphData())
-      })
+        self.graph = graph;
+        self.closeFullScreenLoading();
+        self.initTopo(self.getGraphData());
+      });
     },
     /* 自动布局 */
     forceLayoutHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        this.openFullScreenLoading()
+        this.openFullScreenLoading();
         graph.updateLayout({
-          type: 'force',
+          type: "force",
           center: [200, 200],
           preventOverlap: true,
           linkDistance: 150,
           nodeStrength: -200,
           onLayoutEnd: () => {
-            this.closeFullScreenLoading()
+            this.closeFullScreenLoading();
           }
-        })
+        });
       }
     },
     /* 环形布局 - 相关逻辑未完成 */
     circularLayoutHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
         graph.updateLayout({
-          type: 'circular',
+          type: "circular",
           center: [200, 200],
           radius: 200,
           clockwise: false,
-          ordering: 'topology',
+          ordering: "topology",
           angleRatio: 1
-        })
+        });
       }
     },
     /* 辐射状布局 - 相关逻辑未完成，且拓扑图不需要 */
     radialLayoutHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
         graph.updateLayout({
-          type: 'circular',
+          type: "circular",
           center: [200, 200],
           linkDistance: 50,
           maxIteration: 1000,
           unitRadius: 100,
           preventOverlap: true
-        })
+        });
       }
     },
     changeEdgeShapeHandler(edgeShape) {
-      this.currentEdgeShape = edgeShape
-      this.graph.$C.edge.type = this.currentEdgeShape['guid']
+      this.graph.$C.edge.type = edgeShape;
+
+      // this.currentEdgeShape = edgeShape;
+      //
+      // this.graph.$C.edge.type = this.currentEdgeShape["guid"];
     },
+
     undoHandler() {
       if (this.historyIndex > 0 && this.historyIndex - (this.undoCount + 1) >= 0) {
-        this.undoCount += 1
-        let key = `graph_history_${this.historyIndex - this.undoCount}`
-        let historyData = this.getHistoryData(key)
-        this.changeGraphData(JSON.parse(historyData))
-        this.refreshGraph()
+        this.undoCount += 1;
+        let key = `graph_history_${this.historyIndex - this.undoCount}`;
+        let historyData = this.getHistoryData(key);
+        this.changeGraphData(JSON.parse(historyData));
+        this.refreshGraph();
       }
     },
     redoHandler() {
       if (this.undoCount > 0) {
-        let key = `graph_history_${this.historyIndex - this.undoCount + 1}`
-        let historyData = this.getHistoryData(key)
-        this.changeGraphData(JSON.parse(historyData))
-        this.undoCount -= 1
-        this.refreshGraph()
+        let key = `graph_history_${this.historyIndex - this.undoCount + 1}`;
+        let historyData = this.getHistoryData(key);
+        this.changeGraphData(JSON.parse(historyData));
+        this.undoCount -= 1;
+        this.refreshGraph();
       }
     },
     copyHandler() {
-      this.nodesInClipboard = this.selectedNodes
-      this.pasteCount = 0
+      this.nodesInClipboard = this.selectedNodes;
+      this.pasteCount = 0;
     },
+
     pasteHandler() {
-      this.pasteCount += 1 // 连续paste次数统计
-      let graph = this.graph
-      let nodesInClipboard = this.nodesInClipboard
+      this.pasteCount += 1; // 连续paste次数统计
+      let graph = this.graph;
+      let nodesInClipboard = this.nodesInClipboard;
       if (graph && !graph.destroyed && nodesInClipboard.length > 0) {
 
         // ************** 记录【粘贴】前的数据状态 start **************
-        let historyData = JSON.stringify(graph.save())
-        let key = `graph_history_${this.historyIndex}`
-        this.addHistoryData(key, historyData)
+        let historyData = JSON.stringify(graph.save());
+        let key = `graph_history_${this.historyIndex}`;
+        this.addHistoryData(key, historyData);
         // ************** 记录【粘贴】前的数据状态 end **************
 
         // 开始粘贴
         for (let i = 0; i < nodesInClipboard.length; i++) {
-          let node = nodesInClipboard[i]
-          let model = node.getModel()
+          let node = nodesInClipboard[i];
+          let model = node.getModel();
           let newModel = {
             ...model,
             id: utils.generateUUID(),
             x: model.x + 10 * this.pasteCount,
             y: model.y + 10 * this.pasteCount
-          }
-          graph.addItem('node', newModel)
+          };
+          graph.addItem("node", newModel);
         }
 
         // ************** 记录【粘贴】后的数据状态 start **************
         // 如果当前点过【撤销】了，【粘贴】后将取消【重做】功能
         // 重置undoCount，【粘贴】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
         if (this.undoCount > 0) {
-          this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          this.historyIndex = this.historyIndex - this.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
           for (let i = 1; i <= this.undoCount; i++) {
-            let key = `graph_history_${this.historyIndex + i}`
-            this.removeHistoryData(key)
+            let key = `graph_history_${this.historyIndex + i}`;
+            this.removeHistoryData(key);
           }
-          this.undoCount = 0
+          this.undoCount = 0;
         }
         // 存储【粘贴】后的数据状态
-        this.historyIndex += 1
-        key = `graph_history_${this.historyIndex}`
-        let currentData = JSON.stringify(graph.save())
-        this.addHistoryData(key, currentData)
+        this.historyIndex += 1;
+        key = `graph_history_${this.historyIndex}`;
+        let currentData = JSON.stringify(graph.save());
+        this.addHistoryData(key, currentData);
         // ************** 记录【粘贴】后的数据状态 end **************
       }
     },
     deleteHandler() {
-      let graph = this.graph
-      let selectedNodes = graph.findAllByState('node', 'selected')
-      let selectedEdges = graph.findAllByState('edge', 'selected')
+      let graph = this.graph;
+      let selectedNodes = graph.findAllByState("node", "selected");
+      let selectedEdges = graph.findAllByState("edge", "selected");
       if (this.selectedNodes.length > 0 || this.selectedEdges.length > 0) {
 
         // ************** 记录【删除】前的数据状态 start **************
-        let historyData = JSON.stringify(graph.save())
-        let key = `graph_history_${this.historyIndex}`
-        this.addHistoryData(key, historyData)
+        let historyData = JSON.stringify(graph.save());
+        let key = `graph_history_${this.historyIndex}`;
+        this.addHistoryData(key, historyData);
         // ************** 记录【删除】前的数据状态 end **************
 
         // 开始删除
         for (let i = 0; i < selectedNodes.length; i++) {
-          graph.removeItem(selectedNodes[i])
+          graph.removeItem(selectedNodes[i]);
         }
         for (let i = 0; i < selectedEdges.length; i++) {
-          graph.removeItem(selectedEdges[i])
+          graph.removeItem(selectedEdges[i]);
         }
 
         // ************** 记录【删除】后的数据状态 start **************
         // 如果当前点过【撤销】了，拖拽节点后将取消【重做】功能
         // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
         if (this.undoCount > 0) {
-          this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          this.historyIndex = this.historyIndex - this.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
           for (let i = 1; i <= this.undoCount; i++) {
-            let key = `graph_history_${this.historyIndex + i}`
-            this.removeHistoryData(key)
+            let key = `graph_history_${this.historyIndex + i}`;
+            this.removeHistoryData(key);
           }
-          this.undoCount = 0
+          this.undoCount = 0;
         }
         // 记录【删除】后的数据状态
-        this.historyIndex += 1
-        key = `graph_history_${this.historyIndex}`
-        let currentData = JSON.stringify(graph.save())
-        this.addHistoryData(key, currentData)
+        this.historyIndex += 1;
+        key = `graph_history_${this.historyIndex}`;
+        let currentData = JSON.stringify(graph.save());
+        this.addHistoryData(key, currentData);
         // ************** 记录【删除】后的数据状态 end **************
       }
     },
     zoomInHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        graph.zoom(1.2)
+        graph.zoom(1.2);
       }
     },
     zoomOutHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        graph.zoom(0.8)
+        graph.zoom(0.8);
       }
     },
     autoZoomHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed && graph.save().nodes.length > 0) {
-        graph.fitView(10)
+        graph.fitView(10);
         // this.zoomValue = graph.getZoom();  // TODO...怎么处理changeZoomHandler的二次触发问题
       }
     },
     resetZoomHandler() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        graph.zoomTo(1)
+        graph.zoomTo(1);
       }
     },
     multiSelectHandler(event) {
-      event.target.style.backgroundColor = '#EEEEEE'
-      this.graph.setMode('multiSelect')
+      event.target.style.backgroundColor = "#EEEEEE";
+      this.graph.setMode("multiSelect");
     },
     enableGridHandler(enableGrid) {
       if (enableGrid) {
-        this.grid = new G6.Grid()
-        this.graph.addPlugin(this.grid)
+        this.grid = new G6.Grid();
+        this.graph.addPlugin(this.grid);
       } else {
-        this.graph.removePlugin(this.grid)
+        this.graph.removePlugin(this.grid);
       }
     },
     enableMinimapHandler(enableMinimap) {
       if (enableMinimap) {
         this.minimap = new G6.Minimap({
           size: [200, 120],
-          type: 'default',
-          className: 'g6-minimap-preview'
-        })
-        this.graph.addPlugin(this.minimap)
+          type: "default",
+          className: "g6-minimap-preview"
+        });
+        this.graph.addPlugin(this.minimap);
       } else {
-        this.graph.removePlugin(this.minimap)
+        this.graph.removePlugin(this.minimap);
       }
     },
     // 右键菜单
     alignHandler(coordinate) {
-      let graph = this.graph
+      let graph = this.graph;
       if (this.selectedNodes.length > 1 && this.selectedNode) {
 
         // ************** 记录【节点对齐】前的数据状态 start **************
-        let historyData = JSON.stringify(graph.save())
-        let key = `graph_history_${this.historyIndex}`
-        this.addHistoryData(key, historyData)
+        let historyData = JSON.stringify(graph.save());
+        let key = `graph_history_${this.historyIndex}`;
+        this.addHistoryData(key, historyData);
         // ************** 记录【节点对齐】前的数据状态 end **************
 
         // 开始节点对齐
-        let cfg = coordinate === 'horizontal' ? { y: this.selectedNode.getModel().y } : { x: this.selectedNode.getModel().x }
+        let cfg = coordinate === "horizontal" ? { y: this.selectedNode.getModel().y } : { x: this.selectedNode.getModel().x };
         for (let i = 0, len = this.selectedNodes.length; i < len; i++) {
-          this.selectedNodes[i].updatePosition(cfg)
+          this.selectedNodes[i].updatePosition(cfg);
         }
-        graph.refresh()
+        graph.refresh();
 
         // ************** 记录【节点对齐】后的数据状态 start **************
         // 如果当前点过【撤销】了，节点对齐后将取消【重做】功能
         // 重置undoCount，【节点对齐】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
         if (this.undoCount > 0) {
-          this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          this.historyIndex = this.historyIndex - this.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
           for (let i = 1; i <= this.undoCount; i++) {
-            let key = `graph_history_${this.historyIndex + i}`
-            this.removeHistoryData(key)
+            let key = `graph_history_${this.historyIndex + i}`;
+            this.removeHistoryData(key);
           }
-          this.undoCount = 0
+          this.undoCount = 0;
         }
         // 记录【节点对齐】后的数据状态
-        this.historyIndex += 1
-        key = `graph_history_${this.historyIndex}`
-        let currentData = JSON.stringify(graph.save())
-        this.addHistoryData(key, currentData)
+        this.historyIndex += 1;
+        key = `graph_history_${this.historyIndex}`;
+        let currentData = JSON.stringify(graph.save());
+        this.addHistoryData(key, currentData);
         // ************** 记录【节点对齐】后的数据状态 end **************
       }
-      this.rightMenuShow = false
+      this.rightMenuShow = false;
     },
     addGroup() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed && this.selectedNodes.length > 1 && this.selectedNode) {
 
         // ************** 记录【添加分组】前的数据状态 start **************
-        let historyData = JSON.stringify(graph.save())
-        let key = `graph_history_${this.historyIndex}`
-        this.addHistoryData(key, historyData)
+        let historyData = JSON.stringify(graph.save());
+        let key = `graph_history_${this.historyIndex}`;
+        this.addHistoryData(key, historyData);
         // ************** 记录【添加分组】前的数据状态 end **************
 
-        let nodeIds = this.selectedNodes.map(item => { return item._cfg.id })
+        let nodeIds = this.selectedNodes.map(item => {
+          return item._cfg.id;
+        });
         // 创建分组
-        let group = graph.addItem('group', {
+        let group = graph.addItem("group", {
           groupId: utils.generateUUID(),
           nodes: nodeIds,
-          type: 'circle ',
+          type: "circle ",
           zIndex: 2,
           title: {
-            text: '分组',
-            stroke: '#87e8de',
-            fill: '#87e8de',
+            text: "分组",
+            stroke: "#87e8de",
+            fill: "#87e8de",
             offsetX: 2,
             offsetY: 2
           }
-        })
+        });
 
         // ************** 记录【添加分组】后的数据状态 start **************
         if (group) {
           // 如果当前点过【撤销】了，【添加分组】后将取消【重做】功能
           // 重置undoCount，【添加分组】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
           if (this.undoCount > 0) {
-            this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+            this.historyIndex = this.historyIndex - this.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
             for (let i = 1; i <= this.undoCount; i++) {
-              let key = `graph_history_${this.historyIndex + i}`
-              this.removeHistoryData(key)
+              let key = `graph_history_${this.historyIndex + i}`;
+              this.removeHistoryData(key);
             }
-            this.undoCount = 0
+            this.undoCount = 0;
           }
           // 记录【添加分组】后的数据状态
-          this.historyIndex += 1
-          let key = `graph_history_${this.historyIndex}`
-          let currentData = JSON.stringify(graph.save())
-          this.addHistoryData(key, currentData)
+          this.historyIndex += 1;
+          let key = `graph_history_${this.historyIndex}`;
+          let currentData = JSON.stringify(graph.save());
+          this.addHistoryData(key, currentData);
         }
         // ************** 记录【添加分组】后的数据状态 end **************
-        this.rightMenuShow = false
+        this.rightMenuShow = false;
       }
     },
     removeGroup() {
-      let graph = this.graph
+      let graph = this.graph;
       if (this.selectedGroupId) {
 
         // ************** 记录【删除】前的数据状态 start **************
-        let historyData = JSON.stringify(graph.save())
-        let key = `graph_history_${this.historyIndex}`
-        this.addHistoryData(key, historyData)
+        let historyData = JSON.stringify(graph.save());
+        let key = `graph_history_${this.historyIndex}`;
+        this.addHistoryData(key, historyData);
         // ************** 记录【删除】前的数据状态 end **************
 
         // 开始删除
-        graph.removeItem(this.selectedGroupId)
+        graph.removeItem(this.selectedGroupId);
 
         // ************** 记录【删除】后的数据状态 start **************
         // 如果当前点过【撤销】了，删除分组后将取消【重做】功能
         // 重置undoCount，【删除】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
         if (this.undoCount > 0) {
-          this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+          this.historyIndex = this.historyIndex - this.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
           for (let i = 1; i <= this.undoCount; i++) {
-            let key = `graph_history_${this.historyIndex + i}`
-            this.removeHistoryData(key)
+            let key = `graph_history_${this.historyIndex + i}`;
+            this.removeHistoryData(key);
           }
-          this.undoCount = 0
+          this.undoCount = 0;
         }
         // 记录【删除】后的数据状态
-        this.historyIndex += 1
-        key = `graph_history_${this.historyIndex}`
-        let currentData = JSON.stringify(graph.save())
-        this.addHistoryData(key, currentData)
+        this.historyIndex += 1;
+        key = `graph_history_${this.historyIndex}`;
+        let currentData = JSON.stringify(graph.save());
+        this.addHistoryData(key, currentData);
         // ************** 记录【删除】后的数据状态 end **************
       }
     },
     addNode(clientX, clientY, nodeType) {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
 
         // ************** 记录【添加节点】前的数据状态 start **************
-        let historyData = JSON.stringify(graph.save())
-        let key = `graph_history_${this.historyIndex}`
-        this.addHistoryData(key, historyData)
+        let historyData = JSON.stringify(graph.save());
+        let key = `graph_history_${this.historyIndex}`;
+        this.addHistoryData(key, historyData);
         // ************** 记录【添加节点】前的数据状态 end **************
 
         // 开始添加
-        let droppoint = graph.getPointByClient(clientX, clientY)
-        let node = graph.addItem('node', {
+        let droppoint = graph.getPointByClient(clientX, clientY);
+        let node = graph.addItem("node", {
           id: utils.generateUUID(),
           x: droppoint.x,
           y: droppoint.y,
-          label: nodeType.label,
-          labelCfg: {
-            position: 'bottom'
-          },
-          type: 'top-image',
-          img: nodeType.imgSrc,
+          labels: nodeType.label,
+          // labelCfg: {
+          //   position: "bottom"
+          // },
+          //todo 设置拖拽的属性
+          type: "top-ertable",
+          attrs: [
+            {
+              key: "id",
+              type: "number(6)"
+            },
+            {
+              key: "key",
+              type: "varchar(255)"
+            },
+            {
+              key: "gender",
+              type: "enum(M, F)"
+            },
+            {
+              key: "birthday",
+              type: "date"
+            },
+            {
+              key: "hometown",
+              type: "varchar(255)"
+            },
+            {
+              key: "country",
+              type: "varchar(255)"
+            },
+            {
+              key: "nation",
+              type: "varchar(255)"
+            },
+            {
+              key: "jobId",
+              type: "number(3)",
+              // "relation": [
+              //   {
+              //     "key": "id",
+              //     "nodeId": "job"
+              //   }
+              // ]
+            },
+            {
+              key: "phone",
+              type: "varchar(255)"
+            },
+            {
+              key: "deptId",
+              type: "number(6)",
+              // "relation": [
+              //   {
+              //     "key": "id",
+              //     "nodeId": "dept"
+              //   }
+              // ]
+            },
+            {
+              key: "startTime",
+              type: "date"
+            },
+            {
+              key: "leaveTime",
+              type: "date"
+            }
+          ],
+          // img: nodeType.imgSrc,
           size: [55, 55],
           width: 48,
           height: 48,
@@ -920,25 +992,25 @@ export default {
           appState: {
             alert: false
           }
-        })
+        });
 
         // ************** 记录【添加节点】后的数据状态 start **************
         if (node) {
           // 如果当前点过【撤销】了，【添加节点】后将取消【重做】功能
           // 重置undoCount，【添加节点】后的数据状态给(当前所在historyIndex + 1)，且清空这个时间点之后的记录
           if (this.undoCount > 0) {
-            this.historyIndex = this.historyIndex - this.undoCount // 此时的historyIndex应当更新为【撤销】后所在的索引位置
+            this.historyIndex = this.historyIndex - this.undoCount; // 此时的historyIndex应当更新为【撤销】后所在的索引位置
             for (let i = 1; i <= this.undoCount; i++) {
-              let key = `graph_history_${this.historyIndex + i}`
-              this.removeHistoryData(key)
+              let key = `graph_history_${this.historyIndex + i}`;
+              this.removeHistoryData(key);
             }
-            this.undoCount = 0
+            this.undoCount = 0;
           }
           // 记录【添加节点】后的数据状态
-          this.historyIndex += 1
-          let key = `graph_history_${this.historyIndex}`
-          let currentData = JSON.stringify(graph.save())
-          this.addHistoryData(key, currentData)
+          this.historyIndex += 1;
+          let key = `graph_history_${this.historyIndex}`;
+          let currentData = JSON.stringify(graph.save());
+          this.addHistoryData(key, currentData);
         }
         // ************** 记录【添加节点】后的数据状态 end **************
       }
@@ -947,160 +1019,160 @@ export default {
     },
     addHistoryData(key, value) {
       try {
-        sessionStorage.setItem(key, value)
+        sessionStorage.setItem(key, value);
       } catch (oException) {
-        if (oException.name === 'QuotaExceededError') {
-          console.warn('已经超出本地存储限定大小，清空历史记录！')
+        if (oException.name === "QuotaExceededError") {
+          console.warn("已经超出本地存储限定大小，清空历史记录！");
           // 可进行超出限定大小之后的操作，如下面可以先清除记录，再次保存
           // sessionStorage.clear()
-          this.clearHistoryData()
-          this.historyIndex = 0
-          this.undoCount = 0
-          sessionStorage.setItem(key, value)
+          this.clearHistoryData();
+          this.historyIndex = 0;
+          this.undoCount = 0;
+          sessionStorage.setItem(key, value);
         }
       }
     },
     getHistoryData(key) {
-      return sessionStorage.getItem(key)
+      return sessionStorage.getItem(key);
     },
     removeHistoryData(key) {
-      sessionStorage.removeItem(key)
+      sessionStorage.removeItem(key);
     },
     clearHistoryData() {
-      let keys = Object.keys(sessionStorage)
+      let keys = Object.keys(sessionStorage);
       keys.forEach(key => {
-        if (key.startsWith('graph_history')) {
-          sessionStorage.removeItem(key)
+        if (key.startsWith("graph_history")) {
+          sessionStorage.removeItem(key);
         }
-      })
+      });
     },
     onresizeHandler() {
       // 实时监听窗口大小变化
-      let self = this
-      clearTimeout(this.onresizeTimeout)
+      let self = this;
+      clearTimeout(this.onresizeTimeout);
       this.onresizeTimeout = setTimeout(() => {
-        let graph = self.graph
+        let graph = self.graph;
         if (graph && !graph.destroyed) {
-          let graphContainer = self.$refs.graphContainer
-          let graphWidth = graphContainer.clientWidth
-          let graphHeight = graphContainer.clientHeight
-          graph.changeSize(graphWidth, graphHeight)
+          let graphContainer = self.$refs.graphContainer;
+          let graphWidth = graphContainer.clientWidth;
+          let graphHeight = graphContainer.clientHeight;
+          graph.changeSize(graphWidth, graphHeight);
         }
-      }, 1000)
+      }, 1000);
     },
     /* 暴露给外部的接口 */
     refreshGraph() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        graph.refresh()
+        graph.refresh();
       }
     },
     getGraphData() {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        return graph.save()
+        return graph.save();
       } else {
-        return { nodes: [], edges: [] }
+        return { nodes: [], edges: [] };
       }
     },
     changeGraphData(data) {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        graph.changeData(data)
+        graph.changeData(data);
       }
     },
     changeGraphSize(graphWidth = 0, graphHeight = 0) {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        let graphContainer = this.$refs.graphContainer
-        graphWidth = graphWidth || graphContainer.clientWidth
-        graphHeight = graphHeight || graphContainer.clientHeight
-        graph.changeSize(graphWidth, graphHeight)
+        let graphContainer = this.$refs.graphContainer;
+        graphWidth = graphWidth || graphContainer.clientWidth;
+        graphHeight = graphHeight || graphContainer.clientHeight;
+        graph.changeSize(graphWidth, graphHeight);
       }
     },
     changeGraphMode(graphData, graphMode) {
-      this.graphMode = graphMode
+      this.graphMode = graphMode;
       this.$nextTick(() => {
-        this.initTopo(graphData)
-        this.autoZoomHandler()
-      })
+        this.initTopo(graphData);
+        this.autoZoomHandler();
+      });
     },
     changeGraphTheme(themeValue) {
-      let graph = this.graph
+      let graph = this.graph;
       if (graph && !graph.destroyed) {
-        let nodes = graph.getNodes()
-        let edges = graph.getEdges()
+        let nodes = graph.getNodes();
+        let edges = graph.getEdges();
         switch (themeValue) {
-          case 'darkStyle':
-            this.graphBg = 'dark-style'
-            graph.$T = theme.darkStyle
+          case "darkStyle":
+            this.graphBg = "dark-style";
+            graph.$T = theme.darkStyle;
             for (let i = 0, len = edges.length; i < len; i++) {
-              let edge = edges[i]
-              let edgeModel = edge.getModel()
-              edgeModel.style = graph.$T.edgeStyle.default
-              edge.update(edgeModel)
+              let edge = edges[i];
+              let edgeModel = edge.getModel();
+              edgeModel.style = graph.$T.edgeStyle.default;
+              edge.update(edgeModel);
             }
             for (let i = 0, len = nodes.length; i < len; i++) {
-              let node = nodes[i]
-              let nodeModel = node.getModel()
-              nodeModel.labelCfg = graph.$T.nodeLabelCfg
-              node.update(nodeModel)
+              let node = nodes[i];
+              let nodeModel = node.getModel();
+              nodeModel.labelCfg = graph.$T.nodeLabelCfg;
+              node.update(nodeModel);
             }
-            graph.paint()
-            break
-          case 'officeStyle':
-            this.graphBg = 'office-style'
-            graph.$T = theme.officeStyle
+            graph.paint();
+            break;
+          case "officeStyle":
+            this.graphBg = "office-style";
+            graph.$T = theme.officeStyle;
             for (let i = 0, len = edges.length; i < len; i++) {
-              let edge = edges[i]
-              let edgeModel = edge.getModel()
-              edgeModel.style = graph.$T.edgeStyle.default
-              edge.update(edgeModel)
+              let edge = edges[i];
+              let edgeModel = edge.getModel();
+              edgeModel.style = graph.$T.edgeStyle.default;
+              edge.update(edgeModel);
             }
             for (let i = 0, len = nodes.length; i < len; i++) {
-              let node = nodes[i]
-              let nodeModel = node.getModel()
-              nodeModel.labelCfg = graph.$T.nodeLabelCfg
-              node.update(nodeModel)
+              let node = nodes[i];
+              let nodeModel = node.getModel();
+              nodeModel.labelCfg = graph.$T.nodeLabelCfg;
+              node.update(nodeModel);
             }
-            graph.paint()
-            break
+            graph.paint();
+            break;
           default:
-            this.graphBg = 'default-style'
-            graph.$T = theme.defaultStyle
+            this.graphBg = "default-style";
+            graph.$T = theme.defaultStyle;
             for (let i = 0, len = edges.length; i < len; i++) {
-              let edge = edges[i]
-              let edgeModel = edge.getModel()
-              edgeModel.style = graph.$T.edgeStyle.default
-              edge.update(edgeModel)
+              let edge = edges[i];
+              let edgeModel = edge.getModel();
+              edgeModel.style = graph.$T.edgeStyle.default;
+              edge.update(edgeModel);
             }
             for (let i = 0, len = nodes.length; i < len; i++) {
-              let node = nodes[i]
-              let nodeModel = node.getModel()
-              nodeModel.labelCfg = graph.$T.nodeLabelCfg
-              node.update(nodeModel)
+              let node = nodes[i];
+              let nodeModel = node.getModel();
+              nodeModel.labelCfg = graph.$T.nodeLabelCfg;
+              node.update(nodeModel);
             }
-            graph.paint()
+            graph.paint();
         }
       }
     },
     /* 子组件向父组件传值 */
     autoRefreshHandler(interval) {
-      this.$emit('doAutoRefresh', interval)
+      this.$emit("doAutoRefresh", interval);
     },
     manualRefreshHandler() {
-      this.$emit('doManualRefresh')
+      this.$emit("doManualRefresh");
     },
     changeModeHandler(graphMode) {
-      this.changeGraphTheme('defaultStyle')
-      this.$emit('doChangeMode', graphMode)
+      this.changeGraphTheme("defaultStyle");
+      this.$emit("doChangeMode", graphMode);
     },
     saveDataHandler() {
-      let graphData = this.getGraphData()
-      this.$emit('doSaveData', graphData)
+      let graphData = this.getGraphData();
+      this.$emit("doSaveData", graphData);
     }
   }
-}
+};
 </script>
 <style lang="scss" scoped>
 @import '../../assets/iconfont/iconfont.css';
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js
index a92d1d0..3913093 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/draw.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: draw anchor
  */
 
@@ -31,6 +31,7 @@ export default function(cfg, group) {
         name: 'markerBg-shape'
       })
       // 添加锚点Marker形状
+      // eslint-disable-next-line no-unused-vars
       let anchorShape = group.addShape('marker', {
         id: id + '_anchor_' + i,
         attrs: {
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw.js
new file mode 100644
index 0000000..dcd3cc3
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/er-draw.js
@@ -0,0 +1,48 @@
+
+
+
+import theme from '../../theme'
+
+
+
+
+export default function(group,label,x,y,i,itemHeight,offsetY) {
+  const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  let anchorBgShape = group.addShape('marker', {
+    id: label+ '_anchor_bg_lift_' + i,
+    attrs: {
+      name: 'anchorBg',
+      x: x,
+      y: y,
+      ...themeStyle.anchorBgStyle.default
+    },
+    draggable: false,
+    name: 'markerBg-shape'
+  })
+
+  let anchorShape = group.addShape('marker', {
+    id: label+ '_anchor_bg_lift_' + i,
+    attrs: {
+      name: 'anchor',
+      x: x,
+      y: y,
+
+      ...themeStyle.anchorStyle.default
+    },
+    draggable: false,
+    name: 'markerBg-shape'
+  })
+
+  anchorShape.on('mouseenter', function() {
+    anchorBgShape.attr({
+      ...themeStyle.anchorBgStyle.active
+    })
+  })
+  anchorShape.on('mouseleave', function() {
+    anchorBgShape.attr({
+      ...themeStyle.anchorBgStyle.inactive
+    })
+  })
+
+
+}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js
index 58cdc6d..32d6afc 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/index.js
@@ -1,15 +1,17 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: anchor
  */
 
 import draw from './draw'
+import erDrawLeft from './er-draw'
 import setState from './set-state'
 import update from './update'
 
 export default {
   draw,
   setState,
-  update
+  update,
+  erDraw: erDrawLeft,
 }
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js
index f51ca10..0713055 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/set-state.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: set anchor state
  */
 
@@ -8,6 +8,7 @@ import theme from '../../theme'
 
 export default function(name, value, item) {
   const themeStyle = theme.defaultStyle // todo...先使用默认主题，后期可能增加其它风格的主体
+  // console.log(item)
   if (name === 'hover') {
     let group = item.getContainer()
     let children = group.get('children')
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js
index e5ac825..1509f05 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/anchor/update.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: update anchor
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js
new file mode 100644
index 0000000..d43dc28
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/index.js
@@ -0,0 +1,11 @@
+/**
+ * @author: clay
+ * @data: 2021/5/11 17:28
+ * @email: clay@hchyun.com
+ * @description: node
+ */
+import setState from './set-state'
+
+export default {
+  setState
+}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js
new file mode 100644
index 0000000..139e6d3
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/move.js
@@ -0,0 +1,57 @@
+/**
+ * @author: clay
+ * @data: 2021/5/11 17:33
+ * @email: clay@hchyun.com
+ * @description: node
+ */
+export default function(e){
+  e.preventDefault();
+  const {
+    graph
+  } = this;
+  const nodes = graph.getNodes().filter((n) => {
+    const bbox = n.getBBox();
+
+    return isInBBox(graph.getPointByClient(e.clientX, e.clientY), bbox);
+  });
+  if (nodes) {
+    nodes.forEach((node) => {
+      const model = node.getModel();
+      if (model.attrs.length < 9) {
+        return;
+      }
+      const idx = model.startIndex || 0;
+      let startX = model.startX || 0.5;
+      let startIndex = idx + e.deltaY * 0.02;
+      startX -= e.deltaX;
+      if (startIndex < 0) {
+        startIndex = 0;
+      }
+      if (startX > 0) {
+        startX = 0;
+      }
+      if (startIndex > model.attrs.length - 1) {
+        startIndex = model.attrs.length - 1;
+      }
+      graph.update(node, {
+        startIndex,
+        startX,
+      });
+    });
+  }
+}
+const isInBBox = (point, bbox) => {
+  const {
+    x,
+    y
+  } = point;
+  const {
+    minX,
+    minY,
+    maxX,
+    maxY
+  } = bbox;
+
+  return x < maxX && x > minX && y > minY && y < maxY;
+};
+
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js
new file mode 100644
index 0000000..c946239
--- /dev/null
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/collapse/set-state.js
@@ -0,0 +1,33 @@
+/**
+ * @author: clay
+ * @data: 2021/5/11 17:28
+ * @email: clay@hchyun.com
+ * @description: node
+ */
+export default function(e){
+  const {
+    graph
+  } = this;
+  const {
+    y
+  } = e;
+  const item = e.item;
+  const shape = e.shape;
+  if (!item) {
+    return;
+  }
+
+  if (shape.get("name") === "collapse") {
+    graph.updateItem(item, {
+      collapsed: true,
+      size: [300, 50],
+    });
+    setTimeout(() => graph.layout(), 100);
+  } else if (shape.get("name") === "expand") {
+    graph.updateItem(item, {
+      collapsed: false,
+      size: [300, 500],
+    });
+    setTimeout(() => graph.layout(), 100);
+  }
+}
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/index.js
index da9ab39..8002373 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: edge
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js
index 5703455..9090426 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/edge/set-state.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: set edge state
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/index.js
index 5c1f3d9..2b33f54 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/index.js
@@ -1,12 +1,13 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: graph utils
  */
 
 import node from './node'
 import anchor from './anchor'
 import edge from './edge'
+import collapse from './collapse'
 
 /**
  * 比较两个对象的内容是否相同（两个对象的键值都相同）
@@ -58,6 +59,7 @@ export default {
   node,
   anchor,
   edge,
+  collapse,
   // 通用工具类函数
   isObjectValueEqual,
   generateUUID
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/index.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/index.js
index f33b64d..61e5741 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/index.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/index.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: node
  */
 
diff --git a/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js b/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js
index fffada0..4b60368 100644
--- a/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js
+++ b/hchyun-ui/src/views/system/top/packages/topology/src/utils/node/set-state.js
@@ -1,6 +1,6 @@
 /**
  * @author: clay
- * @data: 2021/5/10
+ * @data: 2019/08/15
  * @description: set node state
  */
 
@@ -18,9 +18,10 @@ export default function(name, value, item) {
     }
   } else if (name === 'selected') {
     if (value) {
-      shape.attr(themeStyle.nodeStyle.selected)
+      group.attr(themeStyle.nodeStyle.selected)
     } else {
-      shape.attr(themeStyle.nodeStyle.default)
+      group.attr(themeStyle.nodeStyle.default)
     }
   }
+
 }
diff --git a/hchyun-ui/src/views/system/top/index.js b/hchyun-ui/src/views/system/top/utils/index.js
similarity index 97%
rename from hchyun-ui/src/views/system/top/index.js
rename to hchyun-ui/src/views/system/top/utils/index.js
index be5e346..21ebc8c 100644
--- a/hchyun-ui/src/views/system/top/index.js
+++ b/hchyun-ui/src/views/system/top/utils/index.js
@@ -1,5 +1,5 @@
 /**
- * Created by clay on 2021/10/14
+ * Created by clay on 2019/10/14
  * Description: common utils
  */