refactor(components): extract component helpers

src/components/dashboard-page/device-alarm-detail-modal.vue

@@ -2,15 +2,16 @@
 import type { Station } from '@/apis/domains';
 import type { NdmDeviceAlarmLogPageQuery, NdmDeviceAlarmLogResultVO, NdmDeviceAlarmLogVO, PageQueryExtra } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components/helper';
 import type { StationAlarmCounts } from '@/composables/query';
 import { FaultLevel } from '@/enums/fault-level';
 import { AlarmType } from '@/enums/alarm-type';
-import { DeviceType, DeviceTypeCode, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
+import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } 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 { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps, type TagProps } from 'naive-ui';
+import { NButton, NCol, NDataTable, NModal, NRow, NSpace, NStatistic, NTag, type DataTableColumns, type DataTableProps, type DataTableRowData, type PaginationProps } from 'naive-ui';
 import { computed, h, reactive, ref, toRefs, watch } from 'vue';
 
 interface Props {
@@ -49,18 +50,12 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '告警时间',
     key: 'alarmDate',
-    render: (rowData /* , rowIndex */) => {
+    render: renderAlarmDateCell,
-      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
-    },
   },
   {
     title: '设备类型',
     key: 'deviceType',
-    render: (rowData) => {
+    render: renderDeviceTypeCell,
-      const deviceTypeVal = tryGetDeviceTypeVal(rowData.deviceType);
-      if (!deviceTypeVal) return '-';
-      return DeviceTypeName[deviceTypeVal];
-    },
     filter: true,
     filterMultiple: true,
     filterOptions: Object.values(DeviceType).map((deviceType) => ({ label: DeviceTypeName[deviceType], value: deviceType })),
@@ -70,13 +65,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     title: '告警类型',
     key: 'alarmType',
     align: 'center',
-    render: (rowData) => {
+    render: renderAlarmTypeCell,
-      const { alarmType } = rowData;
-      if (!alarmType) {
-        return '';
-      }
-      return h(NTag, { type: 'default' }, { default: () => AlarmType[alarmType] });
-    },
     filter: true,
     filterMultiple: true,
     filterOptions: Object.keys(AlarmType).map((alarmType) => ({ label: AlarmType[alarmType], value: alarmType })),
@@ -85,21 +74,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
     title: '故障级别',
     key: 'faultLevel',
     align: 'center',
-    render: (rowData) => {
+    render: renderFaultLevelCell,
-      const { faultLevel } = rowData;
-      if (!faultLevel) {
-        return '';
-      }
-      let type: TagProps['type'] = 'default';
-      if (faultLevel === '1') {
-        type = 'error';
-      } else if (faultLevel === '2') {
-        type = 'warning';
-      } else if (faultLevel === '3') {
-        type = 'info';
-      }
-      return h(NTag, { type }, { default: () => FaultLevel[faultLevel] });
-    },
     filter: true,
     filterMultiple: true,
     filterOptions: Object.keys(FaultLevel).map((faultLevel) => ({ label: FaultLevel[faultLevel], value: faultLevel })),

src/components/device-page/device-card/current-diag-card/switch-port-card.vue

@@ -15,8 +15,8 @@
  * - 响应式数据处理和布局
  */
 
-import { getPortStatusVal, transformPortSpeed } from '../../helper';
 import type { NdmSwitchPortInfo } from '@/apis/domains';
+import { getPortStatusVal, transformPortSpeed } from '@/components/helper';
 import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
 import { computed, toRefs } from 'vue';
 

src/components/device-page/device-card/history-diag-card/device-alarm-history-diag-card.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, NdmNvrResultVO, PageParams } from '@/apis/models';
+import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, PageParams } from '@/apis/models';
 import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
-import { DeviceType, tryGetDeviceTypeVal } from '@/enums/device-type';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderFaultDescriptionCell, renderFaultLevelCell } from '@/components/helper';
 import { useMutation } from '@tanstack/vue-query';
-import dayjs from 'dayjs';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
-import { NButton, NCard, NDataTable, NPopover, NScrollbar, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
 import { h } from 'vue';
 import { reactive, ref, toRefs } from 'vue';
 
@@ -21,66 +20,25 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '告警时间',
     key: 'alarmDate',
-    render: (rowData /* , rowIndex */) => {
+    render: renderAlarmDateCell,
-      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
-    },
   },
-  { title: '告警类型', key: 'alarmType', align: 'center' },
+  {
-  { title: '故障级别', key: 'faultLevel', align: 'center' },
+    title: '告警类型',
-  { title: '故障编码', key: 'faultCode', align: 'center' },
+    key: 'alarmType',
+    align: 'center',
+    render: renderAlarmTypeCell,
+  },
+  {
+    title: '故障级别',
+    key: 'faultLevel',
+    align: 'center',
+    render: renderFaultLevelCell,
+  },
+  // { title: '故障编码', key: 'faultCode', align: 'center' },
   {
     title: '故障描述',
     key: 'faultDescription',
-    render: (rowData) => {
+    render: (rowData) => renderFaultDescriptionCell(rowData, ndmDevice.value),
-      const isNvrCluster = (ndmDevice: NdmDeviceResultVO) => {
-        const deviceTypeVal = tryGetDeviceTypeVal(ndmDevice.deviceType);
-        if (!deviceTypeVal) return false;
-        const isNvr = deviceTypeVal === DeviceType.Nvr;
-        if (!isNvr) return false;
-        const maybeNvrCluster = ndmDevice as NdmNvrResultVO;
-        return !!maybeNvrCluster.clusterList?.trim() && maybeNvrCluster.clusterList !== maybeNvrCluster.ipAddress;
-      };
-      if (!isNvrCluster(ndmDevice.value)) {
-        return rowData.faultDescription;
-      }
-      return h(
-        NPopover,
-        {
-          trigger: 'click',
-        },
-        {
-          trigger: () => {
-            return h(
-              NButton,
-              {
-                text: true,
-                type: 'info',
-              },
-              {
-                default: () => '查看',
-              },
-            );
-          },
-          default: () => {
-            return h(
-              // 'pre',
-              NScrollbar,
-              {
-                style: {
-                  width: '800px',
-                  'max-height': '400px',
-                },
-              },
-              {
-                default: () => {
-                  return h('pre', {}, { default: () => rowData.faultDescription?.split('; ').join('\n') ?? '' });
-                },
-              },
-            );
-          },
-        },
-      );
-    },
   },
   {
     title: '是否恢复',

src/components/device-page/device-card/history-diag-card/switch-port-history-diag-card.vue

@@ -2,12 +2,12 @@
 import type { NdmSwitchDiagInfo, NdmSwitchPortInfo } from '@/apis/domains';
 import type { NdmSwitchResultVO, PageParams } from '@/apis/models';
 import { postSnmpLogPage } from '@/apis/requests';
+import { getPortStatusVal, transformPortSpeed } from '@/components/helper';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import destr from 'destr';
 import { NButton, NCard, NDataTable, NModal, type DataTableColumns, type DataTableRowData, type DatePickerProps, type PaginationProps } from 'naive-ui';
 import { h, reactive, ref, toRefs } from 'vue';
-import { getPortStatusVal, transformPortSpeed } from '../../helper';
 
 const props = defineProps<{
   stationCode: string;

src/components/helper/device-alarm.ts

@@ -0,0 +1,91 @@
+import type { NdmDeviceAlarmLogVO, NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
+import { AlarmType } from '@/enums/alarm-type';
+import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal } from '@/enums/device-type';
+import { FaultLevel } from '@/enums/fault-level';
+import dayjs from 'dayjs';
+import { NButton, NPopover, NScrollbar, NTag, type TagProps } from 'naive-ui';
+import { h } from 'vue';
+
+export const renderAlarmDateCell = (rowData: Partial<NdmDeviceAlarmLogVO>) => {
+  return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
+};
+
+export const renderDeviceTypeCell = (rowData: Partial<NdmDeviceAlarmLogVO>) => {
+  const deviceTypeVal = tryGetDeviceTypeVal(rowData.deviceType);
+  if (!deviceTypeVal) return '-';
+  return DeviceTypeName[deviceTypeVal];
+};
+
+export const renderAlarmTypeCell = (rowData: Partial<NdmDeviceAlarmLogVO>) => {
+  const { alarmType } = rowData;
+  if (!alarmType) {
+    return '';
+  }
+  return h(NTag, { type: 'default' }, { default: () => AlarmType[alarmType] });
+};
+
+export const renderFaultLevelCell = (rowData: Partial<NdmDeviceAlarmLogVO>) => {
+  const { faultLevel } = rowData;
+  if (!faultLevel) {
+    return '';
+  }
+  let type: TagProps['type'] = 'default';
+  if (faultLevel === '1') {
+    type = 'error';
+  } else if (faultLevel === '2') {
+    type = 'warning';
+  } else if (faultLevel === '3') {
+    type = 'info';
+  }
+  return h(NTag, { type }, { default: () => FaultLevel[faultLevel] });
+};
+
+export const renderFaultDescriptionCell = (rowData: Partial<NdmDeviceAlarmLogVO>, ndmDevice: NdmDeviceResultVO) => {
+  const isNvrCluster = (ndmDevice: NdmDeviceResultVO) => {
+    const deviceTypeVal = tryGetDeviceTypeVal(ndmDevice.deviceType);
+    if (!deviceTypeVal) return false;
+    const isNvr = deviceTypeVal === DeviceType.Nvr;
+    if (!isNvr) return false;
+    const maybeNvrCluster = ndmDevice as NdmNvrResultVO;
+    return !!maybeNvrCluster.clusterList?.trim() && maybeNvrCluster.clusterList !== maybeNvrCluster.ipAddress;
+  };
+  if (!isNvrCluster(ndmDevice)) {
+    return rowData.faultDescription;
+  }
+  return h(
+    NPopover,
+    {
+      trigger: 'click',
+    },
+    {
+      trigger: () => {
+        return h(
+          NButton,
+          {
+            text: true,
+            type: 'info',
+          },
+          {
+            default: () => '查看',
+          },
+        );
+      },
+      default: () => {
+        return h(
+          NScrollbar,
+          {
+            style: {
+              width: '800px',
+              'max-height': '400px',
+            },
+          },
+          {
+            default: () => {
+              return h('pre', {}, { default: () => rowData.faultDescription?.split('; ').join('\n') ?? '' });
+            },
+          },
+        );
+      },
+    },
+  );
+};

src/components/helper/index.ts

@@ -0,0 +1,2 @@
+export * from './device-alarm';
+export * from './switch-port';

src/pages/alarm-page.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import type { NdmDeviceAlarmLogResultVO } from '@/apis/models';
 import { ndmDeviceAlarmLogDefaultExportByTemplate, postNdmDeviceAlarmLogPage, putNdmDeviceAlarmLog } from '@/apis/requests';
+import { renderAlarmDateCell, renderAlarmTypeCell, renderDeviceTypeCell, renderFaultLevelCell } from '@/components/helper';
 import { FaultLevel } from '@/enums/fault-level';
 import { AlarmType } from '@/enums/alarm-type';
-import { DeviceType, DeviceTypeCode, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
+import { DeviceType, DeviceTypeCode, DeviceTypeName, type DeviceTypeVal } from '@/enums/device-type';
 import { useCurrentAlarmsStore } from '@/stores/current-alarms';
 import { useStationStore } from '@/stores/station';
 import { downloadByData } from '@/utils/download';
 import { useMutation } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
-import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption, TagProps } from 'naive-ui';
+import type { DataTableColumns, DataTableRowData, PaginationProps, SelectOption } from 'naive-ui';
 import { NForm, NInput, NButton, NSpace, NDataTable, NFormItemGi, NGrid, NSelect, NGridItem, NDatePicker, NTag, NPopconfirm } from 'naive-ui';
 import { storeToRefs } from 'pinia';
 import { ref, reactive, onBeforeMount, h, computed, watch } from 'vue';
@@ -101,9 +102,7 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '告警时间',
     key: 'alarmDate',
-    render: (rowData /* , rowIndex */) => {
+    render: renderAlarmDateCell,
-      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
-    },
   },
   {
     title: '车站',
@@ -116,44 +115,20 @@ const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
   {
     title: '设备类型',
     key: 'deviceType',
-    render: (rowData) => {
+    render: renderDeviceTypeCell,
-      const deviceTypeVal = tryGetDeviceTypeVal(rowData.deviceType);
-      if (!deviceTypeVal) return '-';
-      return DeviceTypeName[deviceTypeVal];
-    },
   },
   { title: '设备名称', key: 'deviceName' },
   {
     title: '告警类型',
     key: 'alarmType',
     align: 'center',
-    render: (rowData) => {
+    render: renderAlarmTypeCell,
-      const { alarmType } = rowData;
-      if (!alarmType) {
-        return '';
-      }
-      return h(NTag, { type: 'default' }, { default: () => AlarmType[alarmType] });
-    },
   },
   {
     title: '故障级别',
     key: 'faultLevel',
     align: 'center',
-    render: (rowData) => {
+    render: renderFaultLevelCell,
-      const { faultLevel } = rowData;
-      if (!faultLevel) {
-        return '';
-      }
-      let type: TagProps['type'] = 'default';
-      if (faultLevel === '1') {
-        type = 'error';
-      } else if (faultLevel === '2') {
-        type = 'warning';
-      } else if (faultLevel === '3') {
-        type = 'info';
-      }
-      return h(NTag, { type }, { default: () => FaultLevel[faultLevel] });
-    },
   },
   // { title: '故障编码', key: 'faultCode', align: 'center' },
   // { title: '故障位置', key: 'faultLocation' },