feat: 网元状态3待机显示

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',

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,23 +116,25 @@ let tableState: TabeStateType = reactive({
 let serverState: any = ref({});
 
 /**查询网元状态列表 */
-function fnGetList(one: boolean) {
-  if (tableState.loading) return;
-  if (one) {
-    tableState.loading = true;
-  }
-  listAllNeInfo({ bandStatus: true })
-    .then(res => {
+async function fnGetList() {
+  try {
+    const res = await listAllNeInfo({ bandStatus: true });
     tableState.data = res.data;
-      tableState.loading = false;
-      if (one && res.data.length > 0) {
+    // 选择第一个
+    if (res.data.length > 0) {
       const id = res.data[0].id;
       fnTableSelectedRowKeys([id]);
     } else {
       fnTableSelectedRowKeys(tableState.selectedRowKeys);
     }
-    })
-    .finally(() => {
+  } catch (error) {
+    console.log(error);
+    tableState.data = [];
+  }
+
+  if (tableState.data.length == 0) {
+    return;
+  }
   var rightNum = 0;
   var errorNum = 0;
   for (const v of tableState.data) {
@@ -167,10 +158,10 @@ function fnGetList(one: boolean) {
       orient: 'vertical',
       left: 'left',
     },
-        color: indexColor.value.map(item => item.tagClass),
+    color: dict.indexStatus.map(item => item.tagClass),
     series: [
       {
-            name: t('views.index.realNeStatus'),
+        name: t('views.index.runStatus'),
         type: 'pie',
         radius: '70%',
         center: ['50%', '50%'],
@@ -178,20 +169,10 @@ function fnGetList(one: boolean) {
           { 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: {},
       },
     ],
   };
   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>

src/views/ne/neInfo/index.vue

@@ -662,15 +662,7 @@ onMounted(() => {
               </a-divider>
               <div>
                 <span>{{ t('views.ne.neInfo.serviceState') }}：</span>
-                <a-tag
-                  :color="record.serverState.online ? 'processing' : 'error'"
-                >
-                  {{
-                    record.serverState.online
-                      ? t('views.ne.common.normalcy')
-                      : t('views.ne.common.exceptions')
-                  }}
-                </a-tag>
+                <DictTag :options="dict.neInfoStatus" :value="record.status" />
               </div>
               <div>
                 <span>{{ t('views.ne.neVersion.version') }}：</span>