skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: alarm records query

Browse Source
This commit is contained in:
yangsy
2025-08-20 23:27:24 +08:00
parent c83fea6dec
commit 1707d2c66f
7 changed files with 355 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/apis/domains/station.ts
View File

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

1
src/apis/models/device/alarm/ndm-device-alarm-log.ts
View File

@@ -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;

18
src/apis/requests/log/ndm-device-alarm-log.ts
View File

@@ -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;
};

114
src/components/device-alarm-detail-modal.vue
View File

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

99
src/composables/query/use-line-alarms-query.ts
View File

@@ -8,10 +8,10 @@ import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';
const AlarmCategory = {
Occurred: '1',
Recovered: '2',
} as const;
// const AlarmCategory = {
// Occurred: '1',
// Recovered: '2',
// } as const;
export interface CategorizedAlarms {
occurred: NdmDeviceAlarmLogResultVO[];
@@ -19,15 +19,15 @@ export interface CategorizedAlarms {
}
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;
[DeviceType.Camera]: NdmDeviceAlarmLogResultVO[];
[DeviceType.Decoder]: NdmDeviceAlarmLogResultVO[];
[DeviceType.Keyboard]: NdmDeviceAlarmLogResultVO[];
[DeviceType.MediaServer]: NdmDeviceAlarmLogResultVO[];
[DeviceType.Nvr]: NdmDeviceAlarmLogResultVO[];
[DeviceType.SecurityBox]: NdmDeviceAlarmLogResultVO[];
[DeviceType.Switch]: NdmDeviceAlarmLogResultVO[];
[DeviceType.VideoServer]: NdmDeviceAlarmLogResultVO[];
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.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: [] },
[DeviceType.Camera]: [],
[DeviceType.Decoder]: [],
[DeviceType.Keyboard]: [],
[DeviceType.MediaServer]: [],
[DeviceType.Nvr]: [],
[DeviceType.SecurityBox]: [],
[DeviceType.Switch]: [],
[DeviceType.VideoServer]: [],
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 todayEnd = '2025-08-31 23:59:59';
// const todayStart = '2025-08-13 00:00:00';
// 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,
createdTime_preciseed: todayEnd,
alarmDate_ge: todayStart,
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]: {
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),
},
[DeviceType.Camera]: cameraAlarms,
[DeviceType.Decoder]: decoderAlarms,
[DeviceType.Keyboard]: keyboardAlarms,
[DeviceType.MediaServer]: mediaServerAlarms,
[DeviceType.Nvr]: nvrAlarms,
[DeviceType.SecurityBox]: securityBoxAlarms,
[DeviceType.Switch]: switchAlarms,
[DeviceType.VideoServer]: videoServerAlarms,
unclassified: alarmList,
};
} catch (error) {
console.error(`获取车站 ${station.name} 设备告警数据失败:`, error);

230
src/pages/alarm-page.vue
View File

@@ -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>

18
src/pages/dashboard-page.vue
View File

@@ -35,15 +35,15 @@ const { data: lineAlarms } = useLineAlarmsQuery();
"
: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: [] },
[DeviceType.Camera]: [],
[DeviceType.Decoder]: [],
[DeviceType.Keyboard]: [],
[DeviceType.MediaServer]: [],
[DeviceType.Nvr]: [],
[DeviceType.SecurityBox]: [],
[DeviceType.Switch]: [],
[DeviceType.VideoServer]: [],
unclassified: [],
}
"
/>