refactor(alarm-tree, camera-tree): 整合节点图标到标签并优化渲染逻辑
为树形节点标签添加弹性布局以正确对齐图标与文字,将图标渲染逻辑从单独的前缀函数整合到标签渲染函数中,为摄像机树形组件新增按类型匹配对应图标的逻辑,并移除了冗余的前缀渲染属性与函数
This commit is contained in:
@@ -52,6 +52,9 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
|
|||||||
const alarmNodeStyle: CSSProperties = {
|
const alarmNodeStyle: CSSProperties = {
|
||||||
opacity: alarmOnline() ? 1 : 0.5,
|
opacity: alarmOnline() ? 1 : 0.5,
|
||||||
cursor: alarmOnline() ? 'pointer' : 'not-allowed',
|
cursor: alarmOnline() ? 'pointer' : 'not-allowed',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '6px',
|
||||||
};
|
};
|
||||||
return h(
|
return h(
|
||||||
'div',
|
'div',
|
||||||
@@ -70,7 +73,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
|
|||||||
event.dataTransfer?.setData('name', alarm.name);
|
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;
|
return option.label;
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderNodePrefix: TreeProps['renderPrefix'] = ({ option }) => {
|
|
||||||
if (!isAlarmNode(option)) return null;
|
|
||||||
return h(NIcon, () => h(SirenIcon));
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
|
const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
|
||||||
if (isAlarmSiteNode(option)) {
|
if (isAlarmSiteNode(option)) {
|
||||||
const { online, offline, total } = option.stats;
|
const { online, offline, total } = option.stats;
|
||||||
@@ -119,7 +117,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
|
|||||||
virtual-scroll
|
virtual-scroll
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
:render-label="renderNodeLabel"
|
:render-label="renderNodeLabel"
|
||||||
:render-prefix="renderNodePrefix"
|
|
||||||
:render-suffix="renderNodeSuffix"
|
:render-suffix="renderNodeSuffix"
|
||||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||||
:default-expand-all="searchPattern.trim().length > 0"
|
:default-expand-all="searchPattern.trim().length > 0"
|
||||||
@@ -139,7 +136,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
|
|||||||
virtual-scroll
|
virtual-scroll
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
:render-label="renderNodeLabel"
|
:render-label="renderNodeLabel"
|
||||||
:render-prefix="renderNodePrefix"
|
|
||||||
:render-suffix="renderNodeSuffix"
|
:render-suffix="renderNodeSuffix"
|
||||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
|
|||||||
@@ -54,7 +54,11 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
|
|||||||
const cameraNodeStyle: CSSProperties = {
|
const cameraNodeStyle: CSSProperties = {
|
||||||
opacity: cameraOnline() ? 1 : 0.5,
|
opacity: cameraOnline() ? 1 : 0.5,
|
||||||
cursor: cameraOnline() ? 'pointer' : 'not-allowed',
|
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(
|
return h(
|
||||||
'div',
|
'div',
|
||||||
{
|
{
|
||||||
@@ -72,7 +76,7 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
|
|||||||
event.dataTransfer?.setData('name', camera.name);
|
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;
|
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 }) => {
|
const renderNodeSuffix: TreeProps['renderSuffix'] = ({ option }) => {
|
||||||
if (isCameraSiteNode(option)) {
|
if (isCameraSiteNode(option)) {
|
||||||
const { online, offline, total } = option.stats;
|
const { online, offline, total } = option.stats;
|
||||||
@@ -126,7 +120,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
|
|||||||
virtual-scroll
|
virtual-scroll
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
:render-label="renderNodeLabel"
|
:render-label="renderNodeLabel"
|
||||||
:render-prefix="renderNodePrefix"
|
|
||||||
:render-suffix="renderNodeSuffix"
|
:render-suffix="renderNodeSuffix"
|
||||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||||
:default-expand-all="searchPattern.trim().length > 0"
|
:default-expand-all="searchPattern.trim().length > 0"
|
||||||
@@ -146,7 +139,6 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
|
|||||||
virtual-scroll
|
virtual-scroll
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
:render-label="renderNodeLabel"
|
:render-label="renderNodeLabel"
|
||||||
:render-prefix="renderNodePrefix"
|
|
||||||
:render-suffix="renderNodeSuffix"
|
:render-suffix="renderNodeSuffix"
|
||||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
|
|||||||
Reference in New Issue
Block a user