feat: history diag card (basically)

src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { NdmKeyboardResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+import { NButton, NCard, NDatePicker, NFlex, NGi, NGrid, NSelect } from 'naive-ui';
+import { computed, onMounted, reactive, toRefs, useTemplateRef } from 'vue';
+
+import DeviceStatusHistoryDiagCard from './device-status-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmKeyboard: NdmKeyboardResultVO;
+}>();
+
+const { stationCode, ndmKeyboard } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: [0, 0] as [number, number],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return deviceStatusHistoryDiagCardRef.value?.isPending;
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const seasonAgo = now.subtract(3, 'month').startOf('date');
+  searchFields.dateTimeRange = [seasonAgo.valueOf(), todayEnd.valueOf()];
+  refreshData();
+});
+</script>
+
+<template>
+  <NCard size="small">
+    <NFlex vertical>
+      <NCard size="small">
+        <NFlex justify="space-between" :wrap="false">
+          <NGrid :x-gap="8" :y-gap="8">
+            <NGi :span="20">
+              <NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
+            </NGi>
+            <NGi :span="20">
+              <NSelect v-if="false" />
+            </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" />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>