feat: 可编辑拓扑页面
This commit is contained in:
TsMask
1742
src/views/monitor/topology-build/graph.ts
Normal file
1742
src/views/monitor/topology-build/graph.ts
Normal file
File diff suppressed because it is too large
Load Diff
656
src/views/monitor/topology-build/index.vue
Normal file
656
src/views/monitor/topology-build/index.vue
Normal file
@@ -0,0 +1,656 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted, ref } from 'vue';
|
||||||
|
import { PageContainer } from 'antdv-pro-layout';
|
||||||
|
import useI18n from '@/hooks/useI18n';
|
||||||
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||||
|
import { listNe, stateNe } from '@/api/ne/ne';
|
||||||
|
import message from 'ant-design-vue/lib/message';
|
||||||
|
import { parseDateToStr } from '@/utils/date-utils';
|
||||||
|
import { Graph, Util } from '@antv/g6';
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
/**图DOM节点实例对象 */
|
||||||
|
const graphG6Dom = ref<HTMLElement | undefined>(undefined);
|
||||||
|
|
||||||
|
/**图实例对象 */
|
||||||
|
const graphG6 = ref<any>(null);
|
||||||
|
|
||||||
|
/**图数据 */
|
||||||
|
const graphG6Data = reactive<Record<string, any>>({
|
||||||
|
nodes: [
|
||||||
|
// 0 基站
|
||||||
|
{
|
||||||
|
id: '0',
|
||||||
|
x: 50,
|
||||||
|
y: 150,
|
||||||
|
size: 48,
|
||||||
|
type: 'circle',
|
||||||
|
label: '基站',
|
||||||
|
labelCfg: {
|
||||||
|
position: 'bottom',
|
||||||
|
offset: 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 DN
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
x: 450,
|
||||||
|
y: 450,
|
||||||
|
label: 'DN',
|
||||||
|
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',
|
||||||
|
label: 'combo 5GC控制面',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'combo-upf',
|
||||||
|
label: 'combo upf',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'combo-ims',
|
||||||
|
label: 'combo ims',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'combo-ems',
|
||||||
|
label: 'Combo ems',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**图绑定事件 */
|
||||||
|
function graphEvent(graph: Graph) {
|
||||||
|
// 鼠标进入节点事件
|
||||||
|
graph.on('edge:mouseenter', (ev: any) => {
|
||||||
|
// 获得鼠标当前目标边
|
||||||
|
const edge = ev.item;
|
||||||
|
// 该边的起始点
|
||||||
|
const source = edge.getSource();
|
||||||
|
// 该边的结束点
|
||||||
|
const target = edge.getTarget();
|
||||||
|
// 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。
|
||||||
|
edge.toFront();
|
||||||
|
source.toFront();
|
||||||
|
target.toFront();
|
||||||
|
});
|
||||||
|
|
||||||
|
graph.on('edge:mouseleave', (ev: any) => {
|
||||||
|
// 获得图上所有边实例
|
||||||
|
const edges = graph.getEdges();
|
||||||
|
// 遍历边，将所有边的层级放置在后方，以恢复原样
|
||||||
|
edges.forEach(edge => {
|
||||||
|
edge.toBack();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
graph.on('node:mouseenter', (ev: any) => {
|
||||||
|
// 获得鼠标当前目标节点
|
||||||
|
const node = ev.item;
|
||||||
|
// 获取该节点的所有相关边
|
||||||
|
const edges = node.getEdges();
|
||||||
|
// 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果
|
||||||
|
edges.forEach((edge: any) => {
|
||||||
|
edge.toFront();
|
||||||
|
edge.getSource().toFront();
|
||||||
|
edge.getTarget().toFront();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
graph.on('node:mouseleave', (ev: any) => {
|
||||||
|
// 获得图上所有边实例
|
||||||
|
const edges = graph.getEdges();
|
||||||
|
// 遍历边，将所有边的层级放置在后方，以恢复原样
|
||||||
|
edges.forEach(edge => {
|
||||||
|
edge.toBack();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用内置交互 create-edge，创建边之后触发
|
||||||
|
graph.on('aftercreateedge', e => {
|
||||||
|
console.log(JSON.parse(JSON.stringify(graph.save())));
|
||||||
|
const edges = graph.save().edges as any;
|
||||||
|
// Util.processParallelEdges(edges);
|
||||||
|
graph.getEdges().forEach((edge, i) => {
|
||||||
|
graph.updateItem(edge, {
|
||||||
|
curveOffset: edges[i].curveOffset,
|
||||||
|
curvePosition: edges[i].curvePosition,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**查询全部网元数据列表 */
|
||||||
|
function fnRanderGraph() {
|
||||||
|
if (!graphG6Dom.value) return;
|
||||||
|
const { clientHeight, clientWidth } = graphG6Dom.value;
|
||||||
|
|
||||||
|
const graph = new Graph({
|
||||||
|
container: graphG6Dom.value,
|
||||||
|
width: clientWidth,
|
||||||
|
height: clientHeight,
|
||||||
|
animate: true,
|
||||||
|
fitCenter: true,
|
||||||
|
modes: {
|
||||||
|
// default: [
|
||||||
|
// // 允许拖拽画布、放缩画布、拖拽节点
|
||||||
|
// 'drag-canvas',
|
||||||
|
// 'zoom-canvas',
|
||||||
|
// 'drag-node',
|
||||||
|
// ],
|
||||||
|
default: [
|
||||||
|
{
|
||||||
|
type: 'click-select',
|
||||||
|
selectEdge: true,
|
||||||
|
},
|
||||||
|
'drag-combo',
|
||||||
|
{
|
||||||
|
type: 'drag-node',
|
||||||
|
onlyChangeComboSize: true,
|
||||||
|
},
|
||||||
|
'drag-canvas',
|
||||||
|
'zoom-canvas',
|
||||||
|
'collapse-expand-combo',
|
||||||
|
{
|
||||||
|
type: 'create-edge',
|
||||||
|
trigger: 'click', // 'click' by default. options: 'drag', 'click'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
edit: [
|
||||||
|
{
|
||||||
|
type: 'create-edge',
|
||||||
|
trigger: 'click', // 'click' by default. options: 'drag', 'click'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
groupByTypes: false,
|
||||||
|
// layout: {
|
||||||
|
// type: 'dagre',
|
||||||
|
// sortByCombo: false,
|
||||||
|
// ranksep: 10,
|
||||||
|
// nodesep: 10,
|
||||||
|
// },
|
||||||
|
// 全局节点 矩形
|
||||||
|
defaultNode: {
|
||||||
|
type: 'rect',
|
||||||
|
size: [80, 40],
|
||||||
|
style: {
|
||||||
|
radius: 8,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 全局边 三次贝塞尔曲线
|
||||||
|
defaultEdge: {
|
||||||
|
type: 'polyline',
|
||||||
|
style: {
|
||||||
|
offset: 20, // 拐弯处距离节点最小距离
|
||||||
|
radius: 4, // 拐弯处的圆角弧度，若不设置则为直角
|
||||||
|
lineWidth: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// 全局框节点 矩形
|
||||||
|
defaultCombo: {
|
||||||
|
type: 'rect', // Combo 类型
|
||||||
|
size: [40, 40],
|
||||||
|
style: {
|
||||||
|
fillOpacity: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
graph.data(graphG6Data);
|
||||||
|
graph.render();
|
||||||
|
|
||||||
|
graphEvent(graph);
|
||||||
|
|
||||||
|
graphG6.value = graph;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**查询网元状态 */
|
||||||
|
async function fnGetState() {
|
||||||
|
for (const node of graphG6Data.nodes) {
|
||||||
|
const ne = node.info;
|
||||||
|
if (ne.neType === 'OMC') continue;
|
||||||
|
const result = await stateNe(ne.neType, ne.neId);
|
||||||
|
if (result.code === RESULT_CODE_SUCCESS) {
|
||||||
|
ne.serverState = result.data;
|
||||||
|
ne.serverState.refreshTime = parseDateToStr(
|
||||||
|
ne.serverState.refreshTime,
|
||||||
|
'HH:mm:ss'
|
||||||
|
);
|
||||||
|
const node = graphG6.value.findById(ne.neName);
|
||||||
|
console.log('查询网元状态', node);
|
||||||
|
graphG6.value.setItemState(node, 'neState', true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**查询全部网元数据列表 */
|
||||||
|
function fnGetList(refresh: boolean = false) {
|
||||||
|
listNe({
|
||||||
|
bandStatus: false,
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (
|
||||||
|
res.code === RESULT_CODE_SUCCESS &&
|
||||||
|
Array.isArray(res.data) &&
|
||||||
|
res.data.length > 0
|
||||||
|
) {
|
||||||
|
let rootNode = 'OMC';
|
||||||
|
const nodes = [];
|
||||||
|
const edges = [];
|
||||||
|
for (const item of res.data) {
|
||||||
|
item.serverState = {};
|
||||||
|
const nodeIndex = nodes.findIndex(v => v.id === item.neName);
|
||||||
|
if (nodeIndex === -1) {
|
||||||
|
// 根网管
|
||||||
|
if (item.neType === 'OMC') {
|
||||||
|
rootNode = item.neName;
|
||||||
|
item.serverState = {
|
||||||
|
neId: item.neId,
|
||||||
|
neName: item.neName,
|
||||||
|
neType: item.neType,
|
||||||
|
expire: '2024-03-31',
|
||||||
|
refreshTime: '10:31:47',
|
||||||
|
sn: '13770707',
|
||||||
|
version: '2.2312.8',
|
||||||
|
};
|
||||||
|
nodes.push({
|
||||||
|
id: item.neName,
|
||||||
|
label: item.neName,
|
||||||
|
info: item,
|
||||||
|
labelCfg: {
|
||||||
|
position: 'bottom',
|
||||||
|
offset: 8,
|
||||||
|
style: {
|
||||||
|
fill: '#fff',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
size: 20,
|
||||||
|
icon: {
|
||||||
|
x: -30,
|
||||||
|
y: -30,
|
||||||
|
// 可更换为其他图片地址
|
||||||
|
img: '/svg/service_db.svg',
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
nodes.push({
|
||||||
|
id: item.neName,
|
||||||
|
label: item.neName,
|
||||||
|
info: item,
|
||||||
|
size: 20,
|
||||||
|
icon: {
|
||||||
|
x: -24,
|
||||||
|
y: -24,
|
||||||
|
img: '/svg/service.svg',
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.neType !== 'OMC') {
|
||||||
|
const edgeIndex = edges.findIndex(v => v.source === item.neName);
|
||||||
|
if (edgeIndex === -1) {
|
||||||
|
edges.push({
|
||||||
|
source: item.neName,
|
||||||
|
target: rootNode,
|
||||||
|
label: `${item.neType}-${rootNode}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
graphG6Data.nodes = nodes;
|
||||||
|
graphG6Data.edges = edges;
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
message.warning({
|
||||||
|
content: t('common.noData'),
|
||||||
|
duration: 2,
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(hasNeList => {
|
||||||
|
if (!hasNeList) return;
|
||||||
|
if (refresh) {
|
||||||
|
graphG6.value.destroy();
|
||||||
|
}
|
||||||
|
fnGetState();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 获取网元列表
|
||||||
|
// fnGetList();
|
||||||
|
fnRanderGraph();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<PageContainer>
|
||||||
|
<a-card
|
||||||
|
:bordered="false"
|
||||||
|
:body-style="{ marginBottom: '24px' }"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<!-- 插槽-卡片左侧侧 -->
|
||||||
|
<template #title>
|
||||||
|
<div class="button-container" style="margin-bottom: -12px">
|
||||||
|
<a-select size="small" value="view">
|
||||||
|
<a-select-option value="view" key="view"> 查看 </a-select-option>
|
||||||
|
<a-select-option value="edit" key="edit"> 编辑 </a-select-option>
|
||||||
|
</a-select>
|
||||||
|
|
||||||
|
<a-button type="primary">
|
||||||
|
<template #icon>
|
||||||
|
<PlusOutlined />
|
||||||
|
</template>
|
||||||
|
{{ t('common.addText') }}
|
||||||
|
</a-button>
|
||||||
|
|
||||||
|
<a-button type="primary" danger ghost>
|
||||||
|
<template #icon>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</template>
|
||||||
|
{{ t('views.neUser.auth.batchDelText') }}
|
||||||
|
</a-button>
|
||||||
|
<a-popconfirm
|
||||||
|
:title="t('views.neUser.sub.loadDataConfirm')"
|
||||||
|
:ok-text="t('common.ok')"
|
||||||
|
:cancel-text="t('common.cancel')"
|
||||||
|
>
|
||||||
|
<a-button type="dashed" danger>
|
||||||
|
<template #icon>
|
||||||
|
<SyncOutlined />
|
||||||
|
</template>
|
||||||
|
{{ t('views.neUser.sub.loadData') }}
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
|
||||||
|
<a-button type="dashed">
|
||||||
|
<template #icon>
|
||||||
|
<ImportOutlined />
|
||||||
|
</template>
|
||||||
|
{{ t('views.neUser.sub.import') }}
|
||||||
|
</a-button>
|
||||||
|
|
||||||
|
<a-popconfirm
|
||||||
|
:title="t('views.neUser.sub.exportConfirm')"
|
||||||
|
ok-text="TXT"
|
||||||
|
ok-type="default"
|
||||||
|
>
|
||||||
|
<a-button type="dashed">
|
||||||
|
<template #icon>
|
||||||
|
<ExportOutlined />
|
||||||
|
</template>
|
||||||
|
{{ t('views.neUser.sub.export') }}
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 插槽-卡片右侧 -->
|
||||||
|
<template #extra>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ t('common.reloadText') }}</template>
|
||||||
|
<a-button type="text" @click.prevent="fnGetList()">
|
||||||
|
<template #icon><ReloadOutlined /></template>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div ref="graphG6Dom" class="chart"></div>
|
||||||
|
</a-card>
|
||||||
|
</PageContainer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 300px);
|
||||||
|
background-color: rgb(43, 47, 51);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user