Merge branch 'dev-3.2' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.3

# Conflicts:
#	nezha-fronted/src/components/common/ChartDiagram/diagram.vue

nezha-fronted/src/components/common/@topology/core/src/core.js

@@ -2959,12 +2959,6 @@ const Topology = /** @class */ (function () {
     this.subcribeAnimateMoved.unsubscribe()
     this.subcribeMediaEnd.unsubscribe()
     this.subcribeEmit.unsubscribe()
-    this.animateLayer.destroy()
-    this.divLayer.destroy()
-    this.canvas.destroy()
-    this.activeLayer.destroy()
-    this.hoverLayer.destroy()
-    this.offscreen.destroy()
     // document.body.removeChild(this.tipMarkdown)
     window.removeEventListener('resize', this.winResize)
     this.parentElem.removeEventListener('scroll', this.onScroll)
@@ -2975,9 +2969,15 @@ const Topology = /** @class */ (function () {
         document.removeEventListener('keydown', this.onkeydown)
         break
       case KeydownType.Canvas:
-        this.divLayer.canvas.removeEventListener('keydown', this.onkeydown)
+        this.divLayer.canvas && this.divLayer.canvas.removeEventListener('keydown', this.onkeydown)
         break
     }
+    this.animateLayer.destroy()
+    this.divLayer.destroy()
+    this.canvas.destroy()
+    this.activeLayer.destroy()
+    this.hoverLayer.destroy()
+    this.offscreen.destroy()
     this.closeSocket()
     this.closeMqtt()
     if (this.socketFn) {
@@ -2987,6 +2987,7 @@ const Topology = /** @class */ (function () {
     this.cache = null
     this.data = null
     console.log(this.options)
+    this.options.on = null
     window.topology = null
     this.activeLayer = null
     this.hoverLayer = null

nezha-fronted/src/components/common/@topology/core/src/divLayer.js

@@ -82,7 +82,7 @@ const DivLayer = /** @class */ (function (_super) {
             _this.setElemPosition(node, _this.gifs[node.id])
           } else {
             _this.addGif(node)
-            _this.setElemPosition(node, node.id)
+            _this.setElemPosition(node, node.img)
           }
         }
       }

nezha-fronted/src/components/common/@topology/core/src/renderLayer.js

@@ -24,7 +24,7 @@ const RenderLayer = /** @class */ (function (_super) {
     _this.options = options
     _this.render = function () {
       if (_this.data && _this.data.bkImage && !_this.bkImg) {
-        _this.loadBkImg(_this)
+        _this.loadBkImg(_this.render)
         return
       }
       if (!_this.width || !_this.height || !_this.offscreen) {
@@ -46,6 +46,7 @@ const RenderLayer = /** @class */ (function (_super) {
         _this.rule()
       }
       ctx.drawImage(_this.offscreen, 0, 0, _this.width, _this.height)
+      return _this
     }
     _this.offscreen = Store.get(_this.generateStoreKey('LT:offscreen'))
     _this.parentElem.appendChild(_this.canvas)

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -312,8 +312,8 @@
 </template>
 
 <script>
-import { Store as le5leStore } from 'le5le-store'
 import { Topology, registerNode } from '@/components/common/@topology/core/index.js'
+import { Store as le5leStore } from 'le5le-store'
 import imgDefault from '@/components/common/project/L5/services/img'
 import {
   Tools,
@@ -328,7 +328,7 @@ import {
   myCubec,
   myCubeAnchors
 } from '../project/L5/services/canvas.js'
-import {getTopology, setTopology, dealImg} from '../js/common'
+import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
 import CanvasProps from '../project/L5/CanvasProps'
 import topologyTopTool from '../project/L5/topologyTopTool'
 import popDataMain from '../project/popData/Main'
@@ -1749,12 +1749,7 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
-            const nowImage = ''
-            if (nowImage && nowImage.data) {
-              promiseArr.push(nowImage)
-            } else {
-              promiseArr.push(dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
-            }
+            promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2, header) => {
@@ -1811,12 +1806,7 @@ export default {
           }
           imgidList.forEach((item, index) => {
             if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
-              const nowImage = ''
-              if (nowImage && nowImage.data) {
-                promiseArr.push(nowImage)
-              } else {
-                promiseArr.push(dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
-              }
+              promiseArr.push(topologyImg['img' + item.data.imageId] || dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`, item.data.imageId))
             } else if (item.data.imageId) {
               promiseArr.push(imgDefault)
             } else {
@@ -1841,46 +1831,6 @@ export default {
       }
     },
 
-    dealImg (url) {
-      // 处理后端传过来的图片流乱码问题
-      if (url) {
-        return new Promise((resolve, reject) => {
-          this.$axios
-            .get(url)
-            .then((res) => {
-              const imageInfo = {
-                data: ('data:image/jpeg;base64,' + res.data),
-                // width: res.headers.width === -1 ? 100 : (res.headers.width > 900 ? 900 : res.headers.width),
-                // height: res.headers.height === -1 ? 100 : (res.headers.height > 900 ? 900 : res.headers.height)
-                width: (res.headers.width === -1 || res.headers.width === 0) ? 100 : Number(res.headers.width),
-                height: (res.headers.height === -1 || res.headers.height === 0) ? 100 : Number(res.headers.height)
-              }
-              if (imageInfo.width > 900 || imageInfo.height > 900) {
-                if (imageInfo.height > imageInfo.width) {
-                  imageInfo.width = imageInfo.width * 900 / imageInfo.height
-                  imageInfo.height = 900
-                } else if (imageInfo.height < imageInfo.width) {
-                  imageInfo.height = imageInfo.height * 900 / imageInfo.width
-                  imageInfo.width = 900
-                } else {
-                  imageInfo.height = 900
-                  imageInfo.width = 900
-                }
-              }
-              return imageInfo
-            })
-            .then(data => {
-              resolve(data)
-              // changeImage(data,(img)=>{
-              //   resolve(img)
-              // })
-            })
-            .catch(err => {
-            })
-        })
-      }
-    },
-
     delPen (obj) { // 删除元素
       getTopology(this.topologyIndex).delete(obj)
       this.props = {
@@ -2247,21 +2197,15 @@ export default {
       this.timer4 = null
     }
     if (getTopology(this.topologyIndex)) {
-      getTopology(this.topologyIndex).open({ pens: [] })
-      getTopology(this.topologyIndex).off('contextmenu', this.onContextMenu)
       getTopology(this.topologyIndex).destroy()
       const StoreData = le5leStore.get()
-      const arr = []
       Object.keys(StoreData).forEach(key => {
         const id = key.split('-')[0]
-        arr.push(id)
         if (getTopology(this.topologyIndex).id == id) {
           le5leStore.set(key, null)
           delete StoreData[key]
         }
       })
-      console.log(this.$loadsh.uniq(arr))
-      console.log(le5leStore.get())
       Object.keys(getTopology(this.topologyIndex)).forEach(key => {
         getTopology(this.topologyIndex)[key] = null
       })
@@ -2272,17 +2216,6 @@ export default {
     }
     window.removeEventListener('resize', this.winResize)
     window.removeEventListener('click', this.contextmenuNone)
-  },
-  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)
-    window.removeEventListener('resize', this.contextmenuNone)
   }
 }
 </script>

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

@@ -354,6 +354,7 @@ import {
   myCubeAnchors
 } from './L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
+
 import CanvasProps from './L5/CanvasProps'
 import topologyTopTool from './L5//topologyTopTool'
 import CanvasContextMenu from './L5/CanvasContextMenu'
@@ -782,7 +783,7 @@ export default {
           return
         }
         if (!getTopology(this.topologyIndex)) {
-          let canvas = new Topology('topology-canvas' + this.topologyIndexF)
+          let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions)
           // canvas.open(data)
           setTopology(this.topologyIndex, canvas)
           canvas = null