feat: history diag card (basically)

src/components/device-page/device-card/camera-card.vue

@@ -6,6 +6,7 @@ import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { computed, ref, toRefs } from 'vue';
 
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import CameraHistoryDiagCard from './history-diag-card/camera-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -33,8 +34,14 @@ const selectedTab = ref('设备状态');
           <div v-if="false">{{ lastDiagInfo }}</div>
         </NFlex>
       </NTabPane>
-      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <CameraHistoryDiagCard :station-code="stationCode" :ndm-camera="ndmCamera" :key="ndmCamera.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
+      <NTabPane name="原始数据" tab="原始数据">
+        <pre>{{ { ...ndmCamera, lastDiagInfo } }}</pre>
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>

src/components/device-page/device-card/decoder-card.vue

@@ -8,6 +8,7 @@ import { computed, ref, toRefs } from 'vue';
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 import DeviceCommonCard from './current-diag-card/device-common-card.vue';
 import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
+import DecoderHistoryDiagCard from './history-diag-card/decoder-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -49,11 +50,14 @@ const selectedTab = ref('设备状态');
           <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <DecoderHistoryDiagCard :station-code="stationCode" :ndm-decoder="ndmDecoder" :key="ndmDecoder.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <!-- <NTabPane name="原始数据" tab="原始数据">
+      <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
-      </NTabPane> -->
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { NdmCameraResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmCamera: NdmCameraResultVO;
+}>();
+
+const { stationCode, ndmCamera } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmCamera" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmCamera" :date-time-range="searchFields.dateTimeRange" />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { NdmDecoderResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
+import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmDecoder: NdmDecoderResultVO;
+}>();
+
+const { stationCode, ndmDecoder } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+  deviceUsageHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmDecoder" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmDecoder" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceUsageHistoryDiagCard
+        :ref="'deviceUsageHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmDecoder"
+        :date-time-range="searchFields.dateTimeRange"
+        :cpu-usage-field="'stCommonInfo.CPU使用率'"
+        :mem-usage-field="'stCommonInfo.内存使用率'"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, PageParams } from '@/apis/models';
+import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { h } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmDevice: NdmDeviceResultVO;
+  dateTimeRange: [number, number];
+}>();
+
+const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);
+
+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: 'alarmType', align: 'center' },
+  { title: '故障级别', key: 'faultLevel', align: 'center' },
+  { title: '故障编码', key: 'faultCode', align: 'center' },
+  { title: '故障描述', key: 'faultDescription' },
+  {
+    title: '是否恢复',
+    key: 'alarmCategory',
+    align: 'center',
+    render: (rowData) => {
+      return rowData.alarmCategory === '2' ? '是' : '否';
+    },
+  },
+  { title: '恢复时间', key: 'updatedTime' },
+];
+
+const tableData = ref<DataTableRowData[]>([]);
+const DEFAULT_PAGE_SIZE = 10;
+const tablePagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    tablePagination.page = page;
+    getDeviceAlarmLogList();
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    tablePagination.pageSize = pageSize;
+    tablePagination.page = 1;
+    getDeviceAlarmLogList();
+  },
+});
+
+const { mutate: getDeviceAlarmLogList, isPending } = useMutation({
+  mutationFn: async () => {
+    const deviceId = ndmDevice.value.deviceId;
+    const alarmDate_ge = dateTimeRange.value[0];
+    const alarmDate_le = dateTimeRange.value[1];
+    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+      current: tablePagination.page ?? 1,
+      size: tablePagination.pageSize ?? DEFAULT_PAGE_SIZE,
+      sort: 'id',
+      order: 'descending',
+    };
+    const res = await postNdmDeviceAlarmLogPage(stationCode.value, {
+      model: { deviceId },
+      extra: { alarmDate_ge, alarmDate_le },
+      ...restParams,
+    });
+    return res;
+  },
+  onSuccess: ({ records, size, total }) => {
+    tablePagination.pageSize = parseInt(size);
+    tablePagination.itemCount = parseInt(total);
+    tableData.value = records;
+  },
+  onError: (error) => {
+    console.error(`查询${ndmDevice.value.name}告警数据失败:`, error);
+    window.$message.error(error.message);
+  },
+});
+
+defineExpose({
+  isPending,
+  refresh: () => {
+    tablePagination.page = 1;
+    tablePagination.pageSize = DEFAULT_PAGE_SIZE;
+    getDeviceAlarmLogList();
+  },
+});
+</script>
+
+<template>
+  <NCard size="small" title="设备告警记录">
+    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" remote flex-height style="height: 500px" />
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,163 @@
+<script lang="ts">
+const formatDuration = (time: number) => {
+  if (time < 1) {
+    return '';
+  }
+  const d = Math.floor(time / 86400);
+  const h = Math.floor((time % 86400) / 3600);
+  const m = Math.floor((time % 3600) / 60);
+  const s = Math.floor(time % 60);
+  let result = '';
+  if (d > 0) {
+    result += `${d}天`;
+  }
+  if (h > 0) {
+    result += `${h}小时`;
+  }
+  if (m > 0) {
+    result += `${m}分钟`;
+  }
+  if (s > 0) {
+    result += `${s}秒`;
+  }
+  return result;
+};
+</script>
+
+<script setup lang="ts">
+import type { NdmDeviceResultVO, NdmIcmpLogResultVO, NdmIcmpLogVO, PageParams, PageResult } from '@/apis/models';
+import { postIcmpLogPage } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import { NCard, NPagination, NScrollbar, NTimeline, NTimelineItem, type PaginationProps, type TimelineItemProps } from 'naive-ui';
+import { computed, h, reactive, ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmDevice: NdmDeviceResultVO;
+  dateTimeRange: [number, number];
+}>();
+
+const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);
+
+const icmpLogList = ref<NdmIcmpLogResultVO[]>([]);
+const predecessorItem = ref<NdmIcmpLogResultVO>();
+
+const DEFAULT_PAGE_SIZE = 6;
+const timelinePagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: [6, 10, 20, 50, 80, 100],
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    timelinePagination.page = page;
+    getDeviceIcmpLogList();
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    timelinePagination.pageSize = pageSize;
+    timelinePagination.page = 1;
+    getDeviceIcmpLogList();
+  },
+});
+
+const { mutate: getDeviceIcmpLogList, isPending } = useMutation({
+  mutationFn: async () => {
+    const id = ndmDevice.value.id;
+    const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
+    const createdTime_preciseed = dayjs(dateTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
+    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+      current: timelinePagination.page ?? 1,
+      size: timelinePagination.pageSize ?? DEFAULT_PAGE_SIZE,
+      sort: 'id',
+      order: 'descending',
+    };
+    const currentPageRes = await postIcmpLogPage(stationCode.value, {
+      model: { deviceId: id },
+      extra: { createdTime_precisest, createdTime_preciseed },
+      ...restParams,
+    });
+    let previousPageRes: PageResult<Partial<NdmIcmpLogVO>> | undefined = undefined;
+    if ((timelinePagination.page ?? 1) > 1) {
+      previousPageRes = await postIcmpLogPage(stationCode.value, {
+        model: { deviceId: id },
+        extra: { createdTime_precisest, createdTime_preciseed },
+        ...restParams,
+        current: (timelinePagination.page ?? 1) - 1,
+      });
+    }
+    return { currentPageRes, previousPageRes };
+  },
+  onSuccess: ({ currentPageRes: { records, size, total }, previousPageRes }) => {
+    timelinePagination.pageSize = parseInt(size);
+    timelinePagination.itemCount = parseInt(total);
+    icmpLogList.value = records;
+    predecessorItem.value = previousPageRes?.records.at(-1);
+  },
+  onError: (error) => {
+    console.error(`查询${ndmDevice.value.name}诊断数据失败:`, error);
+    window.$message.error(error.message);
+  },
+});
+
+const timelineItems = computed<TimelineItemProps[]>(() => {
+  const items: TimelineItemProps[] = [];
+  let prevIcmpLog = predecessorItem.value;
+  for (const icmpLog of icmpLogList.value) {
+    const { deviceStatus, createdTime } = icmpLog;
+    const type: TimelineItemProps['type'] = deviceStatus === '10' ? 'success' : deviceStatus === '20' ? 'error' : 'warning';
+    const title = deviceStatus === '10' ? '在线' : deviceStatus === '20' ? '离线' : '未知';
+    const duration = prevIcmpLog ? dayjs(prevIcmpLog.createdTime).diff(dayjs(createdTime), 'second') : undefined;
+    const content = `持续时长：${duration ? formatDuration(duration) : '至今'}`;
+    const time = createdTime;
+    items.push({
+      type,
+      title,
+      content,
+      time,
+    });
+    prevIcmpLog = icmpLog;
+  }
+  return items;
+});
+
+defineExpose({
+  isPending,
+  refresh: () => {
+    timelinePagination.page = 1;
+    timelinePagination.pageSize = DEFAULT_PAGE_SIZE;
+    getDeviceIcmpLogList();
+  },
+});
+</script>
+
+<template>
+  <NCard size="small" title="设备状态记录">
+    <div v-if="timelineItems.length === 0" style="width: 100%; display: flex; color: #666">
+      <div style="margin: auto">暂无记录</div>
+    </div>
+    <NScrollbar v-else x-scrollable style="height: 500px">
+      <NTimeline>
+        <NTimelineItem v-for="{ type, title, content, time } in timelineItems" :key="time" :type="type" :title="title" :content="content" :time="time"></NTimelineItem>
+      </NTimeline>
+    </NScrollbar>
+    <template #footer>
+      <NPagination
+        v-model:page="timelinePagination.page"
+        v-model:page-size="timelinePagination.pageSize"
+        :page-sizes="timelinePagination.pageSizes"
+        :item-count="timelinePagination.itemCount"
+        size="small"
+        show-size-picker
+        @update-page="timelinePagination.onUpdatePage"
+        @update:page-size="timelinePagination.onUpdatePageSize"
+      />
+    </template>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,122 @@
+<script lang="ts">
+function getValueByFieldPath(record: Record<string, any>, fieldPath?: string) {
+  if (!fieldPath) return undefined;
+  return fieldPath.split('.').reduce((acc, cur) => acc?.[cur], record);
+}
+</script>
+
+<script setup lang="ts">
+import type { NdmDeviceResultVO, NdmSnmpLogResultVO, PageParams } from '@/apis/models';
+import { postSnmpLogPage } from '@/apis/requests';
+import { useMutation } from '@tanstack/vue-query';
+import dayjs from 'dayjs';
+import destr from 'destr';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
+import { computed, h, reactive, ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmDevice: NdmDeviceResultVO;
+  dateTimeRange: [number, number];
+  cpuUsageField?: string;
+  memUsageField?: string;
+  diskUsageField?: string;
+}>();
+
+const { stationCode, ndmDevice, dateTimeRange, cpuUsageField, memUsageField, diskUsageField } = toRefs(props);
+
+const tableColumns = computed(() => {
+  const columns: DataTableColumns<NdmSnmpLogResultVO> = [{ title: '诊断时间', key: 'createdTime' }];
+  if (cpuUsageField.value) {
+    columns.push({ title: 'CPU使用率(%)', key: 'cpuUsage' });
+  }
+  if (memUsageField.value) {
+    columns.push({ title: '内存使用率(%)', key: 'memUsage' });
+  }
+  if (diskUsageField.value) {
+    columns.push({ title: '磁盘使用率(%)', key: 'diskUsage' });
+  }
+  return columns;
+});
+
+const tableData = ref<DataTableRowData[]>([]);
+const DEFAULT_PAGE_SIZE = 10;
+const tablePagination = reactive<PaginationProps>({
+  size: 'small',
+  showSizePicker: true,
+  page: 1,
+  pageSize: DEFAULT_PAGE_SIZE,
+  pageSizes: [5, 10, 20, 50, 80, 100],
+  itemCount: 0,
+  prefix: ({ itemCount }) => {
+    return h('div', {}, { default: () => `共${itemCount}条` });
+  },
+  onUpdatePage: (page: number) => {
+    tablePagination.page = page;
+    getDeviceSnmpLogList();
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    tablePagination.pageSize = pageSize;
+    tablePagination.page = 1;
+    getDeviceSnmpLogList();
+  },
+});
+
+const { mutate: getDeviceSnmpLogList, isPending } = useMutation({
+  mutationFn: async () => {
+    const deviceId = ndmDevice.value.id;
+    const createdTime_precisest = dayjs(dateTimeRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
+    const createdTime_preciseed = dayjs(dateTimeRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
+    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
+      current: tablePagination.page ?? 1,
+      size: tablePagination.pageSize ?? DEFAULT_PAGE_SIZE,
+      sort: 'id',
+      order: 'descending',
+    };
+    const res = await postSnmpLogPage(stationCode.value, {
+      model: { deviceId },
+      extra: { createdTime_precisest, createdTime_preciseed },
+      ...restParams,
+    });
+    return res;
+  },
+  onSuccess: ({ records, size, total }) => {
+    tablePagination.pageSize = parseInt(size);
+    tablePagination.itemCount = parseInt(total);
+    tableData.value = records.map((record) => {
+      const diagInfoJsonString = record.diagInfo;
+      const diagInfo = destr(diagInfoJsonString);
+      if (!diagInfo) return {};
+      if (typeof diagInfo !== 'object') return {};
+      return {
+        createdTime: record.createdTime,
+        cpuUsage: getValueByFieldPath(diagInfo, cpuUsageField.value),
+        memUsage: getValueByFieldPath(diagInfo, memUsageField.value),
+        diskUsage: getValueByFieldPath(diagInfo, diskUsageField.value),
+        diagInfo,
+      };
+    });
+  },
+  onError: (error) => {
+    console.error(`查询${ndmDevice.value.name}告警数据失败:`, error);
+    window.$message.error(error.message);
+  },
+});
+
+defineExpose({
+  isPending,
+  refresh: () => {
+    tablePagination.page = 1;
+    tablePagination.pageSize = DEFAULT_PAGE_SIZE;
+    getDeviceSnmpLogList();
+  },
+});
+</script>
+
+<template>
+  <NCard size="small" title="设备硬件占用率记录">
+    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="tablePagination" :single-line="false" remote flex-height style="height: 500px" />
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { NdmKeyboardResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmKeyboard: NdmKeyboardResultVO;
+}>();
+
+const { stationCode, ndmKeyboard } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmKeyboard" :date-time-range="searchFields.dateTimeRange" />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { NdmNvrResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
+import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmNvr: NdmNvrResultVO;
+}>();
+
+const { stationCode, ndmNvr } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+  deviceUsageHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceUsageHistoryDiagCard
+        :ref="'deviceUsageHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmNvr"
+        :date-time-range="searchFields.dateTimeRange"
+        :cpu-usage-field="'stCommonInfo.CPU使用率'"
+        :mem-usage-field="'stCommonInfo.内存使用率'"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { NdmSecurityBoxResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
+import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmSecurityBox: NdmSecurityBoxResultVO;
+}>();
+
+const { stationCode, ndmSecurityBox } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+  deviceUsageHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceUsageHistoryDiagCard
+        :ref="'deviceUsageHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmSecurityBox"
+        :date-time-range="searchFields.dateTimeRange"
+        :cpu-usage-field="'stCommonInfo.CPU使用率'"
+        :mem-usage-field="'stCommonInfo.内存使用率'"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { NdmServerResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
+import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmServer: NdmServerResultVO;
+}>();
+
+const { stationCode, ndmServer } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+  deviceUsageHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmServer" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmServer" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceUsageHistoryDiagCard
+        :ref="'deviceUsageHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmServer"
+        :date-time-range="searchFields.dateTimeRange"
+        :cpu-usage-field="'commInfo.CPU使用率'"
+        :mem-usage-field="'commInfo.内存使用率'"
+        :disk-usage-field="'commInfo.磁盘使用率'"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { NdmSwitchResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
+import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmSwitch: NdmSwitchResultVO;
+}>();
+
+const { stationCode, ndmSwitch } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+  deviceUsageHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
+      <DeviceUsageHistoryDiagCard
+        :ref="'deviceUsageHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmSwitch"
+        :date-time-range="searchFields.dateTimeRange"
+        :cpu-usage-field="'cpuRatio'"
+        :mem-usage-field="'memoryRatio'"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>

src/components/device-page/device-card/keyboard-card.vue

@@ -4,6 +4,7 @@ import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
 import { ref, toRefs } from 'vue';
 
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
+import KeyboardHistoryDiagCard from './history-diag-card/keyboard-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -23,8 +24,14 @@ const selectedTab = ref('设备状态');
           <DeviceHeaderCard :device="ndmKeyboard" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <KeyboardHistoryDiagCard :station-code="stationCode" :ndm-keyboard="ndmKeyboard" :key="ndmKeyboard.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
+      <NTabPane name="原始数据" tab="原始数据">
+        <pre>{{ { ...ndmKeyboard } }}</pre>
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>

src/components/device-page/device-card/nvr-card.vue

@@ -66,12 +66,13 @@ const selectedTab = ref('设备状态');
         </NFlex>
       </NTabPane>
       <NTabPane name="历史诊断" tab="历史诊断">
-        <NvrDiagHistoryCard :station-code="stationCode" :ndm-nvr="ndmNvr" />
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <NvrDiagHistoryCard :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <!-- <NTabPane name="原始数据" tab="原始数据">
+      <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>
-      </NTabPane> -->
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>

src/components/device-page/device-card/security-box-card.vue

@@ -10,6 +10,7 @@ import DeviceCommonCard from './current-diag-card/device-common-card.vue';
 import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
 import SecurityBoxInfoCard from './current-diag-card/security-box-info-card.vue';
 import SecurityBoxCircuitCard from './current-diag-card/security-box-circuit-card.vue';
+import SecurityBoxHistoryDiagCard from './history-diag-card/security-box-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -60,11 +61,14 @@ const selectedTab = ref('设备状态');
           <SecurityBoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="诊断历史" tab="诊断历史"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <SecurityBoxHistoryDiagCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :key="ndmSecurityBox.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <!-- <NTabPane name="原始数据" tab="原始数据">
+      <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
-      </NTabPane> -->
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>

src/components/device-page/device-card/server-card.vue

@@ -7,6 +7,7 @@ import { computed, ref, toRefs } from 'vue';
 
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
+import ServerHistoryDiagCard from './history-diag-card/server-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -39,11 +40,14 @@ const selectedTab = ref('设备状态');
           <DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <ServerHistoryDiagCard :station-code="stationCode" :ndm-server="ndmServer" :key="ndmServer.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <!-- <NTabPane name="原始数据" tab="原始数据">
+      <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmServer, lastDiagInfo } }}</pre>
-      </NTabPane> -->
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>

src/components/device-page/device-card/switch-card.vue

@@ -8,6 +8,7 @@ import { computed, ref, toRefs } from 'vue';
 import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
 import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
 import SwitchPortCard from './current-diag-card/switch-port-card.vue';
+import SwitchHistoryDiagCard from './history-diag-card/switch-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -41,11 +42,14 @@ const selectedTab = ref('设备状态');
           <SwitchPortCard :port-info-list="portInfoList" />
         </NFlex>
       </NTabPane>
-      <NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
+      <NTabPane name="历史诊断" tab="历史诊断">
+        <!-- 历史诊断组件中包含请求逻辑，当改变选择的设备时需要重新发起请求，因此添加显式的key触发组件的更新 -->
+        <SwitchHistoryDiagCard :station-code="stationCode" :ndm-switch="ndmSwitch" :key="ndmSwitch.id" />
+      </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
-      <!-- <NTabPane name="原始数据" tab="原始数据">
+      <NTabPane name="原始数据" tab="原始数据">
         <pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
-      </NTabPane> -->
+      </NTabPane>
     </NTabs>
   </NCard>
 </template>