feat: 新增摄像机硬件占用率历史诊断记录卡片

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

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import type { NdmCameraResultVO, Station } from '@/apis';
-import { DeviceAlarmHistoryCard, DeviceIcmpHistoryCard, HistoryDiagFilterCard, type DeviceAlarmHistoryCardProps, type DeviceIcmpHistoryCardProps } from '@/components';
+import {
+  DeviceAlarmHistoryCard,
+  DeviceIcmpHistoryCard,
+  DeviceUsageHistoryCard,
+  HistoryDiagFilterCard,
+  type DeviceAlarmHistoryCardProps,
+  type DeviceIcmpHistoryCardProps,
+  type DeviceUsageHistoryCardProps,
+} from '@/components';
 import dayjs from 'dayjs';
 import { NFlex, type SelectOption } from 'naive-ui';
 import { onMounted, ref, toRefs, watch } from 'vue';
@@ -15,6 +23,7 @@ const { ndmDevice, station } = toRefs(props);
 const historyDiagOptions: SelectOption[] = [
   { label: '设备状态', value: 'icmp' },
   { label: '设备告警', value: 'alarm' },
+  { label: '硬件占用', value: 'usage' },
 ];
 const getWeekRange = (): [number, number] => {
   const now = dayjs();
@@ -27,7 +36,8 @@ const selected = ref<string[]>([...historyDiagOptions.map((option) => `${option.
 const loading = ref<boolean>(false);
 const icmpLoading = ref<boolean>(false);
 const alarmLoading = ref<boolean>(false);
-watch([icmpLoading, alarmLoading], (loadings) => {
+const usageLoading = ref<boolean>(false);
+watch([icmpLoading, alarmLoading, usageLoading], (loadings) => {
   loading.value = loadings.some((loading) => loading);
 });
 const icmpHistoryQueryFn = ref<() => void>();
@@ -38,9 +48,14 @@ const alarmHistoryQueryFn = ref<() => void>();
 const onExposeAlarmHistoryQueryFn: DeviceAlarmHistoryCardProps['onExposeQueryFn'] = (queryFn) => {
   alarmHistoryQueryFn.value = queryFn;
 };
+const usageHistoryQueryFn = ref<() => void>();
+const onExposeUsageHistoryQueryFn: DeviceUsageHistoryCardProps['onExposeQueryFn'] = (queryFn) => {
+  usageHistoryQueryFn.value = queryFn;
+};
 const queryData = () => {
   if (selected.value.includes('icmp')) icmpHistoryQueryFn.value?.();
   if (selected.value.includes('alarm')) alarmHistoryQueryFn.value?.();
+  if (selected.value.includes('usage')) usageHistoryQueryFn.value?.();
 };
 const onQuery = () => {
   queryData();
@@ -70,6 +85,16 @@ onMounted(() => {
       v-model:loading="alarmLoading"
       @expose-query-fn="onExposeAlarmHistoryQueryFn"
     />
+    <DeviceUsageHistoryCard
+      v-if="selected.includes('usage')"
+      :ndm-device="ndmDevice"
+      :station="station"
+      :cpu-usage-field="'stCommonInfo.CPU使用率'"
+      :mem-usage-field="'stCommonInfo.内存使用率'"
+      v-model:range="range"
+      v-model:loading="usageLoading"
+      @expose-query-fn="onExposeUsageHistoryQueryFn"
+    />
   </NFlex>
 </template>