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

refactor: extract DeviceRenderer

Browse Source
This commit is contained in:
yangsy
2025-09-03 13:07:01 +08:00
parent 9bf8229bf6
commit bd9ddf2473
2 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/device-page/device-renderer.vue Normal file
View File

@@ -0,0 +1,48 @@
<script setup lang="ts">
import type { NdmDeviceResultVO } from '@/apis/models';
import { DeviceType, getDeviceTypeVal, type DeviceTypeVal } from '@/enums/device-type';
import { computed, toRefs } from 'vue';
import CameraCard from './device-card/camera-card.vue';
import DecoderCard from './device-card/decoder-card.vue';
import KeyboardCard from './device-card/keyboard-card.vue';
import NvrCard from './device-card/nvr-card.vue';
import SecurityBoxCard from './device-card/security-box-card.vue';
import ServerCard from './device-card/server-card.vue';
import SwitchCard from './device-card/switch-card.vue';
const props = defineProps<{
stationCode: string;
device: NdmDeviceResultVO;
}>();
const { stationCode, device } = toRefs(props);
const deviceTypeVal = computed(() => getDeviceTypeVal(device.value.deviceType));
</script>
<template>
<template v-if="deviceTypeVal === DeviceType.Camera">
<CameraCard :station-code="stationCode" :ndm-camera="device" />
</template>
<template v-if="deviceTypeVal === DeviceType.Decoder">
<DecoderCard :station-code="stationCode" :ndm-decoder="device" />
</template>
<template v-if="deviceTypeVal === DeviceType.Keyboard">
<KeyboardCard :station-code="stationCode" :ndm-keyboard="device" />
</template>
<template v-if="deviceTypeVal === DeviceType.Nvr">
<NvrCard :station-code="stationCode" :ndm-nvr="device" />
</template>
<template v-if="deviceTypeVal === DeviceType.SecurityBox">
<SecurityBoxCard :station-code="stationCode" :ndm-security-box="device" />
</template>
<template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(deviceTypeVal)">
<ServerCard :station-code="stationCode" :ndm-server="device" />
</template>
<template v-if="deviceTypeVal === DeviceType.Switch">
<SwitchCard :station-code="stationCode" :ndm-switch="device" />
</template>
</template>
<style scoped lang="scss"></style>

38
src/pages/device-page.vue
View File

@@ -1,15 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import CameraCard from '@/components/device-page/camera-card.vue';
import DecoderCard from '@/components/device-page/decoder-card.vue';
import DeviceTree from '@/components/device-page/device-tree.vue';
import KeyboardCard from '@/components/device-page/keyboard-card.vue';
import NvrCard from '@/components/device-page/nvr-card.vue';
import SecurityBoxCard from '@/components/device-page/security-box-card.vue';
import ServerCard from '@/components/device-page/server-card.vue';
import SwitchCard from '@/components/device-page/switch-card.vue';
import { useDeviceSelection } from '@/composables/device'; import { useDeviceSelection } from '@/composables/device';
import { useLineDevicesQuery } from '@/composables/query'; import { useLineDevicesQuery } from '@/composables/query';
import { DeviceType, type DeviceTypeVal } from '@/enums/device-type';
import { useLineDevicesStore } from '@/stores/line-devices'; import { useLineDevicesStore } from '@/stores/line-devices';
import { useStationStore } from '@/stores/station'; import { useStationStore } from '@/stores/station';
import { ChevronBack } from '@vicons/ionicons5'; import { ChevronBack } from '@vicons/ionicons5';
@@ -18,6 +9,9 @@ import { storeToRefs } from 'pinia';
import { onMounted, watch } from 'vue'; import { onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import DeviceTree from '@/components/device-page/device-tree.vue';
import DeviceRenderer from '@/components/device-page/device-renderer.vue';
// 数据获取 // 数据获取
const { isFetching: lineDevicesFetching } = useLineDevicesQuery(); const { isFetching: lineDevicesFetching } = useLineDevicesQuery();
const stationStore = useStationStore(); const stationStore = useStationStore();
@@ -89,31 +83,11 @@ watch(
</NPageHeader> </NPageHeader>
</div> </div>
<div style="flex: 1 1 auto; min-height: 0; padding-left: 24px"> <div style="flex: 1 1 auto; min-height: 0">
<!-- 内容区域 --> <!-- 内容区域 -->
<template v-if="selectedDevice && selectedStationCode"> <template v-if="selectedDevice && selectedStationCode">
<NScrollbar x-scrollable style="height: 100%; padding-right: 24px"> <NScrollbar x-scrollable style="height: 100%" :content-style="{ 'padding-right': '24px' }">
<template v-if="selectedDeviceType === DeviceType.Camera"> <DeviceRenderer :station-code="selectedStationCode" :device="selectedDevice" />
<CameraCard :station-code="selectedStationCode" :ndm-camera="selectedDevice" />
</template>
<template v-if="selectedDeviceType === DeviceType.Decoder">
<DecoderCard :station-code="selectedStationCode" :ndm-decoder="selectedDevice" />
</template>
<template v-if="selectedDeviceType === DeviceType.Keyboard">
<KeyboardCard :station-code="selectedStationCode" :ndm-keyboard="selectedDevice" />
</template>
<template v-if="selectedDeviceType === DeviceType.Nvr">
<NvrCard :station-code="selectedStationCode" :ndm-nvr="selectedDevice" />
</template>
<template v-if="selectedDeviceType === DeviceType.SecurityBox">
<SecurityBoxCard :station-code="selectedStationCode" :ndm-security-box="selectedDevice" />
</template>
<template v-if="([DeviceType.MediaServer, DeviceType.VideoServer] as DeviceTypeVal[]).includes(selectedDeviceType)">
<ServerCard :station-code="selectedStationCode" :ndm-server="selectedDevice" />
</template>
<template v-if="selectedDeviceType === DeviceType.Switch">
<SwitchCard :station-code="selectedStationCode" :ndm-switch="selectedDevice" />
</template>
</NScrollbar> </NScrollbar>
</template> </template>
<template v-else> <template v-else>