feat: 网元状态3待机显示

src/views/configManage/neOverview/index.vue

@@ -37,17 +37,6 @@ const statusBar = ref<HTMLElement | undefined>(undefined);
 /**图实例对象 */
 const statusBarChart = ref<any>(null);
 
-/**网元状态字典数据 */
-let indexColor = ref<DictType[]>([
-  { 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;
 });
 </script>
 
 <template>
-  <PageContainer :breadcrumb="{}">
+  <PageContainer :breadcrumb="{}" :loading="tableState.loading">
     <a-row :gutter="16">
       <a-col :lg="14" :md="16" :xs="24">
         <!-- 表格列表 -->
@@ -292,7 +294,6 @@ onBeforeUnmount(() => {
           row-key="id"
           size="small"
           :columns="tableColumns"
-          :loading="tableState.loading"
           :data-source="tableState.data"
           :pagination="false"
           :scroll="{ x: true }"
@@ -305,12 +306,7 @@ onBeforeUnmount(() => {
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'status'">
-              <div v-if="record.serverState.online">
-                <a-tag color="blue">{{ t('views.index.normal') }}</a-tag>
-              </div>
-              <div v-else>
-                <a-tag color="pink">{{ t('views.index.abnormal') }}</a-tag>
-              </div>
+              <DictTag :options="dict.neInfoStatus" :value="record.status" />
             </template>
           </template>
         </a-table>