feat(vimp-resource): 优化资源面板,添加设备搜索与图标展示
- 新增bullet-camera、hemi-ptz-camera、ptz-camera三个自定义svg摄像头图标 - 替换告警和摄像头列表的文字前缀为对应图标展示 - 重构资源面板状态管理,简化搜索关键词的存储逻辑 - 为摄像头和告警树添加本地搜索过滤功能,搜索时自动展开所有节点 - 重构资源面板UI布局,添加折叠动画,优化搜索框显示逻辑与侧边栏样式
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user