diff --git a/src/views/testG6/index.vue b/src/views/testG6/index.vue index b9df120..a2ac1b6 100644 --- a/src/views/testG6/index.vue +++ b/src/views/testG6/index.vue @@ -14,9 +14,7 @@ import { flattenTree, GenerateGraphData } from "./utils"; onMounted(() => { register(ExtensionCategory.EDGE, 'my-line-edge', MyLineEdge); const device = flattenTree(DeviceData) - console.log(device) const graphData = new GenerateGraphData(device) - const graph = new Graph({ container: document.getElementById('container')!, @@ -32,7 +30,6 @@ onMounted(() => { }, behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'], }); - console.log(graphData.getEdges()) graph.render(); }); diff --git a/src/views/testG6/utils/MyLineEdge.ts b/src/views/testG6/utils/MyLineEdge.ts index d59a480..8fbc54f 100644 --- a/src/views/testG6/utils/MyLineEdge.ts +++ b/src/views/testG6/utils/MyLineEdge.ts @@ -1,14 +1,15 @@ import { BaseEdge } from '@antv/g6'; import type { PathArray } from "@antv/util"; -import { Circle } from '@antv/g'; +import { Circle, Line } from '@antv/g'; import { subStyleProps } from '@antv/g6'; +import type { Device } from "./index"; export class MyLineEdge extends BaseEdge { getMarkerStyle(attributes: object) { return { - r: 5, + r: 4, fill: '#c3d5f9', offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') }; @@ -16,10 +17,25 @@ export class MyLineEdge extends BaseEdge { onCreate() { const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this)!; - marker.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], { - duration: 3000, - iterations: Infinity, - }); + + const prev = this.context.model.getRelatedEdgesData(this.sourceNode.id) // 获取源节点的相关边数据 + .find((edge) => edge.target === this.targetNode.id) as Device; + + + const depth = prev!.data!.depth - 1; + const delay = depth * 3000; // 每级延迟 3 秒 + marker.animate( + [{ offsetDistance: 0 }, { offsetDistance: 1 }], + { + duration: 3000, + iterations: Infinity, + delay, + } + ); + // marker.animate([{ offsetDistance: 0 }, { offsetDistance: 1 }], { + // duration: 3000, + // iterations: Infinity, + // }); } // 这里保持你的路径逻辑 @@ -28,8 +44,8 @@ export class MyLineEdge extends BaseEdge { const [sx, sy] = sourceNode.getPosition(); const [tx, ty] = targetNode.getPosition(); - const [x1, y1] = sourceNode.getPosition(); - const [x2, y2] = targetNode.getPosition(); + // const [x1, y1] = sourceNode.getPosition(); + // const [x2, y2] = targetNode.getPosition(); // 固定的主干 X const busX = attrs.busX ?? tx; diff --git a/src/views/testG6/utils/data.ts b/src/views/testG6/utils/data.ts index 16e6e3d..838726d 100644 --- a/src/views/testG6/utils/data.ts +++ b/src/views/testG6/utils/data.ts @@ -90,137 +90,137 @@ export default [{ } ] }, - // { - // "id": 402, - // "sn": "yiming-EMS3", - // "name": "储能单元3", - // "sort": 1, - // "parentId": 398, - // "deviceId": "t00510402", - // "dictName": "device_two_entity_type", - // "level": 1, - // "type": 1, - // "description": "", - // "children": [ - // { - // "id": 406, - // "sn": "B48100B210TF36002V-bms", - // "name": "BMS-3", - // "sort": 1, - // "parentId": 402, - // "deviceId": "t00510406", - // "dictName": "", - // "level": 2, - // "type": 2, - // "description": "", - // "children": null - // }, - // { - // "id": 410, - // "sn": "B48100B210TF36002V-pcs", - // "name": "PCS-3", - // "sort": 1, - // "parentId": 402, - // "deviceId": "t00510410", - // "dictName": "", - // "level": 2, - // "type": 3, - // "description": "", - // "children": null - // } - // ] - // }, - // { - // "id": 403, - // "sn": "yiming-EMS4", - // "name": "储能单元4", - // "sort": 1, - // "parentId": 398, - // "deviceId": "t00510403", - // "dictName": "device_two_entity_type", - // "level": 1, - // "type": 1, - // "description": "", - // "children": [ - // { - // "id": 407, - // "sn": "B48100B210TF360029-bms", - // "name": "BMS-4", - // "sort": 1, - // "parentId": 403, - // "deviceId": "t00510407", - // "dictName": "", - // "level": 2, - // "type": 2, - // "description": "", - // "children": null - // }, - // { - // "id": 411, - // "sn": "B48100B210TF360029-pcs", - // "name": "PCS-4", - // "sort": 1, - // "parentId": 403, - // "deviceId": "t00510411", - // "dictName": "", - // "level": 2, - // "type": 3, - // "description": "", - // "children": null - // } - // ] - // }, - // { - // "id": 412, - // "sn": "B48100B210TF36003E-em", - // "name": "电量信息-1", - // "sort": 1, - // "parentId": 398, - // "deviceId": "t00510412", - // "dictName": "device_two_entity_type", - // "level": 1, - // "type": 4, - // "description": "", - // "children": null - // }, - // { - // "id": 413, - // "sn": "B48100B210TF36003K-em", - // "name": "电量信息-2", - // "sort": 1, - // "parentId": 398, - // "deviceId": "t00510413", - // "dictName": "device_two_entity_type", - // "level": 1, - // "type": 4, - // "description": "", - // "children": null - // }, - // { - // "id": 414, - // "sn": "B48100B210TF36002V-em", - // "name": "电量信息-3", - // "sort": 1, - // "parentId": 398, - // "deviceId": "t00510414", - // "dictName": "device_two_entity_type", - // "level": 1, - // "type": 4, - // "description": "", - // "children": null - // }, - // { - // "id": 415, - // "sn": "B48100B210TF360029-em", - // "name": "电量信息-4", - // "sort": 1, - // "parentId": 398, - // "deviceId": "t00510415", - // "dictName": "device_two_entity_type", - // "level": 1, - // "type": 4, - // "description": "", - // "children": null - // } + { + "id": 402, + "sn": "yiming-EMS3", + "name": "储能单元3", + "sort": 1, + "parentId": 398, + "deviceId": "t00510402", + "dictName": "device_two_entity_type", + "level": 1, + "type": 1, + "description": "", + "children": [ + { + "id": 406, + "sn": "B48100B210TF36002V-bms", + "name": "BMS-3", + "sort": 1, + "parentId": 402, + "deviceId": "t00510406", + "dictName": "", + "level": 2, + "type": 2, + "description": "", + "children": null + }, + { + "id": 410, + "sn": "B48100B210TF36002V-pcs", + "name": "PCS-3", + "sort": 1, + "parentId": 402, + "deviceId": "t00510410", + "dictName": "", + "level": 2, + "type": 3, + "description": "", + "children": null + } + ] + }, + { + "id": 403, + "sn": "yiming-EMS4", + "name": "储能单元4", + "sort": 1, + "parentId": 398, + "deviceId": "t00510403", + "dictName": "device_two_entity_type", + "level": 1, + "type": 1, + "description": "", + "children": [ + { + "id": 407, + "sn": "B48100B210TF360029-bms", + "name": "BMS-4", + "sort": 1, + "parentId": 403, + "deviceId": "t00510407", + "dictName": "", + "level": 2, + "type": 2, + "description": "", + "children": null + }, + { + "id": 411, + "sn": "B48100B210TF360029-pcs", + "name": "PCS-4", + "sort": 1, + "parentId": 403, + "deviceId": "t00510411", + "dictName": "", + "level": 2, + "type": 3, + "description": "", + "children": null + } + ] + }, + { + "id": 412, + "sn": "B48100B210TF36003E-em", + "name": "电量信息-1", + "sort": 1, + "parentId": 398, + "deviceId": "t00510412", + "dictName": "device_two_entity_type", + "level": 1, + "type": 4, + "description": "", + "children": null + }, + { + "id": 413, + "sn": "B48100B210TF36003K-em", + "name": "电量信息-2", + "sort": 1, + "parentId": 398, + "deviceId": "t00510413", + "dictName": "device_two_entity_type", + "level": 1, + "type": 4, + "description": "", + "children": null + }, + { + "id": 414, + "sn": "B48100B210TF36002V-em", + "name": "电量信息-3", + "sort": 1, + "parentId": 398, + "deviceId": "t00510414", + "dictName": "device_two_entity_type", + "level": 1, + "type": 4, + "description": "", + "children": null + }, + { + "id": 415, + "sn": "B48100B210TF360029-em", + "name": "电量信息-4", + "sort": 1, + "parentId": 398, + "deviceId": "t00510415", + "dictName": "device_two_entity_type", + "level": 1, + "type": 4, + "description": "", + "children": null + } ] }] \ No newline at end of file diff --git a/src/views/testG6/utils/index.ts b/src/views/testG6/utils/index.ts index e9b3bbf..067b511 100644 --- a/src/views/testG6/utils/index.ts +++ b/src/views/testG6/utils/index.ts @@ -1,7 +1,7 @@ import { flatMap } from 'lodash-es' import type { NodeData, EdgeData } from "@antv/g6"; -type Device = any +export type Device = any export enum DeviceType { Ems, @@ -18,11 +18,12 @@ export enum DeviceType { Cac, } -export function flattenTree(tree: Device[], dep = 0): Device[] { +export function flattenTree(tree: Device[], depth = 0): Device[] { return flatMap(tree, (node: Device,) => { const { children, ...rest } = node - const current = { ...rest, dep } - return [current, ...(children ? flattenTree(children, dep + 1) : [])] + const current = { ...rest, depth } + // 有用虚拟节点的存在 depth + 2 + return [current, ...(children ? flattenTree(children, depth + 2) : [])] }) } @@ -56,6 +57,7 @@ export class GenerateGraphData { data: { type: 'virtual-node', parentId: String(device.id), + depth: device.depth + 1, } })