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

ref: 重构获取网元状态信息

Browse Source
This commit is contained in:
TsMask
2025-10-27 15:16:30 +08:00
parent 0b15ff1476
commit 90395e7464
7 changed files with 181 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/views/configManage/neOverview/index.vue
View File

@@ -63,7 +63,7 @@ let tableColumns: ColumnsType = [
align: 'left',
customRender(opt) {
if (opt.value?.refreshTime) {
return parseDateToStr(opt.value?.refreshTime, 'HH:mm:ss');
return parseDateToStr(opt.value?.refreshTime);
}
return '-';
},
@@ -94,11 +94,8 @@ let tableColumns: ColumnsType = [
},
{
title: t('views.index.ipAddress'),
dataIndex: 'serverState',
dataIndex: 'ip',
align: 'left',
customRender(opt) {
return opt.value?.neIP || '-';
},
},
];
@@ -151,10 +148,10 @@ async function fnGetList(reload: boolean = false) {
if (!reload) {
// 选择第一个
if (tableState.data.length > 0) {
const item = tableState.data.find((item: any) => item.status === 1)
const item = tableState.data.find((item: any) => item.status === 1)
if (item) {
const id = item.id;
fnTableSelectedRowKeys([id]);
fnTableSelectedRowKeys([id]);
}
} else {
fnTableSelectedRowKeys(tableState.selectedRowKeys);
@@ -250,8 +247,9 @@ function fnTableSelectedRowKeys(keys: (string | number)[]) {
serverState.value = Object.assign(
{
// cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
// memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
// cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
// memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
neIP: row.ip,
},
neState
);
@@ -315,22 +313,13 @@ onBeforeUnmount(() => {
<a-row :gutter="16">
<a-col :lg="14" :md="16" :xs="24">
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
size="small"
:columns="tableColumns"
:data-source="tableState.data"
:loading="tableState.loading"
:pagination="false"
:scroll="{ x: true }"
:row-selection="{
<a-table class="table" row-key="id" size="small" :columns="tableColumns" :data-source="tableState.data"
:loading="tableState.loading" :pagination="false" :scroll="{ x: true }" :row-selection="{
type: 'radio',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
}">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<DictTag :options="dict.neInfoStatus" :value="record.status" />
@@ -339,24 +328,12 @@ onBeforeUnmount(() => {
</a-table>
</a-col>
<a-col :lg="10" :md="8" :xs="24">
<a-card
:title="t('views.index.runStatus')"
style="margin-bottom: 16px"
size="small"
>
<a-card :title="t('views.index.runStatus')" style="margin-bottom: 16px" size="small">
<div style="width: 100%; min-height: 200px" ref="statusBar"></div>
</a-card>
<a-card
:loading="tableState.loading"
:title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
style="margin-top: 16px"
size="small"
>
<a-descriptions
bordered
:column="1"
:label-style="{ width: '160px' }"
>
<a-card :loading="tableState.loading" :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
style="margin-top: 16px" size="small">
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
<a-descriptions-item :label="t('views.index.hostName')">
{{ serverState.hostname }}
</a-descriptions-item>

37
src/views/dashboard/overview/components/NeResources/index.vue
View File

@@ -247,42 +247,7 @@ function fnChangeData(data: any[], itemID: string) {
// console.log(info.neState.cpu.sysCpuUsage);
// console.log(info.neState.mem);
// console.log(info.neState.disk);
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (info.neState.cpu) {
nfCpuUsage = info.neState.cpu.nfCpuUsage;
const nfCpu = +(info.neState.cpu.nfCpuUsage / 100);
nfCpuUsage = +nfCpu.toFixed(2);
if (nfCpuUsage > 100) {
nfCpuUsage = 100;
}
sysCpuUsage = info.neState.cpu.sysCpuUsage;
let sysCpu = +(info.neState.cpu.sysCpuUsage / 100);
sysCpuUsage = +sysCpu.toFixed(2);
if (sysCpuUsage > 100) {
sysCpuUsage = 100;
}
}
let sysMemUsage = 0;
if (info.neState.mem) {
const men = info.neState.mem.sysMemUsage;
sysMemUsage = +(men / 100).toFixed(2);
if (sysMemUsage > 100) {
sysMemUsage = 100;
}
}
let sysDiskUsage = 0;
if (info.neState.disk && Array.isArray(info.neState.disk.partitionInfo)) {
let disks: any[] = info.neState.disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
const { nfCpuUsage, sysCpuUsage, sysMemUsage, sysDiskUsage } = info.neState
category.value[0].value = sysDiskUsage;
category.value[1].value = sysMemUsage;

3
src/views/dashboard/overview/hooks/useTopology.ts
View File

@@ -74,8 +74,7 @@ export function neStateParse(neType: string, data: Record<string, any>) {
// 更新网元状态
const newNeState = Object.assign(node.neState, data, {
refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
online: !!data.cpu,
refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
});
// 通过 ID 查询节点实例

80
src/views/dashboard/overview2/components/NeResources/index.vue
View File

@@ -71,9 +71,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.neCpu')}\n${
resourceData.value.neCpu
}%`;
return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu
}%`;
},
textStyle: {
fontSize: 12,
@@ -103,9 +102,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysCpu')}\n${
resourceData.value.sysCpu
}%`;
return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu
}%`;
},
textStyle: {
fontSize: 12,
@@ -135,9 +133,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysMem')}\n${
resourceData.value.sysMem
}%`;
return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem
}%`;
},
textStyle: {
fontSize: 12,
@@ -167,9 +164,8 @@ const optionData: any = {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysDisk')}\n${
resourceData.value.sysDisk
}%`;
return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk
}%`;
},
textStyle: {
fontSize: 12,
@@ -213,45 +209,7 @@ function fnChangeData(data: any[], itemID: string) {
let info = data.find((item: any) => item.id === neType);
if (!info || !info.neStateMap[neID]?.online) return;
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (info.neStateMap[neID].cpu) {
nfCpuUsage = info.neStateMap[neID].cpu.nfCpuUsage;
const nfCpu = +(info.neStateMap[neID].cpu.nfCpuUsage / 100);
nfCpuUsage = +nfCpu.toFixed(2);
if (nfCpuUsage > 100) {
nfCpuUsage = 100;
}
sysCpuUsage = info.neStateMap[neID].cpu.sysCpuUsage;
let sysCpu = +(info.neStateMap[neID].cpu.sysCpuUsage / 100);
sysCpuUsage = +sysCpu.toFixed(2);
if (sysCpuUsage > 100) {
sysCpuUsage = 100;
}
}
let sysMemUsage = 0;
if (info.neStateMap[neID].mem) {
const men = info.neStateMap[neID].mem.sysMemUsage;
sysMemUsage = +(men / 100).toFixed(2);
if (sysMemUsage > 100) {
sysMemUsage = 100;
}
}
let sysDiskUsage = 0;
if (
info.neStateMap[neID].disk &&
Array.isArray(info.neStateMap[neID].disk.partitionInfo)
) {
let disks: any[] = info.neStateMap[neID].disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) {
const { total, used } = disks[0];
sysDiskUsage = +((used / total) * 100).toFixed(2);
}
}
const { nfCpuUsage, sysCpuUsage, sysMemUsage, sysDiskUsage } = info.neStateMap[neID]
resourceData.value = {
neCpu: nfCpuUsage,
@@ -269,9 +227,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.neCpu')}\n${
resourceData.value.neCpu
}%`;
return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu
}%`;
},
},
},
@@ -282,9 +239,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysCpu')}\n${
resourceData.value.sysCpu
}%`;
return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu
}%`;
},
},
},
@@ -295,9 +251,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysMem')}\n${
resourceData.value.sysMem
}%`;
return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem
}%`;
},
},
},
@@ -308,9 +263,8 @@ function fnChangeData(data: any[], itemID: string) {
label: {
normal: {
formatter: () => {
return `${t('views.dashboard.overview.resources.sysDisk')}\n${
resourceData.value.sysDisk
}%`;
return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk
}%`;
},
},
},

90
src/views/dashboard/overview2/hooks/useTopology.ts
View File

@@ -38,18 +38,16 @@ export const graphG6 = ref<any>(null);
export const graphNodeClickID = ref<string>('UPF_001');
/**图节点网元信息状态 */
export const graphNodeState = computed(() =>{
return graphState.data.nodes.map((item: any) => ({
export const graphNodeState = computed(() => {
return graphState.data.nodes.map((item: any) => ({
id: item.id,
label: item.label,
neInfo: item.neInfo,
neState: item.neState,
neInfoList:item.neInfoList,
neInfoList: item.neInfoList,
neStateMap: item.neStateMap,
}))
}
);
}));
});
/**图节点网元状态数量 */
export const graphNodeStateNum = computed(() => {
@@ -72,8 +70,12 @@ export const graphNodeStateNum = computed(() => {
export const neStateRequestMap = ref<Map<string, boolean>>(new Map());
/**neStateParse 网元状态 数据解析 */
export function neStateParse(neType: string, data: Record<string, any>,neId: string) {
// console.log('neStateParse',neType, data, neId);
export function neStateParse(
neType: string,
data: Record<string, any>,
neId: string
) {
// console.log('neStateParse',neType, data, neId);
const { combos, edges, nodes } = graphState.data;
@@ -82,25 +84,24 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
if (!node) return;
// 初始化状态映射
if (!node.neStateMap) node.neStateMap = {};
// 初始化状态映射
if (!node.neStateMap) node.neStateMap = {};
// 更新网元状态
const newNeState :any = {
...data, // 先展开data对象
refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
online: !!data.cpu,
neId: neId
const newNeState: any = {
...data, // 先展开data对象
refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
neId: neId,
};
// 如果是001，更新节点状态。neInfo为主要的网元信息
if (node.neInfo && node.neInfo.neId === neId) {
Object.assign(node.neState, newNeState);
}
// 如果是001，更新节点状态。neInfo为主要的网元信息
if (node.neInfo && node.neInfo.neId === neId) {
Object.assign(node.neState, newNeState);
}
//console.log(node.neState)
// 无论是否为主要网元，都更新状态映射
node.neStateMap[neId] = {...newNeState};
// 通过 ID 查询节点实例
//console.log(node.neState)
// 无论是否为主要网元，都更新状态映射
node.neStateMap[neId] = { ...newNeState };
// 通过 ID 查询节点实例
const item = graphG6.value.findById(node.id);
if (item) {
// 检查当前节点下所有网元的状态
@@ -109,32 +110,33 @@ export function neStateParse(neType: string, data: Record<string, any>,neId: str
let stateColor = '#52c41a'; // 默认绿色（所有网元都正常）
if (allStates.some((state: any) => !state.online)) {
// 如果有任何一个网元不正常
stateColor = allStates.every((state: any) => !state.online) ? '#f5222d' : '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
stateColor = allStates.every((state: any) => !state.online)
? '#f5222d'
: '#faad14'; // 红色（全部不正常）或黄色（部分不正常）
}
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== newNeState.neType) {
graphG6.value.updateItem(item, {
label: newNeState.neType,
});
}
// 设置状态
graphG6.value.setItemState(item, 'top-right-dot', stateColor);
} else {
// 更新节点
// 图片类型不能填充
if (node.type && node.type.startsWith('image')) {
// 更新节点
if (node.label !== newNeState.neType) {
graphG6.value.updateItem(item, {
label: newNeState.neType,
style: {
fill: stateColor, // 填充色
stroke: stateColor, // 填充色
},
});
// 设置状态
graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
// 设置状态
graphG6.value.setItemState(item, 'top-right-dot', stateColor);
} else {
// 更新节点
graphG6.value.updateItem(item, {
label: newNeState.neType,
style: {
fill: stateColor, // 填充色
stroke: stateColor, // 填充色
},
});
// 设置状态
graphG6.value.setItemState(item, 'stroke', newNeState.online);
}
}
// 设置边状态

30
src/views/monitor/topologyArchitecture/index.vue
View File

@@ -143,11 +143,10 @@ const graphNodeTooltip = new Tooltip({
"
>
<div><strong>${t('views.monitor.topology.state')}：</strong><span>
${
neState.online
? t('views.monitor.topology.normalcy')
: t('views.monitor.topology.exceptions')
}
${neState.online
? t('views.monitor.topology.normalcy')
: t('views.monitor.topology.exceptions')
}
</span></div>
<div><strong>${t('views.monitor.topology.refreshTime')}：</strong><span>
${neState.refreshTime ?? '--'}
@@ -399,11 +398,10 @@ function wsMessage(res: Record<string, any>) {
const [neType, neId] = requestId.split('_');
const { combos, edges, nodes } = graphState.data;
const node = nodes.find((item: Record<string, any>) => item.id === neType);
console.log(data)
// 更新网元状态
const newNeState = Object.assign(node.neState, data, {
refreshTime: parseDateToStr(data.refreshTime, 'HH:mm:ss'),
online: !!data.cpu,
refreshTime: parseDateToStr(data.refreshTime, 'MM-DD HH:mm:ss'),
});
// 通过 ID 查询节点实例
@@ -505,11 +503,7 @@ onBeforeUnmount(() => {
<template>
<PageContainer>
<a-card
:bordered="false"
:body-style="{ marginBottom: '24px' }"
size="small"
>
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }" size="small">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
@@ -521,12 +515,10 @@ onBeforeUnmount(() => {
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-button
type="default"
size="small"
@click.prevent="fnGraphDataLoad(true)"
>
<template #icon><ReloadOutlined /></template>
<a-button type="default" size="small" @click.prevent="fnGraphDataLoad(true)">
<template #icon>
<ReloadOutlined />
</template>
{{ t('common.reloadText') }}
</a-button>
</template>

278
src/views/ne/neInfo/index.vue
View File

@@ -5,7 +5,6 @@ import {
toRaw,
defineAsyncComponent,
ref,
computed,
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/es';
@@ -272,8 +271,6 @@ function reloadRowInfo(row: Record<string, any>) {
item.status = '0';
}
Object.assign(item.serverState, res.data);
const resouresUsage = parseResouresUsage(item.serverState);
Reflect.set(item, 'resoures', resouresUsage);
}
})
.finally(() => {
@@ -401,23 +398,7 @@ function fnGetList(pageNum?: number) {
}
const { total, rows } = res.data;
tablePagination.total = total;
// 遍历处理资源情况数值
tableState.data = rows.map((item: any) => {
let resouresUsage = {
sysDiskUsage: 0,
sysMemUsage: 0,
sysCpuUsage: 0,
nfCpuUsage: 0,
};
const neState = item.serverState;
if (neState) {
resouresUsage = parseResouresUsage(neState);
} else {
item.serverState = { online: false };
}
Reflect.set(item, 'resoures', resouresUsage);
return item;
});
tableState.data = rows
}
tableState.loading = false;
})
@@ -442,33 +423,29 @@ onMounted(() => {
<template>
<PageContainer>
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<a-card v-show="tableState.seached" :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item :label="t('views.ne.common.neType')" name="neType ">
<a-auto-complete
v-model:value="queryParams.neType"
:options="neListStore.getNeSelectOtions"
allow-clear
:placeholder="t('common.inputPlease')"
/>
<a-auto-complete v-model:value="queryParams.neType" :options="neListStore.getNeSelectOtions" allow-clear
:placeholder="t('common.inputPlease')" />
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
<template #icon>
<SearchOutlined />
</template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
<template #icon>
<ClearOutlined />
</template>
{{ t('common.reset') }}
</a-button>
</a-space>
@@ -482,32 +459,25 @@ onMounted(() => {
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-button
type="primary"
@click.prevent="fnModalVisibleByEdit()"
v-perms:has="['ne:neInfo:add']"
>
<template #icon><PlusOutlined /></template>
<a-button type="primary" @click.prevent="fnModalVisibleByEdit()" v-perms:has="['ne:neInfo:add']">
<template #icon>
<PlusOutlined />
</template>
{{ t('common.addText') }}
</a-button>
<a-button
type="default"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordMore('quickOAM', {})"
v-perms:has="['ne:neInfo:oam']"
>
<template #icon><SettingOutlined /></template>
<a-button type="default" :loading="modalState.confirmLoading" @click.prevent="fnRecordMore('quickOAM', {})"
v-perms:has="['ne:neInfo:oam']">
<template #icon>
<SettingOutlined />
</template>
{{ t('views.ne.neInfo.quickOam.title') }}
</a-button>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordDelete('0')"
v-perms:has="['ne:neInfo:delete']"
>
<template #icon><DeleteOutlined /></template>
<a-button type="default" danger :disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading" @click.prevent="fnRecordDelete('0')"
v-perms:has="['ne:neInfo:delete']">
<template #icon>
<DeleteOutlined />
</template>
{{ t('common.deleteText') }}
</a-button>
</a-space>
@@ -518,30 +488,27 @@ onMounted(() => {
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.searchBarText') }}</template>
<a-switch
v-model:checked="tableState.seached"
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
/>
<a-switch v-model:checked="tableState.seached" :checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')" size="small" />
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
<template #icon>
<ReloadOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click" placement="bottomRight">
<a-button type="text">
<template #icon><ColumnHeightOutlined /></template>
<template #icon>
<ColumnHeightOutlined />
</template>
</a-button>
<template #overlay>
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu :selected-keys="[tableState.size as string]" @click="fnTableSize">
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
@@ -559,22 +526,14 @@ onMounted(() => {
</template>
<!-- 表格列表 -->
<a-table
class="table"
row-key="id"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: tableColumns.length * 120 }"
:row-selection="{
<a-table class="table" row-key="id" :columns="tableColumns" :loading="tableState.loading"
:data-source="tableState.data" :size="tableState.size" :pagination="tablePagination"
:scroll="{ x: tableColumns.length * 120 }" :row-selection="{
type: 'checkbox',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
}">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<DictTag :options="dict.neInfoStatus" :value="record.status" />
@@ -583,49 +542,42 @@ onMounted(() => {
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.editText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByEdit(record)"
v-perms:has="['ne:neInfo:edit']"
>
<template #icon><FormOutlined /></template>
<a-button type="link" @click.prevent="fnModalVisibleByEdit(record)" v-perms:has="['ne:neInfo:edit']">
<template #icon>
<FormOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>
{{ t('views.ne.common.restart') }}
</template>
<a-button
type="link"
@click.prevent="fnRecordMore('restart', record)"
v-perms:has="['ne:neInfo:restart']"
>
<template #icon><UndoOutlined /></template>
<a-button type="link" @click.prevent="fnRecordMore('restart', record)"
v-perms:has="['ne:neInfo:restart']">
<template #icon>
<UndoOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip placement="left">
<template #title>{{ t('common.moreText') }}</template>
<a-dropdown placement="bottomRight" trigger="click">
<a-button type="link">
<template #icon><EllipsisOutlined /> </template>
<template #icon>
<EllipsisOutlined />
</template>
</a-button>
<template #overlay>
<a-menu @click="({ key }:any) => fnRecordMore(key, record)">
<a-menu @click="({ key }: any) => fnRecordMore(key, record)">
<a-menu-item key="log">
<FileTextOutlined />
{{ t('views.ne.common.log') }}
</a-menu-item>
<a-menu-item
key="start"
v-if="hasPermissions(['ne:neInfo:start'])"
>
<a-menu-item key="start" v-if="hasPermissions(['ne:neInfo:start'])">
<ThunderboltOutlined />
{{ t('views.ne.common.start') }}
</a-menu-item>
<a-menu-item
key="stop"
v-if="hasPermissions(['ne:neInfo:stop'])"
>
<a-menu-item key="stop" v-if="hasPermissions(['ne:neInfo:stop'])">
<CloseSquareOutlined />
{{ t('views.ne.common.stop') }}
</a-menu-item>
@@ -633,35 +585,23 @@ onMounted(() => {
<SyncOutlined />
{{ t('views.ne.common.reload') }}
</a-menu-item>
<a-menu-item
key="delete"
v-if="hasPermissions(['ne:neInfo:delete'])"
>
<a-menu-item key="delete" v-if="hasPermissions(['ne:neInfo:delete'])">
<DeleteOutlined />
{{ t('common.deleteText') }}
</a-menu-item>
<a-menu-item
key="oam"
v-if="
!['OMC'].includes(record.neType) ||
hasPermissions(['ne:neInfo:oam'])
"
>
<a-menu-item key="oam" v-if="
!['OMC'].includes(record.neType) ||
hasPermissions(['ne:neInfo:oam'])
">
<FileTextOutlined />
{{ t('views.ne.common.oam') }}
</a-menu-item>
<!-- 配置备份 -->
<a-menu-item
key="backConfExport"
v-if="hasPermissions(['ne:neInfo:export'])"
>
<a-menu-item key="backConfExport" v-if="hasPermissions(['ne:neInfo:export'])">
<ExportOutlined />
{{ t('views.ne.neInfo.backConf.export') }}
</a-menu-item>
<a-menu-item
key="backConfImport"
v-if="hasPermissions(['ne:neInfo:import'])"
>
<a-menu-item key="backConfImport" v-if="hasPermissions(['ne:neInfo:import'])">
<ImportOutlined />
{{ t('views.ne.neInfo.backConf.import') }}
</a-menu-item>
@@ -701,59 +641,39 @@ onMounted(() => {
</a-divider>
<div>
<span>{{ t('views.ne.neInfo.neCpu') }}：</span>
<a-progress
status="normal"
:stroke-color="
record.resoures.nfCpuUsage < 30
? '#52c41a'
: record.resoures.nfCpuUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="record.resoures.nfCpuUsage"
/>
<a-progress status="normal" :stroke-color="record.serverState.nfCpuUsage < 30
? '#52c41a'
: record.serverState.nfCpuUsage > 70
? '#ff4d4f'
: '#1890ff'
" :percent="record.serverState.nfCpuUsage" />
</div>
<div>
<span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
<a-progress
status="normal"
:stroke-color="
record.resoures.sysCpuUsage < 30
? '#52c41a'
: record.resoures.sysCpuUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="record.resoures.sysCpuUsage"
/>
<a-progress status="normal" :stroke-color="record.serverState.sysCpuUsage < 30
? '#52c41a'
: record.serverState.sysCpuUsage > 70
? '#ff4d4f'
: '#1890ff'
" :percent="record.serverState.sysCpuUsage" />
</div>
<div>
<span>{{ t('views.ne.neInfo.sysMem') }}：</span>
<a-progress
status="normal"
:stroke-color="
record.resoures.sysMemUsage < 30
? '#52c41a'
: record.resoures.sysMemUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="record.resoures.sysMemUsage"
/>
<a-progress status="normal" :stroke-color="record.serverState.sysMemUsage < 30
? '#52c41a'
: record.serverState.sysMemUsage > 70
? '#ff4d4f'
: '#1890ff'
" :percent="record.serverState.sysMemUsage" />
</div>
<div>
<span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
<a-progress
status="normal"
:stroke-color="
record.resoures.sysDiskUsage < 30
? '#52c41a'
: record.resoures.sysDiskUsage > 70
? '#ff4d4f'
: '#1890ff'
"
:percent="record.resoures.sysDiskUsage"
/>
<a-progress status="normal" :stroke-color="record.serverState.sysDiskUsage < 30
? '#52c41a'
: record.serverState.sysDiskUsage > 70
? '#ff4d4f'
: '#1890ff'
" :percent="record.serverState.sysDiskUsage" />
</div>
</a-col>
</a-row>
@@ -762,35 +682,19 @@ onMounted(() => {
</a-card>
<!-- 新增框或修改框 -->
<EditModal
v-model:open="modalState.openByEdit"
:edit-id="modalState.editId"
@ok="fnModalEditOk"
@cancel="fnModalEditCancel"
></EditModal>
<EditModal v-model:open="modalState.openByEdit" :edit-id="modalState.editId" @ok="fnModalEditOk"
@cancel="fnModalEditCancel"></EditModal>
<!-- OAM编辑框 -->
<OAMModal
v-model:open="modalState.openByOAM"
:ne-id="modalState.neId"
:ne-type="modalState.neType"
@cancel="fnModalEditCancel"
></OAMModal>
<OAMModal v-model:open="modalState.openByOAM" :ne-id="modalState.neId" :ne-type="modalState.neType"
@cancel="fnModalEditCancel"></OAMModal>
<!-- 配置文件备份框 -->
<BackConfModal
ref="backConf"
v-model:open="modalState.openByBackConf"
:ne-id="modalState.neId"
:ne-type="modalState.neType"
@cancel="fnModalEditCancel"
></BackConfModal>
<BackConfModal ref="backConf" v-model:open="modalState.openByBackConf" :ne-id="modalState.neId"
:ne-type="modalState.neType" @cancel="fnModalEditCancel"></BackConfModal>
<!-- 快速OAM配置框 -->
<QuickOAMModal
v-model:open="modalState.openByQuickOAM"
@cancel="fnModalEditCancel"
></QuickOAMModal>
<QuickOAMModal v-model:open="modalState.openByQuickOAM" @cancel="fnModalEditCancel"></QuickOAMModal>
</PageContainer>
</template>