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

feat:网元指标添加其他指标选项 优化样式

Browse Source
This commit is contained in:
TsMask
2024-10-31 19:23:46 +08:00
parent e04fd4077e
commit 2276445ff6
3 changed files with 207 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1091,6 +1091,7 @@ export default {
"layout3": "Layout 3"
},
kpiOverView:{
"kpiChartTitle":"Overview of NE metrics",
"changeLine":"Change to Line Charts",
"changeBar":"Change to Bar Charts",
"chooseShowMetrics":"Select the metric you want to display",

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

@@ -1091,6 +1091,7 @@ export default {
"layout3": "布局3"
},
kpiOverView:{
"kpiChartTitle":"网元指标概览",
"changeLine":"切换为折线图",
"changeBar":"切换为柱状图",
"chooseShowMetrics":"选择需要显示的指标",

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

@@ -24,12 +24,14 @@ import {
BarChartOutlined,
LineChartOutlined,
UnorderedListOutlined,
DownOutlined,
MoreOutlined,
} from '@ant-design/icons-vue';
// 在这里定义 ChartDataItem 接口
interface ChartDataItem {
date: string; // 将存储完整的时间字符串，包含时分秒
[kpiId: string]: string | number; // 动态指标值
[kpiId: string]: string | number; // 动态指标
}
echarts.use([
@@ -60,7 +62,7 @@ let chart: echarts.ECharts | null = null;
//observer 变量 监听图表容器大小
let observer: ResizeObserver | null = null;
//日期变化时触发数据变化时触发
//日期变化时更新图表数据
const handleDateChange = (
value: [string, string] | [Dayjs, Dayjs],
dateStrings: [string, string]
@@ -74,11 +76,10 @@ const handleDateChange = (
dayjs(dateStrings[0]).valueOf().toString(),
dayjs(dateStrings[1]).valueOf().toString(),
];
fetchChartData();
};
//切换实时数据方法
//切换实时数据
const toggleRealtime = () => {
fnRealTimeSwitch(isRealtime.value);
};
@@ -125,7 +126,7 @@ const wsError = () => {
message.error(t('common.websocketError'));
};
// 收数据回调
// 接收数据后回调
const wsMessage = (res: Record<string, any>) => {
const { code, data } = res;
if (code === RESULT_CODE_ERROR) {
@@ -149,7 +150,7 @@ const wsMessage = (res: Record<string, any>) => {
: Date.now().toString(),
};
// 只添加已选中的指标数据
// 只添加已选中的指标的数据
selectedKPIs.value.forEach(kpiId => {
if (kpiEvent[kpiId] !== undefined) {
newData[kpiId] = Number(kpiEvent[kpiId]);
@@ -162,7 +163,7 @@ const wsMessage = (res: Record<string, any>) => {
updateChartData(newData);
};
// 取图表数据
// 获取图表数据方法
const fetchChartData = async () => {
if (kpiColumns.value.length === 0) {
console.warn('No KPI columns available');
@@ -199,7 +200,7 @@ const fetchChartData = async () => {
}
}
// 按时间分组合并数据
// 按时间分组合数据
const groupedData = new Map<string, any>();
allData.forEach(item => {
const timeKey = item.timeGroup;
@@ -230,10 +231,10 @@ const fetchChartData = async () => {
}
};
// 添加一个 Map 来存储每个指标的固定颜色
// 添加一个 Map 来存储每个指标的临时固定颜色
const kpiColors = new Map<string, string>();
// 加图表类型的响应式变量
// 定义图表类型的响应式变量
const chartType = ref<'line' | 'bar'>('line');
// 添加切换图表类型的方法
@@ -242,19 +243,19 @@ const toggleChartType = () => {
updateChart();
};
// 修改 updateChart 函数中的系列配置
// 更新图表
const updateChart = () => {
if (!chart || !kpiColumns.value.length) return;
if (!chart || !kpiColumns.value.length) return; //首先检查图表实例和指标是否存在
//过滤出已选择的指标列
const filteredColumns = kpiColumns.value.filter(col =>
selectedKPIs.value.includes(col.kpiId)
);
const legendData = filteredColumns.map(item => item.title);
const legendData = filteredColumns.map(item => item.title); //创建图例数据数组，包含所有选中的指标的标题
//为每个选中的指标创建一个系列配置
const series = filteredColumns.map(item => {
const color = kpiColors.get(item.kpiId) || generateColorRGBA();
if (!kpiColors.has(item.kpiId)) {
kpiColors.set(item.kpiId, color);
kpiColors.set(item.kpiId, color); //保持指标颜色的临时一致性
}
return {
@@ -271,10 +272,10 @@ const updateChart = () => {
itemStyle: { color },
};
});
//图表配置对象
const option = {
title: {
text: '网元指标概览',
text: t('views.perfManage.kpiOverView.kpiChartTitle'),
left: 'center',
},
tooltip: {
@@ -284,6 +285,7 @@ const updateChart = () => {
},
},
legend: {
//图例配置
data: legendData,
type: 'scroll',
orient: 'horizontal',
@@ -299,6 +301,7 @@ const updateChart = () => {
padding: [5, 10],
},
grid: {
//网格配置
left: '3%',
right: '4%',
bottom: '3%',
@@ -306,6 +309,7 @@ const updateChart = () => {
containLabel: true,
},
xAxis: {
//x轴配置
type: 'category',
boundaryGap: false,
data:
@@ -326,6 +330,7 @@ const updateChart = () => {
},
},
yAxis: {
// y轴配置
type: 'value',
axisLabel: {
formatter: '{value}',
@@ -335,11 +340,11 @@ const updateChart = () => {
// 添加自动计算的最小/最大值围
scale: true,
},
series: series,
series: series, //配置数据
};
chart.setOption(option);
chart.resize();
chart.setOption(option); //使用新的配置更新图表
chart.resize(); //调整图表大小以适应容器
// 如果已经有 observer，先断开连接
if (observer) {
@@ -388,40 +393,79 @@ onMounted(async () => {
}
});
// 定义指标列类型
// 定义指列类型
interface KPIColumn {
title: string;
dataIndex: string;
key: string;
kpiId: string;
neType: string; // 添加网元类型字段
}
// 存储指标列信
const kpiColumns = ref<KPIColumn[]>([]);
// 添加选中标的的状态
// 添加选中指标的的状态
const selectedKPIs = ref<string[]>([]);
// 添加对话框可见性状态
const isModalVisible = ref(false);
// 添加临时存储下拉框选择的数组
const tempSelectedKPIs = ref<string[]>([]);
// 打开对话框
// 添加一个变量保存打开对话框时的选择状态
const originalSelectedKPIs = ref<string[]>([]);
// 打开对话框的方法
const showKPISelector = () => {
// 保存当前的选择状态
originalSelectedKPIs.value = [...selectedKPIs.value];
// 初始化临时选择为当前已选择的其他指标
const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
tempSelectedKPIs.value = selectedKPIs.value.filter(
kpiId => !primaryKPIs.includes(kpiId)
);
isModalVisible.value = true;
};
// 添加保存选中指标到 localStorage 的方法
// 保存选中指标到 localStorage 的方法
const saveSelectedKPIs = () => {
localStorage.setItem('selectedKPIs', JSON.stringify(selectedKPIs.value));
};
// 窗口确认按钮
const handleModalOk = () => {
saveSelectedKPIs(); // 保存选择
updateChart();
// 取消按钮的处理方法
const handleModalCancel = () => {
// 恢复到打开对话框时的选择状态
selectedKPIs.value = [...originalSelectedKPIs.value];
// 清空临时选择
tempSelectedKPIs.value = [];
isModalVisible.value = false;
};
// 取消按钮
const handleModalCancel = () => {
// 确认按钮的处理方法
const handleModalOk = () => {
// 获取主要指标列表
const primaryKPIs = Object.values(TARGET_KPI_IDS).flat();
// 获取当前在主界面选中的主要指标
const selectedPrimaryKPIs = selectedKPIs.value.filter(kpiId =>
primaryKPIs.includes(kpiId)
);
// 合并选中的主要指标和临时选中的其他指标
selectedKPIs.value = Array.from(
new Set([
...selectedPrimaryKPIs, // 只包含已选中的主要指标
...tempSelectedKPIs.value, // 临时选中的其他指标
])
);
// 清空临时选择和原始选择
tempSelectedKPIs.value = [];
originalSelectedKPIs.value = [];
// 保存选择并更新图表
saveSelectedKPIs();
updateChart();
isModalVisible.value = false;
};
@@ -435,59 +479,50 @@ const fetchSpecificKPI = async () => {
try {
let allKPIs: KPIColumn[] = [];
// 使用 ALL_NE_TYPES 遍历网元类型
// 1. 获取所有网元的全部指标
for (const neType of ALL_NE_TYPES) {
const res = await getKPITitle(neType);
const res = await getKPITitle(neType.toUpperCase());
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
// 过滤当前网元类型的指标
const filteredKPIs = res.data.filter(item =>
TARGET_KPI_IDS[neType].some(
targetId =>
item.kpiId === targetId || // 完全匹配
item.kpiId.startsWith(targetId) // 前缀匹配
)
);
// 转换并添加到总指标列表
const formattedKPIs = filteredKPIs.map(item => ({
// 转换指标格式
const formattedKPIs = res.data.map(item => ({
title: item[`${language}Title`],
dataIndex: item.kpiId,
key: item.kpiId,
kpiId: item.kpiId,
neType: neType, // 添加网元类型信息
}));
// 添加到所有指标数组
allKPIs = [...allKPIs, ...formattedKPIs];
}
}
// 更新指标列信息
// 2. 更新所有指标到 kpiColumns
kpiColumns.value = allKPIs;
// 尝试加载保存的选择
// 3. 尝试加载保存的选择
const savedKPIs = localStorage.getItem('selectedKPIs');
if (savedKPIs) {
// 确保保存的选择仍然存在于前指标中
// 确保保存的选择仍然存在于当前指标中
const validSavedKPIs = JSON.parse(savedKPIs).filter((kpiId: string) =>
kpiColumns.value.some(col => col.kpiId === kpiId)
);
if (validSavedKPIs.length > 0) {
selectedKPIs.value = validSavedKPIs;
} else {
// 如果没有有效的保存选择，则默认全选
selectedKPIs.value = kpiColumns.value.map(col => col.kpiId);
// 如果没有有效的保存选择，则默认选择<EFBFBD><EFBFBD>要指标
selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
}
} else {
// 如果没有保存的选择，则默认全选
selectedKPIs.value = kpiColumns.value.map(col => col.kpiId);
// 如果没有保存的选择，则默认选择重要指标
selectedKPIs.value = Object.values(TARGET_KPI_IDS).flat();
}
if (kpiColumns.value.length === 0) {
console.warn('No matching KPIs found');
console.warn('No KPIs found');
} else {
console.log(
`Found ${kpiColumns.value.length} total KPIs:`,
kpiColumns.value.map(kpi => kpi.kpiId)
);
console.log(`Found ${kpiColumns.value.length} total KPIs`);
}
return kpiColumns.value;
@@ -498,7 +533,7 @@ const fetchSpecificKPI = async () => {
}
};
// 确保只保留一个 onUnmounted 钩子
// onUnmounted 钩子
onUnmounted(() => {
if (ws.value && ws.value.state() === WebSocket.OPEN) {
ws.value.close();
@@ -517,7 +552,7 @@ onUnmounted(() => {
const { t, currentLocale } = useI18n();
// 修改 updateChartData 方法，只更新数据而不重新渲染整个图表
// 更新图表数据方法
const updateChartData = (newData: ChartDataItem) => {
chartData.value.push(newData);
if (chartData.value.length > 100) {
@@ -539,7 +574,7 @@ const updateChartData = (newData: ChartDataItem) => {
}
};
// 修改 groupedKPIs 计算属性，使用 TARGET_KPI_IDS 来分组
// groupedKPIs 计算属性，使用 TARGET_KPI_IDS 来分组过滤
const groupedKPIs = computed(() => {
const groups: Record<string, KPIColumn[]> = {};
@@ -547,15 +582,52 @@ const groupedKPIs = computed(() => {
// 使用 TARGET_KPI_IDS 中定义的指标 ID 来过滤
const targetIds = TARGET_KPI_IDS[neType];
groups[neType] = kpiColumns.value.filter(kpi =>
targetIds.some(
targetId =>
kpi.kpiId === targetId || // 完全匹配
kpi.kpiId.startsWith(targetId) // 前缀匹配
)
targetIds.includes(kpi.kpiId)
);
});
return groups;
});
// 计算其他指标
const secondaryKPIs = computed(() => {
const groups: Record<string, KPIColumn[]> = {};
if (kpiColumns.value.length === 0) {
console.warn('No KPI columns available');
return groups;
}
ALL_NE_TYPES.forEach(neType => {
// 获取当前网元类型的主要指标 ID
const primaryIds = TARGET_KPI_IDS[neType];
// 从所有指标中筛选出当前网元其他指标
groups[neType] = kpiColumns.value.filter(kpi => {
// 检查是否不在主要指标列表中
const isNotPrimary = !primaryIds.includes(kpi.kpiId);
// 检查是否属于当前网元类型
// 使用 getKPITitle API 返回的原始数据中的网元类型信息
const isCurrentNeType = kpi.neType === neType;
return isCurrentNeType && isNotPrimary;
});
});
return groups;
});
// 添加处理其他指标选择变化的方法
const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
if (checked) {
// 如果选中，将指标 ID 添加到临时列表
if (!tempSelectedKPIs.value.includes(kpiId)) {
tempSelectedKPIs.value = [...tempSelectedKPIs.value, kpiId];
}
} else {
// 如果取消选中，从临时列表中移除指标 ID
tempSelectedKPIs.value = tempSelectedKPIs.value.filter(id => id !== kpiId);
}
};
</script>
<template>
<div class="kpi-overview">
@@ -600,7 +672,7 @@ const groupedKPIs = computed(() => {
<!-- 修改指标选择对话框 -->
<a-modal
v-model:visible="isModalVisible"
:title="t('views.perfManage.kpiOverView.chooseShowMetrics')"
title="选择要显示的指标"
@ok="handleModalOk"
@cancel="handleModalCancel"
width="800px"
@@ -608,12 +680,51 @@ const groupedKPIs = computed(() => {
>
<a-checkbox-group v-model:value="selectedKPIs">
<div class="kpi-checkbox-list">
<div
<a-card
v-for="neType in ALL_NE_TYPES"
:key="neType"
class="ne-type-group"
class="ne-type-card"
:bordered="false"
>
<div class="ne-type-title">{{ neType.toUpperCase() }}</div>
<template #title>
<span class="card-title">{{ neType.toUpperCase() }}</span>
</template>
<template #extra>
<a-dropdown v-if="secondaryKPIs[neType]?.length" trigger="click">
<a-button type="link" size="small">
<more-outlined />
<down-outlined />
<span class="secondary-count"
>({{ secondaryKPIs[neType].length }})</span
>
</a-button>
<template>
<div class="secondary-kpi-menu" @click.stop>
<div
v-for="kpi in secondaryKPIs[neType]"
:key="kpi.kpiId"
class="secondary-kpi-item"
@click.stop
>
<a-checkbox
:value="kpi.kpiId"
:checked="tempSelectedKPIs.includes(kpi.kpiId)"
@change="
e =>
handleSecondaryKPIChange(
kpi.kpiId,
e.target.checked
)
"
@click.stop
>
{{ kpi.title }}
</a-checkbox>
</div>
</div>
</template>
</a-dropdown>
</template>
<div class="ne-type-items">
<div
v-for="kpi in groupedKPIs[neType]"
@@ -625,7 +736,7 @@ const groupedKPIs = computed(() => {
</a-checkbox>
</div>
</div>
</div>
</a-card>
</div>
</a-checkbox-group>
</a-modal>
@@ -633,11 +744,11 @@ const groupedKPIs = computed(() => {
</template>
<style scoped>
/* 基础布局样式 */
.kpi-overview {
padding: 20px;
}
/* 控制区域样式 */
.controls {
display: flex;
gap: 16px;
@@ -645,7 +756,6 @@ const groupedKPIs = computed(() => {
align-items: center;
}
/* 图表容器样式 */
.chart-container {
height: calc(100vh - 160px);
width: 100%;
@@ -657,24 +767,8 @@ const groupedKPIs = computed(() => {
width: 100%;
}
/* 网元分组样式 */
.ne-type-group {
margin-bottom: 24px;
border: 1px solid #f0f0f0;
border-radius: 4px;
width: 100%;
background: #fff;
}
.ne-type-title {
padding: 12px 16px;
font-weight: bold;
background-color: #fafafa;
border-bottom: 1px solid #f0f0f0;
}
/* 网元指标列表样式 */
.ne-type-items {
padding: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
@@ -689,29 +783,25 @@ const groupedKPIs = computed(() => {
white-space: nowrap;
}
/* 深度选择器样式 */
:deep(.ant-modal-body) {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
&:hover {
background: #999;
}
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
/* 其他指标下拉菜单样式 */
.secondary-kpi-menu {
background: #fff;
padding: 4px 0;
border-radius: 2px;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08);
max-height: 300px;
overflow-y: auto;
min-width: 200px;
}
/* 组件高度统一样式 */
.secondary-kpi-item {
padding: 8px 12px;
cursor: pointer;
user-select: none;
}
/* 组件统一样式 */
:deep(.ant-form-item),
:deep(.ant-picker),
:deep(.ant-btn) {
@@ -724,15 +814,16 @@ const groupedKPIs = computed(() => {
align-items: center;
}
:deep(.ant-form-item-label) {
padding-right: 8px;
line-height: 32px;
}
:deep(.ant-checkbox-wrapper) {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 添加次要指标数量的样式 */
.secondary-count {
margin-left: 4px;
font-size: 12px;
}
</style>