feat: get alarms from all stations

2025-08-20 01:18:01 +08:00
parent 91dee03829
commit c4e7baea95
9 changed files with 378 additions and 97 deletions
--- a/src/apis/models/device/alarm/ndm-device-alarm-log.ts
+++ b/src/apis/models/device/alarm/ndm-device-alarm-log.ts
@@ -2,6 +2,7 @@ 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;
--- a/src/apis/requests/log/ndm-device-alarm-log.ts
+++ b/src/apis/requests/log/ndm-device-alarm-log.ts
@@ -1,10 +1,24 @@
 import type { PageParams, PageResult } from '@/apis/models/base/page';
 import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO } from '@/apis/models/device/alarm/ndm-device-alarm-log';

-import { ndmClient } from '@/apis/client';
+import { ndmClient, userClient } from '@/apis/client';

 export const postNdmDeviceAlarmLogPage = async (stationCode: string, pageQuery: PageParams<NdmDeviceAlarmLogPageQuery>) => {
-  const prefix = stationCode ? `/${stationCode}` : '';
-  const resp = await ndmClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(`${prefix}/api/ndm/ndmDeviceAlarmLog/page`, pageQuery);
-  return resp;
+  const endpoint = '/api/ndm/ndmDeviceAlarmLog/page';
+  // 如果车站编码为空，则通过用户API客户端发送请求
+  if (!stationCode) {
+    const resp = await userClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(endpoint, pageQuery);
+    const [err, alarmData] = resp;
+    if (err || !alarmData) {
+      throw err;
+    }
+    return alarmData;
+  }
+  // 如果车站编码不为空，则通过网管API客户端发送请求
+  const resp = await ndmClient.post<PageResult<NdmDeviceAlarmLogResultVO>>(`/${stationCode}${endpoint}`, pageQuery);
+  const [err, alarmData] = resp;
+  if (err || !alarmData) {
+    throw err;
+  }
+  return alarmData;
 };
--- a/src/components/device-alarm-detail-modal.vue
+++ b/src/components/device-alarm-detail-modal.vue
@@ -0,0 +1,173 @@
+`
+<script setup lang="ts">
+import type { Station } from '@/apis/domains';
+import type { NdmDeviceAlarmLogResultVO } from '@/apis/models/device';
+import type { StationAlarms } from '@/composables/query/use-line-alarms-query';
+import { DeviceType, DeviceTypeName, type DeviceTypeCode } from '@/enums/device-type';
+import { useQueryControlStore } from '@/stores/query-control';
+import dayjs from 'dayjs';
+import { NCol, NDataTable, NModal, NRow, NStatistic, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { computed, h, reactive, toRefs, watch } from 'vue';
+
+interface Props {
+  station: Station;
+  stationAlarms: StationAlarms;
+}
+
+const props = defineProps<Props>();
+const { station, stationAlarms } = toRefs(props);
+const show = defineModel<boolean>('show', { required: true });
+
+watch(show, (newValue) => {
+  const queryControlStore = useQueryControlStore();
+  if (newValue) {
+    console.log('对话框打开，停止轮询');
+    queryControlStore.disablePolling();
+  } else {
+    console.log('对话框关闭，开启轮询');
+    queryControlStore.enablePolling();
+  }
+});
+
+const alarmCount = computed(() => {
+  return Object.values(DeviceType).reduce((count, deviceType) => {
+    return count + stationAlarms.value[deviceType].occurred.length;
+  }, 0);
+});
+
+const classifiedCount = computed(() => {
+  return Object.values(DeviceType).map<{ label: string; count: number }>((deviceType) => {
+    return {
+      label: DeviceTypeName[deviceType],
+      count: stationAlarms.value[deviceType].occurred.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' },
+  {
+    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];
+    },
+    filterMultiple: true,
+    filterOptions: Object.values(DeviceTypeName).map((typeName) => ({ label: typeName, value: typeName })),
+    filter: (filterOptionValue, row) => {
+      return row.deviceType === filterOptionValue;
+    },
+  },
+  { 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: 'recovered',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.recovered ? '是' : '否';
+    },
+    filterMultiple: false,
+    filterOptions: [
+      { label: '是', value: 'true' },
+      { label: '否', value: 'false' },
+    ],
+    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') : '';
+    },
+  },
+  {
+    title: '告警确认',
+    key: 'alarmConfirm',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.alarmConfirm === '1' ? '已确认' : '未确认';
+    },
+    filterMultiple: false,
+    filterOptions: [
+      { label: '已确认', value: '1' },
+      { label: '未确认', value: '2' },
+    ],
+    filter: (filterOptionValue, row) => {
+      return row.alarmConfirm === filterOptionValue;
+    },
+  },
+  // { 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 onModalClose = () => {};
+</script>
+
+<template>
+  <NModal v-model:show="show" preset="card" style="width: 100vw; height: 100vh" :title="`${station.name} - 设备告警详情`" @close="onModalClose">
+    <div v-if="alarmCount === 0" style="text-align: center; padding: 20px; color: #6c757d">
+      <span>当前没有设备告警</span>
+    </div>
+    <div v-else style="height: 100%; display: flex; flex-direction: column">
+      <NRow style="flex: 0 0 auto; margin-bottom: 16px">
+        <NCol :span="3" v-for="item in classifiedCount" :key="item.label">
+          <NStatistic :label="item.label + '告警'" :value="item.count"></NStatistic>
+        </NCol>
+      </NRow>
+      <div style="flex: 1 1 auto; min-height: 0">
+        <NDataTable :columns="tableColumns" :data="tableData" :pagination="tablePagination" flex-height style="height: 100%" />
+      </div>
+    </div>
+  </NModal>
+</template>
+
+<style scoped lang="scss"></style>
+`
--- a/src/components/device-alarm-stat-modal.vue
+++ b/src/components/device-alarm-stat-modal.vue
@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div></div>
-</template>
-
-<style scoped></style>
--- a/src/components/offline-device-detail-modal.vue
+++ b/src/components/offline-device-detail-modal.vue
@@ -1,41 +1,23 @@
 <script setup lang="ts">
 import { NButton, NInput, NModal, NTree } from 'naive-ui';
-import { computed, ref, toRefs, watch } from 'vue';
+import { computed, h, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import type { TreeOption, TreeOverrideNodeClickBehavior } from 'naive-ui';
-import type {
-  NdmCameraResultVO,
-  NdmDecoderResultVO,
-  NdmDeviceVO,
-  NdmKeyboardResultVO,
-  NdmMediaServerResultVO,
-  NdmNvrResultVO,
-  NdmSecurityBoxResultVO,
-  NdmSwitchResultVO,
-  NdmVideoServerResultVO,
-} from '@/apis/models/device';
+import type { NdmDeviceVO } from '@/apis/models/device';
 import { useQueryControlStore } from '@/stores/query-control';
 import { DeviceType, DeviceTypeName } from '@/enums/device-type';
 import type { Station } from '@/apis/domains';
-import { h } from 'vue';
+import type { StationDevices } from '@/composables/query/use-line-devices-query';

 interface Props {
  station: Station;
-  ndmDeviceList: {
-    [DeviceType.Camera]: NdmCameraResultVO[];
-    [DeviceType.Decoder]: NdmDecoderResultVO[];
-    [DeviceType.Keyboard]: NdmKeyboardResultVO[];
-    [DeviceType.MediaServer]: NdmMediaServerResultVO[];
-    [DeviceType.Nvr]: NdmNvrResultVO[];
-    [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
-    [DeviceType.Switch]: NdmSwitchResultVO[];
-    [DeviceType.VideoServer]: NdmVideoServerResultVO[];
-  };
+  stationDevices: StationDevices;
 }

 const props = defineProps<Props>();
-const { station, ndmDeviceList } = toRefs(props);
+const { station, stationDevices } = toRefs(props);
 const show = defineModel<boolean>('show', { required: true });
+
 const route = useRoute();
 const router = useRouter();

@@ -59,19 +41,19 @@ const searchFilter: (pattern: string, node: TreeOption) => boolean = (pattern, n

 const offlineDeviceCount = computed(() => {
  let count = 0;
-  Object.values(DeviceType).forEach((type) => {
-    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+  Object.values(DeviceType).forEach((deviceType) => {
+    const offlineDeviceList = stationDevices.value[deviceType].filter((device) => device.deviceStatus === '20');
    count += offlineDeviceList.length;
  });
  return count;
 });

 const treeData = computed<TreeOption[]>(() => {
-  return Object.values(DeviceType).map<TreeOption>((type) => {
-    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+  return Object.values(DeviceType).map<TreeOption>((deviceType) => {
+    const offlineDeviceList = stationDevices.value[deviceType].filter((device) => device.deviceStatus === '20');
    return {
-      label: `${DeviceTypeName[type]} (${offlineDeviceList.length}台)`,
-      key: type,
+      label: `${DeviceTypeName[deviceType]} (${offlineDeviceList.length}台)`,
+      key: deviceType,
      children: offlineDeviceList.map<TreeOption>((device) => ({
        label: `${device.name}`,
        key: device.id,
--- a/src/components/station-card.vue
+++ b/src/components/station-card.vue
@@ -3,60 +3,55 @@ import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars } fro
 import { Video as VideoIcon } from '@vicons/carbon';
 import { toRefs, computed, ref } from 'vue';
 import axios from 'axios';
-import OfflineDeviceTreeModal from './offline-device-tree-modal.vue';
-import type {
-  NdmCameraResultVO,
-  NdmDecoderResultVO,
-  NdmDeviceAlarmLogResultVO,
-  NdmKeyboardResultVO,
-  NdmMediaServerResultVO,
-  NdmNvrResultVO,
-  NdmSecurityBoxResultVO,
-  NdmSwitchResultVO,
-  NdmVideoServerResultVO,
-} from '@/apis/models/device';
 import { DeviceType } from '@/enums/device-type';
 import type { Station } from '@/apis/domains';
+import type { StationDevices } from '@/composables/query/use-line-devices-query';
+import type { StationAlarms } from '@/composables/query/use-line-alarms-query';
+import OfflineDeviceDetailModal from './offline-device-detail-modal.vue';
+import DeviceAlarmDetailModal from './device-alarm-detail-modal.vue';

 interface Props {
  station: Station;
-  alarmCount: number;
-  ndmDeviceList: {
-    [DeviceType.Camera]: NdmCameraResultVO[];
-    [DeviceType.Decoder]: NdmDecoderResultVO[];
-    [DeviceType.Keyboard]: NdmKeyboardResultVO[];
-    [DeviceType.MediaServer]: NdmMediaServerResultVO[];
-    [DeviceType.Nvr]: NdmNvrResultVO[];
-    [DeviceType.SecurityBox]: NdmSecurityBoxResultVO[];
-    [DeviceType.Switch]: NdmSwitchResultVO[];
-    [DeviceType.VideoServer]: NdmVideoServerResultVO[];
-  };
-  ndmDeviceAlarmLogList: NdmDeviceAlarmLogResultVO[];
+  stationDevices: StationDevices;
+  stationAlarms: StationAlarms;
 }

 const props = defineProps<Props>();

-const { alarmCount, ndmDeviceList, station } = toRefs(props);
+const { station, stationDevices, stationAlarms } = toRefs(props);
 const { code, name, online } = toRefs(station.value);

 // 计算总离线设备数量
 const offlineDeviceCount = computed(() => {
  let count = 0;
-  Object.values(DeviceType).forEach((type) => {
-    const offlineDeviceList = ndmDeviceList.value[type].filter((device) => device.deviceStatus === '20');
+  Object.values(DeviceType).forEach((deviceType) => {
+    const offlineDeviceList = stationDevices.value[deviceType].filter((device) => device.deviceStatus === '20');
    count += offlineDeviceList.length;
  });
  return count;
 });
+const devicAlarmCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    count += stationAlarms.value[deviceType].occurred.length;
+  });
+  return count;
+});

 const offlineDeviceTreeModalShow = ref(false);
+const deviceAlarmTreeModalShow = ref(false);

-// 打开离线设备详情对话框
+// 打开对话框
 const openOfflineDeviceTreeModal = () => {
  if (online.value) {
    offlineDeviceTreeModalShow.value = true;
  }
 };
+const openDeviceAlarmTreeModal = () => {
+  if (online.value) {
+    deviceAlarmTreeModalShow.value = true;
+  }
+};

 // 打开视频平台
 const openVideoPlatform = async () => {
@@ -111,10 +106,10 @@ const theme = useThemeVars();
        <NGi>
          <NStatistic tabular-nums>
            <template #label>
-              <span class="font-xx-small">告警记录</span>
+              <span class="font-xx-small" :class="[online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
            </template>
            <template #default>
-              <span class="font-medium">{{ alarmCount }}</span>
+              <span class="font-medium">{{ devicAlarmCount }}</span>
            </template>
            <template #suffix>
              <span class="font-xx-small">条</span>
@@ -126,7 +121,8 @@ const theme = useThemeVars();
  </NCard>

  <!-- 离线设备详情对话框 -->
-  <OfflineDeviceTreeModal v-model:show="offlineDeviceTreeModalShow" :station="station" :ndm-device-list="ndmDeviceList" />
+  <OfflineDeviceDetailModal v-model:show="offlineDeviceTreeModalShow" :station="station" :station-devices="stationDevices" />
+  <DeviceAlarmDetailModal v-model:show="deviceAlarmTreeModalShow" :station="station" :station-alarms="stationAlarms" />
 </template>

 <style scoped lang="scss">
@@ -136,7 +132,7 @@ const theme = useThemeVars();
  transition: color 0.2s ease;

  &:hover {
-    color: v-bind('theme.infoColorHover');
+    color: v-bind('theme.primaryColorHover');
  }
 }

--- a/src/composables/query/use-line-alarms-query.ts
+++ b/src/composables/query/use-line-alarms-query.ts
@@ -1,18 +1,137 @@
+import type { Station } from '@/apis/domains';
+import type { NdmDeviceAlarmLogResultVO } from '@/apis/models/device';
+import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { DeviceType } from '@/enums/device-type';
 import { useStationStore } from '@/stores/station';
 import { useQuery } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';

-export function useLineDevicesQuery() {
+const AlarmCategory = {
+  Occurred: '1',
+  Recovered: '2',
+} as const;
+
+export interface CategorizedAlarms {
+  occurred: NdmDeviceAlarmLogResultVO[];
+  recovered: NdmDeviceAlarmLogResultVO[];
+}
+
+export interface StationAlarms {
+  [DeviceType.Camera]: CategorizedAlarms;
+  [DeviceType.Decoder]: CategorizedAlarms;
+  [DeviceType.Keyboard]: CategorizedAlarms;
+  [DeviceType.MediaServer]: CategorizedAlarms;
+  [DeviceType.Nvr]: CategorizedAlarms;
+  [DeviceType.SecurityBox]: CategorizedAlarms;
+  [DeviceType.Switch]: CategorizedAlarms;
+  [DeviceType.VideoServer]: CategorizedAlarms;
+  unclassified: CategorizedAlarms;
+}
+
+export interface LineAlarms {
+  [stationCode: Station['code']]: StationAlarms;
+}
+
+export function useLineAlarmsQuery() {
  const stationStore = useStationStore();
  const { updatedTime, stationList, onlineStationList } = storeToRefs(stationStore);

  return useQuery({
-    queryKey: ['line-devices', updatedTime],
+    queryKey: ['line-alarms', updatedTime],
    enabled: computed(() => onlineStationList.value.length > 0),
-    queryFn: async () => {
+    placeholderData: (prev) => prev,
+    queryFn: async (): Promise<LineAlarms> => {
+      const lineAlarms: LineAlarms = {};
+
      if (!stationList?.value) {
+        return lineAlarms;
      }
+
+      for (const station of stationList.value) {
+        lineAlarms[station.code] = {
+          [DeviceType.Camera]: { occurred: [], recovered: [] },
+          [DeviceType.Decoder]: { occurred: [], recovered: [] },
+          [DeviceType.Keyboard]: { occurred: [], recovered: [] },
+          [DeviceType.MediaServer]: { occurred: [], recovered: [] },
+          [DeviceType.Nvr]: { occurred: [], recovered: [] },
+          [DeviceType.SecurityBox]: { occurred: [], recovered: [] },
+          [DeviceType.Switch]: { occurred: [], recovered: [] },
+          [DeviceType.VideoServer]: { occurred: [], recovered: [] },
+          unclassified: { occurred: [], recovered: [] },
+        };
+
+        try {
+          // FIXME: 暂时采用固定的时间范围
+          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 todayEnd = '2025-08-31 23:59:59';
+          const { records: alarmList } = await postNdmDeviceAlarmLogPage(station.code, {
+            model: {},
+            extra: {
+              createdTime_precisest: todayStart,
+              createdTime_preciseed: todayEnd,
+            },
+            size: 50000,
+            current: 1,
+            sort: 'id',
+            order: 'descending',
+          });
+          const cameraAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Camera);
+          const decoderAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Decoder);
+          const keyboardAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Keyboard);
+          const mediaServerAlarms = alarmList.filter((device) => device.deviceType === DeviceType.MediaServer);
+          const nvrAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Nvr);
+          const securityBoxAlarms = alarmList.filter((device) => device.deviceType === DeviceType.SecurityBox);
+          const switchAlarms = alarmList.filter((device) => device.deviceType === DeviceType.Switch);
+          const videoServerAlarms = alarmList.filter((device) => device.deviceType === DeviceType.VideoServer);
+          lineAlarms[station.code] = {
+            [DeviceType.Camera]: {
+              occurred: cameraAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
+              recovered: cameraAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
+            },
+            [DeviceType.Decoder]: {
+              occurred: decoderAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Occurred),
+              recovered: decoderAlarms.filter((alarm) => alarm.alarmCategory === AlarmCategory.Recovered),
+            },
+            [DeviceType.Keyboard]: {
+              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);
+        }
+      }
+
+      return lineAlarms;
    },
  });
 }
--- a/src/composables/query/use-station-list-query.ts
+++ b/src/composables/query/use-station-list-query.ts
@@ -19,11 +19,12 @@ export function useStationListQuery() {
    queryKey: ['station-list'],
    enabled: computed(() => pollingEnabled.value),
    queryFn: async () => {
-      const { data: ndmStationList } = await axios.get<{ code: string; name: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`);
+      const { data: ndmStationList } = await axios.get<{ code: string; name: string; deviceIdPrefix: string }[]>(`/minio/ndm/ndm-stations.json?_t=${dayjs().unix()}`);

-      const stations = ndmStationList.map<Station>((record) => ({
-        code: record.code ?? '',
-        name: record.name ?? '',
+      const stations = ndmStationList.map<Station>((station) => ({
+        code: station.code ?? '',
+        name: station.name ?? '',
+        deviceIdPrefix: station.deviceIdPrefix ?? '',
        online: false,
      }));

--- a/src/pages/dashboard-page.vue
+++ b/src/pages/dashboard-page.vue
@@ -1,37 +1,27 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import StationCard from '@/components/station-card.vue';
 import { NGrid, NGi } from 'naive-ui';
 import { useStationStore } from '@/stores/station';
 import { storeToRefs } from 'pinia';
 import { DeviceType } from '@/enums/device-type';
 import { useLineDevicesQuery } from '@/composables/query/use-line-devices-query';
+import { useLineAlarmsQuery } from '@/composables/query/use-line-alarms-query';

 const stationStore = useStationStore();
 const { stationList } = storeToRefs(stationStore);

-// 模拟数据
-const stations = ref(
-  Array.from({ length: 32 }).map((_, i) => ({
-    code: `${i}`,
-    name: `浦东1号2号航站楼${i + 1}`,
-    online: Math.random() > 0.5,
-    offlineDeviceCount: Math.floor(Math.random() * 20),
-    alarmCount: Math.floor(Math.random() * 10),
-  })),
-);
-
-// 获取所有在线车站的设备数据
+// 获取所有车站的设备数据
 const { data: lineDevices } = useLineDevicesQuery();
+// 获取所有车站的设备告警数据
+const { data: lineAlarms } = useLineAlarmsQuery();
 </script>

 <template>
  <NGrid :cols="8" :x-gap="6" :y-gap="6" style="padding: 8px">
-    <NGi v-for="(station, i) in stationList" :key="station.name">
+    <NGi v-for="station in stationList" :key="station.name">
      <StationCard
        :station="station"
-        :alarm-count="stations[i].alarmCount"
-        :ndm-device-list="
+        :station-devices="
          lineDevices?.[station.code] ?? {
            [DeviceType.Camera]: [],
            [DeviceType.Decoder]: [],
@@ -43,7 +33,19 @@ const { data: lineDevices } = useLineDevicesQuery();
            [DeviceType.VideoServer]: [],
          }
        "
-        :ndm-device-alarm-log-list="[]"
+        :station-alarms="
+          lineAlarms?.[station.code] ?? {
+            [DeviceType.Camera]: { occurred: [], recovered: [] },
+            [DeviceType.Decoder]: { occurred: [], recovered: [] },
+            [DeviceType.Keyboard]: { occurred: [], recovered: [] },
+            [DeviceType.MediaServer]: { occurred: [], recovered: [] },
+            [DeviceType.Nvr]: { occurred: [], recovered: [] },
+            [DeviceType.SecurityBox]: { occurred: [], recovered: [] },
+            [DeviceType.Switch]: { occurred: [], recovered: [] },
+            [DeviceType.VideoServer]: { occurred: [], recovered: [] },
+            unclassified: { occurred: [], recovered: [] },
+          }
+        "
      />
    </NGi>
  </NGrid>