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

style: device tree

Browse Source
This commit is contained in:
yangsy
2025-09-26 14:00:10 +08:00
parent 33a8ff725e
commit 24a202ee55
1 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/device-page/device-tree.vue
View File

@@ -14,9 +14,27 @@ import type { NdmDeviceResultVO, NdmNvrResultVO } from '@/apis/models';
import type { LineDevices } from '@/composables/query'; import type { LineDevices } from '@/composables/query';
import { DeviceType, DeviceTypeName, getDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums/device-type'; import { DeviceType, DeviceTypeName, getDeviceTypeVal, type DeviceTypeKey, type DeviceTypeVal } from '@/enums/device-type';
import { destr } from 'destr'; import { destr } from 'destr';
import { NButton, NFlex, NInput, NRadio, NRadioGroup, NTab, NTabs, NTag, NTree, type TagProps, type TreeInst, type TreeOption, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui'; import {
NButton,
NFlex,
NInput,
NRadio,
NRadioGroup,
NTab,
NTabs,
NTag,
NTree,
useThemeVars,
type TagProps,
type TreeInst,
type TreeOption,
type TreeOverrideNodeClickBehavior,
type TreeProps,
} from 'naive-ui';
import { computed, h, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue'; import { computed, h, ref, toRefs, useTemplateRef, watch, type CSSProperties } from 'vue';
const themeVars = useThemeVars();
const props = defineProps<{ const props = defineProps<{
stationList: Station[]; stationList: Station[];
lineDevices: LineDevices; lineDevices: LineDevices;
@@ -140,9 +158,11 @@ const renderStationNodePrefix = (station: Station) => {
const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string) => { const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string) => {
const renderDeviceStatusTag = (device: NdmDeviceResultVO) => { const renderDeviceStatusTag = (device: NdmDeviceResultVO) => {
const { deviceStatus } = device; const { deviceStatus } = device;
const tagType: TagProps['type'] = deviceStatus === '10' ? 'success' : deviceStatus === '20' ? 'error' : 'warning'; // const tagType: TagProps['type'] = deviceStatus === '10' ? 'success' : deviceStatus === '20' ? 'error' : 'warning';
const tagText = device.deviceStatus === '10' ? '在线' : device.deviceStatus === '20' ? '离线' : '未知'; // const tagText = device.deviceStatus === '10' ? '在线' : device.deviceStatus === '20' ? '离线' : '未知';
return h(NTag, { type: tagType, size: 'tiny' }, () => tagText); // return h(NTag, { type: tagType, bordered: false, size: 'tiny' }, { default: () => '◉' }); // ⁕∘∙⋅﹒▪●
const color = deviceStatus === '10' ? themeVars.value.successColor : deviceStatus === '20' ? themeVars.value.errorColor : themeVars.value.warningColor;
return h('div', { style: { color } }, { default: () => '◉' }); // ⁕∘∙⋅﹒▪●
}; };
const renderViewDeviceButton = (device: NdmDeviceResultVO, stationCode: string) => { const renderViewDeviceButton = (device: NdmDeviceResultVO, stationCode: string) => {
return h( return h(