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

9
src/i18n/locales/en-US.ts
View File

@@ -1001,8 +1001,13 @@ export default {
expression:'Expression',
description:' Description',
kpiSet:' Statistical Settings',
sixHoursAgo:'Six hours ago',
threeHoursAgo:'Three hours ago',
new1Hour:'Within current hour',
ago1Hour:'Last 1 hour',
ago3Hour:'Last 3 hour',
ago6Hour:'Last 6 hour',
ago1Day:'Last 1 day',
ago7Day:'Last 7 day',
ago15Day:'Last 15 day',
delCustomTip:'Confirm deletion of data item with record Custom Indicator {num}?',
delCustom:' Successfully delete record number {num} custom indicator',
addCustom:' Add custom indicator',

9
src/i18n/locales/zh-CN.ts
View File

@@ -1001,8 +1001,13 @@ export default {
expression:'计算公式',
description:'描述',
kpiSet:'统计设置',
sixHoursAgo:'6小时前',
threeHoursAgo:'3小时前',
new1Hour:'当前小时内',
ago1Hour:'过去1小时',
ago3Hour:'过去3小时',
ago6Hour:'过去6小时',
ago1Day:'过去1天',
ago7Day:'过去7天',
ago15Day:'过去15天',
delCustomTip:'确认删除自定义指标项为 {num} 的数据项?',
delCustom:'成功删除记录编号为 {num} 自定义指标',
addCustom:'添加自定义指标',

147
src/views/perfManage/goldTarget/index.vue
View File

@@ -83,6 +83,40 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
//日期快捷选择
const ranges = ref([
{
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()],
},
]);
/**表格字段列 */
let tableColumns = ref<any[]>([]);
@@ -145,7 +179,7 @@ function fnTableSize({ key }: MenuInfo) {
}
/**选中的网元信息 */
let selectedNes = ref<{neType: string, neId: string}[]>([]);
let selectedNes = ref<{ neType: string; neId: string }[]>([]);
/**查询参数 */
let queryParams: any = reactive({
@@ -314,7 +348,7 @@ function fnRecordExport() {
}
/**可选网元列表 */
let availableNeIds = ref<{label: string, value: string}[]>([]);
let availableNeIds = ref<{ label: string; value: string }[]>([]);
// 添加类型定义
interface KPIStats {
@@ -330,7 +364,10 @@ interface KPIStats {
}
/**处理网元类型变化 */
function handleNeTypeChange(value: SelectValue, option: DefaultOptionType | DefaultOptionType[]) {
function handleNeTypeChange(
value: SelectValue,
option: DefaultOptionType | DefaultOptionType[]
) {
if (!value) {
state.neType = '';
state.neIds = [];
@@ -343,11 +380,17 @@ function handleNeTypeChange(value: SelectValue, option: DefaultOptionType | Defa
state.neIds = []; // 清空已选网元
// 根据选择的网元类型更新可选的网元ID列表
const neTypeOption = neCascaderOptions.value.find(item => item.value === value);
if (neTypeOption && neTypeOption.children && neTypeOption.children.length > 0) {
const neTypeOption = neCascaderOptions.value.find(
item => item.value === value
);
if (
neTypeOption &&
neTypeOption.children &&
neTypeOption.children.length > 0
) {
availableNeIds.value = neTypeOption.children.map((ne: any) => ({
label: `${ne.label}`,
value: ne.neId
value: ne.neId,
}));
// 默认选择第一个网元
@@ -361,7 +404,10 @@ function handleNeTypeChange(value: SelectValue, option: DefaultOptionType | Defa
}
/**处理网元ID变化 */
function handleNeIdsChange(value: SelectValue, option: DefaultOptionType | DefaultOptionType[]) {
function handleNeIdsChange(
value: SelectValue,
option: DefaultOptionType | DefaultOptionType[]
) {
if (!value || (Array.isArray(value) && value.length === 0)) {
state.neIds = [];
queryParams.neIds = [];
@@ -370,12 +416,12 @@ function handleNeIdsChange(value: SelectValue, option: DefaultOptionType | Defau
const values = Array.isArray(value) ? value : [value];
state.neIds = values as string[];
queryParams.neIds = [...values as string[]];
queryParams.neIds = [...(values as string[])];
// 更新选中的网元信息
selectedNes.value = (values as string[]).map(neId => ({
neType: state.neType,
neId: neId
neId: neId,
}));
}
@@ -458,7 +504,7 @@ async function fnGetList() {
...queryParams,
neId: neId,
startTime: queryRangePicker.value[0],
endTime: queryRangePicker.value[1]
endTime: queryRangePicker.value[1],
};
// 不需要将neIds发送到后端
delete params.neIds;
@@ -469,7 +515,7 @@ async function fnGetList() {
return res.data.map(item => ({
...item,
_neId: neId,
neName: `${state.neType}-${neId}`
neName: `${state.neType}-${neId}`,
}));
}
return [];
@@ -564,14 +610,17 @@ function fnRanderChart() {
return [pt[0], '10%'];
},
confine: true, // 限制 tooltip 显示范围
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark'
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'
borderColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -582,7 +631,8 @@ function fnRanderChart() {
boundaryGap: false,
data: [], // 数据x轴
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -599,7 +649,8 @@ function fnRanderChart() {
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -719,7 +770,9 @@ function fnRanderChartData() {
}
// 获取所有时间点并格式化
const timePoints = [...new Set(tableState.data.map(item => item.timeGroup))].sort();
const timePoints = [
...new Set(tableState.data.map(item => item.timeGroup)),
].sort();
chartDataXAxisData = timePoints.map(time => parseDateToStr(+time));
// 填充数据
@@ -755,7 +808,10 @@ function fnRanderChartData() {
type: 'category',
boundaryGap: false,
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#CACADA' : '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
splitLine: {
show: true,
@@ -808,14 +864,17 @@ function fnRealTimeSwitch(bool: any) {
return [pt[0], '10%'];
},
confine: true,
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark'
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'
borderColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -825,7 +884,8 @@ function fnRealTimeSwitch(bool: any) {
boundaryGap: false,
data: [],
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -841,7 +901,8 @@ function fnRealTimeSwitch(bool: any) {
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -887,7 +948,9 @@ function fnRealTimeSwitch(bool: any) {
* 指标(GroupID:10_neType_neId)
* 为所有选中的网元创建订阅
*/
subGroupID: state.neIds.map(neId => `10_${state.neType}_${neId}`).join(','),
subGroupID: state.neIds
.map(neId => `10_${state.neType}_${neId}`)
.join(','),
},
onmessage: wsMessage,
onerror: wsError,
@@ -1036,7 +1099,10 @@ function wsMessage(res: Record<string, any>) {
type: 'category',
boundaryGap: false,
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#CACADA' : '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
splitLine: {
show: true,
@@ -1213,7 +1279,9 @@ function handleSearch() {
// 检查是否选择了网元类型和网元ID
if (!state.neType) {
message.warning({
content: t('views.perfManage.goldTarget.selectNeTypeFirst') || '请先选择网元类型',
content:
t('views.perfManage.goldTarget.selectNeTypeFirst') ||
'请先选择网元类型',
duration: 2,
});
return;
@@ -1221,7 +1289,9 @@ function handleSearch() {
if (state.neIds.length === 0) {
message.warning({
content: t('views.perfManage.goldTarget.selectNeIdsFirst') || '请选择至少一个网元',
content:
t('views.perfManage.goldTarget.selectNeIdsFirst') ||
'请选择至少一个网元',
duration: 2,
});
return;
@@ -1270,17 +1340,19 @@ onMounted(() => {
// 获取该类型下的网元ID列表
availableNeIds.value = item.children.map((ne: any) => ({
label: `${ne.label}`,
value: ne.neId
value: ne.neId,
}));
// 默认选择第一个网元
const info = item.children[0];
state.neIds = [info.neId];
queryParams.neIds = [info.neId];
selectedNes.value = [{
selectedNes.value = [
{
neType: item.value,
neId: info.neId
}];
neId: info.neId,
},
];
} else {
const item = neCascaderOptions.value[0];
state.neType = item.value;
@@ -1289,17 +1361,19 @@ onMounted(() => {
// 获取该类型下的网元ID列表
availableNeIds.value = item.children.map((ne: any) => ({
label: `${ne.label}`,
value: ne.neId
value: ne.neId,
}));
// 默认选择第一个网元
const info = item.children[0];
state.neIds = [info.neId];
queryParams.neIds = [info.neId];
selectedNes.value = [{
selectedNes.value = [
{
neType: item.value,
neId: info.neId
}];
neId: info.neId,
},
];
}
// 查询当前小时
@@ -1353,7 +1427,7 @@ onBeforeUnmount(() => {
@change="handleNeTypeChange"
:field-names="{
label: 'label',
value: 'value'
value: 'value',
}"
:allow-clear="false"
/>
@@ -1380,6 +1454,7 @@ onBeforeUnmount(() => {
<a-range-picker
v-model:value="queryRangePicker"
bordered
:presets="ranges"
:allow-clear="false"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"

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

@@ -86,17 +86,36 @@ let queryRangePicker = ref<[string, string]>(['', '']);
/**时间选择 */
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()],
},
]);
/**表格字段列 */

37
src/views/perfManage/kpiKeyTarget/index.vue
View File

@@ -36,17 +36,36 @@ const neInfoStore = useNeInfoStore();
//日期快捷选择
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()],
},
]);
//WebSocket连接
const ws = ref<WS | null>(null);

86
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,7 +559,8 @@ const updateChart = () => {
left: 'center',
// 添加文字颜色配置，根据主题切换
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -559,14 +568,17 @@ const updateChart = () => {
tooltip: {
trigger: 'axis',
confine: true,
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark'
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'
borderColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -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,
@@ -623,7 +636,8 @@ const updateChart = () => {
type: 'value',
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
@@ -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),
])
);