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

feat: 拓扑信息简览

Browse Source
This commit is contained in:
TsMask
2023-12-21 15:41:14 +08:00
parent fa1bb05548
commit eae2dd5d30
2 changed files with 98 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/monitor/topology/graph.ts
View File

@@ -317,7 +317,7 @@ registerNode(
if (cfg.info) {
const neInfo: any = cfg.info;
const hasNeState = neInfo.serverState.neId;
group.addShape('circle', {
const neStateShape = group.addShape('circle', {
attrs: {
x: r - 3,
y: -r + 3,
@@ -329,6 +329,21 @@ registerNode(
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
name: 'ne-state',
});
// 添加动画
neStateShape.animate(
{
// Magnifying and disappearing
r: 5,
opacity: 0.3,
},
{
duration: 1000,
easing: 'easeCubic',
delay: 0,
repeat: true, // repeat
}
);
}
if (cfg.label) {
@@ -1468,9 +1483,6 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏节点
</div>
<div id="restart" style="cursor: pointer; margin-bottom: 2px">
3. 重启
</div>
</div>
`;
}

162
src/views/monitor/topology/index.vue
View File

@@ -169,7 +169,7 @@ onMounted(() => {
size="small"
>
<!-- 插槽-卡片左侧侧 -->
<template #title>
<template #title v-if="false">
<div class="button-container" style="margin-bottom: -12px">
<a-button type="primary" @click.prevent="fnAdd">
<template #icon>
@@ -219,7 +219,7 @@ onMounted(() => {
</div>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<template #extra v-if="false">
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
@@ -230,90 +230,92 @@ onMounted(() => {
<div ref="graphG6Dom" class="chart"></div>
<div
style="
display: flex;
flex-direction: column;
width: 200px;
background: #e6f7ff;
"
>
<div><span>状态：</span><span>正常</span></div>
<div><span>刷新时间：</span><span>18:37:22</span></div>
<div><span>ID：</span><span>neID</span></div>
<div><span>名称：</span><span>neName</span></div>
<div><span>版本：</span><span>2.2312.8</span></div>
<div><span>SN：</span><span>13770707</span></div>
<div><span>有效期：</span><span>2024-03-31</span></div>
</div>
===
<div
style="
display: flex;
flex-direction: column;
width: 140px;
background: #e6f7ff;
"
>
<div id="show" style="cursor: pointer; margin-bottom: 2px">
1. 显示所有隐藏项
<template v-if="false">
<div
style="
display: flex;
flex-direction: column;
width: 200px;
background: #e6f7ff;
"
>
<div><span>状态：</span><span>正常</span></div>
<div><span>刷新时间：</span><span>18:37:22</span></div>
<div><span>ID：</span><span>neID</span></div>
<div><span>名称：</span><span>neName</span></div>
<div><span>版本：</span><span>2.2312.8</span></div>
<div><span>SN：</span><span>13770707</span></div>
<div><span>有效期：</span><span>2024-03-31</span></div>
</div>
<div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
2. 折叠所有集群
===
<div
style="
display: flex;
flex-direction: column;
width: 140px;
background: #e6f7ff;
"
>
<div id="show" style="cursor: pointer; margin-bottom: 2px">
1. 显示所有隐藏项
</div>
<div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
2. 折叠所有集群
</div>
</div>
</div>
===
<div
style="
display: flex;
flex-direction: column;
width: 100px;
background: #e6f7ff;
"
>
<div id="expand" style="cursor: pointer; margin-bottom: 2px">
1. 展开集群
===
<div
style="
display: flex;
flex-direction: column;
width: 100px;
background: #e6f7ff;
"
>
<div id="expand" style="cursor: pointer; margin-bottom: 2px">
1. 展开集群
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏节点
</div>
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏节点
===
<div
style="
display: flex;
flex-direction: column;
width: 160px;
background: #e6f7ff;
"
>
<div id="collapse" style="cursor: pointer; margin-bottom: 2px">
1. 折叠集群
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏节点
</div>
<div id="restart" style="cursor: pointer; margin-bottom: 2px">
3. 重启
</div>
</div>
</div>
===
<div
style="
display: flex;
flex-direction: column;
width: 160px;
background: #e6f7ff;
"
>
<div id="collapse" style="cursor: pointer; margin-bottom: 2px">
1. 折叠集群
===
<div
style="
display: flex;
flex-direction: column;
width: 100px;
background: #e6f7ff;
"
>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
1. 隐藏边
</div>
</div>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏节点
<!-- 组件 -->
<div class="charts">
<ChartGraphG6></ChartGraphG6>
</div>
<div id="restart" style="cursor: pointer; margin-bottom: 2px">
3. 重启
</div>
</div>
===
<div
style="
display: flex;
flex-direction: column;
width: 100px;
background: #e6f7ff;
"
>
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
1. 隐藏边
</div>
</div>
<!-- 组件 -->
<div class="charts">
<ChartGraphG6></ChartGraphG6>
</div>
</template>
</a-card>
</PageContainer>
</template>