NEZ-2735 fix：project toop 部分有数据的节点不显示

nezha-fronted/src/components/common/project/meta2d/js/defaultIcon.js

@@ -0,0 +1,70 @@
+export const Tools = [
+  {
+    group: 'General',
+    children: [
+      {
+        name: 'rectangle',
+        icon: '\ue64d',
+        id: 'e64d',
+        nzClassName: 'nz-icon-rectangle',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue730;',
+        id: 'e730;',
+        nzClassName: 'nz-icon-rectangle1',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue731;',
+        id: '731',
+        nzClassName: 'nz-icon-EMAC1',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue67f;',
+        id: 'e67f',
+        nzClassName: 'nz-icon-module5',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue67e',
+        id: 'e67e',
+        nzClassName: 'nz-icon-module3',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue67d',
+        id: 'e67d',
+        nzClassName: 'nz-icon-module1',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue67c',
+        id: 'e67c',
+        nzClassName: 'nz-icon-module4',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue67b',
+        id: 'e67b',
+        nzClassName: 'nz-icon-module2',
+        unit: 'General'
+      },
+      {
+        name: 'rectangle',
+        icon: '\ue680',
+        id: 'e680',
+        nzClassName: 'nz-icon-module6',
+        unit: 'General'
+      },
+    ]
+  }
+]

nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js

@@ -1,21 +1,16 @@
-import { Meta2d, registerNode } from '@meta2d/core'
+import { Meta2d, registerNode, s8 } from '@meta2d/core'
 import { flowPens } from '@meta2d/flow-diagram'
 import { activityDiagram } from '@meta2d/activity-diagram'
 import { classPens } from '@meta2d/class-diagram'
 import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram'
 // import { chartsPens } from '@meta2d/le5le-charts'
 import {
-  Tools,
+  disposeTopoOldData
-  canvasRegister,
-  imageTemp,
-  onChangeAnimate,
-  onChangeAnimateLine,
-  myCubec,
-  myCubeAnchors
 } from '../../L5/services/canvas.js'
 import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
 import bus from '@/libs/bus'
 import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
+import lineData from '@/components/common/project/meta2d/js/defaultPenLineData'
 export default {
   data () {
     return {
@@ -153,9 +148,13 @@ export default {
       if (pen.data && pen.data.params) {
         return
       }
-      if (name) {
+      if (name && !pen.text) {
         pen.text = name
       }
+      if (pen.data && pen.data.imageId) {
+        pen.imageId = pen.data.imageId
+        pen.image = `/monitor/project/topo/icon/${pen.data.imageId}/0`
+      }
       pen.data = {
         params: { // 用于编辑时 重置为节点初始状态
           background: pen.background || '#22222200',
@@ -187,6 +186,7 @@ export default {
       }
       pen.nzName = name
       pen.moduleId = ''
+      pen.iconFamily = 'nz-icon'
       pen.disableInput = pen.disableInput || true
       pen.background = pen.background || '#22222200'
       pen.textAlign = pen.textAlign || 'center'
@@ -211,11 +211,42 @@ export default {
       pen.isNz = true
       pen.locked = pen.locked || 0
       pen.isBottom = false
+      if (pen.rect) {
+        pen.x = pen.rect.x
+        pen.y = pen.rect.y
+        pen.height = pen.rect.height
+        pen.width = pen.rect.width
+        delete pen.rect
+        delete pen.textRect
+      }
     },
     lineInit (pen, name) { // 初始化连线参数
       if (pen.data && pen.data.params) {
         return
       }
+      if (pen.from && pen.to) {
+        const width = pen.from.x - pen.to.x
+        const height = pen.from.y - pen.to.y
+        const from = pen.from
+        const to = pen.to
+        pen.lineName = pen.name
+        pen.name = 'line'
+        pen.borderType = 0
+        pen.anchors = lineData.anchors
+        const penId = pen.id
+        pen.anchors[0].connectTo = from.id
+        pen.anchors[1].connectTo = to.id
+        pen.anchors[0].anchorId = from.anchorIndex + ''
+        pen.anchors[1].anchorId = to.anchorIndex + ''
+        pen.anchors[0].id = s8()
+        pen.anchors[1].id = s8()
+        pen.anchors[0].penId = penId
+        pen.anchors[1].penId = penId
+        pen.x = width > 0 ? to.x : from.x
+        pen.y = height > 0 ? to.y : from.y
+        pen.width = Math.abs(to.x - from.x)
+        pen.height = Math.abs(to.y - from.y)
+      }
       pen.data = {
         params: {
           animateColor: pen.animateColor || '#FA901CFF',
@@ -375,6 +406,12 @@ export default {
         const findPen = getTopology(this.meta2dId).getPenRect(pen)
         obj[key] = findPen[key]
       }
+      if (key === 'image') {
+        obj.icon = ''
+      }
+      if (key === 'icon') {
+        obj.image = ''
+      }
       getTopology(this.meta2dId).setValue(obj) // 更新pen
       if (key === 'lineAnimateType') {
         if (!pen[key]) {

nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js

@@ -12,7 +12,7 @@ export default {
     initEdit (id) {
       const endTime = new Date().getTime()
       const startTime = endTime - 60 * this.params.timeType * 1000
-      const elements = getTopology(id).data().elements
+      const elements = getTopology(id).data().elements || []
       this.getQueryValues(elements, startTime, endTime)
       bus.$emit('changeSelectPens', [])
       getTopology(id).inactive()
@@ -143,7 +143,7 @@ export default {
         if (!data.pens) {
           data.pens = []
         }
-        data.pens.forEach(pen => {
+        data.pens.forEach((pen, index) => {
           pen.isBottom = true
           if (!pen.nzName) {
             pen.nzName = ''
@@ -151,6 +151,16 @@ export default {
           if (!pen.moduleId) {
             pen.moduleId = ''
           }
+          if (pen.icon) {
+            pen.iconFamily = 'nz-icon'
+          }
+          if (!pen.nzName) {
+            if (!pen.type) {
+              this.nodeInit(pen, 'element-' + index)
+            } else {
+              this.lineInit(pen, 'element-' + index)
+            }
+          }
           if (pen.isNz) {
             if (pen.data.legend && pen.data.enable.valueMapping) {
               const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)

nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue

@@ -28,7 +28,7 @@
                 @change="change('nzName')"></el-input>
             </div>
           </div>
-          <div class="form-row-item form-row-item-full">
+          <div class="form-row-item form-row-item-full" v-if="!pen.type">
             <div class="form-row-key">
               {{$t('overall.module')}}
             </div>
@@ -296,7 +296,7 @@
               </div>
               <div class="form-row-value">
 <!--                <el-input  v-model="pen.image" size="small" @change="change('image')"/>-->
-                <meta2dSelectImage :selectImage="pen.image" :imgId="pen.imageId" @updateImage="updateImage"/>
+                <meta2dSelectImage :selectImage="pen.image" :imgId="pen.imageId" :icon="pen.icon" @updateImage="updateImage"/>
               </div>
             </div>
             <div class="form-row-item">
@@ -1219,11 +1219,20 @@ export default {
         this.pen.autoPlay = false
       }
       this.$emit('change', key)
+      this.$forceUpdate()
     },
     updateImage (image) {
-      this.pen.image = image.image
       this.pen.imageId = image.id
-      this.change('image')
+      if (image.image) {
+        this.pen.image = image.image
+        this.pen.icon = ''
+        this.change('image')
+      }
+      if (image.icon) {
+        this.pen.icon = image.icon
+        this.pen.image = ''
+        this.change('icon')
+      }
     },
     colorChange (val, key) {
       this.pen.data.params[key] = val

nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue

@@ -23,20 +23,21 @@
       <div class="image-select-box" style="width: 650px;height:446px;margin-top: 10px"  v-my-loading="imgageLoading">
         <el-card shadow="hover" style="height:446px;width:100%;overflow-y: auto"
                  class="project-topology-add-node">
-          <div  v-for="(item, index) in tools" :key="index" class="collapse-box">
+          <div  v-for="(item, index) in tools" :key="index" class="collapse-box" v-if="item.group !== 'General' || showDefault">
             <div :title="item.group" :name="item.group">
               <div class="nz-collapse-header" :class="item.show ? 'is-active' : ''" @click.stop="selectGroup(item)">
                 <span class="nz-icon-caret-right-box">
                   <i class="nz-icon nz-icon-caret-right" :class="item.show ? 'rotate90': ''" />
                 </span>
                 <div class="text-ellipsis nz-collapse-header-content">{{item.group}}</div>
-                <i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')" />
+                <i class="nz-icon nz-icon-delete title-delete" v-if="item.group!== 'General'" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')" />
                 <span class="title-all">{{item.children.length}}</span>
               </div>
               <transition name="el-zoom-in-top">
                 <div v-show="item.show" class="nz-collapse-body">
                   <div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item" :class="btn.id === selectImgId ? 'is-select':''">
                     <img :src="btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
+                    <i v-if="btn.nzClassName" class="nz-icon image-src" :class="btn.nzClassName" style="font-size: 40px" @click.stop="selectImageChange(btn)"/>
                     <div class="img-text text-ellipsis" :title="btn.imageName">{{btn.imageName}}</div>
                     <i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
                   </div>
@@ -134,15 +135,21 @@
 </template>
 
 <script>
+import { Tools } from '@/components/common/project/meta2d/js/defaultIcon'
 export default {
   name: 'meta2dSelectImage',
   props: {
     selectImage: {},
-    imgId: {}
+    icon: {},
+    imgId: {},
+    showDefault: {
+      type: Boolean,
+      default: false
+    }
   },
   data () {
     return {
-      tools: [],
+      tools: [...Tools],
       title: this.$t('overall.uploadCustomPicture'),
       imgageLoading: false,
       iconArray: [],
@@ -167,13 +174,21 @@ export default {
   mounted () {
     this.baseUrl = localStorage.getItem('nz-baseURL')
     this.token = localStorage.getItem('nz-token')
+    if (this.icon) {
+      const iconId = this.icon.charCodeAt().toString(16)
+      const findItem = this.tools[0].children.find(item => item.id === iconId)
+      if (findItem) {
+        this.unit = findItem.unit
+        this.imageName = findItem.name
+      }
+    }
     this.imageInit()
   },
   methods: {
     imageInit () { // 加载所有图片
       this.$get('monitor/project/topo/icon').then(res => {
         this.imgageLoading = true
-        this.tools = []
+        this.tools = [...Tools]
         this.iconArray = [...res.data.list]
         this.iconArray.forEach((item, index) => {
           item.imageName = item.name
@@ -227,7 +242,7 @@ export default {
       })
       if (findItem) {
         findItem.show = true
-        findItem.children.forEach(item=>{
+        findItem.children.forEach(item => {
           if (item.id === this.selectImgId) {
             this.selectImg = item
           }

nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue

@@ -213,7 +213,7 @@ export default {
       lineData.anchors[0].id = s8()
       lineData.anchors[1].id = s8()
       lineData.anchors[0].penId = penId
-      lineData.anchors[1].penId = s8()
+      lineData.anchors[1].penId = penId
       const pen = {
         ...lineData,
         id: penId,