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

feat: kpi菜单时间选择预设1h/1d/7d/15d

Browse Source
This commit is contained in:
TsMask
2025-06-17 20:02:42 +08:00
parent a341800efc
commit 88aea40885
6 changed files with 267 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1001,8 +1001,13 @@ export default {
expression:'Expression', expression:'Expression',
description:' Description', description:' Description',
kpiSet:' Statistical Settings', kpiSet:' Statistical Settings',
sixHoursAgo:'Six hours ago', new1Hour:'Within current hour',
threeHoursAgo:'Three hours ago', ago1Hour:'Last 1 hour',
ago3Hour:'Last 3 hour',
ago6Hour:'Last 6 hour',
ago1Day:'Last 1 day',
ago7Day:'Last 7 day',
ago15Day:'Last 15 day',
delCustomTip:'Confirm deletion of data item with record Custom Indicator {num}?', delCustomTip:'Confirm deletion of data item with record Custom Indicator {num}?',
delCustom:' Successfully delete record number {num} custom indicator', delCustom:' Successfully delete record number {num} custom indicator',
addCustom:' Add custom indicator', addCustom:' Add custom indicator',

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

@@ -1001,8 +1001,13 @@ export default {
expression:'计算公式', expression:'计算公式',
description:'描述', description:'描述',
kpiSet:'统计设置', kpiSet:'统计设置',
sixHoursAgo:'6小时前', new1Hour:'当前小时内',
threeHoursAgo:'3小时前', ago1Hour:'过去1小时',
ago3Hour:'过去3小时',
ago6Hour:'过去6小时',
ago1Day:'过去1天',
ago7Day:'过去7天',
ago15Day:'过去15天',
delCustomTip:'确认删除自定义指标项为 {num} 的数据项?', delCustomTip:'确认删除自定义指标项为 {num} 的数据项?',
delCustom:'成功删除记录编号为 {num} 自定义指标', delCustom:'成功删除记录编号为 {num} 自定义指标',
addCustom:'添加自定义指标', addCustom:'添加自定义指标',

193
src/views/perfManage/goldTarget/index.vue
View File

@@ -83,6 +83,40 @@ let neCascaderOptions = ref<Record<string, any>[]>([]);
/**记录开始结束时间 */ /**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']); let queryRangePicker = ref<[string, string]>(['', '']);
//日期快捷选择
const ranges = ref([
{
label: t('views.perfManage.customTarget.new1Hour'),
value: [dayjs().startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago1Hour'),
value: [dayjs().subtract(1, 'hour').startOf('hour'), dayjs().endOf('hour')],
},
// {
// label: t('views.perfManage.customTarget.ago3Hour'),
// value: [dayjs().subtract(3, 'hours'), dayjs()],
// },
// {
// label: t('views.perfManage.customTarget.ago6Hour'),
// value: [dayjs().subtract(6, 'hours'), dayjs()],
// },
{
label: t('views.perfManage.customTarget.ago1Day'),
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day'),
],
},
{
label: t('views.perfManage.customTarget.ago7Day'),
value: [dayjs().subtract(7, 'day').startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago15Day'),
value: [dayjs().subtract(15, 'day').startOf('day'), dayjs()],
},
]);
/**表格字段列 */ /**表格字段列 */
let tableColumns = ref<any[]>([]); let tableColumns = ref<any[]>([]);
@@ -145,7 +179,7 @@ function fnTableSize({ key }: MenuInfo) {
} }
/**选中的网元信息 */ /**选中的网元信息 */
let selectedNes = ref<{neType: string, neId: string}[]>([]); let selectedNes = ref<{ neType: string; neId: string }[]>([]);
/**查询参数 */ /**查询参数 */
let queryParams: any = reactive({ let queryParams: any = reactive({
@@ -314,7 +348,7 @@ function fnRecordExport() {
} }
/**可选网元列表 */ /**可选网元列表 */
let availableNeIds = ref<{label: string, value: string}[]>([]); let availableNeIds = ref<{ label: string; value: string }[]>([]);
// 添加类型定义 // 添加类型定义
interface KPIStats { interface KPIStats {
@@ -330,7 +364,10 @@ interface KPIStats {
} }
/**处理网元类型变化 */ /**处理网元类型变化 */
function handleNeTypeChange(value: SelectValue, option: DefaultOptionType | DefaultOptionType[]) { function handleNeTypeChange(
value: SelectValue,
option: DefaultOptionType | DefaultOptionType[]
) {
if (!value) { if (!value) {
state.neType = ''; state.neType = '';
state.neIds = []; state.neIds = [];
@@ -343,11 +380,17 @@ function handleNeTypeChange(value: SelectValue, option: DefaultOptionType | Defa
state.neIds = []; // 清空已选网元 state.neIds = []; // 清空已选网元
// 根据选择的网元类型更新可选的网元ID列表 // 根据选择的网元类型更新可选的网元ID列表
const neTypeOption = neCascaderOptions.value.find(item => item.value === value); const neTypeOption = neCascaderOptions.value.find(
if (neTypeOption && neTypeOption.children && neTypeOption.children.length > 0) { item => item.value === value
);
if (
neTypeOption &&
neTypeOption.children &&
neTypeOption.children.length > 0
) {
availableNeIds.value = neTypeOption.children.map((ne: any) => ({ availableNeIds.value = neTypeOption.children.map((ne: any) => ({
label: `${ne.label}`, label: `${ne.label}`,
value: ne.neId value: ne.neId,
})); }));
// 默认选择第一个网元 // 默认选择第一个网元
@@ -361,7 +404,10 @@ function handleNeTypeChange(value: SelectValue, option: DefaultOptionType | Defa
} }
/**处理网元ID变化 */ /**处理网元ID变化 */
function handleNeIdsChange(value: SelectValue, option: DefaultOptionType | DefaultOptionType[]) { function handleNeIdsChange(
value: SelectValue,
option: DefaultOptionType | DefaultOptionType[]
) {
if (!value || (Array.isArray(value) && value.length === 0)) { if (!value || (Array.isArray(value) && value.length === 0)) {
state.neIds = []; state.neIds = [];
queryParams.neIds = []; queryParams.neIds = [];
@@ -370,12 +416,12 @@ function handleNeIdsChange(value: SelectValue, option: DefaultOptionType | Defau
const values = Array.isArray(value) ? value : [value]; const values = Array.isArray(value) ? value : [value];
state.neIds = values as string[]; state.neIds = values as string[];
queryParams.neIds = [...values as string[]]; queryParams.neIds = [...(values as string[])];
// 更新选中的网元信息 // 更新选中的网元信息
selectedNes.value = (values as string[]).map(neId => ({ selectedNes.value = (values as string[]).map(neId => ({
neType: state.neType, neType: state.neType,
neId: neId neId: neId,
})); }));
} }
@@ -458,7 +504,7 @@ async function fnGetList() {
...queryParams, ...queryParams,
neId: neId, neId: neId,
startTime: queryRangePicker.value[0], startTime: queryRangePicker.value[0],
endTime: queryRangePicker.value[1] endTime: queryRangePicker.value[1],
}; };
// 不需要将neIds发送到后端 // 不需要将neIds发送到后端
delete params.neIds; delete params.neIds;
@@ -469,7 +515,7 @@ async function fnGetList() {
return res.data.map(item => ({ return res.data.map(item => ({
...item, ...item,
_neId: neId, _neId: neId,
neName: `${state.neType}-${neId}` neName: `${state.neType}-${neId}`,
})); }));
} }
return []; return [];
@@ -519,7 +565,7 @@ async function fnGetList() {
values.length > 0 ? Number((total / values.length).toFixed(2)) : 0; values.length > 0 ? Number((total / values.length).toFixed(2)) : 0;
kpiStats.value.push({ kpiStats.value.push({
kpiId: `${columns.key}_${neId}`, // 使用组合ID来唯一标识指标-网元对 kpiId: `${columns.key}_${neId}`, // 使用组合ID来唯一标识指标-网元对
title: `${columns.title}(${neId})`, // 在标题中显示网元ID title: `${columns.title}(${neId})`, // 在标题中显示网元ID
rawKpiId: columns.key, rawKpiId: columns.key,
rawKpiTitle: columns.title, rawKpiTitle: columns.title,
@@ -564,16 +610,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: {
@@ -582,9 +631,10 @@ function fnRanderChart() {
boundaryGap: false, boundaryGap: false,
data: [], // 数据x轴 data: [], // 数据x轴
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,
@@ -599,9 +649,10 @@ function fnRanderChart() {
boundaryGap: [0, '100%'], boundaryGap: [0, '100%'],
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,
@@ -719,7 +770,9 @@ function fnRanderChartData() {
} }
// 获取所有时间点并格式化 // 获取所有时间点并格式化
const timePoints = [...new Set(tableState.data.map(item => item.timeGroup))].sort(); const timePoints = [
...new Set(tableState.data.map(item => item.timeGroup)),
].sort();
chartDataXAxisData = timePoints.map(time => parseDateToStr(+time)); chartDataXAxisData = timePoints.map(time => parseDateToStr(+time));
// 填充数据 // 填充数据
@@ -755,7 +808,10 @@ function fnRanderChartData() {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#CACADA' : '#333', color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
}, },
splitLine: { splitLine: {
show: true, show: true,
@@ -808,16 +864,19 @@ function fnRealTimeSwitch(bool: any) {
return [pt[0], '10%']; return [pt[0], '10%'];
}, },
confine: true, confine: true,
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: {
@@ -825,9 +884,10 @@ function fnRealTimeSwitch(bool: any) {
boundaryGap: false, boundaryGap: false,
data: [], data: [],
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,
@@ -841,9 +901,10 @@ function fnRealTimeSwitch(bool: any) {
boundaryGap: [0, '100%'], boundaryGap: [0, '100%'],
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,
@@ -887,7 +948,9 @@ function fnRealTimeSwitch(bool: any) {
* 指标(GroupID:10_neType_neId) * 指标(GroupID:10_neType_neId)
* 为所有选中的网元创建订阅 * 为所有选中的网元创建订阅
*/ */
subGroupID: state.neIds.map(neId => `10_${state.neType}_${neId}`).join(','), subGroupID: state.neIds
.map(neId => `10_${state.neType}_${neId}`)
.join(','),
}, },
onmessage: wsMessage, onmessage: wsMessage,
onerror: wsError, onerror: wsError,
@@ -1036,7 +1099,10 @@ function wsMessage(res: Record<string, any>) {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
color: document.documentElement.getAttribute('data-theme') === 'dark' ? '#CACADA' : '#333', color:
document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA'
: '#333',
}, },
splitLine: { splitLine: {
show: true, show: true,
@@ -1213,7 +1279,9 @@ function handleSearch() {
// 检查是否选择了网元类型和网元ID // 检查是否选择了网元类型和网元ID
if (!state.neType) { if (!state.neType) {
message.warning({ message.warning({
content: t('views.perfManage.goldTarget.selectNeTypeFirst') || '请先选择网元类型', content:
t('views.perfManage.goldTarget.selectNeTypeFirst') ||
'请先选择网元类型',
duration: 2, duration: 2,
}); });
return; return;
@@ -1221,7 +1289,9 @@ function handleSearch() {
if (state.neIds.length === 0) { if (state.neIds.length === 0) {
message.warning({ message.warning({
content: t('views.perfManage.goldTarget.selectNeIdsFirst') || '请选择至少一个网元', content:
t('views.perfManage.goldTarget.selectNeIdsFirst') ||
'请选择至少一个网元',
duration: 2, duration: 2,
}); });
return; return;
@@ -1270,17 +1340,19 @@ onMounted(() => {
// 获取该类型下的网元ID列表 // 获取该类型下的网元ID列表
availableNeIds.value = item.children.map((ne: any) => ({ availableNeIds.value = item.children.map((ne: any) => ({
label: `${ne.label}`, label: `${ne.label}`,
value: ne.neId value: ne.neId,
})); }));
// 默认选择第一个网元 // 默认选择第一个网元
const info = item.children[0]; const info = item.children[0];
state.neIds = [info.neId]; state.neIds = [info.neId];
queryParams.neIds = [info.neId]; queryParams.neIds = [info.neId];
selectedNes.value = [{ selectedNes.value = [
neType: item.value, {
neId: info.neId neType: item.value,
}]; neId: info.neId,
},
];
} else { } else {
const item = neCascaderOptions.value[0]; const item = neCascaderOptions.value[0];
state.neType = item.value; state.neType = item.value;
@@ -1289,17 +1361,19 @@ onMounted(() => {
// 获取该类型下的网元ID列表 // 获取该类型下的网元ID列表
availableNeIds.value = item.children.map((ne: any) => ({ availableNeIds.value = item.children.map((ne: any) => ({
label: `${ne.label}`, label: `${ne.label}`,
value: ne.neId value: ne.neId,
})); }));
// 默认选择第一个网元 // 默认选择第一个网元
const info = item.children[0]; const info = item.children[0];
state.neIds = [info.neId]; state.neIds = [info.neId];
queryParams.neIds = [info.neId]; queryParams.neIds = [info.neId];
selectedNes.value = [{ selectedNes.value = [
neType: item.value, {
neId: info.neId neType: item.value,
}]; neId: info.neId,
},
];
} }
// 查询当前小时 // 查询当前小时
@@ -1353,7 +1427,7 @@ onBeforeUnmount(() => {
@change="handleNeTypeChange" @change="handleNeTypeChange"
:field-names="{ :field-names="{
label: 'label', label: 'label',
value: 'value' value: 'value',
}" }"
:allow-clear="false" :allow-clear="false"
/> />
@@ -1380,6 +1454,7 @@ onBeforeUnmount(() => {
<a-range-picker <a-range-picker
v-model:value="queryRangePicker" v-model:value="queryRangePicker"
bordered bordered
:presets="ranges"
:allow-clear="false" :allow-clear="false"
:show-time="{ format: 'HH:mm:ss' }" :show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"

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

@@ -86,17 +86,36 @@ let queryRangePicker = ref<[string, string]>(['', '']);
/**时间选择 */ /**时间选择 */
const ranges = ref([ const ranges = ref([
{ {
label: t('views.perfManage.customTarget.sixHoursAgo'), label: t('views.perfManage.customTarget.new1Hour'),
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()], value: [dayjs().startOf('day'), dayjs()],
}, },
{
label: t('views.perfManage.customTarget.ago1Hour'),
value: [dayjs().subtract(1, 'hour').startOf('hour'), dayjs().endOf('hour')],
},
// {
// label: t('views.perfManage.customTarget.ago3Hour'),
// value: [dayjs().subtract(3, 'hours'), dayjs()],
// },
// {
// label: t('views.perfManage.customTarget.ago6Hour'),
// value: [dayjs().subtract(6, 'hours'), dayjs()],
// },
{
label: t('views.perfManage.customTarget.ago1Day'),
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day'),
],
},
{
label: t('views.perfManage.customTarget.ago7Day'),
value: [dayjs().subtract(7, 'day').startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago15Day'),
value: [dayjs().subtract(15, 'day').startOf('day'), dayjs()],
},
]); ]);
/**表格字段列 */ /**表格字段列 */

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

@@ -36,17 +36,36 @@ const neInfoStore = useNeInfoStore();
//日期快捷选择 //日期快捷选择
const ranges = ref([ const ranges = ref([
{ {
label: t('views.perfManage.customTarget.sixHoursAgo'), label: t('views.perfManage.customTarget.new1Hour'),
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()], value: [dayjs().startOf('day'), dayjs()],
}, },
{
label: t('views.perfManage.customTarget.ago1Hour'),
value: [dayjs().subtract(1, 'hour').startOf('hour'), dayjs().endOf('hour')],
},
// {
// label: t('views.perfManage.customTarget.ago3Hour'),
// value: [dayjs().subtract(3, 'hours'), dayjs()],
// },
// {
// label: t('views.perfManage.customTarget.ago6Hour'),
// value: [dayjs().subtract(6, 'hours'), dayjs()],
// },
{
label: t('views.perfManage.customTarget.ago1Day'),
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day'),
],
},
{
label: t('views.perfManage.customTarget.ago7Day'),
value: [dayjs().subtract(7, 'day').startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago15Day'),
value: [dayjs().subtract(15, 'day').startOf('day'), dayjs()],
},
]); ]);
//WebSocket连接 //WebSocket连接
const ws = ref<WS | null>(null); const ws = ref<WS | null>(null);

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

@@ -58,30 +58,38 @@ echarts.use([
const ws = ref<WS | null>(null); const ws = ref<WS | null>(null);
//时间选择 //时间选择
// let ranges = ref<Record<string, [Dayjs, Dayjs]>>({
// [t('views.perfManage.customTarget.sixHoursAgo')]: [
// dayjs().subtract(6, 'hours'),
// dayjs(),
// ],
// [t('views.perfManage.customTarget.threeHoursAgo')]: [
// dayjs().subtract(3, 'hours'),
// dayjs(),
// ],
// [t('views.monitor.monitor.today')]: [dayjs().startOf('day'), dayjs()],
// });
const ranges = ref([ const ranges = ref([
{ {
label: t('views.perfManage.customTarget.sixHoursAgo'), label: t('views.perfManage.customTarget.new1Hour'),
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()], value: [dayjs().startOf('day'), dayjs()],
}, },
{
label: t('views.perfManage.customTarget.ago1Hour'),
value: [dayjs().subtract(1, 'hour').startOf('hour'), dayjs().endOf('hour')],
},
// {
// label: t('views.perfManage.customTarget.ago3Hour'),
// value: [dayjs().subtract(3, 'hours'), dayjs()],
// },
// {
// label: t('views.perfManage.customTarget.ago6Hour'),
// value: [dayjs().subtract(6, 'hours'), dayjs()],
// },
{
label: t('views.perfManage.customTarget.ago1Day'),
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day'),
],
},
{
label: t('views.perfManage.customTarget.ago7Day'),
value: [dayjs().subtract(7, 'day').startOf('day'), dayjs()],
},
{
label: t('views.perfManage.customTarget.ago15Day'),
value: [dayjs().subtract(15, 'day').startOf('day'), dayjs()],
},
]); ]);
//日期范围响应式变量 //日期范围响应式变量
const dateRange = ref<[string, string]>([ const dateRange = ref<[string, string]>([
@@ -152,10 +160,10 @@ const KPI_TITLE: Record<string, string> = {
const neInfoStore = useNeInfoStore(); const neInfoStore = useNeInfoStore();
// 添加网元列表相关变量 // 添加网元列表相关变量
const neList = ref<Record<NeType, {neId: string, neName: string}[]>>({ const neList = ref<Record<NeType, { neId: string; neName: string }[]>>({
AMF: [], AMF: [],
UPF: [], UPF: [],
IMS: [] IMS: [],
}); });
// 添加获取网元列表的函数 // 添加获取网元列表的函数
@@ -174,7 +182,7 @@ const fetchNeList = async () => {
if (ALL_NE_TYPES.includes(neType)) { if (ALL_NE_TYPES.includes(neType)) {
neList.value[neType].push({ neList.value[neType].push({
neId: ne.neId, neId: ne.neId,
neName: ne.neName neName: ne.neName,
}); });
} }
}); });
@@ -324,7 +332,7 @@ const fetchChartData = async () => {
return res.data.map(item => ({ return res.data.map(item => ({
...item, ...item,
_neId: ne.neId, _neId: ne.neId,
neName: `${neType}-${ne.neId}` neName: `${neType}-${ne.neId}`,
})); }));
} }
return []; return [];
@@ -551,24 +559,28 @@ 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, confine: true,
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);',
}, },
@@ -583,7 +595,8 @@ const updateChart = () => {
selected: Object.fromEntries( selected: Object.fromEntries(
kpiStats.value.map(item => [ kpiStats.value.map(item => [
item.title, item.title,
selectedRows.value.length === 0 || selectedRows.value.includes(item.kpiId) selectedRows.value.length === 0 ||
selectedRows.value.includes(item.kpiId),
]) ])
), ),
show: false, show: false,
@@ -606,7 +619,7 @@ const updateChart = () => {
dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss') dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss')
), ),
axisLabel: { axisLabel: {
// formatter: '{value}', // formatter: '{value}',
color: color:
document.documentElement.getAttribute('data-theme') === 'dark' document.documentElement.getAttribute('data-theme') === 'dark'
? '#CACADA' ? '#CACADA'
@@ -623,9 +636,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,
@@ -642,7 +656,8 @@ const updateChart = () => {
}; };
if (chart) { if (chart) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (chart) { // 添加额外的空值检查 if (chart) {
// 添加额外的空值检查
chart.setOption(option, true); chart.setOption(option, true);
chart.resize(); chart.resize();
} }
@@ -729,7 +744,7 @@ const fetchSpecificKPI = async () => {
key: item.kpiId, key: item.kpiId,
kpiId: item.kpiId, kpiId: item.kpiId,
neType: neType, neType: neType,
} };
}); });
allKPIs = [...allKPIs, ...filteredKPIs]; allKPIs = [...allKPIs, ...filteredKPIs];
@@ -845,7 +860,9 @@ const updateKpiStats = () => {
if (values.length === 0) continue; if (values.length === 0) continue;
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 = Number((total / values.length).toFixed(2)); const avg = Number((total / values.length).toFixed(2));
kpiStats.value.push({ kpiStats.value.push({
@@ -943,7 +960,8 @@ const updateChartLegendSelect = () => {
const legendSelected = Object.fromEntries( const legendSelected = Object.fromEntries(
kpiStats.value.map(item => [ kpiStats.value.map(item => [
item.title, item.title,
selectedRows.value.length === 0 || selectedRows.value.includes(item.kpiId) selectedRows.value.length === 0 ||
selectedRows.value.includes(item.kpiId),
]) ])
); );