国标GB28181协议视频智能分析平台EasyGBS新增视频调阅搜索

原创

TSINGSEE青犀视频

修改于 2021-02-23 06:33:36

53800

代码可运行

文章被收录于专栏：TSINGSEE青犀视频TSINGSEE青犀视频

运行总次数：0

代码可运行

为了进一步优化TSINGSEE青犀视频智能分析平台，我们研发提出了多个可细微调整的地方，包括增加一些更加人性化的操作方式，比如添加EasyGBS视频调阅中的搜索功能。

其实基础的数据模糊搜索功能很简单，只需要对数据进行简单的筛选就可以了，但是这其中还涉及到了视频调阅侧边设备列表数据是树状图数据，因此需要对此组件的数据进行筛选，再将新数据渲染出来，重新渲染组件。

按照以上的逻辑，操作起来还是比较复杂的，而且因为此处数据量可能很大，采用的也是懒加载的方法，综前思后，还是选择在el-tree组件自带的filter节点过滤功能满足要求。

参考代码如下：

  <el-tree
        ref="tree"
        :props="props"
        :load="loadNode"
        accordion
        node-key="id"
        :default-expanded-keys="['1111']"
        highlight-current
        lazy
        @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        v-show="Type"
      >

    filterNode(value, data) {
      if (!value) return true;
      if (data.Type == 0) {
        return true;
      }
        if (data.Name.indexOf(value) > -1 || data.id.indexOf(value) > -1) {
          return true;
        } else {
          return false;
        }
      
    },