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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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