From 1cfe5e2777a6e8f86a5f382c1b13c8434e013140 Mon Sep 17 00:00:00 2001 From: lai <371757574@qq.com> Date: Tue, 7 May 2024 11:21:57 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E9=A5=BC=E5=9B=BE?= =?UTF-8?q?=E6=97=A0=E6=84=9F=E6=9B=B4=E6=96=B0=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/index.vue | 55 +++++++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 22 deletions(-) diff --git a/src/views/index.vue b/src/views/index.vue index 9ad583e5..e143ee9a 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -2,7 +2,7 @@ import { PageContainer } from 'antdv-pro-layout'; import { ColumnsType } from 'ant-design-vue/lib/table'; import { message } from 'ant-design-vue/lib'; -import { reactive, toRaw, ref, onMounted, onBeforeUnmount } from 'vue'; +import { reactive, toRaw, ref, onMounted, onBeforeUnmount, markRaw } from 'vue'; import { listMain } from '@/api/index'; import useI18n from '@/hooks/useI18n'; import { TooltipComponent } from 'echarts/components'; @@ -30,6 +30,12 @@ echarts.use([ LabelLayout, ]); +/**图DOM节点实例对象 */ +const statusBar = ref(undefined); + +/**图实例对象 */ +const statusBarChart = ref(null); + /**网元状态字典数据 */ let indexColor = ref([ { label: 'Normal', value: 'normal', elTagType: '', elTagClass: '#91cc75' }, @@ -74,7 +80,7 @@ let tableColumns: ColumnsType = [ dataIndex: 'serialNum', align: 'center', }, - { + { title: t('views.index.expiryDate'), dataIndex: 'expiryDate', align: 'center', @@ -178,17 +184,7 @@ function fnGetList(one: boolean) { } } - var chartDom: any = document.getElementById('echarts-records'); - var existingChart = echarts.getInstanceByDom(chartDom); - var myChart: any; - if (existingChart) { - myChart = existingChart; - myChart.clear(); // 清空图表，重新设置数据 - } else { - myChart = echarts.init(chartDom); - } - - var option = { + const optionData: any = { title: { text: '', subtext: '', @@ -225,14 +221,28 @@ function fnGetList(one: boolean) { ], }; - option && myChart.setOption(option); - window.onresize = function () { - // echarts 窗口缩放自适应 随着div--echarts-records的大小来适应 - myChart.resize(); - }; + fnDesign(statusBar.value, optionData); }); } +function fnDesign(container: HTMLElement | undefined, option: any) { + if (!container) return; + + if (!statusBarChart.value) { + statusBarChart.value = markRaw(echarts.init(container, 'light')); + } + option && statusBarChart.value.setOption(option); + + // 创建 ResizeObserver 实例 + var observer = new ResizeObserver(entries => { + if (statusBarChart.value) { + statusBarChart.value.resize(); + } + }); + // 监听元素大小变化 + observer.observe(container); +} + /**抽屉 网元详细信息 */ const visible = ref(false); const closeDrawer = () => { @@ -257,9 +267,10 @@ function rowClick(record: any, index: any) { const sysMemUsageInKB = pronData.memUsage?.sysMemUsage; // 将KB转换为MB - const totalMemInMB = Math.round(totalMemInKB / 1024*100)/100; - const nfUsedMemInMB = Math.round(nfUsedMemInKB / 1024*100)/100; - const sysMemUsageInMB = Math.round(sysMemUsageInKB / 1024*100)/100; + const totalMemInMB = Math.round((totalMemInKB / 1024) * 100) / 100; + const nfUsedMemInMB = Math.round((nfUsedMemInKB / 1024) * 100) / 100; + const sysMemUsageInMB = + Math.round((sysMemUsageInKB / 1024) * 100) / 100; //渲染详细信息 pronInfo = { @@ -400,8 +411,8 @@ onBeforeUnmount(() => {
From 4c9b4de12fae565c2974b1ae741996a2c8322061 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Tue, 7 May 2024 12:01:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E7=9C=8B=E6=9D=BF=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E8=A1=8C=E4=B8=BA=E5=88=9D=E5=A7=8B=E6=9F=A5=E8=AF=A2=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=8E=92=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/overview/hooks/useUserActivity.ts | 2 ++ src/views/dashboard/overview/hooks/useWS.ts | 10 ++++++++++ 2 files changed, 12 insertions(+) diff --git a/src/views/dashboard/overview/hooks/useUserActivity.ts b/src/views/dashboard/overview/hooks/useUserActivity.ts index adbf7f27..6f573517 100644 --- a/src/views/dashboard/overview/hooks/useUserActivity.ts +++ b/src/views/dashboard/overview/hooks/useUserActivity.ts @@ -14,6 +14,7 @@ export function ueEventParse(item: Record) { return { eType: 'ue', eId: `ue_${item.id}_${Date.now()}`, + eTime: +item.timestamp, id: item.id, type: item.eventType, data: evData, @@ -40,6 +41,7 @@ export function cdrEventParse(item: Record) { return { eType: 'cdr', eId: `cdr_${item.id}_${Date.now()}`, + eTime: +item.timestamp, id: item.id, data: evData, }; diff --git a/src/views/dashboard/overview/hooks/useWS.ts b/src/views/dashboard/overview/hooks/useWS.ts index bc2e9a66..2e26044e 100644 --- a/src/views/dashboard/overview/hooks/useWS.ts +++ b/src/views/dashboard/overview/hooks/useWS.ts @@ -62,6 +62,11 @@ export default function useWS() { eventData.value.push(v); } } + + // 有数据进行排序 + if (eventData.value.length > 10) { + eventData.value.sort((a, b) => b.eTime - a.eTime); + } if (eventData.value.length > 0) { eventId.value = eventData.value[0].eId; } @@ -77,6 +82,11 @@ export default function useWS() { eventData.value.push(v); } } + + // 有数据进行排序 + if (eventData.value.length > 10) { + eventData.value.sort((a, b) => b.eTime - a.eTime); + } if (eventData.value.length > 0) { eventId.value = eventData.value[0].eId; }