feat: get alarms from all stations

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');
   }
 }