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

add realData

Browse Source
This commit is contained in:
lai
2025-04-17 16:01:01 +08:00
parent bfa80e10f5
commit 7e790d90b8
1 changed files with 207 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/views/dashboard/overview/components/mfOverview/DashboardCards.vue
View File

@@ -1,25 +1,207 @@
<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import {
reactive,
onMounted,
onBeforeUnmount,
markRaw,
useTemplateRef, ref
} from 'vue';
import TrendChart from './TrendChart.vue';
import useI18n from '@/hooks/useI18n';
import { listNeInfo } from '@/api/ne/neInfo';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n();
/**10s调度器 */
const interval10s = ref<any>(null);
// 模拟数据
const activeCallsData = ref([10, 20, 30, 40, 30, 80, 100]);
const mosData = ref([40, 50, 60, 70, 80, 30, 70]);
const failedCallsData = ref([10, 10, 30, 20, 50, 40, 30]);
// 新增三个卡片的模拟数据
const networkCpuData = ref([30, 40, 50, 60, 45, 35, 40]);
const systemCpuData = ref([20, 30, 45, 55, 65, 50, 55]);
const systemStorageData = ref([60, 65, 70, 75, 80, 85, 90]);
const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
const networkCpuData = ref([]);
const systemCpuData = ref([]);
const systemStorageData = ref([]);
const systemMemData = ref([]);
// 是否是第一次加载数据
const isFirstLoad = ref(true);
// 更新图表数据的函数
function updateChartData(newValue: number, dataArray: any) {
// 如果是第一次加载，用当前值填充整个数组
if (isFirstLoad.value) {
dataArray.value = Array(7).fill(newValue);
} else {
// 非第一次加载，正常更新数据（移除第一个，添加新值）
const newData = [...dataArray.value];
newData.shift();
newData.push(newValue);
dataArray.value = newData;
}
}
// 当前资源使用率
const currentNfCpuUsage = ref(0);
const currentSysCpuUsage = ref(0);
const currentSysDiskUsage = ref(0);
const currentSysMemUsage = ref(0);
// 上一次的资源使用率
const prevNfCpuUsage = ref(0);
const prevSysCpuUsage = ref(0);
const prevSysDiskUsage = ref(0);
const prevSysMemUsage = ref(0);
// 资源变化百分比
const nfCpuChange = ref(0);
const sysCpuChange = ref(0);
const sysDiskChange = ref(0);
const sysMemChange = ref(0);
/**解析网元状态携带的资源利用率 */
function parseResouresUsage(neState: Record<string, any>) {
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (neState.cpu) {
nfCpuUsage = neState.cpu.nfCpuUsage;
const nfCpu = +(nfCpuUsage / 100);
nfCpuUsage = +nfCpu.toFixed(2);
if (nfCpuUsage > 100) {
nfCpuUsage = 100;
}
sysCpuUsage = neState.cpu.sysCpuUsage;
const sysCpu = +(sysCpuUsage / 100);
sysCpuUsage = +sysCpu.toFixed(2);
if (sysCpuUsage > 100) {
sysCpuUsage = 100;
}
}
let sysMemUsage = 0;
if (neState.mem) {
const men = neState.mem.sysMemUsage;
sysMemUsage = +(men / 100).toFixed(2);
if (sysMemUsage > 100) {
sysMemUsage = 100;
}
}
let sysDiskUsage = 0;
if (neState.disk && Array.isArray(neState.disk.partitionInfo)) {
let disks: any[] = 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);
}
}
return {
sysDiskUsage,
sysMemUsage,
sysCpuUsage,
nfCpuUsage,
};
}
// 计算变化百分比
function calculateChange(current: number, previous: number): number {
if (previous === 0) return 0;
return Number(((current - previous) * 100 / previous).toFixed(1));
}
let tableState: any = [];
function fnGetList() {
listNeInfo({
neType: 'MF',
bandStatus: true,
pageNum: 1,
pageSize: 20,
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows) && res.rows.length > 0) {
// 获取第一个网元的资源使用情况
const item = res.rows[0];
let resouresUsage = {
sysDiskUsage: 0,
sysMemUsage: 0,
sysCpuUsage: 0,
nfCpuUsage: 0,
};
const neState = item.serverState;
if (neState) {
resouresUsage = parseResouresUsage(neState);
}
// 保存上一次的值
prevNfCpuUsage.value = currentNfCpuUsage.value;
prevSysCpuUsage.value = currentSysCpuUsage.value;
prevSysDiskUsage.value = currentSysDiskUsage.value;
prevSysMemUsage.value = currentSysMemUsage.value;
// 更新当前值
currentNfCpuUsage.value = resouresUsage.nfCpuUsage;
currentSysCpuUsage.value = resouresUsage.sysCpuUsage;
currentSysDiskUsage.value = resouresUsage.sysDiskUsage;
currentSysMemUsage.value = resouresUsage.sysMemUsage;
// 计算变化百分比
nfCpuChange.value = calculateChange(currentNfCpuUsage.value, prevNfCpuUsage.value);
sysCpuChange.value = calculateChange(currentSysCpuUsage.value, prevSysCpuUsage.value);
sysDiskChange.value = calculateChange(currentSysDiskUsage.value, prevSysDiskUsage.value);
sysMemChange.value = calculateChange(currentSysMemUsage.value, prevSysMemUsage.value);
// 更新图表数据
updateChartData(currentNfCpuUsage.value, networkCpuData);
updateChartData(currentSysCpuUsage.value, systemCpuData);
updateChartData(currentSysDiskUsage.value, systemStorageData);
updateChartData(currentSysMemUsage.value, systemMemData);
// 第一次加载完成后，设置标志为false
if (isFirstLoad.value) {
isFirstLoad.value = false;
}
}
})
}
onMounted(() => {
// 初始获取数据
fnGetList();
// 设置10秒定时器
interval10s.value = setInterval(() => {
fnGetList();
}, 10000);
});
// 组件销毁前清除定时器
onBeforeUnmount(() => {
if (interval10s.value) {
clearInterval(interval10s.value);
interval10s.value = null;
}
});
</script>
<template>
<a-card>
<div style="font-size:32px; font-weight: bold; color: #000; margin-bottom: 20px; text-align: center;">
<div style="font-size:32px; font-weight: bold; margin-bottom: 20px; text-align: center;">
{{ t('views.dashboard.overview.psapTitle') }}</div>
<div class="row-title">{{ t('views.dashboard.overview.userTitle') }}</div>
@@ -83,6 +265,8 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
<div class="row-title" style="margin-top: 100px;"> {{ t('views.dashboard.overview.sysTitle') }} </div>
<a-row :gutter="[48, 48]">
<a-col :xs="24" :sm="24" :lg="6">
<a-card :bordered="false" class="metric-card">
@@ -93,10 +277,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
</div>
<div class="metric-info">
<div class="metric-value">
40%
<a-icon class="trend-icon up" type="arrow-up" />
{{ currentNfCpuUsage }}%
<a-icon :class="['trend-icon', nfCpuChange >= 0 ? 'up' : 'down']"
:type="nfCpuChange >= 0 ? 'arrow-up' : 'arrow-down'" />
</div>
<div class="metric-change">+5% last 5s</div>
<div class="metric-change">{{ nfCpuChange >= 0 ? '+' : '' }}{{ nfCpuChange }}% last 10s</div>
</div>
</div>
</a-card>
@@ -111,10 +296,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
</div>
<div class="metric-info">
<div class="metric-value">
55%
<a-icon class="trend-icon down" type="arrow-down" />
{{ currentSysCpuUsage }}%
<a-icon :class="['trend-icon', sysCpuChange >= 0 ? 'up' : 'down']"
:type="sysCpuChange >= 0 ? 'arrow-up' : 'arrow-down'" />
</div>
<div class="metric-change">+5% last 5s</div>
<div class="metric-change">{{ sysCpuChange >= 0 ? '+' : '' }}{{ sysCpuChange }}% last 10s</div>
</div>
</div>
</a-card>
@@ -130,10 +316,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
</div>
<div class="metric-info">
<div class="metric-value">
65%
<a-icon class="trend-icon up" type="arrow-up" />
{{ currentSysMemUsage }}%
<a-icon :class="['trend-icon', sysMemChange >= 0 ? 'up' : 'down']"
:type="sysMemChange >= 0 ? 'arrow-up' : 'arrow-down'" />
</div>
<div class="metric-change">+20% last 5s</div>
<div class="metric-change">{{ sysMemChange >= 0 ? '+' : '' }}{{ sysMemChange }}% last 10s</div>
</div>
</div>
</a-card>
@@ -148,10 +335,11 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
</div>
<div class="metric-info">
<div class="metric-value">
90%
<a-icon class="trend-icon up" type="arrow-up" />
{{ currentSysDiskUsage }}%
<a-icon :class="['trend-icon', sysDiskChange >= 0 ? 'up' : 'down']"
:type="sysDiskChange >= 0 ? 'arrow-up' : 'arrow-down'" />
</div>
<div class="metric-change">+5% last 5s</div>
<div class="metric-change">{{ sysDiskChange >= 0 ? '+' : '' }}{{ sysDiskChange }}% last 10s</div>
</div>
</div>
</a-card>
@@ -167,7 +355,6 @@ const systemMemData = ref([20, 35, 40, 45, 30, 45, 65]);
.row-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 16px;
padding-left: 8px;
border-left: 3px solid #1890ff;