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

src/views/faultManage/history-alarm/index.vue

@@ -19,6 +19,7 @@ import saveAs from 'file-saver';
 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();
@@ -40,32 +41,50 @@ let dict: {
   activeAlarmSeverity: [],
 });
 
-/**记录开始结束时间 */
-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 tableColumnsDnd = ref<ColumnsType>([]);
 
 /**查询参数 */
 let queryParams = reactive({
+  alarmStatus: 0,
+  sortField: 'event_time',
+  sortOrder: 'desc',
   /**告警设备类型 */
-  ne_type: '',
+  neType: '',
   /**告警网元名称 */
-  ne_name: '',
+  neName: '',
   /**告警网元标识 */
-  ne_id: '',
+  neId: '',
   /**告警编号 */
-  alarm_code: '',
+  alarmCode: '',
   /**告警级别 */
-  orig_severity: undefined,
-  beginTime: '',
-  endTime: '',
-  /**告警产生时间 */
-  eventTime: '',
+  origSeverity: undefined,
+  /**告警产生时间开始时间 */
+  beginTime: undefined as undefined | number,
+  /**告警产生时间结束时间 */
+  endTime: undefined as undefined | number,
   /**虚拟化标识 */
-  pv_flag: undefined,
+  pvFlag: undefined,
   /**告警类型 */
-  alarm_type: undefined,
+  alarmType: undefined,
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -75,24 +94,27 @@ let queryParams = reactive({
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
+    alarmStatus: 0,
     /**告警设备类型 */
-    ne_type: '',
+    neType: '',
     /**告警网元名称 */
-    ne_name: '',
+    neName: '',
     /**告警网元标识 */
-    ne_id: '',
+    neId: '',
     /**告警编号 */
-    alarm_code: '',
+    alarmCode: '',
     /**告警级别 */
-    orig_severity: undefined,
+    origSeverity: undefined,
     /**告警产生时间 */
-    eventTime: '',
+    beginTime: undefined,
+    endTime: undefined,
     /**虚拟化标识 */
-    pv_flag: undefined,
+    pvFlag: undefined,
     /**告警类型 */
-    alarm_type: undefined,
+    alarmType: undefined,
     /**当前页数 */
   });
+  queryRangePicker.value = undefined;
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -124,54 +146,31 @@ 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.neName'),
-    dataIndex: 'neName',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    width: 5,
+    title: t('views.faultManage.activeAlarm.alarmType'),
+    dataIndex: 'alarmType',
+    key: 'alarmType',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
     align: 'left',
-    dataIndex: 'origSeverity',
     key: 'origSeverity',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.alarmCode'),
-    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 5,
+    dataIndex: 'origSeverity',
+    width: 100,
   },
   {
     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);
@@ -180,37 +179,60 @@ let tableColumns: ColumnsType = [
     },
   },
   {
-    title: t('views.faultManage.activeAlarm.alarmType'),
-    dataIndex: 'alarmType',
-    key: 'alarmType',
+    title: t('views.faultManage.activeAlarm.alarmId'),
+    dataIndex: 'alarmId',
     align: 'left',
-    width: 5,
+    width: 150,
+    ellipsis: true,
   },
   {
-    title: t('views.faultManage.activeAlarm.pvFlag'),
+    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.neName'),
+    dataIndex: 'neName',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.common.neId'),
+    dataIndex: 'neId',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.ne.neInfo.pvflag'),
     dataIndex: 'pvFlag',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.clearUser'),
     dataIndex: 'clearUser',
     align: 'left',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.clearType'),
     dataIndex: 'clearType',
     key: 'clearType',
     align: 'left',
-    width: 5,
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.clearTime'),
     dataIndex: 'clearTime',
     align: 'left',
-    sorter: (a: any, b: any) => 1,
-    width: 5,
+    width: 150,
     customRender(opt) {
       if (typeof opt.value === 'number') {
         return parseDateToStr(+opt.value);
@@ -218,25 +240,12 @@ let tableColumns: ColumnsType = [
       return opt.value;
     },
   },
-  {
-    title: t('views.faultManage.activeAlarm.ackState'),
-    dataIndex: 'ackState',
-    key: 'ackState',
-    align: 'left',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.ackUser'),
-    dataIndex: 'ackUser',
-    align: 'left',
-    width: 5,
-  },
   {
     title: t('common.operate'),
-    key: 'alarm_id',
-    align: 'center',
+    key: 'id',
+    align: 'left',
     fixed: 'right',
-    width: 5,
+    width: 100,
   },
 ];
 
@@ -547,11 +556,19 @@ 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 => {
     if (res.code === RESULT_CODE_SUCCESS) {
       // 取消勾选
@@ -615,38 +632,71 @@ 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="ne_type"
-            >
+            <a-form-item :label="t('views.ne.common.neType')" name="neType">
               <a-auto-complete
-                v-model:value="queryParams.ne_type"
+                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.origLevel')"
+              name="orig_severity"
+            >
+              <a-select
+                v-model:value="queryParams.origSeverity"
+                :placeholder="t('common.selectPlease')"
+                allow-clear
+                :options="dict.activeAlarmSeverity"
               />
             </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.alarmType')"
+              name="alarm_type"
             >
-              <a-input
-                v-model:value="queryParams.ne_name"
-                allow-clear
-              ></a-input>
+              <a-select
+                v-model:value="queryParams.alarmType"
+                :placeholder="t('common.selectPlease')"
+                :options="dict.activeAlarmType"
+              />
             </a-form-item>
           </a-col>
           <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.faultManage.activeAlarm.neId')"
-              name="ne_id"
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarm_code"
             >
-              <a-input v-model:value="queryParams.ne_id" 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-row>
+        <a-row :gutter="16">
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.faultManage.activeAlarm.eventTime')"
+              name="eventTime"
+            >
+              <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-form-item>
               <a-space :size="8">
@@ -662,87 +712,17 @@ 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.alarm_code"
-                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.origLevel')"
-              name="orig_severity"
-            >
-              <a-select
-                v-model:value="queryParams.orig_severity"
-                :placeholder="t('common.selectPlease')"
-                allow-clear
-                :options="dict.activeAlarmSeverity"
-              />
-            </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.pvFlag')"
-              name="pv_flag"
-            >
-              <a-select
-                v-model:value="queryParams.pv_flag"
-                :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.alarmType')"
-              name="alarm_type"
-            >
-              <a-select
-                v-model:value="queryParams.alarm_type"
-                :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="fnCancelConfirm()"
             :disabled="state.selectedRowKeys.length <= 0"
-            v-if="false"
           >
             <template #icon>
               <CloseOutlined />
@@ -824,7 +804,7 @@ onMounted(() => {
           onChange: onSelectChange,
         }"
         :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'">
@@ -848,7 +828,7 @@ onMounted(() => {
           <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>
@@ -878,8 +858,13 @@ onMounted(() => {
       @ok="fnModalOk"
       :ok-text="t('views.faultManage.activeAlarm.confirm')"
       @cancel="fnModalCancel"
-      :footer="false"
     >
+      <template v-slot:footer>
+        <a-button @click="fnModalCancel">
+          {{ t('views.faultManage.activeAlarm.closeModal') }}
+        </a-button>
+      </template>
+
       <a-form
         name="modalStateFrom"
         layout="horizontal"
@@ -906,38 +891,23 @@ onMounted(() => {
 
         <a-row>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.neId')"
-              name="neId"
-            >
-              {{ modalState.from.neId }}
-            </a-form-item>
-          </a-col>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.neName')"
-              name="neName"
-            >
-              {{ modalState.from.neName }}
-            </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-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.common.neName')" name="neName">
+              {{ modalState.from.neName }}
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item :label="t('views.ne.neInfo.pvflag')" name="pvFlag">
+              {{ modalState.from.pvFlag }}
             </a-form-item>
           </a-col>
         </a-row>
@@ -962,15 +932,6 @@ onMounted(() => {
         </a-row>
 
         <a-row>
-          <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item
-              :label="t('views.faultManage.activeAlarm.pvFlag')"
-              name="pvFlag"
-            >
-              {{ modalState.from.pvFlag }}
-            </a-form-item>
-          </a-col>
-
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
               :label="t('views.faultManage.activeAlarm.alarmType')"
@@ -982,6 +943,14 @@ onMounted(() => {
               />
             </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>
+          </a-col>
         </a-row>
 
         <a-form-item