feat: 告警记录支持点击设备跳转到设备详情

src/components/station/alarm-detail-modal/alarm-detail-modal.vue

@@ -2,12 +2,13 @@
 import type { NdmDeviceAlarmLogResultVO, Station } from '@/apis';
 import { ALARM_TYPES, DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, FAULT_LEVELS, tryGetDeviceType } from '@/enums';
 import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helpers';
-import { useAlarmStore } from '@/stores';
+import { useAlarmStore, useDeviceStore } from '@/stores';
 import { downloadByData } from '@/utils';
 import dayjs from 'dayjs';
 import { NButton, NDataTable, NFlex, NGrid, NGridItem, NModal, NStatistic, NTag, type DataTableBaseColumn, type DataTableRowData, type PaginationProps } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, reactive, ref, toRefs } from 'vue';
+import { computed, h, reactive, ref, toRefs, type CSSProperties } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 const props = defineProps<{
   station?: Station;
@@ -15,8 +16,13 @@ const props = defineProps<{
 
 const show = defineModel<boolean>('show', { default: false });
 
+const route = useRoute();
+const router = useRouter();
+
 const { station } = toRefs(props);
 
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
 const alarmStore = useAlarmStore();
 const { lineAlarms } = storeToRefs(alarmStore);
 
@@ -37,7 +43,40 @@ const tableColumns = ref<DataTableBaseColumn<NdmDeviceAlarmLogResultVO>[]>([
   { title: '告警流水号', key: 'alarmNo' },
   { title: '告警时间', key: 'alarmDate', render: renderAlarmDateCell },
   { title: '设备类型', key: 'deviceType', render: renderDeviceTypeCell },
-  { title: '设备名称', key: 'deviceName' },
+  {
+    title: '设备名称',
+    key: 'deviceName',
+    render: (rowData) => {
+      return h(
+        'div',
+        {
+          style: { textDecoration: 'underline', cursor: 'pointer' } as CSSProperties,
+          onClick: () => {
+            const stationCode = rowData.stationCode;
+            if (!stationCode) return;
+            const deviceType = tryGetDeviceType(rowData.deviceType);
+            if (!deviceType) return;
+            const stationDevices = lineDevices.value[stationCode];
+            if (!stationDevices) return;
+            const classified = stationDevices[deviceType];
+            const device = classified.find((device) => device.deviceId === rowData.deviceId);
+            if (!device) return;
+            const deviceDbId = device.id;
+            router.push({
+              path: '/device',
+              query: {
+                stationCode,
+                deviceType,
+                deviceDbId,
+                fromPage: route.path,
+              },
+            });
+          },
+        },
+        `${rowData.deviceName}`,
+      );
+    },
+  },
   { title: '告警类型', key: 'alarmType', align: 'center', render: renderAlarmTypeCell },
   { title: '故障级别', key: 'faultLevel', align: 'center', render: renderFaultLevelCell },
   // { title: '故障编码', key: 'faultCode', align: 'center' },

src/pages/alarm-page.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { exportDeviceAlarmLogApi, pageDeviceAlarmLogApi, type NdmDeviceAlarmLog, type NdmDeviceAlarmLogResultVO, type PageQueryExtra, type Station } from '@/apis';
 import { useAlarmActionColumn, useCameraSnapColumn } from '@/composables';
-import { ALARM_TYPES, DEVICE_TYPE_CODES, DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, FAULT_LEVELS, type DeviceType } from '@/enums';
+import { ALARM_TYPES, DEVICE_TYPE_CODES, DEVICE_TYPE_LITERALS, DEVICE_TYPE_NAMES, FAULT_LEVELS, tryGetDeviceType, type DeviceType } from '@/enums';
 import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/helpers';
-import { useAlarmStore, useStationStore } from '@/stores';
+import { useAlarmStore, useDeviceStore, useStationStore } from '@/stores';
 import { downloadByData, parseErrorFeedback } from '@/utils';
 import { useMutation } from '@tanstack/vue-query';
 import { watchDebounced } from '@vueuse/core';
@@ -26,7 +26,8 @@ import {
   type SelectOption,
 } from 'naive-ui';
 import { storeToRefs } from 'pinia';
-import { computed, h, onBeforeMount, reactive, ref, watch } from 'vue';
+import { computed, h, onBeforeMount, reactive, ref, watch, type CSSProperties } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 interface SearchFields extends PageQueryExtra<NdmDeviceAlarmLog> {
   stationCode_in: Station['code'][];
@@ -37,8 +38,13 @@ interface SearchFields extends PageQueryExtra<NdmDeviceAlarmLog> {
   alarmDate: [number, number];
 }
 
+const route = useRoute();
+const router = useRouter();
+
 const stationStore = useStationStore();
 const { stations } = storeToRefs(stationStore);
+const deviceStore = useDeviceStore();
+const { lineDevices } = storeToRefs(deviceStore);
 const alarmStore = useAlarmStore();
 const { unreadAlarmCount } = storeToRefs(alarmStore);
 
@@ -140,7 +146,40 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO & { snapUrl?: str
   { title: '告警时间', key: 'alarmDate', render: renderAlarmDateCell },
   { title: '车站', key: 'stationName', render: (rowData) => stations.value.find((station) => station.code === rowData.stationCode)?.name ?? '-' },
   { title: '设备类型', key: 'deviceType', render: renderDeviceTypeCell },
-  { title: '设备名称', key: 'deviceName' },
+  {
+    title: '设备名称',
+    key: 'deviceName',
+    render: (rowData) => {
+      return h(
+        'div',
+        {
+          style: { textDecoration: 'underline', cursor: 'pointer' } as CSSProperties,
+          onClick: () => {
+            const stationCode = rowData.stationCode;
+            if (!stationCode) return;
+            const deviceType = tryGetDeviceType(rowData.deviceType);
+            if (!deviceType) return;
+            const stationDevices = lineDevices.value[stationCode];
+            if (!stationDevices) return;
+            const classified = stationDevices[deviceType];
+            const device = classified.find((device) => device.deviceId === rowData.deviceId);
+            if (!device) return;
+            const deviceDbId = device.id;
+            router.push({
+              path: '/device',
+              query: {
+                stationCode,
+                deviceType,
+                deviceDbId,
+                fromPage: route.path,
+              },
+            });
+          },
+        },
+        `${rowData.deviceName}`,
+      );
+    },
+  },
   { title: '告警类型', key: 'alarmType', align: 'center', render: renderAlarmTypeCell },
   { title: '故障级别', key: 'faultLevel', align: 'center', render: renderFaultLevelCell },
   { title: '故障描述', key: 'faultDescription' },