From 50ec4a6680c1ee5ae36a49a6a8b3a985644101e4 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 10 Aug 2022 11:28:07 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2034=20feat=EF=BC=9A=20topology=20js?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E5=8D=87=E7=BA=A7=E5=88=B0=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/css/index.scss       |   2 +-
 .../assets/css/themes/src/input-number.scss   |  38 +-
 .../common/project/L5/CanvasContextMenu.vue   |  48 +-
 .../common/project/L5/CanvasProps.vue         | 137 ++---
 .../common/project/L5/services/canvas.js      | 502 +++++++++---------
 .../common/project/L5/topologyTopTool.vue     |  12 +-
 .../components/common/project/topologyL5.vue  | 130 ++---
 .../common/project/topologyMixin.js           | 152 +++++-
 8 files changed, 595 insertions(+), 426 deletions(-)

diff --git a/nezha-fronted/src/assets/css/index.scss b/nezha-fronted/src/assets/css/index.scss
index 1125c34c2..c4c4e2cd1 100644
--- a/nezha-fronted/src/assets/css/index.scss
+++ b/nezha-fronted/src/assets/css/index.scss
@@ -16,7 +16,7 @@ body {
   min-width: 1024px;
   margin:0 !important;
   padding: 0 !important;
-  cursor: default !important;
+  cursor: default;
 }
 html {
   height: 100%;
diff --git a/nezha-fronted/src/assets/css/themes/src/input-number.scss b/nezha-fronted/src/assets/css/themes/src/input-number.scss
index 4e5109cb8..67594bf49 100644
--- a/nezha-fronted/src/assets/css/themes/src/input-number.scss
+++ b/nezha-fronted/src/assets/css/themes/src/input-number.scss
@@ -19,7 +19,32 @@
     }
   }
 
-  @include e((increase, decrease)) {
+  @include e(increase) {
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+    width: $--input-height;
+    height: auto;
+    text-align: center;
+    background: $--background-color-base;
+    color: $--color-text-regular;
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover {
+      color: $--color-primary;
+
+      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+        border-color: $--input-focus-border;
+      }
+    }
+
+    &.is-disabled {
+      color: $--disabled-color-base;
+      cursor: not-allowed;
+    }
+  }
+  @include e(decrease) {
     position: absolute;
     z-index: 1;
     top: 1px;
@@ -58,7 +83,16 @@
   }
 
   @include when(disabled) {
-    @include e((increase, decrease)) {
+    @include e(increase) {
+      border-color: $--disabled-border-base;
+      color: $--disabled-border-base;
+
+      &:hover {
+        color: $--disabled-border-base;
+        cursor: not-allowed;
+      }
+    }
+    @include e(decrease) {
       border-color: $--disabled-border-base;
       color: $--disabled-border-base;
 
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
index 1e081d92d..de174644d 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasContextMenu.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="menus">
     <div>
-      <a :class="{disabled:!props.node && !props.nodes}" @click="onTop()">{{$t('project.topology.top')}}</a>
+      <a :class="{disabled:!props.pen && !props.pens}" @click="onTop()">{{$t('project.topology.top')}}</a>
     </div>
     <div>
-      <a :class="{disabled:!props.node && !props.nodes}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
+      <a :class="{disabled:!props.pen && !props.pens}" @click="onBottom()">{{$t('project.topology.bottom')}}</a>
     </div>
     <div class="line"></div>
     <div>
-      <a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
+      <a :class="{disabled:!props.pen && !props.pens && !props.line}" @click="onDel()">{{$t('overall.delete')}}</a>
     </div>
     <div class="line"></div>
     <div>
@@ -49,58 +49,54 @@ export default {
   },
   methods: {
     onTop () {
-      if (this.props.node) {
-        getTopology(this.index).top(this.props.node)
-      }
-
-      if (this.props.nodes) {
-        for (const item of this.props.nodes) {
+      if (this.props.pens) {
+        for (const item of this.props.pens) {
           getTopology(this.index).top(item)
         }
+      } else if (this.props.pen) {
+        getTopology(this.index).top(this.props.pen)
       }
 
       getTopology(this.index).render()
     },
 
     onBottom () {
-      if (this.props.node) {
-        getTopology(this.index).bottom(this.props.node)
-      }
-
-      if (this.props.nodes) {
-        for (const item of this.props.nodes) {
+      if (this.props.pens) {
+        for (const item of this.props.pens) {
           getTopology(this.index).bottom(item)
         }
+      } else if (this.props.pen) {
+        getTopology(this.index).bottom(this.props.pen)
       }
 
       getTopology(this.index).render()
     },
 
     onCombine (stand) {
-      if (!this.props.nodes) {
+      if (!this.props.pens) {
         return
       }
-      getTopology(this.index).combine(this.props.nodes, stand)
+      getTopology(this.index).combine(this.props.pens, stand)
       getTopology(this.index).render()
     },
 
     onUncombine () {
-      if (!this.props.node) {
+      if (!this.props.pen) {
         return
       }
-      getTopology(this.index).uncombine(this.props.node)
+      getTopology(this.index).uncombine(this.props.pen)
       getTopology(this.index).render()
     },
 
     onLock () {
       // eslint-disable-next-line vue/no-mutating-props
       this.props.locked = !this.props.locked
-      if (this.props.node) {
+      if (this.props.pen) {
         // eslint-disable-next-line vue/no-mutating-props
-        this.props.node.locked = this.props.locked
+        this.props.pen.locked = this.props.locked
       }
-      if (this.props.nodes) {
-        for (const item of this.props.nodes) {
+      if (this.props.pens) {
+        for (const item of this.props.pens) {
           item.locked = this.props.locked
         }
       }
@@ -113,13 +109,13 @@ export default {
     },
 
     onDel () {
-      getTopology(this.index).delete()
+      getTopology(this.index).delete(this.props.pens || [this.props.pen])
     },
     canvascut () {
-      getTopology(this.index).cut()
+      getTopology(this.index).cut(this.props.pens || [this.props.pen])
     },
     canvascopy () {
-      getTopology(this.index).copy()
+      getTopology(this.index).copy(this.props.pens || [this.props.pen])
     },
     canvaspaste () {
       getTopology(this.index).paste()
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index ea4fde735..8b5af4624 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -405,7 +405,7 @@
               <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type&&!selection.pen.iconFamily">
                 <div>{{ $t('project.topology.bac') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'fillStyle',value:selection.pen.fillStyle}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'background',value:selection.pen.background}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -465,7 +465,7 @@
                 <div>{{ $t('project.topology.lineDash') }}</div>
                 <div class="p10 pl0">
                   <el-select :popper-append-to-body="true" v-model="selection.pen.dash" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
-                             @change="onChange">
+                             @change="(val)=>{onChange('lineDash', val)}">
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
@@ -494,14 +494,14 @@
               <div class="props-pen-item special-select" v-if="selection.pen&&selection.pen.type">
                 <div>{{ $t('project.topology.lineType') }}</div>
                 <div class="p10 pl0">
-                  <el-select :popper-append-to-body="true" v-model="selection.pen.name" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
+                  <el-select :popper-append-to-body="true" v-model="selection.pen.lineName" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
                              @change="onClickName">
                     <div slot="prefix">
                       <div class="icon-item">
                         <svg>
                           <g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
                             <path
-                              :d="penLineType.find((item,i)=>item.name==selection.pen.name).d"
+                              :d="penLineType.find((item,i)=>item.name==selection.pen.lineName).d"
                             >
                             </path>
                           </g>
@@ -511,7 +511,7 @@
                     <el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
                       <div class="icon-item">
                         <svg>
-                          <g fill="none" :stroke="(selection.pen.name==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
+                          <g fill="none" :stroke="(selection.pen.lineName==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
                             <path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
                           </g>
                         </svg>
@@ -641,7 +641,7 @@
               <div class="props-pen-item">
                 <div>{{ $t('project.topology.lineColor') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'color',value:selection.pen.color}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -683,7 +683,7 @@
               <div class="props-pen-item">
                 <div>{{ $t('project.topology.fontColor') }}</div>
                 <div class="p10 pl0">
-                  <nezhaColor :isTopo="true" :value-arr="[{name:'fontColor',value:selection.pen.fontColor}]"
+                  <nezhaColor :isTopo="true" :value-arr="[{name:'textColor',value:selection.pen.textColor}]"
                               @colorChange="colorChange"/>
                 </div>
               </div>
@@ -716,39 +716,39 @@
                 </div>
               </div>
 
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.textOffsetX') }}</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="0"
-                    controls-position="right"
-                    size="small" name="x"
-                    class="input"
-                    v-model.number="selection.pen.textOffsetX"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"></el-input-number>
-                </div>
-              </div>
+<!--              <div class="props-pen-item">-->
+<!--                <div>{{ $t('project.topology.textOffsetX') }}</div>-->
+<!--                <div class="p10 pl0">-->
+<!--                  <el-input-number-->
+<!--                    @focus="inputFocus"-->
+<!--                    @blur="inputBlur"-->
+<!--                    :precision="0"-->
+<!--                    controls-position="right"-->
+<!--                    size="small" name="x"-->
+<!--                    class="input"-->
+<!--                    v-model.number="selection.pen.textLeft"-->
+<!--                    :readonly="readonly"-->
+<!--                    required-->
+<!--                    @change="onChange()"></el-input-number>-->
+<!--                </div>-->
+<!--              </div>-->
 
-              <div class="props-pen-item">
-                <div>{{ $t('project.topology.textOffsetY') }}</div>
-                <div class="p10 pl0">
-                  <el-input-number
-                    @focus="inputFocus"
-                    @blur="inputBlur"
-                    :precision="0"
-                    controls-position="right"
-                    size="small" name="x"
-                    class="input"
-                    v-model.number="selection.pen.textOffsetY"
-                    :readonly="readonly"
-                    required
-                    @change="onChange()"></el-input-number>
-                </div>
-              </div>
+<!--              <div class="props-pen-item">-->
+<!--                <div>{{ $t('project.topology.textOffsetY') }}</div>-->
+<!--                <div class="p10 pl0">-->
+<!--                  <el-input-number-->
+<!--                    @focus="inputFocus"-->
+<!--                    @blur="inputBlur"-->
+<!--                    :precision="0"-->
+<!--                    controls-position="right"-->
+<!--                    size="small" name="x"-->
+<!--                    class="input"-->
+<!--                    v-model.number="selection.pen.textTop"-->
+<!--                    :readonly="readonly"-->
+<!--                    required-->
+<!--                    @change="onChange()"></el-input-number>-->
+<!--                </div>-->
+<!--              </div>-->
 
             </div>
           </el-collapse-item>
@@ -865,9 +865,9 @@
         <!--          </div>-->
 
         <!--          <div class="project-content-item half">-->
-        <!--            <label>{{$t('project.topology.fontColor')}}</label>-->
+        <!--            <label>{{$t('project.topology.textColor')}}</label>-->
         <!--            <div class="full pr10 h32">-->
-        <!--              <nezhaColor :isTopo=true :value-arr="[{name:'fontColor',value:topologyData.data.fontColor}]" @colorChange="(val,key)=>{-->
+        <!--              <nezhaColor :isTopo=true :value-arr="[{name:'textColor',value:topologyData.data.textColor}]" @colorChange="(val,key)=>{-->
         <!--                changeTopologyOpt(val,key,true)-->
         <!--                }"/>-->
         <!--            </div>-->
@@ -1102,6 +1102,7 @@ import chartDataFormat from '../../../chart/chartDataFormat'
 import promqlInput from '../../../page/dashboard/explore/promqlInput'
 import nezhaColor from '../../nezhaColor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
+import { s8 } from '@topology/core'
 
 const rz = {
   methods: {
@@ -1184,7 +1185,7 @@ export default {
           url: '',
           fontSize: 14,
           align: 'left',
-          fontColor: '#000000',
+          textColor: '#000000',
           opacity: 1
         }
       },
@@ -1192,10 +1193,10 @@ export default {
         dash: '',
         font: '',
         lineWidth: '',
-        strokeStyle: '',
+        color: '',
         textMaxLine: '',
-        textOffsetX: '',
-        textOffsetY: '',
+        textLeft: '',
+        textTop: '',
         globalAlpha: ''
       },
       penNumber: '',
@@ -1323,10 +1324,10 @@ export default {
         }
       ],
       lineAnimateOptions: [
-        { id: 1, name: this.$t('project.topology.flow') },
+        { id: 'flow', name: this.$t('project.topology.flow') },
         { id: 'beads', name: this.$t('project.topology.beads') },
         { id: 'dot', name: this.$t('project.topology.dot') },
-        { id: 'comet', name: this.$t('project.topology.comet') },
+        // { id: 'comet', name: this.$t('project.topology.comet') },
         { id: 'custom', name: this.$t('project.topology.none') }
       ],
       nodeAnimateOptions: [
@@ -1446,9 +1447,9 @@ export default {
       immediate: true
     },
     'selection.pen.data': {
-      handler (n) {
+      handler (n, o) {
         // this.loading = false
-        if (this.selection.pen && JSON.stringify(this.selection.pen.type)) {
+        if (this.selection.pen && JSON.stringify(this.selection.pen.type) && (JSON.stringify(n) !== JSON.stringify(o)) && o) {
           this.$emit('change', this.selection.pen)
         }
       }
@@ -1477,7 +1478,7 @@ export default {
       dataOption.data = {}
     }
     Object.keys(this.topologyData.data).forEach((key) => {
-      if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'fontColor' || key === 'opacity') {
+      if (key === 'projectInfo' || key === 'alertInfo' || key === 'fontSize' || key === 'align' || key === 'textColor' || key === 'opacity') {
         this.topologyData.data[key] = (JSON.stringify(dataOption.data[key]) ? dataOption.data[key] : this.topologyData.data[key])
       } else {
         this.topologyData.data[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.topologyData.data[key])
@@ -1539,10 +1540,13 @@ export default {
       }
       this.onChange()
     },
-    onChange (value) {
+    onChange (value, val) {
       if (value === 'lineWidth') {
         this.selection.pen.lineWidth = this.selection.pen.data.lineWidth
       }
+      if (value === 'lineDash') {
+        this.selection.pen.lineDash = val ? (val == 1 ? [5, 5] : ((val == 2 ? [10, 10] : [10, 10, 2, 10]))) : []
+      }
       this.$emit('change', this.selection.pen)
       // if(!this.selection.pen.type||this.selection.pens){
       //   this.$emit('change',this.selection.pen||this.selection.pens);
@@ -1580,13 +1584,18 @@ export default {
       this.onChange()
     },
     onClickName (name) {
-      this.pen.name = name
-      this.selection.pen.calcControlPoints()
+      this.pen.lineName = name
+      // this.selection.pen.calcControlPoints()
       this.drowdown = 0
       if (this.selection.pen) {
-        this.selection.pen.name = name
+        this.selection.pen.lineName = name
+        this.selection.pen.anchors = [
+          this.selection.pen.anchors[0],
+          this.selection.pen.anchors[this.selection.pen.anchors.length - 1]
+        ]
+        getTopology(this.index).updateLineType(this.selection.pen, name)
+        this.onChange()
       }
-      this.onChange()
     },
     bkTypeChange (val) {
       this.selection.pen.data.gradientType = val
@@ -1606,11 +1615,11 @@ export default {
 
       if (val === 1 || val === 2) {
         this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
-        this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+        this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
       }
       if (val === 3 || val === 4) {
         this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
-        this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+        this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
       }
       this.onChange()
     },
@@ -1639,25 +1648,25 @@ export default {
         this.selection.pen.data.gradientColor = this.colorRGBtoHex(val)
         if (bktype === 1 || bktype === 2) {
           this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+          this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
         }
         if (bktype === 3 || bktype === 4) {
           this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+          this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
         }
       }
 
-      if (name === 'fillStyle') {
+      if (name === 'background') {
         if (bktype === 1 || bktype === 2) {
           this.selection.pen.gradientToColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientFromColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+          this.selection.pen.gradientFromColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
         }
         if (bktype === 3 || bktype === 4) {
           this.selection.pen.gradientFromColor = this.selection.pen.data.gradientColor
-          this.selection.pen.gradientToColor = this.selection.pen.fillStyle ? this.selection.pen.fillStyle : '#fff'
+          this.selection.pen.gradientToColor = this.selection.pen.background ? this.selection.pen.background : '#fff'
         }
       }
-      if (name === 'fontColor') {
+      if (name === 'textColor') {
         // this.selection.pen.font.color = this.colorRGBtoHex(val)
       }
       this.selection.pen.data[name] = this.colorRGBtoHex(val)
@@ -1694,7 +1703,7 @@ export default {
         this.topologyData.data[key] = val
       }
       Object.keys(this.topologyData.data).forEach((key1) => {
-        if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'fontColor' || key1 === 'opacity') {
+        if (key1 === 'projectInfo' || key1 === 'alertInfo' || key1 === 'fontSize' || key1 === 'align' || key1 === 'textColor' || key1 === 'opacity') {
           getTopology(this.index).data().data[key1] = this.topologyData.data[key1]
         } else {
           getTopology(this.index).data()[key1] = this.topologyData.data[key1]
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 8437a7bcf..efbb5479c 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -1,4 +1,4 @@
-import { s16 } from '@topology/core'
+import { s16, s8 } from '@topology/core'
 export let canvas
 
 export const Tools = [
@@ -235,12 +235,13 @@ export function rectangleImg (ctx, pen) {
   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)'
+  if (pen.data && !pen.data.animateNeedLine) {
+    if (pen.data && pen.data.lineWidth <= 0) {
+      ctx.strokeStyle = 'rgba(0,0,0,0)'
+    }
   }
   // 必须判空再填充
-  (pen.fillStyle || pen.bkType) && ctx.fill()
-  console.log(pen, pen.calculative.worldIconRect)
+  (pen.background || pen.bkType) && ctx.fill()
   pen.calculative.worldIconRect = {
     height: pen.height - 10 - 20,
     rotate: 0,
@@ -324,6 +325,7 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
       color: pen.strokeStyle,
       lineWidth: pen.lineWidth,
       borderWidth: null,
+      borderColor: pen.strokeStyle,
       rotate: pen.rotate,
       visible: true,
       background: pen.fillStyle,
@@ -337,7 +339,9 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
       textAlign: pen.textAlign,
       textBaseline: pen.textBaseline,
       textBackground: pen.textBackground,
-      lineAnimateType: 0,
+      lineAnimateType: pen.lineAnimateType,
+      textLeft: pen.textOffsetX,
+      textTop: pen.textOffsetY,
       animateType: '',
       frames: [
 
@@ -398,6 +402,7 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
       name: 'line',
       lineName: pen.name,
       type: pen.type,
+      autoPolyline: true,
       fromArrow: pen.fromArrow,
       toArrow: pen.toArrow,
       x: width > 0 ? pen.to.x : pen.from.x,
@@ -408,10 +413,11 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
       valueMapping: pen.valueMapping,
       anchors: [
         {
-          anchorId: pen.id + '-0',
+          anchorId: pen.from.anchorIndex + '',
           id: pen.id + '-0',
           penId: pen.id,
           connectTo: pen.from.id,
+          prevNextType: undefined,
           x: 0,
           y: 0,
           prev: {
@@ -428,10 +434,12 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
           }
         },
         {
-          anchorId: pen.id + '-1',
+          anchorId: pen.to.anchorIndex + '',
           id: pen.id + '-1',
           penId: pen.id,
           connectTo: pen.to.id,
+          prevNextType: undefined,
+          hidden: undefined,
           x: 1,
           y: 1,
           prev: {
@@ -448,30 +456,30 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
           }
         }
       ],
-      color: '#222222',
-      lineWidth: 1,
-      lineDash: [
-        5,
-        5
-      ],
-      borderColor: '#000000',
-      borderWidth: 0,
-      rotate: 0,
+      color: pen.strokeStyle,
+      lineWidth: pen.lineWidth,
+      lineDashOffset: pen.lineDashOffset,
+      lineDash: pen.dash ? (pen.dash == 1 ? [5, 5] : ((pen.dash == 2 ? [10, 10] : [10, 10, 2, 10]))) : [],
+      borderColor: pen.borderColor,
+      borderWidth: pen.borderWidth,
+      rotate: pen.rotate,
       visible: true,
       background: '',
-      lineHeight: 1.5,
-      fontSize: 12,
-      fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
-      fontStyle: 'normal',
-      fontWeight: 'normal',
+      lineHeight: pen.lineHeight,
+      fontSize: pen.fontSize,
+      fontFamily: pen.fontFamily,
+      fontStyle: pen.fontStyle,
+      fontWeight: pen.fontWeight,
       textColor: '',
-      textAlign: 'center',
-      textBaseline: 'middle',
-      textBackground: '#ffffff',
-      animateSpan: 1,
-      animateColor: '#FA901C',
+      textAlign: pen.textAlign,
+      textBaseline: pen.textBaseline,
+      textBackground: pen.textBackground,
+      textLeft: pen.textOffsetX,
+      textTop: pen.textOffsetY,
+      animateSpan: pen.animateSpan,
+      animateColor: pen.animateColor,
       lineAnimateType: 0,
-      animateDotSize: 3,
+      animateDotSize: pen.animateDotSize,
       frames: [
 
       ],
@@ -504,18 +512,37 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
     }
     if (pen.name === 'polyline') {
       obj.anchors.splice(1, 0, {
-        id: pen.id + '-0.33',
+        id: s8(),
         penId: pen.id,
-        x: obj.anchors[0].x + 0.3,
-        y: obj.anchors[0].y
+        x: 0.1,
+        y: 0
+      }, {
+        id: s8(),
+        penId: pen.id,
+        x: 0.5,
+        y: 0
       },
       {
-        id: pen.id + '-0.66',
+        id: s8(),
         penId: pen.id,
-        x: obj.anchors[1].x - 0.3,
-        y: obj.anchors[1].y
-      })
+        x: 0.5,
+        y: 1
+      },
+      {
+        id: s8(),
+        penId: pen.id,
+        x: 0.9,
+        y: 1
+      }
+      )
     }
+    pen.data.valueMapping.forEach(item => {
+      if (item.animateType == 1) {
+        item.animateType = 'flow'
+      } else if (item.animateType == 'comet') {
+        item.animateType = 'dot'
+      }
+    })
   }
   return obj
 }
@@ -620,231 +647,186 @@ export function disposeTopoOldData (pen, allPen) { // 处理旧数据
 // }
 // /* 自定义立方体 */
 //
-// 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 onChangeAnimate (pen, animateType, fillStyle, strokeStyle) {
+  pen.animateType = animateType
+  if (pen.animateType === 'custom') {
+    return
+  }
+
+  pen.animateFrames = []
+  // const state = Node.cloneState(pen)
+  const state = {}
+  switch (animateType) {
+    case 'upDown':
+      pen.frames = [
+        {
+          duration: 200,
+          y: 20
+        },
+        {
+          duration: 200,
+          y: 0
+        },
+        {
+          duration: 200,
+          y: -20
+        }
+      ]
+      break
+    case 'leftRight':
+      pen.frames = [
+        {
+          duration: 200,
+          x: 20
+        },
+        {
+          duration: 200,
+          x: 0
+        },
+        {
+          duration: 200,
+          x: -20
+        }
+      ]
+      break
+    case 'heart':
+      pen.frames = [
+        {
+          duration: 300,
+          scale: 1.2
+        },
+        // {
+        //   duration: 300,
+        //   x: 0,
+        //   y: 0,
+        //   width: 0,
+        //   height: 0
+        // },
+        {
+          duration: 300,
+          scale: 0.8
+        },
+        {
+          duration: 300,
+          scale: 1
+        }
+      ]
+      break
+    case 'success':
+      pen.frames = [
+        {
+          duration: 200,
+          color: strokeStyle || '#237804'
+        },
+        {
+          duration: 200,
+          color: strokeStyle || '#237804',
+          backGround: fillStyle || '#389e0d22'
+        }
+      ]
+      break
+    case 'warning':
+      pen.data.animateNeedLine = true
+      pen.frames = [
+        {
+          duration: 500,
+          color: strokeStyle || '#fa8c16',
+          background: fillStyle || '#fa8c16',
+          lineWidth: 5,
+          lineDash: [5, 5]
+        },
+        {
+          duration: 500,
+          color: strokeStyle || '#fa8c16',
+          background: '#ffffff',
+          lineWidth: 1,
+          lineDash: []
+        }
+      ]
+      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':
+      pen.frames = [
+        {
+          duration: 100,
+          rotate: -5
+        },
+        {
+          duration: 100,
+          rotate: 0
+        },
+        {
+          duration: 100,
+          rotate: 5
+        },
+        {
+          duration: 100,
+          rotate: 0
+        }
+      ]
+      break
+    case 'fade':
+      state.globalAlpha = 0.3
+      pen.frames = [
+        {
+          duration: 500,
+          globalAlpha: 0.3
+        },
+        {
+          duration: 500,
+          globalAlpha: 1
+        }
+      ]
+      break
+  }
+  pen.animatePlay = true
+}
+export function onChangeAnimateLine (line, type, isOldData) {
+  // { id: 'flow', name: this.$t('project.topology.flow') },
+  // { id: 'beads', name: this.$t('project.topology.beads') },
+  // { id: 'dot', name: this.$t('project.topology.dot') },
+  let animateType = type
+  if (type === 'dot') {
+    animateType = 2
+  }
+  if (type === 'beads') {
+    animateType = 1
+  }
+  if (type === 'custom') {
+    delete line.lineAnimateType
+    return
+  }
+  line.lineAnimateType = animateType
+  line.animatePlay = true
+}
 // export function changeImage (dataImg, callback) {
 //   // const base64Img = document.createElement('base64Img')
 //   const canvas = document.createElement('canvas')
diff --git a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
index 23f9099a8..3d78a114a 100644
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -109,7 +109,15 @@ export default {
   },
   methods: {
     changeOption (key) {
-      getTopology(this.index).data[key] = this.option[key]
+      // getTopology(this.index).data[key] = this.option[key]
+      const obj = {}
+      obj[key] = this.option[key]
+      console.log(obj)
+      if (key === 'grid') {
+        getTopology(this.index).setGrid(obj)
+      } else {
+        getTopology(this.index).setRule(obj)
+      }
       getTopology(this.index).render()
     },
     undo () { // 撤销
@@ -139,7 +147,7 @@ export default {
       getTopology(this.index).scaleTo(val / 100)
     },
     del () {
-      const delObj = this.selection.pen ? this.selection.pen.id : this.selection.pens
+      const delObj = this.selection.pen ? [this.selection.pen] : this.selection.pens
       this.$emit('del', delObj)
     },
     clear () {
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 5592bf051..43c999a61 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -170,7 +170,7 @@
                             @notModuleIDArrChange="notModuleIDArrChange">
               </canvas-props>
             </div>
-            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && 0 && !fromOverView" :style="this.contextmenu">
+            <div class="context-menu" v-if="contextmenu.left && editTopologyFlag && !fromOverView" :style="this.contextmenu">
               <CanvasContextMenu :index="topologyIndexF" :props.sync="props"></CanvasContextMenu>
             </div>
             <!--所有节点上的小图标-->
@@ -359,13 +359,13 @@ import {
   imageTemp,
   rectangleImg,
   rectangleImgAnchors,
-  disposeTopoOldData
+  disposeTopoOldData,
   // myShape,
   // myAnchors,
   // myIconRect,
   // myTextRect,
-  // onChangeAnimate,
-  // onChangeAnimateLine,
+  onChangeAnimate,
+  onChangeAnimateLine,
   // myCubec,
   // myCubeAnchors
 } from './L5/services/canvas.js'
@@ -388,16 +388,6 @@ import topologyMixin from '@/components/common/project/topologyMixin'
 // 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,
-  autoPolyline: true
-}
 export default {
   name: 'topologyL5',
   mixins: [topologyMixin],
@@ -670,7 +660,7 @@ export default {
   },
   methods: {
     init () {
-      canvasOptions.on = this.onMessage
+      // canvasOptions.on = this.onMessage
       this.reload()
     },
 
@@ -692,7 +682,7 @@ export default {
         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)
+            this.setAnimation(pen, this.chartGetData[index].res, data.oldData)
             resolve()
           })
         })
@@ -723,10 +713,7 @@ 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)
+        console.log(data)
         getTopology(this.topologyIndex).open(data)
         getTopology(this.topologyIndex).lock(1)
         this.objChange = false
@@ -755,9 +742,9 @@ export default {
         const timer = setTimeout(() => {
           getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
             if (item.animatePlay) {
-              item.stopAnimate()
+              getTopology(this.topologyIndex).stopAnimate(item.id)
               const timer1 = setTimeout(() => {
-                item.startAnimate()
+                getTopology(this.topologyIndex).startAnimate(item.id)
                 clearTimeout(timer1)
               })
             }
@@ -806,6 +793,18 @@ export default {
           return
         }
         data = this.$loadsh.cloneDeep(data)
+        console.log(Option)
+        const canvasOptions = {
+          rotateCursor: '/static/roteCursor.cur',
+          disableEmptyLine: true,
+          autoExpandDistance: 0,
+          minScale: 0.2,
+          scaleKey: -1,
+          keydown: 1,
+          gridSize: 40
+        }
+        canvasOptions.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f6f6f6'
+        canvasOptions.gridColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
         if (!getTopology(this.topologyIndex)) {
           let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           // canvas.open(data)
@@ -815,25 +814,23 @@ export default {
           // 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)
-        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).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: rectangleImg })
-        getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
+        // getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
         getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移·
         getTopology(this.topologyIndex).on('active', this.pensActive) // 选中·
         getTopology(this.topologyIndex).on('scale', () => {}) // 缩放·
         getTopology(this.topologyIndex).on('translatePens', () => {}) // 移动画笔结束·
         getTopology(this.topologyIndex).on('translatingPens', () => {}) // 移动画笔进行中·
-        getTopology(this.topologyIndex).on('add', () => {}) // 添加新画笔·
+        getTopology(this.topologyIndex).on('add', this.appPen) // 添加新画笔·
+        getTopology(this.topologyIndex).on('click', this.topoClick) // click画笔·
+        getTopology(this.topologyIndex).store.options.autoAnchor = true
+        // getTopology(this.topologyIndex).on('contextmenu', this.onContextMenu) // 添加新画笔·
         this.getModule()// 获取module
         resolve()
       })
@@ -846,10 +843,10 @@ export default {
         }
         this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
           console.log(JSON.stringify(res.data.topo))
-          res.data.topo.oldData = 1
           if (!res.data) {
             return
           }
+          res.data.topo && (res.data.topo.oldData = 0)
           let data = JSON.parse(JSON.stringify(res.data.topo))
           if (!res.data.topo || !res.data.topo.pens.length) {
             this.showNoData = true
@@ -872,11 +869,17 @@ export default {
             this.projectAlertShow = true
             this.saveData = JSON.parse(JSON.stringify(data))
             this.topologyInfo.name = this.obj.name
-            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
+            data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
+            data.grid = false
+            data.rule = false
             resolve(data)
             data = null
           } else {
-            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#BEBEBE'
+            data.ruleColor = this.theme == 'light' ? '#4e4e4e' : '#f9f9f9'
+            data.gridColor = this.theme == 'light' ? '#ededed' : '#090909'
+            data.grid = false
+            data.rule = false
             if (data.data) {
               this.topologyInfo = {
                 fontSize: data.data.fontSize,
@@ -906,10 +909,10 @@ export default {
               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--
-                  }
+                  // 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 => {
@@ -1020,7 +1023,7 @@ export default {
       })
     },
     // 赋值动画
-    setAnimation (pen, res) { // 根据所有res的状态 赋值动画
+    setAnimation (pen, res, isOldData) { // 根据所有res的状态 赋值动画
       let maxLevel = 0
       if (res.length > 0) {
         res.forEach((response, innerPos) => {
@@ -1046,27 +1049,27 @@ export default {
         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.textColor = selLevel.color.text
+            pen.background = selLevel.color.fill
+            pen.color = 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, selLevel.color.text)
         } 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.color = selLevel.color.line
+            pen.lineAnimateType = selLevel.animateType
             pen.fontColor = selLevel.color.text
           }
-          // onChangeAnimateLine(pen, pen.animateType)
+          onChangeAnimateLine(pen, selLevel.animateType, isOldData)
         }
       } 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, isOldData)
         }
       }
     },
@@ -1650,8 +1653,7 @@ export default {
     },
 
     onUpdateProps (node) {
-      // 如果是node属性改变，需要传入node，重新计算node相关属性值
-      // 如果是line属性改变，无需传参
+      console.log(node)
       getTopology(this.topologyIndex).setValue(node)
     },
 
@@ -1984,9 +1986,9 @@ 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).store.data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data
           if (item.animatePlay) {
-            item.stopAnimate()
+            getTopology(this.topologyIndex).stopAnimate(item.id)
           }
           if (!item.data.expressArr.length) {
             item.data.expressArr = ['']
@@ -1998,8 +2000,8 @@ export default {
           }
           item.animateType = item.data.animateType
           if (item.type === 0) {
-            item.fillStyle = item.data.fillStyle
-            item.strokeStyle = item.data.strokeStyle
+            item.background = item.data.background || item.data.fillStyle
+            item.color = item.data.color || item.data.strokeStyle
             item.animatePlay = false
             item.fontColor = item.data.fontColor || '#222222'
             item.gradientType = item.data.gradientType ? item.data.gradientType : 0
@@ -2012,20 +2014,23 @@ export default {
             } else {
               item.bkType = 1
             }
+            item.data.animateNeedLine = false
           } else if (item.type === 1) {
             item.animateColor = item.data.animateColor
-            item.strokeStyle = item.data.strokeStyle
+            item.color = item.data.color || 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)._setValue(item)
         })
         getTopology(this.topologyIndex).caches = {
           index: 0,
           list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
         }
+        getTopology(this.topologyIndex).render()
         const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
         const domRect = dom ? dom.getBoundingClientRect() : {}
         getTopology(this.topologyIndex).canvasPos = domRect
@@ -2050,9 +2055,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()
-      dataOption[key] = this.lineName
-      getTopology(this.topologyIndex).render()
+      getTopology(this.topologyIndex).setOptions({ drawingLineName: val })
     },
     notModuleIDArrChange (id) {
       this.notModuleIDArr = this.notModuleIDArr.filter(item => item.id !== id)
@@ -2063,7 +2066,8 @@ export default {
       this.isPreview = false
       this.editTopologyFlag = true
       this.showNoData = false
-      const topologyData = getTopology(this.topologyIndex).pureData()
+      const topologyData = getTopology(this.topologyIndex).data()
+      topologyData.oldData = 0
       let flag = true
       const arr = []
       this.notModuleIDArr = []
diff --git a/nezha-fronted/src/components/common/project/topologyMixin.js b/nezha-fronted/src/components/common/project/topologyMixin.js
index fae34ad89..14eabc1bc 100644
--- a/nezha-fronted/src/components/common/project/topologyMixin.js
+++ b/nezha-fronted/src/components/common/project/topologyMixin.js
@@ -1,19 +1,134 @@
 import { getTopology } from '@/components/common/js/common'
 
 export default {
+  data () {
+    return {}
+  },
   methods: {
+    appPen (pen) {
+      const data = pen[0]
+      if (data.type === 0 && !data.data.moduleId) {
+        data.background = '#FFFFFF00'
+        data.color = '#333333'
+        data.borderColor = '#333333'
+        data.textColor = '#333333'
+        data.fontSize = 12
+        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: ''
+        }
+      } else if (data.type == 1) {
+        // 连线是否自动计算锚点
+        // data.manualCps=true;
+        data.background = '#FFFFFF00'
+        data.color = '#333333'
+        data.borderColor = '#333333'
+        data.textColor = '#333333'
+        data.fontSize = 12
+        data.autoPolyline = 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
+      }
+    },
     pensActive (pens) {
       console.log(pens)
       if (!pens.length) return
-      this.props = {
-        line: null,
-        multi: false,
-        expand: this.props.expand,
-        nodes: null,
-        locked: pens[0].locked,
-        pen: pens[0],
-        pens: null
+      if (pens.length == 1) {
+        this.props = {
+          line: null,
+          multi: false,
+          expand: this.props.expand,
+          nodes: null,
+          locked: pens[0].locked,
+          pen: pens[0],
+          pens: pens
+        }
+      } else {
+        this.props = {
+          line: null,
+          multi: false,
+          expand: this.props.expand,
+          nodes: null,
+          locked: false,
+          pen: null,
+          pens: pens
+        }
       }
+      return pens
     },
     topTranslate () {
       this.moduleId = ''
@@ -23,6 +138,27 @@ export default {
         getTopology(this.topologyIndex)
       }
       this.getNodesArr()
+    },
+    topoClick (pointAndPen) {
+      this.showNodeTools('')
+      if (!pointAndPen.pen) {
+        this.props = {
+          node: null,
+          line: null,
+          multi: false,
+          expand: null,
+          nodes: null,
+          locked: null,
+          pen: null,
+          pens: null
+        }
+      }
+      console.log(pointAndPen, 'click')
+    },
+    toCenter () {
+      if (getTopology(this.topologyIndex)) {
+        getTopology(this.topologyIndex).resize()
+      }
     }
   }
 }