feat:表格改为嵌套显示
This commit is contained in:
zhongzm
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, toRaw, defineAsyncComponent, ref, computed } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { message, Modal } from 'ant-design-vue/es';
|
||||
import { message, Modal, Table } from 'ant-design-vue/es';
|
||||
import { SizeType } from 'ant-design-vue/es/config-provider';
|
||||
import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
|
||||
import { ColumnsType } from 'ant-design-vue/es/table';
|
||||
@@ -93,14 +93,31 @@ let tableState: TabeStateType = reactive({
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
|
||||
/**表格字段列 */
|
||||
let tableColumns: ColumnsType = [
|
||||
/**父表格列配置（网元类型分组） */
|
||||
let parentTableColumns: ColumnsType = [
|
||||
Table.EXPAND_COLUMN,
|
||||
{
|
||||
title: t('views.ne.common.neType'),
|
||||
dataIndex: 'neType',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
width: 700,
|
||||
},
|
||||
// {
|
||||
// title: t('views.ne.neInfo.neCount'),
|
||||
// dataIndex: 'neName',
|
||||
// align: 'left',
|
||||
// width: 150,
|
||||
// },
|
||||
// {
|
||||
// title: t('views.ne.neInfo.summary'),
|
||||
// key: 'summary',
|
||||
// align: 'left',
|
||||
// },
|
||||
];
|
||||
|
||||
/**子表格列配置（具体网元） */
|
||||
let childTableColumns: ColumnsType = [
|
||||
Table.EXPAND_COLUMN,
|
||||
{
|
||||
title: t('views.ne.common.neId'),
|
||||
dataIndex: 'neId',
|
||||
@@ -180,7 +197,9 @@ function fnTableSize({ key }: MenuInfo) {
|
||||
|
||||
/**表格多选 */
|
||||
function fnTableSelectedRowKeys(keys: (string | number)[]) {
|
||||
tableState.selectedRowKeys = keys;
|
||||
// 过滤掉父节点的key，只保留子节点的key
|
||||
const childKeys = keys.filter(key => !String(key).startsWith('parent_'));
|
||||
tableState.selectedRowKeys = childKeys;
|
||||
}
|
||||
|
||||
/**对话框对象信息状态类型 */
|
||||
@@ -237,26 +256,50 @@ function fnModalEditOk(from: Record<string, any>) {
|
||||
// 编辑时局部更新信息
|
||||
stateNeInfo(from.neType, from.neId)
|
||||
.then(res => {
|
||||
// 找到编辑更新的网元
|
||||
const item = tableState.data.find(s => s.id === from.id);
|
||||
if (item && res.code === RESULT_CODE_SUCCESS) {
|
||||
item.neType = from.neType;
|
||||
item.neId = from.neId;
|
||||
item.rmUid = from.rmUid;
|
||||
item.neName = from.neName;
|
||||
item.ip = from.ip;
|
||||
item.port = from.port;
|
||||
// 在树状结构中找到编辑更新的网元
|
||||
let foundItem = null;
|
||||
let parentItem = null;
|
||||
|
||||
for (const parent of tableState.data) {
|
||||
if (parent.childrenData && Array.isArray(parent.childrenData)) {
|
||||
const child = parent.childrenData.find(c => c.id === from.id);
|
||||
if (child) {
|
||||
foundItem = child;
|
||||
parentItem = parent;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (foundItem && res.code === RESULT_CODE_SUCCESS) {
|
||||
// 检查网元类型是否发生变化
|
||||
const oldNeType = foundItem.neType;
|
||||
const newNeType = from.neType;
|
||||
|
||||
// 更新网元信息
|
||||
foundItem.neType = from.neType;
|
||||
foundItem.neId = from.neId;
|
||||
foundItem.rmUid = from.rmUid;
|
||||
foundItem.neName = from.neName;
|
||||
foundItem.ip = from.ip;
|
||||
foundItem.port = from.port;
|
||||
|
||||
if (res.data.online) {
|
||||
item.status = '1';
|
||||
foundItem.status = '1';
|
||||
if (res.data.standby) {
|
||||
item.status = '3';
|
||||
foundItem.status = '3';
|
||||
}
|
||||
} else {
|
||||
item.status = '0';
|
||||
foundItem.status = '0';
|
||||
}
|
||||
Object.assign(foundItem.serverState, res.data);
|
||||
const resouresUsage = parseResouresUsage(foundItem.serverState);
|
||||
Reflect.set(foundItem, 'resoures', resouresUsage);
|
||||
|
||||
// 如果网元类型发生变化，需要重新组织数据结构
|
||||
if (oldNeType !== newNeType) {
|
||||
fnGetList(); // 重新获取数据以重新组织树状结构
|
||||
}
|
||||
Object.assign(item.serverState, res.data);
|
||||
const resouresUsage = parseResouresUsage(item.serverState);
|
||||
Reflect.set(item, 'resoures', resouresUsage);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
@@ -297,14 +340,37 @@ function fnRecordDelete(id: string) {
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('common.operateOk'), 3);
|
||||
// 过滤掉删除的id
|
||||
tableState.data = tableState.data.filter(item => {
|
||||
if (id.indexOf(',') > -1) {
|
||||
return !tableState.selectedRowKeys.includes(item.id);
|
||||
} else {
|
||||
return item.id !== id;
|
||||
// 树状结构中过滤掉删除的id
|
||||
const deletedIds = id.indexOf(',') > -1 ? id.split(',') : [id];
|
||||
|
||||
tableState.data = tableState.data.map(parentItem => {
|
||||
if (parentItem.childrenData && Array.isArray(parentItem.childrenData)) {
|
||||
// 过滤子节点
|
||||
const filteredChildren = parentItem.childrenData.filter(child =>
|
||||
!deletedIds.includes(child.id)
|
||||
);
|
||||
|
||||
// 如果该分组下没有子节点了，移除整个父节点
|
||||
if (filteredChildren.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 更新子节点数量显示和汇总信息
|
||||
const onlineCount = filteredChildren.filter(item => item.status === '1' || item.status === '3').length;
|
||||
const offlineCount = filteredChildren.length - onlineCount;
|
||||
|
||||
return {
|
||||
...parentItem,
|
||||
neName: `${filteredChildren.length} 个网元`,
|
||||
summary: `在线 ${onlineCount} | 离线 ${offlineCount}`,
|
||||
childrenData: filteredChildren
|
||||
};
|
||||
}
|
||||
});
|
||||
return parentItem;
|
||||
}).filter(item => item !== null);
|
||||
|
||||
// 清空选择
|
||||
tableState.selectedRowKeys = [];
|
||||
// 刷新缓存
|
||||
useNeInfoStore().fnRefreshNelist();
|
||||
} else {
|
||||
@@ -364,6 +430,50 @@ function fnRecordMore(type: string | number, row: Record<string, any>) {
|
||||
}
|
||||
}
|
||||
|
||||
/**将扁平数据转换为分组结构 */
|
||||
function transformToNestedTableData(flatData: Record<string, any>[]) {
|
||||
// 按 neType 分组
|
||||
const groupedData = flatData.reduce((groups, item) => {
|
||||
const neType = item.neType;
|
||||
if (!groups[neType]) {
|
||||
groups[neType] = [];
|
||||
}
|
||||
groups[neType].push(item);
|
||||
return groups;
|
||||
}, {} as Record<string, any[]>);
|
||||
|
||||
// 转换为父表格数据结构（只包含父节点）
|
||||
const parentTableData = Object.entries(groupedData).map(([neType, items]) => {
|
||||
// 按 neId 排序子节点
|
||||
const sortedItems = items.sort((a: Record<string, any>, b: Record<string, any>) => a.neId.localeCompare(b.neId));
|
||||
|
||||
// 统计在线/离线数量
|
||||
const onlineCount = sortedItems.filter((item: Record<string, any>) => item.status === '1' || item.status === '3').length;
|
||||
const offlineCount = sortedItems.length - onlineCount;
|
||||
|
||||
// 清理子节点数据，移除可能干扰父表格显示的属性
|
||||
const cleanedChildren = sortedItems.map((item: Record<string, any>) => ({
|
||||
...item,
|
||||
isParent: false
|
||||
}));
|
||||
|
||||
// 创建父节点（分组节点）- 确保这是唯一的父节点数据
|
||||
const parentNode = {
|
||||
id: `parent_${neType}`,
|
||||
neType: neType,
|
||||
neName: `${items.length} 个网元`,
|
||||
summary: `在线 ${onlineCount} | 离线 ${offlineCount}`,
|
||||
childrenData: cleanedChildren, // 重命名避免与ant-design的children属性冲突
|
||||
isParent: true, // 明确标识为父节点
|
||||
};
|
||||
|
||||
return parentNode;
|
||||
});
|
||||
|
||||
// 确保只返回父节点，不包含子节点
|
||||
return parentTableData;
|
||||
}
|
||||
|
||||
/**查询列表, pageNum初始页数 */
|
||||
function fnGetList(pageNum?: number) {
|
||||
if (tableState.loading) return;
|
||||
@@ -380,7 +490,7 @@ function fnGetList(pageNum?: number) {
|
||||
}
|
||||
tablePagination.total = res.total;
|
||||
// 遍历处理资源情况数值
|
||||
tableState.data = res.rows.map(item => {
|
||||
const processedData = res.rows.map(item => {
|
||||
let resouresUsage = {
|
||||
sysDiskUsage: 0,
|
||||
sysMemUsage: 0,
|
||||
@@ -396,6 +506,9 @@ function fnGetList(pageNum?: number) {
|
||||
Reflect.set(item, 'resoures', resouresUsage);
|
||||
return item;
|
||||
});
|
||||
|
||||
// 转换为嵌套表格结构
|
||||
tableState.data = transformToNestedTableData(processedData);
|
||||
}
|
||||
tableState.loading = false;
|
||||
})
|
||||
@@ -570,192 +683,223 @@ onMounted(() => {
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 表格列表 -->
|
||||
<!-- 外层表格：网元类型分组 -->
|
||||
<a-table
|
||||
class="table"
|
||||
class="parent-table"
|
||||
row-key="id"
|
||||
:columns="tableColumns"
|
||||
:columns="parentTableColumns"
|
||||
: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,
|
||||
}"
|
||||
:scroll="{ x: parentTableColumns.length * 120 }"
|
||||
:default-expand-all-rows="false"
|
||||
:expandRowByClick="false"
|
||||
:show-header="true"
|
||||
:childrenColumnName="undefined"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<DictTag :options="dict.neInfoStatus" :value="record.status" />
|
||||
</template>
|
||||
<template v-if="column.key === 'id'">
|
||||
<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>
|
||||
</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>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="left">
|
||||
<template #title>{{ t('common.moreText') }}</template>
|
||||
<a-dropdown placement="bottomRight" trigger="click" v-if="hasAnyBatchPermission">
|
||||
<a-button type="link">
|
||||
<template #icon><EllipsisOutlined /> </template>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="({ key }:any) => fnRecordMore(key, record)">
|
||||
<a-menu-item key="log" v-if="hasPermissions(['ne:neInfo:logs'])">
|
||||
<FileTextOutlined />
|
||||
{{ t('views.ne.common.log') }}
|
||||
</a-menu-item>
|
||||
<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'])">
|
||||
<CloseSquareOutlined />
|
||||
{{ t('views.ne.common.stop') }}
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
key="reload"
|
||||
v-if="
|
||||
!['OMC', 'PCF', 'IMS', 'MME'].includes(record.neType)
|
||||
"
|
||||
>
|
||||
<SyncOutlined />
|
||||
{{ t('views.ne.common.reload') }}
|
||||
</a-menu-item>
|
||||
<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)"
|
||||
>
|
||||
<FileTextOutlined />
|
||||
{{ t('views.ne.common.oam') }}
|
||||
</a-menu-item>
|
||||
<!-- 配置备份 -->
|
||||
<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'])">
|
||||
<ImportOutlined />
|
||||
{{ t('views.ne.neInfo.backConf.import') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
<!-- 父表格只处理汇总列 -->
|
||||
<template v-if="column.key === 'summary'">
|
||||
<span class="text-gray-600">{{ record.summary }}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 父表格展开行：嵌套子表格 -->
|
||||
<template #expandedRowRender="{ record }">
|
||||
<a-row>
|
||||
<a-col :offset="2" :lg="8" :md="8" :xs="8">
|
||||
<a-divider orientation="left">
|
||||
{{ t('views.ne.neInfo.info') }}
|
||||
</a-divider>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neInfo.serviceState') }}：</span>
|
||||
<DictTag :options="dict.neInfoStatus" :value="record.status" />
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neVersion.version') }}：</span>
|
||||
<span>{{ record.serverState.version }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.common.serialNum') }}：</span>
|
||||
<span>{{ record.serverState.sn }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.common.expiryDate') }}：</span>
|
||||
<span>{{ record.serverState.expire }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :offset="2" :lg="8" :md="8" :xs="8">
|
||||
<a-divider orientation="left">
|
||||
{{ t('views.ne.neInfo.resourceInfo') }}
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 子表格：显示具体网元 -->
|
||||
<a-table
|
||||
row-key="id"
|
||||
:columns="childTableColumns"
|
||||
:data-source="record.childrenData"
|
||||
:size="tableState.size"
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:show-header="true"
|
||||
:scroll="{ x: childTableColumns.length * 120 }"
|
||||
:row-selection="{
|
||||
type: 'checkbox',
|
||||
columnWidth: '48px',
|
||||
selectedRowKeys: tableState.selectedRowKeys,
|
||||
onChange: fnTableSelectedRowKeys,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record: childRecord }">
|
||||
<!-- 子表格状态列 -->
|
||||
<template v-if="column.key === 'status'">
|
||||
<DictTag :options="dict.neInfoStatus" :value="childRecord.status" />
|
||||
</template>
|
||||
|
||||
<!-- 子表格操作列 -->
|
||||
<template v-if="column.key === 'id'">
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>{{ t('common.editText') }}</template>
|
||||
<a-button
|
||||
type="link"
|
||||
@click.prevent="fnModalVisibleByEdit(childRecord)"
|
||||
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', childRecord)"
|
||||
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" v-if="hasAnyBatchPermission">
|
||||
<a-button type="link">
|
||||
<template #icon><EllipsisOutlined /> </template>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="({ key }:any) => fnRecordMore(key, childRecord)">
|
||||
<a-menu-item key="log" v-if="hasPermissions(['ne:neInfo:logs'])">
|
||||
<FileTextOutlined />
|
||||
{{ t('views.ne.common.log') }}
|
||||
</a-menu-item>
|
||||
<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'])">
|
||||
<CloseSquareOutlined />
|
||||
{{ t('views.ne.common.stop') }}
|
||||
</a-menu-item>
|
||||
<a-menu-item
|
||||
key="reload"
|
||||
v-if="
|
||||
!['OMC', 'PCF', 'IMS', 'MME'].includes(childRecord.neType)
|
||||
"
|
||||
>
|
||||
<SyncOutlined />
|
||||
{{ t('views.ne.common.reload') }}
|
||||
</a-menu-item>
|
||||
<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(childRecord.neType)"
|
||||
>
|
||||
<FileTextOutlined />
|
||||
{{ t('views.ne.common.oam') }}
|
||||
</a-menu-item>
|
||||
<!-- 配置备份 -->
|
||||
<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'])">
|
||||
<ImportOutlined />
|
||||
{{ t('views.ne.neInfo.backConf.import') }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 子表格展开行：显示详细监控信息 -->
|
||||
<template #expandedRowRender="{ record: childRecord }">
|
||||
<a-row>
|
||||
<a-col :offset="2" :lg="8" :md="8" :xs="8">
|
||||
<a-divider orientation="left">
|
||||
{{ t('views.ne.neInfo.info') }}
|
||||
</a-divider>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neInfo.serviceState') }}：</span>
|
||||
<DictTag :options="dict.neInfoStatus" :value="childRecord.status" />
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neVersion.version') }}：</span>
|
||||
<span>{{ childRecord.serverState?.version || '—' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.common.serialNum') }}：</span>
|
||||
<span>{{ childRecord.serverState?.sn || '—' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.common.expiryDate') }}：</span>
|
||||
<span>{{ childRecord.serverState?.expire || '—' }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :offset="2" :lg="8" :md="8" :xs="8">
|
||||
<a-divider orientation="left">
|
||||
{{ t('views.ne.neInfo.resourceInfo') }}
|
||||
</a-divider>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neInfo.neCpu') }}：</span>
|
||||
<a-progress
|
||||
status="normal"
|
||||
:stroke-color="
|
||||
childRecord.resoures?.nfCpuUsage < 30
|
||||
? '#52c41a'
|
||||
: childRecord.resoures?.nfCpuUsage > 70
|
||||
? '#ff4d4f'
|
||||
: '#1890ff'
|
||||
"
|
||||
:percent="childRecord.resoures?.nfCpuUsage || 0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neInfo.sysCpu') }}：</span>
|
||||
<a-progress
|
||||
status="normal"
|
||||
:stroke-color="
|
||||
childRecord.resoures?.sysCpuUsage < 30
|
||||
? '#52c41a'
|
||||
: childRecord.resoures?.sysCpuUsage > 70
|
||||
? '#ff4d4f'
|
||||
: '#1890ff'
|
||||
"
|
||||
:percent="childRecord.resoures?.sysCpuUsage || 0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neInfo.sysMem') }}：</span>
|
||||
<a-progress
|
||||
status="normal"
|
||||
:stroke-color="
|
||||
childRecord.resoures?.sysMemUsage < 30
|
||||
? '#52c41a'
|
||||
: childRecord.resoures?.sysMemUsage > 70
|
||||
? '#ff4d4f'
|
||||
: '#1890ff'
|
||||
"
|
||||
:percent="childRecord.resoures?.sysMemUsage || 0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{ t('views.ne.neInfo.sysDisk') }}：</span>
|
||||
<a-progress
|
||||
status="normal"
|
||||
:stroke-color="
|
||||
childRecord.resoures?.sysDiskUsage < 30
|
||||
? '#52c41a'
|
||||
: childRecord.resoures?.sysDiskUsage > 70
|
||||
? '#ff4d4f'
|
||||
: '#1890ff'
|
||||
"
|
||||
:percent="childRecord.resoures?.sysDiskUsage || 0"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-table>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
@@ -788,7 +932,14 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table :deep(.ant-pagination) {
|
||||
.parent-table :deep(.ant-pagination) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 简洁的父表格样式 */
|
||||
.parent-table :deep(.ant-table-tbody) {
|
||||
tr[data-row-key*="parent_"] {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user