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

feat: kpi菜单时间选择预设1h/1d/7d/15d

Browse Source
This commit is contained in:
TsMask
2025-06-17 20:02:42 +08:00
parent a341800efc
commit 88aea40885
6 changed files with 267 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/views/perfManage/kpiOverView/index.vue
View File

@@ -58,30 +58,38 @@ echarts.use([
const ws = ref<WS | null>(null);
//时间选择
// let ranges = ref<Record<string, [Dayjs, Dayjs]>>({
// [t('views.perfManage.customTarget.sixHoursAgo')]: [
// dayjs().subtract(6, 'hours'),
// dayjs(),
// ],
// [t('views.perfManage.customTarget.threeHoursAgo')]: [
// dayjs().subtract(3, 'hours'),
// dayjs(),
// ],
// [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
// });
const ranges = ref([
{
label: t('views.perfManage.customTarget.sixHoursAgo'),
value: [dayjs().subtract(6, 'hours'), dayjs()],
},
{
label: t('views.perfManage.customTarget.threeHoursAgo'),
value: [dayjs().subtract(3, 'hours'), dayjs()],
},
{
label: t('views.monitor.monitor.today'),
label: t('views.perfManage.customTarget.new1Hour'),
value: [dayjs().startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago1Hour'),
value: [dayjs().subtract(1, 'hour').startOf('hour'), dayjs().endOf('hour')],
},
// {
// label: t('views.perfManage.customTarget.ago3Hour'),
// value: [dayjs().subtract(3, 'hours'), dayjs()],
// },
// {
// label: t('views.perfManage.customTarget.ago6Hour'),
// value: [dayjs().subtract(6, 'hours'), dayjs()],
// },
{
label: t('views.perfManage.customTarget.ago1Day'),
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day'),
],
},
{
label: t('views.perfManage.customTarget.ago7Day'),
value: [dayjs().subtract(7, 'day').startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago15Day'),
value: [dayjs().subtract(15, 'day').startOf('day'), dayjs()],
},
]);
//日期范围响应式变量
const dateRange = ref<[string, string]>([
@@ -152,10 +160,10 @@ const KPI_TITLE: Record<string, string> = {
const neInfoStore = useNeInfoStore();
// 添加网元列表相关变量
const neList = ref<Record<NeType, {neId: string, neName: string}[]>>({
const neList = ref<Record<NeType, { neId: string; neName: string }[]>>({
AMF: [],
UPF: [],
IMS: []
IMS: [],
});
// 添加获取网元列表的函数
@@ -174,7 +182,7 @@ const fetchNeList = async () => {
if (ALL_NE_TYPES.includes(neType)) {
neList.value[neType].push({
neId: ne.neId,
neName: ne.neName
neName: ne.neName,
});
}
});
@@ -324,7 +332,7 @@ const fetchChartData = async () => {
return res.data.map(item => ({
...item,
_neId: ne.neId,
neName: `${neType}-${ne.neId}`
neName: `${neType}-${ne.neId}`,
}));
}
return [];
@@ -551,24 +559,28 @@ const updateChart = () => {
left: 'center',
// 添加文字颜色配置，根据主题切换
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
},
tooltip: {
trigger: 'axis',
confine: true,
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark'
? 'rgba(48, 48, 48, 0.8)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
backgroundColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? 'rgba(48, 48, 48, 0.8)'
: 'rgba(255, 255, 255, 0.9)',
borderColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);',
},
@@ -583,7 +595,8 @@ const updateChart = () => {
selected: Object.fromEntries(
kpiStats.value.map(item => [
item.title,
selectedRows.value.length === 0 || selectedRows.value.includes(item.kpiId)
selectedRows.value.length === 0 ||
selectedRows.value.includes(item.kpiId),
])
),
show: false,
@@ -606,7 +619,7 @@ const updateChart = () => {
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
),
axisLabel: {
// formatter: '{value}',
// formatter: '{value}',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
@@ -623,9 +636,10 @@ const updateChart = () => {
type: 'value',
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
// 添加自计算的分割段数
splitNumber: 5,
@@ -642,7 +656,8 @@ const updateChart = () => {
};
if (chart) {
requestAnimationFrame(() => {
if (chart) { // 添加额外的空值检查
if (chart) {
// 添加额外的空值检查
chart.setOption(option, true);
chart.resize();
}
@@ -729,7 +744,7 @@ const fetchSpecificKPI = async () => {
key: item.kpiId,
kpiId: item.kpiId,
neType: neType,
}
};
});
allKPIs = [...allKPIs, ...filteredKPIs];
@@ -845,7 +860,9 @@ const updateKpiStats = () => {
if (values.length === 0) continue;
const total = Number(values.reduce((sum, val) => sum + val, 0).toFixed(2));
const total = Number(
values.reduce((sum, val) => sum + val, 0).toFixed(2)
);
const avg = Number((total / values.length).toFixed(2));
kpiStats.value.push({
@@ -943,7 +960,8 @@ const updateChartLegendSelect = () => {
const legendSelected = Object.fromEntries(
kpiStats.value.map(item => [
item.title,
selectedRows.value.length === 0 || selectedRows.value.includes(item.kpiId)
selectedRows.value.length === 0 ||
selectedRows.value.includes(item.kpiId),
])
);