yangsy
115 lines
4.1 KiB
Vue
115 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import type { NdmNvrResultVO, Station } from '@/apis';
|
|
import {
|
|
DeviceAlarmHistoryCard,
|
|
DeviceIcmpHistoryCard,
|
|
DeviceUsageHistoryCard,
|
|
HistoryDiagFilterCard,
|
|
NvrDiskHistoryCard,
|
|
type DeviceAlarmHistoryCardProps,
|
|
type DeviceIcmpHistoryCardProps,
|
|
type DeviceUsageHistoryCardProps,
|
|
type NvrDiskHistoryCardProps,
|
|
} from '@/components';
|
|
import { isNvrCluster } from '@/helpers';
|
|
import dayjs from 'dayjs';
|
|
import { NFlex, type SelectOption } from 'naive-ui';
|
|
import { computed, onMounted, ref, toRefs, watch } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
ndmDevice: NdmNvrResultVO;
|
|
station: Station;
|
|
}>();
|
|
|
|
const { ndmDevice, station } = toRefs(props);
|
|
|
|
const historyDiagOptions = computed<SelectOption[]>(() => {
|
|
const options: SelectOption[] = [
|
|
{ label: '设备状态', value: 'icmp' },
|
|
{ label: '设备告警', value: 'alarm' },
|
|
];
|
|
if (isNvrCluster(ndmDevice.value)) return options;
|
|
return [...options, { label: '硬件占用', value: 'usage' }, { label: '磁盘健康', value: 'disk' }];
|
|
});
|
|
const getWeekRange = (): [number, number] => {
|
|
const now = dayjs();
|
|
const todayEnd = now.endOf('date');
|
|
const weekAgo = now.subtract(1, 'week').startOf('date');
|
|
return [weekAgo.valueOf(), todayEnd.valueOf()];
|
|
};
|
|
const range = ref<[number, number]>(getWeekRange());
|
|
const selected = ref([...historyDiagOptions.value.map((option) => `${option.value}`)]);
|
|
const loading = ref<boolean>(false);
|
|
const icmpLoading = ref<boolean>(false);
|
|
const alarmLoading = ref<boolean>(false);
|
|
const usageLoading = ref<boolean>(false);
|
|
const diskLoading = ref<boolean>(false);
|
|
watch([icmpLoading, alarmLoading, usageLoading, diskLoading], (loadings) => {
|
|
loading.value = loadings.some((loading) => loading);
|
|
});
|
|
const icmpHistoryQueryFn = ref<() => void>();
|
|
const onExposeIcmpHistoryQueryFn: DeviceIcmpHistoryCardProps['onExposeQueryFn'] = (queryFn) => {
|
|
icmpHistoryQueryFn.value = queryFn;
|
|
};
|
|
const alarmHistoryQueryFn = ref<() => void>();
|
|
const onExposeAlarmHistoryQueryFn: DeviceAlarmHistoryCardProps['onExposeQueryFn'] = (queryFn) => {
|
|
alarmHistoryQueryFn.value = queryFn;
|
|
};
|
|
const usageHistoryQueryFn = ref<() => void>();
|
|
const onExposeUsageHistoryQueryFn: DeviceUsageHistoryCardProps['onExposeQueryFn'] = (queryFn) => {
|
|
usageHistoryQueryFn.value = queryFn;
|
|
};
|
|
const diskHistoryQueryFn = ref<() => void>();
|
|
const onExposeDiskHistoryQueryFn: NvrDiskHistoryCardProps['onExposeQueryFn'] = (queryFn) => {
|
|
diskHistoryQueryFn.value = queryFn;
|
|
};
|
|
const queryData = () => {
|
|
if (selected.value.includes('icmp')) icmpHistoryQueryFn.value?.();
|
|
if (selected.value.includes('alarm')) alarmHistoryQueryFn.value?.();
|
|
if (selected.value.includes('usage')) usageHistoryQueryFn.value?.();
|
|
if (selected.value.includes('disk')) diskHistoryQueryFn.value?.();
|
|
};
|
|
const onQuery = () => {
|
|
queryData();
|
|
};
|
|
|
|
onMounted(() => {
|
|
queryData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<NFlex vertical>
|
|
<HistoryDiagFilterCard :options="historyDiagOptions" v-model:loading="loading" v-model:range="range" v-model:selected="selected" @query="onQuery" />
|
|
<DeviceIcmpHistoryCard
|
|
v-if="selected.includes('icmp')"
|
|
:ndm-device="ndmDevice"
|
|
:station="station"
|
|
v-model:range="range"
|
|
v-model:loading="icmpLoading"
|
|
@expose-query-fn="onExposeIcmpHistoryQueryFn"
|
|
/>
|
|
<DeviceAlarmHistoryCard
|
|
v-if="selected.includes('alarm')"
|
|
:ndm-device="ndmDevice"
|
|
:station="station"
|
|
v-model:range="range"
|
|
v-model:loading="alarmLoading"
|
|
@expose-query-fn="onExposeAlarmHistoryQueryFn"
|
|
/>
|
|
<DeviceUsageHistoryCard
|
|
v-if="selected.includes('usage')"
|
|
:ndm-device="ndmDevice"
|
|
:station="station"
|
|
:cpu-usage-field="'stCommonInfo.CPU使用率'"
|
|
:mem-usage-field="'stCommonInfo.内存使用率'"
|
|
v-model:range="range"
|
|
v-model:loading="usageLoading"
|
|
@expose-query-fn="onExposeUsageHistoryQueryFn"
|
|
/>
|
|
<NvrDiskHistoryCard v-if="selected.includes('disk')" :ndm-device="ndmDevice" :station="station" v-model:range="range" v-model:loading="diskLoading" @expose-query-fn="onExposeDiskHistoryQueryFn" />
|
|
</NFlex>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|