feat: 增加bms固件升级(跳转到自己的ip进行升级)

src/views/stationData/topology/index.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { NODE_SIZE } from "./utils";
+import { DeviceType, NODE_SIZE } from "./utils";
 import { useG6 } from "@/hooks/useG6";
 import Node from './components/Node.vue'
 import { flattenTree } from "@/views/testG6/utils";
@@ -25,6 +25,7 @@ import { type PluginOptions } from "@antv/g6"
 import type { IDevice, IOfflineDevice, IOnlineDevice } from "@/views/stationData/type";
 import { getPointGroup, type IPointGroupParams, type IPointGroupOV } from "@/api/module/transfer";
 import DetailDrawer from "./components/detailDrawer.vue";
+import { VueNode } from "g6-extension-vue";
 
 const router = useRouter()
 
@@ -66,27 +67,51 @@ async function loadDeviceTopology() {
   }
 }
 
+const getNodeData = (target: VueNode) => {
+  const targetId = target.config.id
+  const context = target.config!.context
+  return context.model.getNodeData(targetId).find((r: any) => r.id === targetId)
+}
+
 const canvas = ref<HTMLElement | undefined>(undefined)
 
 const plugins: PluginOptions = [
   {
     type: 'contextmenu',
     enable: (e: any) => e.targetType === 'node',
-    getItems: () => {
+    getItems: (e: any) => {
-      return [{ name: '查看详情', value: 'detail' }];
+      const { data } = getNodeData(e.target)
+      const menu = [{ name: '查看详情', value: 'detail' }]
+      if (data.type === DeviceType.bms) {
+        menu.unshift({ name: '固件升级', value: 'firmwareUpdate' })
+      }
+      return menu;
     },
-    onClick: onDetail,
+    onClick: onContextmenuClick,
   },
   {
     type: 'tooltip',
     enable: (e: any) => e.targetType === 'node',
     getContent: (e: any, items: any) => {
-      console.log(items)
       return `<div>${items[0].data.cnName}</div>`;
     },
   },
 ]
 
+function onContextmenuClick(e: string, item: HTMLElement, current: any) {
+
+  switch (e) {
+    case 'detail':
+      onDetail(item, current)
+      break;
+    case 'firmwareUpdate':
+      onFirmwareUpdate(item, current)
+      break;
+    default:
+      break;
+  }
+}
+
 function init() {
   if (!topologyTree.value) return
   const filteredTree = filterTree(topologyTree.value)
@@ -101,14 +126,18 @@ function init() {
   graph.render();
 }
 
-function onDetail(value: string, item: HTMLElement, current: any) {
+function onDetail(item: HTMLElement, current: any) {
-  const nodeData = current.config.context.model.getNodeData(current.config.id)
+  const { data } = getNodeData(current)
-  console.log(nodeData[nodeData.length - 1].data)
   const device = deviceInfo as unknown as IDevice & {
     isonLine: boolean
     siteName: string
   }
-  detailDrawerRef.value?.open(device, nodeData[nodeData.length - 1].data)
+  detailDrawerRef.value?.open(device, data)
+}
+
+function onFirmwareUpdate(item: HTMLElement, current: any) {
+  const { data } = getNodeData(current)
+  window.open(`http://${data.ip}:${data.port}`, '_blank', 'noopener');
 }
 
 onMounted(async () => {
@@ -122,7 +151,7 @@ function filterTree(node: IPointGroupOV) {
     if (node.children.length > 1) {
       const customNode = node.children[0] as any
       node.children.forEach(r => {
-       r.customCnName = r.cnName
+        r.customCnName = r.cnName
       })
       customNode.cnName = `${node.children[0].cnName} ~ ${node.children[node.children.length - 1].cnName}`
       customNode.customNode = true