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

193
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 [];
@@ -519,7 +565,7 @@ async function fnGetList() {
values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
kpiStats.value.push({
kpiId: `${columns.key}_${neId}`, // 使用组合ID来唯一标识指标-网元对
kpiId: `${columns.key}_${neId}`, // 使用组合ID来唯一标识指标-网元对
title: `${columns.title}(${neId})`, // 在标题中显示网元ID
rawKpiId: columns.key,
rawKpiTitle: columns.title,
@@ -564,16 +610,19 @@ function fnRanderChart() {
return [pt[0], '10%'];
},
confine: true, // 限制 tooltip 显示范围
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',
},
},
xAxis: {
@@ -582,9 +631,10 @@ function fnRanderChart() {
boundaryGap: false,
data: [], // 数据x轴
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
splitLine: {
show: true,
@@ -599,9 +649,10 @@ function fnRanderChart() {
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
splitNumber: 5,
scale: true,
@@ -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,16 +864,19 @@ function fnRealTimeSwitch(bool: any) {
return [pt[0], '10%'];
},
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',
},
},
xAxis: {
@@ -825,9 +884,10 @@ function fnRealTimeSwitch(bool: any) {
boundaryGap: false,
data: [],
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
splitLine: {
show: true,
@@ -841,9 +901,10 @@ function fnRealTimeSwitch(bool: any) {
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
},
splitNumber: 5,
scale: true,
@@ -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 = [{
neType: item.value,
neId: info.neId
}];
selectedNes.value = [
{
neType: item.value,
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 = [{
neType: item.value,
neId: info.neId
}];
selectedNes.value = [
{
neType: item.value,
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"