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

feat: 拓扑网管信息页面多语言翻译

Browse Source
This commit is contained in:
TsMask
2024-01-05 11:58:08 +08:00
parent 0b6303e544
commit defe8c4755
4 changed files with 82 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,14 +25,18 @@ const graphG6Data = reactive<Record<string, any>>({
/**查询全部网元数据列表 */
function fnRanderData() {
if (!graphG6Dom.value) return;
graphG6.value = randerGroph(graphG6Dom.value, graphG6Data);
graphG6.value = randerGroph(t, graphG6Dom.value, graphG6Data);
}
/**网元状态定时器 */
const stateTimeout = ref<any>(null);
/**查询网元状态 */
async function fnGetState() {
clearTimeout(stateTimeout.value);
for (const node of graphG6Data.nodes) {
const ne = node.info;
if (ne.neType === 'OMC') continue;
// if (ne.neType === 'OMC') continue;
const result = await stateNe(ne.neType, ne.neId);
if (result.code === RESULT_CODE_SUCCESS) {
ne.serverState = result.data;
@@ -40,16 +44,12 @@ async function fnGetState() {
ne.serverState.refreshTime,
'HH:mm:ss'
);
// 修改网元状态颜色
const neShape = graphG6.value.findById(ne.neName);
graphG6.value.setItemState(neShape, 'neState', ne.serverState.online);
}
// 修改网元状态颜色
const neShape = graphG6.value.findById(ne.neName);
graphG6.value.setItemState(
neShape,
'neState',
result.code === RESULT_CODE_SUCCESS
);
}
setTimeout(() => fnGetState(), 30_000);
stateTimeout.value = setTimeout(() => fnGetState(), 30_000);
}
/**查询全部网元数据列表 */
@@ -73,15 +73,6 @@ function fnGetList(refresh: boolean = false) {
// 根网管
if (item.neType === 'OMC') {
rootNode = item.neName;
item.serverState = {
neId: item.neId,
neName: item.neName,
neType: item.neType,
expire: '-',
refreshTime: '-',
sn: '-',
version: '-',
};
nodes.push({
id: item.neName,
label: item.neName,
@@ -134,7 +125,6 @@ function fnGetList(refresh: boolean = false) {
}
graphG6Data.nodes = nodes;
graphG6Data.edges = edges;
console.log(graphG6Data);
return true;
} else {
message.warning({
@@ -157,7 +147,7 @@ function fnGetList(refresh: boolean = false) {
}
onMounted(() => {
// 获取网元列表
// 获取网元列表G
fnGetList();
});
</script>
@@ -170,151 +160,16 @@ onMounted(() => {
size="small"
>
<!-- 插槽-卡片左侧侧 -->
<template #title v-if="false">
<div class="button-container" style="margin-bottom: -12px">
<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 #title> </template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-button type="default" @click.prevent="switchLayout()">
<template #icon><RetweetOutlined /></template>
Switch Layout
{{ t('views.monitor.topology.switchLayout') }}
</a-button>
</template>
<div ref="graphG6Dom" class="chart"></div>
<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
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
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
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
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>
@@ -325,10 +180,4 @@ onMounted(() => {
height: calc(100vh - 300px);
background-color: rgb(43, 47, 51);
}
.charts {
width: 100%;
height: 500px;
background-color: rgb(238, 237, 237);
margin-top: 32px;
}
</style>