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' },