feat(alarm-page): camera snapshot

src/apis/models/index.ts

@@ -2,3 +2,4 @@ export * from './base';
 export * from './device';
 export * from './system';
 export * from './user';
+export * from './vimp';

src/apis/models/vimp/index.ts

@@ -0,0 +1 @@
+export * from './snap-result';

src/apis/models/vimp/snap-result.ts

@@ -0,0 +1,5 @@
+export interface SnapResult {
+  absoluteFilePath: string;
+  path: string;
+  url: string;
+}

src/apis/requests/device/video/ndm-camera.ts

@@ -1,4 +1,4 @@
-import { ndmClient, type NdmCameraPageQuery, type NdmCameraResultVO, type NdmCameraUpdateVO, type PageParams, type PageResult } from '@/apis';
+import { ndmClient, type NdmCameraPageQuery, type NdmCameraResultVO, type NdmCameraUpdateVO, type PageParams, type PageResult, type SnapResult } from '@/apis';
 
 export const postNdmCameraPage = async (stationCode: string, pageQuery: PageParams<NdmCameraPageQuery>, signal?: AbortSignal) => {
   const prefix = stationCode ? `/${stationCode}` : '';
@@ -29,3 +29,12 @@ export const putNdmCamera = async (stationCode: string, updateVO: NdmCameraUpdat
   }
   return await getNdmCameraDetail(stationCode, ndmCamera.id ?? '');
 };
+
+export const getSnapByDeviceIdApi = async (deviceId: string) => {
+  const resp = await ndmClient.get<SnapResult>(`/api/ndm/ndmCamera/getSnapByDeviceId`, { params: { deviceId } });
+  const [err, snap] = resp;
+  if (err || !snap) {
+    throw err;
+  }
+  return snap;
+};

src/pages/alarm-page.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage, putNdmDeviceAlarmLog, type NdmDeviceAlarmLogResultVO } from '@/apis';
+import { getSnapByDeviceIdApi, ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage, putNdmDeviceAlarmLog, type NdmDeviceAlarmLogResultVO } from '@/apis';
 import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components';
-import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, type DeviceTypeVal } from '@/enums';
+import { AlarmType, DeviceType, DeviceTypeCode, DeviceTypeName, FaultLevel, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
 import { useCurrentAlarmsStore, useStationStore } from '@/stores';
 import { downloadByData } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
@@ -19,6 +19,8 @@ import {
   NDatePicker,
   NTag,
   NPopconfirm,
+  NModal,
+  NImage,
   type SelectOption,
   type DataTableColumns,
   type DataTableRowData,
@@ -109,7 +111,11 @@ watch(searchFields, () => {
   searchFieldsChanged.value = true;
 });
 
-const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
+const snappingMap = ref<Record<string, boolean>>({});
+const snapPreviewShow = ref(false);
+const snapPreviewUrl = ref('');
+
+const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO & { snapUrl: string }> = [
   { title: '告警流水号', key: 'alarmNo' },
   {
     title: '告警时间',
@@ -155,6 +161,42 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     },
   },
   { title: '恢复时间', key: 'updatedTime' },
+  {
+    title: '实时画面截图',
+    key: 'snapUrl',
+    align: 'center',
+    render: (rowData) => {
+      const { deviceType: deviceTypeCode, snapUrl } = rowData;
+      const deviceType = tryGetDeviceTypeVal(deviceTypeCode);
+      if (deviceType !== DeviceType.Camera) {
+        return null;
+      }
+      if (!snapUrl) {
+        return h(
+          NButton,
+          {
+            type: 'info',
+            size: 'small',
+            loading: !!snappingMap.value[rowData.id ?? ''],
+            onClick: async () => {
+              const id = rowData.id ?? '';
+              snappingMap.value[id] = true;
+              try {
+                const snap = await getSnapByDeviceId({ deviceAlarmLog: rowData });
+                rowData.snapUrl = snap.url;
+                snapPreviewUrl.value = snap.url;
+              } finally {
+                snappingMap.value[id] = false;
+              }
+            },
+          },
+          { default: () => '查看' },
+        );
+      } else {
+        return h(NImage, { src: snapUrl, previewDisabled: true, showToolbar: false, onClick: () => (snapPreviewShow.value = true) });
+      }
+    },
+  },
   {
     title: '告警确认',
     key: 'alarmConfirm',
@@ -244,6 +286,20 @@ const onClickQuery = () => {
   getTableData();
 };
 
+const { mutateAsync: getSnapByDeviceId } = useMutation({
+  mutationFn: async (params: { deviceAlarmLog: NdmDeviceAlarmLogResultVO }) => {
+    const { deviceAlarmLog } = params;
+    const { deviceId } = deviceAlarmLog;
+    if (!deviceId) throw new Error('设备ID不能为空');
+    const snap = await getSnapByDeviceIdApi(deviceId);
+    return snap;
+  },
+  onError: (error) => {
+    console.error(error);
+    window.$message.error(error.message);
+  },
+});
+
 const { mutate: confirmAlarm } = useMutation({
   mutationFn: async (params: { id?: string }) => {
     await putNdmDeviceAlarmLog('', {
@@ -379,6 +435,9 @@ onBeforeMount(() => getTableData());
       <NDataTable :loading="tableLoading" :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" remote flex-height style="height: 100%" />
     </div>
   </div>
+  <NModal v-model:show="snapPreviewShow" preset="card" style="width: 1400px">
+    <NImage :src="snapPreviewUrl" />
+  </NModal>
 </template>
 
 <style scoped lang="scss"></style>