skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: select diag cards to show

Browse Source
This commit is contained in:
yangsy
2025-09-28 14:35:11 +08:00
parent 7497bb5d56
commit 9c0ade08a4
7 changed files with 192 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/device-page/device-card/history-diag-card/security-box-history-diag-card.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { NdmSecurityBoxResultVO } 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 { 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';
@@ -52,6 +52,15 @@ onMounted(() => {
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
const diagCards = ref<SelectOption[]>([
{ label: '设备状态', value: 'status' },
{ label: '设备告警', value: 'alarm' },
{ label: '硬件使用率', value: 'usage' },
{ label: '运行情况', value: 'runtime' },
]);
const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>
<template>
@@ -64,16 +73,29 @@ onMounted(() => {
<NDatePicker v-model:value="searchFields.dateTimeRange" type="datetimerange" />
</NGi>
<NGi :span="20">
<NSelect v-if="false" />
<NSelect v-model:value="selectedCards" multiple :options="diagCards" />
</NGi>
</NGrid>
<NButton secondary :loading="loading" @click="refreshData">刷新数据</NButton>
</NFlex>
</NCard>
<DeviceStatusHistoryDiagCard :ref="'deviceStatusHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
<DeviceStatusHistoryDiagCard
v-if="selectedCards.includes('status')"
:ref="'deviceStatusHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmSecurityBox"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceAlarmHistoryDiagCard
v-if="selectedCards.includes('alarm')"
:ref="'deviceAlarmHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmSecurityBox"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceUsageHistoryDiagCard
v-if="selectedCards.includes('usage')"
:ref="'deviceUsageHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmSecurityBox"
@@ -81,7 +103,13 @@ onMounted(() => {
:cpu-usage-field="'stCommonInfo.CPU使用率'"
:mem-usage-field="'stCommonInfo.内存使用率'"
/>
<SecurityBoxRuntimeHistoryDiagCard :ref="'securityBoxCircuitHistoryDiagCardRef'" :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :date-time-range="searchFields.dateTimeRange" />
<SecurityBoxRuntimeHistoryDiagCard
v-if="selectedCards.includes('runtime')"
:ref="'securityBoxCircuitHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-security-box="ndmSecurityBox"
:date-time-range="searchFields.dateTimeRange"
/>
</NFlex>
</NCard>
</template>