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

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

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

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

File diff suppressed because it is too large Load Diff

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

@@ -1,13 +1,21 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, computed, h } from 'vue'; import { ref, onMounted, onUnmounted, nextTick, computed, h } from 'vue';
import * as echarts from 'echarts/core'; 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 { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget'; import { getKPITitle, listKPIData } from '@/api/perfManage/goldTarget';
import useI18n from '@/hooks/useI18n'; import useI18n from '@/hooks/useI18n';
import { message,} from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { RESULT_CODE_ERROR, RESULT_CODE_SUCCESS } from '@/constants/result-constants'; import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import type { Dayjs } from 'dayjs'; import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { OptionsType, WS } from '@/plugins/ws-websocket'; import { OptionsType, WS } from '@/plugins/ws-websocket';
@@ -16,12 +24,12 @@ import { LineOutlined } from '@ant-design/icons-vue';
import { TableColumnType } from 'ant-design-vue'; import { TableColumnType } from 'ant-design-vue';
const { t, currentLocale } = useI18n(); const { t, currentLocale } = useI18n();
//定义KPI接口 //定义KPI接口
interface KPIBase{ interface KPIBase {
kpiId: string; kpiId: string;
title: string; title: string;
} }
//继承接口 //继承接口
interface KPIColumn extends KPIBase{ interface KPIColumn extends KPIBase {
dataIndex: string; dataIndex: string;
key: string; key: string;
neType: string; neType: string;
@@ -34,8 +42,8 @@ interface ChartDataItem {
const tableLoading = ref(false); const tableLoading = ref(false);
const rangeLoading = ref(false); const rangeLoading = ref(false);
//网元类型定义 //网元类型定义
const ALL_NE_TYPES = ['AMF','SMF','UPF','MME','IMS','SMSC'] as const; 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([ echarts.use([
LineChart, LineChart,
@@ -61,12 +69,19 @@ const ws = ref<WS | null>(null);
// [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()], // [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
// }); // });
const ranges = ref([ const ranges = ref([
{label:t('views.perfManage.customTarget.sixHoursAgo'),value:[dayjs().subtract(6, 'hours'), {
dayjs(),]}, label: t('views.perfManage.customTarget.sixHoursAgo'),
{label:t('views.perfManage.customTarget.threeHoursAgo'),value:[dayjs().subtract(3, 'hours'), value: [dayjs().subtract(6, 'hours'), dayjs()],
dayjs(),]}, },
{label:t('views.monitor.monitor.today'),value:[dayjs().startOf('day'), 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]>([ const dateRange = ref<[string, string]>([
dayjs().subtract(1, 'hour').startOf('hour').valueOf().toString(), // 上一小时开始 dayjs().subtract(1, 'hour').startOf('hour').valueOf().toString(), // 上一小时开始
@@ -118,8 +133,8 @@ const TARGET_KPI_IDS: Record<NeType, string[]> = {
// 实时数据开关函数 // 实时数据开关函数
const fnRealTimeSwitch = (bool: boolean) => { const fnRealTimeSwitch = (bool: boolean) => {
if (bool) { if (bool) {
if(!chart){ if (!chart) {
isRealtime.value=false; isRealtime.value = false;
return; return;
} }
if (!ws.value) { if (!ws.value) {
@@ -127,7 +142,7 @@ const fnRealTimeSwitch = (bool: boolean) => {
} }
chartData.value = []; chartData.value = [];
tableLoading.value =true; tableLoading.value = true;
const options: OptionsType = { const options: OptionsType = {
url: '/ws', url: '/ws',
params: { params: {
@@ -149,8 +164,8 @@ const wsError = () => {
message.error(t('common.websocketError')); message.error(t('common.websocketError'));
}; };
const handleWebSocketMessage = (kpiEvent:any)=>{ const handleWebSocketMessage = (kpiEvent: any) => {
if(!kpiEvent)return; if (!kpiEvent) return;
// 构造新的数据点 // 构造新的数据点
const newData: ChartDataItem = { const newData: ChartDataItem = {
@@ -159,40 +174,42 @@ const handleWebSocketMessage = (kpiEvent:any)=>{
// 添加已选中的指标的数据 // 添加已选中的指标的数据
selectedKPIs.value.forEach(kpiId => { selectedKPIs.value.forEach(kpiId => {
newData[kpiId] = Number(kpiEvent[kpiId])||0; newData[kpiId] = Number(kpiEvent[kpiId]) || 0;
}); });
// 更新数据 // 更新数据
updateChartData(newData); updateChartData(newData);
if(tableLoading.value){ if (tableLoading.value) {
tableLoading.value=false; tableLoading.value = false;
} }
}; };
//成功回调 //成功回调
const wsMessage = (res:Record<string,any>)=>{ const wsMessage = (res: Record<string, any>) => {
if(!chart){ if (!chart) {
return; return;
} }
const{code,data}=res; const { code, data } = res;
if(code===RESULT_CODE_ERROR||!data?.groupId)return; if (code === RESULT_CODE_ERROR || !data?.groupId) return;
handleWebSocketMessage(data.data); handleWebSocketMessage(data.data);
}; };
// 添加数据处理函数 // 添加数据处理函数
const processChartData = (rawData: any[]) => { const processChartData = (rawData: any[]) => {
const groupedData = new Map<string, any>();//数据按时间分组 const groupedData = new Map<string, any>(); //数据按时间分组
rawData.forEach(item => {//合并相同时间点的数据 rawData.forEach(item => {
//合并相同时间点的数据
const timeKey = item.timeGroup; const timeKey = item.timeGroup;
if (!groupedData.has(timeKey)) {//按时间排序 if (!groupedData.has(timeKey)) {
//按时间排序
groupedData.set(timeKey, { timeGroup: timeKey }); groupedData.set(timeKey, { timeGroup: timeKey });
} }
Object.assign(groupedData.get(timeKey), item); Object.assign(groupedData.get(timeKey), item);
}); });
return Array.from(groupedData.values()) return Array.from(groupedData.values())
.sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup)) .sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup))
.map(item => {//转换成图表需要的格式 .map(item => {
//转换成图表需要的格式
const dataItem: ChartDataItem = { date: item.timeGroup.toString() }; const dataItem: ChartDataItem = { date: item.timeGroup.toString() };
selectedKPIs.value.forEach(kpiId => { selectedKPIs.value.forEach(kpiId => {
dataItem[kpiId] = Number(item[kpiId]) || 0; dataItem[kpiId] = Number(item[kpiId]) || 0;
@@ -202,21 +219,21 @@ const processChartData = (rawData: any[]) => {
}; };
// 获取图表数据方法 // 获取图表数据方法
const fetchChartData = async () => { const fetchChartData = async () => {
if(kpiColumns.value.length===0){ if (kpiColumns.value.length === 0) {
updateChart(); updateChart();
return; return;
} }
tableLoading.value=true; tableLoading.value = true;
rangeLoading.value=true; rangeLoading.value = true;
try { try {
const[startTime,endTime]=dateRange.value; const [startTime, endTime] = dateRange.value;
if (!startTime || !endTime) { if (!startTime || !endTime) {
console.warn('Invalid date range:', dateRange.value); console.warn('Invalid date range:', dateRange.value);
return; return;
} }
// 创建并行请求数组 // 创建并行请求数组
const requests = ALL_NE_TYPES.map(async (neType) => { const requests = ALL_NE_TYPES.map(async neType => {
const params = { const params = {
neType, neType,
neId: '001', neId: '001',
@@ -224,7 +241,7 @@ const fetchChartData = async () => {
endTime: String(endTime), endTime: String(endTime),
sortField: 'timeGroup', sortField: 'timeGroup',
sortOrder: 'asc', sortOrder: 'asc',
interval: 60*15, interval: 60 * 15,
kpiIds: TARGET_KPI_IDS[neType].join(','), kpiIds: TARGET_KPI_IDS[neType].join(','),
}; };
@@ -250,9 +267,9 @@ const fetchChartData = async () => {
} catch (error) { } catch (error) {
console.error('Failed to fetch chart data:', error); console.error('Failed to fetch chart data:', error);
message.error(t('common.getInfoFail')); message.error(t('common.getInfoFail'));
}finally { } finally {
tableLoading.value=false; tableLoading.value = false;
rangeLoading.value=false; rangeLoading.value = false;
} }
}; };
@@ -263,14 +280,14 @@ const kpiColors = new Map<string, string>();
const getSeriesConfig = () => ({ const getSeriesConfig = () => ({
symbol: 'none', symbol: 'none',
symbolSize: 6, symbolSize: 6,
smooth:0.6, smooth: 0.6,
showSymbol: true, showSymbol: true,
}); });
// 添加一个函数来获取当前主题下的网格线颜色 // 添加一个函数来获取当前主题下的网格线颜色
const getSplitLineColor = () => { const getSplitLineColor = () => {
return document.documentElement.getAttribute('data-theme') === 'dark' return document.documentElement.getAttribute('data-theme') === 'dark'
? '#333333' ? '#333333'
: '#E8E8E8'; // 亮色模式返回 undefined，使用默认颜色 : '#E8E8E8'; // 亮色模式返回 undefined，使用默认颜色
}; };
// 添加主题变化的观察器 // 添加主题变化的观察器
@@ -289,27 +306,30 @@ const themeObserver = new MutationObserver(() => {
kpiColors.set(kpiId, color); kpiColors.set(kpiId, color);
}); });
// 使用存储的颜色更新图表系列 // 使用存储的颜色更新图表系列
const series = selectedKPIs.value.map(kpiId => { const series = selectedKPIs.value
const kpi = kpiColumns.value.find(col => col.kpiId === kpiId); .map(kpiId => {
if (!kpi) return null; const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
if (!kpi) return null;
return { return {
name: kpi.title, name: kpi.title,
type: 'line', type: 'line',
data: chartData.value.map(item => item[kpiId] || 0), data: chartData.value.map(item => item[kpiId] || 0),
itemStyle: { color: kpiColors.get(kpiId) }, itemStyle: { color: kpiColors.get(kpiId) },
...getSeriesConfig(), ...getSeriesConfig(),
}; };
}).filter(Boolean); })
.filter(Boolean);
const option = { const option = {
title: { title: {
text: t('views.perfManage.kpiOverView.kpiChartTitle'), text: t('views.perfManage.kpiOverView.kpiChartTitle'),
left: 'center', left: 'center',
textStyle: { textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
} : '#333',
},
}, },
xAxis: { xAxis: {
// 保持现有的 xAxis 配置 // 保持现有的 xAxis 配置
@@ -319,61 +339,68 @@ const themeObserver = new MutationObserver(() => {
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss') dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
), ),
axisLabel: { axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
: '#333',
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: splitLineColor color: splitLineColor,
} },
} },
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
: '#333',
}, },
splitNumber: 5, splitNumber: 5,
scale: true, scale: true,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: splitLineColor color: splitLineColor,
} },
} },
}, },
legend: { legend: {
show: false, show: false,
selected: Object.fromEntries( selected: Object.fromEntries(
selectedKPIs.value.map(kpiId => [ selectedKPIs.value.map(kpiId => [
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: true, // 限制 tooltip 显示范围 confine: true, // 限制 tooltip 显示范围
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark' backgroundColor:
? 'rgba(48, 48, 48, 0.8)' document.documentElement.getAttribute('data-theme') === 'dark'
: 'rgba(255, 255, 255, 0.9)', ? 'rgba(48, 48, 48, 0.8)'
borderColor: document.documentElement.getAttribute('data-theme') === 'dark' : 'rgba(255, 255, 255, 0.9)',
? '#555' borderColor:
: '#ddd', document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
textStyle: { textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
: '#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,
}; };
// 使用新的配置更新图表 // 使用新的配置更新图表
@@ -390,24 +417,26 @@ const themeObserver = new MutationObserver(() => {
const updateChart = () => { const updateChart = () => {
if (!chart || !kpiColumns.value.length) return; if (!chart || !kpiColumns.value.length) return;
//获取图表配置 //获取图表配置
const commonConfig = getSeriesConfig(); const commonConfig = getSeriesConfig();
//构建数据系列 //构建数据系列
const series = selectedKPIs.value.map(kpiId => { const series = selectedKPIs.value
const kpi = kpiColumns.value.find(col=>col.kpiId ===kpiId); .map(kpiId => {
if (!kpi) return null; const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
//为每个KPI分配临时的固定颜色 if (!kpi) return null;
const color = kpiColors.get(kpiId)||generateColorRGBA(); //为每个KPI分配临时的固定颜色
kpiColors.set(kpiId, color); const color = kpiColors.get(kpiId) || generateColorRGBA();
kpiColors.set(kpiId, color);
return { return {
name: kpi.title, name: kpi.title,
type: 'line', type: 'line',
data: chartData.value.map(item=>item[kpiId]||0), data: chartData.value.map(item => item[kpiId] || 0),
itemStyle: { color }, itemStyle: { color },
...commonConfig, ...commonConfig,
}; };
}).filter(Boolean); })
.filter(Boolean);
const option = { const option = {
title: { title: {
@@ -415,30 +444,35 @@ const updateChart = () => {
left: 'center', left: 'center',
// 添加文字颜色配置，根据主题切换 // 添加文字颜色配置，根据主题切换
textStyle: { textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
} : '#333',
},
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
confine: true, // 限制 tooltip 显示范围 confine: true, // 限制 tooltip 显示范围
backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark' backgroundColor:
? 'rgba(48, 48, 48, 0.8)' document.documentElement.getAttribute('data-theme') === 'dark'
: 'rgba(255, 255, 255, 0.9)', ? 'rgba(48, 48, 48, 0.8)'
borderColor: document.documentElement.getAttribute('data-theme') === 'dark' : 'rgba(255, 255, 255, 0.9)',
? '#555' borderColor:
: '#ddd', document.documentElement.getAttribute('data-theme') === 'dark'
? '#555'
: '#ddd',
textStyle: { textStyle: {
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
: '#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: { legend: {
data: selectedKPIs.value.map(kpiId => data: selectedKPIs.value.map(
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId kpiId =>
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || kpiId
), ),
type: 'scroll', type: 'scroll',
orient: 'horizontal', orient: 'horizontal',
@@ -449,7 +483,9 @@ const updateChart = () => {
selected: Object.fromEntries( selected: Object.fromEntries(
selectedKPIs.value.map(kpiId => [ selectedKPIs.value.map(kpiId => [
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || 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, show: false,
@@ -470,15 +506,16 @@ const updateChart = () => {
type: 'category', type: 'category',
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
: '#333',
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: getSplitLineColor() color: getSplitLineColor(),
} },
}, },
//控制坐标轴两边留白 //控制坐标轴两边留白
// 当为折线图时(isLine为true)时不留白，柱状图时留白 // 当为折线图时(isLine为true)时不留白，柱状图时留白
@@ -486,7 +523,7 @@ const updateChart = () => {
boundaryGap: false, boundaryGap: false,
// 设置x轴的数据 // 设置x轴的数据
// 将时间戳转换为格式化的时间字符串 // 将时间戳转换为格式化的时间字符串
data:chartData.value.map(item=> data: chartData.value.map(item =>
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss') dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
), ),
//设置坐标轴刻度标签的样式 //设置坐标轴刻度标签的样式
@@ -519,9 +556,10 @@ const updateChart = () => {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
color: document.documentElement.getAttribute('data-theme') === 'dark' color:
? '#CACADA' document.documentElement.getAttribute('data-theme') === 'dark'
: '#333' ? '#CACADA'
: '#333',
}, },
// 添加自计算的分割段数 // 添加自计算的分割段数
splitNumber: 5, splitNumber: 5,
@@ -530,13 +568,13 @@ const updateChart = () => {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: getSplitLineColor() color: getSplitLineColor(),
} },
} },
}, },
series: series, //配置数据 series: series, //配置数据
}; };
if(chart) { if (chart) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
chart!.setOption(option, true); //使用新的配置更新图表 chart!.setOption(option, true); //使用新的配置更新图表
chart!.resize(); //调整图表大小适应容器 chart!.resize(); //调整图表大小适应容器
@@ -561,8 +599,6 @@ const updateChart = () => {
} }
}; };
//钩子函数 //钩子函数
onMounted(async () => { onMounted(async () => {
try { try {
@@ -588,7 +624,7 @@ onMounted(async () => {
// 添加主题观察器 // 添加主题观察器
themeObserver.observe(document.documentElement, { themeObserver.observe(document.documentElement, {
attributes: true, attributes: true,
attributeFilter: ['data-theme'] attributeFilter: ['data-theme'],
}); });
} catch (error) { } catch (error) {
console.error('Failed to initialize:', error); console.error('Failed to initialize:', error);
@@ -603,9 +639,10 @@ const selectedKPIs = ref<string[]>(Object.values(TARGET_KPI_IDS).flat());
// 获取网元指标 // 获取网元指标
const fetchSpecificKPI = async () => { const fetchSpecificKPI = async () => {
const language = currentLocale.value.split('_')[0] === 'zh' const language =
? 'cn' currentLocale.value.split('_')[0] === 'zh'
: currentLocale.value.split('_')[0]; ? 'cn'
: currentLocale.value.split('_')[0];
try { try {
let allKPIs: KPIColumn[] = []; let allKPIs: KPIColumn[] = [];
@@ -664,12 +701,13 @@ onUnmounted(() => {
// 实时数据更新图表数据方法 // 实时数据更新图表数据方法
const updateChartData = (newData: ChartDataItem) => { const updateChartData = (newData: ChartDataItem) => {
if(!chart){ if (!chart) {
return; return;
} }
chartData.value.push(newData); chartData.value.push(newData);
if (chartData.value.length > 100) {//100改为50 if (chartData.value.length > 100) {
chartData.value.shift();//大于100条时删除最早的数据 //100改为50
chartData.value.shift(); //大于100条时删除最早的数据
} }
//使用try-catch包裹图表更新逻辑 //使用try-catch包裹图表更新逻辑
try { try {
@@ -692,12 +730,11 @@ const updateChartData = (newData: ChartDataItem) => {
}; };
chart.setOption(option); chart.setOption(option);
}); });
}catch (error){ } catch (error) {
console.error('Failed to update chart:', error); console.error('Failed to update chart:', error);
} }
}; };
// 添加一个接口定义指标统计数据的类型 // 添加一个接口定义指标统计数据的类型
interface KPIStats { interface KPIStats {
kpiId: string; kpiId: string;
@@ -718,34 +755,36 @@ const updateKpiStats = () => {
kpiStats.value = []; kpiStats.value = [];
return; return;
} }
kpiStats.value = selectedKPIs.value.map(kpiId => { kpiStats.value = selectedKPIs.value
// 找到对应的KPI标题 .map(kpiId => {
const kpi = kpiColumns.value.find(col => col.kpiId === kpiId); // 找到对应的KPI标题
if (!kpi) return null; const kpi = kpiColumns.value.find(col => col.kpiId === kpiId);
if (!kpi) return null;
// 获取该指标的所有数值 // 获取该指标的所有数值
const values = chartData.value.map(item => Number(item[kpiId]) || 0); 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 const avg =
? Number((total / values.length).toFixed(2)) values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
: 0;
return { return {
kpiId: kpiId, kpiId: kpiId,
title: kpi.title, title: kpi.title,
max: Math.max(...values), max: Math.max(...values),
min: Math.min(...values), min: Math.min(...values),
avg: avg, avg: avg,
total: total total: total,
}; };
}).filter((item): item is KPIStats => item !== null); })
.filter((item): item is KPIStats => item !== null);
}; };
// 添加表列定义 // 添加表列定义
const statsColumns: TableColumnType<KPIStats>[] = [ const statsColumns: TableColumnType<KPIStats>[] = [
{ {
@@ -761,9 +800,9 @@ const statsColumns: TableColumnType<KPIStats>[] = [
color: color || '#000', // 使用与折线图相同的颜色 color: color || '#000', // 使用与折线图相同的颜色
fontSize: '30px', // 增大图标尺寸到30px fontSize: '30px', // 增大图标尺寸到30px
fontWeight: 'bold', // 加粗 fontWeight: 'bold', // 加粗
} },
}); });
} },
}, },
{ {
title: t('views.perfManage.kpiOverView.kpiName'), title: t('views.perfManage.kpiOverView.kpiName'),
@@ -829,14 +868,16 @@ const updateChartLegendSelect = () => {
const legendSelected = Object.fromEntries( const legendSelected = Object.fromEntries(
selectedKPIs.value.map(kpiId => [ selectedKPIs.value.map(kpiId => [
kpiColumns.value.find(col => col.kpiId === kpiId)?.title || 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({ chart.setOption({
legend: { legend: {
selected: legendSelected selected: legendSelected,
} },
}); });
}; };
@@ -844,7 +885,7 @@ const updateChartLegendSelect = () => {
const tableRowConfig = computed(() => { const tableRowConfig = computed(() => {
return (record: KPIStats) => ({ return (record: KPIStats) => ({
onClick: () => handleRowClick(record), onClick: () => handleRowClick(record),
class: selectedRows.value.includes(record.kpiId) ? 'selected-row' : '' class: selectedRows.value.includes(record.kpiId) ? 'selected-row' : '',
}); });
}); });
</script> </script>
@@ -882,7 +923,54 @@ const tableRowConfig = computed(() => {
size="small" size="small"
:loading="tableLoading" :loading="tableLoading"
:custom-row="tableRowConfig" :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> </div>
</div> </div>
@@ -944,8 +1032,8 @@ const tableRowConfig = computed(() => {
} }
/* 表格行和表头样式 */ /* 表格行和表头样式 */
:deep(.ant-table-thead tr th), :deep(.ant-table-thead tr th),
:deep(.ant-table-tbody tr td) { :deep(.ant-table-tbody tr td) {
padding: 8px; padding: 8px;
height: 40px; height: 40px;
} }