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

29
src/components/device-page/device-card/history-diag-card/camera-history-diag-card.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { NdmCameraResultVO } 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';
@@ -39,6 +39,13 @@ onMounted(() => {
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
const diagCards = ref<SelectOption[]>([
{ label: '设备状态', value: 'status' },
{ label: '设备告警', value: 'alarm' },
]);
const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>
<template>
@@ -51,15 +58,27 @@ 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="ndmCamera" :date-time-range="searchFields.dateTimeRange" />
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmCamera" :date-time-range="searchFields.dateTimeRange" />
<DeviceStatusHistoryDiagCard
v-if="selectedCards.includes('status')"
:ref="'deviceStatusHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmCamera"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceAlarmHistoryDiagCard
v-if="selectedCards.includes('alarm')"
:ref="'deviceAlarmHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmCamera"
:date-time-range="searchFields.dateTimeRange"
/>
</NFlex>
</NCard>
</template>

31
src/components/device-page/device-card/history-diag-card/decoder-history-diag-card.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { NdmDecoderResultVO } 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';
@@ -43,6 +43,14 @@ onMounted(() => {
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
const diagCards = ref<SelectOption[]>([
{ label: '设备状态', value: 'status' },
{ label: '设备告警', value: 'alarm' },
{ label: '硬件使用率', value: 'usage' },
]);
const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>
<template>
@@ -55,16 +63,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="ndmDecoder" :date-time-range="searchFields.dateTimeRange" />
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmDecoder" :date-time-range="searchFields.dateTimeRange" />
<DeviceStatusHistoryDiagCard
v-if="selectedCards.includes('status')"
:ref="'deviceStatusHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmDecoder"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceAlarmHistoryDiagCard
v-if="selectedCards.includes('alarm')"
:ref="'deviceAlarmHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmDecoder"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceUsageHistoryDiagCard
v-if="selectedCards.includes('usage')"
:ref="'deviceUsageHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmDecoder"

18
src/components/device-page/device-card/history-diag-card/keyboard-history-diag-card.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } 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';
@@ -35,6 +35,10 @@ onMounted(() => {
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
const diagCards = ref<SelectOption[]>([{ label: '设备状态', value: 'status' }]);
const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>
<template>
@@ -47,14 +51,20 @@ 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="ndmKeyboard" :date-time-range="searchFields.dateTimeRange" />
<DeviceStatusHistoryDiagCard
v-if="selectedCards.includes('status')"
:ref="'deviceStatusHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmKeyboard"
:date-time-range="searchFields.dateTimeRange"
/>
</NFlex>
</NCard>
</template>

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

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { NdmNvrResultVO } 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';
@@ -49,6 +49,15 @@ onMounted(() => {
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>
@@ -61,16 +70,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="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
<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"
@@ -78,7 +100,13 @@ onMounted(() => {
:cpu-usage-field="'stCommonInfo.CPU使用率'"
:mem-usage-field="'stCommonInfo.内存使用率'"
/>
<NvrDiskHealthHistoryDiagCard :ref="'nvrDiskHealthHistoryCardRef'" :station-code="stationCode" :ndm-nvr="ndmNvr" :date-time-range="searchFields.dateTimeRange" />
<NvrDiskHealthHistoryDiagCard
v-if="selectedCards.includes('health')"
:ref="'nvrDiskHealthHistoryCardRef'"
:station-code="stationCode"
:ndm-nvr="ndmNvr"
:date-time-range="searchFields.dateTimeRange"
/>
</NFlex>
</NCard>
</template>

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>

31
src/components/device-page/device-card/history-diag-card/server-history-diag-card.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { NdmServerResultVO } 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';
@@ -43,6 +43,14 @@ onMounted(() => {
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
const diagCards = ref<SelectOption[]>([
{ label: '设备状态', value: 'status' },
{ label: '设备告警', value: 'alarm' },
{ label: '硬件使用率', value: 'usage' },
]);
const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>
<template>
@@ -55,16 +63,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="ndmServer" :date-time-range="searchFields.dateTimeRange" />
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmServer" :date-time-range="searchFields.dateTimeRange" />
<DeviceStatusHistoryDiagCard
v-if="selectedCards.includes('status')"
:ref="'deviceStatusHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmServer"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceAlarmHistoryDiagCard
v-if="selectedCards.includes('alarm')"
:ref="'deviceAlarmHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmServer"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceUsageHistoryDiagCard
v-if="selectedCards.includes('usage')"
:ref="'deviceUsageHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmServer"

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

@@ -1,8 +1,8 @@
<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 { 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';
@@ -49,6 +49,15 @@ onMounted(() => {
searchFields.dateTimeRange = [weekAgo.valueOf(), todayEnd.valueOf()];
refreshData();
});
const diagCards = ref<SelectOption[]>([
{ label: '设备状态', value: 'status' },
{ label: '设备告警', value: 'alarm' },
{ label: '硬件使用率', value: 'usage' },
{ label: '端口状态', value: 'port' },
]);
const selectedCards = ref<string[]>([...diagCards.value.map((option) => `${option.value ?? ''}`)]);
</script>
<template>
@@ -61,16 +70,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="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
<DeviceAlarmHistoryDiagCard :ref="'deviceAlarmHistoryDiagCardRef'" :station-code="stationCode" :ndm-device="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
<DeviceStatusHistoryDiagCard
v-if="selectedCards.includes('status')"
:ref="'deviceStatusHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmSwitch"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceAlarmHistoryDiagCard
v-if="selectedCards.includes('alarm')"
:ref="'deviceAlarmHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmSwitch"
:date-time-range="searchFields.dateTimeRange"
/>
<DeviceUsageHistoryDiagCard
v-if="selectedCards.includes('usage')"
:ref="'deviceUsageHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-device="ndmSwitch"
@@ -78,7 +100,13 @@ onMounted(() => {
:cpu-usage-field="'cpuRatio'"
:mem-usage-field="'memoryRatio'"
/>
<SwitchPortHistoryDiagCard :ref="'switchPortHistoryDiagCardRef'" :station-code="stationCode" :ndm-switch="ndmSwitch" :date-time-range="searchFields.dateTimeRange" />
<SwitchPortHistoryDiagCard
v-if="selectedCards.includes('port')"
:ref="'switchPortHistoryDiagCardRef'"
:station-code="stationCode"
:ndm-switch="ndmSwitch"
:date-time-range="searchFields.dateTimeRange"
/>
</NFlex>
</NCard>
</template>