feat: get alarms from all stations

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>
+`