fix: 网元状态概览页面定时刷新异常错误

src/views/configManage/neOverview/index.vue

@@ -2,7 +2,14 @@
 import { PageContainer } from 'antdv-pro-layout';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { message } from 'ant-design-vue/es';
-import { reactive, ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
+import {
+  reactive,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  markRaw,
+  useTemplateRef,
+} from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { TooltipComponent } from 'echarts/components';
 import { GaugeChart } from 'echarts/charts';
@@ -32,7 +39,7 @@ echarts.use([
 ]);
 
 /**图DOM节点实例对象 */
-const statusBar = ref<HTMLElement | undefined>(undefined);
+const statusBar = useTemplateRef<HTMLDivElement>('statusBar');
 
 /**图实例对象 */
 const statusBarChart = ref<any>(null);
@@ -116,25 +123,20 @@ let tableState: TabeStateType = reactive({
 let serverState: any = ref({});
 
 /**查询网元状态列表 */
-async function fnGetList() {
+async function fnGetList(reload: boolean = false) {
+  tableState.loading = !reload;
   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 = [];
   }
-
+  tableState.loading = false;
   if (tableState.data.length == 0) {
     return;
   }
+
   var rightNum = 0;
   var errorNum = 0;
   for (const v of tableState.data) {
@@ -144,6 +146,35 @@ async function fnGetList() {
       errorNum++;
     }
   }
+
+  // 初始
+  if (!reload) {
+    // 选择第一个
+    if (tableState.data.length > 0) {
+      const id = tableState.data[0].id;
+      fnTableSelectedRowKeys([id]);
+    } else {
+      fnTableSelectedRowKeys(tableState.selectedRowKeys);
+    }
+
+    if (statusBar.value) {
+      fnDesign(statusBar.value, rightNum, errorNum);
+    }
+  } else {
+    statusBarChart.value.setOption({
+      series: [
+        {
+          data: [
+            { value: rightNum, name: t('views.index.normal') },
+            { value: errorNum, name: t('views.index.abnormal') },
+          ],
+        },
+      ],
+    });
+  }
+}
+
+function fnDesign(container: HTMLElement, rightNum: number, errorNum: number) {
   /// 图表数据
   const optionData: any = {
     title: {
@@ -172,16 +203,8 @@ async function fnGetList() {
       },
     ],
   };
-  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);
+  statusBarChart.value = markRaw(echarts.init(container, 'light'));
+  statusBarChart.value.setOption(optionData);
 
   // 创建 ResizeObserver 实例
   var observer = new ResizeObserver(entries => {
@@ -267,12 +290,10 @@ onMounted(() => {
     })
     .finally(async () => {
       fnLocale();
-      tableState.loading = true;
-      await fnGetList();
-      tableState.loading = false;
+      await fnGetList(false);
       timer = setInterval(() => {
         if (!timer) return;
-        fnGetList();
+        fnGetList(true);
       }, 10_000); // 每隔10秒执行一次
     });
 });
@@ -285,7 +306,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <PageContainer :breadcrumb="{}" :loading="tableState.loading">
+  <PageContainer :breadcrumb="{}">
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
@@ -295,6 +316,7 @@ onBeforeUnmount(() => {
           size="small"
           :columns="tableColumns"
           :data-source="tableState.data"
+          :loading="tableState.loading"
           :pagination="false"
           :scroll="{ x: true }"
           :row-selection="{
@@ -320,7 +342,8 @@ onBeforeUnmount(() => {
           <div style="width: 100%; min-height: 200px" ref="statusBar"></div>
         </a-card>
         <a-card
-          :title="`${t('views.index.mark')} - ${serverState.neName || ''}`"
+          :loading="tableState.loading"
+          :title="`${t('views.index.mark')} - ${serverState.neName || 'OMC'}`"
           style="margin-top: 16px"
           size="small"
         >