diff --git a/src/views/perfManage/customTarget/index.vue b/src/views/perfManage/customTarget/index.vue
index 98959937..7c7e913b 100644
--- a/src/views/perfManage/customTarget/index.vue
+++ b/src/views/perfManage/customTarget/index.vue
@@ -607,12 +607,12 @@ onMounted(() => {
-
+
diff --git a/src/views/perfManage/goldTarget/index.vue b/src/views/perfManage/goldTarget/index.vue
index d2a87a82..eba2f160 100644
--- a/src/views/perfManage/goldTarget/index.vue
+++ b/src/views/perfManage/goldTarget/index.vue
@@ -23,6 +23,7 @@ import {
nextTick,
onBeforeUnmount,
h,
+ watch
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, TableColumnType } from 'ant-design-vue/es';
@@ -43,6 +44,8 @@ import { generateColorRGBA } from '@/utils/generate-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { useRoute } from 'vue-router';
import { LineOutlined } from '@ant-design/icons-vue';
+import useLayoutStore from '@/store/modules/layout';
+const layoutStore = useLayoutStore();
const neInfoStore = useNeInfoStore();
const route = useRoute();
const { t, currentLocale } = useI18n();
@@ -216,6 +219,22 @@ const statsColumns: TableColumnType[] = [
key: 'title',
width: '65%',
},
+ {
+ title: t('views.perfManage.kpiOverView.totalValue'),
+ dataIndex: 'total',
+ key: 'total',
+ width: '24%',
+ sorter: (a: any, b: any) => a.total - b.total,
+ sortDirections: ['ascend', 'descend'],
+ },
+ {
+ title: t('views.perfManage.kpiOverView.avgValue'),
+ dataIndex: 'avg',
+ key: 'avg',
+ width: '24%',
+ sorter: (a: any, b: any) => a.avg - b.avg,
+ sortDirections: ['ascend', 'descend'],
+ },
{
title: t('views.perfManage.kpiOverView.maxValue'),
dataIndex: 'max',
@@ -389,11 +408,22 @@ function fnGetList() {
const values = tableState.data.map((item: any) => {
return item[columns.key] ? Number(item[columns.key]) : 0;
});
+
+ // 计算总值
+ const total = Number(values.reduce((sum, val) => sum + val, 0).toFixed(2));
+
+ // 计算平均值
+ 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,
+ total: total
});
}
}
@@ -418,6 +448,7 @@ function fnRanderChart() {
position: function (pt: any) {
return [pt[0], '10%'];
},
+ confine: true, // 限制 tooltip 显示范围
},
xAxis: {
//x类别轴
@@ -500,6 +531,9 @@ function fnRanderChartData() {
key: `${columns.key}`,
type: 'line',
symbol: 'none',
+ symbolSize: 6,
+ smooth: 0.6,
+ showSymbol: true,
sampling: 'lttb',
itemStyle: {
color: color,
@@ -549,8 +583,32 @@ function fnRanderChartData() {
xAxis: {
type: 'category',
boundaryGap: false,
+ axisLabel: {
+ color: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: getSplitLineColor()
+ }
+ },
data: chartDataXAxisData,
},
+ yAxis: {
+ axisLabel: {
+ color: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: getSplitLineColor()
+ }
+ },
+ },
series: chartDataYSeriesData,
},
{
@@ -647,29 +705,38 @@ function wsMessage(res: Record) {
}
// 添加一个变量来跟踪当前选中的行
-const selectedRow = ref(null);
+const selectedRow = ref([]);
// 添加处理行点击的方法
function handleRowClick(record: any) {
- if (selectedRow.value === record.kpiId) {
- // 如果点击的是当前选中的行，则取消选中
- selectedRow.value = null;
- // 更新图表，显示所有指标
- for (let key in chartLegendSelected) {
- chartLegendSelected[key] = true;
- }
+ const index = selectedRow.value.indexOf(record.kpiId);
+
+ // 如果已经选中，取消选中
+ if (index > -1) {
+ selectedRow.value.splice(index, 1);
+ chartLegendSelected[record.title] = false;
} else {
- // 选中新行
- selectedRow.value = record.kpiId;
- // 更新图表，只显示选中的指标
- for (let key in chartLegendSelected) {
- if (key === record.title) {
- chartLegendSelected[key] = true;
- } else {
+ // 添加新的选中项
+ selectedRow.value.push(record.kpiId);
+
+ // 如果只有一个选中项，重置为 false
+ if (selectedRow.value.length === 1) {
+ Object.keys(chartLegendSelected).forEach(key => {
chartLegendSelected[key] = false;
- }
+ });
}
+
+ chartLegendSelected[record.title] = true;
}
+
+ // 如果没有选中项，设置所有图例为 true
+ if (selectedRow.value.length === 0) {
+ Object.keys(chartLegendSelected).forEach(key => {
+ chartLegendSelected[key] = true;
+ });
+ }
+
+ // 更新图表设置
kpiChart.value.setOption({
legend: {
selected: chartLegendSelected,
@@ -677,6 +744,73 @@ function handleRowClick(record: any) {
});
}
+// 添加一个函数来获取当前主题下的网格线颜色
+function getSplitLineColor() {
+ return document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#333333'
+ : '#E8E8E8'; // 亮色模式返回 undefined，使用默认颜色
+}
+
+// 监听主题变化
+watch(
+ () => layoutStore.proConfig.theme, // 监听的值
+ (newValue) => {
+ if (kpiChart.value) {
+ const splitLineColor = getSplitLineColor();
+ // 绘制图数据
+ kpiChart.value.setOption(
+ {
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt: any) {
+ return [pt[0], '10%'];
+ },
+ confine: true, // 限制 tooltip 显示范围
+ backgroundColor: newValue === 'dark'
+ ? 'rgba(48, 48, 48, 0.8)'
+ : 'rgba(255, 255, 255, 0.9)',
+ borderColor: newValue === 'dark'
+ ? '#555'
+ : '#ddd',
+ textStyle: {
+ color: newValue === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ },
+ xAxis: {
+ axisLabel: {
+ color: newValue === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: splitLineColor
+ }
+ }
+ },
+ yAxis: {
+ axisLabel: {
+ color: newValue === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: splitLineColor
+ }
+ }
+ }
+ }
+ );
+
+ }
+ }
+);
+
onMounted(() => {
// 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
// 获取网元网元列表
@@ -714,11 +848,16 @@ onMounted(() => {
}
// 查询当前小时
- const nowDate: Date = new Date();
- nowDate.setMinutes(0, 0, 0);
- queryRangePicker.value[0] = `${nowDate.getTime()}`;
- nowDate.setMinutes(59, 59, 59);
- queryRangePicker.value[1] = `${nowDate.getTime()}`;
+ const now = new Date();
+ now.setMinutes(0, 0, 0);
+ // 设置起始时间为整点前一小时
+ const startTime = new Date(now);
+ startTime.setHours(now.getHours() - 1);
+ queryRangePicker.value[0] = `${startTime.getTime()}`;
+ // 设置结束时间为整点
+ const endTime = new Date(now);
+ endTime.setMinutes(59, 59, 59);
+ queryRangePicker.value[1] = `${endTime.getTime()}`;
fnGetListTitle();
// 绘图
fnRanderChart();
@@ -739,68 +878,42 @@ onBeforeUnmount(() => {
-
+
-
+
-
-
+
+
-
-
+
+
-
-
+
+
+
+
{{ t('common.search') }}
@@ -814,24 +927,18 @@ onBeforeUnmount(() => {
-
-
+
+
+
+
{{
tableState.showTable
? t('views.perfManage.goldTarget.kpiChartTitle')
: t('views.perfManage.goldTarget.kpiTableTitle')
}}
-
+
@@ -846,26 +953,23 @@ onBeforeUnmount(() => {
{{ t('common.reloadText') }}
-
+
+
+
-
+
{{ t('common.sizeText') }}
-
+
+
+
-
+
{{ t('common.size.default') }}
@@ -894,37 +998,19 @@ onBeforeUnmount(() => {
size="small"
/>
-->
-
-
+
+
-
+
{{ parseDateToStr(+record.timeGroup) }}
@@ -934,26 +1020,15 @@ onBeforeUnmount(() => {
diff --git a/src/views/perfManage/kpiCReport/index.vue b/src/views/perfManage/kpiCReport/index.vue
index 1ae622a8..291327b8 100644
--- a/src/views/perfManage/kpiCReport/index.vue
+++ b/src/views/perfManage/kpiCReport/index.vue
@@ -23,6 +23,7 @@ import {
nextTick,
onBeforeUnmount,
h,
+ watch,
} from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal, TableColumnType } from 'ant-design-vue/es';
@@ -45,11 +46,15 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
import { LineOutlined } from '@ant-design/icons-vue';
import { useRoute } from 'vue-router';
import dayjs, { Dayjs } from 'dayjs';
+import useLayoutStore from '@/store/modules/layout';
+const layoutStore = useLayoutStore();
const neInfoStore = useNeInfoStore();
const route = useRoute();
const { t, currentLocale } = useI18n();
const ws = new WS();
+
+
echarts.use([
TooltipComponent,
GridComponent,
@@ -239,6 +244,14 @@ const statsColumns: TableColumnType[] = [
key: 'title',
width: '65%',
},
+ {
+ title: t('views.perfManage.kpiOverView.avgValue'),
+ dataIndex: 'avg',
+ key: 'avg',
+ width: '24%',
+ sorter: (a: any, b: any) => a.avg - b.avg,
+ sortDirections: ['ascend', 'descend'],
+ },
{
title: t('views.perfManage.kpiOverView.maxValue'),
dataIndex: 'max',
@@ -435,11 +448,21 @@ function fnGetList() {
const values = tableState.data.map((item: any) => {
return item[columns.key] ? Number(item[columns.key]) : 0;
});
+
+
+ // 计算总值
+ const total = Number(values.reduce((sum, val) => sum + val, 0).toFixed(2));
+
+ // 计算平均值
+ 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
});
}
}
@@ -463,6 +486,18 @@ function fnRanderChart() {
position: function (pt: any) {
return [pt[0], '10%'];
},
+ confine: true, // 限制 tooltip 显示范围
+ backgroundColor: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? 'rgba(48, 48, 48, 0.8)'
+ : 'rgba(255, 255, 255, 0.9)',
+ borderColor: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#555'
+ : '#ddd',
+ textStyle: {
+ color: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
},
xAxis: {
type: 'category',
@@ -541,6 +576,9 @@ function fnRanderChartData() {
key: `${columns.key}`,
type: 'line',
symbol: 'none',
+ symbolSize: 6,
+ smooth: 0.6,
+ showSymbol: true,
sampling: 'lttb',
itemStyle: {
color: color,
@@ -594,8 +632,32 @@ function fnRanderChartData() {
xAxis: {
type: 'category',
boundaryGap: false,
+ axisLabel: {
+ color: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: getSplitLineColor()
+ }
+ },
data: chartDataXAxisData,
},
+ yAxis: {
+ axisLabel: {
+ color: document.documentElement.getAttribute('data-theme') === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: getSplitLineColor()
+ }
+ },
+ },
series: chartDataYSeriesData,
},
{
@@ -680,29 +742,38 @@ function wsMessage(res: Record) {
}
// 添加一个变量来跟踪当前选中的行
-const selectedRow = ref(null);
+const selectedRow = ref([]);
// 添加处理行点击的方法
function handleRowClick(record: any) {
- if (selectedRow.value === record.kpiId) {
- // 如果点击的是当前选中的行，则取消选中
- selectedRow.value = null;
- // 更新图表，显示所有指标
- for (let key in chartLegendSelected) {
- chartLegendSelected[key] = true;
- }
+ const index = selectedRow.value.indexOf(record.kpiId);
+
+ // 如果已经选中，取消选中
+ if (index > -1) {
+ selectedRow.value.splice(index, 1);
+ chartLegendSelected[record.title] = false;
} else {
- // 选中新行
- selectedRow.value = record.kpiId;
- // 更新图表，只显示选中的指标
- for (let key in chartLegendSelected) {
- if (key === record.title) {
- chartLegendSelected[key] = true;
- } else {
+ // 添加新的选中项
+ selectedRow.value.push(record.kpiId);
+
+ // 如果只有一个选中项，重置为 false
+ if (selectedRow.value.length === 1) {
+ Object.keys(chartLegendSelected).forEach(key => {
chartLegendSelected[key] = false;
- }
+ });
}
+
+ chartLegendSelected[record.title] = true;
}
+
+ // 如果没有选中项，设置所有图例为 true
+ if (selectedRow.value.length === 0) {
+ Object.keys(chartLegendSelected).forEach(key => {
+ chartLegendSelected[key] = true;
+ });
+ }
+
+ // 更新图表设置
kpiChart.value.setOption({
legend: {
selected: chartLegendSelected,
@@ -710,6 +781,66 @@ function handleRowClick(record: any) {
});
}
+// 监听主题变化
+watch(
+ () => layoutStore.proConfig.theme, // 监听的值
+ (newValue) => {
+ if (kpiChart.value) {
+ const splitLineColor = getSplitLineColor();
+ // 绘制图数据
+ kpiChart.value.setOption(
+ {
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt: any) {
+ return [pt[0], '10%'];
+ },
+ confine: true, // 限制 tooltip 显示范围
+ backgroundColor: newValue === 'dark'
+ ? 'rgba(48, 48, 48, 0.8)'
+ : 'rgba(255, 255, 255, 0.9)',
+ borderColor: newValue === 'dark'
+ ? '#555'
+ : '#ddd',
+ textStyle: {
+ color: newValue === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ },
+ xAxis: {
+ axisLabel: {
+ color: newValue === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: splitLineColor
+ }
+ }
+ },
+ yAxis: {
+ axisLabel: {
+ color: newValue === 'dark'
+ ? '#CACADA'
+ : '#333'
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: splitLineColor
+ }
+ }
+ }
+ }
+ );
+
+ }
+ }
+);
+
onMounted(() => {
// 目前支持的 AMF AUSF MME MOCNGW NSSF SMF UDM UPF PCF
// 获取网元网元列表
@@ -761,7 +892,6 @@ onMounted(() => {
}
// 查询当前小时
-
const now = new Date();
now.setMinutes(0, 0, 0);
// 设置起始时间为整点前一小时
@@ -794,51 +924,31 @@ onBeforeUnmount(() => {
-
+
-
+
-
-
+
+
-
-
+
+
+
+
{{ t('common.search') }}
@@ -852,24 +962,18 @@ onBeforeUnmount(() => {
-
-
+
+
+
+
{{
tableState.showTable
? t('views.perfManage.goldTarget.kpiChartTitle')
: t('views.perfManage.goldTarget.kpiTableTitle')
}}
-
+
@@ -884,26 +988,23 @@ onBeforeUnmount(() => {
{{ t('common.reloadText') }}
-
+
+
+
-
+
{{ t('common.sizeText') }}
-
+
+
+
-
+
{{ t('common.size.default') }}
@@ -932,61 +1033,32 @@ onBeforeUnmount(() => {
size="small"
/>
-->
-
-
+
+
-
+