From 9c0ade08a4787b097c02932fe49178ea1a359620 Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Sun, 28 Sep 2025 14:35:11 +0800
Subject: [PATCH] feat: select diag cards to show

---
 .../camera-history-diag-card.vue              | 29 +++++++++++---
 .../decoder-history-diag-card.vue             | 31 +++++++++++---
 .../keyboard-history-diag-card.vue            | 18 +++++++--
 .../nvr-diag-history-card.vue                 | 40 ++++++++++++++++---
 .../security-box-history-diag-card.vue        | 40 ++++++++++++++++---
 .../server-history-diag-card.vue              | 31 +++++++++++---
 .../switch-history-diag-card.vue              | 40 ++++++++++++++++---
 7 files changed, 192 insertions(+), 37 deletions(-)

diff --git a/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
index 7d0ffb5..c4d1cce 100644
--- a/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmCameraResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
@@ -39,6 +39,13 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -51,15 +58,27 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmCamera"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmCamera"
+        :date-time-range="searchFields.dateTimeRange"
+      />
     </NFlex>
   </NCard>
 </template>
diff --git a/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
index adc755e..5e1d3c6 100644
--- a/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmDecoderResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
@@ -43,6 +43,14 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+  { label: '硬件使用率', value: 'usage' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -55,16 +63,29 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmDecoder"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmDecoder"
+        :date-time-range="searchFields.dateTimeRange"
+      />
       <DeviceUsageHistoryDiagCard
+        v-if="selectedCards.includes('usage')"
         :ref="'deviceUsageHistoryDiagCardRef'"
         :station-code="stationCode"
         :ndm-device="ndmDecoder"
diff --git a/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
index f493686..c476a6d 100644
--- a/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmKeyboardResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 
@@ -35,6 +35,10 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([{ label: '设备状态', value: 'status' }]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -47,14 +51,20 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmKeyboard"
+        :date-time-range="searchFields.dateTimeRange"
+      />
     </NFlex>
   </NCard>
 </template>
diff --git a/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue b/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
index 5a2db2c..75f0f58 100644
--- a/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/nvr-diag-history-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmNvrResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
@@ -49,6 +49,15 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+  { label: '硬件使用率', value: 'usage' },
+  { label: '硬盘健康', value: 'health' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -61,16 +70,29 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmNvr"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmNvr"
+        :date-time-range="searchFields.dateTimeRange"
+      />
       <DeviceUsageHistoryDiagCard
+        v-if="selectedCards.includes('usage')"
         :ref="'deviceUsageHistoryDiagCardRef'"
         :station-code="stationCode"
         :ndm-device="ndmNvr"
@@ -78,7 +100,13 @@ onMounted(() => {
         :cpu-usage-field="'stCommonInfo.CPU使用率'"
         :mem-usage-field="'stCommonInfo.内存使用率'"
       />
-      <NvrDiskHealthHistoryDiagCard :ref="'nvrDiskHealthHistoryCardRef'" :station-code="stationCode" :ndm-nvr="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
+      <NvrDiskHealthHistoryDiagCard
+        v-if="selectedCards.includes('health')"
+        :ref="'nvrDiskHealthHistoryCardRef'"
+        :station-code="stationCode"
+        :ndm-nvr="ndmNvr"
+        :date-time-range="searchFields.dateTimeRange"
+      />
     </NFlex>
   </NCard>
 </template>
diff --git a/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
index 1f0750b..25d2da1 100644
--- a/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmSecurityBoxResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
@@ -52,6 +52,15 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+  { label: '硬件使用率', value: 'usage' },
+  { label: '运行情况', value: 'runtime' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -64,16 +73,29 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmSecurityBox"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmSecurityBox"
+        :date-time-range="searchFields.dateTimeRange"
+      />
       <DeviceUsageHistoryDiagCard
+        v-if="selectedCards.includes('usage')"
         :ref="'deviceUsageHistoryDiagCardRef'"
         :station-code="stationCode"
         :ndm-device="ndmSecurityBox"
@@ -81,7 +103,13 @@ onMounted(() => {
         :cpu-usage-field="'stCommonInfo.CPU使用率'"
         :mem-usage-field="'stCommonInfo.内存使用率'"
       />
-      <SecurityBoxRuntimeHistoryDiagCard :ref="'securityBoxCircuitHistoryDiagCardRef'" :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
+      <SecurityBoxRuntimeHistoryDiagCard
+        v-if="selectedCards.includes('runtime')"
+        :ref="'securityBoxCircuitHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-security-box="ndmSecurityBox"
+        :date-time-range="searchFields.dateTimeRange"
+      />
     </NFlex>
   </NCard>
 </template>
diff --git a/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
index bab2a6e..f494581 100644
--- a/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmServerResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
@@ -43,6 +43,14 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+  { label: '硬件使用率', value: 'usage' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -55,16 +63,29 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmServer"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmServer"
+        :date-time-range="searchFields.dateTimeRange"
+      />
       <DeviceUsageHistoryDiagCard
+        v-if="selectedCards.includes('usage')"
         :ref="'deviceUsageHistoryDiagCardRef'"
         :station-code="stationCode"
         :ndm-device="ndmServer"
diff --git a/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue b/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
index 299c93a..ed56645 100644
--- a/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/switch-history-diag-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { NdmSwitchResultVO } from '@/apis/models';
 import dayjs from 'dayjs';
-import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
+import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue';
 
 import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
 import DeviceAlarmHistoryDiagCard from './device-alarm-history-diag-card.vue';
@@ -49,6 +49,15 @@ onMounted(() => {
   searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
   refreshData();
 });
+
+const diagCards = ref<SelectOption[]>([
+  { label: '设备状态', value: 'status' },
+  { label: '设备告警', value: 'alarm' },
+  { label: '硬件使用率', value: 'usage' },
+  { label: '端口状态', value: 'port' },
+]);
+
+const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
 </script>
 
 <template>
@@ -61,16 +70,29 @@ onMounted(() => {
               <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
             </NGi>
             <NGi :span="20">
-              <NSelect v-if="false" />
+              <NSelect v-model:value="selectedCards" multiple :options="diagCards" />
             </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" />
+      <DeviceStatusHistoryDiagCard
+        v-if="selectedCards.includes('status')"
+        :ref="'deviceStatusHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmSwitch"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+      <DeviceAlarmHistoryDiagCard
+        v-if="selectedCards.includes('alarm')"
+        :ref="'deviceAlarmHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-device="ndmSwitch"
+        :date-time-range="searchFields.dateTimeRange"
+      />
       <DeviceUsageHistoryDiagCard
+        v-if="selectedCards.includes('usage')"
         :ref="'deviceUsageHistoryDiagCardRef'"
         :station-code="stationCode"
         :ndm-device="ndmSwitch"
@@ -78,7 +100,13 @@ onMounted(() => {
         :cpu-usage-field="'cpuRatio'"
         :mem-usage-field="'memoryRatio'"
       />
-      <SwitchPortHistoryDiagCard :ref="'switchPortHistoryDiagCardRef'" :station-code="stationCode" :ndm-switch="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
+      <SwitchPortHistoryDiagCard
+        v-if="selectedCards.includes('port')"
+        :ref="'switchPortHistoryDiagCardRef'"
+        :station-code="stationCode"
+        :ndm-switch="ndmSwitch"
+        :date-time-range="searchFields.dateTimeRange"
+      />
     </NFlex>
   </NCard>
 </template>