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) { if (cfg.info) {
const neInfo: any = cfg.info; const neInfo: any = cfg.info;
const hasNeState = neInfo.serverState.neId; const hasNeState = neInfo.serverState.neId;
group.addShape('circle', { const neStateShape = group.addShape('circle', {
attrs: { attrs: {
x: r - 3, x: r - 3,
y: -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 // 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', 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) { if (cfg.label) {
@@ -1468,9 +1483,6 @@ export function randerGroph(graphG6Dom: HTMLElement | undefined, data: any) {
<div id="hide" style="cursor: pointer; margin-bottom: 2px"> <div id="hide" style="cursor: pointer; margin-bottom: 2px">
2. 隐藏节点 2. 隐藏节点
</div> </div>
<div id="restart" style="cursor: pointer; margin-bottom: 2px">
3. 重启
</div>
</div> </div>
`; `;
} }

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

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