feat: alarm records query

src/components/device-alarm-detail-modal.vue

@@ -2,11 +2,15 @@
 <script setup lang="ts">
 import type { Station } from '@/apis/domains';
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models/device';
+import { defaultExportByTemplate } from '@/apis/requests';
 import type { StationAlarms } from '@/composables/query/use-line-alarms-query';
+import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
 import { DeviceType, DeviceTypeName, type DeviceTypeCode } from '@/enums/device-type';
 import { useQueryControlStore } from '@/stores/query-control';
+import { downloadByData } from '@/utils/download';
+import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import { NCol, NDataTable, NModal, NRow, NStatistic, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
 import { computed, h, reactive, toRefs, watch } from 'vue';
 
 interface Props {
@@ -31,7 +35,7 @@ watch(show, (newValue) => {
 
 const alarmCount = computed(() => {
   return Object.values(DeviceType).reduce((count, deviceType) => {
-    return count + stationAlarms.value[deviceType].occurred.length;
+    return count + stationAlarms.value[deviceType].length;
   }, 0);
 });
 
@@ -39,31 +43,11 @@ const classifiedCount = computed(() => {
   return Object.values(DeviceType).map<{ label: string; count: number }>((deviceType) => {
     return {
       label: DeviceTypeName[deviceType],
-      count: stationAlarms.value[deviceType].occurred.length,
+      count: stationAlarms.value[deviceType].length,
     };
   });
 });
 
-const tablePagination = reactive<PaginationProps>({
-  size: 'small',
-  showSizePicker: true,
-  page: 1,
-  pageSize: 10,
-  pageSizes: [5, 10, 20, 50, 80, 100],
-  // itemCount: 0,
-  // pageCount: 1,
-  prefix: ({ itemCount }) => {
-    return h('div', {}, { default: () => `共${itemCount}条` });
-  },
-  onUpdatePage: (page: number) => {
-    tablePagination.page = page;
-  },
-  onUpdatePageSize: (pageSize: number) => {
-    tablePagination.pageSize = pageSize;
-    tablePagination.page = 1;
-  },
-});
-
 const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   { title: '告警流水号', key: 'alarmNo' },
   {
@@ -94,27 +78,21 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   { title: '修复建议', key: 'alarmRepairSuggestion' },
   {
     title: '是否恢复',
-    key: 'recovered',
+    key: 'alarmCategory',
     align: 'center',
     render: (rowData) => {
-      return rowData.recovered ? '是' : '否';
+      return rowData.alarmCategory === '2' ? '是' : '否';
     },
     filterMultiple: false,
     filterOptions: [
-      { label: '是', value: 'true' },
-      { label: '否', value: 'false' },
+      { label: '是', value: '2' },
+      { label: '否', value: '1' },
     ],
     filter: (filterOptionValue, row) => {
-      return row.recovered === filterOptionValue;
-    },
-  },
-  {
-    title: '恢复时间',
-    key: 'recoverTime',
-    render: (rowData) => {
-      return rowData.recoverTime ? dayjs(Number(rowData.recoverTime)).format('YYYY-MM-DD HH:mm:ss') : '';
+      return row.alarmCategory === filterOptionValue;
     },
   },
+  { title: '恢复时间', key: 'updatedTime' },
   {
     title: '告警确认',
     key: 'alarmConfirm',
@@ -134,20 +112,53 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   // { title: '设备ID', key: 'deviceId' },
 ];
 
-const tableData = computed<DataTableRowData[]>(() => {
-  const records = stationAlarms.value['unclassified'].occurred;
-  const recovered = stationAlarms.value['unclassified'].recovered;
-
-  return records.map((record) => {
-    const recoveredAlarmLog = recovered.find((item) => item.alarmNo === record.alarmNo);
-    return {
-      ...record,
-      recovered: recoveredAlarmLog ? 'true' : 'false',
-      recoverTime: recoveredAlarmLog?.alarmDate,
-    };
-  });
+const tablePagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: 10,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  // itemCount: 0,
+  // pageCount: 1,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    tablePagination.page = page;
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    tablePagination.pageSize = pageSize;
+    tablePagination.page = 1;
+  },
 });
 
+const tableData = computed<DataTableRowData[]>(() => stationAlarms.value.unclassified);
+
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
+  mutationFn: async () => {
+    const data = await defaultExportByTemplate(station.value.code, {
+      model: {},
+      extra: {
+        createdTime_precisest: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
+        createdTime_preciseed: dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss'),
+      },
+      current: 1,
+      size: JAVA_INTEGER_MAX_VALUE,
+      order: 'descending',
+      sort: 'id',
+    });
+    return data;
+  },
+  onSuccess: (data) => {
+    downloadByData(data, `${station.value.name}-设备告警记录.xlsx`);
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const exportTableData = () => downloadTableData();
+
 const onModalClose = () => {};
 </script>
 
@@ -162,12 +173,17 @@ const onModalClose = () => {};
           <NStatistic :label="item.label + '告警'" :value="item.count"></NStatistic>
         </NCol>
       </NRow>
+      <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px 0">
+        <div style="font-size: medium">今日设备告警列表</div>
+        <NSpace style="margin-left: auto">
+          <NButton type="primary" :loading="isDownloading" @click="exportTableData">导出</NButton>
+        </NSpace>
+      </div>
       <div style="flex: 1 1 auto; min-height: 0">
-        <NDataTable :columns="tableColumns" :data="tableData" :pagination="tablePagination" flex-height style="height: 100%" />
+        <NDataTable :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" flex-height style="height: 100%" />
       </div>
     </div>
   </NModal>
 </template>
 
 <style scoped lang="scss"></style>
-`