feat: select diag cards to show

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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" />
+      <DeviceStatusHistoryDiagCard
-      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmCamera" :date-time-range="searchFields.dateTimeRange" />
+        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>

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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" />
+      <DeviceStatusHistoryDiagCard
-      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmDecoder" :date-time-range="searchFields.dateTimeRange" />
+        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"

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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>

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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" />
+      <DeviceStatusHistoryDiagCard
-      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
+        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>

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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" />
+      <DeviceStatusHistoryDiagCard
-      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
+        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>

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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" />
+      <DeviceStatusHistoryDiagCard
-      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmServer" :date-time-range="searchFields.dateTimeRange" />
+        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"

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 { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect, type DatePickerProps, type SelectOption } from 'naive-ui';
-import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+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" />
+      <DeviceStatusHistoryDiagCard
-      <DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
+        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>