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

feat: 添加导出所有学生配置功能，优化提示信息

Browse Source
This commit is contained in:
TsMask
2025-03-08 10:31:54 +08:00
parent 0cb892e7f3
commit 20007f4732
14 changed files with 1067 additions and 1107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
practical_training/api/pt/neConfig.ts
View File

@@ -44,7 +44,7 @@ export function ptContrastAsDefault(params: Record<string, any>) {
* @param student 仅教师 student
* @returns object
*/
export function ptExport(student: string|undefined) {
export function ptExport(student: string | undefined) {
return request({
url: `/pt/neConfigData/export`,
method: 'get',
@@ -54,6 +54,19 @@ export function ptExport(student: string|undefined) {
});
}
/**
* 配置数据导出Excel (仅教师全量)
* @returns object
*/
export function ptExportAll() {
return request({
url: `/pt/neConfigData/export-all`,
method: 'get',
responseType: 'blob',
timeout: 180_000,
});
}
/**
* 网元参数配置信息
* @param params 数据 {neType,paramName}

6
practical_training/i18n/locales/en-US.ts
View File

@@ -514,13 +514,17 @@ export default {
ptDiffRest: 'Restore this version',
ptHistory: 'History',
ptReset: 'Reset To Example',
ptResetTip: 'Confirmed to reset to the sample configuration?',
ptLoad: 'Load Current Configuration',
ptLoadTip: 'Confirm that you want to load the current network element configuration?',
ptExport: "Export Excel",
ptExportTip: "Exporting NE Configuration Data to an Excel file",
ptExportTip: "Confirm that you want to export the network element configuration data to an Excel file?",
ptExportAll: "导出所有学生配置",
ptApplyShow: 'View Student',
ptApply: 'request',
ptApplyNE: 'Application To NE',
ptApplyStu: 'Application To {ne}',
ptApplyStuTip: 'Confirm that you want to initiate a Configure Application to {ne} request to the teacher?',
ptApplyStuRack: 'Return Request',
ptApplyStuNE: 'Application Request',
},

6
practical_training/i18n/locales/zh-CN.ts
View File

@@ -514,13 +514,17 @@ export default {
ptDiffRest: '还原此版本',
ptHistory: '历史记录',
ptReset: '重置为示例',
ptResetTip: '确认要重置为示例配置吗？',
ptLoad: '载入当前网元配置',
ptLoadTip: '确认要载入当前网元配置吗？',
ptExport: "导出Excel",
ptExportTip: "导出网元配置数据到Excel文件中",
ptExportTip: "确认要导出网元配置数据到Excel文件中吗？",
ptExportAll: "导出所有学生配置",
ptApplyShow: '查看学生',
ptApply: '申请',
ptApplyNE: '应用配置到网元',
ptApplyStu: '申请配置应用到 {ne}',
ptApplyStuTip: '确认要向教师发起配置应用到 {ne} 的申请吗？',
ptApplyStuRack: '退回该学生配置',
ptApplyStuNE: '应用该学生配置',
},

41
practical_training/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
View File

@@ -5,9 +5,9 @@ import {
updatePtNeConfigApply,
} from '@/api/pt/neConfigApply';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { hasRoles } from '@/plugins/auth-user';
import { Modal } from 'ant-design-vue/es';
import { message } from 'ant-design-vue/lib';
import { computed, onMounted, reactive } from 'vue';
import { computed, reactive } from 'vue';
/**
* 实训教学函数
@@ -22,6 +22,10 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
});
/**（管理员）保存网元下所有配置为示例配置 */
function ptConfigSave(neType: string) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptLoadTip'),
onOk() {
ptConfigState.saveLoading = true;
ptSaveAsDefault(neType, '001')
.then(res => {
@@ -41,10 +45,16 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
ptConfigState.saveLoading = false;
fnActiveConfigNode('#');
});
},
});
}
/**重置网元下所有配置 */
function ptConfigReset(neType: string) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptResetTip'),
onOk() {
ptConfigState.restLoading = true;
ptResetAsDefault(neType)
.then(res => {
@@ -64,6 +74,8 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
ptConfigState.restLoading = false;
fnActiveConfigNode('#');
});
},
});
}
/**配置下方应用(学生)申请撤回和(管理/教师)应用退回 */
@@ -97,6 +109,13 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
result = stuPtNeConfigApply({ neType, status });
}
if (!result) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptApplyStuTip', {
ne: neType,
}),
onOk() {
ptConfigState.applyLoading = true;
result
.then((res: any) => {
@@ -124,6 +143,8 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
.finally(() => {
ptConfigState.applyLoading = false;
});
},
});
}
const classState = reactive<{
@@ -148,13 +169,6 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
studentOptionsDef: [],
});
// 仅教师加载
if (hasRoles(['teacher'])) {
onMounted(() => {
classStudents(); // 初始学生列表
});
}
/**学生选择搜索 */
function studentChange(v: any) {
if (!v) {
@@ -166,7 +180,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
let timeout: any;
/**学生选择搜索 */
function studentSearch(val: string) {
function studentSearch(neType: string, val: string) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
@@ -175,12 +189,12 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
Object.assign(classState.studentOptions, classState.studentOptionsDef);
return;
}
timeout = setTimeout(() => classStudents(val), 500);
timeout = setTimeout(() => classStudents(neType, val), 500);
}
/**班级学生列表 */
function classStudents(val?: string) {
getPtClassStudents({ userName: val }).then(res => {
function classStudents(neType: string, val?: string) {
getPtClassStudents({ neType, userName: val }).then(res => {
classState.studentOptions = [];
if (!Array.isArray(res.data) || res.data.length <= 0) {
return;
@@ -221,6 +235,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
ptConfigReset,
ptConfigApply,
classState,
classStudents,
studentStatus,
studentSearch,
studentChange,

59
practical_training/views/configManage/configParamTreeTable/index.vue
View File

@@ -1,5 +1,12 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, watch, defineAsyncComponent } from 'vue';
import {
reactive,
ref,
onMounted,
toRaw,
watch,
defineAsyncComponent,
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { message, Modal } from 'ant-design-vue/es';
@@ -18,8 +25,10 @@ import {
getPtNeConfigData,
ptContrastAsDefault,
ptExport,
ptExportAll,
} from '@/api/pt/neConfig';
import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';const neInfoStore = useNeInfoStore();
import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';
const neInfoStore = useNeInfoStore();
import saveAs from 'file-saver';
const { t } = useI18n();
const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
@@ -232,7 +241,8 @@ function fnGetNeConfig() {
treeState.loading = true;
// 获取数据
getAllNeConfig(neType).then(res => {
getAllNeConfig(neType)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const arr = [];
for (const item of res.data) {
@@ -260,6 +270,12 @@ function fnGetNeConfig() {
fnActiveConfigNode(item.key);
}
}
})
.finally(() => {
// 仅教师加载
if (hasRoles(['teacher'])) {
classStudents(neType);
}
});
}
@@ -344,6 +360,7 @@ const {
studentStatus,
studentSearch,
studentChange,
classStudents,
} = usePtOptions({ t, fnActiveConfigNode });
const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
@@ -450,6 +467,35 @@ function fnDataExport() {
});
}
// 数据导出Excel
function fnDataExportAll() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptExportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
ptExportAll()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 2,
});
saveAs(res.data, `students_config_data_${Date.now()}.zip`);
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
})
.finally(() => {
hide();
});
},
});
}
onMounted(() => {
// 获取网元网元列表
neInfoStore.fnNelist().then(res => {
@@ -500,7 +546,7 @@ onMounted(() => {
<a-col :lg="8" :md="12" :xs="24" v-roles:has="['teacher']">
<a-form-item
:label="t('views.configManage.configParamForm.ptApplyShow')"
name="neType "
name="student "
>
<a-select
v-model:value="classState.student"
@@ -512,7 +558,7 @@ onMounted(() => {
:filter-option="false"
:not-found-content="null"
:options="classState.studentOptions"
@search="studentSearch"
@search="(v:any)=> studentSearch(treeState.neType, v)"
@change="studentChange"
>
<template #option="{ value, label, applyStatus }">
@@ -586,6 +632,9 @@ onMounted(() => {
<a-button @click="fnDataExport()" v-roles:has="['teacher']">
{{ t('views.configManage.configParamForm.ptExport') }}
</a-button>
<a-button @click="fnDataExportAll()" v-roles:has="['teacher']">
{{ t('views.configManage.configParamForm.ptExportAll') }}
</a-button>
<!-- 学生 -->
<a-button

1134
practical_training/views/monitor/topologyArchitecture/index.vue
View File

File diff suppressed because it is too large Load Diff

15
src/api/pt/neConfig.ts
View File

@@ -44,7 +44,7 @@ export function ptContrastAsDefault(params: Record<string, any>) {
* @param student 仅教师 student
* @returns object
*/
export function ptExport(student: string|undefined) {
export function ptExport(student: string | undefined) {
return request({
url: `/pt/neConfigData/export`,
method: 'get',
@@ -54,6 +54,19 @@ export function ptExport(student: string|undefined) {
});
}
/**
* 配置数据导出Excel (仅教师全量)
* @returns object
*/
export function ptExportAll() {
return request({
url: `/pt/neConfigData/export-all`,
method: 'get',
responseType: 'blob',
timeout: 180_000,
});
}
/**
* 网元参数配置信息
* @param params 数据 {neType,paramName}

6
src/i18n/locales/en-US.ts
View File

@@ -514,13 +514,17 @@ export default {
ptDiffRest: 'Restore this version',
ptHistory: 'History',
ptReset: 'Reset To Example',
ptResetTip: 'Confirmed to reset to the sample configuration?',
ptLoad: 'Load Current Configuration',
ptLoadTip: 'Confirm that you want to load the current network element configuration?',
ptExport: "Export Excel",
ptExportTip: "Exporting NE Configuration Data to an Excel file",
ptExportTip: "Confirm that you want to export the network element configuration data to an Excel file?",
ptExportAll: "导出所有学生配置",
ptApplyShow: 'View Student',
ptApply: 'request',
ptApplyNE: 'Application To NE',
ptApplyStu: 'Application To {ne}',
ptApplyStuTip: 'Confirm that you want to initiate a Configure Application to {ne} request to the teacher?',
ptApplyStuRack: 'Return Request',
ptApplyStuNE: 'Application Request',
},

6
src/i18n/locales/zh-CN.ts
View File

@@ -514,13 +514,17 @@ export default {
ptDiffRest: '还原此版本',
ptHistory: '历史记录',
ptReset: '重置为示例',
ptResetTip: '确认要重置为示例配置吗？',
ptLoad: '载入当前网元配置',
ptLoadTip: '确认要载入当前网元配置吗？',
ptExport: "导出Excel",
ptExportTip: "导出网元配置数据到Excel文件中",
ptExportTip: "确认要导出网元配置数据到Excel文件中吗？",
ptExportAll: "导出所有学生配置",
ptApplyShow: '查看学生',
ptApply: '申请',
ptApplyNE: '应用配置到网元',
ptApplyStu: '申请配置应用到 {ne}',
ptApplyStuTip: '确认要向教师发起配置应用到 {ne} 的申请吗？',
ptApplyStuRack: '退回该学生配置',
ptApplyStuNE: '应用该学生配置',
},

41
src/views/configManage/configParamTreeTable/hooks/usePtOptions.ts
View File

@@ -5,9 +5,9 @@ import {
updatePtNeConfigApply,
} from '@/api/pt/neConfigApply';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { hasRoles } from '@/plugins/auth-user';
import { Modal } from 'ant-design-vue/es';
import { message } from 'ant-design-vue/lib';
import { computed, onMounted, reactive } from 'vue';
import { computed, reactive } from 'vue';
/**
* 实训教学函数
@@ -22,6 +22,10 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
});
/**（管理员）保存网元下所有配置为示例配置 */
function ptConfigSave(neType: string) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptLoadTip'),
onOk() {
ptConfigState.saveLoading = true;
ptSaveAsDefault(neType, '001')
.then(res => {
@@ -41,10 +45,16 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
ptConfigState.saveLoading = false;
fnActiveConfigNode('#');
});
},
});
}
/**重置网元下所有配置 */
function ptConfigReset(neType: string) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptResetTip'),
onOk() {
ptConfigState.restLoading = true;
ptResetAsDefault(neType)
.then(res => {
@@ -64,6 +74,8 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
ptConfigState.restLoading = false;
fnActiveConfigNode('#');
});
},
});
}
/**配置下方应用(学生)申请撤回和(管理/教师)应用退回 */
@@ -97,6 +109,13 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
result = stuPtNeConfigApply({ neType, status });
}
if (!result) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptApplyStuTip', {
ne: neType,
}),
onOk() {
ptConfigState.applyLoading = true;
result
.then((res: any) => {
@@ -124,6 +143,8 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
.finally(() => {
ptConfigState.applyLoading = false;
});
},
});
}
const classState = reactive<{
@@ -148,13 +169,6 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
studentOptionsDef: [],
});
// 仅教师加载
if (hasRoles(['teacher'])) {
onMounted(() => {
classStudents(); // 初始学生列表
});
}
/**学生选择搜索 */
function studentChange(v: any) {
if (!v) {
@@ -166,7 +180,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
let timeout: any;
/**学生选择搜索 */
function studentSearch(val: string) {
function studentSearch(neType: string, val: string) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
@@ -175,12 +189,12 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
Object.assign(classState.studentOptions, classState.studentOptionsDef);
return;
}
timeout = setTimeout(() => classStudents(val), 500);
timeout = setTimeout(() => classStudents(neType, val), 500);
}
/**班级学生列表 */
function classStudents(val?: string) {
getPtClassStudents({ userName: val }).then(res => {
function classStudents(neType: string, val?: string) {
getPtClassStudents({ neType, userName: val }).then(res => {
classState.studentOptions = [];
if (!Array.isArray(res.data) || res.data.length <= 0) {
return;
@@ -221,6 +235,7 @@ export default function usePtOptions({ t, fnActiveConfigNode }: any) {
ptConfigReset,
ptConfigApply,
classState,
classStudents,
studentStatus,
studentSearch,
studentChange,

59
src/views/configManage/configParamTreeTable/index.vue
View File

@@ -1,5 +1,12 @@
<script setup lang="ts">
import { reactive, ref, onMounted, toRaw, watch, defineAsyncComponent } from 'vue';
import {
reactive,
ref,
onMounted,
toRaw,
watch,
defineAsyncComponent,
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { ProModal } from 'antdv-pro-modal';
import { message, Modal } from 'ant-design-vue/es';
@@ -18,8 +25,10 @@ import {
getPtNeConfigData,
ptContrastAsDefault,
ptExport,
ptExportAll,
} from '@/api/pt/neConfig';
import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';const neInfoStore = useNeInfoStore();
import { isSystemAdmin, hasRoles } from '@/plugins/auth-user';
const neInfoStore = useNeInfoStore();
import saveAs from 'file-saver';
const { t } = useI18n();
const { ruleVerification, smfByUPFIdLoadData, smfByUPFIdOptions } = useOptions({
@@ -232,7 +241,8 @@ function fnGetNeConfig() {
treeState.loading = true;
// 获取数据
getAllNeConfig(neType).then(res => {
getAllNeConfig(neType)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
const arr = [];
for (const item of res.data) {
@@ -260,6 +270,12 @@ function fnGetNeConfig() {
fnActiveConfigNode(item.key);
}
}
})
.finally(() => {
// 仅教师加载
if (hasRoles(['teacher'])) {
classStudents(neType);
}
});
}
@@ -344,6 +360,7 @@ const {
studentStatus,
studentSearch,
studentChange,
classStudents,
} = usePtOptions({ t, fnActiveConfigNode });
const { tablePagination, listState, listEdit, listEditClose, listEditOk } =
@@ -450,6 +467,35 @@ function fnDataExport() {
});
}
// 数据导出Excel
function fnDataExportAll() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.configManage.configParamForm.ptExportTip'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
ptExportAll()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 2,
});
saveAs(res.data, `students_config_data_${Date.now()}.zip`);
} else {
message.error({
content: `${res.msg}`,
duration: 2,
});
}
})
.finally(() => {
hide();
});
},
});
}
onMounted(() => {
// 获取网元网元列表
neInfoStore.fnNelist().then(res => {
@@ -500,7 +546,7 @@ onMounted(() => {
<a-col :lg="8" :md="12" :xs="24" v-roles:has="['teacher']">
<a-form-item
:label="t('views.configManage.configParamForm.ptApplyShow')"
name="neType "
name="student "
>
<a-select
v-model:value="classState.student"
@@ -512,7 +558,7 @@ onMounted(() => {
:filter-option="false"
:not-found-content="null"
:options="classState.studentOptions"
@search="studentSearch"
@search="(v:any)=> studentSearch(treeState.neType, v)"
@change="studentChange"
>
<template #option="{ value, label, applyStatus }">
@@ -586,6 +632,9 @@ onMounted(() => {
<a-button @click="fnDataExport()" v-roles:has="['teacher']">
{{ t('views.configManage.configParamForm.ptExport') }}
</a-button>
<a-button @click="fnDataExportAll()" v-roles:has="['teacher']">
{{ t('views.configManage.configParamForm.ptExportAll') }}
</a-button>
<!-- 学生 -->
<a-button

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

@@ -2,7 +2,14 @@
import { PageContainer } from 'antdv-pro-layout';
import { ColumnsType } from 'ant-design-vue/es/table';
import { message } from 'ant-design-vue/es';
import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
import {
reactive,
ref,
onMounted,
onBeforeUnmount,
markRaw,
useTemplateRef,
} from 'vue';
import useI18n from '@/hooks/useI18n';
import { TooltipComponent } from 'echarts/components';
import { GaugeChart } from 'echarts/charts';
@@ -32,24 +39,12 @@ echarts.use([
]);
/**图DOM节点实例对象 */
const statusBar = ref<HTMLElement | undefined>(undefined);
const statusBar = useTemplateRef<HTMLDivElement>('statusBar');
/**图实例对象 */
const statusBarChart = ref<any>(null);
/**网元状态字典数据 */
let indexColor = ref<DictType[]>([
{ label: 'Normal', value: 'normal', tagType: '', tagClass: '#91cc75' },
{
label: 'Abnormal',
value: 'abnormal',
tagType: '',
tagClass: '#ee6666',
},
]);
/**表格字段列 */
//customRender(){} ----单元格处理
let tableColumns: ColumnsType = [
{
title: t('views.index.object'),
@@ -67,7 +62,9 @@ let tableColumns: ColumnsType = [
dataIndex: 'serverState',
align: 'left',
customRender(opt) {
if (opt.value?.refreshTime) return parseDateToStr(opt.value?.refreshTime);
if (opt.value?.refreshTime) {
return parseDateToStr(opt.value?.refreshTime, 'HH:mm:ss');
}
return '-';
},
},
@@ -104,12 +101,13 @@ let tableColumns: ColumnsType = [
},
},
];
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
loading: boolean;
/**记录数据 */
data: object[];
data: Record<string, any>[];
/**勾选记录 */
selectedRowKeys: (string | number)[];
};
@@ -121,66 +119,63 @@ let tableState: TabeStateType = reactive({
selectedRowKeys: [],
});
/**表格状态 */
let nfInfo: any = reactive({
obj: 'OMC',
version: appStore.version,
status: t('views.index.normal'),
outTimeDate: '',
serialNum: appStore.serialNum,
});
/**表格状态类型 */
type nfStateType = {
/**主机名 */
hostName: string;
/**操作系统信息 */
osInfo: string;
/**IP地址 */
ipAddress: string;
/**版本 */
version: string;
/**CPU利用率 */
cpuUse: string;
/**内存使用 */
memoryUse: string;
/**用户容量 */
capability: number;
/**序列号 */
serialNum: string;
/**许可证到期日期 */
/* selectedRowKeys: (string | number)[];*/
expiryDate: string;
};
/**网元详细信息 */
let pronInfo: nfStateType = reactive({
hostName: '5gc',
osInfo: 'Linux 5gc 4.15.0-112-generic 2020 x86_64 GNU/Linux',
ipAddress: '-',
version: '-',
cpuUse: '-',
memoryUse: '-',
capability: 0,
serialNum: '-',
expiryDate: '-',
});
/**状态 */
let serverState: any = ref({});
/**查询网元状态列表 */
function fnGetList(one: boolean) {
if (tableState.loading) return;
one && (tableState.loading = true);
listAllNeInfo({ bandStatus: true }).then(res => {
async function fnGetList(reload: boolean = false) {
tableState.loading = !reload;
try {
const res = await listAllNeInfo({ bandStatus: true });
tableState.data = res.data;
} catch (error) {
console.error(error);
tableState.data = [];
}
tableState.loading = false;
if (tableState.data.length == 0) {
return;
}
var rightNum = 0;
var errorNum = 0;
res.data.forEach((item: any) => {
if (item.serverState.online) {
for (const v of tableState.data) {
if (v?.serverState?.online) {
rightNum++;
} else {
errorNum++;
}
}
// 初始
if (!reload) {
// 选择第一个
if (tableState.data.length > 0) {
const id = tableState.data[0].id;
fnTableSelectedRowKeys([id]);
} else {
fnTableSelectedRowKeys(tableState.selectedRowKeys);
}
if (statusBar.value) {
fnDesign(statusBar.value, rightNum, errorNum);
}
} else {
statusBarChart.value.setOption({
series: [
{
data: [
{ value: rightNum, name: t('views.index.normal') },
{ value: errorNum, name: t('views.index.abnormal') },
],
},
],
});
}
}
function fnDesign(container: HTMLElement, rightNum: number, errorNum: number) {
/// 图表数据
const optionData: any = {
title: {
text: '',
@@ -194,10 +189,10 @@ function fnGetList(one: boolean) {
orient: 'vertical',
left: 'left',
},
color: indexColor.value.map(item => item.tagClass),
color: dict.indexStatus.map(item => item.tagClass),
series: [
{
name: t('views.index.realNeStatus'),
name: t('views.index.runStatus'),
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
@@ -205,30 +200,11 @@ function fnGetList(one: boolean) {
{ value: rightNum, name: t('views.index.normal') },
{ value: errorNum, name: t('views.index.abnormal') },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
label: {},
},
],
};
fnDesign(statusBar.value, optionData);
});
}
function fnDesign(container: HTMLElement | undefined, option: any) {
if (!container) return;
if (!statusBarChart.value) {
statusBarChart.value = markRaw(echarts.init(container, 'light'));
}
option && statusBarChart.value.setOption(option);
statusBarChart.value.setOption(optionData);
// 创建 ResizeObserver 实例
var observer = new ResizeObserver(entries => {
@@ -240,66 +216,43 @@ function fnDesign(container: HTMLElement | undefined, option: any) {
observer.observe(container);
}
/**抽屉 网元详细信息 */
const open = ref(false);
const closeDrawer = () => {
open.value = false;
};
/**抽屉 网元详细信息 */
/**监听表格行事件*/
function rowClick(record: any, index: any) {
return {
onClick: (event: any) => {
let pronData = JSON.parse(JSON.stringify(record.serverState));
if (!pronData.online) {
/**表格多选 */
function fnTableSelectedRowKeys(keys: (string | number)[]) {
if (keys.length <= 0) return;
const id = keys[0];
const row: any = tableState.data.find((item: any) => item.id === id);
if (!row) {
message.error(t('views.index.neStatus'), 2);
return false;
} else {
const totalMemInKB = pronData.mem?.totalMem;
const nfUsedMemInKB = pronData.mem?.nfUsedMem;
const sysMemUsageInKB = pronData.mem?.sysMemUsage;
// 将KB转换为MB
const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
const sysMemUsageInMB =
Math.round((sysMemUsageInKB / 1024) * 100) / 100;
//渲染详细信息
pronInfo = {
hostName: pronData.hostname,
osInfo: pronData.os,
ipAddress: pronData.neIP,
version: pronData.version,
cpuUse:
pronData.neName +
':' +
pronData.cpu?.nfCpuUsage / 100 +
'%; ' +
'SYS:' +
pronData.cpu?.sysCpuUsage / 100 +
'%',
memoryUse:
'Total:' +
totalMemInMB +
'MB; ' +
pronData.name +
':' +
nfUsedMemInMB +
'MB; SYS:' +
sysMemUsageInMB +
'MB',
capability: pronData.capability,
serialNum: pronData.sn,
expiryDate: pronData.expire,
};
return;
}
open.value = true;
const neState = row.serverState;
if (!neState?.online) {
message.error(t('views.index.neStatus'), 2);
return;
}
tableState.selectedRowKeys = keys;
// Mem 将KB转换为MB
// const totalMemInKB = neState.mem?.totalMem;
// const nfUsedMemInKB = neState.mem?.nfUsedMem;
// const sysMemUsageInKB = neState.mem?.sysMemUsage;
// const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100;
// const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100;
// const sysMemUsageInMB = Math.round((sysMemUsageInKB / 1024) * 100) / 100;
// CPU
// const nfCpu = neState.cpu?.nfCpuUsage;
// const sysCpu = neState.cpu?.sysCpuUsage;
// const nfCpuP = Math.round(nfCpu) / 100;
// const sysCpuP = Math.round(sysCpu) / 100;
serverState.value = Object.assign(
{
// cpuUse: `NE:${nfCpuP}%; SYS:${sysCpuP}%`,
// memoryUse: `Total: ${totalMemInMB}MB; NE: ${nfUsedMemInMB}MB; SYS: ${sysMemUsageInMB}MB`,
},
};
neState
);
}
let timer: any;
/**
* 国际化翻译转换
@@ -312,63 +265,50 @@ function fnLocale() {
appStore.setTitle(title);
}
/**字典数据 */
let dict: {
/**网元信息状态 */
neInfoStatus: DictType[];
/**主页状态 */
indexStatus: DictType[];
} = reactive({
neInfoStatus: [],
indexStatus: [],
});
let timer: any;
let timerFlag: boolean = false;
onMounted(() => {
getDict('index_status')
.then(res => {
if (res.length > 0) {
indexColor.value = res;
// 初始字典数据
Promise.allSettled([getDict('ne_info_status'), getDict('index_status')])
.then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.neInfoStatus = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.indexStatus = resArr[1].value;
}
})
.finally(() => {
.finally(async () => {
fnLocale();
await fnGetList(false);
timer = setInterval(() => {
if (timerFlag) return;
fnGetList(true);
timer = setInterval(() => fnGetList(false), 10000); // 每隔10秒执行一次
}, 10_000); // 每隔10秒执行一次
});
});
// 在组件卸载之前清除定时器
onBeforeUnmount(() => {
clearInterval(timer);
timer = null;
timerFlag = true;
});
</script>
<template>
<PageContainer :breadcrumb="{}">
<div>
<a-drawer :open="open" @close="closeDrawer" :width="700">
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
<a-descriptions-item :label="t('views.index.hostName')">{{
pronInfo.hostName
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.osInfo')">{{
pronInfo.osInfo
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.ipAddress')">{{
pronInfo.ipAddress
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.version')">{{
pronInfo.version
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.capability')">{{
pronInfo.capability
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.cpuUse')">{{
pronInfo.cpuUse
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.memoryUse')">{{
pronInfo.memoryUse
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.serialNum')">{{
pronInfo.serialNum
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.expiryDate')">{{
pronInfo.expiryDate
}}</a-descriptions-item>
</a-descriptions>
</a-drawer>
</div>
<a-row :gutter="16">
<a-col :lg="14" :md="16" :xs="24">
<!-- 表格列表 -->
@@ -377,20 +317,20 @@ onBeforeUnmount(() => {
row-key="id"
size="small"
:columns="tableColumns"
:loading="tableState.loading"
:data-source="tableState.data"
:loading="tableState.loading"
:pagination="false"
:scroll="{ x: true }"
:customRow="rowClick"
:row-selection="{
type: 'radio',
columnWidth: '48px',
selectedRowKeys: tableState.selectedRowKeys,
onChange: fnTableSelectedRowKeys,
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<div v-if="record.serverState.online">
<a-tag color="blue">{{ t('views.index.normal') }}</a-tag>
</div>
<div v-else>
<a-tag color="pink">{{ t('views.index.abnormal') }}</a-tag>
</div>
<DictTag :options="dict.neInfoStatus" :value="record.status" />
</template>
</template>
</a-table>
@@ -404,7 +344,8 @@ onBeforeUnmount(() => {
<div style="width: 100%; min-height: 200px" ref="statusBar"></div>
</a-card>
<a-card
:title="t('views.index.mark')"
:loading="tableState.loading"
:title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
style="margin-top: 16px"
size="small"
>
@@ -413,25 +354,33 @@ onBeforeUnmount(() => {
:column="1"
:label-style="{ width: '160px' }"
>
<a-descriptions-item :label="t('views.index.object')">{{
nfInfo.obj
}}</a-descriptions-item>
<template v-if="nfInfo.obj === 'OMC'">
<a-descriptions-item :label="t('views.index.versionNum')">{{
nfInfo.version
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.systemStatus')">{{
nfInfo.status
}}</a-descriptions-item>
</template>
<template v-else>
<a-descriptions-item :label="t('views.index.serialNum')">{{
nfInfo.serialNum
}}</a-descriptions-item>
<a-descriptions-item :label="t('views.index.expiryDate')">{{
nfInfo.outTimeDate
}}</a-descriptions-item>
</template>
<a-descriptions-item :label="t('views.index.hostName')">
{{ serverState.hostname }}
</a-descriptions-item>
<a-descriptions-item :label="t('views.index.osInfo')">
{{ serverState.os }}
</a-descriptions-item>
<a-descriptions-item :label="t('views.index.ipAddress')">
{{ serverState.neIP }}
</a-descriptions-item>
<a-descriptions-item :label="t('views.index.version')">
{{ serverState.version }}
</a-descriptions-item>
<a-descriptions-item :label="t('views.index.capability')">
{{ serverState.capability }}
</a-descriptions-item>
<!-- <a-descriptions-item :label="t('views.index.cpuUse')">
{{ serverState.cpuUse }}
</a-descriptions-item>
<a-descriptions-item :label="t('views.index.memoryUse')">
{{ serverState.memoryUse }}
</a-descriptions-item> -->
<a-descriptions-item :label="t('views.index.serialNum')">
{{ serverState.sn }}
</a-descriptions-item>
<a-descriptions-item :label="t('views.index.expiryDate')">
{{ serverState.expire }}
</a-descriptions-item>
</a-descriptions>
</a-card>
</a-col>

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

@@ -50,6 +50,7 @@ async function fnGetState() {
graphG6.value.setItemState(neShape, 'neState', ne.serverState.online);
}
}
await new Promise(resolve => setTimeout(resolve, 15_000));
}
/**查询全部网元数据列表 */

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

@@ -96,13 +96,13 @@ const graphNodeMenu = new Menu({
${neState.neName ?? '--'}
</h3>
<div id="restart" style="cursor: pointer; margin-bottom: 4px">
> ${t('views.configManage.neManage.restart')}
> ${t('views.ne.common.restart')}
</div>
<div id="stop" style="cursor: pointer; margin-bottom: 4px;">
> ${t('views.configManage.neManage.stop')}
> ${t('views.ne.common.stop')}
</div>
<div id="log" style="cursor: pointer; margin-bottom: 4px;">
> ${t('views.configManage.neManage.log')}
> ${t('views.ne.common.log')}
</div>
</div>
`;