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

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

@@ -24,6 +24,7 @@ import { writeSheet } from '@/utils/execl-utils';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { readLoalXlsx } from '@/utils/execl-utils';
 import { parseDateToStr } from '@/utils/date-utils';
+import dayjs, { type Dayjs } from 'dayjs';
 const neInfoStore = useNeInfoStore();
 const { getDict } = useDictStore();
 const { t, currentLocale } = useI18n();
@@ -48,11 +49,29 @@ let dict: {
 /**表格字段列排序 */
 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({
+  alarmStatus: 1,
+  sortField: 'event_time',
+  sortOrder: 'desc',
   /**告警设备类型 */
   neType: '',
   /**告警网元名称 */
@@ -63,10 +82,10 @@ let queryParams = reactive({
   alarmCode: '',
   /**告警级别 */
   origSeverity: undefined,
-  beginTime: '',
-  endTime: '',
-  /**告警产生时间 */
-  eventTime: '',
+  /**告警产生时间开始时间 */
+  beginTime: undefined as undefined | number,
+  /**告警产生时间结束时间 */
+  endTime: undefined as undefined | number,
   /**虚拟化标识 */
   pvFlag: undefined,
   /**告警类型 */
@@ -75,11 +94,14 @@ let queryParams = reactive({
   pageNum: 1,
   /**每页条数 */
   pageSize: 20,
+  /**条件sql */
+  sql: undefined,
 });
 
 /**查询参数重置 */
 function fnQueryReset() {
   queryParams = Object.assign(queryParams, {
+    alarmStatus: 1,
     /**告警设备类型 */
     neType: '',
     /**告警网元名称 */
@@ -91,13 +113,15 @@ function fnQueryReset() {
     /**告警级别 */
     origSeverity: undefined,
     /**告警产生时间 */
-    eventTime: '',
+    beginTime: undefined,
+    endTime: undefined,
     /**虚拟化标识 */
     pvFlag: undefined,
     /**告警类型 */
     alarmType: undefined,
     /**当前页数 */
   });
+  queryRangePicker.value = undefined;
   tablePagination.current = 1;
   tablePagination.pageSize = 20;
   fnGetList();
@@ -143,31 +167,33 @@ let alarmTableState: TabeStateType = reactive({
 
 /**表格字段列 */
 let tableColumns: ColumnsType = [
+  {
+    title: t('views.faultManage.activeAlarm.alarmType'),
+    dataIndex: 'alarmType',
+    key: 'alarmType',
+    align: 'left',
+    width: 150,
+  },
   {
     title: t('views.faultManage.activeAlarm.origLevel'),
-    align: 'center',
+    align: 'left',
     key: 'origSeverity',
     dataIndex: 'origSeverity',
-    width: 5,
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmTitle'),
     dataIndex: 'alarmTitle',
     align: 'left',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neType'),
-    dataIndex: 'neType',
-    align: 'center',
-    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);
@@ -175,129 +201,118 @@ let tableColumns: ColumnsType = [
       return opt.value;
     },
   },
-  {
-    title: t('views.faultManage.activeAlarm.alarmCode'),
-    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.alarmType'),
-    dataIndex: 'alarmType',
-    key: 'alarmType',
-    align: 'left',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neName'),
-    dataIndex: 'neName',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.neId'),
-    dataIndex: 'neId',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.pvFlag'),
-    dataIndex: 'pvFlag',
-    align: 'center',
-    width: 5,
-  },
   {
     title: t('views.faultManage.activeAlarm.alarmId'),
     dataIndex: 'alarmId',
-    align: 'center',
-    width: 5,
-  },
-
-  {
-    title: t('views.faultManage.activeAlarm.ackState'),
-    dataIndex: 'ackState',
-    key: 'ackState',
     align: 'left',
-    width: 5,
+    width: 150,
+    ellipsis: true,
   },
   {
-    title: t('views.faultManage.activeAlarm.ackUser'),
-    dataIndex: 'ackUser',
+    title: t('views.faultManage.activeAlarm.alarmCode'),
+    dataIndex: 'alarmCode',
     align: 'left',
-    width: 5,
+    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: 'left',
+    width: 150,
   },
   {
     title: t('common.operate'),
-    key: 'alarm_id',
-    align: 'center',
+    key: 'id',
+    align: 'left',
     fixed: 'right',
-    width: 5,
+    width: 100,
   },
 ];
 
 /**帮助文档表格字段列 */
-let alarmTableColumns: ColumnsType = [
+let alarmTableColumns = ref<ColumnsType>([
   {
-    title: t('views.faultManage.activeAlarm.alarmTitle'),
-    dataIndex: 'alarmName',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.locationInfo'),
-    dataIndex: 'alarmInfo',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.addInfo'),
-    dataIndex: 'helpInfo',
-    align: 'center',
-    width: 8,
+    title: t('views.faultManage.activeAlarm.alarmCode'),
+    dataIndex: 'alarmCode',
+    align: 'left',
+    width: 100,
   },
   {
     title: t('views.faultManage.activeAlarm.alarmType'),
     dataIndex: 'alarmType',
-    align: 'center',
-    width: 5,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.origLevel'),
-    dataIndex: 'alarmLevel',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.alarmCode'),
-    dataIndex: 'alarmCode',
-    align: 'center',
-    width: 3,
-  },
-  {
-    title: t('views.faultManage.activeAlarm.specificProblem'),
-    dataIndex: 'cause',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.clearType'),
     dataIndex: 'clearType',
-    align: 'center',
-    width: 3,
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.origLevel'),
+    dataIndex: 'alarmLevel',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.alarmTitle'),
+    dataIndex: 'alarmName',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.realTitle'),
     dataIndex: 'enTitle',
-    align: 'center',
-    width: 5,
+    align: 'left',
+    width: 150,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.locationInfo'),
+    dataIndex: 'alarmInfo',
+    align: 'left',
+    width: 150,
   },
   {
     title: t('views.faultManage.activeAlarm.objectNf'),
     dataIndex: 'objNf',
-    align: 'center',
-    width: 2,
+    align: 'left',
+    width: 100,
   },
-];
+  {
+    title: t('views.faultManage.activeAlarm.specificProblem'),
+    dataIndex: 'cause',
+    align: 'left',
+    width: 200,
+  },
+  {
+    title: t('views.faultManage.activeAlarm.addInfo'),
+    dataIndex: 'helpInfo',
+    align: 'left',
+    width: 300,
+    resizable: true,
+    minWidth: 150,
+    maxWidth: 400,
+  },
+]);
 
 /**表格分页器参数 */
 let tablePagination = reactive({
@@ -728,41 +743,53 @@ 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];
-  getPass().then(res => {
+
+  // getPass().then(res => {
+  //   if (res.code === RESULT_CODE_SUCCESS) {
+  //     let sql = res.data.data[0]['config'][0].value
+  //       ? res.data.data[0]['config'][0].value
+  //       : '';
+  //     filterState.sql = sql;
+  //   }
+
+  // });
+
+  const form = toRaw(queryParams);
+  form.sql = filterState.sql;
+  listAct(form).then((res: any) => {
     if (res.code === RESULT_CODE_SUCCESS) {
-      let sql = res.data.data[0]['config'][0].value
-        ? res.data.data[0]['config'][0].value
-        : '';
-      filterState.sql = sql;
-    }
-    listAct(toRaw(queryParams), filterState.sql).then((res: any) => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        // 取消勾选
-        if (state.selectedRowKeys.length > 0) {
-          state.selectedRowKeys = [];
-        }
-        const { total, rows } = res.data;
-        tablePagination.total = total;
-        tableState.data = rows;
-        if (
-          tablePagination.total <=
-            (queryParams.pageNum - 1) * tablePagination.pageSize &&
-          queryParams.pageNum !== 1
-        ) {
-          tableState.loading = false;
-          fnGetList(queryParams.pageNum - 1);
-        }
-      } else {
-        tablePagination.total = 0;
-        tableState.data = [];
+      // 取消勾选
+      if (state.selectedRowKeys.length > 0) {
+        state.selectedRowKeys = [];
       }
-      tableState.loading = false;
-    });
+      const { total, rows } = res.data;
+      tablePagination.total = total;
+      tableState.data = rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    } else {
+      tablePagination.total = 0;
+      tableState.data = [];
+    }
+    tableState.loading = false;
   });
 }
 
@@ -788,8 +815,11 @@ onMounted(() => {
     }
   });
   // 获取网元网元列表
-  useNeInfoStore().fnNelist();
-  fnGetList();
+  useNeInfoStore()
+    .fnNelist()
+    .finally(() => {
+      fnGetList();
+    });
 });
 </script>
 
@@ -804,62 +834,16 @@ 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-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"
-            >
-              <a-input v-model:value="queryParams.neName" 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.neId')"
-              name="ne_id"
-            >
-              <a-input v-model:value="queryParams.neId" allow-clear></a-input>
-            </a-form-item>
-          </a-col>
 
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item>
-              <a-space :size="8">
-                <a-button type="primary" @click.prevent="fnGetList(1)">
-                  <template #icon><SearchOutlined /></template>
-                  {{ t('common.search') }}
-                </a-button>
-                <a-button type="default" @click.prevent="fnQueryReset">
-                  <template #icon><ClearOutlined /></template>
-                  {{ t('common.reset') }}
-                </a-button>
-              </a-space>
-            </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.origLevel')"
@@ -873,37 +857,6 @@ onMounted(() => {
               />
             </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.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.alarmType')"
@@ -916,6 +869,50 @@ onMounted(() => {
               />
             </a-form-item>
           </a-col>
+          <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
+                :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">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
         </a-row>
       </a-form>
     </a-card>
@@ -923,7 +920,7 @@ onMounted(() => {
     <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()"
@@ -1035,7 +1032,7 @@ onMounted(() => {
           onChange: onSelectChange,
         }"
         :pagination="tablePagination"
-        :scroll="{ x: 2500, y: 400 }"
+        :scroll="{ x: tableColumns.length * 150, y: 'calc(100vh - 480px)' }"
       >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'origSeverity'">
@@ -1059,7 +1056,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>
@@ -1111,7 +1108,8 @@ onMounted(() => {
         :data-source="alarmTableState.data"
         :size="alarmTableState.size"
         :pagination="false"
-        :scroll="{ x: 1700, y: '88vh' }"
+        :scroll="{ x: alarmTableColumns.length * 250, y: '88vh' }"
+        @resizeColumn="(w:number, col:any) => (col.width = w)"
       >
       </a-table>
     </ProModal>
@@ -1129,8 +1127,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"
@@ -1158,38 +1161,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>
@@ -1227,10 +1215,10 @@ onMounted(() => {
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item
-              :label="t('views.faultManage.activeAlarm.pvFlag')"
-              name="pvFlag"
+              :label="t('views.faultManage.activeAlarm.alarmCode')"
+              name="alarmCode"
             >
-              {{ modalState.from.pvFlag }}
+              {{ modalState.from.alarmCode }}
             </a-form-item>
           </a-col>
         </a-row>