diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 733cf7072..7a474cab9 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -1433,44 +1433,43 @@
       }
     },
     "@topology/activity-diagram": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@topology/activity-diagram/-/activity-diagram-0.3.0.tgz",
-      "integrity": "sha512-9uceHdbT1MY++/2crNlZmFMVmz6sI4OqH7aUQuBT8q9RDXA7t2prFd7lx4UfaIyQqDYtYtpeCHLPlhRLsEooZg=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@topology/activity-diagram/-/activity-diagram-1.1.0.tgz",
+      "integrity": "sha512-T4o/baMiTjnRgs7pPu/V2zTIMzBuBLZd8m78/dTzRkcf9CxuBrqgeh0EYDb9xgQ0DZDjdnZpZNJKLVpmCon18A=="
     },
     "@topology/chart-diagram": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@topology/chart-diagram/-/chart-diagram-0.3.0.tgz",
-      "integrity": "sha512-WUfb62Op0QxS976cNqrJ1Xaq+pfURwpo67H3TENWb+OhoNfiBl9IDANxTr1UIPLYfsjqgN3Y/8lxkL33jEl/aQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@topology/chart-diagram/-/chart-diagram-1.1.0.tgz",
+      "integrity": "sha512-9b4s91FiIhv9DPm54c1cktW7PHDmL/TcREgij4Vdz/mGBtt+qg9DNjLosBcwshXDgD1/oQ8qTd24uRUcMOhWMw=="
     },
     "@topology/class-diagram": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@topology/class-diagram/-/class-diagram-0.3.0.tgz",
-      "integrity": "sha512-J+qKEg/+3EyyZotP2TbZtM+NcOeRh2PIEwzBZGS6KOU5RvBi4NMRO2DQNN++q8Zpb7RG7WYGAaTB2H4+YcXJzA=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@topology/class-diagram/-/class-diagram-1.1.0.tgz",
+      "integrity": "sha512-pFCGC7pBorMA8kPiAPKLeBp9VjHXs8FRMujTjFAUpJxQGRAZzjnuVq0pB32me9Vc/Ckp1/pH6S0JgD+poVA5CA=="
     },
     "@topology/core": {
-      "version": "0.5.33",
-      "resolved": "https://registry.npmmirror.com/@topology/core/download/@topology/core-0.5.33.tgz",
-      "integrity": "sha1-aS5eoCUEDbrh/TGxl2rCXmdu8ww=",
+      "version": "1.1.32",
+      "resolved": "https://registry.npmjs.org/@topology/core/-/core-1.1.32.tgz",
+      "integrity": "sha512-ZpRzW0ERxBMFcdujT7VpZVY8t7B+OEMXVhuY+vQ8a++LTG/SIWT3ib8EhYw4cJM4BaIUtOOyDPYHpFk4SOl0KA==",
       "requires": {
-        "le5le-store": "^1.0.7",
         "mitt": "^2.1.0",
         "mqtt": "^4.2.6"
       }
     },
     "@topology/flow-diagram": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@topology/flow-diagram/-/flow-diagram-0.3.0.tgz",
-      "integrity": "sha512-GPV+CIbclzYgCO/lMePDfLY0OzAr1+7nyzMOVdABXezvlIw/zm59+2/KYQu5XGUqBoqjvjdrd4hbN8eYAKWZQw=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@topology/flow-diagram/-/flow-diagram-1.1.1.tgz",
+      "integrity": "sha512-hvlEDQ97DLTII0XIB8V3SQ55ywN+n3GqSkM8Fp9oImKXFSFYf9WYtiaMihB3fqnHJnR9EYDx57ehRFF5k5+gxA=="
     },
-    "@topology/layout": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@topology/layout/-/layout-0.3.0.tgz",
-      "integrity": "sha512-t9SSU7RroRfnKO3K5cfsB7eIfE2jW/t7O+79nVGgNqQljxaCSG8wQPWw6BqnmYJ072uHf85z1QUIjjboSEHupg=="
+    "@topology/form-diagram": {
+      "version": "1.1.32",
+      "resolved": "https://registry.npmjs.org/@topology/form-diagram/-/form-diagram-1.1.32.tgz",
+      "integrity": "sha512-omPPIyZmibjpe/cv+yB+3quSStW+4Pi43M4TO7ExV2lb7FlWJpXC8aPch+PSo6iQi06nAM9HOILSIaog7Hofug=="
     },
     "@topology/sequence-diagram": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-0.3.0.tgz",
-      "integrity": "sha512-qSLXKd//lW5jb/e7nMRwxRWz/bXmkourVHBmZ2cRulZPe0KTeLiE/LkYJ+ffDFNDdCIYedHBC+CeQc3PULCqRQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-1.1.0.tgz",
+      "integrity": "sha512-/DUqVXS1mCLpDJbfRQbMfduYy65OEq4QQjsqvMB6xGYD+L1+4CMRPI8lHsUyQcjOmBJrCfro5oJC0g6PWjGJDg=="
     },
     "@types/babel__core": {
       "version": "7.1.19",
@@ -3988,7 +3987,7 @@
     },
     "clipboard": {
       "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
       "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
       "requires": {
         "good-listener": "^1.2.2",
@@ -6133,7 +6132,7 @@
     },
     "delegate": {
       "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
       "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
     },
     "delegates": {
@@ -8445,7 +8444,7 @@
     },
     "good-listener": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
       "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
       "requires": {
         "delegate": "^3.1.2"
@@ -10993,8 +10992,8 @@
     },
     "le5le-store": {
       "version": "1.0.7",
-      "resolved": "https://registry.npm.taobao.org/le5le-store/download/le5le-store-1.0.7.tgz",
-      "integrity": "sha1-c0F+AMvT2KEBCzF5VJYyOt/HvEc="
+      "resolved": "https://registry.npmjs.org/le5le-store/-/le5le-store-1.0.7.tgz",
+      "integrity": "sha512-8XnDf8RUoHsKXUQHSw2vHEbEw4UbDHGulw/r/YRXf2NA1EUvMD/UUjGvbMAB1vz3UN8smvOxR6CTyjpK/Zhn2w=="
     },
     "leaflet": {
       "version": "1.7.1",
@@ -11591,8 +11590,8 @@
     },
     "mitt": {
       "version": "2.1.0",
-      "resolved": "https://registry.nlark.com/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1624483449786&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz",
-      "integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA="
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
     },
     "mixin-deep": {
       "version": "1.3.2",
@@ -16361,7 +16360,7 @@
     },
     "select": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
       "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
     },
     "select-hose": {
@@ -17837,7 +17836,7 @@
     },
     "tiny-emitter": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
     "tinycolor2": {
@@ -18521,7 +18520,7 @@
     },
     "vue-clipboard2": {
       "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
       "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
       "requires": {
         "clipboard": "^2.0.0"
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index dce217c72..fa2e1a22e 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -25,13 +25,13 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "@svgdotjs/svg.js": "^3.0.16",
     "@svgdotjs/svg.panzoom.js": "^2.1.1",
-    "@topology/activity-diagram": "^0.3.0",
-    "@topology/chart-diagram": "^0.3.0",
-    "@topology/class-diagram": "^0.3.0",
-    "@topology/core": "0.5.33",
-    "@topology/flow-diagram": "^0.3.0",
-    "@topology/layout": "^0.3.0",
-    "@topology/sequence-diagram": "^0.3.0",
+    "@topology/activity-diagram": "^1.1.0",
+    "@topology/chart-diagram": "^1.1.0",
+    "@topology/class-diagram": "^1.1.0",
+    "@topology/core": "^1.1.32",
+    "@topology/flow-diagram": "^1.1.1",
+    "@topology/form-diagram": "^1.1.32",
+    "@topology/sequence-diagram": "^1.1.0",
     "axios": "^0.19.0",
     "codemirror-promql": "^0.19.0",
     "cytoscape": "^3.15.2",
@@ -46,6 +46,7 @@
     "intro.js": "^5.1.0",
     "jspdf": "^2.5.1",
     "jszip": "^3.9.1",
+    "le5le-store": "^1.0.7",
     "leaflet": "^1.7.1",
     "moment-timezone": "^0.5.33",
     "mqtt": "4.2.6",
diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss
index 01eab0c60..274660ad9 100644
--- a/nezha-fronted/src/assets/css/common/checkbox.scss
+++ b/nezha-fronted/src/assets/css/common/checkbox.scss
@@ -8,8 +8,8 @@
   background-color: $--color-primary !important;
 }
 .el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{
-  background-color: $--background-color-empty !important;
-  border-color: $--border-color-base !important;
+  //background-color: $--background-color-empty !important;
+  //border-color: $--border-color-base !important;
 }
 .el-checkbox__input.is-disabled .el-checkbox__inner{
   background-color: $--background-color-empty !important;
@@ -19,7 +19,7 @@
   border-color: $--border-color-base !important;
 }
 .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
-  display: none !important;
+  //display: none !important;
 }
 .el-checkbox__input.is-disabled{
   width: 16px !important;
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index c5f1c68bd..40b0ce567 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -312,21 +312,20 @@
 </template>
 
 <script>
-import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
+import { Topology } from '@/components/common/@topology/core/index.js'
 import { Store as le5leStore } from 'le5le-store'
 import imgDefault from '@/components/common/project/L5/services/img'
 import {
   Tools,
-  canvasRegister,
   imageTemp2,
-  myShape,
-  myAnchors,
-  myIconRect2,
-  myTextRect2,
-  onChangeAnimate,
-  onChangeAnimateLine,
-  myCubec,
-  myCubeAnchors
+  // myShape,
+  // myAnchors,
+  // myIconRect2,
+  // myTextRect2,
+  // onChangeAnimate,
+  // onChangeAnimateLine,
+  // myCubec,
+  // myCubeAnchors
 } from '../project/L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
 import CanvasProps from '../project/L5/CanvasProps'
@@ -341,8 +340,10 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
 import bus from '../../../libs/bus'
 import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
-registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
+// Topology.register({ triangle });
+// Topology.registerAnchors({ triangle: triangleAnchors });
+// registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
+// registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
 const canvasOptions = {
   rotateCursor: '/img/rotate.cur',
@@ -620,7 +621,6 @@ export default {
   computed: {
   },
   created () {
-    canvasRegister()
     if (process.client) {
       document.onclick = event => {
         this.contextmenu = {
@@ -950,7 +950,7 @@ export default {
             pen.strokeStyle = selLevel.color.line
             pen.bkType = 0
           }
-          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+          // onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
         } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
           const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
           if (selLevel) {
@@ -959,13 +959,13 @@ export default {
             pen.animateType = selLevel.animateType
             pen.fontColor = selLevel.color.text
           }
-          onChangeAnimateLine(pen, pen.animateType)
+          // onChangeAnimateLine(pen, pen.animateType)
         }
       } else {
         if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimate(pen, pen.animateType)
+          // onChangeAnimate(pen, pen.animateType)
         } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimateLine(pen, pen.animateType)
+          // onChangeAnimateLine(pen, pen.animateType)
         }
       }
     },
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index ccb09482e..f09e613e6 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -1096,7 +1096,7 @@
 </template>
 
 <script>
-import { alignNodes, spaceBetween, layout } from '@topology/layout'
+// import { alignNodes, spaceBetween, layout } from '@topology/layout'
 import { getTopology, resetZIndex } from '../../js/common'
 import chartDataFormat from '../../../chart/chartDataFormat'
 import promqlInput from '../../../page/dashboard/explore/promqlInput'
@@ -1559,15 +1559,15 @@ export default {
 
     // 组件事件
     onNodesAlign (align) { // 对齐node
-      alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
+      // alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
       getTopology(this.index).updateProps()
     },
     onSpaceBetween () {
-      spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
+      // spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
       getTopology(this.index).updateProps()
     },
     onLayout () { // 改变布局
-      layout(getTopology(this.index).activeLayer.pens, this.layout)
+      // layout(getTopology(this.index).activeLayer.pens, this.layout)
       getTopology(this.index).updateProps()
     },
     onClickDash (number) { // 改变线型
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 79e62076b..17dee6b79 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -1,15 +1,6 @@
-import { Node, Rect, Point, Direction } from '@topology/core'
-// import { register as registerClass } from './class-diagram/index'
+import { rectInRect } from '@topology/core'
 export let canvas
 
-export function canvasRegister () {
-  // registerFlow()
-  // registerActivity()
-  // registerSequence()
-  // registerChart()
-  // registerClass()
-}
-
 export const Tools = [
   {
     group: 'General',
@@ -240,371 +231,419 @@ export const imageTemp2 = {
     fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
   }
 }
-/* 自定义图片组件 */
-export function myShape (ctx, node) { // 自定义图片组件
+export function rectangleImg (ctx, pen) {
   ctx.beginPath()
 
-  ctx.rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height)
-  if (node.data && node.data.lineWidth <= 0) {
+  ctx.rect(pen.x, pen.y, pen.width, pen.height)
+  if (pen.data && pen.data.lineWidth <= 0) {
     ctx.strokeStyle = 'rgba(0,0,0,0)'
   }
   // 必须判空再填充
-  (node.fillStyle || node.bkType) && ctx.fill()
+  (pen.fillStyle || pen.bkType) && ctx.fill()
+  pen.iconHeight = pen.height - 30
+  console.log(pen)
+  // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
+  // pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
   ctx.stroke()
 }
-export function myAnchors (node) {
-  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
-  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
-}
-export function myIconRect (node) {
-  node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - 20 - (node.paddingTop + node.paddingBottom))
-  node.fullIconRect = node.rect
-}
-export function myTextRect (node) {
-  node.textRect = new Rect(
-    node.rect.x + node.paddingLeft,
-    node.rect.y + node.rect.height - 20 - node.paddingBottom,
-    node.rect.width - (node.paddingLeft + node.paddingRight),
-    20
-  )
-  node.fullTextRect = node.rect
-}
-export function myIconRect2 (node) {
-  node.iconRect = node.rect
-  node.fullIconRect = node.rect
-}
-export function myTextRect2 (node) {
-  node.textRect = new Rect(
-    node.rect.x + node.paddingLeft,
-    node.rect.y + node.rect.height + 10,
-    node.rect.width - (node.paddingLeft + node.paddingRight),
-    20
-  )
-  node.fullTextRect = node.rect
+export function rectangleImgAnchors (pen) {
+  const anchors = []
+  // console.log(pen)
+  anchors.push({
+    id: '0',
+    penId: pen.id,
+    x: pen.x,
+    y: pen.y + pen.height / 4
+  })
+  anchors.push({
+    id: '1',
+    penId: pen.id,
+    x: pen.x + pen.width / 2,
+    y: pen.y
+  })
+  anchors.push({
+    id: '2',
+    penId: pen.id,
+    x: pen.x + pen.width,
+    y: pen.y + pen.height / 2
+  })
+  anchors.push({
+    id: '3',
+    penId: pen.id,
+    x: pen.x + pen.width / 2,
+    y: pen.y + pen.height
+  })
+  return anchors
+  // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
+  // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
+  // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
+  // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
 }
 /* 自定义图片组件 */
-
-/* 自定义立方体 */
-export function myCubec (ctx, node) {
-  // 立方体
-  // ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height);
-  const x = node.rect.x + 10; const y = node.rect.y + 10; const w = node.rect.width - 20; const h = node.rect.height - 20
-
-  // LINE MODE
-  ctx.lineJoin = 'round'
-
-  // center face
-  ctx.beginPath()
-  ctx.moveTo(x, y + h / 3)
-  ctx.lineTo(x + w * 2 / 3, y + h / 3)
-  ctx.lineTo(x + w * 2 / 3, y + h)
-  ctx.lineTo(x, y + h)
-  ctx.closePath()
-  ctx.fillStyle = node.fillStyle
-  ctx.strokeStyle = node.strokeStyle
-  ctx.stroke();
-  (node.fillStyle || node.bkType) && ctx.fill()
-
-  // top face
-  ctx.beginPath()
-  ctx.moveTo(x, y + h / 3)
-  ctx.lineTo(x + w / 3, y)
-  ctx.lineTo(x + w, y)
-  ctx.lineTo(x + w * 2 / 3, y + h / 3)
-  ctx.closePath()
-  ctx.fillStyle = node.fillStyle
-  ctx.strokeStyle = node.strokeStyle
-  ctx.stroke();
-  (node.fillStyle || node.bkType) && ctx.fill()
-
-  // right face
-  ctx.beginPath()
-  ctx.moveTo(x + w * 2 / 3, y + h / 3)
-  ctx.lineTo(x + w, y)
-  ctx.lineTo(x + w, y + h * 2 / 3)
-  ctx.lineTo(x + w * 2 / 3, y + h)
-  ctx.closePath()
-  ctx.fillStyle = node.fillStyle
-  ctx.strokeStyle = node.strokeStyle
-  ctx.stroke();
-  (node.fillStyle || node.bkType) && ctx.fill()
-
-  // 必须判空再填充
-}
-export function myCubeAnchors (node) { // 立方体锚点
-  node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left))
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up))
-  node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right))
-  node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom))
-}
-/* 自定义立方体 */
-
-export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
-  node.animateType = animateType
-  if (node.animateType === 'custom') {
-    return
-  }
-
-  node.animateFrames = []
-  const state = Node.cloneState(node)
-  switch (animateType) {
-    case 'upDown':
-      state.rect.y -= 10
-      state.rect.ey -= 10
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state
-      })
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(node)
-      })
-      node.animateFrames.push({
-        duration: 200,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      break
-    case 'leftRight':
-      state.rect.x -= 10
-      state.rect.ex -= 10
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.rect.x += 20
-      state.rect.ex += 20
-      node.animateFrames.push({
-        duration: 80,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.rect.x -= 20
-      state.rect.ex -= 20
-      node.animateFrames.push({
-        duration: 50,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.rect.x += 20
-      state.rect.ex += 20
-      node.animateFrames.push({
-        duration: 30,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(node)
-      })
-      break
-    case 'heart':
-      state.rect.x -= 5
-      state.rect.ex += 5
-      state.rect.y -= 5
-      state.rect.ey += 5
-      state.rect.width += 5
-      state.rect.height += 10
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state
-      })
-      node.animateFrames.push({
-        duration: 400,
-        linear: true,
-        state: Node.cloneState(node)
-      })
-      break
-    case 'success':
-      state.strokeStyle = strokeStyle || '#237804'
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state
-      })
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(node)
-      })
-      state.strokeStyle = '#237804'
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state
-      })
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(node)
-      })
-      state.strokeStyle = strokeStyle || '#237804'
-      state.fillStyle = fillStyle || '#389e0d22'
-      node.animateFrames.push({
-        duration: 3000,
-        linear: true,
-        state
-      })
-      break
-    case 'warning':
-      state.strokeStyle = strokeStyle || '#fa8c16'
-      state.fillStyle = fillStyle || '#fa8c16'
-      state.lineWidth = 5
-      state.dash = 2
-      node.animateFrames.push({
-        duration: 500,
-        linear: true,
-        state
-      })
-      state.strokeStyle = strokeStyle || '#fa8c16'
-      state.dash = 0
-      state.lineWidth = 1
-      state.fillStyle = '#ffffff'
-      node.animateFrames.push({
-        duration: 500,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.strokeStyle = strokeStyle || '#fa8c16'
-      state.dash = 2
-      state.lineWidth = 5
-      state.fillStyle = fillStyle || '#fa8c16'
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      break
-    case 'error':
-      state.strokeStyle = strokeStyle || '#cf1322'
-      state.fillStyle = fillStyle || '#cf132222'
-      state.lineWidth = 5
-      state.dash = 2
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state
-      })
-      state.strokeStyle = strokeStyle || '#cf1322'
-      state.fillStyle = '#ffffff'
-      state.dash = 0
-      state.lineWidth = 1
-      node.animateFrames.push({
-        duration: 500,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.strokeStyle = strokeStyle || '#cf1322'
-      state.fillStyle = fillStyle || '#cf132222'
-      state.dash = 2
-      state.lineWidth = 5
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      break
-    case 'show':
-      state.strokeStyle = strokeStyle || '#fa541c'
-      state.rotate = -5
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.rotate = 5
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.rotate = 0
-      node.animateFrames.push({
-        duration: 100,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      break
-    case 'fade':
-      state.strokeStyle = strokeStyle || '#fa541c'
-      state.globalAlpha = 0.3
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.globalAlpha = 0.5
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.globalAlpha = 0.8
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      state.globalAlpha = 1
-      node.animateFrames.push({
-        duration: 300,
-        linear: true,
-        state: Node.cloneState(state)
-      })
-      break
-  }
-  node.animatePlay = true
-}
-export function onChangeAnimateLine (line, type) {
-  line.animateType = type
-  line.animatePlay = true
-}
-export function changeImage (dataImg, callback) {
-  // const base64Img = document.createElement('base64Img')
-  const canvas = document.createElement('canvas')
-  const context = canvas.getContext('2d')
-  // 创建新图片
-  const img = new Image()
-  img.src = dataImg
-  img.addEventListener(
-    'load',
-    function () {
-      // 绘制图片到canvas上
-      canvas.width = img.width
-      canvas.height = img.height
-      context.drawImage(img, 0, 0)
-
-      // 将canvas的透明背景设置成白色
-      const imageData = context.getImageData(
-        0,
-        0,
-        canvas.width,
-        canvas.height
-      )
-      for (let i = 0; i < imageData.data.length; i += 4) {
-        // rgb大于250的透明度y均设置成0
-        if (
-          imageData.data[i] > 0 &&
-          imageData.data[i + 1] > 0 &&
-          imageData.data[i + 2] > 0
-        ) {
-          imageData.data[i + 3] = 200
-        }
-      }
-      context.putImageData(imageData, 0, 0)
-      const baseImg = canvas.toDataURL('image/png')// 返回base64
-      if (typeof callback !== 'undefined') {
-        if (callback) callback(baseImg)
-      }
-      img.remove()
-    },
-    false
-  )
-}
+// export function myShape (ctx, node) { // 自定义图片组件
+//   ctx.beginPath()
+//
+//   ctx.rect(pen.x, pen.y, pen.width, pen.height)
+//   if (pen.data && pen.data.lineWidth <= 0) {
+//     ctx.strokeStyle = 'rgba(0,0,0,0)'
+//   }
+//   // 必须判空再填充
+//   (pen.fillStyle || pen.bkType) && ctx.fill()
+//   ctx.stroke()
+// }
+// export function myAnchors (node) {
+//   pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
+//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
+//   pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
+//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
+// }
+// export function myIconRect (node) {
+//   pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
+//   pen.fullIconRect = pen.rect
+// }
+// export function myTextRect (node) {
+//   pen.textRect = new Rect(
+//     pen.x + pen.paddingLeft,
+//     pen.y + pen.height - 20 - pen.paddingBottom,
+//     pen.width - (pen.paddingLeft + pen.paddingRight),
+//     20
+//   )
+//   pen.fullTextRect = pen.rect
+// }
+// export function myIconRect2 (node) {
+//   pen.iconRect = pen.rect
+//   pen.fullIconRect = pen.rect
+// }
+// export function myTextRect2 (node) {
+//   pen.textRect = new Rect(
+//     pen.x + pen.paddingLeft,
+//     pen.y + pen.height + 10,
+//     pen.width - (pen.paddingLeft + pen.paddingRight),
+//     20
+//   )
+//   pen.fullTextRect = pen.rect
+// }
+// /* 自定义图片组件 */
+//
+// /* 自定义立方体 */
+// export function myCubec (ctx, node) {
+//   // 立方体
+//   // ctx.rect(pen.x,pen.y,pen.width,pen.height);
+//   const x = pen.x + 10; const y = pen.y + 10; const w = pen.width - 20; const h = pen.height - 20
+//
+//   // LINE MODE
+//   ctx.lineJoin = 'round'
+//
+//   // center face
+//   ctx.beginPath()
+//   ctx.moveTo(x, y + h / 3)
+//   ctx.lineTo(x + w * 2 / 3, y + h / 3)
+//   ctx.lineTo(x + w * 2 / 3, y + h)
+//   ctx.lineTo(x, y + h)
+//   ctx.closePath()
+//   ctx.fillStyle = pen.fillStyle
+//   ctx.strokeStyle = pen.strokeStyle
+//   ctx.stroke();
+//   (pen.fillStyle || pen.bkType) && ctx.fill()
+//
+//   // top face
+//   ctx.beginPath()
+//   ctx.moveTo(x, y + h / 3)
+//   ctx.lineTo(x + w / 3, y)
+//   ctx.lineTo(x + w, y)
+//   ctx.lineTo(x + w * 2 / 3, y + h / 3)
+//   ctx.closePath()
+//   ctx.fillStyle = pen.fillStyle
+//   ctx.strokeStyle = pen.strokeStyle
+//   ctx.stroke();
+//   (pen.fillStyle || pen.bkType) && ctx.fill()
+//
+//   // right face
+//   ctx.beginPath()
+//   ctx.moveTo(x + w * 2 / 3, y + h / 3)
+//   ctx.lineTo(x + w, y)
+//   ctx.lineTo(x + w, y + h * 2 / 3)
+//   ctx.lineTo(x + w * 2 / 3, y + h)
+//   ctx.closePath()
+//   ctx.fillStyle = pen.fillStyle
+//   ctx.strokeStyle = pen.strokeStyle
+//   ctx.stroke();
+//   (pen.fillStyle || pen.bkType) && ctx.fill()
+//
+//   // 必须判空再填充
+// }
+// export function myCubeAnchors (node) { // 立方体锚点
+//   pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
+//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
+//   pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
+//   pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
+// }
+// /* 自定义立方体 */
+//
+// export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
+//   pen.animateType = animateType
+//   if (pen.animateType === 'custom') {
+//     return
+//   }
+//
+//   pen.animateFrames = []
+//   const state = Node.cloneState(node)
+//   switch (animateType) {
+//     case 'upDown':
+//       state.rect.y -= 10
+//       state.rect.ey -= 10
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state
+//       })
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(node)
+//       })
+//       pen.animateFrames.push({
+//         duration: 200,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       break
+//     case 'leftRight':
+//       state.rect.x -= 10
+//       state.rect.ex -= 10
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.rect.x += 20
+//       state.rect.ex += 20
+//       pen.animateFrames.push({
+//         duration: 80,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.rect.x -= 20
+//       state.rect.ex -= 20
+//       pen.animateFrames.push({
+//         duration: 50,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.rect.x += 20
+//       state.rect.ex += 20
+//       pen.animateFrames.push({
+//         duration: 30,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(node)
+//       })
+//       break
+//     case 'heart':
+//       state.rect.x -= 5
+//       state.rect.ex += 5
+//       state.rect.y -= 5
+//       state.rect.ey += 5
+//       state.rect.width += 5
+//       state.rect.height += 10
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state
+//       })
+//       pen.animateFrames.push({
+//         duration: 400,
+//         linear: true,
+//         state: Node.cloneState(node)
+//       })
+//       break
+//     case 'success':
+//       state.strokeStyle = strokeStyle || '#237804'
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state
+//       })
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(node)
+//       })
+//       state.strokeStyle = '#237804'
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state
+//       })
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(node)
+//       })
+//       state.strokeStyle = strokeStyle || '#237804'
+//       state.fillStyle = fillStyle || '#389e0d22'
+//       pen.animateFrames.push({
+//         duration: 3000,
+//         linear: true,
+//         state
+//       })
+//       break
+//     case 'warning':
+//       state.strokeStyle = strokeStyle || '#fa8c16'
+//       state.fillStyle = fillStyle || '#fa8c16'
+//       state.lineWidth = 5
+//       state.dash = 2
+//       pen.animateFrames.push({
+//         duration: 500,
+//         linear: true,
+//         state
+//       })
+//       state.strokeStyle = strokeStyle || '#fa8c16'
+//       state.dash = 0
+//       state.lineWidth = 1
+//       state.fillStyle = '#ffffff'
+//       pen.animateFrames.push({
+//         duration: 500,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.strokeStyle = strokeStyle || '#fa8c16'
+//       state.dash = 2
+//       state.lineWidth = 5
+//       state.fillStyle = fillStyle || '#fa8c16'
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       break
+//     case 'error':
+//       state.strokeStyle = strokeStyle || '#cf1322'
+//       state.fillStyle = fillStyle || '#cf132222'
+//       state.lineWidth = 5
+//       state.dash = 2
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state
+//       })
+//       state.strokeStyle = strokeStyle || '#cf1322'
+//       state.fillStyle = '#ffffff'
+//       state.dash = 0
+//       state.lineWidth = 1
+//       pen.animateFrames.push({
+//         duration: 500,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.strokeStyle = strokeStyle || '#cf1322'
+//       state.fillStyle = fillStyle || '#cf132222'
+//       state.dash = 2
+//       state.lineWidth = 5
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       break
+//     case 'show':
+//       state.strokeStyle = strokeStyle || '#fa541c'
+//       state.rotate = -5
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.rotate = 5
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.rotate = 0
+//       pen.animateFrames.push({
+//         duration: 100,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       break
+//     case 'fade':
+//       state.strokeStyle = strokeStyle || '#fa541c'
+//       state.globalAlpha = 0.3
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.globalAlpha = 0.5
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.globalAlpha = 0.8
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       state.globalAlpha = 1
+//       pen.animateFrames.push({
+//         duration: 300,
+//         linear: true,
+//         state: Node.cloneState(state)
+//       })
+//       break
+//   }
+//   pen.animatePlay = true
+// }
+// export function onChangeAnimateLine (line, type) {
+//   line.animateType = type
+//   line.animatePlay = true
+// }
+// export function changeImage (dataImg, callback) {
+//   // const base64Img = document.createElement('base64Img')
+//   const canvas = document.createElement('canvas')
+//   const context = canvas.getContext('2d')
+//   // 创建新图片
+//   const img = new Image()
+//   img.src = dataImg
+//   img.addEventListener(
+//     'load',
+//     function () {
+//       // 绘制图片到canvas上
+//       canvas.width = img.width
+//       canvas.height = img.height
+//       context.drawImage(img, 0, 0)
+//
+//       // 将canvas的透明背景设置成白色
+//       const imageData = context.getImageData(
+//         0,
+//         0,
+//         canvas.width,
+//         canvas.height
+//       )
+//       for (let i = 0; i < imageData.data.length; i += 4) {
+//         // rgb大于250的透明度y均设置成0
+//         if (
+//           imageData.data[i] > 0 &&
+//           imageData.data[i + 1] > 0 &&
+//           imageData.data[i + 2] > 0
+//         ) {
+//           imageData.data[i + 3] = 200
+//         }
+//       }
+//       context.putImageData(imageData, 0, 0)
+//       const baseImg = canvas.toDataURL('image/png')// 返回base64
+//       if (typeof callback !== 'undefined') {
+//         if (callback) callback(baseImg)
+//       }
+//       img.remove()
+//     },
+//     false
+//   )
+// }
diff --git a/nezha-fronted/src/components/common/project/newTopologyL5.vue b/nezha-fronted/src/components/common/project/newTopologyL5.vue
new file mode 100644
index 000000000..2a90b9785
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/newTopologyL5.vue
@@ -0,0 +1,2324 @@
+<style>
+  @import "./L5/css/iconfont.css";
+  @import "./L5/css/props.css";
+</style>
+<template>
+  <div class="project-box list-page" v-my-loading="topologyLoading">
+    <div class="main-list" :style="{height: fromOverView ?'100%' : 'calc(100% - 30px)'}">
+      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
+        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 40px);display: inline-block">
+          <!--工具栏-->
+          <span v-if="!isPreview" class="project-topology-tool">
+          <el-dropdown trigger="click" size="small" placement="bottom-start">
+            <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
+              class="nz-icon nz-icon-arrow-down"></i></span>
+            <el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-box-select-top right-public-box-dropdown-top">
+              <div style="height: 450px"  v-my-loading="imgageLoading">
+                <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
+                         class="project-topology-add-node">
+                <!--<div class="drag-header">——</div>-->
+                <el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
+                  <el-collapse-item :title="item.group" :name="item.group">
+                    <template slot="title">
+                      <div style="display: flex;width: 100%;">
+                        <i class="nz-icon nz-icon-arrow-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
+                      </div>
+                    </template>
+                    <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
+                      <a
+                        :key="i"
+                        :title="btn.data.text"
+                        :draggable="btn.data"
+                        @dragstart.stop="onDrag($event, btn)"
+                        @mousedown="dragFlag=false"
+                        @mouseup="dragFlagChange(btn)"
+                        class="btn"
+                      >
+                        <img :src="btn.data.image" v-if="btn.data.image">
+                        <i v-else :class="`iconfont ${btn.icon}`"></i>
+                      </a>
+                      <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click="tooltipDelete(btn)"></i>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-card>
+                <div class="upload-pic-box" @click="uploadPicChange">
+                  <i class="el-icon-plus"></i>
+                  <span>
+                     {{ $t('overall.uploadCustomPicture') }}
+                  </span>
+                </div>
+              </div>
+            </el-dropdown-menu>
+          </el-dropdown>
+
+          <div class="flex middle special-select mb10"
+               style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
+            <div class="full pr10">
+              <el-select v-model="lineName" size="small"
+                         :popper-append-to-body="false"
+                         popper-class="right-box-select-top"
+                         @change="changeTopologyOpt(lineName,'lineName')">
+               <div slot="prefix">
+                <div class="icon-item" style="width: 100%;padding: 0">
+                  <svg>
+                    <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
+                      <path
+                        :d="penLineType.find((item,i)=>item.id==lineName).d"
+                      >
+                      </path>
+                    </g>
+                  </svg>
+                </div>
+              </div>
+                <el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
+                <el-option v-for="(item,index) in penLineType" :value="item.id" :key="index">
+                  <div class="icon-item" style="position: relative;width: 100%;padding: 0">
+                    <svg>
+                    <g fill="none" :stroke="(lineName==item.name)?'#ee9d3f': item.strokeColor " stroke-width="1">
+                    <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
+                    </g>
+                    </svg>
+                    <span style="position: absolute;left:60px;top: 0;">{{item.name}}</span>
+                  </div>
+                </el-option>
+              </el-select>
+            </div>
+          </div>
+
+          <topology-top-tool
+            v-if="editTopologyFlag&&toolShow.topTool"
+            :selection.sync="props"
+            @del="delPen"
+            :index="topologyIndex"
+            ref="topTool"
+            @toolShowChange="toolShowChange"
+            :cachesIndex="cachesIndex"
+            :redoIndexChange="redoIndexChange"
+            :toolShow="toolShow">
+          </topology-top-tool>
+
+        </span>
+          <span class="float-right">
+          <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+                  style="margin-right: 20px"
+          >
+             {{$t('overall.preview')}}
+           </button>
+            <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
+                    style="margin-right: 20px"
+            >
+             {{$t('project.topology.previewExit')}}
+           </button>
+           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveTopology"
+                   :disabled="prevent_opt.save"
+                   :class="{'nz-btn-disabled':prevent_opt.save}"
+                   style="margin-right: 20px">
+             {{$t('overall.save')}}
+           </button>
+           <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
+             {{$t('project.topology.exit')}}
+           </button>
+         </span>
+        </div>
+        <div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px">
+          <div>{{obj.name}}</div>
+          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
+            <pick-time
+              v-show="!editTopologyFlag"
+              ref="pickTime"
+              v-model="searchTime"
+              :refresh-data-func="dateChange"
+              :showTimePicker="false"
+              :use-chart-unit="false"
+              class="pickTime margin-r-10">
+            </pick-time>
+            <button v-has="'project_edit'" class="top-tool-btn margin-r-10" type="button" @click="editTopology" :title="$t('overall.edit')">
+              <i class="nz-icon nz-icon-edit"></i>
+            </button>
+            <button class="top-tool-btn" type="button" @click="changeScreen" :title="topoScreen? $t('dashboard.screen.exit') : $t('dashboard.screen')">
+              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
+            </button>
+          </div>
+        </div>
+        <div class="nz-table-list">
+          <!--悬浮network部分-->
+          <div class="network-info">
+            <div v-if="popDataShow.main">
+              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
+            </div>
+            <div v-if="popDataShow.info">
+              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
+            </div>
+          </div>
+          <div :class="['page topo-page',fromOverView?'overview-page':'']" :style="{
+            border: fromOverView ? 'none' :`1px solid $--color-text-regular`
+          }">
+            <!--画布部分-->
+            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full" @contextmenu="onContextMenu($event)"></div>
+            <!--设置属性-->
+            <div v-if="editTopologyFlag&&toolShow.attr && !fromOverView" class="props">
+              <canvas-props ref="CanvasProps"
+                            :index="topologyIndex"
+                            :imgArr = 'tools'
+                            :modules="modules"
+                            :selection.sync="props"
+                            @animate="animateCanvas"
+                            @change="onUpdateProps"
+                            @changeProjectTitle="changeProjectTitle"
+                            @del="delPen"
+                            @notModuleIDArrChange="notModuleIDArrChange">
+              </canvas-props>
+            </div>
+            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0 && !fromOverView" :style="this.contextmenu">
+              <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
+            </div>
+            <!--所有节点上的小图标-->
+            <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&!fromPrev"
+                 :key="index"
+                 v-show="(item.rect.y + offsetY  - (48*(fromOverView?penToolTipScale:1)) > -10) && (item.rect.center.x + offsetX - (24*(fromOverView?penToolTipScale:1)) > - 10)"
+                 :style="{position: 'absolute',top:item.rect.y + offsetY  - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x + offsetX - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
+                 class="network-pop"
+            >
+
+              <i
+                :ref="'modelTopId'+index"
+                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
+                @click="showNodeTools(index,item)"
+              >
+                <i style="cursor: pointer" class="nz-icon nz-icon-model"></i>
+              </i>
+              <!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item)  @click="popClick(item.id)" -->
+              <div v-for="(item1, index) in popData" :key="index">
+                <transition name="scaleTool">
+                  <i v-if="item.data.show"
+                     :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'error-model-stat':item.data.state[item1.id],'selpop':selpopIs(item,item1),'no-selPop':!selpopIs(item,item1),}"
+                     :style="{top:item1.top,left:item1.left}"
+                     :title="item1.title"
+                     @click="nodeTools(item,item1)"
+                  >
+                    <i class="nz-icon nz-icon-liubianxing"></i>
+                    <i :class="[item1.className,{'nz-icon':item1.className},'noMove']"></i>
+                  </i>
+                </transition>
+              </div>
+            </div>
+            <!--提示未添加module id的块-->
+            <div v-for="(item, index) in notModuleIDArr"
+                 v-if="editTopologyFlag&&!fromPrev"
+                 :key="index"
+                 :style="{
+             position: 'absolute',
+             top:item.rect.y + offsetY - 10 +'px',
+             left:item.rect.x + offsetX - 10+'px',
+             transform:'scale('+(fromOverView?penToolTipScale:1)+')',
+           }"
+            >
+              <div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
+              <div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
+              <div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
+              <div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
+            </div>
+            <!--节点连线相关的 tooltip-->
+            <div v-if="tooltipPosition.show&&!editTopologyFlag"
+                 ref="topoTooltip"
+                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+                 @mouseout="tooltipOut"
+                 @mouseover="tooltipOver"
+            >
+              <topoTooltip  class="nz-tooltip-bac" :chartDataParent="chartData" :filterTime="filterTime"/>
+            </div>
+            <div v-show="showNoData" class="topo-noData">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#nz-icon-no-data-project"></use>
+              </svg>
+              <div class="content">No data</div>
+            </div>
+          </div>
+          <!--endpoint-->
+          <transition name="right-box">
+            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
+                           @close="popDataShowUpdate('',true)">endpoint
+            </endpointTable>
+          </transition>
+          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
+            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)" :title="$t('overall.enlargement')"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+            <div class="zoom-option" @click="zoomMap(-0.25)" :title="$t('overall.shrink')"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--<div class="left-bottom" v-if="editTopologyFlag">-->
+    <!--<div class="title">小提示</div>-->
+    <!--<ul class="group">-->
+    <!--<li>编辑时：</li>-->
+    <!--<li>1.Ctrl + 鼠标移动：移动整个画布</li>-->
+    <!--<li>2.Ctrl + 鼠标滚轮：缩放</li>-->
+    <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
+    <!--</ul>-->
+    <!--</div>-->
+    <!--asset-->
+    <transition name="right-box">
+      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
+                  @close="popDataShowUpdate('',true)">alert
+      </assetTable>
+    </transition>
+    <!--alert-->
+    <transition name="right-box">
+      <alertTable v-if="popDataShow.alert" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
+                  @close="popDataShowUpdate('',true)">alert
+      </alertTable>
+    </transition>
+    <!--Custom picture-->
+    <el-dialog
+      :title="title"
+      :visible.sync="uploadPicShow"
+      width="auto"
+      @close="uploadPicShow = false"
+      destroy-on-close>
+      <el-row class="upload-pic-row">
+        <el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
+        <el-col :span="20">
+          <el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
+        </el-col>
+      </el-row>
+      <el-row class="upload-pic-row">
+        <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
+        <el-col :span="20">
+          <el-autocomplete
+            popper-class="right-box-select-top right-public-box-dropdown-top"
+            :maxlength="64" show-word-limit
+            class="inline-input"
+            v-model="uploadPic.unit"
+            :fetch-suggestions="querySearch"
+            size="small"
+          ></el-autocomplete>
+        </el-col>
+      </el-row>
+
+      <el-row class="upload-pic-row">
+        <el-col :span="4" class="upload-pic-label"> </el-col>
+        <el-col :span="20">
+          <div class="upload-body">
+            <el-upload
+              drag
+              class="upload-demo"
+              action=" "
+              :show-file-list="true"
+              :on-change="beforeAvatarUpload"
+              :auto-upload="false"
+              accept=".jpg,.png"
+              :limit="1"
+              :id="'upload-pic-show'">
+              <!--<div slot="tip" class="el-upload__tip" >{{$t('overall.importTipImg')}}</div>-->
+              <i class="nz-icon nz-icon-upload"></i>
+              <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
+            </el-upload>
+          </div>
+        </el-col>
+      </el-row>
+      <div class="upload-pic-row" style="text-align: center">
+            <span>
+               <button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
+             {{$t('project.topology.exit')}}
+           </button>
+
+              <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="imgUpload" :disabled="prevent_opt.save"
+                      :class="{'nz-btn-disabled':prevent_opt.save}"
+                      style="margin-right: 20px">
+             {{$t('overall.save')}}
+           </button>
+            </span>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
+import { Store as le5leStore } from 'le5le-store'
+// import { Topology, registerNode } from '@topology/core'
+import imgDefault from '@/components/common/project/L5/services/img'
+import {
+  Tools,
+  canvasRegister,
+  imageTemp,
+  myShape,
+  myAnchors,
+  myIconRect,
+  myTextRect,
+  onChangeAnimate,
+  onChangeAnimateLine,
+  myCubec,
+  myCubeAnchors
+} from './L5/services/canvas.js'
+import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
+
+import CanvasProps from './L5/CanvasProps'
+import topologyTopTool from './L5//topologyTopTool'
+import CanvasContextMenu from './L5/CanvasContextMenu'
+import popDataMain from './popData/Main'
+import popDataInfo from './popData/Info'
+import alertTable from './popData/alertTable'
+import assetTable from './popData/assetTable'
+import endpointTable from './popData/endpointTable'
+import topoTooltip from './L5/topoTooltip'
+import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
+import bus from '../../../libs/bus'
+
+// 注册到画布
+registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('myCube', myCubec, myCubeAnchors, null, null)
+
+const canvasOptions = {
+  rotateCursor: '/img/rotate.cur',
+  translateKey: 'None',
+  disableEmptyLine: true,
+  autoExpandDistance: 0,
+  minScale: 0.2,
+  scaleKey: -1,
+  keydown: 1
+}
+export default {
+  name: 'topologyL5',
+  data () {
+    const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
+    return {
+      theme,
+      title: this.$t('overall.uploadCustomPicture'),
+      objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
+      chartDataInfo: {},
+      topoPrevData: {}, // 预览数据
+      imgInit: false, // 判断图片是否加载完成
+      toolGroup: '基本形状',
+      editFlag: true,
+      tools: [...Tools],
+      props: {},
+      topologyLoading: false,
+      contextmenu: {
+        left: null,
+        top: null,
+        bottom: null
+      },
+      filterTime: [
+        bus.timeFormate(bus.getOffsetTimezoneData(-1), 'YYYY-MM-DD HH:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(), 'YYYY-MM-DD HH:mm:ss')
+      ],
+      showNoData: false,
+      topologyInfo: {
+        fontSize: 14,
+        align: 'left',
+        fontColor: '#000000',
+        opacity: 1,
+        name: ''
+      },
+      saveData: {},
+      oldTopologyData: '',
+      redoIndex: 0,
+      dataLength: 0,
+      editTopologyFlag: false,
+      searchTime: bus.getTimezontDateRange(),
+      activeNames: [],
+      topologyIndex: 0,
+      iconArray: [],
+      imgageLoading: false,
+      imageSave: false,
+      toolShow: {
+        node: true,
+        attr: true,
+        topTool: true,
+        nodeCord: [0, 0],
+        attrCord: [0, 0],
+        height: 500
+      },
+      dragFlag: true,
+      modules: [],
+      allModules: [],
+      projectInfo: {
+        title: '',
+        id: '',
+        remark: '',
+        alertStat: [1, 2, 3],
+        moduleMum: 6,
+        loading: true
+      },
+      timer: null, // 处理project短时间呢频繁变更的定时器
+      timer2: null, // 处理平移画布显示iconState的定时器
+      timer3: null, // 处理tooltip的显示定时器
+      timer4: null,
+      nodesArr: [],
+      notModuleIDArr: [],
+      popData: [
+        {
+          top: '-41px',
+          left: '-23px',
+          className: 'nz-icon-endpoint',
+          id: 'endpoint',
+          title: this.$t('project.topology.endpoint')
+        },
+        { top: '-41px', left: '22px', className: 'nz-icon-asset', id: 'asset', title: this.$t('asset.asset') },
+        { top: '-2px', left: '45px', className: '', id: 'other', title: '' },
+        { top: '37px', left: '22px', className: '', id: 'other', title: '' },
+        { top: '37px', left: '-23px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
+        { top: '-2px', left: '-45px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') }
+      ],
+      popDataShow: {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      },
+      moduleId: '',
+      moduleName: '',
+      tooltipPosition: {
+        top: 0,
+        left: 0,
+        show: false,
+        height: 250
+      },
+      chartData: {},
+      chartGetData: [],
+      penLineType: [
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind', strokeColor: theme == 'light' ? 'black' : '#BEBEBE'},
+      ],
+      lineName: 'curve',
+      cachesIndex: 0,
+      projectInfoShow: false,
+      projectAlertShow: false,
+      previewShow: false,
+      penId: undefined,
+      penToolTipScale: 1,
+      oldScale: 1,
+      uploadPicShow: false,
+      imgWidth: 0,
+      imgHeight: 0,
+      uploadPic: {
+        name: '',
+        unit: ''
+      },
+      unitArr: [],
+      topoScreenState: '', // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
+      isPreview: false,
+      previewData: '',
+      offsetX: 0,
+      offsetY: 0,
+      prevData: null
+    }
+  },
+  components: {
+    'canvas-props': CanvasProps,
+    topologyTopTool,
+    popDataMain,
+    popDataInfo,
+    alertTable,
+    assetTable,
+    endpointTable,
+    topoTooltip,
+    CanvasContextMenu
+  },
+  props: {
+    topologyIndexF: {
+      default: 0
+    },
+    obj: {},
+    showTopTools: {
+      type: Boolean,
+      default: true
+    },
+    fromOverView: {
+      type: Boolean,
+      default: false
+    },
+    fromPrev: {
+      type: Boolean,
+      default: false
+    },
+    fromChart: {
+      type: Boolean,
+      default: false
+    },
+    topoPrevDataS: {
+
+    }
+  },
+  watch: {
+    topologyIndexF: {
+      immediate: true,
+      handler (n) {
+        this.topologyIndex = n
+      }
+    },
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n, o) {
+        if (n && n.id) {
+          // if (getTopology(this.topologyIndex)) {
+          //   getTopology(this.topologyIndex).destroy()
+          //   setTopology(this.topologyIndex, null)
+          // }
+          if (!this.objChange) {
+            this.editTopologyFlag = false
+            this.topologyLoading = true
+            this.projectInfoShow = false
+            this.projectAlertShow = false
+            if (n.id) {
+              this.getProjectData(n)
+            }
+            this.topologyLoading = true
+            this.init()
+            this.timer = null
+            this.objChange = true
+          } else {
+            if (!this.timer) {
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
+            } else {
+              clearTimeout(this.timer)
+              this.timer = setInterval(() => {
+                if (this.objChange) { return }
+                this.editTopologyFlag = false
+                this.topologyLoading = true
+                this.projectInfoShow = false
+                this.projectAlertShow = false
+                if (n.id) {
+                  this.getProjectData(n)
+                }
+                clearTimeout(this.timer)
+                this.timer = null
+                this.objChange = true
+                this.topologyLoading = true
+                this.init()
+              }, 100)
+            }
+          }
+        }
+      }
+    },
+    topoScreen (n) {
+      getTopology(this.topologyIndex).resize()
+      getTopology(this.topologyIndex).centerView()
+      // getTopology(this.topologyIndex).fitView(30)
+    },
+    shrink (n) {
+      const timer = setTimeout(() => {
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        getTopology(this.topologyIndex).canvasPos = domRect
+        getTopology(this.topologyIndex).resize()
+        getTopology(this.topologyIndex).centerView()
+        clearTimeout(timer)
+      }, 500)
+    }
+  },
+  computed: {
+    topoScreen () {
+      return this.$store.getters.getShowTopoScreen
+    },
+    shrink () {
+      return this.$store.getters.getIsShrink
+    }
+  },
+  created () {
+    canvasRegister()
+  },
+  mounted () {
+    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
+      this.addNodeInit()
+    }
+    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
+    window.addEventListener('resize', this.winResize)
+    window.addEventListener('click', this.contextmenuNone)
+  },
+  methods: {
+    init () {
+      canvasOptions.on = this.onMessage
+      this.reload()
+    },
+
+    reload () {
+      this.topologyLoading = true
+      this.getTopologyData().then((data) => {
+        this.openTopologyData(data).then(() => {
+          this.initPens(data)
+        })
+      })
+    },
+    initPens (data) {
+      // 获取对应的值 给节点 连线添加对应动画
+      this.lineName = data.lineName ? data.lineName : this.lineName
+      this.chartGetData = []
+      const axiosArr = []
+      const promiseArr = []
+      let pensPromise = (pen, arr, index) => {
+        return new Promise((resolve, reject) => {
+          Promise.all(arr).then((res) => {
+            this.chartGetData[index].res = JSON.parse(JSON.stringify(this.computeData(res, pen.data.aggregation, pen)))
+            this.setAnimation(pen, this.chartGetData[index].res)
+            resolve()
+          })
+        })
+      }
+      const endTime = this.filterTime[1]
+      const startTime = this.filterTime[0]
+      const step = bus.getStep(startTime, endTime)
+      data.pens && data.pens.forEach((item, index) => {
+        this.chartGetData.push({ id: item.id, res: [] })
+        let arr = []
+        if (item.data.valueMappingShow) {
+          arr = item.data.expressArr.map((ele) => {
+            let query = ele
+            if (!query) {
+              return new Promise(resolve => {
+                resolve({ data: '', status: 'no query' })
+              })
+            }
+            query = encodeURIComponent(query)
+            query += '&nullType=' + 'null'
+            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+          })
+        }
+        axiosArr.push({ item, arr })
+        promiseArr.push(pensPromise(item, arr, index))
+      })
+      Promise.all(promiseArr).then((res) => {
+        if (!getTopology(this.topologyIndex)) {
+          return
+        }
+        getTopology(this.topologyIndex).open(data)
+        getTopology(this.topologyIndex).lock(1)
+        this.objChange = false
+        let flag = false
+        const position = {
+          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+        }
+        this.oldScale = getTopology(this.topologyIndex).data.scale
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (flag) {
+            return
+          }
+          if (item.rect.ex > position.x || item.rect.ey > position.y) {
+            if (this.fromOverView) {
+              getTopology(this.topologyIndex).fitView(20)
+            }
+            flag = true
+          }
+        })
+        getTopology(this.topologyIndex).resize()
+        getTopology(this.topologyIndex).centerView()
+        this.penToolTipScale = getTopology(this.topologyIndex).data.scale
+        const timer = setTimeout(() => {
+          getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => {
+            if (item.animatePlay) {
+              item.stopAnimate()
+              const timer1 = setTimeout(() => {
+                item.startAnimate()
+                clearTimeout(timer1)
+              })
+            }
+          })
+          clearTimeout(timer)
+        }, 100)
+        // if(this.fromPrev){
+        //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
+        // }
+        // getTopology(this.topologyIndex).fitView();
+        this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
+        this.getNodesArr()
+        pensPromise = null
+      })
+    },
+    dateChange () {
+      // const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
+      // this.setSearchTime(nowTimeType.type, nowTimeType.value)
+      this.searchTime = bus.getTimezontDateRange()
+      this.filterTime[0] = bus.timeFormate(this.searchTime[0], 'YYYY-MM-DD HH:mm:ss')
+      this.filterTime[1] = bus.timeFormate(this.searchTime[1], 'YYYY-MM-DD HH:mm:ss')
+      this.reload()
+    },
+    setSearchTime (type, val) { // 设置searchTime
+      if (type === 'minute') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'm')
+      } else if (type === 'hour') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'h')
+      } else if (type === 'date') {
+        const startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val), 'YYYY-MM-DD HH:mm:ss')
+        const endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())), 'YYYY-MM-DD HH:mm:ss')
+        this.$set(this.searchTime, 0, startTime)
+        this.$set(this.searchTime, 1, endTime)
+        this.$set(this.searchTime, 2, val + 'd')
+      }
+      this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
+    },
+    // 打开topology数据
+    openTopologyData (data) {
+      return new Promise((resolve, reject) => {
+        if (!document.getElementById('topology-canvas' + this.topologyIndexF)) {
+          return
+        }
+        data = this.$loadsh.cloneDeep(data)
+        if (!getTopology(this.topologyIndex)) {
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          // canvas.open(data)
+          setTopology(this.topologyIndex, canvas)
+          canvas = null
+        } else {
+          // getTopology(this.topologyIndex).open(data)
+        }
+        this.topologyLoading = false
+        if (!getTopology(this.topologyIndex).data.name) {
+          getTopology(this.topologyIndex).data.name = this.obj.name
+        }
+        getTopology(this.topologyIndex).data.projectId = this.obj.id
+        // getTopology(this.topologyIndex).lock(1)
+
+        this.getModule()// 获取module
+        resolve()
+      })
+    },
+    // 获取topology数据
+    getTopologyData () {
+      return new Promise(resolve => {
+        if (this.fromPrev) {
+          resolve(this.topoPrevDataS)
+        }
+        this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
+          if (!res.data) {
+            return
+          }
+          let data = JSON.parse(JSON.stringify(res.data.topo))
+          if (!res.data.topo || !res.data.topo.pens.length) {
+            this.showNoData = true
+          } else {
+            this.showNoData = false
+          }
+          if (this.isPreview) {
+            data = this.previewData
+          }
+          // data = JSON.parse(localStorage.getItem('topoData'))
+          if (!res.data.topo || !data.pens) {
+            data = {
+              bkColor: '#FFFFFF00',
+              gridSize: 10,
+              gridColor: '#ededed',
+              lineWidth: 1,
+              ruleColor: '#4e4e4e'
+            }
+            this.projectInfoShow = true
+            this.projectAlertShow = true
+            this.saveData = JSON.parse(JSON.stringify(data))
+            this.topologyInfo.name = this.obj.name
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
+            resolve(data)
+            data = null
+          } else {
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
+            if (data.data) {
+              this.topologyInfo = {
+                fontSize: data.data.fontSize,
+                align: data.data.align,
+                fontColor: data.data.fontColor,
+                opacity: data.data.opacity,
+                name: data.name
+              }
+            } else {
+              this.topologyInfo = {
+                fontSize: 14,
+                align: 'left',
+                fontColor: '#000000',
+                opacity: 1,
+                name: ''
+              }
+            }
+            if (this.fromOverView) { // 优化从首页来的加载速度
+              const arr = data.pens.filter(item => !item.type)
+              this.addNodeInit(arr)
+            }
+            this.timer4 = setInterval(() => {
+              if (!this.imgInit) {
+                return
+              }
+              const promiseArr = []
+              for (let i = 0; i < data.pens.length; i++) {
+                const line = data.pens[i]
+                if (line.type === 1) {
+                  if (!data.pens.find(item => item.id === line.from.id) || !data.pens.find(item => item.id === line.to.id)) {
+                    data.pens.splice(i, 1)
+                    i--
+                  }
+                }
+              }
+              data.pens.forEach(item => {
+                if (item.type === 0 && item.data.imageId) {
+                  const img = this.iconArray.find(item1 => item1.id == item.data.imageId)
+                  item.image = img ? img.image : imgDefault
+                }
+                if (item.type === 0) {
+                  // promiseArr.push(this.$get('stat/module/abnormal', { moduleId: item.data.moduleId }))
+                  item.data.state = {}
+                  item.data.state.asset = false
+                  item.data.state.endpoint = false
+                  item.data.state.alert = false
+                } else {
+                  // promiseArr.push({ type: 1 })
+                  item.data.state = {}
+                  item.data.state.asset = false
+                  item.data.state.endpoint = false
+                  item.data.state.alert = false
+                }
+              })
+
+              if (!data.data) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else if (!JSON.stringify(data.data.projectInfo)) {
+                this.projectInfoShow = true
+                this.projectAlertShow = true
+              } else {
+                this.projectInfoShow = data.data.projectInfo
+                this.projectAlertShow = data.data.alertInfo
+              }
+              if (!data.bkImage) {
+                data.bkImage = undefined
+              }
+              if (data.bkColor === '#FFFFFF') {
+                data.bkColor = '#FFFFFF00'
+              }
+              Promise.all(promiseArr).then(res => {
+                res[0].data.list.forEach((module, index) => {
+                  const item = data.pens.find(pens => module.id === pens.data.moduleId)
+                  if (item.type === 0 && item.data.state && res[index].data.list.length) {
+                    item.data.state.error = item.data.error = !module.state
+                    item.data.state.asset = !!module.asset
+                    item.data.state.alert = !!module.alert
+                    item.data.state.endpoint = !!module.endpoint
+                  } else {
+                    item.data.state = {
+                      error: false,
+                      asset: 0,
+                      alert: 0,
+                      endpoint: 0
+                    }
+                  }
+                })
+                this.saveData = JSON.parse(JSON.stringify(data))
+                resolve(data)
+                clearInterval(this.timer4)
+                this.timer4 = null
+              }).catch(res => {
+                this.saveData = JSON.parse(JSON.stringify(data))
+                resolve(data)
+                clearInterval(this.timer4)
+                this.timer4 = null
+              })
+            }, 2000)
+          }
+        })
+      })
+    },
+    // 赋值动画
+    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
+      let maxLevel = 0
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
+          }
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              pen.data.valueMapping.forEach((item, index) => {
+                if (item.value === 'base') { return }
+                if (queryItem.showValue > item.value) {
+                  queryItem.level = item.level
+                  if (maxLevel < item.level) {
+                    maxLevel = item.level
+                  }
+                }
+              })
+            })
+          }
+        })
+      }
+      if (maxLevel !== 0) {
+        if (pen.type === 0) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.fontColor = selLevel.color.text
+            pen.fillStyle = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.bkType = 0
+          }
+          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+        } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
+          const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
+          if (selLevel) {
+            pen.animateColor = selLevel.color.fill
+            pen.strokeStyle = selLevel.color.line
+            pen.animateType = selLevel.animateType
+            pen.fontColor = selLevel.color.text
+          }
+          onChangeAnimateLine(pen, pen.animateType)
+        }
+      } else {
+        if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimate(pen, pen.animateType)
+        } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
+          onChangeAnimateLine(pen, pen.animateType)
+        }
+      }
+    },
+    computeData (res, type, pen) { // 处理别名 以及 根据type显示对应的值
+      if (res.length > 0) {
+        res.forEach((response, innerPos) => {
+          if (response.status !== 'success') {
+            return
+          }
+
+          if (response.data.result) {
+            response.data.result.forEach((queryItem, resIndex) => {
+              // 图表中每条线的名字,后半部分
+              let host = ''// up,
+              if (queryItem.metric.__name__) {
+                host = `${queryItem.metric.__name__}{`// up,
+              }
+              const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+              // 设置时间-数据格式对
+              let dpsArr = []
+              dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+              dpsArr = dpsArr.map(item => {
+                return [item[0], [item[1][0], Number(item[1][1])]]
+              })
+              // 判断是否有数据, && tagsArr.length > 0
+              if (dpsArr.length) {
+                tagsArr.forEach((tag, i) => {
+                  if (tag !== '__name__') {
+                    host += `${tag}="${queryItem.metric[tag]}",`
+                  }
+                })
+                if (host.endsWith(',')) {
+                  host = host.substr(0, host.length - 1)
+                }
+                if (queryItem.metric.__name__) {
+                  host += '}'
+                }
+                if (!host || host === '') {
+                  host = pen.data.expressArr[innerPos]
+                }
+                // 处理legend别名
+                let alias = dealLegendAlias(host, pen.data.legends[innerPos])
+                if (!alias || alias === '') {
+                  alias = host
+                }
+                queryItem.legend = { name: host + '-' + pen.data.legends[innerPos] + '-' + resIndex, alias: alias }
+                queryItem.showValue = getMetricTypeValue(queryItem.values, type)
+                // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+              }
+            })
+          }
+        })
+      }
+      return res
+    },
+    // 获取project Info
+    getProjectData (n) {
+      // 获取projectInfo
+      this.projectInfo.loading = true
+      this.$get('monitor/project/' + n.id).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.projectInfo = { ...this.projectInfo, ...response.data }
+          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
+          if (!this.projectInfo.total) {
+            this.projectInfo.total = 0
+          }
+        }
+      })
+    },
+    // Severity Label
+    returnSeverityLabel (key) {
+      return this.$t(this.$CONSTANTS.alertMessage.severityData.find(s => { return s.value == key }).label)
+    },
+    // 获取module
+    getModule () {
+      this.projectInfo.loading = true
+      this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
+        if (response.code === 200) {
+          this.projectInfo.loading = false
+          this.allModules = JSON.parse(JSON.stringify(response.data.list))
+          this.modulesDiff()
+        }
+      })
+    },
+
+    getNodesArr () {
+      if (!getTopology(this.topologyIndex)) return
+      let arr = []
+      this.offsetX = getTopology(this.topologyIndex).data.x
+      this.offsetY = getTopology(this.topologyIndex).data.y
+      arr = getTopology(this.topologyIndex).data.pens.filter(item => {
+        if (!item.data) {
+          item.data = {
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            expressArr: [],
+            expressAllArr: [],
+            state: {}
+          }
+        }
+        return item.type === 0
+      })
+      // 打开动画 是否更新顶部图标
+      this.nodesArr = arr.map(item => {
+        return {
+          rect: item.rect,
+          data: item.data
+        }
+      })
+      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+      arr = null
+    },
+
+    modelTopClick (item, index) {
+
+    },
+    // 摘除已选择的module
+    modulesDiff (data) {
+      this.modules = this.allModules
+      if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens) {
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (item.type == 0) {
+            this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
+          }
+        })
+      }
+      if (data && data.data && data.data.moduleId) {
+        this.modules.unshift({ id: data.data.moduleId, name: data.data.moduleName })
+      }
+    },
+
+    // 显示module的工具
+    showNodeTools (index, pen) {
+      this.nodesArr.forEach((item, i) => {
+        item.data.show = i === index
+      })
+    },
+
+    // 具体内容点击
+    nodeTools (node, tool) {
+      this.moduleId = node.data.moduleId
+      this.moduleName = node.data.moduleName
+      if (tool.id === 'total') {
+        this.popDataShowUpdate('', false, node)
+        return
+      }
+      const timer = setTimeout(() => {
+        this.popDataShowUpdate(tool.id, false, node)
+        clearTimeout(timer)
+      }, 100)
+    },
+
+    popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏
+      this.popDataShow = {
+        endpoint: false,
+        asset: false,
+        total: false,
+        other: false,
+        info: false,
+        alert: false,
+        main: false
+      }
+      if (key === 'total') {
+        this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) }
+      }
+      this.$nextTick(() => {
+        this.popDataShow[key] = true
+      })
+      if (flag) { // 处理关闭后 缩放后显示工具按钮的问题
+        this.moduleId = ''
+        this.showNodeTools('')
+      }
+      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
+        this.showNodeTools('')
+      }
+    },
+
+    /* topology 方法 */
+    onDrag (event, node) {
+      this.dragFlag = false
+      const timer = setTimeout(() => {
+        this.dragFlag = true
+        clearTimeout(timer)
+      }, 100)
+      event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } }))
+    },
+    dragFlagChange (node) {
+      getTopology(this.topologyIndex).addNode(
+        {
+          ...node.data,
+          rect: {
+            ...node.data.rect,
+            x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50,
+            y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50
+          },
+          data: { imageId: node.data.imageId }
+        })
+      const timer = setTimeout(() => {
+        this.dragFlag = true
+        clearTimeout(timer)
+      }, 100)
+    },
+
+    onMessage (event, data, e) {
+      // console.log('onMessage', event, data)
+      // console.log(getTopology(this.topologyIndex))
+      this.notModuleIDArr = []
+      // this.toolShow.attr = false
+      // this.toolShow.topTool = false
+      // this.$nextTick(() => {
+      //   this.toolShow.attr = true
+      //   this.toolShow.topTool = true
+      // })
+      if (data) {
+        this.notModuleIDArr.forEach(item => {
+          if (item.id === data.id) {
+            item.rect = data.rect
+          }
+        })
+      }
+      if (!Array.isArray(data) && data) { // 判断不是数组 提前个data配置好节点属性
+        if (data.type === 0 && !data.data.moduleId) {
+          if (!data.fillStyle) {
+            data.fillStyle = '#FFFFFF00'
+          }
+          data.data = {
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            animatePlay: false,
+            fillStyle: data.fillStyle || '#ffffff',
+            strokeStyle: data.strokeStyle || '#ffffff',
+            gradientColor: '#bae7ff',
+            gradientType: 0,
+            lineWidth: this.nodeDefaultWidth(data.name),
+            iconToolState: true,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc',
+            expressArr: [''],
+            expressAllArr: [''],
+            legends: [''],
+            legendsAll: [''],
+            tooltipShow: true,
+            valueMappingShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            url: '',
+            ...data.data
+          }
+        } else if (data.type == 1 && !data.data) {
+          // 连线是否自动计算锚点
+          // data.manualCps=true;
+          data.animateColor = '#FA901C'
+          data.toArrowColor = '#000000'
+          data.data = {
+            animatePlay: false,
+            strokeStyle: data.strokeStyle,
+            animateColor: data.animateColor,
+            arrowColor: '#000000',
+            fromArrowColor: '#000000',
+            toArrowColor: '#000000',
+            lineWidth: 1,
+            // chart 配置项
+            valueMapping: [{
+              color: {
+                line: '#000000',
+                fill: '#ffffff',
+                text: '#000000'
+              },
+              value: 'base',
+              animateType: 'base',
+              level: 0,
+              base: true
+            }],
+            valueMappingSort: 'asc', /* desc */
+            expressArr: [''],
+            expressAllArr: [''],
+            legends: [''],
+            legendsAll: [''],
+            tooltipShow: true,
+            valueMappingShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            moduleName: '',
+            url: ''
+          }
+        }
+        if (data.type === 0 || data.type === 1) {
+          data.lineWidth = data.data.lineWidth
+        }
+      }
+
+      switch (event) {
+        case 'moveInNode':
+        case 'moveInLine':
+          if (this.timer3) {
+            clearTimeout(this.timer3)
+            this.timer3 = null
+          }
+          this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
+          this.tooltipPosition.show = false
+          const timer = setTimeout(() => {
+            this.tooltipPosition.show = true
+            let ePosition = window.ePosition
+            let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
+            let boxHeight = document.getElementsByClassName('page')[0].offsetHeight
+            this.tooltipPosition.left = ePosition.layerX + 20
+            this.tooltipPosition.top = ePosition.layerY
+            this.$nextTick(() => {
+              if (this.$refs.topoTooltip) {
+                if ((boxWidth / 2) > ePosition.layerX) {
+                  this.tooltipPosition.left = ePosition.layerX + 20
+                } else {
+                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
+                }
+                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                  this.tooltipPosition.top = ePosition.layerY
+                } else {
+                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
+                }
+              }
+              ePosition = null
+              boxWidth = null
+              boxHeight = null
+            })
+            clearTimeout(timer)
+          }, 100)
+          break
+        case 'moveOutNode':
+        case 'moveOutLine':
+          // this.tooltipPosition.show=false;
+          // return
+          if (!this.timer3) {
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          } else {
+            clearTimeout(this.timer3)
+            this.timer3 = setTimeout(() => {
+              this.tooltipPosition.show = false
+              this.timer3 = null
+            }, 50)
+          }
+          break
+      }
+      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+      const timer = setTimeout(() => {
+        switch (event) {
+          case 'node':
+          case 'addNode':
+            this.modulesDiff(data)
+            if (data.data.expressArr.length === 0 && event !== 'node') {
+              data.data.expressArr.push('')
+              data.data.legends.push('')
+            }
+            if (data.data.expressAllArr.length === 0 && event !== 'node') {
+              data.data.expressAllArr.push('')
+              data.data.legendsAll.push('')
+            }
+            this.props = {
+              node: data,
+              line: null,
+              multi: false,
+              expand: this.props.expand,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
+            break
+          case 'line':
+          case 'addLine':
+            this.props = {
+              node: null,
+              line: data,
+              multi: false,
+              nodes: null,
+              locked: data.locked,
+              pen: data,
+              pens: null
+            }
+            this.$nextTick(() => {
+              if (this.$refs.CanvasProps) {
+                if (this.penId !== data.id) {
+                  this.$refs.CanvasProps.tab = '1'
+                }
+                this.penId = data.id
+              }
+            })
+            this.$refs.CanvasProps && (this.$refs.CanvasProps.loading = true)
+            break
+          case 'multi':
+            this.props = {
+              node: null,
+              line: null,
+              multi: true,
+              nodes: data.length > 1 ? data : null,
+              locked: this.getLocked({ nodes: data }),
+              pen: null,
+              pens: data.length > 1 ? data : null
+            }
+            break
+          case 'space':
+            this.penId = undefined
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          case 'moveOut':
+            break
+          case 'moveNodes':
+          case 'resizeNodes':
+            if (data.length > 1) {
+              this.props = {
+                node: null,
+                line: null,
+                multi: true,
+                nodes: data,
+                locked: this.getLocked({ nodes: data }),
+                pen: null,
+                pens: null
+              }
+            } else {
+              this.props = {
+                node: data[0],
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: data[0],
+                pens: null
+              }
+            }
+            break
+          case 'resize': {
+            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+            let domRect = dom ? dom.getBoundingClientRect() : {}
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
+            dom = null
+            domRect = null
+            break
+          }
+          case 'scale': {
+            if (this.$refs.topTool) {
+              this.$refs.topTool.scaleNum = parseInt(data * 100)
+            }
+            let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+            let domRect = dom ? dom.getBoundingClientRect() : {}
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
+            dom = null
+            domRect = null
+            break
+          }
+          case 'locked': {
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          }
+          case 'delete': {
+            this.props = {
+              node: null,
+              line: null,
+              multi: false,
+              nodes: null,
+              locked: false,
+              pen: null,
+              pens: null
+            }
+            break
+          }
+        }
+        switch (event) {
+          case 'node':
+          case 'line':
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.moduleId = ''
+            this.showNodeTools('')
+            this.popDataShowUpdate('', false)
+            if (!this.editTopologyFlag) {
+              getTopology(this.topologyIndex)
+            }
+            break
+        }
+        switch (event) {
+          case 'space':
+          case 'scale':
+          case 'translate':
+            this.getNodesArr()
+            // if(!this.timer2){
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }else{
+            //   clearTimeout(this.timer2);
+            //   this.timer2=setTimeout(()=>{
+            //     this.getNodesArr();
+            //     this.timer2=null
+            //   },300)
+            // }
+            break
+        }
+        clearTimeout(timer)
+      }, 0)
+    },
+
+    getLocked (data) {
+      let locked = true
+      if (data.nodes && data.nodes.length) {
+        for (const item of data.nodes) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+      if (locked && data.lines) {
+        for (const item of data.lines) {
+          if (!item.locked) {
+            locked = false
+            break
+          }
+        }
+      }
+
+      return locked
+    },
+
+    onUpdateProps (node) {
+      // 如果是node属性改变，需要传入node，重新计算node相关属性值
+      // 如果是line属性改变，无需传参
+      getTopology(this.topologyIndex).updateProps(true, [node])
+    },
+
+    handleAvatarSuccess () {
+
+    },
+    beforeAvatarUpload (file, fileList) {
+      const this_ = this
+      const isJPG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')
+      const isLt2M = (file.size / 1024 / 1024) < 2
+      if (!isJPG) {
+        this.$message.error(this_.$t('project.topology.imgFormat'))
+        fileList = fileList.splice(fileList.length - 1, 1)
+        return false
+      }
+      if (!isLt2M) {
+        this.$message.error(this_.$t('project.topology.imgSize'))
+        fileList = fileList.splice(fileList.length - 1, 1)
+        return false
+      }
+      new Promise(function (resolve, reject) {
+        const width = 0
+        const height = 0
+        const _URL = window.URL || window.webkitURL
+        const img = new Image()
+        img.onload = function () {
+          const valid = img.width > width && img.height > height
+          this_.imgWidth = img.width
+          this_.imgHeight = img.height
+          valid ? resolve() : reject()
+        }
+        img.src = _URL.createObjectURL(file.raw)
+      }).then(() => {
+        if (isJPG) {
+          this.file = file.raw
+        }
+        return file.raw
+      }, () => {
+        this.$message.error(this_.$t('project.topology.imgMeasure'))
+        return Promise.reject()
+      })
+      return false
+    },
+
+    toolShowChange (attr) {
+      this.toolShow[attr] = !this.toolShow[attr]
+    },
+    /* topology 方法 */
+    end (v) {
+
+    },
+    /* tools 方法 */
+
+    imgUpload () {
+      const this_ = this
+      if (!this.imageSave) {
+        this.imageSave = true
+      }
+      if (!this.uploadPic.unit) {
+        this.$message({
+          message: this_.$t('project.topology.unitError'),
+          type: 'error'
+        })
+        return
+      }
+      if (!this.file) {
+        this.$message({
+          message: this_.$t('project.topology.imgError'),
+          type: 'error'
+        })
+        return
+      }
+      this.upload()
+    },
+    upload () {
+      const form = new FormData()
+      form.append('file', this.file)
+      if (this.uploadPic.name) {
+        form.append('name', this.uploadPic.name)
+      } else {
+        form.append('name', this.file.name.substring(0, this.file.name.lastIndexOf('.')))
+      }
+      form.append('unit', this.uploadPic.unit)
+      form.append('width', this.imgWidth)
+      form.append('height', this.imgHeight)
+      this.$post('monitor/project/topo/icon', form, { 'Content-Type': 'multipart/form-data' }).then(res => {
+        this.imageSave = false
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          this.uploadPicShow = false
+          this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
+            dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
+              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
+              this.iconArray.push({
+                ...iconInfo.data.list[0],
+                image: data.data
+              })
+              if (group) {
+                group.children.push({
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: res.data.imageName,
+                    image: data.data,
+                    imageId: res.data.id,
+                    unit: this.uploadPic.unit,
+                    rect: {
+                      width: data.width,
+                      height: data.height
+                    }
+                  }
+                })
+              } else {
+                this.tools.push({
+                  group: this.uploadPic.unit,
+                  children: [{
+                    ...imageTemp,
+                    data: {
+                      ...imageTemp.data,
+                      text: res.data.imageName,
+                      image: data.data,
+                      imageId: res.data.id,
+                      unit: this.uploadPic.unit,
+                      rect: {
+                        width: data.width,
+                        height: data.height
+                      }
+                    }
+                  }]
+                })
+              }
+            })
+          })
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+
+    delImg (item) {
+      this.$delete('monitor/project/topo/icon?ids=' + item.data.imageId).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.addNodeInit()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    delCollpseTitle (item) {
+      this.$delete('monitor/project/topo/iconUnit?unit=' + item.group).then(res => {
+        if (res.code == 200) {
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          this.addNodeInit()
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    tooltipDelete (item) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.delImg(item)
+      })
+    },
+    tooltipDeleteTitle (item) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.delCollpseTitle(item)
+      })
+    },
+    addNodeInit (imgidList) {
+      if (!this.fromOverView) {
+        this.$get('monitor/project/topo/icon').then(res => {
+          this.imgageLoading = true
+          this.tools = [...Tools]
+          let imgArr = []
+          let promiseArr = []
+          res.data.list.forEach((item, index) => {
+            item.imageName = item.name
+            delete item.name
+            promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
+            imgArr.push({ ...item })
+          })
+          Promise.all(promiseArr).then((res2, header) => {
+            this.iconArray = [...res.data.list]
+            this.iconArray.forEach((item, index) => {
+              item.image = res2[index].data
+              const group = this.tools.find(tool => tool.group === item.unit)
+              if (group) {
+                group.children.push({
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: item.imageName,
+                    image: res2[index].data,
+                    imageId: item.id,
+                    unit: item.unit,
+                    rect: {
+                      width: res2[index].width === -1 ? 100 : res2[index].width,
+                      height: res2[index].height === -1 ? 100 : res2[index].height
+                    }
+                  }
+                })
+              } else {
+                this.tools.push({
+                  group: item.unit,
+                  children: [{
+                    ...imageTemp,
+                    data: {
+                      ...imageTemp.data,
+                      text: item.imageName,
+                      image: res2[index].data,
+                      imageId: item.id,
+                      unit: item.unit,
+                      rect: {
+                        width: res2[index].width === -1 ? 100 : res2[index].width,
+                        height: res2[index].height === -1 ? 100 : res2[index].height
+                      }
+                    }
+                  }]
+                })
+              }
+            })
+
+            this.imgInit = true
+            this.imgageLoading = false
+            imgArr = null
+            promiseArr = null
+          })
+        })
+      } else {
+        this.imgageLoading = true
+        this.$get('monitor/project/topo/icon').then((imageAllId) => {
+          let promiseArr = []
+          if (!imageAllId || !imageAllId.data) {
+            return
+          }
+          imgidList.forEach((item, index) => {
+            if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
+              promiseArr.push(topologyImg['img' + item.data.imageId] || dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
+            } else if (item.data.imageId) {
+              promiseArr.push(imgDefault)
+            } else {
+              promiseArr.push('')
+            }
+          })
+          Promise.all(promiseArr).then((res2) => {
+            this.iconArray = imgidList.map(item => {
+              return {
+                id: item.data.imageId
+              }
+            })
+            this.iconArray.forEach((item, index) => {
+              if (item.id) {
+                item.image = res2[index].data
+              }
+            })
+            this.imgInit = true
+            this.imgageLoading = false
+            imgidList = null
+            promiseArr = null
+          })
+        })
+      }
+    },
+
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve, reject) => {
+          this.$axios
+            .get(url)
+            .then((res) => {
+              const imageInfo = {
+                data: ('data:image/jpeg;base64,' + res.data),
+                // width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
+                // height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
+                width: res.headers.width === -1 ? 100 : Number(res.headers.width),
+                height: res.headers.height === -1 ? 100 : Number(res.headers.height)
+              }
+              if (imageInfo.width > 900 || imageInfo.height > 900) {
+                if (imageInfo.height > imageInfo.width) {
+                  imageInfo.width = imageInfo.width * 900 / imageInfo.height
+                  imageInfo.height = 900
+                } else if (imageInfo.height < imageInfo.width) {
+                  imageInfo.height = imageInfo.height * 900 / imageInfo.width
+                  imageInfo.width = 900
+                } else {
+                  imageInfo.height = 900
+                  imageInfo.width = 900
+                }
+              }
+              return imageInfo
+            })
+            .then(data => {
+              resolve(data)
+              // changeImage(data,(img)=>{
+              //   resolve(img)
+              // })
+            })
+            .catch()
+        })
+      }
+    },
+
+    delPen (obj) { // 删除元素
+      getTopology(this.topologyIndex).delete(obj)
+      this.props = {
+        node: null,
+        line: null,
+        multi: false,
+        nodes: null,
+        locked: false,
+        pen: null,
+        pens: null
+      }
+    },
+
+    editTopology (val) {
+      this.editTopologyFlag = true
+      this.showNoData = false
+      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
+      this.$store.commit('setShowTopoScreen', true)
+      const timer = setTimeout(() => {
+        getTopology(this.topologyIndex).lock(0)
+        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
+          if (item.animatePlay) {
+            item.stopAnimate()
+          }
+          if (!item.data.expressArr.length) {
+            item.data.expressArr = ['']
+            item.data.legends = ['']
+          }
+          if (!item.data.expressAllArr || !item.data.expressAllArr.length) {
+            item.data.expressAllArr = ['']
+            item.data.legendsAll = ['']
+          }
+          item.animateType = item.data.animateType
+          if (item.type === 0) {
+            item.fillStyle = item.data.fillStyle
+            item.strokeStyle = item.data.strokeStyle
+            item.animatePlay = false
+            item.fontColor = item.data.fontColor || '#222222'
+            item.gradientType = item.data.gradientType ? item.data.gradientType : 0
+            if (!item.data.gradientColor) {
+              item.data.gradientType = 0
+              item.data.gradientColor = '#bae7ff'
+            }
+            if (item.data.gradientType === 0) {
+              item.bkType = 0
+            } else {
+              item.bkType = 1
+            }
+          } else if (item.type === 1) {
+            item.animateColor = item.data.animateColor
+            item.strokeStyle = item.data.strokeStyle
+            item.arrowColor = item.data.arrowColor
+            item.fromArrowColor = item.data.arrowColor
+            item.toArrowColor = item.data.arrowColor
+            item.animatePlay = false
+            item.fontColor = item.data.fontColor || '#222222'
+          }
+        })
+        getTopology(this.topologyIndex).caches = {
+          index: 0,
+          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+        }
+        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+        const domRect = dom ? dom.getBoundingClientRect() : {}
+        getTopology(this.topologyIndex).canvasPos = domRect
+        clearTimeout(timer)
+      })
+    },
+
+    animateCanvas () {
+      getTopology(this.topologyIndex).render()
+      getTopology(this.topologyIndex).animate()
+    },
+
+    refreshTopology () {
+      // canvas.open()
+    },
+
+    dropdownClick () {
+
+    },
+
+    changeTopologyOpt (val, key) {
+      // this.topologyData.data[key]=this.colorRGBtoHex(val);
+      // getTopology(this.index).data[key]=val;
+      // getTopology(this.index).render();
+      const dataOption = getTopology(this.topologyIndex).data
+      dataOption[key] = this.lineName
+      getTopology(this.topologyIndex).render()
+    },
+    notModuleIDArrChange (id) {
+      this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
+    },
+    // 保存
+    saveTopology () {
+      this.previewData = ''
+      this.isPreview = false
+      this.editTopologyFlag = true
+      this.showNoData = false
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      let flag = true
+      const arr = []
+      this.notModuleIDArr = []
+      topologyData.pens.forEach(item => {
+        if (item.type === 0 && ((!item.data) || (item.data && !item.data.moduleId))) {
+          arr.push(item)
+          this.props = {
+            node: null,
+            line: null,
+            multi: false,
+            nodes: null,
+            locked: false,
+            pen: null,
+            pens: null
+          }
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.notModuleIDArr = arr
+      }
+      if (flag) {
+        this.editTopologyFlag = false
+        topologyData.rule = false
+        topologyData.grid = false
+        topologyData.gridSize = 10
+        topologyData.pens.forEach(item => {
+          item.animatePlay = item.data.animatePlay
+          item.data.animateType = item.animateType
+          if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+            item.image = ''
+            item.animateFrames = []
+            item.animateReady = null
+            delete item.img
+            delete item.lastImage
+          }
+          item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+            if (!expression) {
+              item.data.legends.splice(i, 1)
+              return false
+            } else {
+              return true
+            }
+          })
+          item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
+            if (!expression) {
+              item.data.legendsAll.splice(i, 1)
+              return false
+            } else {
+              return true
+            }
+          })
+        })
+        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+          getTopology(this.topologyIndex).data.scale = this.oldScale
+        }
+        this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
+          this.prevent_opt.save = false
+          if (res.code === 200) {
+            this.$message({
+              message: this.$t('tip.saveSuccess'),
+              type: 'success'
+            })
+            this.$store.commit('setShowTopoScreen', this.topoScreenState)
+            this.$nextTick(() => {
+              getTopology(this.topologyIndex).lock(1)
+              const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+              const domRect = dom ? dom.getBoundingClientRect() : {}
+              getTopology(this.topologyIndex).canvasPos = domRect
+              this.reload()
+            })
+          }
+        }).catch(res => {
+          this.prevent_opt.save = false
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          })
+        })
+      } else {
+        this.$message({
+          showClose: true,
+          message: this.$t('project.topology.selMod'),
+          type: 'warning'
+        })
+      }
+    },
+    // 取消
+    cancelTopology () {
+      this.isPreview = false
+      this.previewData = ''
+      this.editTopologyFlag = false
+      this.$nextTick(() => {
+        getTopology(this.topologyIndex).lock(1)
+        let dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+        let domRect = dom ? dom.getBoundingClientRect() : {}
+        getTopology(this.topologyIndex).canvasPos = domRect
+        this.$store.commit('setShowTopoScreen', this.topoScreenState)
+        dom = null
+        domRect = null
+      })
+      this.reload()
+    },
+    // 预览
+    previewTopology () {
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      this.previewData = topologyData
+      this.isPreview = true
+      this.editTopologyFlag = false
+      topologyData.rule = false
+      topologyData.grid = false
+      topologyData.gridSize = 10
+      topologyData.pens.forEach(item => {
+        item.animatePlay = item.data.animatePlay
+        item.data.animateType = item.animateType
+        if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+          item.animateFrames = []
+          item.animateReady = null
+          delete item.img
+          delete item.lastImage
+        }
+        item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+          if (!expression) {
+            item.data.legends.splice(i, 1)
+            return false
+          } else {
+            return true
+          }
+        })
+        item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
+          if (!expression) {
+            item.data.legendsAll.splice(i, 1)
+            return false
+          } else {
+            return true
+          }
+        })
+      })
+      if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+        getTopology(this.topologyIndex).data.scale = this.oldScale
+      }
+      this.$nextTick(() => {
+        this.previewData = topologyData
+        getTopology(this.topologyIndex).lock(1)
+        const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
+        const domRect = dom ? dom.getBoundingClientRect() : {}
+        getTopology(this.topologyIndex).canvasPos = domRect
+        this.initPens(topologyData)
+        // this.reload()
+      })
+    },
+    previewExit () { // 继续编辑
+      this.isPreview = false
+      this.editTopology()
+    },
+
+    // 联动 project
+    changeProjectTitle () {
+      const data = getTopology(this.topologyIndex).data
+      this.topologyInfo = {
+        fontSize: data.data.fontSize,
+        align: data.data.align,
+        fontColor: data.data.fontColor,
+        opacity: data.data.opacity,
+        name: data.name
+      }
+    },
+    /* tools 方法 */
+
+    winResize () {
+      const timer = setTimeout(() => {
+        let domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        getTopology(this.topologyIndex).canvasPos = domRect
+        if (this.fromOverView) {
+          getTopology(this.topologyIndex).open(this.oldTopologyData)
+        }
+        let flag = false
+
+        const position = {
+          x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
+          y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
+        }
+        getTopology(this.topologyIndex).data.pens.forEach(item => {
+          if (flag) {
+            return
+          }
+          if (item.rect.ex > position.x || item.rect.ey > position.y) {
+            // getTopology(this.topologyIndex).fitView(20)
+            flag = true
+          }
+        })
+        getTopology(this.topologyIndex).resize()
+        getTopology(this.topologyIndex).centerView()
+        this.getNodesArr()
+        domRect = null
+        clearTimeout(timer)
+      }, 500)
+    },
+    contextmenuNone () {
+      this.contextmenu = {
+        left: null,
+        top: null,
+        bottom: null
+      }
+    },
+    canvasMove (e) { // 画布上的移动 确定tooltip的位置
+      if (this.tooltipPosition.show) {
+        return
+      }
+      window.ePosition = e
+    },
+    tooltipOver () {
+      clearTimeout(this.timer3)
+      this.timer3 = null
+    },
+    tooltipOut () {
+      this.timer3 = setTimeout(() => {
+        this.tooltipPosition.show = false
+        this.timer3 = null
+      }, 50)
+    },
+    nodeDefaultWidth (nodeName) {
+      switch (nodeName) {
+        case 'myCube':
+        case 'rectangleImg':
+          return 0
+        default:
+          return 1
+      }
+    },
+    previewBeforeClose (done) {
+      this.$emit('changeTopologyIndexF')
+      done()
+    },
+    selpopIs (pen, state) { // 判断是否有图表
+      let flag = true
+      if (state.id === 'other') {
+        flag = false
+      }
+      if (state.id === 'total' && pen.data.expressArr.length === 0) {
+        flag = false
+      }
+      return flag
+    },
+    redoIndexChange (index) {
+      this.redoIndex = index
+    },
+    querySearch (queryString, cb) {
+      const restaurants = this.unitArr
+      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    createFilter (queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    uploadPicChange () {
+      this.unitArr = []
+      this.tools.forEach((item, index) => {
+        if (index > 0) {
+          this.unitArr.push({
+            value: item.group
+          })
+        }
+      })
+      this.uploadPic.name = ''
+      this.uploadPic.unit = ''
+      this.file = null
+      this.uploadPicShow = true
+    },
+    zoomMap (num) {
+      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+    },
+    penToBottom () {
+      getTopology(this.topologyIndex).bottom()
+    },
+    changeScreen () {
+      this.$store.commit('setShowTopoScreen', !this.topoScreen)
+    },
+    onContextMenu (event) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (event.clientY + 360 < document.body.clientHeight) {
+        this.contextmenu = {
+          left: event.clientX + 'px',
+          top: event.clientY + 'px'
+        }
+      } else {
+        this.contextmenu = {
+          left: event.clientX + 'px',
+          bottom: document.body.clientHeight - event.clientY + 'px'
+        }
+      }
+    }
+  },
+  beforeDestroy () {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+    if (this.timer4) {
+      clearInterval(this.timer4)
+      this.timer4 = null
+    }
+    if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).destroy()
+      const StoreData = le5leStore.get()
+      const arr = []
+      Object.keys(StoreData).forEach(key => {
+        const id = key.split('-')[0]
+        arr.push(id)
+        if (getTopology(this.topologyIndex).id == id) {
+          le5leStore.set(key, null)
+          delete StoreData[key]
+        }
+      })
+      Object.keys(getTopology(this.topologyIndex)).forEach(key => {
+        getTopology(this.topologyIndex)[key] = null
+      })
+      setTopology(this.topologyIndex, null)
+    }
+    if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
+      document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
+    }
+    window.removeEventListener('resize', this.winResize)
+    window.removeEventListener('click', this.contextmenuNone)
+  },
+  destroyed () {
+
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index c978b2b50..252744398 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -336,22 +336,37 @@
 </template>
 
 <script>
-import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
+import { Topology } from '@topology/core'
 import { Store as le5leStore } from 'le5le-store'
+import {
+  flowPens
+} from '@topology/flow-diagram'
+import {
+  activityDiagram
+} from '@topology/activity-diagram'
+import {
+  classPens
+} from '@topology/class-diagram'
+import {
+  sequencePens,
+  sequencePensbyCtx
+} from '@topology/sequence-diagram'
+import { formPens } from '@topology/form-diagram'
 // import { Topology, registerNode } from '@topology/core'
 import imgDefault from '@/components/common/project/L5/services/img'
 import {
   Tools,
-  canvasRegister,
   imageTemp,
-  myShape,
-  myAnchors,
-  myIconRect,
-  myTextRect,
-  onChangeAnimate,
-  onChangeAnimateLine,
-  myCubec,
-  myCubeAnchors
+  rectangleImg,
+  rectangleImgAnchors
+  // myShape,
+  // myAnchors,
+  // myIconRect,
+  // myTextRect,
+  // onChangeAnimate,
+  // onChangeAnimateLine,
+  // myCubec,
+  // myCubeAnchors
 } from './L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
 
@@ -368,8 +383,9 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
 import bus from '../../../libs/bus'
 
 // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
+
+// registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+// registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
 const canvasOptions = {
   rotateCursor: '/img/rotate.cur',
@@ -639,7 +655,7 @@ export default {
     }
   },
   created () {
-    canvasRegister()
+    // canvasRegister()
   },
   mounted () {
     if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
@@ -704,6 +720,11 @@ export default {
         if (!getTopology(this.topologyIndex)) {
           return
         }
+        le5leStore.set('file', this.data)
+        le5leStore.set('lineName', data.lineName)
+        le5leStore.set('fromArrow', data.fromArrow)
+        le5leStore.set('toArrow', data.toArrow)
+        getTopology(this.topologyIndex).open()
         getTopology(this.topologyIndex).open(data)
         getTopology(this.topologyIndex).lock(1)
         this.objChange = false
@@ -712,8 +733,8 @@ export default {
           x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
           y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
         }
-        this.oldScale = getTopology(this.topologyIndex).data.scale
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
+        this.oldScale = getTopology(this.topologyIndex).data().scale
+        getTopology(this.topologyIndex).data().pens.forEach(item => {
           if (flag) {
             return
           }
@@ -726,9 +747,9 @@ export default {
         })
         getTopology(this.topologyIndex).resize()
         getTopology(this.topologyIndex).centerView()
-        this.penToolTipScale = getTopology(this.topologyIndex).data.scale
+        this.penToolTipScale = getTopology(this.topologyIndex).data().scale
         const timer = setTimeout(() => {
-          getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => {
+          getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
             if (item.animatePlay) {
               item.stopAnimate()
               const timer1 = setTimeout(() => {
@@ -743,7 +764,7 @@ export default {
         //   getTopology(this.topologyIndex).scaleTo(data.scale/2)
         // }
         // getTopology(this.topologyIndex).fitView();
-        this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data)
+        this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data())
         this.getNodesArr()
         pensPromise = null
       })
@@ -786,7 +807,7 @@ export default {
         }
         data = this.$loadsh.cloneDeep(data)
         if (!getTopology(this.topologyIndex)) {
-          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF)
           // canvas.open(data)
           setTopology(this.topologyIndex, canvas)
           canvas = null
@@ -794,12 +815,19 @@ export default {
           // getTopology(this.topologyIndex).open(data)
         }
         this.topologyLoading = false
-        if (!getTopology(this.topologyIndex).data.name) {
-          getTopology(this.topologyIndex).data.name = this.obj.name
+        if (!getTopology(this.topologyIndex).data().name) {
+          // getTopology(this.topologyIndex).data().name = this.obj.name
         }
-        getTopology(this.topologyIndex).data.projectId = this.obj.id
+        // getTopology(this.topologyIndex).data().projectId = this.obj.id
         // getTopology(this.topologyIndex).lock(1)
-
+        getTopology(this.topologyIndex).register(flowPens())
+        getTopology(this.topologyIndex).register(activityDiagram())
+        getTopology(this.topologyIndex).register(classPens())
+        getTopology(this.topologyIndex).register(sequencePens())
+        getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
+        getTopology(this.topologyIndex).registerCanvasDraw(formPens())
+        getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg })
+        getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
         this.getModule()// 获取module
         resolve()
       })
@@ -895,7 +923,99 @@ export default {
                   item.data.state.alert = false
                 }
               })
+              data.pens = data.pens.map(item => {
+                if (item.type === 0) {
+                  item = {
+                    ...item,
+                    ...item.rect
+                  }
+                } else {
+                  // promiseArr.push({ type: 1 })
+                  console.log(item)
+                  item = {
+                    data: item.data,
+                    rect: item.rect,
+                    ...item.rect,
+                    id: item.id,
+                    tags: [
 
+                    ],
+                    name: 'line',
+                    type: 1,
+                    fromArrow: '',
+                    toArrow: 'triangleSolid',
+                    anchors: [
+                      {
+                        id: 'd3b9bb5',
+                        penId: 'fdde44f',
+                        x: 0,
+                        y: 1,
+                        prev: {
+                          penId: 'fdde44f',
+                          x: -0.28768449363179044,
+                          y: 1
+                        },
+                        next: {
+                          penId: 'fdde44f',
+                          x: 0.28768449363179044,
+                          y: 1
+                        }
+                      },
+                      {
+                        id: '5c7f698f',
+                        penId: 'fdde44f',
+                        connectTo: 'f10e596',
+                        x: 1,
+                        y: 0,
+                        prev: {
+                          penId: 'fdde44f',
+                          connectTo: 'f10e596',
+                          x: 0.7123155063682084,
+                          y: 0
+                        },
+                        next: {
+                          penId: 'fdde44f',
+                          connectTo: 'f10e596',
+                          x: 1.2876844936317902,
+                          y: 0
+                        }
+                      }
+                    ],
+                    color: '#000000',
+                    lineWidth: 2.4390243902439024,
+                    borderColor: '#000000',
+                    borderWidth: 0,
+                    rotate: 0,
+                    visible: true,
+                    background: '',
+                    lineHeight: 1.5,
+                    fontSize: 12,
+                    fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
+                    fontStyle: 'normal',
+                    fontWeight: 'normal',
+                    textColor: '#000000',
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                    textBackground: '#ffffff',
+                    animateSpan: 1,
+                    animateColor: '#ffffff',
+                    animateCycle: null,
+                    lineAnimateType: 1,
+                    animateDotSize: 3,
+                    animateType: 'beads',
+                    frames: [
+
+                    ],
+                    autoPlay: false,
+                    globalAlpha: 1,
+                    events: [
+
+                    ]
+                  }
+                }
+                return item
+              })
+              console.log(data.pens)
               if (!data.data) {
                 this.projectInfoShow = true
                 this.projectAlertShow = true
@@ -930,6 +1050,7 @@ export default {
                   }
                 })
                 this.saveData = JSON.parse(JSON.stringify(data))
+                console.log(JSON.stringify(data))
                 resolve(data)
                 clearInterval(this.timer4)
                 this.timer4 = null
@@ -976,7 +1097,7 @@ export default {
             pen.strokeStyle = selLevel.color.line
             pen.bkType = 0
           }
-          onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
+          // onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
         } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
           const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
           if (selLevel) {
@@ -985,13 +1106,13 @@ export default {
             pen.animateType = selLevel.animateType
             pen.fontColor = selLevel.color.text
           }
-          onChangeAnimateLine(pen, pen.animateType)
+          // onChangeAnimateLine(pen, pen.animateType)
         }
       } else {
         if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimate(pen, pen.animateType)
+          // onChangeAnimate(pen, pen.animateType)
         } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
-          onChangeAnimateLine(pen, pen.animateType)
+          // onChangeAnimateLine(pen, pen.animateType)
         }
       }
     },
@@ -1081,9 +1202,9 @@ export default {
     getNodesArr () {
       if (!getTopology(this.topologyIndex)) return
       let arr = []
-      this.offsetX = getTopology(this.topologyIndex).data.x
-      this.offsetY = getTopology(this.topologyIndex).data.y
-      arr = getTopology(this.topologyIndex).data.pens.filter(item => {
+      this.offsetX = getTopology(this.topologyIndex).data().x
+      this.offsetY = getTopology(this.topologyIndex).data().y
+      arr = getTopology(this.topologyIndex).data().pens.filter(item => {
         if (!item.data) {
           item.data = {
             moduleId: '',
@@ -1114,8 +1235,8 @@ export default {
     // 摘除已选择的module
     modulesDiff (data) {
       this.modules = this.allModules
-      if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens) {
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
+      if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens) {
+        getTopology(this.topologyIndex).data().pens.forEach(item => {
           if (item.type == 0) {
             this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
           }
@@ -1316,7 +1437,7 @@ export default {
           }
           this.chartData = { ...data.data, ...this.chartGetData.find(item => item.id === data.id) }
           this.tooltipPosition.show = false
-         const timer = setTimeout(() => {
+          const timer = setTimeout(() => {
             this.tooltipPosition.show = true
             let ePosition = window.ePosition
             let boxWidth = document.getElementsByClassName('page')[0].offsetWidth
@@ -1907,7 +2028,7 @@ export default {
       this.$store.commit('setShowTopoScreen', true)
       const timer = setTimeout(() => {
         getTopology(this.topologyIndex).lock(0)
-        getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
+        getTopology(this.topologyIndex).data().pens.forEach((item, index) => { // 停止动画 以及赋值默认data
           if (item.animatePlay) {
             item.stopAnimate()
           }
@@ -1947,7 +2068,7 @@ export default {
         })
         getTopology(this.topologyIndex).caches = {
           index: 0,
-          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
         }
         const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
         const domRect = dom ? dom.getBoundingClientRect() : {}
@@ -1973,7 +2094,7 @@ export default {
       // this.topologyData.data[key]=this.colorRGBtoHex(val);
       // getTopology(this.index).data[key]=val;
       // getTopology(this.index).render();
-      const dataOption = getTopology(this.topologyIndex).data
+      const dataOption = getTopology(this.topologyIndex).data()
       dataOption[key] = this.lineName
       getTopology(this.topologyIndex).render()
     },
@@ -2040,8 +2161,8 @@ export default {
             }
           })
         })
-        if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-          getTopology(this.topologyIndex).data.scale = this.oldScale
+        if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
+          getTopology(this.topologyIndex).data().scale = this.oldScale
         }
         this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
           this.prevent_opt.save = false
@@ -2125,8 +2246,8 @@ export default {
           }
         })
       })
-      if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-        getTopology(this.topologyIndex).data.scale = this.oldScale
+      if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
+        getTopology(this.topologyIndex).data().scale = this.oldScale
       }
       this.$nextTick(() => {
         this.previewData = topologyData
@@ -2145,7 +2266,7 @@ export default {
 
     // 联动 project
     changeProjectTitle () {
-      const data = getTopology(this.topologyIndex).data
+      const data = getTopology(this.topologyIndex).data()
       this.topologyInfo = {
         fontSize: data.data.fontSize,
         align: data.data.align,
@@ -2169,7 +2290,7 @@ export default {
           x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
           y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
         }
-        getTopology(this.topologyIndex).data.pens.forEach(item => {
+        getTopology(this.topologyIndex).data().pens.forEach(item => {
           if (flag) {
             return
           }
@@ -2260,7 +2381,7 @@ export default {
       this.uploadPicShow = true
     },
     zoomMap (num) {
-      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num)
+      getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data().scale + num)
     },
     penToBottom () {
       getTopology(this.topologyIndex).bottom()
diff --git a/nezha-fronted/src/components/page/config/system/systemCommon.js b/nezha-fronted/src/components/page/config/system/systemCommon.js
index b6cd507df..6c919bdf6 100644
--- a/nezha-fronted/src/components/page/config/system/systemCommon.js
+++ b/nezha-fronted/src/components/page/config/system/systemCommon.js
@@ -1,4 +1,3 @@
-import { file } from '@topology/core/src/middles/nodes/file'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
 
 export const tableCommon = {
diff --git a/nezha-fronted/static/config.json b/nezha-fronted/static/config.json
index 8d1eeae25..3151969db 100644
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"/", "version": "22.05"}
+{"baseUrl":"http://192.168.40.42:8080/", "version": "22.05"}