OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

del: 删除关系图组件

Browse Source
This commit is contained in:
TsMask
2024-01-30 16:31:48 +08:00
parent 17bb4f1738
commit 35e8a727ee
1 changed files with 0 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
src/components/ChartGraphG6/index.vue
View File

@@ -1,392 +0,0 @@
<template>
<div>
<div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
</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: true,
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
},
// 全局节点 矩形
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,
},
},
});
graph.data(data); // 加载数据
graph.render(); // 渲染
}
onMounted(() => {
nextTick(() => {
initChart();
});
});
onBeforeUnmount(() => {});
</script>
<style lang="less" scoped></style>