From 6210b87c841ffcdf05af3982227133f19730e005 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 8 Dec 2023 16:30:20 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E8=A1=A5=E5=85=85=E8=8A=82=E7=82=B9?= =?UTF-8?q?=EF=BC=8C=E9=BC=A0=E6=A0=87=E6=82=AC=E6=B5=AE=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ChartGraphG6/index.vue | 535 +++++++++++++++++++------- 1 file changed, 391 insertions(+), 144 deletions(-) diff --git a/src/components/ChartGraphG6/index.vue b/src/components/ChartGraphG6/index.vue index b66ee8d9..f37aa18d 100644 --- a/src/components/ChartGraphG6/index.vue +++ b/src/components/ChartGraphG6/index.vue @@ -60,64 +60,182 @@ const data = { { id: '0', data: { - label: 'A0', - x: 110, - y: 110, + x: 100, + y: 100, + type: 'circle-node', + color: '#5a99d5', + keyShape: { + r: 32, + width: 48, + height: 48, + }, + labelShape: { + text: '基站222222222222222222', + position: 'bottom', + maxWidth: '200%', + offsetY: 10, + }, + labelBackgroundShape: {}, + iconShape: { + img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + width: 48, + height: 48, + }, + animates: { + update: [ + { + fields: ['opacity'], + shapeId: 'haloShape', + states: ['breathing'], + iterations: Infinity, + direction: 'alternate', + duration: 500, + }, + { + fields: ['lineWidth'], + shapeId: 'keyShape', + states: ['breathing'], + iterations: Infinity, + direction: 'alternate', + duration: 500, + }, + { + fields: ['height', 'width'], + shapeId: 'keyShape', + states: ['scaling'], + iterations: Infinity, + direction: 'alternate', + duration: 500, + }, + ], + }, }, }, - // B { id: '1', data: { - label: 'B1', - parentId: 'B', - x: 110, + label: 'DM', + x: 600, y: 350, }, }, { id: '2', data: { - label: 'B2', - parentId: 'B', - x: 220, - y: 350, + label: 'O&M', + x: 900, + y: 100, + }, + }, + // 5GC控制面 + { + id: '170', + data: { + label: 'NSSF', + parentId: 'combo-5gc', + x: 300, + y: 50, }, }, { - id: '3', + id: '130', data: { - label: 'B3', - parentId: 'A', - x: 360, - y: 350, + label: 'AUSF', + parentId: 'combo-5gc', + x: 400, + y: 50, }, }, - // C { - id: '4', + id: '140', data: { - label: 'C1', - parentId: 'C', - x: 360, + label: 'UDM', + parentId: 'combo-5gc', + x: 500, + y: 50, + }, + }, + { + id: '120', + data: { + label: 'AMF', + parentId: 'combo-5gc', + x: 300, y: 150, }, }, { - id: '5', + id: '180', data: { - label: 'C2', - parentId: 'C', - x: 460, + label: 'NRF', + parentId: 'combo-5gc', + x: 400, y: 150, }, }, + { + id: '150', + data: { + label: 'SMF', + parentId: 'combo-5gc', + x: 500, + y: 250, + }, + }, + { + id: '160', + data: { + label: 'PCF', + parentId: 'combo-5gc', + x: 600, + y: 250, + }, + }, + // 5GC用户面 + { + id: '190', + data: { + label: 'UPF', + parentId: 'combo-upf', + x: 300, + y: 350, + }, + }, + // EP-IMS + { + id: '110', + data: { + label: 'I/S-CSCF', + parentId: 'combo-ims', + x: 800, + y: 350, + }, + }, + { + id: '111', + data: { + label: 'P-CSCF', + parentId: 'combo-ims', + x: 800, + y: 400, + }, + }, + // O&M + { + id: '100', + data: { + label: 'EMS', + parentId: 'combo-ems', + x: 800, + y: 100, + }, + }, ], edges: [ { - id: 'edge-102', + id: '0-5gc', source: '0', - target: '1', + target: 'combo-5gc', data: { type: 'custom-edge', animates: { @@ -134,28 +252,57 @@ const data = { }, }, { - id: 'edge-161', - source: '0', + id: '5gc-ems', + source: 'combo-5gc', + target: 'combo-ems', + data: {}, + }, + { + id: 'upf-ems', + source: 'combo-upf', + target: 'combo-ems', + data: {}, + }, + { + id: 'ims-ems', + source: 'combo-ims', + target: 'combo-ems', + data: {}, + }, + { + id: 'ems-2', + source: 'combo-ems', target: '2', data: {}, }, { - id: 'edge-253', - source: '0', - target: 'A', - data: { - keyShape: { - endArrow: true, - }, - labelShape: { - text: 'asdf-arrow', - }, - }, + id: '170-120', + source: '170', + target: '120', + data: {}, }, { - id: 'edge-237', - source: '1', - target: '4', + id: '130-120', + source: '130', + target: '120', + data: {}, + }, + { + id: '140-120', + source: '140', + target: '120', + data: {}, + }, + { + id: '140-180', + source: '140', + target: '180', + data: {}, + }, + { + id: '120-180', + source: '120', + target: '180', data: { type: 'polyline-edge', keyShape: { @@ -190,47 +337,57 @@ const data = { }, }, { - id: 'edge-133', - source: '2', - target: '4', + id: '130-180', + source: '130', + target: '180', data: { type: 'polyline-edge', - keyShape: { - /** - * 拐弯处的圆角弧度，默认为直角 - */ - radius: 20, - /** - * 拐弯处距离节点最小距离, 默认为 5 - */ - // offset: 0, - /** - * 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折 - */ - controlPoints: [ - { x: 220, y: 220 }, - { x: 300, y: 130 }, - ], - }, }, }, { - id: 'edge-320', - source: '2', - target: '5', + id: '140-150', + source: '140', + target: '150', data: { - keyShape: { - endArrow: true, - }, - labelShape: { - text: 'edge-arrow', - }, + type: 'polyline-edge', }, }, { - id: 'edge-355', - source: '3', - target: '4', + id: '140-110', + source: '140', + target: '110', + data: { + type: 'polyline-edge', + }, + }, + { + id: '120-150', + source: '120', + target: '150', + data: {}, + }, + { + id: '150-180', + source: '150', + target: '180', + data: {}, + }, + { + id: '150-160', + source: '150', + target: '160', + data: { type: 'polyline-edge' }, + }, + { + id: '160-120', + source: '160', + target: '120', + data: {}, + }, + { + id: '160-180', + source: '160', + target: '180', data: { keyShape: { endArrow: true, @@ -240,24 +397,60 @@ const data = { }, }, }, + { + id: '160-111', + source: '160', + target: '111', + data: {}, + }, + { + id: '0-upf', + source: '0', + target: 'combo-upf', + data: {}, + }, + { + id: '150-190', + source: '150', + target: '190', + data: {}, + }, + { + id: 'upf-1', + source: 'combo-upf', + target: '1', + data: {}, + }, + { + id: 'upf-ims', + source: 'combo-upf', + target: 'combo-ims', + data: {}, + }, ], combos: [ { - id: 'A', + id: 'combo-5gc', data: { - text: 'combo A', + text: '5GC控制面', }, }, { - id: 'B', + id: 'combo-upf', data: { - label: 'combo B', + label: '5GC用户面', }, }, { - id: 'C', + id: 'combo-ims', data: { - label: 'combo C', + label: 'EP-IMS用户面', + }, + }, + { + id: 'combo-ems', + data: { + label: 'EMS', }, }, ], @@ -308,55 +501,54 @@ function initChart() { }, }, }, - node: model => { - const { id, data } = model; - return { - id, - data: { - ...data, - type: 'rect-node', - keyShape: { - width: 60, - height: 30, - radius: 8, - }, - labelShape: { - position: 'center', - text: data.label, - }, - animates: { - update: [ - { - fields: ['opacity'], - shapeId: 'haloShape', - states: ['breathing'], - iterations: Infinity, - direction: 'alternate', - duration: 500, - }, - { - fields: ['lineWidth'], - shapeId: 'keyShape', - states: ['breathing'], - iterations: Infinity, - direction: 'alternate', - duration: 500, - }, - { - fields: ['height'], - shapeId: 'keyShape', - states: ['scaling'], - iterations: Infinity, - direction: 'alternate', - duration: 500, - }, - ], - }, - }, - }; - }, + // node: model => { + // const { id, data } = model; + // return { + // id, + // data: { + // ...data, + // type: 'rect-node', + // keyShape: { + // width: 80, + // height: 40, + // radius: 8, + // }, + // labelShape: { + // position: 'center', + // text: data.label, + // }, + // animates: { + // update: [ + // { + // fields: ['opacity'], + // shapeId: 'haloShape', + // states: ['breathing'], + // iterations: Infinity, + // direction: 'alternate', + // duration: 500, + // }, + // { + // fields: ['lineWidth'], + // shapeId: 'keyShape', + // states: ['breathing'], + // iterations: Infinity, + // direction: 'alternate', + // duration: 500, + // }, + // { + // fields: ['height','width'], + // shapeId: 'keyShape', + // states: ['scaling'], + // iterations: Infinity, + // direction: 'alternate', + // duration: 500, + // }, + // ], + // }, + // }, + // }; + // }, edge: { - type: 'custom-edge', animates: { update: [ { @@ -412,15 +604,13 @@ function initChart() { visible: true, }, keyShape: { - stroke: '#000', - lineWidth: 4, + radius: 4, }, }, scaling: { keyShape: { - r: 24, - width: 48, - height: 48, + width: 100, + height: 60, }, }, }, @@ -441,6 +631,63 @@ function initChart() { }, data, }); + + graph.on('node:click', (e: any) => { + const s = graph.getItemState(e.itemId); + console.log(s); + // graph.updateData('node', { + // id: e.itemId, + // data: { + // cluster: Math.random(), + // keyShape: { + // r: 32 + Math.random() * 10 - 5, + // lineWidth: 6 + Math.random() * 6 - 3, + // stroke: '#000', + // }, + // labelShape: { + // fontWeight: 700, + // }, + // }, + // }); + }); + + graph.on('node:pointerenter', (e: any) => { + const { itemId } = e; + if (graph.getItemState(itemId, 'breathing')) { + graph.setItemState(itemId, 'breathing', false); + } else { + graph.setItemState(itemId, 'scaling', false); + graph.setItemState(itemId, 'breathing', true); + } + // graph.updateData('node', { + // id: itemId, + // data: { + // label: `after been hovered ${itemId}`, + // labelShape: { + // fill: '#0f0', + // }, + // }, + // }); + }); + + graph.on('node:pointerleave', (e: any) => { + const { itemId } = e; + if (graph.getItemState(itemId, 'breathing')) { + graph.setItemState(itemId, 'breathing', false); + } else { + graph.setItemState(itemId, 'scaling', false); + graph.setItemState(itemId, 'breathing', true); + } + // graph.updateData('node', { + // id: itemId, + // data: { + // label: 'label before been hovered', + // labelShape: { + // fill: '#000', + // }, + // }, + // }); + }); } const actions = { @@ -490,16 +737,16 @@ const actions = { }, }; -watch( - () => props.option, - val => { - // if (val) { - // nextTick(() => { - // initChart(); - // }); - // } - } -); +// watch( +// () => props.option, +// val => { +// if (val) { +// nextTick(() => { +// initChart(); +// }); +// } +// } +// ); onMounted(() => { nextTick(() => {