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

fix: 指标页面数据获取异常接口调整

Browse Source
This commit is contained in:
TsMask
2025-07-18 21:24:58 +08:00
parent a76c595c4c
commit a19427e953
7 changed files with 102 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/perfManage/customData.ts
View File

@@ -8,7 +8,7 @@ import { request } from '@/plugins/http-fetch';
export async function listCustomData(query: Record<string, any>) { export async function listCustomData(query: Record<string, any>) {
// 发起请求 // 发起请求
const result = await request({ const result = await request({
url: `/pm/kpiC/report`, url: `/neData/kpic/data`,
method: 'GET', method: 'GET',
params: query, params: query,
timeout: 60_000, timeout: 60_000,

26
src/api/perfManage/customTarget.ts
View File

@@ -1,30 +1,16 @@
import { request } from '@/plugins/http-fetch'; import { request } from '@/plugins/http-fetch';
/** /**
* 新 查询自定义指标 * 查询自定义指标
* @param query 查询参数 * @param query 查询参数
* @returns object * @returns object
*/ */
export async function listCustom(query?: Record<string, any>) { export async function listCustom(query?: Record<string, any>) {
// 发起请求 return await request({
const result = await request({ url: `/neData/kpic/title/list`,
url: `/pm/kpiC/title/totalList`,
method: 'GET', method: 'GET',
params: query, params: query,
}); });
return result;
}
/**
* 查询自定义指标详细
* @param id 网元ID
* @returns object
*/
export async function getCustom(id: string | number) {
return request({
url: `/pm/kpiC/title/${id}`,
method: 'GET',
});
} }
/** /**
@@ -34,7 +20,7 @@ export async function getCustom(id: string | number) {
*/ */
export function addCustom(data: Record<string, any>) { export function addCustom(data: Record<string, any>) {
return request({ return request({
url: `/pm/kpiC/title`, url: `/neData/kpic/title`,
method: 'POST', method: 'POST',
data: data, data: data,
}); });
@@ -47,7 +33,7 @@ export function addCustom(data: Record<string, any>) {
*/ */
export function updateCustom(data: Record<string, any>) { export function updateCustom(data: Record<string, any>) {
return request({ return request({
url: `/pm/kpiC/title/${data.id}`, url: `/neData/kpic/title`,
method: 'PUT', method: 'PUT',
data: data, data: data,
}); });
@@ -59,7 +45,7 @@ export function updateCustom(data: Record<string, any>) {
*/ */
export async function delCustom(data: Record<string, any>) { export async function delCustom(data: Record<string, any>) {
return request({ return request({
url: `/pm/kpiC/title/${data.id}`, url: `/neData/kpic/title?id=${data.id}`,
method: 'DELETE', method: 'DELETE',
}); });
} }

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

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, nextTick, watch } from 'vue'; import { onMounted, ref, nextTick, watch } from 'vue';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import { GridComponent, GridComponentOption, TooltipComponent } from 'echarts/components'; import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { graphNodeClickID, graphNodeState } from '../../hooks/useTopology'; import { graphNodeClickID, graphNodeState } from '../../hooks/useTopology';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
@@ -13,8 +13,6 @@ const { t } = useI18n();
echarts.use([GridComponent, TooltipComponent, CanvasRenderer]); echarts.use([GridComponent, TooltipComponent, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<GridComponentOption>;
/**图DOM节点实例对象 */ /**图DOM节点实例对象 */
const neResourcesDom = ref<HTMLElement | undefined>(undefined); const neResourcesDom = ref<HTMLElement | undefined>(undefined);
@@ -29,7 +27,7 @@ const resourceData = ref({
neCpu: 1, neCpu: 1,
sysCpu: 1, sysCpu: 1,
sysMem: 1, sysMem: 1,
sysDisk: 1 sysDisk: 1,
}); });
// 获取颜色 // 获取颜色
@@ -47,14 +45,14 @@ function getColorByValue(value: number) {
const optionData: any = { const optionData: any = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{b}: {c}%' formatter: '{b}: {c}%',
}, },
grid: { grid: {
top: '10%', top: '10%',
bottom: '5%', bottom: '5%',
left: '5%', left: '5%',
right: '5%', right: '5%',
containLabel: true containLabel: true,
}, },
series: [ series: [
{ {
@@ -65,27 +63,29 @@ const optionData: any = {
name: t('views.dashboard.overview.resources.neCpu'), name: t('views.dashboard.overview.resources.neCpu'),
color: getColorByValue(resourceData.value.neCpu), color: getColorByValue(resourceData.value.neCpu),
backgroundStyle: { backgroundStyle: {
color: 'rgba(10, 60, 160, 0.1)' color: 'rgba(10, 60, 160, 0.1)',
}, },
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu}%`; return `${t('views.dashboard.overview.resources.neCpu')}\n${
resourceData.value.neCpu
}%`;
}, },
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#fff' color: '#fff',
} },
} },
}, },
outline: { outline: {
show: true, show: true,
borderDistance: 2, borderDistance: 2,
itemStyle: { itemStyle: {
borderColor: '#0a3ca0', borderColor: '#0a3ca0',
borderWidth: 1 borderWidth: 1,
} },
} },
}, },
{ {
type: 'liquidFill', type: 'liquidFill',
@@ -95,27 +95,29 @@ const optionData: any = {
name: t('views.dashboard.overview.resources.sysCpu'), name: t('views.dashboard.overview.resources.sysCpu'),
color: getColorByValue(resourceData.value.sysCpu), color: getColorByValue(resourceData.value.sysCpu),
backgroundStyle: { backgroundStyle: {
color: 'rgba(10, 60, 160, 0.1)' color: 'rgba(10, 60, 160, 0.1)',
}, },
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu}%`; return `${t('views.dashboard.overview.resources.sysCpu')}\n${
resourceData.value.sysCpu
}%`;
}, },
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#fff' color: '#fff',
} },
} },
}, },
outline: { outline: {
show: true, show: true,
borderDistance: 2, borderDistance: 2,
itemStyle: { itemStyle: {
borderColor: '#0a3ca0', borderColor: '#0a3ca0',
borderWidth: 1 borderWidth: 1,
} },
} },
}, },
{ {
type: 'liquidFill', type: 'liquidFill',
@@ -125,27 +127,29 @@ const optionData: any = {
name: t('views.dashboard.overview.resources.sysMem'), name: t('views.dashboard.overview.resources.sysMem'),
color: getColorByValue(resourceData.value.sysMem), color: getColorByValue(resourceData.value.sysMem),
backgroundStyle: { backgroundStyle: {
color: 'rgba(10, 60, 160, 0.1)' color: 'rgba(10, 60, 160, 0.1)',
}, },
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem}%`; return `${t('views.dashboard.overview.resources.sysMem')}\n${
resourceData.value.sysMem
}%`;
}, },
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#fff' color: '#fff',
} },
} },
}, },
outline: { outline: {
show: true, show: true,
borderDistance: 2, borderDistance: 2,
itemStyle: { itemStyle: {
borderColor: '#0a3ca0', borderColor: '#0a3ca0',
borderWidth: 1 borderWidth: 1,
} },
} },
}, },
{ {
type: 'liquidFill', type: 'liquidFill',
@@ -155,36 +159,35 @@ const optionData: any = {
name: t('views.dashboard.overview.resources.sysDisk'), name: t('views.dashboard.overview.resources.sysDisk'),
color: getColorByValue(resourceData.value.sysDisk), color: getColorByValue(resourceData.value.sysDisk),
backgroundStyle: { backgroundStyle: {
color: 'rgba(10, 60, 160, 0.1)' color: 'rgba(10, 60, 160, 0.1)',
}, },
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk}%`; return `${t('views.dashboard.overview.resources.sysDisk')}\n${
resourceData.value.sysDisk
}%`;
}, },
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
color: '#fff' color: '#fff',
} },
} },
}, },
outline: { outline: {
show: true, show: true,
borderDistance: 2, borderDistance: 2,
itemStyle: { itemStyle: {
borderColor: '#0a3ca0', borderColor: '#0a3ca0',
borderWidth: 1 borderWidth: 1,
} },
} },
} },
] ],
}; };
/**图数据渲染 */ /**图数据渲染 */
function handleRanderChart( function handleRanderChart(container: HTMLElement | undefined, option: any) {
container: HTMLElement | undefined,
option: any
) {
if (!container) return; if (!container) return;
neResourcesChart.value = markRaw(echarts.init(container)); neResourcesChart.value = markRaw(echarts.init(container));
option && neResourcesChart.value.setOption(option); option && neResourcesChart.value.setOption(option);
@@ -235,7 +238,10 @@ function fnChangeData(data: any[], itemID: string) {
} }
let sysDiskUsage = 0; let sysDiskUsage = 0;
if (info.neStateMap[neID].disk && Array.isArray(info.neStateMap[neID].disk.partitionInfo)) { if (
info.neStateMap[neID].disk &&
Array.isArray(info.neStateMap[neID].disk.partitionInfo)
) {
let disks: any[] = info.neStateMap[neID].disk.partitionInfo; let disks: any[] = info.neStateMap[neID].disk.partitionInfo;
disks = disks.sort((a, b) => +b.used - +a.used); disks = disks.sort((a, b) => +b.used - +a.used);
if (disks.length > 0) { if (disks.length > 0) {
@@ -248,7 +254,7 @@ function fnChangeData(data: any[], itemID: string) {
neCpu: nfCpuUsage, neCpu: nfCpuUsage,
sysCpu: sysCpuUsage, sysCpu: sysCpuUsage,
sysMem: sysMemUsage, sysMem: sysMemUsage,
sysDisk: sysDiskUsage sysDisk: sysDiskUsage,
}; };
// 更新图表数据 // 更新图表数据
@@ -260,10 +266,12 @@ function fnChangeData(data: any[], itemID: string) {
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.neCpu')}\n${resourceData.value.neCpu}%`; return `${t('views.dashboard.overview.resources.neCpu')}\n${
} resourceData.value.neCpu
} }%`;
} },
},
},
}, },
{ {
data: [resourceData.value.sysCpu / 100], data: [resourceData.value.sysCpu / 100],
@@ -271,10 +279,12 @@ function fnChangeData(data: any[], itemID: string) {
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.sysCpu')}\n${resourceData.value.sysCpu}%`; return `${t('views.dashboard.overview.resources.sysCpu')}\n${
} resourceData.value.sysCpu
} }%`;
} },
},
},
}, },
{ {
data: [resourceData.value.sysMem / 100], data: [resourceData.value.sysMem / 100],
@@ -282,10 +292,12 @@ function fnChangeData(data: any[], itemID: string) {
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.sysMem')}\n${resourceData.value.sysMem}%`; return `${t('views.dashboard.overview.resources.sysMem')}\n${
} resourceData.value.sysMem
} }%`;
} },
},
},
}, },
{ {
data: [resourceData.value.sysDisk / 100], data: [resourceData.value.sysDisk / 100],
@@ -293,12 +305,14 @@ function fnChangeData(data: any[], itemID: string) {
label: { label: {
normal: { normal: {
formatter: () => { formatter: () => {
return `${t('views.dashboard.overview.resources.sysDisk')}\n${resourceData.value.sysDisk}%`; return `${t('views.dashboard.overview.resources.sysDisk')}\n${
} resourceData.value.sysDisk
} }%`;
} },
} },
] },
},
],
}); });
} }

5
src/views/dashboard/overview2/components/UPFFlow/index.vue
View File

@@ -208,10 +208,9 @@ function fnGetInitData() {
listKPIData({ listKPIData({
neType: 'UPF', neType: 'UPF',
neId: upfWhoId.value, neId: '001',
startTime: nowDate - 5 * 60 * 1000, beginTime: nowDate - 5 * 60 * 1000,
endTime: nowDate, endTime: nowDate,
interval: 5, // 5秒 interval: 5, // 5秒
sortField: 'timeGroup', sortField: 'timeGroup',
sortOrder: 'asc', sortOrder: 'asc',

5
src/views/perfManage/customTarget/index.vue
View File

@@ -92,8 +92,8 @@ let tableColumns: ColumnsType = [
}, },
{ {
title: t('views.perfManage.customTarget.expression'), title: t('views.perfManage.customTarget.expression'),
dataIndex: 'exprAlias', dataIndex: 'expression',
align: 'center', align: 'left',
}, },
{ {
title: t('views.perfManage.customTarget.description'), title: t('views.perfManage.customTarget.description'),
@@ -354,7 +354,6 @@ function fnModalVisibleByEdit(row?: any, id?: any) {
} else { } else {
fnSelectPerformanceInit(row.neType); fnSelectPerformanceInit(row.neType);
modalState.from = Object.assign(modalState.from, row); modalState.from = Object.assign(modalState.from, row);
modalState.from.expression = modalState.from.exprAlias;
modalState.title = t('views.perfManage.customTarget.editCustom'); modalState.title = t('views.perfManage.customTarget.editCustom');
modalState.openByEdit = true; modalState.openByEdit = true;
} }

21
src/views/perfManage/kpiCReport/index.vue
View File

@@ -166,13 +166,14 @@ let queryParams: any = reactive({
/**网元标识 */ /**网元标识 */
neId: '', neId: '',
/**开始时间 */ /**开始时间 */
startTime: '', beginTime: '',
/**结束时间 */ /**结束时间 */
endTime: '', endTime: '',
/**排序字段 */ /**排序字段 */
sortField: 'created_at', sortField: 'timeGroup',
/**排序方式 */ /**排序方式 */
sortOrder: 'desc', sortOrder: 'desc',
interval: 60,
}); });
/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */ /**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
@@ -335,7 +336,7 @@ function fnGetListTitle() {
if (!state.neType[0]) return false; if (!state.neType[0]) return false;
// 获取表头文字 // 获取表头文字
listCustom({ neType: state.neType[0], status: '1' }) listCustom({ neType: state.neType[0], status: '1', pageNum: 1, pageSize: 50 })
.then(res => { .then(res => {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
if (res.data.rows.length === 0) { if (res.data.rows.length === 0) {
@@ -409,7 +410,7 @@ function fnGetList() {
tableState.loading = true; tableState.loading = true;
queryParams.neType = state.neType[0]; queryParams.neType = state.neType[0];
queryParams.neId = state.neType[1]; queryParams.neId = state.neType[1];
queryParams.startTime = queryRangePicker.value[0]; queryParams.beginTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1]; queryParams.endTime = queryRangePicker.value[1];
listCustomData(toRaw(queryParams)) listCustomData(toRaw(queryParams))
.then(res => { .then(res => {
@@ -639,7 +640,7 @@ function fnRanderChartData() {
for (const key of keys) { for (const key of keys) {
if (y.key === key) { if (y.key === key) {
y.data.push(+item[key]); y.data.push(+item[key]);
chartDataXAxisData.push(item['timeGroup']); chartDataXAxisData.push(parseDateToStr(item['timeGroup']));
} }
} }
} }
@@ -749,7 +750,7 @@ function wsMessage(res: Record<string, any>) {
// x轴 // x轴
if (key === 'timeGroup') { if (key === 'timeGroup') {
// chartDataXAxisData.shift(); // chartDataXAxisData.shift();
chartDataXAxisData.push(v); chartDataXAxisData.push(parseDateToStr(v));
continue; continue;
} }
// y轴 // y轴
@@ -879,7 +880,7 @@ watch(
onMounted(() => { onMounted(() => {
// 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF // 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
// 获取网元网元列表 // 获取网元网元列表
listCustom({ status: '1' }).then((res: any) => { listCustom({ status: '1', pageNum: 1, pageSize: 200 }).then((res: any) => {
if (res.code === RESULT_CODE_SUCCESS) { if (res.code === RESULT_CODE_SUCCESS) {
if (!res.data.rows.length) { if (!res.data.rows.length) {
message.warning({ message.warning({
@@ -925,9 +926,9 @@ onMounted(() => {
const now = new Date(); const now = new Date();
now.setMinutes(0, 0, 0); now.setMinutes(0, 0, 0);
// 设置起始时间为整点前一小时 // 设置起始时间为整点前一小时
const startTime = new Date(now); const beginTime = new Date(now);
startTime.setHours(now.getHours() - 1); beginTime.setHours(now.getHours() - 1);
queryRangePicker.value[0] = `${startTime.getTime()}`; queryRangePicker.value[0] = `${beginTime.getTime()}`;
// 设置结束时间为整点 // 设置结束时间为整点
const endTime = new Date(now); const endTime = new Date(now);
endTime.setMinutes(59, 59, 59); endTime.setMinutes(59, 59, 59);

4
src/views/perfManage/overview/index.vue
View File

@@ -213,14 +213,14 @@ async function fetchHistoryData(neId: string) {
try { try {
// 计算30分钟前的时间 // 计算30分钟前的时间
const endTime = Date.now() const endTime = Date.now()
const startTime = endTime - (30 * 60 * 1000) // 30分钟前 const beginTime = endTime - (30 * 60 * 1000) // 30分钟前
// 构建查询参数，与黄金指标界面保持一致 // 构建查询参数，与黄金指标界面保持一致
const params = { const params = {
neType: 'IMS', neType: 'IMS',
neId: neId, neId: neId,
interval: 60, // 1分钟颗粒度 interval: 60, // 1分钟颗粒度
startTime: startTime.toString(), beginTime: beginTime.toString(),
endTime: endTime.toString(), endTime: endTime.toString(),
sortField: 'timeGroup', sortField: 'timeGroup',
sortOrder: 'desc', sortOrder: 'desc',