From 87962d188cf02457448d8aff683639423ac11980 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Tue, 19 May 2026 16:38:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=91=84=E5=83=8F?=
 =?UTF-8?q?=E6=9C=BA=E7=A1=AC=E4=BB=B6=E5=8D=A0=E7=94=A8=E7=8E=87=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E8=AF=8A=E6=96=AD=E8=AE=B0=E5=BD=95=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ndm-camera/camera-history-diag.vue        | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/device/device-card/ndm-camera/camera-history-diag.vue b/src/components/device/device-card/ndm-camera/camera-history-diag.vue
index 073be98..da1cd0c 100644
--- a/src/components/device/device-card/ndm-camera/camera-history-diag.vue
+++ b/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>