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

refactor: reorganize device card components

Browse Source
This commit is contained in:
yangsy
2025-09-03 14:56:33 +08:00
parent 58a9dea96d
commit 3e45bb212a
15 changed files with 64 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/device-page/camera-card.vue → src/components/device-page/device-card/camera-card.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts">
import type { NdmCameraResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmDecoderDiagInfo } from '@/apis/domains';
import type { NdmCameraResultVO } from '@/apis/models';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
const props = defineProps<{
stationCode: string;
@@ -32,7 +33,7 @@ const selectedTab = ref('设备状态');
<div v-if="false">{{ lastDiagInfo }}</div>
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
</NTabs>
</NCard>

0
src/components/device-page/device-common-card.vue → src/components/device-page/device-card/current-diag-card/device-common-card.vue
View File

2
src/components/device-page/device-hardware-card.vue → src/components/device-page/device-card/current-diag-card/device-hardware-card.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
import { TimeOutline, HardwareChipOutline, ServerOutline, FolderOutline } from '@vicons/ionicons5';
import { NCard, NProgress, NFlex, NText, NIcon, type ProgressStatus } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{

0
src/components/device-page/device-header-card.vue → src/components/device-page/device-card/current-diag-card/device-header-card.vue
View File

2
src/components/device-page/nvr-disk-card.vue → src/components/device-page/device-card/current-diag-card/nvr-disk-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo } from '@/apis/domains';
import { NCard, NFlex, NProgress, NText, NIcon, NPopover, NGrid, NGridItem } from 'naive-ui';
import { HardwareChipOutline, CheckmarkCircleOutline, CloseCircleOutline, WarningOutline } from '@vicons/ionicons5';
import { NCard, NFlex, NProgress, NText, NIcon, NPopover, NGrid, NGridItem } from 'naive-ui';
import { computed, toRefs } from 'vue';
const props = defineProps<{

4
src/components/device-page/nvr-record-diag-card.vue → src/components/device-page/device-card/current-diag-card/nvr-record-diag-card.vue
View File

@@ -71,11 +71,11 @@ const filterLostRecordList = (recordCheckRawData: any): NvrRecordDiag[] => {
<script setup lang="ts">
import type { ClientChannel, NdmNvrResultVO, NdmRecordCheck } from '@/apis/models';
import { getChannelList as getChannelListApi, getRecordCheckByParentId as getRecordCheckByParentIdApi, reloadAllRecordCheck as reloadAllRecordCheckApi } from '@/apis/requests';
import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm } from 'naive-ui';
import { VideocamOutline, TimeOutline, WarningOutline, CheckmarkCircleOutline, RefreshOutline } from '@vicons/ionicons5';
import { computed, onMounted, ref, toRefs } from 'vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import { NCard, NFlex, NText, NTag, NTimeline, NTimelineItem, NIcon, NEmpty, NStatistic, NGrid, NGridItem, NCollapse, NCollapseItem, NButton, NPopconfirm } from 'naive-ui';
import { computed, onMounted, ref, toRefs } from 'vue';
dayjs.extend(duration);

0
src/components/device-page/box-circuit-card.vue → src/components/device-page/device-card/current-diag-card/security-box-circuit-card.vue
View File

0
src/components/device-page/box-info-card.vue → src/components/device-page/device-card/current-diag-card/security-box-info-card.vue
View File

7
src/components/device-page/switch-port-card.vue → src/components/device-page/device-card/current-diag-card/switch-port-card.vue
View File

@@ -63,16 +63,9 @@ const transformPortSpeed = (portInfo: NdmSwitchPortInfo, type: 'in' | 'out' | 't
* - 响应式数据处理和布局
*/
// 类型定义导入
import type { NdmSwitchPortInfo } from '@/apis/domains';
// 常量导入
import { JAVA_UNSIGNED_INTEGER_MAX_VALUE, NDM_SWITCH_PROBE_INTERVAL } from '@/constants';
// NaiveUI 组件导入
import { NCard, NGrid, NGridItem, NPopover } from 'naive-ui';
// Vue 3 响应式 API
import { computed, toRefs } from 'vue';
/**

17
src/components/device-page/decoder-card.vue → src/components/device-page/device-card/decoder-card.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import type { NdmDecoderResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmDecoderDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceCommonCard from './device-common-card.vue';
import type { NdmDecoderResultVO } from '@/apis/models';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
const props = defineProps<{
stationCode: string;
@@ -48,7 +49,7 @@ const selectedTab = ref('设备状态');
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmDecoder, lastDiagInfo } }}</pre>

7
src/components/device-page/keyboard-card.vue → src/components/device-page/device-card/keyboard-card.vue
View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis/models';
import { ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
const props = defineProps<{
stationCode: string;
@@ -22,7 +23,7 @@ const selectedTab = ref('设备状态');
<DeviceHeaderCard :device="ndmKeyboard" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
</NTabs>
</NCard>

24
src/components/device-page/nvr-card.vue → src/components/device-page/device-card/nvr-card.vue
View File

@@ -1,14 +1,16 @@
<script setup lang="ts">
import type { NdmNvrResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmNvrDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceCommonCard from './device-common-card.vue';
import NvrDiskCard from './nvr-disk-card.vue';
import NvrRecordDiagCard from './nvr-record-diag-card.vue';
import type { NdmNvrResultVO } from '@/apis/models';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import NvrDiskCard from './current-diag-card/nvr-disk-card.vue';
import NvrRecordDiagCard from './current-diag-card/nvr-record-diag-card.vue';
import NvrDiagHistoryCard from './history-diag-card/nvr-diag-history-card.vue';
const props = defineProps<{
stationCode: string;
@@ -63,7 +65,9 @@ const selectedTab = ref('设备状态');
<NvrRecordDiagCard v-if="isCluster" :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="历史诊断" tab="历史诊断">
<NvrDiagHistoryCard :station-code="stationCode" :ndm-nvr="ndmNvr" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>

25
src/components/device-page/security-box-card.vue → src/components/device-page/device-card/security-box-card.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
import type { NdmDecoderResultVO, NdmNvrResultVO, NdmSecurityBoxResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import type { NdmSecurityBoxDiagInfo } from '@/apis/domains';
import type { NdmSecurityBoxResultVO } from '@/apis/models';
import { destr } from 'destr';
import type { NdmDecoderDiagInfo, NdmNvrDiagInfo, NdmSecurityBoxDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceCommonCard from './device-common-card.vue';
import BoxInfoCard from './box-info-card.vue';
import BoxCircuitCard from './box-circuit-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceCommonCard from './current-diag-card/device-common-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import SecurityBoxInfoCard from './current-diag-card/security-box-info-card.vue';
import SecurityBoxCircuitCard from './current-diag-card/security-box-circuit-card.vue';
const props = defineProps<{
stationCode: string;
@@ -55,11 +56,11 @@ const selectedTab = ref('设备状态');
<DeviceHeaderCard :device="ndmSecurityBox" />
<DeviceCommonCard :common-info="commonInfo" />
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" />
<BoxInfoCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
<BoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
<SecurityBoxInfoCard :fan-speeds="fanSpeeds" :temperature="temperature" :humidity="humidity" :switches="switches" />
<SecurityBoxCircuitCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :circuits="circuits" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="诊断历史" tab="诊断历史"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>

7
src/components/device-page/server-card.vue → src/components/device-page/device-card/server-card.vue
View File

@@ -4,8 +4,9 @@ import type { NdmServerResultVO } from '@/apis/models';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import DeviceHardwareCard from './device-hardware-card.vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
const props = defineProps<{
stationCode: string;
@@ -38,7 +39,7 @@ const selectedTab = ref('设备状态');
<DeviceHardwareCard :cpu-usage="cpuUsage" :mem-usage="memUsage" :disk-usage="diskUsage" :running-time="runningTime" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmServer, lastDiagInfo } }}</pre>

17
src/components/device-page/switch-card.vue → src/components/device-page/device-card/switch-card.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import type { NdmSwitchResultVO } from '@/apis/models';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './device-header-card.vue';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { destr } from 'destr';
import type { NdmSwitchDiagInfo } from '@/apis/domains';
import DeviceHardwareCard from './device-hardware-card.vue';
import SwitchPortCard from './switch-port-card.vue';
import type { NdmSwitchResultVO } from '@/apis/models';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import DeviceHeaderCard from './current-diag-card/device-header-card.vue';
import DeviceHardwareCard from './current-diag-card/device-hardware-card.vue';
import SwitchPortCard from './current-diag-card/switch-port-card.vue';
const props = defineProps<{
stationCode: string;
@@ -40,7 +41,7 @@ const selectedTab = ref('设备状态');
<SwitchPortCard :port-info-list="portInfoList" />
</NFlex>
</NTabPane>
<NTabPane name="诊断记录" tab="诊断记录"></NTabPane>
<NTabPane name="历史诊断" tab="历史诊断"></NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<!-- <NTabPane name="原始数据" tab="原始数据">
<pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>