feat(vimp-resource): 优化资源面板,添加设备搜索与图标展示

- 新增bullet-camera、hemi-ptz-camera、ptz-camera三个自定义svg摄像头图标
- 替换告警和摄像头列表的文字前缀为对应图标展示
- 重构资源面板状态管理,简化搜索关键词的存储逻辑
- 为摄像头和告警树添加本地搜索过滤功能,搜索时自动展开所有节点
- 重构资源面板UI布局,添加折叠动画,优化搜索框显示逻辑与侧边栏样式
This commit is contained in:
yangsy
2026-05-29 00:11:43 +08:00
parent 2f38e97481
commit 8fae86d6ff
9 changed files with 174 additions and 54 deletions
+21 -5
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { NTabPane, NTabs, NTree, type TreeOverrideNodeClickBehavior, type TreeProps } from 'naive-ui';
import { h, type CSSProperties } from 'vue';
import { useAlarmStore } from '../stores';
import { useAlarmStore, useResourcePanelStore } from '../stores';
import { storeToRefs } from 'pinia';
import { useDeviceCenterQuery } from '../composables';
import { isAlarmNode, isAlarmSiteNode, isAlarmAreaNode } from '../types';
@@ -76,6 +76,14 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
// 其他节点(兜底,理论上不会走到这里)
return option.label;
};
const resourcePanelStore = useResourcePanelStore();
const { searchPattern } = storeToRefs(resourcePanelStore);
const searchFilter: TreeProps['filter'] = (pattern, node) => {
if (!isAlarmNode(node)) return false;
return node.alarm.name.includes(pattern);
};
</script>
<template>
@@ -89,9 +97,13 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
show-line
virtual-scroll
style="height: 100%"
:data="lineTabPanes.at(0)?.alarmTree"
:override-default-node-click-behavior="overrideNodeClickBehavior"
:render-label="renderNodeLabel"
:override-default-node-click-behavior="overrideNodeClickBehavior"
:default-expand-all="searchPattern.trim().length > 0"
:show-irrelevant-nodes="false"
:data="lineTabPanes.at(0)?.alarmTree"
:pattern="searchPattern"
:filter="searchFilter"
/>
</template>
<template v-if="lineTabPanes.length > 1">
@@ -103,9 +115,13 @@ const renderNodeLabel: TreeProps['renderLabel'] = ({ option }) => {
show-line
virtual-scroll
style="height: 100%"
:data="alarmTree"
:override-default-node-click-behavior="overrideNodeClickBehavior"
:render-label="renderNodeLabel"
:override-default-node-click-behavior="overrideNodeClickBehavior"
:default-expand-all="false"
:show-irrelevant-nodes="false"
:data="alarmTree"
:pattern="searchPattern"
:filter="searchFilter"
/>
</NTabPane>
</NTabs>