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

style: KPI数据表格头提示信息

Browse Source
This commit is contained in:
TsMask
2025-01-17 15:30:22 +08:00
parent 8adf2a3dd0
commit 806cbbd9ed
3 changed files with 849 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,8 +53,6 @@ const route = useRoute();
const { t, currentLocale } = useI18n();
const ws = new WS();
echarts.use([
TooltipComponent,
GridComponent,
@@ -449,20 +447,19 @@ function fnGetList() {
return item[columns.key] ? Number(item[columns.key]) : 0;
});
// 计算总值
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 = values.length > 0
? Number((total / values.length).toFixed(2))
: 0;
const avg = values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
kpiStats.value.push({
kpiId: columns.key,
title: columns.title,
max: values.length > 0 ? Math.max(...values) : 0,
min: values.length > 0 ? Math.min(...values) : 0,
avg
avg,
});
}
}
@@ -487,16 +484,19 @@ 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'
: '#333',
},
},
xAxis: {
@@ -633,29 +633,31 @@ function fnRanderChartData() {
type: 'category',
boundaryGap: false,
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
splitLine: {
show: true,
lineStyle: {
color: getSplitLineColor()
}
color: getSplitLineColor(),
},
},
data: chartDataXAxisData,
},
yAxis: {
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
splitLine: {
show: true,
lineStyle: {
color: getSplitLineColor()
}
color: getSplitLineColor(),
},
},
},
series: chartDataYSeriesData,
@@ -784,59 +786,49 @@ function handleRowClick(record: any) {
// 监听主题变化
watch(
() => layoutStore.proConfig.theme, // 监听的值
(newValue) => {
newValue => {
if (kpiChart.value) {
const splitLineColor = getSplitLineColor();
// 绘制图数据
kpiChart.value.setOption(
{
kpiChart.value.setOption({
tooltip: {
trigger: 'axis',
position: function (pt: any) {
return [pt[0], '10%'];
},
confine: true, // 限制 tooltip 显示范围
backgroundColor: newValue === 'dark'
backgroundColor:
newValue === 'dark'
? 'rgba(48, 48, 48, 0.8)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: newValue === 'dark'
? '#555'
: '#ddd',
borderColor: newValue === 'dark' ? '#555' : '#ddd',
textStyle: {
color: newValue === 'dark'
? '#CACADA'
: '#333'
color: newValue === 'dark' ? '#CACADA' : '#333',
},
},
xAxis: {
axisLabel: {
color: newValue === 'dark'
? '#CACADA'
: '#333'
color: newValue === 'dark' ? '#CACADA' : '#333',
},
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
yAxis: {
axisLabel: {
color: newValue === 'dark'
? '#CACADA'
: '#333'
color: newValue === 'dark' ? '#CACADA' : '#333',
},
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
}
}
);
color: splitLineColor,
},
},
},
});
}
}
);
@@ -924,28 +916,50 @@ onBeforeUnmount(() => {
<template>
<PageContainer>
<a-card v-show="tableState.seached" :bordered="false" :body-style="{ marginBottom: '24px', paddingBottom: 0 }">
<a-card
v-show="tableState.seached"
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParamsFrom" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item name="neType" :label="t('views.ne.common.neType')">
<a-cascader v-model:value="state.neType" :options="neCascaderOptions" :allow-clear="false"
:placeholder="t('common.selectPlease')" />
<a-cascader
v-model:value="state.neType"
:options="neCascaderOptions"
:allow-clear="false"
:placeholder="t('common.selectPlease')"
/>
</a-form-item>
</a-col>
<a-col :lg="10" :md="12" :xs="24">
<a-form-item :label="t('views.perfManage.goldTarget.timeFrame')" name="timeFrame">
<a-range-picker v-model:value="queryRangePicker" bordered :allow-clear="false"
:show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss" value-format="x" :presets="ranges"
style="width: 100%"></a-range-picker>
<a-form-item
:label="t('views.perfManage.goldTarget.timeFrame')"
name="timeFrame"
>
<a-range-picker
v-model:value="queryRangePicker"
bordered
:allow-clear="false"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
:presets="ranges"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="2" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" :loading="tableState.loading" @click.prevent="fnGetListTitle()">
<a-button
type="primary"
:loading="tableState.loading"
@click.prevent="fnGetListTitle()"
>
<template #icon>
<SearchOutlined />
</template>
@@ -962,7 +976,11 @@ onBeforeUnmount(() => {
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-button type="primary" :loading="tableState.loading" @click.prevent="fnChangShowType()">
<a-button
type="primary"
:loading="tableState.loading"
@click.prevent="fnChangShowType()"
>
<template #icon>
<AreaChartOutlined />
</template>
@@ -972,8 +990,12 @@ onBeforeUnmount(() => {
: t('views.perfManage.goldTarget.kpiTableTitle')
}}
</a-button>
<a-button type="dashed" :loading="tableState.loading" @click.prevent="fnRecordExport()"
v-show="tableState.showTable">
<a-button
type="dashed"
:loading="tableState.loading"
@click.prevent="fnRecordExport()"
v-show="tableState.showTable"
>
<template #icon>
<ExportOutlined />
</template>
@@ -993,8 +1015,12 @@ onBeforeUnmount(() => {
</template>
</a-button>
</a-tooltip>
<TableColumnsDnd v-if="tableColumns.length > 0" :cache-id="`kpiTarget_${state.neType[0]}`"
:columns="tableColumns" v-model:columns-dnd="tableColumnsDnd"></TableColumnsDnd>
<TableColumnsDnd
v-if="tableColumns.length > 0"
:cache-id="`kpiTarget_${state.neType[0]}`"
:columns="tableColumns"
v-model:columns-dnd="tableColumnsDnd"
></TableColumnsDnd>
<a-tooltip>
<template #title>{{ t('common.sizeText') }}</template>
<a-dropdown trigger="click" placement="bottomRight">
@@ -1004,7 +1030,10 @@ onBeforeUnmount(() => {
</template>
</a-button>
<template #overlay>
<a-menu :selected-keys="[tableState.size as string]" @click="fnTableSize">
<a-menu
:selected-keys="[tableState.size as string]"
@click="fnTableSize"
>
<a-menu-item key="default">
{{ t('common.size.default') }}
</a-menu-item>
@@ -1033,32 +1062,108 @@ onBeforeUnmount(() => {
size="small"
/>
</a-form-item> -->
<a-form-item :label="t('views.perfManage.goldTarget.realTimeData')" name="chartRealTime">
<a-switch :disabled="tableState.loading" v-model:checked="state.chartRealTime"
:checked-children="t('common.switch.open')" :un-checked-children="t('common.switch.shut')"
@change="fnRealTimeSwitch" size="small" />
<a-form-item
:label="t('views.perfManage.goldTarget.realTimeData')"
name="chartRealTime"
>
<a-switch
:disabled="tableState.loading"
v-model:checked="state.chartRealTime"
:checked-children="t('common.switch.open')"
:un-checked-children="t('common.switch.shut')"
@change="fnRealTimeSwitch"
size="small"
/>
</a-form-item>
</a-form>
</template>
<!-- 表格列表 -->
<a-table v-show="tableState.showTable" class="table" row-key="id" :columns="tableColumnsDnd"
:loading="tableState.loading" :data-source="tableState.data" :size="tableState.size"
:pagination="tablePagination" :scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
@resizeColumn="(w: number, col: any) => (col.width = w)" :show-expand-column="false" @change="fnTableChange">
<a-table
v-show="tableState.showTable"
class="table"
row-key="id"
:columns="tableColumnsDnd"
:loading="tableState.loading"
:data-source="tableState.data"
:size="tableState.size"
:pagination="tablePagination"
:scroll="{ x: tableColumnsDnd.length * 200, y: 'calc(100vh - 480px)' }"
@resizeColumn="(w: number, col: any) => (col.width = w)"
:show-expand-column="false"
@change="fnTableChange"
>
</a-table>
<!-- 图表 -->
<div style="padding: 24px" v-show="!tableState.showTable">
<div ref="kpiChartDom" class="chart-container" style="height: 450px; width: 100%"></div>
<div
ref="kpiChartDom"
class="chart-container"
style="height: 450px; width: 100%"
></div>
<div class="table-container">
<a-table :columns="statsColumns" :data-source="kpiStats" :pagination="false" :scroll="{ y: 250 }" size="small"
:custom-row="record => ({
<a-table
:columns="statsColumns"
:data-source="kpiStats"
:pagination="false"
:scroll="{ y: 250 }"
size="small"
:custom-row="
record => ({
onClick: () => handleRowClick(record),
class: selectedRow.includes(record.kpiId) ? 'selected-row' : ''
class: selectedRow.includes(record.kpiId) ? 'selected-row' : '',
})
" />
"
>
<template #headerCell="{ column }">
<template v-if="column.key === 'total'">
<span>
{{ t('views.perfManage.kpiOverView.totalValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Sum within Time Range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'avg'">
<span>
{{ t('views.perfManage.kpiOverView.avgValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Average value over the time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'max'">
<span>
{{ t('views.perfManage.kpiOverView.maxValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Maximum value in time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'min'">
<span>
{{ t('views.perfManage.kpiOverView.minValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Minimum value in the time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
</template>
</a-table>
</div>
</div>
</a-card>

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

@@ -1,8 +1,20 @@
<script setup lang="ts">
import * as echarts from 'echarts';
import { PageContainer } from 'antdv-pro-layout';
import { onMounted, reactive, ref, markRaw, nextTick, onUnmounted, watch, h } from 'vue';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import {
onMounted,
reactive,
ref,
markRaw,
nextTick,
onUnmounted,
watch,
h,
} from 'vue';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { SizeType } from 'ant-design-vue/es/config-provider';
import { listKPIData, getKPITitle } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n';
@@ -23,12 +35,19 @@ const { t, currentLocale } = useI18n();
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'),value:[dayjs().startOf('day'), dayjs()]},
])
{
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'),
value: [dayjs().startOf('day'), dayjs()],
},
]);
//WebSocket连接
const ws = ref<WS | null>(null);
@@ -40,13 +59,25 @@ const handleRealTimeSwitch = (checked: any) => {
};
// 定义所有网元类型
const ALL_NE_TYPES = ['ims', 'amf', 'udm', 'upf','smf', 'pcf', 'mme', 'mocngw', 'smsc', 'cbc', 'ausf'] as const;
const ALL_NE_TYPES = [
'ims',
'amf',
'udm',
'upf',
'smf',
'pcf',
'mme',
'mocngw',
'smsc',
'cbc',
'ausf',
] as const;
type AllChartType = (typeof ALL_NE_TYPES)[number] & string;
// 在 ALL_NE_TYPES 定义之后添加 小写转大写
const neTypeOptions = ALL_NE_TYPES.map(type => ({
label: type.toUpperCase(),
value: type
value: type,
}));
// 使用 ref 来使 networkElementTypes 变为响应式，并使用 ALL_NE_TYPES 初始化
@@ -59,7 +90,9 @@ const selectedNeTypes = ref<AllChartType[]>([]);
const latestSelectedTypes = ref<AllChartType[]>([]);
// watch 监控函数
watch(selectedNeTypes, async (newTypes, oldTypes) => {
watch(
selectedNeTypes,
async (newTypes, oldTypes) => {
networkElementTypes.value = [...newTypes];
latestSelectedTypes.value = [...newTypes];
@@ -96,7 +129,8 @@ watch(selectedNeTypes, async (newTypes, oldTypes) => {
for (const type of newTypes) {
try {
// 只有当图表不存在或者是新增的类型时才初始化
const needsInit = !chartStates[type].chart.value || addedTypes.includes(type);
const needsInit =
!chartStates[type].chart.value || addedTypes.includes(type);
if (needsInit) {
await fetchKPITitle(type);
@@ -125,7 +159,9 @@ watch(selectedNeTypes, async (newTypes, oldTypes) => {
const options: OptionsType = {
url: '/ws',
params: {
subGroupID: newTypes.map(type => `10_${type.toUpperCase()}_001`).join(','),
subGroupID: newTypes
.map(type => `10_${type.toUpperCase()}_001`)
.join(','),
},
onmessage: wsMessage,
onerror: wsError,
@@ -135,19 +171,24 @@ watch(selectedNeTypes, async (newTypes, oldTypes) => {
// 保存选中的网元类型到本地存储
localStorage.setItem('selectedNeTypes', JSON.stringify(newTypes));
}, { deep: true });
},
{ deep: true }
);
// 防抖函数
useDebounceFn(() => {
// 比较当前选择和最新选择
if (JSON.stringify(latestSelectedTypes.value) !== JSON.stringify(selectedNeTypes.value)) {
if (
JSON.stringify(latestSelectedTypes.value) !==
JSON.stringify(selectedNeTypes.value)
) {
// 如果不一致，以最新选择为准
selectedNeTypes.value = latestSelectedTypes.value;
}
const newTypes = selectedNeTypes.value;
// 确保 chartStates 包含新的网元类型
newTypes.forEach((type) => {
newTypes.forEach(type => {
if (!chartStates[type]) {
chartStates[type] = createChartState(type);
}
@@ -168,7 +209,7 @@ const initCharts = async () => {
const savedChartStates = new Map(Object.entries(chartStates));
// 清除不再需要的图表
Object.keys(chartStates).forEach((key) => {
Object.keys(chartStates).forEach(key => {
if (!networkElementTypes.value.includes(key as AllChartType)) {
const state = chartStates[key as AllChartType];
if (state.chart.value) {
@@ -226,7 +267,9 @@ const createChartState = (neType: AllChartType) => {
const chartDom = ref<HTMLElement | null>(null);
const chart = ref<echarts.ECharts | null>(null);
const observer = ref<ResizeObserver | null>(null);
const currentTheme = ref<string | null>(document.documentElement.getAttribute('data-theme'));
const currentTheme = ref<string | null>(
document.documentElement.getAttribute('data-theme')
);
const themeObserver = ref<MutationObserver | null>(null);
return {
@@ -252,7 +295,10 @@ const createChartState = (neType: AllChartType) => {
};
// 图表类型状态
const chartStates: Record<AllChartType, ReturnType<typeof createChartState>> = Object.fromEntries(
const chartStates: Record<
AllChartType,
ReturnType<typeof createChartState>
> = Object.fromEntries(
networkElementTypes.value.map(type => [type, createChartState(type)])
) as Record<AllChartType, ReturnType<typeof createChartState>>;
@@ -263,14 +309,19 @@ interface RangePicker extends Record<AllChartType, [string, string]> {
// 日期选择器状态
const rangePicker = reactive<RangePicker>({
...Object.fromEntries(networkElementTypes.value.map(type => [
...(Object.fromEntries(
networkElementTypes.value.map(type => [
type,
[
dayjs().subtract(1, 'hour').startOf('hour').valueOf().toString(), // 上一小时开始
dayjs().startOf('hour').add(1, 'hour').valueOf().toString(), // 当前小时结束
]
])) as Record<AllChartType, [string, string]>,
placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string],
],
])
) as Record<AllChartType, [string, string]>),
placeholder: [
t('views.monitor.monitor.startTime'),
t('views.monitor.monitor.endTime'),
] as [string, string],
});
// 可复用的图表初始化函数
@@ -284,7 +335,8 @@ const initChart = (type: AllChartType) => {
}
// 更新当前主题
state.currentTheme.value = document.documentElement.getAttribute('data-theme');
state.currentTheme.value =
document.documentElement.getAttribute('data-theme');
// 等待 DOM 更新
await nextTick();
@@ -292,10 +344,14 @@ const initChart = (type: AllChartType) => {
const container = state.chartDom.value;
if (!container) {
if (retries > 0) {
console.warn(`Chart container for ${type} not found, retrying... (${retries} attempts left)`);
console.warn(
`Chart container for ${type} not found, retrying... (${retries} attempts left)`
);
setTimeout(() => tryInit(retries - 1), 100);
} else {
console.error(`Chart container for ${type} not found after multiple attempts`);
console.error(
`Chart container for ${type} not found after multiple attempts`
);
}
return;
}
@@ -314,12 +370,19 @@ const initChart = (type: AllChartType) => {
if (!state.chart.value) return;
const splitLineColor = getSplitLineColor();
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
const isDark =
document.documentElement.getAttribute('data-theme') === 'dark';
const option = {
tooltip: {
trigger: 'axis',
position: function (point: number[], _params: any, _dom: HTMLElement, _rect: any, size: { viewSize: number[], contentSize: number[] }) {
position: function (
point: number[],
_params: any,
_dom: HTMLElement,
_rect: any,
size: { viewSize: number[]; contentSize: number[] }
) {
const [x] = point;
const [viewWidth] = size.viewSize;
const [tooltipWidth] = size.contentSize;
@@ -338,17 +401,19 @@ const initChart = (type: AllChartType) => {
},
axisPointer: {
type: 'line',
z: 0
z: 0,
},
className: `chart-tooltip-${type}`,
z: 1000,
extraCssText: 'z-index: 1000; pointer-events: none;',
confine: true,
backgroundColor: isDark ? 'rgba(48, 48, 48, 0.8)' : 'rgba(255, 255, 255, 0.9)',
backgroundColor: isDark
? 'rgba(48, 48, 48, 0.8)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: isDark ? '#555' : '#ddd',
textStyle: {
color: isDark ? '#CACADA' : '#333'
}
color: isDark ? '#CACADA' : '#333',
},
},
xAxis: {
type: 'category',
@@ -356,30 +421,30 @@ const initChart = (type: AllChartType) => {
data: state.chartDataXAxisData,
axisLabel: {
formatter: '{value}',
color: isDark ? '#CACADA' : '#333'
color: isDark ? '#CACADA' : '#333',
},
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value}',
color: isDark ? '#CACADA' : '#333'
color: isDark ? '#CACADA' : '#333',
},
splitNumber: 5,
scale: true,
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
legend: {
type: 'scroll',
@@ -392,7 +457,9 @@ const initChart = (type: AllChartType) => {
show: false,
icon: 'circle',
selected: state.chartLegendSelected,
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.9)',
backgroundColor: isDark
? 'rgba(0, 0, 0, 0.2)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: isDark ? '#555' : '#ddd',
},
grid: {
@@ -401,7 +468,9 @@ const initChart = (type: AllChartType) => {
bottom: '15%',
},
series: state.chartDataYSeriesData.map(series => {
const color = state.seriesColors.get(series.customKey as string) || generateColorRGBA();
const color =
state.seriesColors.get(series.customKey as string) ||
generateColorRGBA();
return {
...series,
itemStyle: { color },
@@ -428,13 +497,14 @@ const initChart = (type: AllChartType) => {
}
const observer = new MutationObserver(() => {
state.currentTheme.value = document.documentElement.getAttribute('data-theme');
state.currentTheme.value =
document.documentElement.getAttribute('data-theme');
updateChartTheme(type);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme']
attributeFilter: ['data-theme'],
});
// 正确地设置 ref 的值
@@ -505,7 +575,7 @@ function fnRealTimeSwitch(bool: boolean) {
if (state.chart.value) {
state.chart.value.setOption({
xAxis: { data: [] },
series: state.chartDataYSeriesData
series: state.chartDataYSeriesData,
});
}
});
@@ -513,7 +583,9 @@ function fnRealTimeSwitch(bool: boolean) {
const options: OptionsType = {
url: '/ws',
params: {
subGroupID: selectedNeTypes.value.map(type => `10_${type.toUpperCase()}_001`).join(','),
subGroupID: selectedNeTypes.value
.map(type => `10_${type.toUpperCase()}_001`)
.join(','),
},
onmessage: wsMessage,
onerror: wsError,
@@ -534,7 +606,6 @@ function fnRealTimeSwitch(bool: boolean) {
// 接收数据后错误回调
function wsError() {
message.error(t('common.websocketError'));
}
@@ -559,7 +630,9 @@ function wsMessage(res: Record<string, any>) {
return;
}
const newTime = parseDateToStr(kpiEvent.timeGroup ? +kpiEvent.timeGroup : Date.now());
const newTime = parseDateToStr(
kpiEvent.timeGroup ? +kpiEvent.timeGroup : Date.now()
);
// 只有在实时数据模式下才更新图表
if (realTimeEnabled.value) {
@@ -596,7 +669,7 @@ function wsMessage(res: Record<string, any>) {
if (state.chart.value) {
state.chart.value.setOption({
xAxis: { data: state.chartDataXAxisData },
series: state.chartDataYSeriesData as SeriesOption[]
series: state.chartDataYSeriesData as SeriesOption[],
});
}
@@ -629,7 +702,8 @@ const renderChart = async (type: AllChartType) => {
// 处理数据
for (const column of state.tableColumns.value) {
if (['neName', 'startIndex', 'timeGroup'].includes(column.key as string)) continue;
if (['neName', 'startIndex', 'timeGroup'].includes(column.key as string))
continue;
// 检查是否已有该指标的颜色，如果没有才生成新颜色
let color = state.seriesColors.get(column.key as string);
@@ -672,11 +746,14 @@ const renderChart = async (type: AllChartType) => {
// 更新图表时考虑当前选中状态
const legendSelected: Record<string, boolean> = {};
state.chartDataYSeriesData.forEach(series => {
const title = state.tableColumns.value.find(col => col.key === series.customKey)?.title || series.customKey;
const title =
state.tableColumns.value.find(col => col.key === series.customKey)
?.title || series.customKey;
if (typeof title === 'string') {
// 如果没有选中的指标或选中列表为空，显示所有指标
// 否则只显示选中的指标
legendSelected[title] = !currentSelectedKpiIds.length ||
legendSelected[title] =
!currentSelectedKpiIds.length ||
currentSelectedKpiIds.includes(series.customKey as string);
}
});
@@ -687,14 +764,17 @@ const renderChart = async (type: AllChartType) => {
legend: {
selected: legendSelected,
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#646A73',
},
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark'
backgroundColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? 'rgba(0, 0, 0, 0.2)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: document.documentElement.getAttribute('data-theme') === 'dark'
borderColor:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
},
@@ -704,16 +784,17 @@ const renderChart = async (type: AllChartType) => {
boundaryGap: false,
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
splitLine: {
show: true,
lineStyle: {
color: getSplitLineColor()
}
}
color: getSplitLineColor(),
},
},
},
series: state.chartDataYSeriesData as SeriesOption[],
},
@@ -721,10 +802,12 @@ const renderChart = async (type: AllChartType) => {
);
};
// 获网元指标据
const fetchKPITitle = async (type: AllChartType) => {
const language = currentLocale.value.split('_')[0] === 'zh' ? 'cn' : currentLocale.value.split('_')[0];
const language =
currentLocale.value.split('_')[0] === 'zh'
? 'cn'
: currentLocale.value.split('_')[0];
try {
const res = await getKPITitle(type.toUpperCase());
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
@@ -742,7 +825,7 @@ const fetchKPITitle = async (type: AllChartType) => {
fixed: 'left',
customRender: ({ text }: { text: string }) => {
return dayjs(Number(text)).format('YYYY-MM-DD HH:mm:ss');
}
},
},
...res.data.map(item => {
const kpiId = item.kpiId;
@@ -761,7 +844,7 @@ const fetchKPITitle = async (type: AllChartType) => {
minWidth: 150,
maxWidth: 300,
};
})
}),
];
// 更新颜色映射
@@ -805,11 +888,14 @@ const themeObserver = new MutationObserver(() => {
// 重新计算图例选中状态
const legendSelected: Record<string, boolean> = {};
state.chartDataYSeriesData.forEach(series => {
const title = state.tableColumns.value.find(col => col.key === series.customKey)?.title || series.customKey;
const title =
state.tableColumns.value.find(col => col.key === series.customKey)
?.title || series.customKey;
if (typeof title === 'string') {
// 如果没有选中的指标或选中列表为空，显示所有指标
// 否则只显示选中的指标
legendSelected[title] = !currentSelectedKpiIds.length ||
legendSelected[title] =
!currentSelectedKpiIds.length ||
currentSelectedKpiIds.includes(series.customKey as string);
}
});
@@ -817,7 +903,13 @@ const themeObserver = new MutationObserver(() => {
const option = {
tooltip: {
trigger: 'axis',
position: function (point: number[], _params: any, _dom: HTMLElement, _rect: any, size: { viewSize: number[], contentSize: number[] }) {
position: function (
point: number[],
_params: any,
_dom: HTMLElement,
_rect: any,
size: { viewSize: number[]; contentSize: number[] }
) {
const [x] = point;
const [viewWidth] = size.viewSize;
const [tooltipWidth] = size.contentSize;
@@ -836,58 +928,64 @@ const themeObserver = new MutationObserver(() => {
},
axisPointer: {
type: 'line',
z: 0
z: 0,
},
className: `chart-tooltip-${state.neType}`,
z: 1000,
extraCssText: 'z-index: 1000; pointer-events: none;',
confine: true,
backgroundColor: isDark ? 'rgba(48, 48, 48, 0.8)' : 'rgba(255, 255, 255, 0.9)',
backgroundColor: isDark
? 'rgba(48, 48, 48, 0.8)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: isDark ? '#555' : '#ddd',
textStyle: {
color: isDark ? '#CACADA' : '#333'
}
color: isDark ? '#CACADA' : '#333',
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: state.chartDataXAxisData,
axisLabel: {
color: isDark ? '#CACADA' : '#333'
color: isDark ? '#CACADA' : '#333',
},
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLabel: {
color: isDark ? '#CACADA' : '#333'
color: isDark ? '#CACADA' : '#333',
},
splitNumber: 5,
scale: true,
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
legend: {
show: false,
selected: legendSelected,
textStyle: {
color: isDark ? '#CACADA' : '#646A73'
color: isDark ? '#CACADA' : '#646A73',
},
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.9)',
backgroundColor: isDark
? 'rgba(0, 0, 0, 0.2)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: isDark ? '#555' : '#ddd',
},
series: state.chartDataYSeriesData.map(series => {
const color = state.seriesColors.get(series.customKey as string) as string;
const color = state.seriesColors.get(
series.customKey as string
) as string;
return {
...series,
type: 'line',
@@ -902,14 +1000,14 @@ const themeObserver = new MutationObserver(() => {
{ offset: 1, color: color.replace(')', ',0.3)') },
]),
},
data: series.data
data: series.data,
};
})
}),
};
chart.setOption(option, {
notMerge: false,
lazyUpdate: false
lazyUpdate: false,
});
// 强制重新渲染
@@ -945,7 +1043,9 @@ onMounted(async () => {
// 从本地存储中读取选中的网元类型
const savedSelectedNeTypes = localStorage.getItem('selectedNeTypes');
if (savedSelectedNeTypes) {
const parsedSelectedNeTypes = JSON.parse(savedSelectedNeTypes) as AllChartType[];
const parsedSelectedNeTypes = JSON.parse(
savedSelectedNeTypes
) as AllChartType[];
selectedNeTypes.value = parsedSelectedNeTypes;
networkElementTypes.value = parsedSelectedNeTypes;
} else {
@@ -957,7 +1057,7 @@ onMounted(async () => {
// 添加主题观察器
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme']
attributeFilter: ['data-theme'],
});
await initCharts();
@@ -968,7 +1068,7 @@ onUnmounted(() => {
if (ws.value && ws.value.state() === WebSocket.OPEN) {
ws.value.close();
}
Object.values(chartStates).forEach((state) => {
Object.values(chartStates).forEach(state => {
if (state.chart.value) {
state.chart.value.dispose();
}
@@ -996,7 +1096,8 @@ const getKpiStats = (type: AllChartType) => {
const state = chartStates[type];
if (!state?.chartDataYSeriesData) return [];
return state.chartDataYSeriesData.map(series => {
return state.chartDataYSeriesData
.map(series => {
const kpiId = series.customKey as string;
const column = state.tableColumns.value.find(col => col.key === kpiId);
if (!column) return null;
@@ -1009,13 +1110,16 @@ const getKpiStats = (type: AllChartType) => {
title: column.title as string,
max: values.length > 0 ? Math.max(...values) : 0,
min: values.length > 0 ? Math.min(...values) : 0,
neType: type
neType: type,
};
}).filter((item): item is KPIStats => item !== null);
})
.filter((item): item is KPIStats => item !== null);
};
// 修改选中行的状态，改为数组存储个选中的指标ID
const selectedRows = ref<Record<AllChartType, string[]>>({} as Record<AllChartType, string[]>);
const selectedRows = ref<Record<AllChartType, string[]>>(
{} as Record<AllChartType, string[]>
);
// 修改处理行点击的方法，支持多选
const handleRowClick = (record: KPIStats, type: AllChartType) => {
@@ -1041,7 +1145,10 @@ const handleRowClick = (record: KPIStats, type: AllChartType) => {
};
// 修改更新图表图例选中的方法，支持多选
const updateChartLegendSelect = (type: AllChartType, selectedKpiIds?: string[]) => {
const updateChartLegendSelect = (
type: AllChartType,
selectedKpiIds?: string[]
) => {
const state = chartStates[type];
const chart = state?.chart?.value;
if (!chart) return;
@@ -1053,11 +1160,15 @@ const updateChartLegendSelect = (type: AllChartType, selectedKpiIds?: string[])
const legendSelected: Record<string, boolean> = {};
state.chartDataYSeriesData.forEach(series => {
const title = state.tableColumns.value.find(col => col.key === series.customKey)?.title || series.customKey;
const title =
state.tableColumns.value.find(col => col.key === series.customKey)
?.title || series.customKey;
if (typeof title === 'string') {
// 如果没有选中的指标或选中列表为空，显示所有指标
// 否则只显示选中的指标
legendSelected[title] = !selectedKpiIds?.length || selectedKpiIds.includes(series.customKey as string);
legendSelected[title] =
!selectedKpiIds?.length ||
selectedKpiIds.includes(series.customKey as string);
}
});
@@ -1070,9 +1181,11 @@ const updateChartLegendSelect = (type: AllChartType, selectedKpiIds?: string[])
textStyle: {
color: isDark ? '#CACADA' : '#646A73',
},
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.9)',
backgroundColor: isDark
? 'rgba(0, 0, 0, 0.2)'
: 'rgba(255, 255, 255, 0.9)',
borderColor: isDark ? '#555' : '#ddd',
}
},
});
};
@@ -1092,9 +1205,9 @@ const statsColumns: TableColumnType<KPIStats>[] = [
color: color || '#000',
fontSize: '40px',
fontWeight: 'bold',
} as Record<string, string>
} as Record<string, string>,
});
}
},
},
{
title: t('views.perfManage.kpiOverView.kpiName'),
@@ -1117,7 +1230,7 @@ const statsColumns: TableColumnType<KPIStats>[] = [
width: '30%',
sorter: (a: KPIStats, b: KPIStats) => a.min - b.min,
sortDirections: ['ascend', 'descend'] as ('ascend' | 'descend')[],
}
},
];
// 1. 添加 tab 切换处理函数
@@ -1142,7 +1255,13 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
<a-form layout="horizontal">
<a-row :gutter="16">
<a-col :lg="4" :md="24" :xs="24">
<a-form-item :label="realTimeEnabled ? t('views.dashboard.cdr.realTimeDataStop'):t('views.dashboard.cdr.realTimeDataStart')">
<a-form-item
:label="
realTimeEnabled
? t('views.dashboard.cdr.realTimeDataStop')
: t('views.dashboard.cdr.realTimeDataStart')
"
>
<a-switch
v-model:checked="realTimeEnabled"
@change="handleRealTimeSwitch"
@@ -1150,7 +1269,10 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
</a-form-item>
</a-col>
<a-col :lg="20" :md="24" :xs="24">
<a-form-item :label="t('views.ne.common.neType')" class="ne-type-select">
<a-form-item
:label="t('views.ne.common.neType')"
class="ne-type-select"
>
<a-checkbox-group
v-model:value="selectedNeTypes"
:options="neTypeOptions"
@@ -1192,11 +1314,19 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
</template>
<div class="card-content">
<div class="chart-container">
<div :ref="el => { if (el && chartStates[type]) chartStates[type].chartDom.value = el as HTMLElement }"></div>
<div
:ref="el => { if (el && chartStates[type]) chartStates[type].chartDom.value = el as HTMLElement }"
></div>
</div>
<div class="table-container">
<a-tabs default-active-key="stats" @change="(key:any) => handleTabChange(key, type)">
<a-tab-pane key="stats" :tab="t('views.perfManage.kpiKeyTarget.statistics')">
<a-tabs
default-active-key="stats"
@change="(key:any) => handleTabChange(key, type)"
>
<a-tab-pane
key="stats"
:tab="t('views.perfManage.kpiKeyTarget.statistics')"
>
<a-table
:columns="statsColumns"
:data-source="getKpiStats(type)"
@@ -1204,13 +1334,67 @@ const handleTabChange = async (activeKey: string, type: AllChartType) => {
size="small"
:scroll="{ y: 'true' }"
:loading="chartStates[type].tableState.loading"
:custom-row="(record) => ({
:custom-row="
record => ({
onClick: () => handleRowClick(record, type),
class: selectedRows[type]?.includes(record.kpiId) ? 'selected-row' : ''
})"
/>
class: selectedRows[type]?.includes(record.kpiId)
? 'selected-row'
: '',
})
"
>
<template #headerCell="{ column }">
<template v-if="column.key === 'total'">
<span>
{{ t('views.perfManage.kpiOverView.totalValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Sum within Time Range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'avg'">
<span>
{{ t('views.perfManage.kpiOverView.avgValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Average value over the time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'max'">
<span>
{{ t('views.perfManage.kpiOverView.maxValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Maximum value in time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'min'">
<span>
{{ t('views.perfManage.kpiOverView.minValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Minimum value in the time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
</template>
</a-table>
</a-tab-pane>
<a-tab-pane key="raw" :tab="t('views.perfManage.kpiKeyTarget.rawData')">
<a-tab-pane
key="raw"
:tab="t('views.perfManage.kpiKeyTarget.rawData')"
>
<a-table
:columns="chartStates[type].tableColumns.value"
:data-source="chartStates[type].tableState.data"

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

@@ -1,13 +1,21 @@
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, computed, h } from 'vue';
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent, TitleComponent,LegendComponent } from 'echarts/components';
import {
GridComponent,
TooltipComponent,
TitleComponent,
LegendComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n';
import { message,} from 'ant-design-vue';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { message } from 'ant-design-vue';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { OptionsType, WS } from '@/plugins/ws-websocket';
@@ -35,7 +43,7 @@ const tableLoading = ref(false);
const rangeLoading = ref(false);
//网元类型定义
const ALL_NE_TYPES = ['AMF', 'SMF', 'UPF', 'MME', 'IMS', 'SMSC'] as const;
type NeType= typeof ALL_NE_TYPES[number];
type NeType = (typeof ALL_NE_TYPES)[number];
echarts.use([
LineChart,
@@ -61,12 +69,19 @@ const ws = ref<WS | null>(null);
// [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'),value:[dayjs().startOf('day'), dayjs()]},
])
{
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'),
value: [dayjs().startOf('day'), dayjs()],
},
]);
//日期范围响应式变量
const dateRange = ref<[string, string]>([
dayjs().subtract(1, 'hour').startOf('hour').valueOf().toString(), // 上一小时开始
@@ -181,18 +196,20 @@ const wsMessage = (res:Record<string,any>)=>{
const processChartData = (rawData: any[]) => {
const groupedData = new Map<string, any>(); //数据按时间分组
rawData.forEach(item => {//合并相同时间点的数据
rawData.forEach(item => {
//合并相同时间点的数据
const timeKey = item.timeGroup;
if (!groupedData.has(timeKey)) {//按时间排序
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 => {//转换成图表需要的格式
.map(item => {
//转换成图表需要的格式
const dataItem: ChartDataItem = { date: item.timeGroup.toString() };
selectedKPIs.value.forEach(kpiId => {
dataItem[kpiId] = Number(item[kpiId]) || 0;
@@ -216,7 +233,7 @@ const fetchChartData = async () => {
}
// 创建并行请求数组
const requests = ALL_NE_TYPES.map(async (neType) => {
const requests = ALL_NE_TYPES.map(async neType => {
const params = {
neType,
neId: '001',
@@ -289,7 +306,8 @@ const themeObserver = new MutationObserver(() => {
kpiColors.set(kpiId, color);
});
// 使用存储的颜色更新图表系列
const series = selectedKPIs.value.map(kpiId => {
const series = selectedKPIs.value
.map(kpiId => {
const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
if (!kpi) return null;
@@ -300,16 +318,18 @@ const themeObserver = new MutationObserver(() => {
itemStyle: { color: kpiColors.get(kpiId) },
...getSeriesConfig(),
};
}).filter(Boolean);
})
.filter(Boolean);
const option = {
title: {
text: t('views.perfManage.kpiOverView.kpiChartTitle'),
left: 'center',
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
}
: '#333',
},
},
xAxis: {
// 保持现有的 xAxis 配置
@@ -319,61 +339,68 @@ const themeObserver = new MutationObserver(() => {
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
),
axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
splitNumber: 5,
scale: true,
splitLine: {
show: true,
lineStyle: {
color: splitLineColor
}
}
color: splitLineColor,
},
},
},
legend: {
show: false,
selected: Object.fromEntries(
selectedKPIs.value.map(kpiId => [
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
selectedRows.value.length === 0 ? true : selectedRows.value.includes(kpiId)
selectedRows.value.length === 0
? true
: selectedRows.value.includes(kpiId),
])
)
),
},
tooltip: {
trigger: 'axis',
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'
: '#333',
},
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);'
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);',
},
// 重新设置系列数据
series
series,
};
// 使用新的配置更新图表
@@ -393,7 +420,8 @@ const updateChart = () => {
//获取图表配置
const commonConfig = getSeriesConfig();
//构建数据系列
const series = selectedKPIs.value.map(kpiId => {
const series = selectedKPIs.value
.map(kpiId => {
const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
if (!kpi) return null;
//为每个KPI分配临时的固定颜色
@@ -407,7 +435,8 @@ const updateChart = () => {
itemStyle: { color },
...commonConfig,
};
}).filter(Boolean);
})
.filter(Boolean);
const option = {
title: {
@@ -415,29 +444,34 @@ const updateChart = () => {
left: 'center',
// 添加文字颜色配置，根据主题切换
textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
}
: '#333',
},
},
tooltip: {
trigger: 'axis',
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'
: '#333',
},
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);'
extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);',
},
legend: {
data: selectedKPIs.value.map(kpiId =>
data: selectedKPIs.value.map(
kpiId =>
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId
),
type: 'scroll',
@@ -449,7 +483,9 @@ const updateChart = () => {
selected: Object.fromEntries(
selectedKPIs.value.map(kpiId => [
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
selectedRows.value.length === 0 ? true : selectedRows.value.includes(kpiId)
selectedRows.value.length === 0
? true
: selectedRows.value.includes(kpiId),
])
),
show: false,
@@ -470,15 +506,16 @@ const updateChart = () => {
type: 'category',
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
splitLine: {
show: true,
lineStyle: {
color: getSplitLineColor()
}
color: getSplitLineColor(),
},
},
//控制坐标轴两边留白
// 当为折线图时(isLine为true)时不留白，柱状图时留白
@@ -519,9 +556,10 @@ const updateChart = () => {
type: 'value',
axisLabel: {
formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark'
color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333'
: '#333',
},
// 添加自计算的分割段数
splitNumber: 5,
@@ -530,9 +568,9 @@ const updateChart = () => {
splitLine: {
show: true,
lineStyle: {
color: getSplitLineColor()
}
}
color: getSplitLineColor(),
},
},
},
series: series, //配置数据
};
@@ -561,8 +599,6 @@ const updateChart = () => {
}
};
//钩子函数
onMounted(async () => {
try {
@@ -588,7 +624,7 @@ onMounted(async () => {
// 添加主题观察器
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme']
attributeFilter: ['data-theme'],
});
} catch (error) {
console.error('Failed to initialize:', error);
@@ -603,7 +639,8 @@ const selectedKPIs = ref<string[]>(Object.values(TARGET_KPI_IDS).flat());
// 获取网元指标
const fetchSpecificKPI = async () => {
const language = currentLocale.value.split('_')[0] === 'zh'
const language =
currentLocale.value.split('_')[0] === 'zh'
? 'cn'
: currentLocale.value.split('_')[0];
@@ -668,7 +705,8 @@ const updateChartData = (newData: ChartDataItem) => {
return;
}
chartData.value.push(newData);
if (chartData.value.length > 100) {//100改为50
if (chartData.value.length > 100) {
//100改为50
chartData.value.shift(); //大于100条时删除最早的数据
}
//使用try-catch包裹图表更新逻辑
@@ -697,7 +735,6 @@ const updateChartData = (newData: ChartDataItem) => {
}
};
// 添加一个接口定义指标统计数据的类型
interface KPIStats {
kpiId: string;
@@ -718,7 +755,8 @@ const updateKpiStats = () => {
kpiStats.value = [];
return;
}
kpiStats.value = selectedKPIs.value.map(kpiId => {
kpiStats.value = selectedKPIs.value
.map(kpiId => {
// 找到对应的KPI标题
const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
if (!kpi) return null;
@@ -727,12 +765,13 @@ const updateKpiStats = () => {
const values = chartData.value.map(item => Number(item[kpiId]) || 0);
// 计算总值
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 = values.length > 0
? Number((total / values.length).toFixed(2))
: 0;
const avg =
values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
return {
kpiId: kpiId,
@@ -740,12 +779,12 @@ const updateKpiStats = () => {
max: Math.max(...values),
min: Math.min(...values),
avg: avg,
total: total
total: total,
};
}).filter((item): item is KPIStats => item !== null);
})
.filter((item): item is KPIStats => item !== null);
};
// 添加表列定义
const statsColumns: TableColumnType<KPIStats>[] = [
{
@@ -761,9 +800,9 @@ const statsColumns: TableColumnType<KPIStats>[] = [
color: color || '#000', // 使用与折线图相同的颜色
fontSize: '30px', // 增大图标尺寸到30px
fontWeight: 'bold', // 加粗
}
},
});
}
},
},
{
title: t('views.perfManage.kpiOverView.kpiName'),
@@ -829,14 +868,16 @@ const updateChartLegendSelect = () => {
const legendSelected = Object.fromEntries(
selectedKPIs.value.map(kpiId => [
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId,
selectedRows.value.length === 0 ? true : selectedRows.value.includes(kpiId)
selectedRows.value.length === 0
? true
: selectedRows.value.includes(kpiId),
])
);
chart.setOption({
legend: {
selected: legendSelected
}
selected: legendSelected,
},
});
};
@@ -844,7 +885,7 @@ const updateChartLegendSelect = () => {
const tableRowConfig = computed(() => {
return (record: KPIStats) => ({
onClick: () => handleRowClick(record),
class: selectedRows.value.includes(record.kpiId) ? 'selected-row' : ''
class: selectedRows.value.includes(record.kpiId) ? 'selected-row' : '',
});
});
</script>
@@ -882,7 +923,54 @@ const tableRowConfig = computed(() => {
size="small"
:loading="tableLoading"
:custom-row="tableRowConfig"
/>
>
<template #headerCell="{ column }">
<template v-if="column.key === 'total'">
<span>
{{ t('views.perfManage.kpiOverView.totalValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Sum within Time Range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'avg'">
<span>
{{ t('views.perfManage.kpiOverView.avgValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Average value over the time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'max'">
<span>
{{ t('views.perfManage.kpiOverView.maxValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Maximum value in time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
<template v-if="column.key === 'min'">
<span>
{{ t('views.perfManage.kpiOverView.minValue') }}
<a-tooltip placement="bottom">
<template #title>
<span>Minimum value in the time range</span>
</template>
<InfoCircleOutlined />
</a-tooltip>
</span>
</template>
</template>
</a-table>
</div>
</div>
</div>