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

2023-03-28 15:07:35 +08:00
parent 099859d736
commit a6b4c0c160
6 changed files with 163 additions and 22 deletions
--- a/nezha-fronted/src/components/common/project/meta2d/js/defaultIcon.js
+++ b/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'
+      },
+    ]
+  }
+]
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
+++ b/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,
-  canvasRegister,
-  imageTemp,
-  onChangeAnimate,
-  onChangeAnimateLine,
-  myCubec,
-  myCubeAnchors
+  disposeTopoOldData
 } 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]) {
--- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
+++ b/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)
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
+++ b/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
+      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
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
+++ b/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
          }
--- a/nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue
+++ b/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,