80 lines
3.2 KiB
Vue
80 lines
3.2 KiB
Vue
<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 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';
|
|
|
|
const props = defineProps<{
|
|
stationCode: string;
|
|
ndmSwitch: NdmSwitchResultVO;
|
|
}>();
|
|
|
|
const { stationCode, ndmSwitch } = 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;
|
|
const deviceStatusHistoryDiagCardRef = useTemplateRef<DeviceStatusHistoryDiagCardInst>('deviceStatusHistoryDiagCardRef');
|
|
const deviceAlarmHistoryDiagCardRef = useTemplateRef<DeviceAlarmHistoryDiagCardInst>('deviceAlarmHistoryDiagCardRef');
|
|
const deviceUsageHistoryDiagCardRef = useTemplateRef<DeviceUsageHistoryDiagCardInst>('deviceUsageHistoryDiagCardRef');
|
|
|
|
function refreshData() {
|
|
deviceStatusHistoryDiagCardRef.value?.refresh();
|
|
deviceAlarmHistoryDiagCardRef.value?.refresh();
|
|
// deviceUsageHistoryDiagCardRef.value?.refresh();
|
|
}
|
|
|
|
const loading = computed(() => {
|
|
return deviceStatusHistoryDiagCardRef.value?.isPending || deviceAlarmHistoryDiagCardRef.value?.isPending || deviceUsageHistoryDiagCardRef.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();
|
|
});
|
|
</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="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
|
|
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
|
|
<DeviceUsageHistoryDiagCard
|
|
:ref="'deviceUsageHistoryDiagCardRef'"
|
|
:station-code="stationCode"
|
|
:ndm-device="ndmSwitch"
|
|
:date-time-range="searchFields.dateTimeRange"
|
|
:cpu-usage-field="'cpuRatio'"
|
|
:mem-usage-field="'memoryRatio'"
|
|
/>
|
|
</NFlex>
|
|
</NCard>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|