feat: NvrDiskHealthHistoryDiagCard

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

@@ -7,6 +7,7 @@ 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';
+import NvrDiskHealthHistoryDiagCard from './nvr-disk-health-history-diag-card.vue';
 
 const props = defineProps<{
   stationCode: string;
@@ -22,18 +23,23 @@ const searchFields = reactive({
 type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
 type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
 type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+type NvrDiskHealthHistoryCardInst = InstanceType<typeof NvrDiskHealthHistoryDiagCard> | null;
 const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
 const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
 const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+const nvrDiskHealthHistoryCardRef = useTemplateRef<NvrDiskHealthHistoryCardInst>('nvrDiskHealthHistoryCardRef');
 
 function refreshData() {
   deviceStatusHistoryDiagCardRef.value?.refresh();
   deviceAlarmHistoryDiagCardRef.value?.refresh();
   deviceUsageHistoryDiagCardRef.value?.refresh();
+  nvrDiskHealthHistoryCardRef.value?.refresh();
 }
 
 const loading = computed(() => {
-  return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending;
+  return (
+    deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending || nvrDiskHealthHistoryCardRef.value?.isPending
+  );
 });
 
 onMounted(() => {
@@ -72,6 +78,7 @@ onMounted(() => {
         :cpu-usage-field="'stCommonInfo.CPU使用率'"
         :mem-usage-field="'stCommonInfo.内存使用率'"
       />
+      <NvrDiskHealthHistoryDiagCard :ref="'nvrDiskHealthHistoryCardRef'" :station-code="stationCode" :ndm-nvr="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
     </NFlex>
   </NCard>
 </template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { NdmNvrDiagInfo } from '@/apis/domains';
+import type { NdmNvrResultVO, NdmSnmpLogResultVO } from '@/apis/models';
+import { useDeviceSnmpLogsQuery } from '@/composables/query';
+import { destr } from 'destr';
+import { NCard, NDataTable, type DataTableColumns, type DataTableRowData } from 'naive-ui';
+import { computed, toRefs } from 'vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmNvr: NdmNvrResultVO;
+  dateTimeRange: [number, number];
+}>();
+
+const { stationCode, ndmNvr, dateTimeRange } = toRefs(props);
+
+const tableColumns: DataTableColumns<NdmSnmpLogResultVO> = [
+  { title: '诊断时间', key: 'createdTime' },
+  { title: '磁盘健康度', key: 'diskHealthRatio' },
+];
+
+const { snmpLogRespData, isPending, pagination, refresh } = useDeviceSnmpLogsQuery(stationCode, ndmNvr, dateTimeRange);
+
+const tableData = computed<DataTableRowData[]>(() => {
+  const { records = [] } = snmpLogRespData.value ?? {};
+  return records.map((record) => {
+    const diagInfoJsonString = record.diagInfo;
+    const diagInfo = destr<NdmNvrDiagInfo>(diagInfoJsonString);
+    if (!diagInfo) return {};
+    if (typeof diagInfo !== 'object') return {};
+    const healthDiskCount = diagInfo.info.diskHealth.filter((health) => health === 0).length;
+    const totalDiskCount = diagInfo.info.diskHealth.length;
+    return {
+      createdTime: record.createdTime,
+      diskHealthRatio: `${healthDiskCount}/${totalDiskCount}`,
+      diagInfo,
+    };
+  });
+});
+
+defineExpose({
+  isPending,
+  refresh,
+});
+</script>
+
+<template>
+  <NCard size="small" title="磁盘健康度记录">
+    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="pagination" :single-line="false" remote flex-height style="height: 500px" />
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>