fix: 指标页面数据获取异常接口调整
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}%`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user