From cf0116b5c66ef9f35fc1e65abf87a286741ee05e Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Thu, 21 Nov 2024 10:06:07 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20CDR=E6=97=B6=E9=97=B4=E7=9A=84?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/imsCDR/index.vue | 8 +++++++- src/views/dashboard/smfCDR/index.vue | 3 +-- src/views/dashboard/smscCDR/index.vue | 8 +++++++- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/views/dashboard/imsCDR/index.vue b/src/views/dashboard/imsCDR/index.vue index deec8653..0255e2ce 100644 --- a/src/views/dashboard/imsCDR/index.vue +++ b/src/views/dashboard/imsCDR/index.vue @@ -756,7 +756,13 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.cdr.time') }}: - {{ parseDateToStr(+record.timestamp * 1000) }} + + {{ + typeof record.cdrJSON.releaseTime === 'number' + ? parseDateToStr(+record.cdrJSON.releaseTime * 1000) + : record.cdrJSON.releaseTime + }} +
diff --git a/src/views/dashboard/smfCDR/index.vue b/src/views/dashboard/smfCDR/index.vue index 699f3cca..588a47fc 100644 --- a/src/views/dashboard/smfCDR/index.vue +++ b/src/views/dashboard/smfCDR/index.vue @@ -16,7 +16,6 @@ import { exportSMFDataCDR, listSMFDataCDR, } from '@/api/neData/smf'; -import { parseDateToStr } from '@/utils/date-utils'; import { OptionsType, WS } from '@/plugins/ws-websocket'; import PQueue from 'p-queue'; import saveAs from 'file-saver'; @@ -700,7 +699,7 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.cdr.time') }}: - {{ parseDateToStr(+record.timestamp * 1000) }} + {{ record.cdrJSON.invocationTimestamp }}
{{ t('views.dashboard.cdr.rowInfo') }} diff --git a/src/views/dashboard/smscCDR/index.vue b/src/views/dashboard/smscCDR/index.vue index 57140a04..2c33eb78 100644 --- a/src/views/dashboard/smscCDR/index.vue +++ b/src/views/dashboard/smscCDR/index.vue @@ -718,7 +718,13 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.cdr.time') }}: - {{ parseDateToStr(+record.timestamp * 1000) }} + + {{ + typeof record.cdrJSON.updateTime === 'number' + ? parseDateToStr(+record.cdrJSON.updateTime * 1000) + : record.cdrJSON.updateTime + }} +
{{ t('views.dashboard.cdr.rowInfo') }} From 78f963fbea57715166c560337364c179cede90d6 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Thu, 21 Nov 2024 12:06:32 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20CDR-IMS=E5=8E=BB=E6=8E=89MOSM=20MTSM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/imsCDR/index.vue | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/views/dashboard/imsCDR/index.vue b/src/views/dashboard/imsCDR/index.vue index 0255e2ce..23633cb3 100644 --- a/src/views/dashboard/imsCDR/index.vue +++ b/src/views/dashboard/imsCDR/index.vue @@ -571,9 +571,7 @@ onBeforeUnmount(() => { @@ -806,11 +804,23 @@ onBeforeUnmount(() => {
{{ t('views.dashboard.cdr.seizureTime') }}: - {{ record.cdrJSON.seizureTime }} + + {{ + typeof record.cdrJSON.seizureTime === 'number' + ? parseDateToStr(+record.cdrJSON.seizureTime * 1000) + : record.cdrJSON.seizureTime + }} +
{{ t('views.dashboard.cdr.releaseTime') }}: - {{ record.cdrJSON.releaseTime }} + + {{ + typeof record.cdrJSON.releaseTime === 'number' + ? parseDateToStr(+record.cdrJSON.releaseTime * 1000) + : record.cdrJSON.releaseTime + }} +
From fb855fd74eb47a443a52ea2563fe3f24140cff03 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Thu, 21 Nov 2024 18:19:07 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E8=8E=B7=E5=8F=96=E7=BD=91=E5=85=83?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=AE=9A=E6=97=B6=E8=BD=AE=E8=AF=A2=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/overview/index.vue | 2 ++ src/views/monitor/topology/index.vue | 25 +++++++++++++------ .../monitor/topologyArchitecture/index.vue | 17 +++++++------ 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue index bcf03188..231d0588 100644 --- a/src/views/dashboard/overview/index.vue +++ b/src/views/dashboard/overview/index.vue @@ -162,6 +162,7 @@ function loadData() { clearInterval(interval10s.value); interval10s.value = setInterval(() => { + if (!interval10s.value) return if (upfTFActive.value === '0') { upfTFSend('7'); upfTFActive.value = '7'; @@ -176,6 +177,7 @@ function loadData() { clearInterval(interval5s.value); interval5s.value = setInterval(() => { + if (!interval5s.value) return fnGetSkim(); // 获取概览信息 fnGetNeState(); // 获取网元状态 }, 5_000); diff --git a/src/views/monitor/topology/index.vue b/src/views/monitor/topology/index.vue index 3c87d33d..2e30e98c 100644 --- a/src/views/monitor/topology/index.vue +++ b/src/views/monitor/topology/index.vue @@ -30,11 +30,12 @@ function fnRanderData() { } /**网元状态调度器 */ -const interval10s = ref(null); +const interval = ref(true); /**查询网元状态 */ async function fnGetState() { for (const node of graphG6Data.nodes) { + if (!interval.value) return; const ne = node.info; // if (ne.neType === 'OMC') continue; const result = await stateNeInfo(ne.neType, ne.neId); @@ -151,11 +152,21 @@ function fnGetList(refresh: boolean = false) { }) .then(randerGroph => { if (!randerGroph) return; - fnGetState().finally(() => { - interval10s.value = setInterval(() => { - fnGetState(); // 获取网元状态 - }, 10_000); - }); + repeatFn(); + }); +} + +/**递归刷新网元状态 */ +function repeatFn() { + if (!interval.value) { + return; + } + fnGetState() + .finally(() => { + repeatFn(); // 递归调用自己 + }) + .catch(error => { + console.error(error); }); } @@ -165,7 +176,7 @@ onMounted(() => { }); onBeforeUnmount(() => { - clearInterval(interval10s.value); + interval.value = false; }); diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index a5ee3889..289a4ba1 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/src/views/monitor/topologyArchitecture/index.vue @@ -166,7 +166,7 @@ const graphNodeTooltip = new Tooltip({
${t('views.monitor.topology.expiryDate')}: ${neState.expire ?? '--'} -
+ `; }, @@ -294,7 +294,8 @@ function fnGraphDataLoad(reload: boolean = false) { Reflect.set(node, 'neState', { online: false }); // 图片路径处理 if (node.img) node.img = parseBasePath(node.img); - if (node.icon.show && node.icon?.img) node.icon.img = parseBasePath(node.icon.img); + if (node.icon.show && node.icon?.img) + node.icon.img = parseBasePath(node.icon.img); // 遍历是否有网元数据 const nodeID: string = node.id; const hasNe = res.neList.some(ne => { @@ -352,11 +353,11 @@ function fnGraphDataLoad(reload: boolean = false) { } clearInterval(interval10s.value); interval10s.value = null; - fnGetState().finally(() => { - interval10s.value = setInterval(() => { - fnGetState(); // 获取网元状态 - }, 10_000); - }); + fnGetState(); + interval10s.value = setInterval(async () => { + if (!interval10s.value) return; + fnGetState(); // 获取网元状态 + }, 20_000); }); } @@ -364,7 +365,7 @@ function fnGraphDataLoad(reload: boolean = false) { const interval10s = ref(null); /**查询网元状态 */ -async function fnGetState() { +function fnGetState() { // 获取节点状态 for (const node of graphState.data.nodes) { if (notNeNodes.includes(node.id)) continue; From 874e01996ae2fbf70748d8752f8d1448baee4c47 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 22 Nov 2024 09:56:51 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix=EF=BC=9A=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=A0=85=E6=A0=BC=E7=BA=BF?= =?UTF-8?q?=EF=BC=8C=E6=9B=B2=E7=BA=BF=E5=B9=B3=E6=BB=91=EF=BC=8C=E5=B9=B3?= =?UTF-8?q?=E5=9D=87=E5=80=BC=E8=AE=A1=E7=AE=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/locales/en-US.ts | 1 + src/i18n/locales/zh-CN.ts | 1 + src/views/perfManage/kpiOverView/index.vue | 115 ++++++++++----------- 3 files changed, 59 insertions(+), 58 deletions(-) diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 8df6dc8e..de715fb2 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -1110,6 +1110,7 @@ export default { "kpiName":"NE Metrics Name", "maxValue":"Max Value", "minValue":"Min Value", + "avgValue":"Average Value", "kpiChartTitle":"Overview of NE metrics", "changeLine":"Change to Line Charts", "changeBar":"Change to Bar Charts", diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts index 55f1b37a..d65403f0 100644 --- a/src/i18n/locales/zh-CN.ts +++ b/src/i18n/locales/zh-CN.ts @@ -1110,6 +1110,7 @@ export default { "kpiName":"指标名", "maxValue":"最大值", "minValue":"最小值", + "avgValue":"平均值", "kpiChartTitle":"网元指标概览", "changeLine":"切换为折线图", "changeBar":"切换为柱状图", diff --git a/src/views/perfManage/kpiOverView/index.vue b/src/views/perfManage/kpiOverView/index.vue index aa23d66c..da865a72 100644 --- a/src/views/perfManage/kpiOverView/index.vue +++ b/src/views/perfManage/kpiOverView/index.vue @@ -62,9 +62,9 @@ const ws = ref(null); // }); const ranges = ref([ {label:t('views.perfManage.customTarget.sixHoursAgo'),value:[dayjs().subtract(6, 'hours'), - dayjs(),]}, + dayjs(),]}, {label:t('views.perfManage.customTarget.threeHoursAgo'),value:[dayjs().subtract(3, 'hours'), - dayjs(),]}, + dayjs(),]}, {label:t('views.monitor.monitor.today'),value:[dayjs().startOf('day'), dayjs()]}, ]) //日期范围响应式变量 @@ -188,10 +188,9 @@ const processChartData = (rawData: any[]) => { } Object.assign(groupedData.get(timeKey), item); }); - // 获取当前选择的结束时间 - const endTime = dateRange.value[1]; - const processedData = Array.from(groupedData.values()) + + return Array.from(groupedData.values()) .sort((a, b) => Number(a.timeGroup) - Number(b.timeGroup)) .map(item => {//转换成图表需要的格式 const dataItem: ChartDataItem = { date: item.timeGroup.toString() }; @@ -200,17 +199,6 @@ const processChartData = (rawData: any[]) => { }); return dataItem; }); - // 如果有数据,且最后一个数据点的时间小于选择的结束时间 - if (processedData.length > 0 && Number(processedData[processedData.length - 1].date) < Number(endTime)) { - // 添加一个结束时间点,所有指标值设为0 - const endDataPoint: ChartDataItem = { date: endTime }; - selectedKPIs.value.forEach(kpiId => { - endDataPoint[kpiId] = 0; - }); - processedData.push(endDataPoint); - } - - return processedData; }; // 获取图表数据方法 const fetchChartData = async () => { @@ -236,7 +224,7 @@ const fetchChartData = async () => { endTime: String(endTime), sortField: 'timeGroup', sortOrder: 'asc', - interval: 5, + interval: 60*15, kpiIds: TARGET_KPI_IDS[neType].join(','), }; @@ -272,8 +260,9 @@ const kpiColors = new Map(); // 更新图表类型 const getSeriesConfig = () => ({ - symbol: 'circle', + symbol: 'none', symbolSize: 6, + smooth:0.6, showSymbol: true, }); @@ -293,19 +282,7 @@ const updateChart = () => { const data = chartData.value.map((item, index) => { const value = item[kpiId] || 0; // 如果是最后一个数据点,添加特殊样式 - if (index === chartData.value.length - 1) { - return { - value, - symbolSize: 12, // 更大的节点 - itemStyle: { - color, // 保持与线条相同的颜色 - borderWidth: 3, // 添加边框 - borderColor: color, // 边框颜色 - shadowBlur: 10, // 添加阴影效果 - shadowColor: color, - }, - }; - } + return value; }); @@ -379,6 +356,13 @@ const updateChart = () => { xAxis: { // 指定x轴类型为类目轴,适用于离散的类目数据 type: 'category', + splitLine: { + show: true, + lineStyle: { + // 使用深浅的间隔色 + color: '#aaa', + } + }, //控制坐标轴两边留白 // 当为折线图时(isLine为true)时不留白,柱状图时留白 // 这样可以让折线图从原点开始,柱状图有合适的间距 @@ -389,29 +373,29 @@ const updateChart = () => { dayjs(Number(item.date)).format('YYYY-MM-DD HH:mm:ss') ), //设置坐标轴刻度标签的样式 - axisLabel: { - interval: function(index: number, value: string) { - const currentTime = dayjs(value); - const minutes = currentTime.minute(); - const seconds = currentTime.second(); - - // 始终显示小时的起始和结束时间点 - if ((minutes === 0 && seconds === 0) || - (minutes === 59 && seconds === 59)) { - return true; - } - - // 对于中间的时间点,使用 auto 的逻辑 - if (index % Math.ceil(chartData.value.length / 6) === 0) { - return true; - } - - return false; - }, - rotate: 0, - align: 'center', - hideOverlap: true - } + // axisLabel: { + // interval: function(index: number, value: string) { + // const currentTime = dayjs(value); + // const minutes = currentTime.minute(); + // const seconds = currentTime.second(); + // + // // 始终显示小时的起始和结束时间点 + // if ((minutes === 0 && seconds === 0) || + // (minutes === 59 && seconds === 59)) { + // return true; + // } + // + // // 对于中间的时间点,使用 auto 的逻辑 + // if (index % Math.ceil(chartData.value.length / 6) === 0) { + // return true; + // } + // + // return false; + // }, + // rotate: 0, + // align: 'center', + // hideOverlap: true + // } }, yAxis: { // y轴配置 @@ -585,6 +569,7 @@ interface KPIStats { title: string; max: number; min: number; + avg:number; } // 添加计算属性,用于计算每个指标的最大值和最小值 @@ -599,11 +584,17 @@ const kpiStats = computed((): KPIStats[] => { // 获取该指标的所有数值 const values = chartData.value.map(item => Number(item[kpiId]) || 0); + // 计算平均值 + const avg = values.length > 0 + ? Number((values.reduce((sum, val) => sum + val, 0) / values.length).toFixed(2)) + : 0; + return { kpiId: kpiId, title: kpi.title, max: Math.max(...values), - min: Math.min(...values) + min: Math.min(...values), + avg:avg }; }).filter((item): item is KPIStats => item !== null); }); @@ -628,13 +619,13 @@ const statsColumns: TableColumnType[] = [ title: t('views.perfManage.kpiOverView.kpiName'), dataIndex: 'title', key: 'title', - width: '65%', + width: '63%', }, { title: t('views.perfManage.kpiOverView.maxValue'), dataIndex: 'max', key: 'max', - width: '17%', + width: '12%', sorter: (a: KPIStats, b: KPIStats) => a.max - b.max, // 添加排序函数 sortDirections: ['ascend', 'descend'], }, @@ -642,9 +633,17 @@ const statsColumns: TableColumnType[] = [ title: t('views.perfManage.kpiOverView.minValue'), dataIndex: 'min', key: 'min', - width: '17%', + width: '12%', sorter: (a: KPIStats, b: KPIStats) => a.min - b.min, // 添加排序函数 sortDirections: ['ascend', 'descend'], + }, + { + title: t('views.perfManage.kpiOverView.avgValue'), // 需要在语言包中添加对应的翻译 + dataIndex: 'avg', + key: 'avg', + width: '12%', + sorter: (a: KPIStats, b: KPIStats) => a.avg - b.avg, + sortDirections: ['ascend', 'descend'], } ]; From c2a3d4b8a8d4bbc98939cd850a967938b8f3332f Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 22 Nov 2024 10:14:45 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E7=B2=92=E5=BA=A6=EF=BC=8C=E4=BF=AE=E6=94=B9=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E6=97=B6=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/perfManage/kpiKeyTarget/index.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/perfManage/kpiKeyTarget/index.vue b/src/views/perfManage/kpiKeyTarget/index.vue index dc48de65..a4798631 100644 --- a/src/views/perfManage/kpiKeyTarget/index.vue +++ b/src/views/perfManage/kpiKeyTarget/index.vue @@ -208,8 +208,8 @@ const rangePicker = reactive({ ...Object.fromEntries(networkElementTypes.value.map(type => [ type, [ - dayjs().startOf('hour').valueOf().toString(), // 当前小时内 - dayjs().endOf('hour').valueOf().toString() + dayjs().subtract(1, 'hour').startOf('hour').valueOf().toString(), // 上一小时开始 + dayjs().startOf('hour').add(1, 'hour').valueOf().toString(), // 当前小时结束 ] ])) as Record, placeholder: [t('views.monitor.monitor.startTime'), t('views.monitor.monitor.endTime')] as [string, string], @@ -336,7 +336,7 @@ const fetchData = async (type: AllChartType) => { endTime, sortField: 'timeGroup', sortOrder: 'desc', - interval: 5, + interval: 60*15, }); if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {