From 3bab521a950896760f8d60d05596c720d26257f3 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Tue, 19 Apr 2022 15:40:40 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1820=20fix=EF=BC=9A=E4=BF=AE=E5=A4=8Ddashbo?=
 =?UTF-8?q?ard=E5=86=85=E5=AD=98=E6=B3=84=E6=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/chart/chart.vue  | 16 +++++++-
 .../chart/chart/chartAutotopology.vue         |  7 ++--
 .../components/common/project/topologyL5.vue  | 40 ++++++++++---------
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 862f804e4..c9148793d 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -172,6 +172,15 @@
         :is-fullscreen="isFullscreen"
         @chartIsNoData="chartIsNoData"
       ></chart-clock>
+      <chart-topology
+        :ref="'chart' + chartInfo.id"
+        v-if="isTopology(chartInfo.type)"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
+      ></chart-topology>
     </template>
   </div>
 </template>
@@ -198,7 +207,8 @@ import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagonD3 from './chart/chartHexagonD3'
 import chartMap from './chart/chartMap'
-import { getOption, isTimeSeries, isHexagon, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutotopology, isMap, isAssetInfo, isEndpointInfo, isTable, isGauge, isClock } from './chart/tools'
+import chartTopology from './chart/chartTopology'
+import { getOption, isTimeSeries, isHexagon, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutotopology, isMap, isAssetInfo, isEndpointInfo, isTable, isGauge, isClock, isTopology } from './chart/tools'
 import lodash from 'lodash'
 
 export default {
@@ -224,7 +234,8 @@ export default {
     chartUrl,
     chartValue,
     chartHexagonD3,
-    chartMap
+    chartMap,
+    chartTopology
   },
   props: {
     chartInfo: Object,
@@ -293,6 +304,7 @@ export default {
     isTable,
     isGauge,
     isClock,
+    isTopology,
     chartIsNoData (flag) {
       this.chartChildrenData = flag
     },
diff --git a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
index fb47b5912..f6e2bdd53 100644
--- a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
+++ b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="topologyLoading" class="overview">
+  <div v-my-loading="topologyLoading" class="overview">
     <transition name = "el-zoom-in-center">
       <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
         <el-carousel :interval="5000" :trigger="'click'" arrow="hover">
@@ -46,7 +46,7 @@ export default {
       this.$get('monitor/project', { pageSize: -1 }).then(res => {
         this.topologyLoading = true
         const axiosAll = []
-        const temp = []
+        let temp = []
         if (res.data.list.length === 0) {
           this.topologyLoading = false
         }
@@ -64,7 +64,8 @@ export default {
           res2.forEach(item => {
             temp.push(item)
           })
-          this.allProject = temp
+          this.allProject = JSON.parse(JSON.stringify(temp))
+          temp = []
           this.topologyLoading = false
         })
       })
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index da74ed855..9d97a3143 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -3,7 +3,7 @@
   @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box list-page" v-loading="topologyLoading">
+  <div class="project-box list-page" v-my-loading="topologyLoading">
     <div class="main-list" :style="{height: fromOverView ?'100%' : 'calc(100% - 30px)'}">
       <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
         <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 40px);display: inline-block">
@@ -13,7 +13,7 @@
             <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
               class="nz-icon nz-icon-arrow-down"></i></span>
             <el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-box-select-top right-public-box-dropdown-top">
-              <div style="height: 450px"  v-loading="imgageLoading">
+              <div style="height: 450px"  v-my-loading="imgageLoading">
                 <el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
                          class="project-topology-add-node">
                 <!--<div class="drag-header">——</div>-->
@@ -660,12 +660,11 @@ export default {
       this.chartGetData = []
       const axiosArr = []
       const promiseArr = []
-      const self = this
       const pensPromise = (pen, arr, index) => {
-        return new Promise(function (resolve, reject) {
+        return new Promise((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)
+            this.chartGetData[index].res = this.computeData(res, pen.data.aggregation, pen)
+            this.setAnimation(pen, this.chartGetData[index].res)
             resolve()
           })
         })
@@ -774,9 +773,10 @@ export default {
           return
         }
         if (!getTopology(this.topologyIndex)) {
-          const canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           canvas.open(data)
           setTopology(this.topologyIndex, canvas)
+          canvas = null
         } else {
           getTopology(this.topologyIndex).open(data)
         }
@@ -801,7 +801,7 @@ export default {
           if (!res.data) {
             return
           }
-          let data = res.data.topo
+          let data = JSON.parse(JSON.stringify(res.data.topo))
           if (!res.data.topo || !res.data.topo.pens.length) {
             this.showNoData = true
           } else {
@@ -846,12 +846,11 @@ export default {
               const arr = data.pens.filter(item => !item.type)
               this.addNodeInit(arr)
             }
-            const timer = setInterval(() => {
+            let timer = setInterval(() => {
               if (!this.imgInit) {
                 return
               }
               const promiseArr = []
-              const self = this
               for (let i = 0; i < data.pens.length; i++) {
                 const line = data.pens[i]
                 if (line.type === 1) {
@@ -914,13 +913,15 @@ export default {
                     }
                   }
                 })
-                self.saveData = { ...data }
+                this.saveData = { ...data }
                 resolve(data)
                 clearInterval(timer)
+                timer = null
               }).catch(res => {
-                self.saveData = { ...data }
+                this.saveData = { ...data }
                 resolve(data)
                 clearInterval(timer)
+                timer = null
               })
             }, 100)
           }
@@ -1062,7 +1063,6 @@ export default {
     },
 
     getNodesArr () {
-      const arr = []
       if (!getTopology(this.topologyIndex)) return
       this.offsetX = getTopology(this.topologyIndex).data.x
       this.offsetY = getTopology(this.topologyIndex).data.y
@@ -1556,7 +1556,7 @@ export default {
         fileList = fileList.splice(fileList.length - 1, 1)
         return false
       }
-      const isSize = new Promise(function (resolve, reject) {
+      new Promise(function (resolve, reject) {
         const width = 0
         const height = 0
         const _URL = window.URL || window.webkitURL
@@ -1839,8 +1839,7 @@ export default {
               //   resolve(img)
               // })
             })
-            .catch(err => {
-            })
+            .catch()
         })
       }
     },
@@ -2250,8 +2249,13 @@ export default {
       }
     }
   },
-  destroyed () {
+  beforeDestroy () {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
     if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).off('contextmenu', this.onContextMenu)
       getTopology(this.topologyIndex).destroy()
       setTopology(this.topologyIndex, null)
     }
@@ -2259,7 +2263,7 @@ export default {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)
     }
     window.removeEventListener('resize', this.winResize)
-    window.removeEventListener('resize', this.contextmenuNone)
+    window.removeEventListener('click', this.contextmenuNone)
   }
 }
 </script>