37781216b2
- 优化 `车站-设备-告警` 轮询机制 - 改进设备卡片的布局 - 支持修改设备 - 告警轮询中获取完整告警数据 - 车站告警详情支持导出完整的 `今日告警列表` - 支持将状态持久化到 `IndexedDB` - 新增轮询控制 (调试模式) - 新增离线开发模式 (调试模式) - 新增 `IndexedDB` 数据控制 (调试模式)
101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type { NdmDecoderResultVO, Station } from '@/apis';
|
|
import {
|
|
DeviceAlarmHistoryCard,
|
|
DeviceIcmpHistoryCard,
|
|
DeviceUsageHistoryCard,
|
|
HistoryDiagFilterCard,
|
|
type DeviceAlarmHistoryCardProps,
|
|
type DeviceIcmpHistoryCardProps,
|
|
type DeviceUsageHistoryCardProps,
|
|
} from '@/components';
|
|
import dayjs from 'dayjs';
|
|
import { NFlex, type SelectOption } from 'naive-ui';
|
|
import { onMounted, ref, toRefs, watch } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
ndmDevice: NdmDecoderResultVO;
|
|
station: Station;
|
|
}>();
|
|
|
|
const { ndmDevice, station } = toRefs(props);
|
|
|
|
const historyDiagOptions: SelectOption[] = [
|
|
{ label: '设备状态', value: 'icmp' },
|
|
{ label: '设备告警', value: 'alarm' },
|
|
{ label: '硬件占用', value: 'usage' },
|
|
];
|
|
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.map((option) => `${option.value}`)]);
|
|
const loading = ref<boolean>(false);
|
|
const icmpLoading = ref<boolean>(false);
|
|
const alarmLoading = ref<boolean>(false);
|
|
watch([icmpLoading, alarmLoading], (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 queryData = () => {
|
|
if (selected.value.includes('icmp')) icmpHistoryQueryFn.value?.();
|
|
if (selected.value.includes('alarm')) alarmHistoryQueryFn.value?.();
|
|
if (selected.value.includes('usage')) usageHistoryQueryFn.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="alarmLoading"
|
|
@expose-query-fn="onExposeUsageHistoryQueryFn"
|
|
/>
|
|
</NFlex>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|