diff --git a/global.types/components.d.ts b/global.types/components.d.ts index 86bd0b9..b1ce32b 100644 --- a/global.types/components.d.ts +++ b/global.types/components.d.ts @@ -15,6 +15,8 @@ declare module 'vue' { EdfsTable: typeof import('./../src/components/Edfs-table/index.vue')['default'] EdfsWrap: typeof import('./../src/components/Edfs-wrap.vue')['default'] ElAside: typeof import('element-plus/es')['ElAside'] + ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] + ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup'] diff --git a/src/router/index.ts b/src/router/index.ts index e7f6eb0..20b9f46 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -25,13 +25,23 @@ export const defaultRouter = [ { path: '/station/data-transfer', name: 'data-transfer', - component: () => import('@/views/stationData/transferData.vue'), + component: () => import('@/views/stationData/transfer/index.vue'), meta: { title: '数据迁移', isShow: false, - icon: 'i-mingcute:transfer-2-line', + icon: '', }, }, + // { + // path: '/station/topology', + // name: 'data-topology', + // component: () => import('@/views/stationData/transfer/index.vue'), + // meta: { + // title: '数据拓扑', + // isShow: false, + // icon: '', + // }, + // }, // 固件上传 { path: '/firmware-upload', @@ -53,16 +63,16 @@ export const defaultRouter = [ icon: 'i-mingcute:task-line', } }, - // { - // path: '/testG6', - // name: 'testG6', - // component: () => import('@/views/testG6/index.vue'), - // meta: { - // title: '测试G6', - // isShow: true, - // icon: 'i-mingcute:task-line', - // } - // } + { + path: '/testG6', + name: 'testG6', + component: () => import('@/views/testG6/index.vue'), + meta: { + title: '测试G6', + isShow: true, + icon: 'i-mingcute:task-line', + } + } ], }, ] diff --git a/src/views/stationData/components/PointGroupTree.vue b/src/views/stationData/transfer/components/PointGroupTree.vue similarity index 98% rename from src/views/stationData/components/PointGroupTree.vue rename to src/views/stationData/transfer/components/PointGroupTree.vue index 84a8b13..c9122a4 100644 --- a/src/views/stationData/components/PointGroupTree.vue +++ b/src/views/stationData/transfer/components/PointGroupTree.vue @@ -30,7 +30,7 @@ diff --git a/src/views/testG6/utils/GenerateGraphData.ts b/src/views/testG6/utils/GenerateGraphData.ts index f11d671..69e798c 100644 --- a/src/views/testG6/utils/GenerateGraphData.ts +++ b/src/views/testG6/utils/GenerateGraphData.ts @@ -16,8 +16,6 @@ export default class GenerateGraphData { 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), label: device.name, @@ -26,49 +24,18 @@ export default class GenerateGraphData { }), style: Object.assign( { - // labelText: device.name, opacity: .3, icon: (d: any) => EmsIcon, }) }) - - 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: MyNodeData) => 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)) { @@ -76,16 +43,14 @@ export default class GenerateGraphData { this.edges.push({ target: String(customData.parentId), source: String(node.id), - type: 'em-line-edge', data: customData, }) continue; } this.edges.push({ - source: virtualId, + source: String(customData.parentId), target: String(node.id), - type: 'my-line-edge', data: customData, }) } diff --git a/src/views/testG6/utils/MyLineEdge.ts b/src/views/testG6/utils/MyLineEdge.ts index e2f85a1..f2b5a4a 100644 --- a/src/views/testG6/utils/MyLineEdge.ts +++ b/src/views/testG6/utils/MyLineEdge.ts @@ -1,12 +1,11 @@ -import { BaseEdge } from '@antv/g6'; -import type { PathArray } from "@antv/util"; +import { Polyline } from '@antv/g6'; import { Circle } from '@antv/g'; import { subStyleProps } from '@antv/g6'; import { NODE_SIZE } from "./index"; import type { Device } from "../type"; -export class MyLineEdge extends BaseEdge { +export class MyLineEdge extends Polyline { getMarkerStyle(attributes: object) { return { @@ -23,7 +22,7 @@ export class MyLineEdge extends BaseEdge { .find((edge) => edge.target === this.targetNode.id) as Device; - const depth = prev!.data!.depth - 1; + const depth = prev!.data!.depth; const delay = depth * 3000; // 每级延迟 3 秒 marker.animate( [{ offsetDistance: 0 }, { offsetDistance: 1 }], @@ -65,82 +64,4 @@ export class MyLineEdge extends BaseEdge { // iterations: Infinity, // }); } - - protected getKeyPath(attrs: any): PathArray { - const [sourcePoint, targetPoint] = this.getEndpoints(attrs, false) - const [sx, sy] = [sourcePoint[0], sourcePoint[1]]; - const [tx, ty] = [targetPoint[0], targetPoint[1]]; - - // 固定的主干 X - const busX = attrs.busX ?? tx; - - return [ - ['M', sx, sy], - ['L', busX, sy], - ['L', busX, ty], - ['L', tx, ty], - ]; - } - -} - -export class EmLineEdge extends BaseEdge { - - getMarkerStyle(attributes: object) { - return { - r: 4, - fill: '#58C448', - offsetPath: this.shapeMap.key, ...subStyleProps(attributes, 'marker') - }; - } - - onCreate() { - const marker = this.upsert('marker', Circle, this.getMarkerStyle(this.attributes), this)!; - - const delay = 0; - marker.animate( - [{ offsetDistance: 0 }, { offsetDistance: 1 }], - { - duration: 3000, - iterations: Infinity, - delay, - } - ); - - // 涟漪效果：在 marker 外套一个圆 - const ripple = this.upsert( - 'ripple', - Circle, - { - r: 4, // 初始半径和 marker 一样 - stroke: '#58C448', - lineWidth: 2, - fill: 'none', - offsetPath: this.shapeMap.key, - }, - this - )!; - - // 涟漪动画：半径变大 + 透明度变小 - ripple.animate( - [ - { offsetDistance: 0, r: 4, opacity: 0.7 }, - { offsetDistance: 1, r: 6, opacity: 0 }, - ], - { - duration: 3000, - iterations: Infinity, - } - ); - } - - getKeyPath(attributes: any): PathArray { - const [sourcePoint, targetPoint] = this.getEndpoints(attributes, false); - return [ - ['M', sourcePoint[0], sourcePoint[1]], - ['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], sourcePoint[1]], - ['L', targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], targetPoint[1]], - ['L', targetPoint[0], targetPoint[1]], - ]; - } } diff --git a/src/views/testG6/utils/MyNode.ts b/src/views/testG6/utils/MyNode.ts deleted file mode 100644 index a2ff5db..0000000 --- a/src/views/testG6/utils/MyNode.ts +++ /dev/null @@ -1,72 +0,0 @@ -import { Graph, register, Rect, ExtensionCategory } from '@antv/g6'; -import { DeviceType, NODE_SIZE } from "./index"; - - -// const typeToIconMap = Object.entries(DeviceType).filter(([key, value]) => typeof value === 'number') -// console.log(typeToIconMap) - -export default class UserCardNode extends Rect { - get nodeData() { - return this.context.graph.getNodeData(this.id); - } - - get data() { - return this.nodeData.data || {}; - } - - // 用户名样式 - - - drawNameShape(attributes: any, container: any) { - if (!this.data.name) return; - const getUsernameStyle = (attributes: any) => { - return { - x: -14, - text: this.data.name || '', - // fontSize: 12, - width: 20, - fill: '#262626', - fontWeight: 'bold', - textAlign: 'left', - textBaseline: 'middle', - maxWidth: 80, // 限制最大宽度 - ellipsis: true, // 超出显示 ... - }; - } - - const usernameStyle = getUsernameStyle(attributes); - this.upsert('username', 'text', usernameStyle, container); - } - - - // 头像样式 - getAvatarStyle(attributes: any) { - const [width, height] = this.getSize(attributes); - const type = this!.data!.type - return { - x: -width / 2 + 4, - y: -height / 2 + 6, - width: 24, - height: 24, - src: typeToIconMap[type as keyof typeof type] || '', - }; - } - - drawAvatarShape(attributes: any, container: any) { - if (!this.data.typeString) return; - - const avatarStyle = this.getAvatarStyle(attributes); - this.upsert('avatar', 'image', avatarStyle, container); - } - - - render(attributes: any, container: any) { - // 渲染基础矩形 - super.render(attributes, container); - - this.drawAvatarShape(attributes, container); - this.drawNameShape(attributes, container); - } -} - - diff --git a/src/views/testG6/utils/data.ts b/src/views/testG6/utils/data.ts index 1ccfb41..3711a87 100644 --- a/src/views/testG6/utils/data.ts +++ b/src/views/testG6/utils/data.ts @@ -183,57 +183,5 @@ export default [{ } ] }, - { - "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 6b94091..2156f17 100644 --- a/src/views/testG6/utils/index.ts +++ b/src/views/testG6/utils/index.ts @@ -22,11 +22,10 @@ export enum DeviceType { export const VIRTUAL_NODE = 'virtual-node' -export function flattenTree(tree: Device[], depth = 1): Device[] { +export function flattenTree(tree: Device[], depth = 0): Device[] { return flatMap(tree, (node: Device,) => { const { children, ...rest } = node const current = { ...rest, depth } - // 有用虚拟节点的存在 depth + 2 - return [current, ...(children ? flattenTree(children, depth + 2) : [])] + return [current, ...(children ? flattenTree(children, depth + 1) : [])] }) } \ No newline at end of file