diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index abf27d5e2..5501eb208 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="props-box">
+  <div class="props-box" :loading="loading">
     <!--删除按钮-->
     <!--<button id="edit-ep-del" type="button" class="nz-btn nz-btn-size-normal nz-btn-size-alien del-btn"-->
     <!--v-if="selection.pen" @click="delTopologyPen">-->
@@ -606,12 +606,30 @@
                   <nezhaColor :value-arr="[{name:'strokeStyle',value:selection.pen.strokeStyle}]" @colorChange="colorChange"/>
                 </div>
               </div>
-              <div class="props-pen-item" v-if="selection.pen.type">
+              <div class="props-pen-item" v-if="selection.pen&&selection.pen.type">
                 <div>{{$t('project.topology.arrowColor')}}</div>
                 <div class="p10 pl0">
                   <nezhaColor :value-arr="[{name:'toArrowColor',value:selection.pen.toArrowColor}]" @colorChange="colorChange"/>
                 </div>
               </div>
+<!--              <div class="props-pen-item" v-if="selection.pen&&!selection.pen.type">-->
+<!--                <div>{{$t('project.topology.img')}}</div>-->
+<!--                <div class="p10 pl0">-->
+<!--                  <el-select>-->
+<!--                    <el-option-group-->
+<!--                      v-for="group in imgArr"-->
+<!--                      :key="group.label"-->
+<!--                      :label="group.label">-->
+<!--                      <el-option-->
+<!--                        v-for="item in group.options"-->
+<!--                        :key="item.value"-->
+<!--                        :label="item.label"-->
+<!--                        :value="item.value">-->
+<!--                      </el-option>-->
+<!--                    </el-option-group>-->
+<!--                  </el-select>-->
+<!--                </div>-->
+<!--              </div>-->
 
             </div>
           </el-collapse-item>
@@ -1171,7 +1189,8 @@ export default {
         '#1250B0', '#1F60C4', '#5794F2',
         '#E55400', '#FA6400', '#FF9830',
         '#7C2EA3', '#8F3BB8', '#B877D9'
-      ]
+      ],
+      loading: false
     }
   },
   mixins: [rz],
@@ -1189,7 +1208,8 @@ export default {
       type: Number,
       require: true
     },
-    modules: {}
+    modules: {},
+    imgArr: {}
   },
   watch: {
     // 'topologyData.data':{
@@ -1204,7 +1224,21 @@ export default {
     //   },
     //   deep:true,
     //   immediate:false,
-    // }
+    // },
+    selection: {
+      handler () {
+        // this.loading = false
+      },
+      deep: true,
+      immediate: true
+    },
+    imgArr: {
+      handler () {
+        // this.loading = false
+      },
+      deep: true,
+      immediate: true
+    }
   },
   created () {
     const dataOption = getTopology(this.index).data
@@ -2157,4 +2191,10 @@ export default {
   .font20{
     font-size: 20px;
   }
+  /deep/ .metric-selector-title{
+    margin-left: 10px;
+  }
+  /deep/ .query-row .input-box{
+    margin-right: 0 !important;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/project/L5/services/img.js b/nezha-fronted/src/components/common/project/L5/services/img.js
new file mode 100644
index 000000000..614a01056
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/L5/services/img.js
@@ -0,0 +1,2 @@
+const imgDefault = 'data:image/jpg;base64,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';
+export default imgDefault
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 8a44cbce1..4c6fe1202 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -13,12 +13,17 @@
             <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">
-              <div style="height: 450px">
+              <div style="height: 450px"  v-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">
+                <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-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
+                      </div>
+                    </template>
                     <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
                       <a
                         :key="i"
@@ -32,7 +37,7 @@
                         <img :src="btn.data.image" v-if="btn.data.image">
                         <i v-else :class="`iconfont ${btn.icon}`"></i>
                       </a>
-                      <span v-if="item.group==='自定义图片'" class="delIcon" @click="delImg(btn)">x</span>
+                      <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click="tooltipDelete(btn)"></i>
                     </div>
                   </el-collapse-item>
                 </el-collapse>
@@ -145,16 +150,17 @@
             <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
             <!--设置属性-->
             <div v-if="editTopologyFlag&&toolShow.attr" class="props">
-              <CanvasProps ref="CanvasProps"
-                           :index="topologyIndex"
-                           :modules="modules"
-                           :selection.sync="props"
-                           @animate="animateCanvas"
-                           @change="onUpdateProps"
-                           @changeProjectTitle="changeProjectTitle"
-                           @del="delPen"
-                           @notModuleIDArrChange="notModuleIDArrChange">
-              </CanvasProps>
+              <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 v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
@@ -330,6 +336,7 @@
 
 <script>
 import { Topology, registerNode } from '@topology/core'
+import imgDefault from '@/components/common/project/L5/services/img'
 import {
   Tools,
   canvasRegister,
@@ -377,7 +384,7 @@ export default {
       imgInit: false, // 判断图片是否加载完成
       toolGroup: '基本形状',
       editFlag: true,
-      tools: Tools,
+      tools: [...Tools],
       props: {},
       topologyLoading: false,
       contextmenu: {
@@ -406,6 +413,7 @@ export default {
       topologyIndex: 0,
       iconArray: [],
       imgageLoading: false,
+      imageSave: false,
       toolShow: {
         node: true,
         attr: true,
@@ -489,7 +497,7 @@ export default {
     }
   },
   components: {
-    CanvasProps,
+    'canvas-props': CanvasProps,
     topologyTopTool,
     popDataMain,
     popDataInfo,
@@ -809,7 +817,8 @@ export default {
               data.pens.forEach(item => {
                 if (item.type === 0 && item.data.imageId) {
                   // console.log(item,item.data.imageId,this.iconArray.find(item1 => item1.id == 44))
-                  item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
+                  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('/monitor/module/stat', { id: item.data.moduleId }))
@@ -1142,12 +1151,12 @@ export default {
       // 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
-      })
+      // 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) {
@@ -1315,6 +1324,7 @@ export default {
                 this.penId = data.id
               }
             })
+            this.$refs.CanvasProps.loading = true
             break
           case 'line':
           case 'addLine':
@@ -1335,6 +1345,7 @@ export default {
                 this.penId = data.id
               }
             })
+            this.$refs.CanvasProps.loading = true
             break
           case 'multi':
             this.props = {
@@ -1539,6 +1550,9 @@ export default {
 
     imgUpload () {
       const this_ = this
+      if (!this.imageSave) {
+        this.imageSave = true
+      }
       if (!this.uploadPic.unit) {
         this.$message({
           message: this_.$t('project.topology.unitError'),
@@ -1567,6 +1581,7 @@ export default {
       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
@@ -1615,12 +1630,39 @@ export default {
         }
       })
     },
-
+    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[1].children=[];
+          this.tools = [...Tools]
           const imgArr = []
           const promiseArr = []
           res.data.list.forEach((item, index) => {
@@ -1663,6 +1705,7 @@ export default {
             })
 
             this.imgInit = true
+            this.imgageLoading = false
           })
         })
       } else {
@@ -1687,6 +1730,7 @@ export default {
             }
           })
           this.imgInit = true
+          this.imgageLoading = false
         })
       }
     },
@@ -2087,7 +2131,7 @@ export default {
       }
 
       .buttons {
-        padding: 12px;
+        padding: 11px;
         display: inline-block;
         position: relative;
         vertical-align: middle;
@@ -2098,13 +2142,12 @@ export default {
           width: 16px;
           height: 16px;
           border-radius: 10px;
-          font-size: 12px;
+          font-size: 16px;
           line-height: 16px;
           text-align: center;
-          background: red;
-          right: -8px;
-          top: -8px;
-          color: #fff;
+          right: 2px;
+          top: 2px;
+          color: #fa901c;
           display: none;
           cursor: pointer;
         }
@@ -2147,10 +2190,13 @@ export default {
           height: 100%;
         }
       }
-
+      .buttons{
+        border: 1px solid transparent;
+      }
       .buttons:hover {
+        border-color: #fa901c;
         .delIcon {
-          /*display: inline-block;*/
+          display: inline-block;
         }
       }
     }
@@ -2189,6 +2235,30 @@ export default {
   }
 </style>
 <style lang="scss" scoped>
+  /deep/ .el-collapse-item  .is-active .nz-icon-caret-right{
+    transform: rotate(90deg);
+    color: #FA901C;
+  }
+  /deep/ .el-collapse-item .title-delete{
+    display: none;
+  }
+  /deep/ .el-collapse-item .nz-icon-caret-right{
+    transition: transform .3s;
+    color: #BEBEBE;
+    margin-right: 5px;
+  }
+  /deep/ .el-collapse-item:hover{
+    .el-collapse-item__header{
+      color: #FA901C;
+    }
+    .nz-icon-caret-right{
+      color: #FA901C;
+    }
+    .title-delete{
+      display: block;
+      color: #FA901C;
+    }
+  }
   .project-box{
     @keyframes model-error-animation {
       0% {
@@ -2682,4 +2752,7 @@ export default {
       overflow: hidden;
     }
   }
+  /deep/ .el-collapse-item__arrow{
+    display: none;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index d1cc14825..4211a2da0 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -13,12 +13,17 @@
             <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">
-              <div style="height: 450px">
+              <div style="height: 450px"  v-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">
+                <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-caret-right"></i> <div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click="tooltipDeleteTitle(item)"></i>
+                      </div>
+                    </template>
                     <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
                       <a
                         :key="i"
@@ -32,7 +37,7 @@
                         <img :src="btn.data.image" v-if="btn.data.image">
                         <i v-else :class="`iconfont ${btn.icon}`"></i>
                       </a>
-                      <span v-if="item.group==='自定义图片'" class="delIcon" @click="delImg(btn)">x</span>
+                      <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click="tooltipDelete(btn)"></i>
                     </div>
                   </el-collapse-item>
                 </el-collapse>
@@ -145,16 +150,17 @@
             <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
             <!--设置属性-->
             <div v-if="editTopologyFlag&&toolShow.attr" class="props">
-              <CanvasProps ref="CanvasProps"
-                           :index="topologyIndex"
-                           :modules="modules"
-                           :selection.sync="props"
-                           @animate="animateCanvas"
-                           @change="onUpdateProps"
-                           @changeProjectTitle="changeProjectTitle"
-                           @del="delPen"
-                           @notModuleIDArrChange="notModuleIDArrChange">
-              </CanvasProps>
+              <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 v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
@@ -213,7 +219,7 @@
           </div>
           <!--endpoint-->
           <transition name="right-box">
-            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
+            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
                            @close="popDataShowUpdate('',true)">endpoint
             </endpointTable>
           </transition>
@@ -235,13 +241,13 @@
     <!--</div>-->
     <!--asset-->
     <transition name="right-box">
-      <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
+      <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" :projectId="projectInfo.id"
+      <alertTable v-if="popDataShow.alert" :moduleId="moduleId" :moduleName="moduleName" :projectId="projectInfo.id"
                   @close="popDataShowUpdate('',true)">alert
       </alertTable>
     </transition>
@@ -272,13 +278,14 @@
       <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 v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
+          <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
+            maxlength="64" show-word-limit
             class="inline-input"
             v-model="uploadPic.unit"
             :fetch-suggestions="querySearch"
@@ -328,1481 +335,1031 @@
 </template>
 
 <script>
-  import { Topology, registerNode } from '@topology/core'
-  import {
-    Tools,
-    canvasRegister,
-    imageTemp,
-    myShape,
-    myAnchors,
-    myIconRect,
-    myTextRect,
-    onChangeAnimate,
-    onChangeAnimateLine,
-    myCubec,
-    myCubeAnchors
-  } from './L5/services/canvas.js'
-  import { getTopology, setTopology } from '../js/common'
-  import CanvasProps from './L5/CanvasProps'
-  import topologyTopTool from './L5//topologyTopTool'
-  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 } from '../js/tools'
-  import bus from '../../../libs/bus'
-  import topologyPrev from './topologyPrev'
-  // 注册到画布
-  registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-  registerNode('myCube', myCubec, myCubeAnchors, null, null)
+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 } from '../js/common'
+import CanvasProps from './L5/CanvasProps'
+import topologyTopTool from './L5//topologyTopTool'
+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 } from '../js/tools'
+import bus from '../../../libs/bus'
+import topologyPrev from './topologyPrev'
+// 注册到画布
+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.01
-  }
-  export default {
-    name: 'topologyL5',
-    data () {
-      return {
-        title: this.$t("overall.customPicture"),
-        objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
-        chartDataInfo: {},
-        topoPrevData: {}, // 预览数据
-        imgInit: false, // 判断图片是否加载完成
-        toolGroup: '基本形状',
-        editFlag: true,
-        tools: Tools,
-        props: {},
-        topologyLoading: false,
-        contextmenu: {
+const canvasOptions = {
+  rotateCursor: '/img/rotate.cur',
+  translateKey: 'None',
+  disableEmptyLine: true,
+  autoExpandDistance: 0,
+  minScale: 0.01
+}
+export default {
+  name: 'topologyL5',
+  data () {
+    return {
+      title: this.$t('overall.customPicture'),
+      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')
+      ],
+      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的显示定时器
+      nodesArr: [],
+      notModuleIDArr: [],
+      popData: [
+        {
+          top: '-40px',
+          left: '-21px',
+          className: 'nz-icon-endpoint',
+          id: 'endpoint',
+          title: this.$t('project.topology.endpoint')
+        },
+        { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
+        { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '19px', className: '', id: 'other', title: '' },
+        { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
+        { top: '-4px', left: '-40px', 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: 400
+      },
+      chartData: {},
+      chartGetData: [],
+      penLineType: [
+        { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
+        { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
+        { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
+        // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
+      ],
+      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 结束编辑后返回
+    }
+  },
+  components: {
+    'canvas-props': CanvasProps,
+    topologyTopTool,
+    popDataMain,
+    popDataInfo,
+    alertTable,
+    assetTable,
+    endpointTable,
+    topoTooltip,
+    topologyPrev
+  },
+  props: {
+    topologyIndexF: {
+      type: Number,
+      default: 0
+    },
+    obj: {},
+    showTopTools: {
+      type: Boolean,
+      default: true
+    },
+    fromOverView: {
+      type: Boolean,
+      default: false
+    },
+    fromPrev: {
+      type: Boolean,
+      default: false
+    },
+    topoPrevDataS: {
+
+    }
+  },
+  watch: {
+    topologyIndexF: {
+      immediate: true,
+      handler (n) {
+        this.topologyIndex = n
+      }
+    },
+    obj: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        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)
+    }
+  },
+  computed: {
+    topoScreen () {
+      return this.$store.getters.getShowTopoScreen
+    }
+  },
+  created () {
+    canvasRegister()
+    if (process.client) {
+      document.onclick = event => {
+        this.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')
-        ],
-        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,
-        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的显示定时器
-        nodesArr: [],
-        notModuleIDArr: [],
-        popData: [
-          {
-            top: '-40px',
-            left: '-21px',
-            className: 'nz-icon-endpoint',
-            id: 'endpoint',
-            title: this.$t('project.topology.endpoint')
-          },
-          { top: '-40px', left: '19px', className: 'nz-icon-asset', id: 'asset', title: this.$t('project.topology.asset') },
-          { top: '-4px', left: '40px', className: '', id: 'other', title: '' },
-          { top: '30px', left: '19px', className: '', id: 'other', title: '' },
-          { top: '30px', left: '-21px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') },
-          { top: '-4px', left: '-40px', 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: '',
-        tooltipPosition: {
-          top: 0,
-          left: 0,
-          show: false,
-          height: 400
-        },
-        chartData: {},
-        chartGetData: [],
-        penLineType: [
-          { d: 'M5 19 a50,100 0 0,1 40,0', 'stroke-dasharray': '', name: this.$t('project.topology.curve'), id: 'curve' },
-          { d: 'M5 8 l20 0 l0 12 l20 0', 'stroke-dasharray': '', name: this.$t('project.topology.polyline'), id: 'polyline' },
-          { d: 'M5 14 l40 0', 'stroke-dasharray': '', name: this.$t('project.topology.line'), id: 'line' }
-          // {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
-        ],
-        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 结束编辑后返回
+        }
       }
+    }
+  },
+  mounted () {
+    if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
+      this.addNodeInit()
+    }
+    document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
+    window.addEventListener('resize', this.winResize)
+  },
+  methods: {
+    init () {
+      canvasOptions.on = this.onMessage
+      this.reload()
     },
-    components: {
-      CanvasProps,
-      topologyTopTool,
-      popDataMain,
-      popDataInfo,
-      alertTable,
-      assetTable,
-      endpointTable,
-      topoTooltip,
-      topologyPrev
-    },
-    props: {
-      topologyIndexF: {
-        type: Number,
-        default: 0
-      },
-      obj: {},
-      showTopTools: {
-        type: Boolean,
-        default: true
-      },
-      fromOverView: {
-        type: Boolean,
-        default: false
-      },
-      fromPrev: {
-        type: Boolean,
-        default: false
-      },
-      topoPrevDataS: {
 
-      }
-    },
-    watch: {
-      topologyIndexF: {
-        immediate: true,
-        handler (n) {
-          this.topologyIndex = n
-        }
-      },
-      obj: {
-        deep: true,
-        immediate: true,
-        handler (n) {
-          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)
-              }
-            }
+    reload () {
+      this.topologyLoading = true
+      this.getTopologyData().then((data) => {
+        this.openTopologyData(data).then(() => {
+          // 获取对应的值 给节点 连线添加对应动画
+          this.lineName = data.lineName ? data.lineName : this.lineName
+          this.chartGetData = []
+          const axiosArr = []
+          const promiseArr = []
+          const self = this
+          const pensPromise = (pen, arr, index) => {
+            return new Promise(function (resolve, reject) {
+              Promise.all(arr).then((res) => {
+                self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
+                self.setAnimation(pen, self.chartGetData[index].res)
+                resolve()
+              })
+            })
           }
-        }
-      },
-      topoScreen (n) {
-        getTopology(this.topologyIndex).resize()
-        getTopology(this.topologyIndex).centerView()
-        // getTopology(this.topologyIndex).fitView(30)
-      }
-    },
-    computed: {
-      topoScreen () {
-        return this.$store.getters.getShowTopoScreen
-      }
-    },
-    created () {
-      canvasRegister()
-      if (process.client) {
-        document.onclick = event => {
-          this.contextmenu = {
-            left: null,
-            top: null,
-            bottom: null
-          }
-        }
-      }
-    },
-    mounted () {
-      if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
-        this.addNodeInit()
-      }
-      document.getElementById('topology-canvas' + this.topologyIndexF).addEventListener('mousemove', this.canvasMove)
-      window.addEventListener('resize', this.winResize)
-    },
-    methods: {
-      init () {
-        canvasOptions.on = this.onMessage
-        this.reload()
-      },
-
-      reload () {
-        this.topologyLoading = true
-        this.getTopologyData().then((data) => {
-          this.openTopologyData(data).then(() => {
-            // 获取对应的值 给节点 连线添加对应动画
-            this.lineName = data.lineName ? data.lineName : this.lineName
-            this.chartGetData = []
-            const axiosArr = []
-            const promiseArr = []
-            const self = this
-            const pensPromise = (pen, arr, index) => {
-              return new Promise(function (resolve, reject) {
-                Promise.all(arr).then((res) => {
-                  self.chartGetData[index].res = self.computeData(res, pen.data.aggregation, pen)
-                  self.setAnimation(pen, self.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: [] })
+            const arr = item.data.expressArr.map((ele) => {
+              let query = encodeURIComponent(ele)
+              if (!query) {
+                return new Promise(resolve => {
+                  resolve({ data: '', status: 'no query' })
                 })
-              })
-            }
-            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: [] })
-              const arr = item.data.expressArr.map((ele) => {
-                let query = encodeURIComponent(ele)
-                if (!query) {
-                  return new Promise(resolve => {
-                    resolve({ data: '', status: 'no query' })
-                  })
-                }
-                query += '&nullType=' + 'connected'
-                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) => {
-              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).centerView()
-              this.penToolTipScale = getTopology(this.topologyIndex).data.scale
-              setTimeout(() => {
-                getTopology(this.topologyIndex).data.pens.forEach(item => {
-                  if (item.animatePlay) {
-                    item.stopAnimate()
-                    setTimeout(() => {
-                      item.startAnimate()
-                    })
-                  }
-                }, 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()
+              query += '&nullType=' + 'connected'
+              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))
           })
-        })
-      },
-
-      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 => {
-          if (!getTopology(this.topologyIndex)) {
-            const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
-            canvas.open(data)
-            setTopology(this.topologyIndex, canvas)
-          } else {
+          Promise.all(promiseArr).then((res) => {
             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 => {
-            let data = res.data.topo
-            // data = JSON.parse(localStorage.getItem('topoData'))
-            if (!res.data.topo || !data.pens) {
-              data = {
-                bkColor: '#FFFFFF',
-                gridSize: 10,
-                gridColor: '#ededed',
-                lineWidth: 1,
-                ruleColor: '#4e4e4e'
+            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
               }
-              this.projectInfoShow = true
-              this.projectAlertShow = true
-              this.saveData = { ...data }
-              this.topologyInfo.name = this.obj.name
-              resolve(data)
-            } else {
-              this.topologyInfo = {
-                fontSize: data.data.fontSize,
-                align: data.data.align,
-                fontColor: data.data.fontColor,
-                opacity: data.data.opacity,
-                name: data.name
+              if (item.rect.ex > position.x || item.rect.ey > position.y) {
+                if (this.fromOverView) {
+                  getTopology(this.topologyIndex).fitView(20)
+                }
+                flag = true
               }
-              if (this.fromOverView) { // 优化从首页来的加载速度
-                const arr = data.pens.filter(item => !item.type)
-                this.addNodeInit(arr)
-              }
-              const timer = setInterval(() => {
-                if (!this.imgInit) {
-                  return
-                }
-                clearInterval(timer)
-                const promiseArr = []
-                const self = this
-                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) {
-                    // console.log(item,item.data.imageId,this.iconArray.find(item1 => item1.id == 44))
-                    item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
-                  }
-                  if (item.type === 0) {
-                    // promiseArr.push(this.$get('/monitor/module/stat', { id: 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
-                }
-                Promise.all(promiseArr).then(res => {
-                  res.forEach((response, index) => {
-                    const item = data.pens[index]
-                    if (item.type === 0) {
-                      item.data.state = response.data
-                      item.data.state.asset = false
-                      item.data.state.endpoint = false
-                      item.data.state.alert = false
-                      if (item.data.state.assetStat.down > 0) {
-                        item.data.state.asset = true
-                      }
-                      if (item.data.state.endpointStat.down > 0) {
-                        item.data.state.endpoint = true
-                      }
-                      if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
-                        item.data.state.alert = true
-                      }
-                      item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
-                    }
-                  })
-                  self.saveData = { ...data }
-                  resolve(data)
-                })
-              }, 100)
-            }
-          })
-        })
-      },
-      // 赋值动画
-      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 = this.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
-      },
-      dealLegendAlias: function (legend, expression) {
-        if (/\{\{.+\}\}/.test(expression)) {
-          const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
-            const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
-            const reg = new RegExp(label + '=".+?"')
-            let value = null
-            if (reg.test(legend)) {
-              const find = legend.match(reg)[0]
-              value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
-            }
-            return value || label
-          })
-          return labelValue
-        } else {
-          return expression
-        }
-      },
-      // 获取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.$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 = response.data.list
-            this.modulesDiff()
-          }
-        })
-      },
-
-      getNodesArr () {
-        if (!getTopology(this.topologyIndex)) return
-        this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
-          if (!item.data) {
-            item.data = {
-              moduleId: '',
-              moduleName: '',
-              show: false,
-              error: false,
-              expressArr: []
-            }
-          }
-          return item.type === 0
-        })
-        // this.nodesArr=this.nodesArr.map(item=>{
-        //   if(!item.data){
-        //     item.data={
-        //       moduleId:'',
-        //       moduleName:'',
-        //       show:false,
-        //       error:false,
-        //       expressArr:[],
-        //     }
-        //   }
-        //   return {
-        //     rect:item.rect,
-        //     data:item.data
-        //   }
-        // });
-        // 打开动画 是否更新顶部图标
-        this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
-      },
-
-      modelTopClick (item, index) {
-
-      },
-      // 摘除已选择的module
-      modulesDiff (data) {
-        this.modules = this.allModules
-        if (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
-        if (tool.id === 'total') {
-          this.popDataShowUpdate('', false, node)
-          return
-        }
-        setTimeout(() => {
-          this.popDataShowUpdate(tool.id, false, node)
-        }, 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
-        setTimeout(() => {
-          this.dragFlag = true
-        }, 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 }
-          })
-        setTimeout(() => {
-          this.dragFlag = true
-        }, 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) {
-            data.data = {
-              ...data.data,
-              moduleId: '',
-              moduleName: '',
-              show: false,
-              error: false,
-              animatePlay: false,
-              fillStyle: data.fillStyle,
-              strokeStyle: data.strokeStyle,
-              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: [''],
-              legends: [''],
-              tooltipShow: true,
-              panelName: 'topologyName',
-              unit: 2,
-              type: 'line',
-              displayChart: true,
-              aggregation: 'last',
-              title: '',
-              url: ''
-            }
-          } else if (data.type == 1 && !data.data) {
-            // 连线是否自动计算锚点
-            // data.manualCps=true;
-            data.animateColor = '#FA901C'
-            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: [''],
-              legends: [''],
-              tooltipShow: 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
+            })
+            getTopology(this.topologyIndex).centerView()
+            this.penToolTipScale = getTopology(this.topologyIndex).data.scale
             setTimeout(() => {
-              this.tooltipPosition.show = true
-              const ePosition = window.ePosition
-              const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
-              const 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
+              getTopology(this.topologyIndex).data.pens.forEach(item => {
+                if (item.animatePlay) {
+                  item.stopAnimate()
+                  setTimeout(() => {
+                    item.startAnimate()
+                  })
+                }
+              }, 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()
+          })
+        })
+      })
+    },
+
+    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 => {
+        if (!getTopology(this.topologyIndex)) {
+          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          canvas.open(data)
+          setTopology(this.topologyIndex, canvas)
+        } 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 => {
+          let data = res.data.topo
+          // data = JSON.parse(localStorage.getItem('topoData'))
+          if (!res.data.topo || !data.pens) {
+            data = {
+              bkColor: '#FFFFFF',
+              gridSize: 10,
+              gridColor: '#ededed',
+              lineWidth: 1,
+              ruleColor: '#4e4e4e'
+            }
+            this.projectInfoShow = true
+            this.projectAlertShow = true
+            this.saveData = { ...data }
+            this.topologyInfo.name = this.obj.name
+            resolve(data)
+          } else {
+            this.topologyInfo = {
+              fontSize: data.data.fontSize,
+              align: data.data.align,
+              fontColor: data.data.fontColor,
+              opacity: data.data.opacity,
+              name: data.name
+            }
+            if (this.fromOverView) { // 优化从首页来的加载速度
+              const arr = data.pens.filter(item => !item.type)
+              this.addNodeInit(arr)
+            }
+            const timer = setInterval(() => {
+              if (!this.imgInit) {
+                return
+              }
+              clearInterval(timer)
+              const promiseArr = []
+              const self = this
+              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) {
+                  // console.log(item,item.data.imageId,this.iconArray.find(item1 => item1.id == 44))
+                  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('/monitor/module/stat', { id: 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
+              }
+              Promise.all(promiseArr).then(res => {
+                res.forEach((response, index) => {
+                  const item = data.pens[index]
+                  if (item.type === 0) {
+                    item.data.state = response.data
+                    item.data.state.asset = false
+                    item.data.state.endpoint = false
+                    item.data.state.alert = false
+                    if (item.data.state.assetStat.down > 0) {
+                      item.data.state.asset = true
+                    }
+                    if (item.data.state.endpointStat.down > 0) {
+                      item.data.state.endpoint = true
+                    }
+                    if (item.data.state.alertStat.P1 > 0 || item.data.state.alertStat.P3 > 0 || item.data.state.alertStat.P2 > 0) {
+                      item.data.state.alert = true
+                    }
+                    item.data.state.error = item.data.state.asset || item.data.state.endpoint || item.data.state.alert
+                  }
+                })
+                self.saveData = { ...data }
+                resolve(data)
               })
             }, 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先执行
-        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('')
-              }
-              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'
+          }
+        })
+      })
+    },
+    // 赋值动画
+    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
                   }
-                  this.penId = data.id
                 }
               })
-              break
-            case 'line':
-            case 'addLine':
-              this.props = {
-                node: null,
-                line: data,
-                multi: false,
-                nodes: null,
-                locked: data.locked,
-                pen: data,
-                pens: null
+            })
+          }
+        })
+      }
+      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,
               }
-              this.$nextTick(() => {
-                if (this.$refs.CanvasProps) {
-                  if (this.penId !== data.id) {
-                    this.$refs.CanvasProps.tab = '1'
-                  }
-                  this.penId = data.id
-                }
+              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])]]
               })
-              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': {
-              const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-              if (getTopology(this.topologyIndex)) {
-                getTopology(this.topologyIndex).canvasPos = domRect
-              }
-              break
-            }
-            case 'scale': {
-              if (this.$refs.topTool) {
-                this.$refs.topTool.scaleNum = parseInt(data * 100)
-              }
-              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
-          }
-        }, 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(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'))
-          return false
-        }
-        if (!isLt2M) {
-          this.$message.error(this_.$t('project.topology.imgSize'))
-          return false
-        }
-        const isSize = 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.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 => {
-          if (res.code == 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
-            this.uploadPicShow = false
-            this.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
-              const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
-              if (group) {
-                group.children.push({
-                  ...imageTemp,
-                  data: {
-                    ...imageTemp.data,
-                    text: res.data.imageName,
-                    image: data,
-                    imageId: res.data.id,
-                    unit: this.uploadPic.unit
+              // 判断是否有数据, && tagsArr.length > 0
+              if (dpsArr.length) {
+                tagsArr.forEach((tag, i) => {
+                  if (tag !== '__name__') {
+                    host += `${tag}="${queryItem.metric[tag]}",`
                   }
                 })
-              } else {
-                this.tools.push({
-                  group: this.uploadPic.unit,
-                  children: [{
-                    ...imageTemp,
-                    data: {
-                      ...imageTemp.data,
-                      text: res.data.imageName,
-                      image: data,
-                      imageId: res.data.id,
-                      unit: this.uploadPic.unit
-                    }
-                  }]
-                })
+                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 = this.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
               }
             })
-          } else {
-            this.$message.error(res.msg)
           }
         })
-      },
+      }
+      return res
+    },
+    dealLegendAlias: function (legend, expression) {
+      if (/\{\{.+\}\}/.test(expression)) {
+        const labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
+          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+          const reg = new RegExp(label + '=".+?"')
+          let value = null
+          if (reg.test(legend)) {
+            const find = legend.match(reg)[0]
+            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+          }
+          return value || label
+        })
+        return labelValue
+      } else {
+        return expression
+      }
+    },
+    // 获取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.$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 = response.data.list
+          this.modulesDiff()
+        }
+      })
+    },
 
-      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)
+    getNodesArr () {
+      if (!getTopology(this.topologyIndex)) return
+      this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
+        if (!item.data) {
+          item.data = {
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            expressArr: []
+          }
+        }
+        return item.type === 0
+      })
+      // this.nodesArr=this.nodesArr.map(item=>{
+      //   if(!item.data){
+      //     item.data={
+      //       moduleId:'',
+      //       moduleName:'',
+      //       show:false,
+      //       error:false,
+      //       expressArr:[],
+      //     }
+      //   }
+      //   return {
+      //     rect:item.rect,
+      //     data:item.data
+      //   }
+      // });
+      // 打开动画 是否更新顶部图标
+      this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+    },
+
+    modelTopClick (item, index) {
+
+    },
+    // 摘除已选择的module
+    modulesDiff (data) {
+      this.modules = this.allModules
+      if (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 })
+      }
+    },
 
-      addNodeInit (imgidList) {
-        if (!this.fromOverView) {
-          this.$get('monitor/project/topo/icon').then(res => {
-            this.imgageLoading = true
-            // this.tools[1].children=[];
-            const imgArr = []
-            const promiseArr = []
-            res.data.list.forEach((item, index) => {
-              item.imageName = item.name
-              delete item.name
-              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
-              imgArr.push({ ...item })
-            })
-            Promise.all(promiseArr).then((res2, header) => {
-              this.iconArray = [...res.data.list]
-              this.iconArray.forEach((item, index) => {
-                item.image = res2[index]
-                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],
-                      imageId: item.id,
-                      unit: item.unit
-                    }
-                  })
+    // 显示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
+      }
+      setTimeout(() => {
+        this.popDataShowUpdate(tool.id, false, node)
+      }, 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
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 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 }
+        })
+      setTimeout(() => {
+        this.dragFlag = true
+      }, 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) {
+          data.data = {
+            ...data.data,
+            moduleId: '',
+            moduleName: '',
+            show: false,
+            error: false,
+            animatePlay: false,
+            fillStyle: data.fillStyle,
+            strokeStyle: data.strokeStyle,
+            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: [''],
+            legends: [''],
+            tooltipShow: true,
+            panelName: 'topologyName',
+            unit: 2,
+            type: 'line',
+            displayChart: true,
+            aggregation: 'last',
+            title: '',
+            url: ''
+          }
+        } else if (data.type == 1 && !data.data) {
+          // 连线是否自动计算锚点
+          // data.manualCps=true;
+          data.animateColor = '#FA901C'
+          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: [''],
+            legends: [''],
+            tooltipShow: 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
+          setTimeout(() => {
+            this.tooltipPosition.show = true
+            const ePosition = window.ePosition
+            const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
+            const 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.tools.push({
-                    group: item.unit,
-                    children: [{
-                      ...imageTemp,
-                      data: {
-                        ...imageTemp.data,
-                        text: item.imageName,
-                        image: res2[index],
-                        imageId: item.id,
-                        unit: item.unit
-                      }
-                    }]
-                  })
+                  this.tooltipPosition.left = ePosition.layerX - 20 - this.$refs.topoTooltip.offsetWidth
                 }
-              })
-
-              this.imgInit = true
-            })
-          })
-        } else {
-          this.imgageLoading = true
-          const promiseArr = []
-          imgidList.forEach((item, index) => {
-            if (item.data.imageId) {
-              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
-            } 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]
-              }
-            })
-            this.imgInit = true
-          })
-        }
-      },
-
-      dealImg (url) {
-        // 处理后端传过来的图片流乱码问题
-        if (url) {
-          return new Promise((resolve, reject) => {
-            this.$axios
-              .get(url)
-              .then((res) => {
-                return {
-                  data: ('data:image/jpeg;base64,' + res.data)
+                if (boxHeight > (ePosition.layerY + this.$refs.topoTooltip.offsetHeight)) {
+                  this.tooltipPosition.top = ePosition.layerY
+                } else {
+                  this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
                 }
-              })
-              .then(data => {
-                resolve(data.data, data.header)
-                // changeImage(data,(img)=>{
-                //   resolve(img)
-                // })
-              })
-              .catch(err => {
-              })
-          })
-        }
-      },
-
-      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.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
-        this.$store.commit('setShowTopoScreen', true)
-        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 = ['']
-            }
-            item.animateType = item.data.animateType
-            if (item.type === 0) {
-              item.fillStyle = item.data.fillStyle
-              item.strokeStyle = item.data.strokeStyle
-              item.animatePlay = false
-              item.fontColor = '#000000'
-              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 = '#000000'
-            }
-          })
-          getTopology(this.topologyIndex).caches = {
-            index: 0,
-            list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+            })
+          }, 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)
           }
-        })
-      },
-
-      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 () {
-        const topologyData = getTopology(this.topologyIndex).pureData()
-        // console.log(JSON.stringify(topologyData))
-        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)
+          break
+      }
+      // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
+      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('')
+            }
+            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.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.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,
@@ -1812,231 +1369,723 @@
               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
+            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
               }
-            })
-          })
-          if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-            getTopology(this.topologyIndex).data.scale = this.oldScale
+            } else {
+              this.props = {
+                node: data[0],
+                line: null,
+                multi: false,
+                nodes: null,
+                locked: false,
+                pen: data[0],
+                pens: null
+              }
+            }
+            break
+          case 'resize': {
+            const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+            if (getTopology(this.topologyIndex)) {
+              getTopology(this.topologyIndex).canvasPos = domRect
+            }
+            break
           }
-          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'
+          case 'scale': {
+            if (this.$refs.topTool) {
+              this.$refs.topTool.scaleNum = parseInt(data * 100)
+            }
+            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
+        }
+      }, 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(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
+      }
+      const isSize = 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.dealImg(`monitor/project/topo/icon/${res.data.id}/1`).then((data, header) => {
+            const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
+            if (group) {
+              group.children.push({
+                ...imageTemp,
+                data: {
+                  ...imageTemp.data,
+                  text: res.data.imageName,
+                  image: data,
+                  imageId: res.data.id,
+                  unit: this.uploadPic.unit
+                }
               })
-              this.$store.commit('setShowTopoScreen', this.topoScreenState)
-              this.$nextTick(() => {
-                getTopology(this.topologyIndex).lock(1)
-                const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-                getTopology(this.topologyIndex).canvasPos = domRect
-                this.reload()
+            } else {
+              this.tools.push({
+                group: this.uploadPic.unit,
+                children: [{
+                  ...imageTemp,
+                  data: {
+                    ...imageTemp.data,
+                    text: res.data.imageName,
+                    image: data,
+                    imageId: res.data.id,
+                    unit: this.uploadPic.unit
+                  }
+                }]
               })
             }
-          }).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'
+          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]
+          const imgArr = []
+          const promiseArr = []
+          res.data.list.forEach((item, index) => {
+            item.imageName = item.name
+            delete item.name
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
+            imgArr.push({ ...item })
           })
-        }
-      },
-      // 取消
-      cancelTopology () {
-        this.editTopologyFlag = false
-        this.$nextTick(() => {
-          getTopology(this.topologyIndex).lock(1)
-          const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
-          getTopology(this.topologyIndex).canvasPos = domRect
-          this.$store.commit('setShowTopoScreen', this.topoScreenState)
-        })
-        this.reload()
-      },
-      // 预览
-      previewTopology () {
-        const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
-        data.pens.forEach((item) => {
-          item.animatePlay = item.data.animatePlay
-        })
-        this.topoPrevData = JSON.parse(JSON.stringify(data))
-        this.topoPrevData.rule = false
-        this.topoPrevData.grid = false
-        this.previewShow = true
-      },
-
-      // 联动 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 () {
-        setTimeout(() => {
-          const 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).centerView()
-          this.getNodesArr()
-        }, 100)
-      },
-      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
-      },
-      modelPopError (pen, state) {
-        if (item.id === 'asset' && this.activeModelItem.assetError) {
-          return true
-        }
-        if (item.id === 'alert' && this.activeModelItem.alertError) {
-          return true
-        }
-        if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
-          return true
-        }
-        return false
-      },
-      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
+          Promise.all(promiseArr).then((res2, header) => {
+            this.iconArray = [...res.data.list]
+            this.iconArray.forEach((item, index) => {
+              item.image = res2[index]
+              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],
+                    imageId: item.id,
+                    unit: item.unit
+                  }
+                })
+              } else {
+                this.tools.push({
+                  group: item.unit,
+                  children: [{
+                    ...imageTemp,
+                    data: {
+                      ...imageTemp.data,
+                      text: item.imageName,
+                      image: res2[index],
+                      imageId: item.id,
+                      unit: item.unit
+                    }
+                  }]
+                })
+              }
             })
+
+            this.imgInit = true
+            this.imgageLoading = false
+          })
+        })
+      } else {
+        this.imgageLoading = true
+        const promiseArr = []
+        imgidList.forEach((item, index) => {
+          if (item.data.imageId) {
+            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
+          } else {
+            promiseArr.push('')
           }
         })
-        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)
+        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]
+            }
+          })
+          this.imgInit = true
+          this.imgageLoading = false
+        })
       }
     },
-    destroyed () {
-      if (getTopology(this.topologyIndex)) {
-        getTopology(this.topologyIndex).destroy()
-        setTopology(this.topologyIndex, null)
+
+    dealImg (url) {
+      // 处理后端传过来的图片流乱码问题
+      if (url) {
+        return new Promise((resolve, reject) => {
+          this.$axios
+            .get(url)
+            .then((res) => {
+              return {
+                data: ('data:image/jpeg;base64,' + res.data)
+              }
+            })
+            .then(data => {
+              resolve(data.data, data.header)
+              // changeImage(data,(img)=>{
+              //   resolve(img)
+              // })
+            })
+            .catch(err => {
+            })
+        })
       }
-      if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
-        document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
+    },
+
+    delPen (obj) { // 删除元素
+      getTopology(this.topologyIndex).delete(obj)
+      this.props = {
+        node: null,
+        line: null,
+        multi: false,
+        nodes: null,
+        locked: false,
+        pen: null,
+        pens: null
       }
-      window.removeEventListener('resize', this.winResize)
+    },
+
+    editTopology (val) {
+      this.editTopologyFlag = true
+      this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
+      this.$store.commit('setShowTopoScreen', true)
+      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 = ['']
+          }
+          item.animateType = item.data.animateType
+          if (item.type === 0) {
+            item.fillStyle = item.data.fillStyle
+            item.strokeStyle = item.data.strokeStyle
+            item.animatePlay = false
+            item.fontColor = '#000000'
+            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 = '#000000'
+          }
+        })
+        getTopology(this.topologyIndex).caches = {
+          index: 0,
+          list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
+        }
+      })
+    },
+
+    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 () {
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      // console.log(JSON.stringify(topologyData))
+      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
+            }
+          })
+        })
+        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 domRect = document.getElementById('topology-canvas' + this.topologyIndexF).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.editTopologyFlag = false
+      this.$nextTick(() => {
+        getTopology(this.topologyIndex).lock(1)
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        getTopology(this.topologyIndex).canvasPos = domRect
+        this.$store.commit('setShowTopoScreen', this.topoScreenState)
+      })
+      this.reload()
+    },
+    // 预览
+    previewTopology () {
+      const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
+      data.pens.forEach((item) => {
+        item.animatePlay = item.data.animatePlay
+      })
+      this.topoPrevData = JSON.parse(JSON.stringify(data))
+      this.topoPrevData.rule = false
+      this.topoPrevData.grid = false
+      this.previewShow = true
+    },
+
+    // 联动 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 () {
+      setTimeout(() => {
+        const 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).centerView()
+        this.getNodesArr()
+      }, 100)
+    },
+    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
+    },
+    modelPopError (pen, state) {
+      if (item.id === 'asset' && this.activeModelItem.assetError) {
+        return true
+      }
+      if (item.id === 'alert' && this.activeModelItem.alertError) {
+        return true
+      }
+      if (item.id === 'endpoint' && this.activeModelItem.endpointError) {
+        return true
+      }
+      return false
+    },
+    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)
     }
+  },
+  destroyed () {
+    if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).destroy()
+      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)
   }
+}
 </script>
 <style lang="scss">
   .el-dropdown-menu {
@@ -2082,7 +2131,7 @@
       }
 
       .buttons {
-        padding: 12px;
+        padding: 11px;
         display: inline-block;
         position: relative;
         vertical-align: middle;
@@ -2093,13 +2142,12 @@
           width: 16px;
           height: 16px;
           border-radius: 10px;
-          font-size: 12px;
+          font-size: 16px;
           line-height: 16px;
           text-align: center;
-          background: red;
-          right: -8px;
-          top: -8px;
-          color: #fff;
+          right: 2px;
+          top: 2px;
+          color: #fa901c;
           display: none;
           cursor: pointer;
         }
@@ -2142,10 +2190,13 @@
           height: 100%;
         }
       }
-
+      .buttons{
+        border: 1px solid transparent;
+      }
       .buttons:hover {
+        border-color: #fa901c;
         .delIcon {
-          /*display: inline-block;*/
+          display: inline-block;
         }
       }
     }
@@ -2184,6 +2235,30 @@
   }
 </style>
 <style lang="scss" scoped>
+  /deep/ .el-collapse-item  .is-active .nz-icon-caret-right{
+    transform: rotate(90deg);
+    color: #FA901C;
+  }
+  /deep/ .el-collapse-item .title-delete{
+    display: none;
+  }
+  /deep/ .el-collapse-item .nz-icon-caret-right{
+    transition: transform .3s;
+    color: #BEBEBE;
+    margin-right: 5px;
+  }
+  /deep/ .el-collapse-item:hover{
+    .el-collapse-item__header{
+      color: #FA901C;
+    }
+    .nz-icon-caret-right{
+      color: #FA901C;
+    }
+    .title-delete{
+      display: block;
+      color: #FA901C;
+    }
+  }
   .project-box{
     @keyframes model-error-animation {
       0% {
@@ -2347,6 +2422,7 @@
       position: absolute;
       right: 0;
       top: 50px;
+      z-index: 1;
     }
 
     .facade-top{
@@ -2676,4 +2752,7 @@
       overflow: hidden;
     }
   }
+  /deep/ .el-collapse-item__arrow{
+    display: none;
+  }
 </style>