refactor: rename

2025-10-10 14:06:33 +08:00
parent 641cd96235
commit 849485f5b1
2 changed files with 2 additions and 2 deletions
--- a/src/components/device-page/device-card/history-diag-card/nvr-history-diag-card.vue
+++ b/src/components/device-page/device-card/history-diag-card/nvr-history-diag-card.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { NdmNvrResultVO } from '@/apis/models';
+import dayjs from 'dayjs';
+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';
+import DeviceUsageHistoryDiagCard from './device-usage-history-diag-card.vue';
+import NvrDiskHealthHistoryDiagCard from './nvr-disk-health-history-diag-card.vue';
+
+const props = defineProps<{
+  stationCode: string;
+  ndmNvr: NdmNvrResultVO;
+}>();
+
+const { stationCode, ndmNvr } = toRefs(props);
+
+const searchFields = reactive({
+  dateTimeRange: undefined as DatePickerProps['value'],
+});
+
+type DeviceStatusHistoryDiagCardInst = InstanceType<typeof DeviceStatusHistoryDiagCard> | null;
+type DeviceAlarmHistoryDiagCardInst = InstanceType<typeof DeviceAlarmHistoryDiagCard> | null;
+type DeviceUsageHistoryDiagCardInst = InstanceType<typeof DeviceUsageHistoryDiagCard> | null;
+type NvrDiskHealthHistoryCardInst = InstanceType<typeof NvrDiskHealthHistoryDiagCard> | null;
+const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
+const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
+const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
+const nvrDiskHealthHistoryCardRef = useTemplateRef<NvrDiskHealthHistoryCardInst>('nvrDiskHealthHistoryCardRef');
+
+function refreshData() {
+  deviceStatusHistoryDiagCardRef.value?.refresh();
+  deviceAlarmHistoryDiagCardRef.value?.refresh();
+  deviceUsageHistoryDiagCardRef.value?.refresh();
+  nvrDiskHealthHistoryCardRef.value?.refresh();
+}
+
+const loading = computed(() => {
+  return (
+    deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.value?.isPending || nvrDiskHealthHistoryCardRef.value?.isPending
+  );
+});
+
+onMounted(() => {
+  const now = dayjs();
+  const todayEnd = now.endOf('date');
+  const weekAgo = now.subtract(1, 'week').startOf('date');
+  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>
+  <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-model:value="selectedCards" multiple :options="diagCards" />
+            </NGi>
+          </NGrid>
+          <NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
+        </NFlex>
+      </NCard>
+
+      <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"
+        :date-time-range="searchFields.dateTimeRange"
+        :cpu-usage-field="'stCommonInfo.CPU使用率'"
+        :mem-usage-field="'stCommonInfo.内存使用率'"
+      />
+      <NvrDiskHealthHistoryDiagCard
+        v-if="selectedCards.includes('health')"
+        :ref="'nvrDiskHealthHistoryCardRef'"
+        :station-code="stationCode"
+        :ndm-nvr="ndmNvr"
+        :date-time-range="searchFields.dateTimeRange"
+      />
+    </NFlex>
+  </NCard>
+</template>
+
+<style scoped lang="scss"></style>