fix: 页面字段/接口调整
This commit is contained in:
@@ -106,6 +106,12 @@ let tableColumns: ColumnsType = [
|
||||
key: 'status',
|
||||
align: 'left',
|
||||
width: 100,
|
||||
customRender: ({ text }) => {
|
||||
if (text === '1') {
|
||||
return 'Active';
|
||||
}
|
||||
return 'Inactive';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('common.operate'),
|
||||
@@ -190,13 +196,14 @@ function fnGetList(pageNum?: number) {
|
||||
queryParams.pageNum = pageNum;
|
||||
}
|
||||
listCustom(toRaw(queryParams)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// 取消勾选
|
||||
if (tableState.selectedRowKeys.length > 0) {
|
||||
tableState.selectedRowKeys = [];
|
||||
}
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.data;
|
||||
const { total, rows } = res.data;
|
||||
tablePagination.total = total;
|
||||
tableState.data = rows;
|
||||
|
||||
if (
|
||||
tablePagination.total <=
|
||||
@@ -247,7 +254,7 @@ let modalState: ModalStateType = reactive({
|
||||
neType: 'UDM',
|
||||
title: '',
|
||||
expression: '',
|
||||
status: 'Active',
|
||||
status: '1',
|
||||
unit: '',
|
||||
description: '',
|
||||
},
|
||||
@@ -316,7 +323,7 @@ function fnSelectPerformanceInit(value: any) {
|
||||
if (language === 'zh') language = 'cn';
|
||||
// 获取表头文字
|
||||
getKPITitle(value).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
for (const item of res.data) {
|
||||
const kpiDisplay = item[`${language}Title`];
|
||||
const kpiValue = item[`kpiId`];
|
||||
@@ -622,12 +629,12 @@ onMounted(() => {
|
||||
:options="[
|
||||
{
|
||||
label: t('views.perfManage.customTarget.active'),
|
||||
value: 'Active',
|
||||
value: '1',
|
||||
tagType: 'success',
|
||||
},
|
||||
{
|
||||
label: t('views.perfManage.customTarget.inactive'),
|
||||
value: 'Inactive',
|
||||
value: '0',
|
||||
tagType: 'error',
|
||||
},
|
||||
]"
|
||||
@@ -685,11 +692,11 @@ onMounted(() => {
|
||||
:options="[
|
||||
{
|
||||
label: t('views.perfManage.customTarget.active'),
|
||||
value: 'Active',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: t('views.perfManage.customTarget.inactive'),
|
||||
value: 'Inactive',
|
||||
value: '0',
|
||||
},
|
||||
]"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
h,
|
||||
watch,
|
||||
} from 'vue';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { message, Modal, TableColumnType } from 'ant-design-vue/es';
|
||||
import { SizeType } from 'ant-design-vue/es/config-provider';
|
||||
@@ -61,14 +62,6 @@ echarts.use([
|
||||
UniversalTransition,
|
||||
]);
|
||||
|
||||
type EChartsOption = echarts.ComposeOption<
|
||||
| TooltipComponentOption
|
||||
| GridComponentOption
|
||||
| LegendComponentOption
|
||||
| DataZoomComponentOption
|
||||
| LineSeriesOption
|
||||
>;
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const kpiChartDom = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
@@ -78,8 +71,26 @@ const kpiChart = ref<any>(null);
|
||||
/**网元参数 */
|
||||
let neCascaderOptions = ref<Record<string, any>[]>([]);
|
||||
|
||||
/**记录开始结束时间 */
|
||||
let queryRangePicker = ref<[string, string]>(['', '']);
|
||||
/**开始结束时间 */
|
||||
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
|
||||
dayjs().startOf('hour'),
|
||||
dayjs().endOf('hour'),
|
||||
]);
|
||||
/**时间范围 */
|
||||
let rangePickerPresets = ref([
|
||||
{
|
||||
label: 'Now hour',
|
||||
value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
|
||||
},
|
||||
{ label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
|
||||
{
|
||||
label: 'Yesterday',
|
||||
value: [
|
||||
dayjs().subtract(1, 'day').startOf('day'),
|
||||
dayjs().subtract(1, 'day').endOf('day'),
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
/**表格字段列 */
|
||||
let tableColumns = ref<any[]>([]);
|
||||
@@ -150,9 +161,9 @@ let queryParams: any = reactive({
|
||||
/**颗粒度 */
|
||||
interval: 900,
|
||||
/**开始时间 */
|
||||
startTime: '',
|
||||
beginTime: undefined as undefined | number,
|
||||
/**结束时间 */
|
||||
endTime: '',
|
||||
endTime: undefined as undefined | number,
|
||||
/**排序字段 */
|
||||
sortField: 'timeGroup',
|
||||
/**排序方式 */
|
||||
@@ -314,7 +325,7 @@ function fnGetListTitle() {
|
||||
getKPITitle(state.neType[0])
|
||||
.then(res => {
|
||||
//处理getKPITitle返回的结果
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
//检查值
|
||||
tableColumns.value = []; //设为空数组
|
||||
const columns: any[] = []; //初始化,构建新表头
|
||||
@@ -374,12 +385,23 @@ function fnGetList() {
|
||||
tableState.loading = true;
|
||||
queryParams.neType = state.neType[0];
|
||||
queryParams.neId = state.neType[1];
|
||||
queryParams.startTime = queryRangePicker.value[0];
|
||||
queryParams.endTime = queryRangePicker.value[1];
|
||||
|
||||
// 时间范围
|
||||
if (
|
||||
Array.isArray(queryRangePicker.value) &&
|
||||
queryRangePicker.value.length > 0
|
||||
) {
|
||||
queryParams.beginTime = queryRangePicker.value[0].valueOf();
|
||||
queryParams.endTime = queryRangePicker.value[1].valueOf();
|
||||
} else {
|
||||
queryParams.beginTime = undefined;
|
||||
queryParams.endTime = undefined;
|
||||
}
|
||||
|
||||
listKPIData(toRaw(queryParams))
|
||||
.then(res => {
|
||||
tableState.loading = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
tablePagination.total = res.data.length;
|
||||
tableState.data = res.data;
|
||||
|
||||
@@ -804,7 +826,7 @@ onMounted(() => {
|
||||
// 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
|
||||
// 获取网元网元列表
|
||||
neInfoStore.fnNelist().then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
if (res.data.length > 0) {
|
||||
// 过滤不可用的网元
|
||||
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
|
||||
@@ -836,17 +858,6 @@ onMounted(() => {
|
||||
queryParams.neId = info.neId;
|
||||
}
|
||||
|
||||
// 查询当前小时
|
||||
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 endTime = new Date(now);
|
||||
endTime.setMinutes(59, 59, 59);
|
||||
queryRangePicker.value[1] = `${endTime.getTime()}`;
|
||||
fnGetListTitle();
|
||||
// 绘图
|
||||
fnRanderChart();
|
||||
@@ -892,12 +903,12 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
<a-range-picker
|
||||
v-model:value="queryRangePicker"
|
||||
bordered
|
||||
:presets="rangePickerPresets"
|
||||
:bordered="true"
|
||||
:allow-clear="false"
|
||||
style="width: 100%"
|
||||
:show-time="{ format: 'HH:mm:ss' }"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="x"
|
||||
style="width: 100%"
|
||||
></a-range-picker>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
@@ -329,10 +329,10 @@ function fnGetListTitle() {
|
||||
if (!state.neType[0]) return false;
|
||||
|
||||
// 获取表头文字
|
||||
listCustom({ neType: state.neType[0], status: 'Active' })
|
||||
listCustom({ neType: state.neType[0], status: '1' })
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.data.length === 0) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
if (res.data.rows.length === 0) {
|
||||
message.error({
|
||||
content: t('views.perfManage.customTarget.kpiIdTip'),
|
||||
duration: 2,
|
||||
@@ -346,7 +346,7 @@ function fnGetListTitle() {
|
||||
}
|
||||
tableColumns.value = [];
|
||||
const columns: any[] = [];
|
||||
for (const item of res.data) {
|
||||
for (const item of res.data.rows) {
|
||||
const kpiDisplay = item[`unit`]
|
||||
? item[`title`] + `(${item['unit']})`
|
||||
: item[`title`];
|
||||
@@ -407,7 +407,7 @@ function fnGetList() {
|
||||
listCustomData(toRaw(queryParams))
|
||||
.then(res => {
|
||||
tableState.loading = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
tablePagination.total = res.data.length;
|
||||
tableState.data = res.data;
|
||||
if (!res.data.length) {
|
||||
@@ -834,9 +834,9 @@ watch(
|
||||
onMounted(() => {
|
||||
// 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
|
||||
// 获取网元网元列表
|
||||
listCustom({ status: 'Active' }).then((res: any) => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (!res.data.length) {
|
||||
listCustom({ status: '1' }).then((res: any) => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
if (!res.data.rows.length) {
|
||||
message.warning({
|
||||
content: '无可用的自定义指标,请先添加自定义指标',
|
||||
duration: 2,
|
||||
@@ -844,12 +844,12 @@ onMounted(() => {
|
||||
return false;
|
||||
}
|
||||
let typeArr: any = [];
|
||||
res.data.forEach((item: any) => {
|
||||
res.data.rows.forEach((item: any) => {
|
||||
typeArr.push(item.neType);
|
||||
});
|
||||
typeArr = Array.from(new Set(typeArr));
|
||||
neInfoStore.fnNelist().then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
neInfoStore.fnNelist().then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
if (res.data.length > 0) {
|
||||
// 过滤不可用的网元
|
||||
neCascaderOptions.value = neInfoStore.getNeCascaderOptions.filter(
|
||||
|
||||
@@ -301,14 +301,9 @@ const chartStates: Record<
|
||||
> = Object.fromEntries(
|
||||
networkElementTypes.value.map(type => [type, createChartState(type)])
|
||||
) as Record<AllChartType, ReturnType<typeof createChartState>>;
|
||||
|
||||
//期择器
|
||||
interface RangePicker extends Record<AllChartType, [string, string]> {
|
||||
placeholder: [string, string];
|
||||
}
|
||||
|
||||
|
||||
// 日期选择器状态
|
||||
const rangePicker = reactive<RangePicker>({
|
||||
const rangePicker = reactive({
|
||||
...(Object.fromEntries(
|
||||
networkElementTypes.value.map(type => [
|
||||
type,
|
||||
@@ -533,18 +528,18 @@ const fetchData = async (type: AllChartType) => {
|
||||
|
||||
try {
|
||||
const dateRange = rangePicker[type] as [string, string];
|
||||
const [startTime, endTime] = dateRange;
|
||||
const [beginTime, endTime] = dateRange;
|
||||
const res = await listKPIData({
|
||||
neType: type.toUpperCase(),
|
||||
neId: '001',
|
||||
startTime,
|
||||
beginTime,
|
||||
endTime,
|
||||
sortField: 'timeGroup',
|
||||
sortOrder: 'desc',
|
||||
interval: 60 * 15,
|
||||
});
|
||||
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
state.tableState.data = res.data;
|
||||
await renderChart(type);
|
||||
}
|
||||
@@ -810,7 +805,7 @@ const fetchKPITitle = async (type: AllChartType) => {
|
||||
: currentLocale.value.split('_')[0];
|
||||
try {
|
||||
const res = await getKPITitle(type.toUpperCase());
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// 保存现有的颜色映
|
||||
const existingColors = new Map(chartStates[type].seriesColors);
|
||||
|
||||
@@ -827,7 +822,7 @@ const fetchKPITitle = async (type: AllChartType) => {
|
||||
return dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
|
||||
},
|
||||
},
|
||||
...res.data.map(item => {
|
||||
...res.data.map((item:any) => {
|
||||
const kpiId = item.kpiId;
|
||||
// 如果没有现有的颜色,生成新的颜色
|
||||
if (!existingColors.has(kpiId)) {
|
||||
|
||||
@@ -83,9 +83,9 @@ const ranges = ref([
|
||||
},
|
||||
]);
|
||||
//日期范围响应式变量
|
||||
const dateRange = ref<[string, string]>([
|
||||
dayjs().subtract(1, 'hour').startOf('hour').valueOf().toString(), // 上一小时开始
|
||||
dayjs().startOf('hour').add(1, 'hour').valueOf().toString(), // 当前小时结束
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>([
|
||||
dayjs().subtract(1, 'hour').startOf('hour'), // 上一小时开始
|
||||
dayjs().startOf('hour').add(1, 'hour'), // 当前小时结束
|
||||
]);
|
||||
//实时数据状态
|
||||
const isRealtime = ref(false);
|
||||
@@ -108,10 +108,7 @@ const handleDateChange = (
|
||||
return;
|
||||
}
|
||||
|
||||
dateRange.value = [
|
||||
dayjs(dateStrings[0]).valueOf().toString(),
|
||||
dayjs(dateStrings[1]).valueOf().toString(),
|
||||
];
|
||||
dateRange.value = [dayjs(dateStrings[0]), dayjs(dateStrings[1])];
|
||||
fetchChartData();
|
||||
};
|
||||
|
||||
@@ -226,8 +223,14 @@ const fetchChartData = async () => {
|
||||
tableLoading.value = true;
|
||||
rangeLoading.value = true;
|
||||
try {
|
||||
const [startTime, endTime] = dateRange.value;
|
||||
if (!startTime || !endTime) {
|
||||
let beginTime = 0;
|
||||
let endTime = 0;
|
||||
// 时间范围
|
||||
if (Array.isArray(dateRange.value) && dateRange.value.length > 0) {
|
||||
beginTime = dateRange.value[0].valueOf();
|
||||
endTime = dateRange.value[1].valueOf();
|
||||
}
|
||||
if (beginTime == 0 || endTime == 0) {
|
||||
console.warn('Invalid date range:', dateRange.value);
|
||||
return;
|
||||
}
|
||||
@@ -237,8 +240,8 @@ const fetchChartData = async () => {
|
||||
const params = {
|
||||
neType,
|
||||
neId: '001',
|
||||
startTime: String(startTime),
|
||||
endTime: String(endTime),
|
||||
beginTime: beginTime,
|
||||
endTime: endTime,
|
||||
sortField: 'timeGroup',
|
||||
sortOrder: 'asc',
|
||||
interval: 60 * 15,
|
||||
@@ -247,7 +250,7 @@ const fetchChartData = async () => {
|
||||
|
||||
try {
|
||||
const res = await listKPIData(params);
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
return res.data;
|
||||
}
|
||||
return [];
|
||||
@@ -651,8 +654,8 @@ const fetchSpecificKPI = async () => {
|
||||
for (const neType of ALL_NE_TYPES) {
|
||||
const res = await getKPITitle(neType.toUpperCase());
|
||||
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
|
||||
const formattedKPIs = res.data.map(item => ({
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
const formattedKPIs = res.data.map((item: any) => ({
|
||||
title: item[`${language}Title`],
|
||||
dataIndex: item.kpiId,
|
||||
key: item.kpiId,
|
||||
|
||||
@@ -190,9 +190,10 @@ function fnGetList(pageNum?: number) {
|
||||
queryParams.beginTime = queryRangePicker.value[0];
|
||||
queryParams.endTime = queryRangePicker.value[1];
|
||||
listperfData(toRaw(queryParams)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.rows;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
const { total, rows } = res.data;
|
||||
tablePagination.total = total;
|
||||
tableState.data = rows;
|
||||
if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
|
||||
tableState.loading = false;
|
||||
fnGetList(queryParams.pageNum - 1);
|
||||
|
||||
@@ -189,13 +189,14 @@ function fnGetList(pageNum?: number) {
|
||||
queryParams.pageNum = pageNum;
|
||||
}
|
||||
listPerfThreshold(toRaw(queryParams)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// 取消勾选
|
||||
if (tableState.selectedRowKeys.length > 0) {
|
||||
tableState.selectedRowKeys = [];
|
||||
}
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.rows;
|
||||
const { total, rows } = res.data;
|
||||
tablePagination.total = total;
|
||||
tableState.data = rows;
|
||||
if (
|
||||
tablePagination.total <=
|
||||
(queryParams.pageNum - 1) * tablePagination.pageSize &&
|
||||
|
||||
@@ -222,13 +222,14 @@ function fnGetList(pageNum?: number) {
|
||||
queryParams.pageNum = pageNum;
|
||||
}
|
||||
listPerfTask(toRaw(queryParams)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
// 取消勾选
|
||||
if (tableState.selectedRowKeys.length > 0) {
|
||||
tableState.selectedRowKeys = [];
|
||||
}
|
||||
tablePagination.total = res.total;
|
||||
tableState.data = res.rows;
|
||||
const { total, rows } = res.data;
|
||||
tablePagination.total = total;
|
||||
tableState.data = rows;
|
||||
if (
|
||||
tablePagination.total <=
|
||||
(queryParams.pageNum - 1) * tablePagination.pageSize &&
|
||||
|
||||
Reference in New Issue
Block a user