feat: select diag cards to show

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>