569 lines
11 KiB
Vue
569 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
|
||
<button @click="actions['Enable/Disable Node States'].Breathing()">
|
||
Breathing()
|
||
</button>
|
||
<button @click="actions['Enable/Disable Node States'].Scaling()">
|
||
Scaling()
|
||
</button>
|
||
|
||
<button @click="actions['Enable/Disable Edge States'].Growing()">
|
||
Growing()
|
||
</button>
|
||
<button @click="actions['Enable/Disable Edge States'].Running()">
|
||
Running()
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { nextTick, watch, onMounted, onBeforeUnmount, ref } from 'vue';
|
||
import { Graph } from '@antv/g6';
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* 图表主题
|
||
*
|
||
* 'dark' | 'light'
|
||
*/
|
||
theme: {
|
||
type: String,
|
||
default: 'light', // 'dark' | 'light'
|
||
},
|
||
/**宽度，默认100% */
|
||
width: {
|
||
type: String,
|
||
default: '100%',
|
||
},
|
||
/**高度 */
|
||
height: {
|
||
type: String,
|
||
default: '500px',
|
||
},
|
||
});
|
||
|
||
const chartGraphG6Dom = ref<HTMLElement | undefined>(undefined);
|
||
|
||
const data = {
|
||
nodes: [
|
||
// 0 基站
|
||
{
|
||
id: '0',
|
||
x: 50,
|
||
y: 150,
|
||
size: 48,
|
||
type: 'circle',
|
||
label: '基站',
|
||
labelCfg: {
|
||
position: 'bottom',
|
||
offset: 10,
|
||
style: {
|
||
fill: '#333',
|
||
stroke: '#fff',
|
||
lineWidth: 10,
|
||
},
|
||
},
|
||
style: {
|
||
fill: '#9EC9FF',
|
||
stroke: '#5B8FF9',
|
||
lineWidth: 2,
|
||
},
|
||
icon: {
|
||
show: true,
|
||
// 可更换为其他图片地址
|
||
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
|
||
width: 24,
|
||
height: 24,
|
||
},
|
||
},
|
||
// 1 DM
|
||
{
|
||
id: '1',
|
||
x: 450,
|
||
y: 450,
|
||
label: 'DM',
|
||
labelCfg: {
|
||
position: 'center',
|
||
},
|
||
style: {
|
||
fill: '#00b050',
|
||
stroke: '#00b050',
|
||
lineWidth: 1,
|
||
},
|
||
},
|
||
// 2 O&M
|
||
{
|
||
id: '2',
|
||
x: 50,
|
||
y: 450,
|
||
label: 'O&M',
|
||
},
|
||
// 100 EMS
|
||
{
|
||
id: '100',
|
||
label: 'EMS',
|
||
comboId: 'combo-ems',
|
||
x: 300,
|
||
y: 450,
|
||
},
|
||
// 190 UPF
|
||
{
|
||
id: '190',
|
||
comboId: 'combo-upf',
|
||
x: 300,
|
||
y: 350,
|
||
label: 'UPF',
|
||
labelCfg: {
|
||
position: 'center',
|
||
},
|
||
style: {
|
||
fill: '#d580ff',
|
||
stroke: '#d580ff',
|
||
lineWidth: 1,
|
||
},
|
||
},
|
||
// EP-IMS
|
||
{
|
||
id: '110',
|
||
comboId: 'combo-ims',
|
||
x: 600,
|
||
y: 350,
|
||
label: 'IMS',
|
||
labelCfg: {
|
||
position: 'center',
|
||
},
|
||
style: {
|
||
fill: '#ed7d31',
|
||
stroke: '#ed7d31',
|
||
lineWidth: 1,
|
||
},
|
||
},
|
||
// 5GC控制面
|
||
{
|
||
id: '170',
|
||
label: 'NSSF',
|
||
comboId: 'combo-5gc',
|
||
x: 300,
|
||
y: 50,
|
||
},
|
||
{
|
||
id: '130',
|
||
label: 'AUSF',
|
||
comboId: 'combo-5gc',
|
||
x: 450,
|
||
y: 50,
|
||
},
|
||
{
|
||
id: '140',
|
||
label: 'UDM',
|
||
comboId: 'combo-5gc',
|
||
x: 600,
|
||
y: 50,
|
||
},
|
||
{
|
||
id: '120',
|
||
label: 'AMF',
|
||
comboId: 'combo-5gc',
|
||
x: 300,
|
||
y: 150,
|
||
},
|
||
{
|
||
id: '180',
|
||
label: 'NRF',
|
||
comboId: 'combo-5gc',
|
||
x: 450,
|
||
y: 150,
|
||
},
|
||
{
|
||
id: '150',
|
||
label: 'SMF',
|
||
comboId: 'combo-5gc',
|
||
x: 300,
|
||
y: 250,
|
||
},
|
||
{
|
||
id: '160',
|
||
label: 'PCF',
|
||
comboId: 'combo-5gc',
|
||
x: 700,
|
||
y: 250,
|
||
},
|
||
],
|
||
edges: [
|
||
{
|
||
id: '0-5gc',
|
||
source: '0',
|
||
target: 'combo-5gc',
|
||
},
|
||
{
|
||
id: '0-upf',
|
||
source: '0',
|
||
target: 'combo-upf',
|
||
},
|
||
{
|
||
id: 'upf-1',
|
||
source: 'combo-upf',
|
||
target: '1',
|
||
},
|
||
|
||
{
|
||
id: 'ems-2',
|
||
source: 'combo-ems',
|
||
target: '2',
|
||
},
|
||
{
|
||
id: '170-120',
|
||
source: '170',
|
||
target: '120',
|
||
},
|
||
{
|
||
id: '130-120',
|
||
source: '130',
|
||
target: '120',
|
||
},
|
||
{
|
||
id: '140-120',
|
||
source: '140',
|
||
target: '120',
|
||
},
|
||
{
|
||
id: '140-180',
|
||
source: '140',
|
||
target: '180',
|
||
},
|
||
{
|
||
id: '120-180',
|
||
source: '120',
|
||
target: '180',
|
||
},
|
||
{
|
||
id: '130-180',
|
||
source: '130',
|
||
target: '180',
|
||
},
|
||
{
|
||
id: '140-150',
|
||
source: '140',
|
||
target: '150',
|
||
},
|
||
{
|
||
id: '140-110',
|
||
source: '140',
|
||
target: '110',
|
||
},
|
||
{
|
||
id: '120-150',
|
||
source: '120',
|
||
target: '150',
|
||
data: {},
|
||
},
|
||
{
|
||
id: '150-180',
|
||
source: '150',
|
||
target: '180',
|
||
data: {},
|
||
},
|
||
{
|
||
id: '150-160',
|
||
source: '150',
|
||
target: '160',
|
||
},
|
||
{
|
||
id: '160-120',
|
||
source: '160',
|
||
target: '120',
|
||
},
|
||
{
|
||
id: '160-180',
|
||
source: '160',
|
||
target: '180',
|
||
},
|
||
{
|
||
id: '160-110',
|
||
source: '160',
|
||
target: '110',
|
||
},
|
||
|
||
{
|
||
id: '150-190',
|
||
source: '150',
|
||
target: '190',
|
||
},
|
||
|
||
{
|
||
id: 'upf-ims',
|
||
source: 'combo-upf',
|
||
target: 'combo-ims',
|
||
},
|
||
{
|
||
id: 'ems-5gc',
|
||
source: 'combo-ems',
|
||
target: 'combo-5gc',
|
||
},
|
||
{
|
||
id: 'ems-upf',
|
||
source: 'combo-ems',
|
||
target: 'combo-upf',
|
||
},
|
||
{
|
||
id: 'ems-ims',
|
||
source: 'combo-ems',
|
||
target: 'combo-ims',
|
||
},
|
||
],
|
||
combos: [
|
||
{
|
||
id: 'combo-5gc',
|
||
data: {
|
||
text: '5GC控制面',
|
||
},
|
||
},
|
||
{
|
||
id: 'combo-upf',
|
||
data: {
|
||
keyShape: {
|
||
opacity: 0.8,
|
||
padding: [20, 20, 20, 20],
|
||
radius: 4,
|
||
lineWidth: 1,
|
||
stroke: '#d580ff',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
id: 'combo-ims',
|
||
data: {},
|
||
},
|
||
{
|
||
id: 'combo-ems',
|
||
data: {},
|
||
},
|
||
],
|
||
};
|
||
|
||
let graph: any = null;
|
||
|
||
/**初始化渲染图表 */
|
||
function initChart() {
|
||
if (!chartGraphG6Dom.value) return;
|
||
console.log(chartGraphG6Dom.value.clientWidth);
|
||
console.log(chartGraphG6Dom.value.clientHeight);
|
||
graph = new Graph({
|
||
container: chartGraphG6Dom.value,
|
||
height: chartGraphG6Dom.value.clientHeight,
|
||
width: chartGraphG6Dom.value.clientWidth,
|
||
// fitCenter: false,
|
||
modes: {
|
||
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
|
||
},
|
||
// 布局 力向吸引
|
||
layout: {
|
||
type: 'force', // 指定为力导向布局
|
||
preventOverlap: true, // 防止节点重叠
|
||
linkDistance: 100, // 指定边距离为100
|
||
},
|
||
// 插件
|
||
plugins: [
|
||
{
|
||
// 避免文本过于密集导致的视觉混乱
|
||
type: 'lod-controller',
|
||
disableLod: true,
|
||
},
|
||
] as any,
|
||
// 全局节点 矩形
|
||
defaultNode: {
|
||
type: 'rect',
|
||
size: [80, 40],
|
||
style: {
|
||
fill: '#fff',
|
||
lineWidth: 1,
|
||
radius: 8,
|
||
},
|
||
labelCfg: {},
|
||
},
|
||
// 全局边 三次贝塞尔曲线
|
||
defaultEdge: {
|
||
type: 'polyline',
|
||
style: {
|
||
offset: 20, // 拐弯处距离节点最小距离
|
||
radius: 4, // 拐弯处的圆角弧度，若不设置则为直角
|
||
lineWidth: 1,
|
||
stroke: '#87e8de',
|
||
},
|
||
},
|
||
// 全局框节点 矩形
|
||
defaultCombo: {
|
||
type: 'rect', // Combo 类型
|
||
size: [40, 40],
|
||
// ... 其他配置
|
||
style: {
|
||
lineWidth: 1,
|
||
},
|
||
},
|
||
// 节点状态
|
||
nodeState: {
|
||
breathing: {
|
||
haloShape: {
|
||
opacity: 0.25,
|
||
lineWidth: 20,
|
||
visible: true,
|
||
},
|
||
keyShape: {
|
||
radius: 4,
|
||
},
|
||
},
|
||
scaling: {
|
||
keyShape: {
|
||
width: 100,
|
||
height: 60,
|
||
},
|
||
},
|
||
} as any,
|
||
edgeState: {
|
||
growing: {
|
||
keyShape: {
|
||
lineWidth: 2,
|
||
lineDash: ['100%', 0],
|
||
},
|
||
},
|
||
running: {
|
||
keyShape: {
|
||
lineWidth: 2,
|
||
lineDash: [2, 2],
|
||
// TODO: lineDashOffset
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
graph.data(data); // 加载数据
|
||
graph.render(); // 渲染
|
||
|
||
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 = {
|
||
'Enable/Disable Node States': {
|
||
Breathing: () => {
|
||
graph.getAllNodesData().forEach((node: any) => {
|
||
if (graph.getItemState(node.id, 'breathing')) {
|
||
graph.setItemState(node.id, 'breathing', false);
|
||
} else {
|
||
graph.setItemState(node.id, 'scaling', false);
|
||
graph.setItemState(node.id, 'breathing', true);
|
||
}
|
||
});
|
||
},
|
||
Scaling: () => {
|
||
graph.getAllNodesData().forEach((node: any) => {
|
||
if (graph.getItemState(node.id, 'scaling')) {
|
||
graph.setItemState(node.id, 'scaling', false);
|
||
} else {
|
||
graph.setItemState(node.id, 'breathing', false);
|
||
graph.setItemState(node.id, 'scaling', true);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
'Enable/Disable Edge States': {
|
||
Growing: () => {
|
||
graph.getAllEdgesData().forEach((edge: any) => {
|
||
if (graph.getItemState(edge.id, 'growing')) {
|
||
graph.setItemState(edge.id, 'growing', false);
|
||
} else {
|
||
graph.setItemState(edge.id, 'running', false);
|
||
graph.setItemState(edge.id, 'growing', true);
|
||
}
|
||
});
|
||
},
|
||
Running: () => {
|
||
graph.getAllEdgesData().forEach((edge: any) => {
|
||
if (graph.getItemState(edge.id, 'running')) {
|
||
graph.setItemState(edge.id, 'running', false);
|
||
} else {
|
||
graph.setItemState(edge.id, 'growing', false);
|
||
graph.setItemState(edge.id, 'running', true);
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
|
||
// watch(
|
||
// () => props.option,
|
||
// val => {
|
||
// if (val) {
|
||
// nextTick(() => {
|
||
// initChart();
|
||
// });
|
||
// }
|
||
// }
|
||
// );
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
initChart();
|
||
});
|
||
});
|
||
|
||
onBeforeUnmount(() => {});
|
||
</script>
|
||
|
||
<style lang="less" scoped></style>
|