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

fix:增加并发请求，优化性能和逻辑

Browse Source
This commit is contained in:
zhongzm
2024-11-05 17:11:38 +08:00
parent c567b19fb2
commit 33159befc3
1 changed files with 126 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,8 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
import * as echarts from 'echarts/core';
import { LegendComponent } from 'echarts/components';
import { GridComponent, TooltipComponent, TitleComponent,LegendComponent } from 'echarts/components';
import { LineChart, BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, TitleComponent, } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n';
@@ -15,12 +14,27 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
import { generateColorRGBA } from '@/utils/generate-utils';
import { BarChartOutlined, LineChartOutlined, UnorderedListOutlined, DownOutlined, MoreOutlined } from '@ant-design/icons-vue';
//定义KPI接口
interface KPIBase{
kpiId: string;
title: string;
}
interface KPIColumn extends KPIBase{
dataIndex: string;
key: string;
neType: string;
}
// 在这里定义 ChartDataItem 接口
interface ChartDataItem {
date: string; // 将存储完整的时间字符串，包含时分秒
[kpiId: string]: string | number; // 动态指标
}
//网元类型定义
const ALL_NE_TYPES = ['AMF','SMF','UPF','MME','IMS','SMSC'] as const;
type NeType= typeof ALL_NE_TYPES[number];
echarts.use([
LineChart,
BarChart,
@@ -71,10 +85,6 @@ const toggleRealtime = () => {
fnRealTimeSwitch(isRealtime.value);
};
// 定义所有网元类型
const ALL_NE_TYPES = ['AMF', 'SMF', 'UPF', 'MME', 'IMS', 'SMSC'] as const;
type NeType = (typeof ALL_NE_TYPES)[number];
// 定义要筛选的指标 ID，按网元类型组织
const TARGET_KPI_IDS: Record<NeType, string[]> = {
AMF: ['AMF.02', 'AMF.03', 'AMF.A.07', 'AMF.A.08'],
@@ -113,63 +123,65 @@ const wsError = () => {
message.error(t('common.websocketError'));
};
// 接收数据后回调
const wsMessage = (res: Record<string, any>) => {
const { code, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
if (!data?.groupId) {
return;
}
const kpiEvent = data.data;
if (!kpiEvent) {
return;
}
const handleWebSocketMessage = (kpiEvent:any)=>{
if(!kpiEvent)return;
// 构造新的数据点
const newData: ChartDataItem = {
date: kpiEvent.timeGroup
? kpiEvent.timeGroup.toString()
: Date.now().toString(),
date: kpiEvent.timeGroup?.toString() || Date.now().toString(),
};
// 只添加已选中的指标的数据
selectedKPIs.value.forEach(kpiId => {
if (kpiEvent[kpiId] !== undefined) {
newData[kpiId] = Number(kpiEvent[kpiId]);
} else {
newData[kpiId] = 0;
}
newData[kpiId] = Number(kpiEvent[kpiId])||0;
});
// 更新数据
updateChartData(newData);
};
//成功回调
const wsMessage = (res:Record<string,any>)=>{
const{code,data}=res;
if(code===RESULT_CODE_ERROR||!data?.gropId)return;
handleWebSocketMessage(data.data);
};
// 添加数据处理函数
const processChartData = (rawData: any[]) => {
const groupedData = new Map<string, any>();//数据按时间分组
rawData.forEach(item => {//合并相同时间点的数据
const timeKey = item.timeGroup;
if (!groupedData.has(timeKey)) {//按时间排序
groupedData.set(timeKey, { timeGroup: timeKey });
}
Object.assign(groupedData.get(timeKey), item);
});
return Array.from(groupedData.values())
.sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup))
.map(item => {//转换成图表需要的格式
const dataItem: ChartDataItem = { date: item.timeGroup.toString() };
selectedKPIs.value.forEach(kpiId => {
dataItem[kpiId] = Number(item[kpiId]) || 0;
});
return dataItem;
});
};
// 获取图表数据方法
const fetchChartData = async () => {
if (kpiColumns.value.length === 0) {
console.warn('No KPI columns available');
if(kpiColumns.value.length===0){
updateChart();
return;
}
try {
const [startTime, endTime] = dateRange.value;
const[startTime,endTime]=dateRange.value;
if (!startTime || !endTime) {
console.warn('Invalid date range:', dateRange.value);
return;
}
const allData: any[] = [];
// 使用 ALL_NE_TYPES 遍历网元类型
for (const neType of ALL_NE_TYPES) {
// 创建并行请求数组
const requests = ALL_NE_TYPES.map(async (neType) => {
const params = {
neType,
neId: '001',
@@ -181,36 +193,23 @@ const fetchChartData = async () => {
kpiIds: TARGET_KPI_IDS[neType].join(','),
};
const res = await listKPIData(params);
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
allData.push(...res.data);
try {
const res = await listKPIData(params);
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
return res.data;
}
return [];
} catch (error) {
console.error(`Failed to fetch data for ${neType}:`, error);
return [];
}
}
// 按时间分组合数据
const groupedData = new Map<string, any>();
allData.forEach(item => {
const timeKey = item.timeGroup;
if (!groupedData.has(timeKey)) {
groupedData.set(timeKey, { timeGroup: timeKey });
}
const existingData = groupedData.get(timeKey);
Object.assign(existingData, item);
});
// 直接将处理后的数据赋值给 chartData.value
chartData.value = Array.from(groupedData.values())
.sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup))
.map(item => {
const dataItem: ChartDataItem = {
date: item.timeGroup.toString(),
};
kpiColumns.value.forEach(kpi => {
dataItem[kpi.kpiId] = Number(item[kpi.kpiId]) || 0;
});
return dataItem;
});
// 并行执行所有请求
const results = await Promise.all(requests);
const allData = results.flat();
chartData.value = processChartData(allData);
updateChart();
} catch (error) {
console.error('Failed to fetch chart data:', error);
@@ -218,47 +217,49 @@ const fetchChartData = async () => {
}
};
// 添加一个 Map 来存储每个指标的临时固定颜色
// 存储每个指标的临时固定颜色
const kpiColors = new Map<string, string>();
// 定义图表类型的响应式变量
const chartType = ref<'line' | 'bar'>('line');
// 添加切换图表类型的方法
// 切换图表类型的方法
const toggleChartType = () => {
chartType.value = chartType.value === 'line' ? 'bar' : 'line';
updateChart();
};
// 更新图表
// 更新图表类型
const getCommonSeriesConfig=(isLine:boolean)=>({
symbol: isLine ? 'circle' : undefined,
symbolSize: isLine ? 6 : undefined,
showSymbol: isLine,
barWidth: !isLine ? 20 : undefined,
barGap: !isLine ? '30%' : undefined,
animation: !isLine,
animationDuration: 300,
animationEasing: 'cubicOut',
});
const updateChart = () => {
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 series = filteredColumns.map(item => {
const color = kpiColors.get(item.kpiId) || generateColorRGBA();
if (!kpiColors.has(item.kpiId)) {
kpiColors.set(item.kpiId, color); //保持指标颜色的临时一致性
}
const isLine = chartType.value==='line';
const commonConfig = getCommonSeriesConfig(isLine);
const series = selectedKPIs.value.map(kpiId => {
const kpi = kpiColumns.value.find(col=>col.kpiId ===kpiId);
if (!kpi) return null;
const color = kpiColors.get(kpiId)||generateColorRGBA();
kpiColors.set(kpiId, color);
return {
name: item.title,
name: kpi.title,
type: chartType.value, // 使用当前选择的图表类型
data:
chartData.value.length > 0
? chartData.value.map(dataItem => dataItem[item.kpiId] || 0)
: [0],
smooth: chartType.value === 'line', // 只在折线图时使用平滑
symbol: chartType.value === 'line' ? 'circle' : undefined, // 只在折线图时显示标记
symbolSize: chartType.value === 'line' ? 6 : undefined,
showSymbol: chartType.value === 'line',
data:chartData.value.map(item=>item[kpiId]||0),
itemStyle: { color },
...commonConfig,
};
});
}).filter(Boolean);
//图表配置对象
const option = {
title: {
@@ -267,20 +268,26 @@ const updateChart = () => {
},
tooltip: {
trigger: 'axis',
position: function (pt: any) {
return [pt[0], '10%'];
},
formatter: function (params: any[]) {
const time = params[0].axisValue;
let result = `${time}<br/>`;
params.forEach(param => {
const value = param.value === 0 ? '0' : param.value;
result += `${param.marker}${param.seriesName}: ${value}<br/>`;
});
return result;
}
},
legend: {
//图例配置
data: legendData,
data: selectedKPIs.value.map(kpiId=>kpiColumns.value.find(col=>col.kpiId===kpiId)?.title),
type: 'scroll',
orient: 'horizontal',
top: 25,
textStyle: {
fontSize: 12,
},
selected: Object.fromEntries(legendData.map(name => [name, true])),
selected:Object.fromEntries(selectedKPIs.value.map(kpiId=>[kpiId,true])),
show: true,
left: 'center',
width: '80%',
@@ -296,23 +303,26 @@ const updateChart = () => {
containLabel: true,
},
xAxis: {
//x轴配置
// 指定x轴类型为类目轴，适用于离散的类目数据
type: 'category',
boundaryGap: false,
data:
chartData.value.length > 0
? chartData.value.map(item => {
// 将时间戳转换为包含时分秒的格式
return dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss');
})
: [''],
// boundaryGap 控制坐标轴两边留白
// 当为折线图时(isLine为true)时不留白，柱状图时留白
// 这样可以让折线图从原点开始，柱状图有合适的间距
boundaryGap: isLine,
// 设置x轴的数据
// 将时间戳转换为格式化的时间字符串
data:chartData.value.map(item=>
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
),
// 设置坐标轴刻度标签的样式
axisLabel: {
formatter: (value: string) => {
// 自定义 x 轴标签的显示格式
return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
},
// 格式化函数，这里直接返回原值
formatter: (value: string) => value,
// 刻度标签旋转角度，0表示不旋转
rotate: 0,
interval: 'auto', // 自动计算显示<E698BE><E7A4BA>隔
// 自动计算标签显示的间隔，防止标签重叠
interval: 'auto', // 自动计算显示间隔
// 刻度标签对齐方式，右对齐
align: 'right',
},
},
@@ -329,10 +339,12 @@ const updateChart = () => {
},
series: series, //配置数据
};
chart.setOption(option); //使用新的配置更新图表
chart.resize(); //调整图表大小以适应容器
if(chart) {
requestAnimationFrame(() => {
chart!.setOption(option, true); //使用新的配置更新图表
chart!.resize(); //调整图表大小以适应容器
});
}
// 如果已经有 observer，先断开连接
if (observer) {
observer.disconnect();
@@ -351,6 +363,8 @@ const updateChart = () => {
observer.observe(container);
}
};
//chart可能为null判断
//钩子函数
onMounted(async () => {
@@ -380,15 +394,6 @@ onMounted(async () => {
}
});
// 定义指列类型
interface KPIColumn {
title: string;
dataIndex: string;
key: string;
kpiId: string;
neType: string; // 添加网元类型字段
}
// 存储指标列信
const kpiColumns = ref<KPIColumn[]>([]);
// 添加选中指标的的状态
@@ -587,7 +592,6 @@ const secondaryKPIs = computed(() => {
ALL_NE_TYPES.forEach(neType => {
// 获取当前网元类型的主要指标 ID
const primaryIds = TARGET_KPI_IDS[neType];
// 从所有指标中筛选出当前网元其他指标
groups[neType] = kpiColumns.value.filter(kpi => {
// 检查是否不在主要指标列表中
@@ -719,7 +723,6 @@ const handleSecondaryKPIChange = (kpiId: string, checked: boolean) => {
</a-modal>
</div>
</template>
<style scoped>
.kpi-overview {
padding: 20px;