feat: alarm records query

src/apis/domains/station.ts

@@ -1,6 +1,6 @@
 export interface Station {
-  // id: string;
   code: string;
   name: string;
+  deviceIdPrefix: string; // 当查询设备告警记录时，需要通过deviceId的前4位来判断车站
   online: boolean;
 }

src/apis/models/device/alarm/ndm-device-alarm-log.ts

@@ -2,7 +2,6 @@ import type { BaseModel } from '../../base/model';
 import type { ReduceForPageQuery, ReduceForSaveVO, ReduceForUpdateVO } from '../../base/reduce';
 
 export interface NdmDeviceAlarmLogVO extends BaseModel {
-  [key: string]: any; // 告警数据表格中会加一些别的标记字段
   alarmNo: string;
   alarmDate: string;
   faultLocation: string;

src/apis/requests/log/ndm-device-alarm-log.ts

@@ -22,3 +22,21 @@ export const postNdmDeviceAlarmLogPage = async (stationCode: string, pageQuery:
   }
   return alarmData;
 };
+
+export const defaultExportByTemplate = async (stationCode: string, pageQuery: PageParams<NdmDeviceAlarmLogPageQuery>) => {
+  const endpoint = '/api/ndm/ndmDeviceAlarmLog/defaultExportByTemplate';
+  if (!stationCode) {
+    const resp = await userClient.post<BlobPart>(`${endpoint}`, pageQuery, { responseType: 'blob', retRaw: true });
+    const [err, data] = resp;
+    if (err || !data) {
+      throw err;
+    }
+    return data;
+  }
+  const resp = await ndmClient.post<BlobPart>(`${endpoint}`, pageQuery, { responseType: 'blob', retRaw: true });
+  const [err, data] = resp;
+  if (err || !data) {
+    throw err;
+  }
+  return data;
+};

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: '2' },
-      { label: '否', value: 'false' },
+      { label: '否', value: '1' },
     ],
     filter: (filterOptionValue, row) => {
-      return row.recovered === filterOptionValue;
+      return row.alarmCategory === filterOptionValue;
-    },
-  },
-  {
-    title: '恢复时间',
-    key: 'recoverTime',
-    render: (rowData) => {
-      return rowData.recoverTime ? dayjs(Number(rowData.recoverTime)).format('YYYY-MM-DD HH:mm:ss') : '';
     },
   },
+  { title: '恢复时间', key: 'updatedTime' },
   {
     title: '告警确认',
     key: 'alarmConfirm',
@@ -134,20 +112,53 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   // { title: '设备ID', key: 'deviceId' },
 ];
 
-const tableData = computed<DataTableRowData[]>(() => {
+const tablePagination = reactive<PaginationProps>({
-  const records = stationAlarms.value['unclassified'].occurred;
+  size: 'small',
-  const recovered = stationAlarms.value['unclassified'].recovered;
+  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;
+  },
+});
 
-  return records.map((record) => {
+const tableData = computed<DataTableRowData[]>(() => stationAlarms.value.unclassified);
-    const recoveredAlarmLog = recovered.find((item) => item.alarmNo === record.alarmNo);
+
-    return {
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
-      ...record,
+  mutationFn: async () => {
-      recovered: recoveredAlarmLog ? 'true' : 'false',
+    const data = await defaultExportByTemplate(station.value.code, {
-      recoverTime: recoveredAlarmLog?.alarmDate,
+      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>
-`

src/composables/query/use-line-alarms-query.ts

@@ -8,10 +8,10 @@ import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
 
-const AlarmCategory = {
+// const AlarmCategory = {
-  Occurred: '1',
+//   Occurred: '1',
-  Recovered: '2',
+//   Recovered: '2',
-} as const;
+// } as const;
 
 export interface CategorizedAlarms {
   occurred: NdmDeviceAlarmLogResultVO[];
@@ -19,15 +19,15 @@ export interface CategorizedAlarms {
 }
 
 export interface StationAlarms {
-  [DeviceType.Camera]: CategorizedAlarms;
+  [DeviceType.Camera]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Decoder]: CategorizedAlarms;
+  [DeviceType.Decoder]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Keyboard]: CategorizedAlarms;
+  [DeviceType.Keyboard]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.MediaServer]: CategorizedAlarms;
+  [DeviceType.MediaServer]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Nvr]: CategorizedAlarms;
+  [DeviceType.Nvr]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.SecurityBox]: CategorizedAlarms;
+  [DeviceType.SecurityBox]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.Switch]: CategorizedAlarms;
+  [DeviceType.Switch]: NdmDeviceAlarmLogResultVO[];
-  [DeviceType.VideoServer]: CategorizedAlarms;
+  [DeviceType.VideoServer]: NdmDeviceAlarmLogResultVO[];
-  unclassified: CategorizedAlarms;
+  unclassified: NdmDeviceAlarmLogResultVO[];
 }
 
 export interface LineAlarms {
@@ -51,15 +51,15 @@ export function useLineAlarmsQuery() {
 
       for (const station of stationList.value) {
         lineAlarms[station.code] = {
-          [DeviceType.Camera]: { occurred: [], recovered: [] },
+          [DeviceType.Camera]: [],
-          [DeviceType.Decoder]: { occurred: [], recovered: [] },
+          [DeviceType.Decoder]: [],
-          [DeviceType.Keyboard]: { occurred: [], recovered: [] },
+          [DeviceType.Keyboard]: [],
-          [DeviceType.MediaServer]: { occurred: [], recovered: [] },
+          [DeviceType.MediaServer]: [],
-          [DeviceType.Nvr]: { occurred: [], recovered: [] },
+          [DeviceType.Nvr]: [],
-          [DeviceType.SecurityBox]: { occurred: [], recovered: [] },
+          [DeviceType.SecurityBox]: [],
-          [DeviceType.Switch]: { occurred: [], recovered: [] },
+          [DeviceType.Switch]: [],
-          [DeviceType.VideoServer]: { occurred: [], recovered: [] },
+          [DeviceType.VideoServer]: [],
-          unclassified: { occurred: [], recovered: [] },
+          unclassified: [],
         };
 
         try {
@@ -67,13 +67,15 @@ export function useLineAlarmsQuery() {
           const now = dayjs();
           // const todayStart = now.startOf('date').format('YYYY-MM-DD HH:mm:ss');
           // const todayEnd = now.endOf('date').format('YYYY-MM-DD HH:mm:ss');
-          const todayStart = '2025-08-13 00:00:00';
+          // const todayStart = '2025-08-13 00:00:00';
-          const todayEnd = '2025-08-31 23:59:59';
+          // const todayEnd = '2025-08-31 23:59:59';
+          const todayStart = now.startOf('date').valueOf();
+          const todayEnd = now.endOf('date').valueOf();
           const { records: alarmList } = await postNdmDeviceAlarmLogPage(station.code, {
             model: {},
             extra: {
-              createdTime_precisest: todayStart,
+              alarmDate_ge: todayStart,
-              createdTime_preciseed: todayEnd,
+              alarmDate_le: todayEnd,
             },
             size: 50000,
             current: 1,
@@ -89,42 +91,15 @@ export function useLineAlarmsQuery() {
           const switchAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Switch);
           const videoServerAlarms = alarmList.filter((device) => device.deviceType === DeviceType.VideoServer);
           lineAlarms[station.code] = {
-            [DeviceType.Camera]: {
+            [DeviceType.Camera]: cameraAlarms,
-              occurred: cameraAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
+            [DeviceType.Decoder]: decoderAlarms,
-              recovered: cameraAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
+            [DeviceType.Keyboard]: keyboardAlarms,
-            },
+            [DeviceType.MediaServer]: mediaServerAlarms,
-            [DeviceType.Decoder]: {
+            [DeviceType.Nvr]: nvrAlarms,
-              occurred: decoderAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
+            [DeviceType.SecurityBox]: securityBoxAlarms,
-              recovered: decoderAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
+            [DeviceType.Switch]: switchAlarms,
-            },
+            [DeviceType.VideoServer]: videoServerAlarms,
-            [DeviceType.Keyboard]: {
+            unclassified: alarmList,
-              occurred: keyboardAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: keyboardAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
-            [DeviceType.MediaServer]: {
-              occurred: mediaServerAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: mediaServerAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
-            [DeviceType.Nvr]: {
-              occurred: nvrAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: nvrAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
-            [DeviceType.SecurityBox]: {
-              occurred: securityBoxAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: securityBoxAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
-            [DeviceType.Switch]: {
-              occurred: switchAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: switchAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
-            [DeviceType.VideoServer]: {
-              occurred: videoServerAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: videoServerAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
-            unclassified: {
-              occurred: alarmList.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
-              recovered: alarmList.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
-            },
           };
         } catch (error) {
           console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);

src/pages/alarm-page.vue

@@ -1,12 +1,232 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
+import { ref, reactive, onBeforeMount, h } from 'vue';
+import dayjs from 'dayjs';
+import { useMutation } from '@tanstack/vue-query';
+import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
+import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker } from 'naive-ui';
+import { DeviceType, DeviceTypeName, type DeviceTypeCode } from '@/enums/device-type';
+import { defaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests/log/ndm-device-alarm-log';
+import type { NdmDeviceAlarmLogResultVO } from '@/apis/models/device';
+import { useStationStore } from '@/stores/station';
+import { storeToRefs } from 'pinia';
+import { downloadByData } from '@/utils/download';
+import { JAVA_INTEGER_MAX_VALUE } from '@/constants';
 
-const route = useRoute();
+const stationStore = useStationStore();
+const { stationList } = storeToRefs(stationStore);
+
+const searchFields = reactive({
+  deviceName_like: '',
+  deviceId_likeRight: '',
+  deviceType_in: [] as string[],
+  alarmDate: [dayjs().startOf('date').subtract(7, 'day').valueOf(), dayjs().endOf('date').valueOf()] as [number, number],
+});
+const resetSearchFields = () => {
+  searchFields.deviceName_like = '';
+};
+
+const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
+  { title: '告警流水号', key: 'alarmNo' },
+  {
+    title: '告警时间',
+    key: 'alarmDate',
+    render: (rowData /* , rowIndex */) => {
+      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
+    },
+  },
+  {
+    title: '设备类型',
+    key: 'deviceType',
+    render: (rowData) => {
+      return DeviceTypeName[(rowData.deviceType ?? DeviceType.Camera) as DeviceTypeCode];
+    },
+  },
+  { title: '设备名称', key: 'deviceName' },
+  { title: '告警类型', key: 'alarmType', align: 'center' },
+  { title: '故障级别', key: 'faultLevel', align: 'center' },
+  { title: '故障编码', key: 'faultCode', align: 'center' },
+  { title: '故障位置', key: 'faultLocation' },
+  { title: '故障描述', key: 'faultDescription' },
+  { title: '修复建议', key: 'alarmRepairSuggestion' },
+  {
+    title: '是否恢复',
+    key: 'alarmCategory',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.alarmCategory === '2' ? '是' : '否';
+    },
+  },
+  { title: '恢复时间', key: 'updatedTime' },
+  {
+    title: '告警确认',
+    key: 'alarmConfirm',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.alarmConfirm === '1' ? '已确认' : '未确认';
+    },
+  },
+  // { title: '设备ID', key: 'deviceId' },
+];
+
+const tableData = ref<DataTableRowData[]>([]);
+
+const tablePagination = reactive<PaginationProps>({
+  showSizePicker: true,
+  page: 1,
+  pageSize: 10,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  pageCount: 1,
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    tablePagination.page = page;
+    getAlarmList();
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    tablePagination.pageSize = pageSize;
+    tablePagination.page = 1;
+    getAlarmList();
+  },
+});
+
+const { mutate: getAlarmList, isPending } = useMutation({
+  mutationFn: async () => {
+    const res = await postNdmDeviceAlarmLogPage('', {
+      model: {},
+      extra: {
+        deviceId_likeRight: searchFields.deviceId_likeRight,
+        deviceName_like: searchFields.deviceName_like,
+        deviceType_in: searchFields.deviceType_in,
+        alarmDate_ge: searchFields.alarmDate[0],
+        alarmDate_le: searchFields.alarmDate[1],
+      },
+      size: tablePagination.pageSize!,
+      current: tablePagination.page!,
+      sort: 'id',
+      order: 'descending',
+    });
+    const { records, pages, size, total } = res;
+    tablePagination.pageSize = parseInt(size);
+    tablePagination.pageCount = parseInt(pages);
+    tablePagination.itemCount = parseInt(total);
+    return records;
+  },
+  onSuccess: (records) => {
+    tableData.value = records;
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const onClickReset = () => {
+  resetSearchFields();
+  tablePagination.page = 1;
+  tablePagination.pageSize = 10;
+  tablePagination.pageCount = 1;
+  tablePagination.itemCount = 0;
+  getAlarmList();
+};
+const onClickQuery = () => getAlarmList();
+
+const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
+  mutationFn: async () => {
+    const data = await defaultExportByTemplate('', {
+      model: {},
+      extra: {
+        alarmDate_ge: searchFields.alarmDate[0],
+        alarmDate_le: searchFields.alarmDate[1],
+      },
+      current: 1,
+      size: JAVA_INTEGER_MAX_VALUE,
+      order: 'descending',
+      sort: 'id',
+    });
+    return data;
+  },
+  onSuccess: (data) => {
+    downloadByData(data, `设备告警记录.xlsx`);
+  },
+  onError: (error) => {
+    window.$message.error(error.message);
+  },
+});
+
+const exportTableData = () => downloadTableData();
+
+onBeforeMount(() => getAlarmList());
 </script>
 
 <template>
-  <div>alarm</div>
+  <!-- 容器：上下布局，表格自适应剩余高度 -->
-  <pre>{{ route }}</pre>
+  <div style="height: 100%; display: flex; flex-direction: column">
+    <!-- 查询面板 -->
+    <div style="flex: 0 0 auto; padding: 8px">
+      <NForm>
+        <NGrid :cols="3" :x-gap="24">
+          <NFormItemGi :span="1" label="车站" label-placement="left">
+            <NSelect
+              v-model:value="searchFields.deviceId_likeRight"
+              :options="[
+                ...stationList.map<SelectOption>((station) => ({
+                  label: station.name,
+                  value: station.deviceIdPrefix,
+                })),
+              ]"
+              :multiple="false"
+              clearable
+            />
+          </NFormItemGi>
+          <NFormItemGi :span="1" label="设备类型" label-placement="left">
+            <NSelect
+              v-model:value="searchFields.deviceType_in"
+              :options="[
+                ...Object.values(DeviceType).map<SelectOption>((deviceType) => {
+                  return {
+                    label: DeviceTypeName[deviceType],
+                    value: deviceType,
+                  };
+                }),
+              ]"
+              placeholder="请选择设备类型"
+              multiple
+              clearable
+            />
+          </NFormItemGi>
+          <NFormItemGi :span="1" label="设备名称" label-placement="left">
+            <NInput v-model:value="searchFields.deviceName_like" placeholder="请输入设备名称" clearable />
+          </NFormItemGi>
+          <NFormItemGi :span="1" label="告警发生时间" label-placement="left">
+            <NDatePicker v-model:value="searchFields.alarmDate" type="datetimerange" />
+          </NFormItemGi>
+        </NGrid>
+        <!-- 按钮 -->
+        <NGrid :cols="1">
+          <NGridItem>
+            <NSpace>
+              <NButton @click="onClickReset">重置</NButton>
+              <NButton type="primary" :loading="isPending" @click="onClickQuery">查询</NButton>
+            </NSpace>
+          </NGridItem>
+        </NGrid>
+      </NForm>
+    </div>
+
+    <!-- 工具栏：横向、右对齐按钮） -->
+    <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px">
+      <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; padding: 8px">
+      <NDataTable remote :columns="tableColumns" :data="tableData" :pagination="tablePagination" :loading="isPending" :single-line="false" flex-height style="height: 100%" />
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss"></style>

src/pages/dashboard-page.vue

@@ -35,15 +35,15 @@ const { data: lineAlarms } = useLineAlarmsQuery();
         "
         :station-alarms="
           lineAlarms?.[station.code] ?? {
-            [DeviceType.Camera]: { occurred: [], recovered: [] },
+            [DeviceType.Camera]: [],
-            [DeviceType.Decoder]: { occurred: [], recovered: [] },
+            [DeviceType.Decoder]: [],
-            [DeviceType.Keyboard]: { occurred: [], recovered: [] },
+            [DeviceType.Keyboard]: [],
-            [DeviceType.MediaServer]: { occurred: [], recovered: [] },
+            [DeviceType.MediaServer]: [],
-            [DeviceType.Nvr]: { occurred: [], recovered: [] },
+            [DeviceType.Nvr]: [],
-            [DeviceType.SecurityBox]: { occurred: [], recovered: [] },
+            [DeviceType.SecurityBox]: [],
-            [DeviceType.Switch]: { occurred: [], recovered: [] },
+            [DeviceType.Switch]: [],
-            [DeviceType.VideoServer]: { occurred: [], recovered: [] },
+            [DeviceType.VideoServer]: [],
-            unclassified: { occurred: [], recovered: [] },
+            unclassified: [],
           }
         "
       />