feat(mesh): third party device detail

src/views/external/mesh/index.vue

@@ -172,14 +172,6 @@
                 <i class="c-sibling-item el-icon-edit" />
                 <span class="c-sibling-item">端口</span>
               </div>
-              <div
-                v-else
-                class="l-flex--row c-contentmenu__item has-active"
-                @click="onReverseEdge"
-              >
-                <i class="c-sibling-item el-icon-edit" />
-                <span class="c-sibling-item">反转</span>
-              </div>
             </template>
             <div
               class="l-flex--row c-contentmenu__item has-active"
@@ -211,7 +203,6 @@ import {
   addEdgeToMesh,
   deleteEdge,
   updateEdgePort,
-  reverseEdge,
   updateNode,
   addNodeBeforeNode,
   addNodeAfterNode,
@@ -334,8 +325,7 @@ export default {
       nodes: [],
       menuVisible: false,
       clickTargetType: '',
-      targetItem: null,
-      type: null
+      targetItem: null
     }
   },
   computed: {
@@ -407,8 +397,11 @@ export default {
           return false
       }
     },
+    thirdPartyType () {
+      return this.targetItem?.nodeType
+    },
     schema () {
-      switch (this.type) {
+      switch (this.thirdPartyType) {
         case ThirdPartyDevice.GATEWAY:
           return {
             list: getGateways,
@@ -486,7 +479,8 @@ export default {
             ],
             cols: [
               { prop: 'name', label: '设备名称' },
-              { prop: 'address', label: '地址' }
+              { prop: 'serialNumber', label: '序列号' },
+              { prop: 'mac', label: 'MAC' }
             ]
           }
         case ThirdPartyDevice.MULTI_FUNCTION_CARD:
@@ -512,7 +506,7 @@ export default {
         case ThirdPartyDevice.TRANSLOCATION_SENSOR:
           return {
             list: getSensors,
-            condition: { sensorType: ThirdPartyToSensorMap[this.type], boundFlag: 0 },
+            condition: { sensorType: ThirdPartyToSensorMap[this.thirdPartyType], boundFlag: 0 },
             filters: [
               { key: 'manufacturerKey', type: 'select', placeholder: '厂商', remote: this.getManufacturersByType, value: 'manufacturerKey', label: 'manufacturerName' },
               { key: 'identifier', type: 'search', placeholder: '唯一标识' }
@@ -527,7 +521,7 @@ export default {
         case ThirdPartyDevice.TRAFFIC_CAMERA:
           return {
             list: getThirdPartyDevices,
-            condition: { boundFlag: 0, cameraType: ThirdPartyToCameraMap[this.type], deviceType: this.type },
+            condition: { boundFlag: 0, cameraType: ThirdPartyToCameraMap[this.thirdPartyType], deviceType: this.thirdPartyType },
             filters: [
               { key: 'name', type: 'search', placeholder: '名称' }
             ],
@@ -559,7 +553,7 @@ export default {
   },
   methods: {
     getManufacturersByType () {
-      return getManufacturersByType(this.type)
+      return getManufacturersByType(this.thirdPartyType)
     },
     collectNodes (nodes) {
       this.$nodeMap = {}
@@ -644,7 +638,7 @@ export default {
             },
             itemStyle: {
               color ({ data, color }) {
-                return data.instanceId ? '#67c23a' : color
+                return data.proxy.instanceId ? '#67c23a' : color
               }
             },
             edgeSymbol: ['none', 'arrow'], // circle
@@ -658,16 +652,15 @@ export default {
               opacity: 0.9,
               curveness: 0
             },
-            nodes: this.nodes.map(({ id, name, nodeType, instanceId }) => {
+            nodes: this.nodes.map(node => {
+              const { id, name, nodeType } = node
               const canClick = options ? options.includes(nodeType) : true
               return {
+                proxy: node,
                 id,
                 name,
-                instanceId,
                 tooltip: {
-                  formatter (params) {
-                    return `${params.marker} ${params.data.name}`
-                  }
+                  formatter: this.formatterNode
                 },
                 canClick,
                 emphasis: {
@@ -676,8 +669,10 @@ export default {
                 symbolSize: canClick ? 24 : 12
               }
             }),
-            edges: this.edges.map(({ preNodeId, nextNodeId, port }) => {
+            edges: this.edges.map(edge => {
+              const { preNodeId, nextNodeId, port } = edge
               return {
+                proxy: edge,
                 value: port,
                 source: this.$nodeMap[preNodeId],
                 target: this.$nodeMap[nextNodeId],
@@ -692,16 +687,54 @@ export default {
         ]
       })
     },
+    formatterNode ({ marker, data: { proxy: { nodeType, instance } } }) {
+      let tooltip = `${marker} ${ThirdPartyDeviceInfo[nodeType]}`
+      if (instance) {
+        switch (nodeType) {
+          case ThirdPartyDevice.SENDING_CARD:
+          case ThirdPartyDevice.SMOKE_SENSOR:
+          case ThirdPartyDevice.TEMPERATURE_SENSOR:
+          case ThirdPartyDevice.LIGHT_SENSOR:
+          case ThirdPartyDevice.FLOODING_SENSOR:
+          case ThirdPartyDevice.TRANSLOCATION_SENSOR:
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>厂商：${instance.manufacturerName}<br/>型号：${instance.model}`
+            break
+          case ThirdPartyDevice.GATEWAY:
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>厂商：${instance.manufacturerName}<br/>型号：${instance.model}<br/>服务器：${instance.ip}`
+            break
+          case ThirdPartyDevice.SCREEN:
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>厂商：${instance.manufacturerName}<br/>型号：${instance.model}<br/>规格：${instance.measure}m² ${instance.pitch}mm`
+            break
+          case ThirdPartyDevice.PLC:
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>厂商：${instance.manufacturerName}<br/>型号：${instance.model}<br/>端口数：${instance.portCount}`
+            break
+          case ThirdPartyDevice.BOX:
+            tooltip += `<br/>设备名称：${instance.name}<br/>序列号：${instance.serialNumber}<br/>MAC：${instance.mac}`
+            break
+          case ThirdPartyDevice.MULTI_FUNCTION_CARD:
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>厂商：${instance.manufacturerName}<br/>型号：${instance.model}<br/>端口数：${instance.portCount}<br/>485接口数：${instance.rs485Count}`
+            break
+          case ThirdPartyDevice.LED_CAMERA:
+          case ThirdPartyDevice.TRAFFIC_CAMERA:
+            tooltip += `<br/>唯一标识：${instance.identifier}<br/>设备名称：${instance.name}`
+            break
+          default:
+            break
+        }
+      }
+      return tooltip
+    },
     onClick (eventProxy) {
       console.log('click', eventProxy)
+      const targetItem = eventProxy.data.proxy
+      const targetType = eventProxy.dataType
       if (this.$waitTarget) {
         this.onChangeLinkStatus(false)
-        if (eventProxy.dataType === 'node') {
-          const targetNode = this.nodes[eventProxy.dataIndex]
+        if (targetType === 'node') {
           if (eventProxy.data.canClick) {
-            this.addEdge(this.targetItem, targetNode)
+            this.addEdge(this.targetItem, targetItem)
             return
-          } else if (this.targetItem.id === targetNode.id) {
+          } else if (this.targetItem.id === targetItem.id) {
             this.$message({
               type: 'warning',
               message: '节点不能连接自身'
@@ -715,9 +748,13 @@ export default {
           return
         }
       }
-      this.clickTargetType = eventProxy.dataType
-      this.$clickTargetIndex = eventProxy.dataIndex
-      this.targetItem = this.isNode ? this.nodes[eventProxy.dataIndex] : this.edges[eventProxy.dataIndex]
+      this.clickTargetType = targetType
+      if (this.isNode) {
+        this.targetItem = this.nodes[this.$nodeMap[targetItem.id]]
+      } else {
+        const id = targetItem.nodeBondId
+        this.targetItem = this.edges.find(edge => edge.nodeBondId === id)
+      }
       const event = eventProxy.event.event
       this.$refs.card.$el.style.left = `${Math.min(event.clientX, document.body.clientWidth - 160)}px`
       this.$refs.card.$el.style.top = `${Math.min(event.clientY, document.body.clientHeight - 240)}px`
@@ -961,36 +998,30 @@ export default {
       if (this.isNode) {
         deleteNode(this.targetItem).then(() => {
           const id = this.targetItem.id
-          this.nodes.splice(this.$clickTargetIndex, 1)
+          this.nodes.splice(this.nodes.findIndex(node => node.id === id), 1)
           this.edges = this.edges.filter(({ preNodeId, nextNodeId }) => preNodeId !== id && nextNodeId !== id)
           this.collectNodes(this.nodes)
           this.onDraw()
         })
       } else {
         deleteEdge(this.targetItem).then(() => {
-          this.edges.splice(this.$clickTargetIndex, 1)
+          const id = this.targetItem.nodeBondId
+          this.edges.splice(this.edges.findIndex(edge => edge.id === id), 1)
           this.collectNodes(this.nodes)
           this.onDraw()
         })
       }
     },
-    onReverseEdge () {
-      this.closeContentMenu()
-      reverseEdge(this.targetItem).then(({ data }) => {
-        Object.assign(this.targetItem, data)
-        this.onDraw()
-      })
-    },
     onToggleInstance () {
       this.closeContentMenu()
       if (this.hasInstance) {
         releaseInstanceFormNode(this.targetItem).then(() => {
           this.targetItem.instanceId = null
+          this.targetItem.instance = null
           this.onDraw()
         })
       } else {
-        this.type = this.targetItem.nodeType
-        this.$refs.instanceDialog.show(this.targetItem.instanceId ? { id: this.targetItem } : null)
+        this.$refs.instanceDialog.show()
       }
     },
     onSubmitBind ({ value, done }) {
@@ -1001,6 +1032,7 @@ export default {
       bindInstanceToNode(this.targetItem, value).then(() => {
         done()
         this.targetItem.instanceId = value.id
+        this.targetItem.instance = value
         this.onDraw()
       })
     },