diff --git a/src/pages/vimp/components/alarm-tree.vue b/src/pages/vimp/components/alarm-tree.vue index 49ecffc..391542d 100644 --- a/src/pages/vimp/components/alarm-tree.vue +++ b/src/pages/vimp/components/alarm-tree.vue @@ -52,6 +52,9 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => { const alarmNodeStyle: CSSProperties = { opacity: alarmOnline() ? 1 : 0.5, cursor: alarmOnline() ? 'pointer' : 'not-allowed', + display: 'flex', + alignItems: 'center', + gap: '6px', }; return h( 'div', @@ -70,7 +73,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => { event.dataTransfer?.setData('name', alarm.name); }, }, - alarm.name, + [h(NIcon, () => h(SirenIcon)), h('span', alarm.name)], ); } @@ -78,11 +81,6 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => { return option.label; }; -const renderNodePrefix: TreeProps['renderPrefix'] = ({ option }) => { - if (!isAlarmNode(option)) return null; - return h(NIcon, () => h(SirenIcon)); -}; - const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => { if (isAlarmSiteNode(option)) { const { online, offline, total } = option.stats; @@ -119,7 +117,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => { virtual-scroll style="height: 100%" :render-label="renderNodeLabel" - :render-prefix="renderNodePrefix" :render-suffix="renderNodeSuffix" :override-default-node-click-behavior="overrideNodeClickBehavior" :default-expand-all="searchPattern.trim().length > 0" @@ -139,7 +136,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => { virtual-scroll style="height: 100%" :render-label="renderNodeLabel" - :render-prefix="renderNodePrefix" :render-suffix="renderNodeSuffix" :override-default-node-click-behavior="overrideNodeClickBehavior" :default-expand-all="false" diff --git a/src/pages/vimp/components/camera-tree.vue b/src/pages/vimp/components/camera-tree.vue index d1e1be9..97bc24e 100644 --- a/src/pages/vimp/components/camera-tree.vue +++ b/src/pages/vimp/components/camera-tree.vue @@ -54,7 +54,11 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => { const cameraNodeStyle: CSSProperties = { opacity: cameraOnline() ? 1 : 0.5, cursor: cameraOnline() ? 'pointer' : 'not-allowed', + display: 'flex', + alignItems: 'center', + gap: '6px', }; + const cameraIcon = option.type === '004' ? h(NIcon, () => h(PtzCamera)) : option.type === '005' ? h(NIcon, () => h(HemiPtzCamera)) : option.type === '006' ? h(NIcon, () => h(BulletCamera)) : null; return h( 'div', { @@ -72,7 +76,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => { event.dataTransfer?.setData('name', camera.name); }, }, - camera.name, + [cameraIcon, h('span', camera.name)], ); } @@ -80,16 +84,6 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => { return option.label; }; -const renderNodePrefix: TreeProps['renderPrefix'] = ({ option }) => { - if (!isCameraNode(option)) return null; - - if (option.type === '004') return h(NIcon, () => h(PtzCamera)); - if (option.type === '005') return h(NIcon, () => h(HemiPtzCamera)); - if (option.type === '006') return h(NIcon, () => h(BulletCamera)); - - return null; -}; - const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => { if (isCameraSiteNode(option)) { const { online, offline, total } = option.stats; @@ -126,7 +120,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => { virtual-scroll style="height: 100%" :render-label="renderNodeLabel" - :render-prefix="renderNodePrefix" :render-suffix="renderNodeSuffix" :override-default-node-click-behavior="overrideNodeClickBehavior" :default-expand-all="searchPattern.trim().length > 0" @@ -146,7 +139,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => { virtual-scroll style="height: 100%" :render-label="renderNodeLabel" - :render-prefix="renderNodePrefix" :render-suffix="renderNodeSuffix" :override-default-node-click-behavior="overrideNodeClickBehavior" :default-expand-all="false"