fix：修改 topology 图片 以及节点接口数量优化

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -1,9 +1,9 @@
-<style>
-  @import "./L5/css/iconfont.css";
-  @import "./L5/css/props.css";
-</style>
+<!--<style>-->
+<!--  @import "./L5/css/iconfont.css";-->
+<!--  @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>-->
@@ -351,7 +351,7 @@ import {
   myCubec,
   myCubeAnchors
 } from './L5/services/canvas.js'
-import { getTopology, setTopology } from '../js/common'
+import { getTopology, setTopology, getTopologyImg, setTopologyImg } from '../js/common'
 import CanvasProps from './L5/CanvasProps'
 import topologyTopTool from './L5//topologyTopTool'
 import CanvasContextMenu from './L5/CanvasContextMenu'
@@ -774,9 +774,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)
         }
@@ -824,6 +825,7 @@ export default {
             this.saveData = { ...data }
             this.topologyInfo.name = this.obj.name
             resolve(data)
+            data = null
           } else {
             if (data.data) {
               this.topologyInfo = {
@@ -850,7 +852,7 @@ export default {
               if (!this.imgInit) {
                 return
               }
-              const promiseArr = []
+              const promiseArr = [this.$get('stat/module/abnormal', { projectId: this.obj.id })]
               const self = this
               for (let i = 0; i < data.pens.length; i++) {
                 const line = data.pens[i]
@@ -867,13 +869,13 @@ export default {
                   item.image = img ? img.image : imgDefault
                 }
                 if (item.type === 0) {
-                  promiseArr.push(this.$get('stat/module/abnormal', { moduleId: item.data.moduleId }))
+                  // promiseArr.push(this.$get('stat/module/abnormal', { moduleId: item.data.moduleId }))
                   item.data.state = {}
                   item.data.state.asset = false
                   item.data.state.endpoint = false
                   item.data.state.alert = false
                 } else {
-                  promiseArr.push({ type: 1 })
+                  // promiseArr.push({ type: 1 })
                   item.data.state = {}
                   item.data.state.asset = false
                   item.data.state.endpoint = false
@@ -898,13 +900,13 @@ export default {
                 data.bkColor = '#FFFFFF00'
               }
               Promise.all(promiseArr).then(res => {
-                res.forEach((response, index) => {
-                  const item = data.pens[index]
+                res[0].data.list.forEach((module, index) => {
+                  const item = data.pens.find(pens => module.id === pens.data.moduleId)
                   if (item.type === 0 && item.data.state && res[index].data.list.length) {
-                    item.data.state.error = item.data.error = !res[index].data.list[0].state
-                    item.data.state.asset = !!res[index].data.list[0].asset
-                    item.data.state.alert = !!res[index].data.list[0].alert
-                    item.data.state.endpoint = !!res[index].data.list[0].endpoint
+                    item.data.state.error = item.data.error = !module.state
+                    item.data.state.asset = !!module.asset
+                    item.data.state.alert = !!module.alert
+                    item.data.state.endpoint = !!module.endpoint
                   } else {
                     item.data.state = {
                       error: false,
@@ -916,10 +918,12 @@ export default {
                 })
                 self.saveData = { ...data }
                 resolve(data)
+                data = null
                 clearInterval(timer)
               }).catch(res => {
                 self.saveData = { ...data }
                 resolve(data)
+                data = null
                 clearInterval(timer)
               })
             }, 100)
@@ -1723,13 +1727,21 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
+            if (getTopologyImg(item.id)) {
+              promiseArr.push(getTopologyImg(item.id))
+            } else {
+              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].data
+              console.log(res2[index])
+              item.image = res2[index].data || res2[index]
+              if (!getTopologyImg(item.id)) {
+                setTopologyImg(item.id, item.image)
+              }
               const group = this.tools.find(tool => tool.group === item.unit)
               if (group) {
                 group.children.push({
@@ -1780,7 +1792,11 @@ export default {
           }
           imgidList.forEach((item, index) => {
             if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
-              promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
+              if (getTopologyImg(item.data.imageId)) {
+                promiseArr.push(getTopologyImg(item.data.imageId))
+              } else {
+                promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
+              }
             } else if (item.data.imageId) {
               promiseArr.push(imgDefault)
             } else {
@@ -1795,7 +1811,10 @@ export default {
             })
             this.iconArray.forEach((item, index) => {
               if (item.id) {
-                item.image = res2[index].data
+                item.image = res2[index].data || res2[index]
+                if (!getTopologyImg(item.id)) {
+                  setTopologyImg(item.id, item.image)
+                }
               }
             })
             this.imgInit = true
@@ -2254,6 +2273,10 @@ export default {
     if (getTopology(this.topologyIndex)) {
       getTopology(this.topologyIndex).destroy()
       setTopology(this.topologyIndex, null)
+      window.topology = null
+      window.Le5leTopologyPoint = null
+      window.topologyPoint = null
+      window.topologyRect = null
     }
     if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)