From 98ed8adfe3ccfece4cffa3127b52e1c7ccad95b0 Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 10 Jan 2025 19:33:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BD=91=E5=85=83=E7=8A=B6=E6=80=813?= =?UTF-8?q?=E5=BE=85=E6=9C=BA=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/i18n/locales/en-US.ts | 2 +- src/views/configManage/neOverview/index.vue | 172 ++++++++++---------- src/views/ne/neInfo/index.vue | 10 +- 3 files changed, 86 insertions(+), 98 deletions(-) diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts index 0cdcc16d..36229c93 100644 --- a/src/i18n/locales/en-US.ts +++ b/src/i18n/locales/en-US.ts @@ -223,7 +223,7 @@ export default { serialNum: 'Serial Number', expiryDate: 'Expiry Date', neStatus: 'Status Abnormal', - runStatus:'Status', + runStatus: 'Runing Status', mark:'Information', object:'Object', versionNum:'Version', diff --git a/src/views/configManage/neOverview/index.vue b/src/views/configManage/neOverview/index.vue index aa2e49c6..ec3c7a3e 100644 --- a/src/views/configManage/neOverview/index.vue +++ b/src/views/configManage/neOverview/index.vue @@ -37,17 +37,6 @@ const statusBar = ref(undefined); /**图实例对象 */ const statusBarChart = ref(null); -/**网元状态字典数据 */ -let indexColor = ref([ - { label: 'Normal', value: 'normal', tagType: '', tagClass: '#91cc75' }, - { - label: 'Abnormal', - value: 'abnormal', - tagType: '', - tagClass: '#ee6666', - }, -]); - /**表格字段列 */ let tableColumns: ColumnsType = [ { @@ -127,71 +116,63 @@ let tableState: TabeStateType = reactive({ let serverState: any = ref({}); /**查询网元状态列表 */ -function fnGetList(one: boolean) { - if (tableState.loading) return; - if (one) { - tableState.loading = true; +async function fnGetList() { + try { + const res = await listAllNeInfo({ bandStatus: true }); + tableState.data = res.data; + // 选择第一个 + if (res.data.length > 0) { + const id = res.data[0].id; + fnTableSelectedRowKeys([id]); + } else { + fnTableSelectedRowKeys(tableState.selectedRowKeys); + } + } catch (error) { + console.log(error); + tableState.data = []; } - listAllNeInfo({ bandStatus: true }) - .then(res => { - tableState.data = res.data; - tableState.loading = false; - if (one && res.data.length > 0) { - const id = res.data[0].id; - fnTableSelectedRowKeys([id]); - } else { - fnTableSelectedRowKeys(tableState.selectedRowKeys); - } - }) - .finally(() => { - var rightNum = 0; - var errorNum = 0; - for (const v of tableState.data) { - if (v?.serverState?.online) { - rightNum++; - } else { - errorNum++; - } - } - /// 图表数据 - const optionData: any = { - title: { - text: '', - subtext: '', - left: 'center', - }, - tooltip: { - trigger: 'item', - }, - legend: { - orient: 'vertical', - left: 'left', - }, - color: indexColor.value.map(item => item.tagClass), - series: [ - { - name: t('views.index.realNeStatus'), - type: 'pie', - radius: '70%', - center: ['50%', '50%'], - data: [ - { value: rightNum, name: t('views.index.normal') }, - { value: errorNum, name: t('views.index.abnormal') }, - ], - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - }, - label: {}, - }, + if (tableState.data.length == 0) { + return; + } + var rightNum = 0; + var errorNum = 0; + for (const v of tableState.data) { + if (v?.serverState?.online) { + rightNum++; + } else { + errorNum++; + } + } + /// 图表数据 + const optionData: any = { + title: { + text: '', + subtext: '', + left: 'center', + }, + tooltip: { + trigger: 'item', + }, + legend: { + orient: 'vertical', + left: 'left', + }, + color: dict.indexStatus.map(item => item.tagClass), + series: [ + { + name: t('views.index.runStatus'), + type: 'pie', + radius: '70%', + center: ['50%', '50%'], + data: [ + { value: rightNum, name: t('views.index.normal') }, + { value: errorNum, name: t('views.index.abnormal') }, ], - }; - fnDesign(statusBar.value, optionData); - }); + }, + ], + }; + fnDesign(statusBar.value, optionData); } function fnDesign(container: HTMLElement | undefined, option: any) { @@ -261,29 +242,50 @@ function fnLocale() { appStore.setTitle(title); } +/**字典数据 */ +let dict: { + /**网元信息状态 */ + neInfoStatus: DictType[]; + /**主页状态 */ + indexStatus: DictType[]; +} = reactive({ + neInfoStatus: [], + indexStatus: [], +}); + let timer: any; onMounted(() => { - getDict('index_status') - .then(res => { - if (res.length > 0) { - indexColor.value = res; + // 初始字典数据 + Promise.allSettled([getDict('ne_info_status'), getDict('index_status')]) + .then(resArr => { + if (resArr[0].status === 'fulfilled') { + dict.neInfoStatus = resArr[0].value; + } + if (resArr[1].status === 'fulfilled') { + dict.indexStatus = resArr[1].value; } }) - .finally(() => { + .finally(async () => { fnLocale(); - fnGetList(true); - timer = setInterval(() => fnGetList(false), 10_000); // 每隔10秒执行一次 + tableState.loading = true; + await fnGetList(); + tableState.loading = false; + timer = setInterval(() => { + if (!timer) return; + fnGetList(); + }, 10_000); // 每隔10秒执行一次 }); }); // 在组件卸载之前清除定时器 onBeforeUnmount(() => { clearInterval(timer); + timer = null; });