From e0830d649bcacee1009a7b6189e78b1029896456 Mon Sep 17 00:00:00 2001
From: betaqi <3188864257@qq.com>
Date: Thu, 21 Aug 2025 17:56:24 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=96=87=E4=BB=B6=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/testG6/index.vue                  |  11 +-
 src/views/testG6/utils/GenerateGraphData.ts | 111 ++++++++++++++++++
 src/views/testG6/utils/MyNode.ts            |  39 +++---
 src/views/testG6/utils/index.ts             | 124 +-------------------
 4 files changed, 139 insertions(+), 146 deletions(-)
 create mode 100644 src/views/testG6/utils/GenerateGraphData.ts

diff --git a/src/views/testG6/index.vue b/src/views/testG6/index.vue
index 4848380..c7d8741 100644
--- a/src/views/testG6/index.vue
+++ b/src/views/testG6/index.vue
@@ -5,10 +5,10 @@
 <script setup lang="ts">
 import DeviceData from './utils/data';
 import { EmLineEdge, MyLineEdge } from './utils/MyLineEdge';
-import { DeviceType, flattenTree, GenerateGraphData, NODE_SIZE } from "./utils";
+import { DeviceType, flattenTree,  NODE_SIZE } from "./utils";
 import { ExtensionCategory, Graph, register } from '@antv/g6';
-import { UserCardNode } from "@/views/testG6/utils/MyNode";
-
+import UserCardNode from "./utils/MyNode";
+import GenerateGraphData from "./utils/GenerateGraphData";
 
 onMounted(() => {
   register(ExtensionCategory.EDGE, 'em-line-edge', EmLineEdge)
@@ -27,9 +27,7 @@ onMounted(() => {
       nodesep: 50,
       ranksep: 50,
     },
-    // edge: {
-    //   type: 'my-line-edge',
-    // },
+    animation: false,
     node: {
       type: 'user-card-node',
       style: {
@@ -45,7 +43,6 @@ onMounted(() => {
   });
   graph.render();
 
-
   graph.on('afterlayout', async () => {
     const nodes = graph.getNodeData();
     const root = nodes.find(n => n.data?.type === DeviceType.Ems);
diff --git a/src/views/testG6/utils/GenerateGraphData.ts b/src/views/testG6/utils/GenerateGraphData.ts
new file mode 100644
index 0000000..8d88ede
--- /dev/null
+++ b/src/views/testG6/utils/GenerateGraphData.ts
@@ -0,0 +1,111 @@
+import type { EdgeData, NodeData } from "@antv/g6";
+import { type Device, DeviceType,VIRTUAL_NODE } from "./index";
+
+export default class GenerateGraphData {
+  private readonly devices: Device[] = [];
+  private nodes: NodeData[] = [];
+  private edges: EdgeData[] = [];
+
+  constructor(devices: Device[]) {
+    this.devices = devices;
+    this.generateNodeData()
+    this.generateEdgeData();
+  }
+
+  private generateNodeData() {
+    for (const device of this.devices) {
+      const deviceChild = this.devices.filter((item: Device) => device.id === item.parentId)
+      const isNeedPoint = device.type === DeviceType.Ems || device.type === DeviceType['Em-Measure'] || device.type === DeviceType.Em
+      this.nodes.push({
+        id: String(device.id),
+        type: 'user-card-node',
+        label: device.name,
+        data: device,
+        style: Object.assign(
+          {
+            // labelText: device.name,
+            opacity: .3,
+            deviceName: (d: any) => d.data.name,
+          })
+      })
+
+      if (!!deviceChild.length) {
+        // 在每个有子节点的设备下插入一个虚拟节点
+        this.nodes.push({
+          id: `${device.id}-virtual`,
+          label: '',
+          type: '',
+          style: { opacity: 0 },
+          size: 0,
+          anchorPoints: [],
+          data: {
+            type: VIRTUAL_NODE,
+            parentId: String(device.id),
+            depth: device.depth + 1,
+          },
+        })
+
+      }
+    }
+  }
+
+  private generateEdgeData() {
+    for (const node of this.nodes) {
+      const customData: Device = node.data
+      const virtualId = `${customData.parentId}-virtual`;
+      const findParentNode: Device = this.nodes.some((n: NodeData) => n.id === String(customData.parentId));
+
+      if (this.isVirtualNode(customData.type)) {
+        this.edges.push({
+          source: customData.parentId,
+          target: String(node.id),
+          type: 'my-line-edge',
+          data: customData,
+        })
+        continue;
+      }
+      //
+
+      if (findParentNode) {
+        if (this.isEms(customData.type)) continue;
+        if (this.isEm(customData.type)) {
+          // 如果是 电表 类型的节点 target 指向父节点Ems
+          this.edges.push({
+            target: String(customData.parentId),
+            source: String(node.id),
+            type: 'em-line-edge',
+            data: customData,
+          })
+          continue;
+        }
+
+        this.edges.push({
+          source: virtualId,
+          target: String(node.id),
+          type: 'my-line-edge',
+          data: customData,
+        })
+      }
+    }
+  }
+
+  isEm(type: number): boolean {
+    return type == DeviceType["Em-Measure"] || type == DeviceType.Em
+  }
+
+  isEms(type: number): boolean {
+    return type == DeviceType.Ems
+  }
+
+  isVirtualNode(type: number | string): boolean {
+    return type === VIRTUAL_NODE;
+  }
+
+  getNodes(): NodeData[] {
+    return this.nodes;
+  }
+
+  getEdges(): EdgeData[] {
+    return this.edges;
+  }
+}
diff --git a/src/views/testG6/utils/MyNode.ts b/src/views/testG6/utils/MyNode.ts
index 49bdb4c..7a6abb8 100644
--- a/src/views/testG6/utils/MyNode.ts
+++ b/src/views/testG6/utils/MyNode.ts
@@ -1,7 +1,7 @@
 import { Graph, register, Rect, ExtensionCategory } from '@antv/g6';
 import { NODE_SIZE } from "./index";
 
-export class UserCardNode extends Rect {
+export default class UserCardNode extends Rect {
   get nodeData() {
     return this.context.graph.getNodeData(this.id);
   }
@@ -11,32 +11,39 @@ export class UserCardNode extends Rect {
   }
 
   // 用户名样式
-  getUsernameStyle(attributes: any) {
-    return {
-      // x: -20,
-      text: this.data.name || '',
-      fontSize: 12,
-      fill: '#262626',
-      fontWeight: 'bold',
-      textAlign: 'center',
-      textBaseline: 'middle',
-    };
-  }
 
-  drawUsernameShape(attributes: any, container: any) {
+
+  drawNameShape(attributes: any, container: any) {
     if (!attributes.customData.name) return;
 
-    const usernameStyle = this.getUsernameStyle(attributes);
+    const getUsernameStyle = (attributes: any) => {
+      return {
+        // x: -20,
+        text: this.data.name || '',
+        fontSize: 12,
+        fill: '#262626',
+        fontWeight: 'bold',
+        textAlign: 'center',
+        textBaseline: 'middle',
+      };
+    }
+
+    const usernameStyle = getUsernameStyle(attributes);
     this.upsert('username', 'text', usernameStyle, container);
   }
 
 
+  drawTypeShape(attributes: any, container: any) {
+
+  }
+
+
   render(attributes: any, container: any) {
     // 渲染基础矩形
     super.render(attributes, container);
 
-
-    this.drawUsernameShape(attributes, container);
+    this.drawTypeShape(attributes, container);
+    this.drawNameShape(attributes, container);
   }
 }
 
diff --git a/src/views/testG6/utils/index.ts b/src/views/testG6/utils/index.ts
index d8cd484..39d7c76 100644
--- a/src/views/testG6/utils/index.ts
+++ b/src/views/testG6/utils/index.ts
@@ -1,7 +1,4 @@
 import { flatMap } from 'lodash-es'
-import type { NodeData, EdgeData } from "@antv/g6";
-import type { EdgeStyle } from "@antv/g6/src/spec/element/edge";
-import type { NodeStyle } from "@antv/g6/lib/spec/element/node";
 
 export type Device = any
 
@@ -22,17 +19,7 @@ export enum DeviceType {
   Cac,
 }
 
-const VIRTUAL_NODE = 'virtual-node'
-
-// const nodeDefaultStyle: NodeStyle = {
-//   ports: [
-//     { key: 'top', placement: [0.5, 0], r: 0 },
-//     // { key: 'bottom', placement: [0.5, 1], r: 0 },
-//     { key: 'left', placement: [0, 0.5], r: 0 },
-//     { key: 'right', placement: [1, 0.5], r: 0 }
-//   ]
-// }
-
+export const VIRTUAL_NODE = 'virtual-node'
 
 export function flattenTree(tree: Device[], depth = 1): Device[] {
   return flatMap(tree, (node: Device,) => {
@@ -41,113 +28,4 @@ export function flattenTree(tree: Device[], depth = 1): Device[] {
     // 有用虚拟节点的存在 depth + 2
     return [current, ...(children ? flattenTree(children, depth + 2) : [])]
   })
-}
-
-export class GenerateGraphData {
-  private readonly devices: Device[] = [];
-  private nodes: NodeData[] = [];
-  private edges: EdgeData[] = [];
-
-  constructor(devices: Device[]) {
-    this.devices = devices;
-    this.generateNodeData()
-    this.generateEdgeData();
-  }
-
-  private generateNodeData() {
-    for (const device of this.devices) {
-      const deviceChild = this.devices.filter((item: Device) => device.id === item.parentId)
-      const isNeedPoint = device.type === DeviceType.Ems || device.type === DeviceType['Em-Measure'] || device.type === DeviceType.Em
-      this.nodes.push({
-        id: String(device.id),
-        type: 'user-card-node',
-        label: device.name,
-        data: device,
-        style: Object.assign(
-          {
-            // labelText: device.name,
-            opacity: .3,
-            deviceName: (d: any) => d.data.name,
-          })
-      })
-
-      if (!!deviceChild.length) {
-        // 在每个有子节点的设备下插入一个虚拟节点
-        this.nodes.push({
-          id: `${device.id}-virtual`,
-          label: '',
-          type: '',
-          style: { opacity: 0 },
-          size: 0,
-          anchorPoints: [],
-          data: {
-            type: VIRTUAL_NODE,
-            parentId: String(device.id),
-            depth: device.depth + 1,
-          },
-        })
-
-      }
-    }
-  }
-
-  private generateEdgeData() {
-    for (const node of this.nodes) {
-      const customData: Device = node.data
-      const virtualId = `${customData.parentId}-virtual`;
-      const findParentNode: Device = this.nodes.some((n: NodeData) => n.id === String(customData.parentId));
-
-      if (this.isVirtualNode(customData.type)) {
-        this.edges.push({
-          source: customData.parentId,
-          target: String(node.id),
-          type: 'my-line-edge',
-          data: customData,
-        })
-        continue;
-      }
-      //
-
-      if (findParentNode) {
-        if (this.isEms(customData.type)) continue;
-        if (this.isEm(customData.type)) {
-          // 如果是 电表 类型的节点 target 指向父节点Ems
-          this.edges.push({
-            target: String(customData.parentId),
-            source: String(node.id),
-            type: 'em-line-edge',
-            data: customData,
-          })
-          continue;
-        }
-
-        this.edges.push({
-          source: virtualId,
-          target: String(node.id),
-          type: 'my-line-edge',
-          data: customData,
-        })
-      }
-    }
-  }
-
-  isEm(type: number): boolean {
-    return type == DeviceType["Em-Measure"] || type == DeviceType.Em
-  }
-
-  isEms(type: number): boolean {
-    return type == DeviceType.Ems
-  }
-
-  isVirtualNode(type: number | string): boolean {
-    return type === VIRTUAL_NODE;
-  }
-
-  getNodes(): NodeData[] {
-    return this.nodes;
-  }
-
-  getEdges(): EdgeData[] {
-    return this.edges;
-  }
 }
\ No newline at end of file