refactor: 优化告警相关API去除SQL查询

src/views/faultManage/event/index.vue

@@ -8,42 +8,41 @@ import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 import { ColumnsType } from 'ant-design-vue/es/table';
 import { listAct, exportAll } from '@/api/faultManage/eventAlarm';
 import useI18n from '@/hooks/useI18n';
-import useDictStore from '@/store/modules/dict';
 import useNeInfoStore from '@/store/modules/neinfo';
 import saveAs from 'file-saver';
 import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { writeSheet } from '@/utils/execl-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { parseDateToStr } from '@/utils/date-utils';
+import dayjs, { type Dayjs } from 'dayjs';
 const neInfoStore = useNeInfoStore();
-const { getDict } = useDictStore();
 const { t } = useI18n();
 
-/**字典数据 */
-let dict: {
-  /**活动告警类型 */
-  activeAlarmType: DictType[];
-  /**告警清除类型 */
-  activeClearType: DictType[];
-  /**告警清除类型 */
-  activeAckState: DictType[];
-  /**原始严重程度 */
-  activeAlarmSeverity: DictType[];
-} = reactive({
-  activeAlarmType: [],
-  activeClearType: [],
-  activeAckState: [],
-  activeAlarmSeverity: [],
-});
-
 /**表格字段列排序 */
 let tableColumnsDnd = ref<ColumnsType>([]);
 
-/**记录开始结束时间 */
-let queryRangePicker = ref<[string, string]>(['', '']);
+/**开始结束时间 */
+let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>(undefined);
+/**时间范围 */
+let rangePickerPresets = ref([
+  {
+    label: 'Now hour',
+    value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
+  },
+  { label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+  {
+    label: 'Yesterday',
+    value: [
+      dayjs().subtract(1, 'day').startOf('day'),
+      dayjs().subtract(1, 'day').endOf('day'),
+    ],
+  },
+]);
 
 /**查询参数 */
 let queryParams = reactive({
+  sortField: 'event_time',
+  sortOrder: 'desc',
   /**告警设备类型 */
   neType: '',
   /**告警网元名称 */
@@ -54,10 +53,10 @@ let queryParams = reactive({
   alarmCode: '',
   /**告警级别 */
   origSeverity: undefined,
-  beginTime: '',
-  endTime: '',
-  /**告警产生时间 */
-  eventTime: '',
+  /**告警产生时间开始时间 */
+  beginTime: undefined as undefined | number,
+  /**告警产生时间结束时间 */
+  endTime: undefined as undefined | number,
   /**虚拟化标识 */
   pvFlag: undefined,
   /**告警类型 */
@@ -82,13 +81,15 @@ function fnQueryReset() {
     /**告警级别 */
     origSeverity: undefined,
     /**告警产生时间 */
-    eventTime: '',
+    beginTime: undefined,
+    endTime: undefined,
     /**虚拟化标识 */
     pvFlag: undefined,
     /**告警类型 */
     alarmType: undefined,
     /**当前页数 */
   });
+  queryRangePicker.value = undefined;
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -119,42 +120,19 @@ let tableState: TabeStateType = reactive({
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
-  {
-    title: t('views.faultManage.activeAlarm.alarmId'),
-    dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neId'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.alarmCode'),
-    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 5,
-  },
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
     align: 'left',
-    width: 5,
+    width: 200,
+    ellipsis: true,
   },
+
   {
     title: t('views.faultManage.activeAlarm.eventTime'),
     dataIndex: 'eventTime',
-    align: 'center',
-    sorter: (a: any, b: any) => 1,
-    width: 5,
+    align: 'left',
+    width: 150,
     customRender(opt) {
       if (typeof opt.value === 'number') {
         return parseDateToStr(+opt.value);
@@ -162,12 +140,37 @@ let tableColumns: ColumnsType = [
       return opt.value;
     },
   },
+  {
+    title: t('views.faultManage.activeAlarm.alarmId'),
+    dataIndex: 'alarmId',
+    align: 'left',
+    width: 150,
+    ellipsis: true,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.alarmCode'),
+    dataIndex: 'alarmCode',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neType'),
+    dataIndex: 'neType',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
   {
     title: t('common.operate'),
-    key: 'alarm_id',
-    align: 'center',
+    key: 'id',
+    align: 'left',
     fixed: 'right',
-    width: 5,
+    width: 100,
   },
 ];
 
@@ -391,11 +394,18 @@ function fnGetList(pageNum?: number) {
   if (pageNum) {
     queryParams.pageNum = pageNum;
   }
-  if (!queryRangePicker.value) {
-    queryRangePicker.value = ['', ''];
+
+  // 时间范围
+  if (
+    Array.isArray(queryRangePicker.value) &&
+    queryRangePicker.value.length > 0
+  ) {
+    queryParams.beginTime = queryRangePicker.value[0].valueOf();
+    queryParams.endTime = queryRangePicker.value[1].valueOf();
+  } else {
+    queryParams.beginTime = undefined;
+    queryParams.endTime = undefined;
   }
-  queryParams.beginTime = queryRangePicker.value[0];
-  queryParams.endTime = queryRangePicker.value[1];
 
   listAct(toRaw(queryParams)).then((res: any) => {
     if (res.code === RESULT_CODE_SUCCESS) {
@@ -424,29 +434,12 @@ function fnGetList(pageNum?: number) {
 }
 
 onMounted(() => {
-  // 初始字典数据
-  Promise.allSettled([
-    getDict('active_alarm_type'),
-    getDict('active_clear_type'),
-    getDict('active_ack_state'),
-    getDict('active_alarm_severity'),
-  ]).then(resArr => {
-    if (resArr[0].status === 'fulfilled') {
-      dict.activeAlarmType = resArr[0].value;
-    }
-    if (resArr[1].status === 'fulfilled') {
-      dict.activeClearType = resArr[1].value;
-    }
-    if (resArr[2].status === 'fulfilled') {
-      dict.activeAckState = resArr[2].value;
-    }
-    if (resArr[3].status === 'fulfilled') {
-      dict.activeAlarmSeverity = resArr[3].value;
-    }
-  });
   // 获取网元网元列表
-  useNeInfoStore().fnNelist();
-  fnGetList();
+  useNeInfoStore()
+    .fnNelist()
+    .finally(() => {
+      fnGetList();
+    });
 });
 </script>
 
@@ -460,37 +453,45 @@ onMounted(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.neType')"
-              name="neType "
-            >
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.common.neType')" name="neType">
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="neInfoStore.getNeSelectOtions"
                 allow-clear
-                :placeholder="t('common.inputPlease')"
+                :placeholder="t('views.ne.common.neTypePlease')"
               />
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.faultManage.activeAlarm.neName')"
-              name="ne_name"
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarm_code"
             >
-              <a-input v-model:value="queryParams.neName" allow-clear></a-input>
+              <a-input
+                v-model:value="queryParams.alarmCode"
+                allow-clear
+                :placeholder="t('common.inputPlease')"
+              ></a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="8" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.faultManage.activeAlarm.neId')"
-              name="ne_id"
+              :label="t('views.faultManage.activeAlarm.eventTime')"
+              name="eventTime"
             >
-              <a-input v-model:value="queryParams.neId" allow-clear></a-input>
+              <a-range-picker
+                v-model:value="queryRangePicker"
+                :presets="rangePickerPresets"
+                :bordered="true"
+                :allow-clear="false"
+                style="width: 100%"
+                :show-time="{ format: 'HH:mm:ss' }"
+                format="YYYY-MM-DD HH:mm:ss"
+              ></a-range-picker>
             </a-form-item>
           </a-col>
-
-          <a-col :lg="6" :md="12" :xs="24">
+          <a-col :lg="4" :md="12" :xs="24">
             <a-form-item>
               <a-space :size="8">
                 <a-button type="primary" @click.prevent="fnGetList(1)">
@@ -505,69 +506,13 @@ onMounted(() => {
             </a-form-item>
           </a-col>
         </a-row>
-        <a-row>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.alarmCode')"
-              name="alarm_code"
-            >
-              <a-input
-                v-model:value="queryParams.alarmCode"
-                allow-clear
-              ></a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.pvFlag')"
-              name="pv_flag"
-            >
-              <a-select
-                v-model:value="queryParams.pvFlag"
-                :placeholder="t('common.selectPlease')"
-                :options="[
-                  { label: 'PNF', value: 'PNF' },
-                  { label: 'VNF', value: 'VNF' },
-                ]"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.eventTime')"
-              name="eventTime"
-            >
-              <a-range-picker
-                v-model:value="queryRangePicker"
-                value-format="YYYY-MM-DD HH:mm:ss"
-                format="YYYY-MM-DD HH:mm:ss"
-                show-time
-                style="width: 400px"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.alarmType')"
-              name="alarm_type"
-            >
-              <a-select
-                v-model:value="queryParams.alarmType"
-                :placeholder="t('common.selectPlease')"
-                :options="dict.activeAlarmType"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
       </a-form>
     </a-card>
 
     <a-card :bordered="false" :body-style="{ padding: '0px' }">
       <!-- 插槽-卡片左侧侧 -->
       <template #title>
-        <a-space :size="8" align="center">
+        <a-space :size="8" align="center" v-if="false">
           <a-button
             type="primary"
             @click.prevent="fnExportAll()"
@@ -622,7 +567,7 @@ onMounted(() => {
             </a-dropdown>
           </a-tooltip>
           <TableColumnsDnd
-            cache-id="alarmActive"
+            cache-id="alarmEvent"
             :columns="tableColumns"
             v-model:columns-dnd="tableColumnsDnd"
           ></TableColumnsDnd>
@@ -638,31 +583,10 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
-        :scroll="{ x: tableColumns.length * 120, y: 400 }"
+        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
       >
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'origSeverity'">
-            <DictTag
-              :options="dict.activeAlarmSeverity"
-              :value="record.origSeverity"
-            />
-          </template>
-          <template v-if="column.key === 'alarmType'">
-            <DictTag
-              :options="dict.activeAlarmType"
-              :value="record.alarmType"
-            />
-          </template>
-          <template v-if="column.key === 'clearType'">
-            <DictTag
-              :options="dict.activeClearType"
-              :value="record.clearType"
-            />
-          </template>
-          <template v-if="column.key === 'ackState'">
-            <DictTag :options="dict.activeAckState" :value="record.ackState" />
-          </template>
-          <template v-if="column.key === 'alarm_id'">
+          <template v-if="column?.key === 'id'">
             <a-space :size="8" align="center">
               <a-tooltip>
                 <template #title>{{ t('common.viewText') }}</template>
@@ -692,9 +616,9 @@ onMounted(() => {
       @cancel="fnModalCancel"
     >
       <template v-slot:footer>
-        <a-button @click="fnModalCancel">{{
-          t('views.faultManage.activeAlarm.closeModal')
-        }}</a-button>
+        <a-button @click="fnModalCancel">
+          {{ t('views.faultManage.activeAlarm.closeModal') }}
+        </a-button>
       </template>
 
       <a-form
@@ -725,29 +649,23 @@ onMounted(() => {
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.faultManage.activeAlarm.neId')"
-              name="neId"
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarmCode"
             >
-              {{ modalState.from.neId }}
+              {{ modalState.from.alarmCode }}
             </a-form-item>
           </a-col>
         </a-row>
 
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.neType')"
-              name="neType"
-            >
+            <a-form-item :label="t('views.ne.common.neType')" name="neType">
               {{ modalState.from.neType }}
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.alarmCode')"
-              name="alarmCode"
-            >
-              {{ modalState.from.alarmCode }}
+            <a-form-item :label="t('views.ne.common.neId')" name="neId">
+              {{ modalState.from.neId }}
             </a-form-item>
           </a-col>
         </a-row>