国标GB28181协议视频告警智能分析平台EasyGBS选择通道组件树状图重构过程分享

国标GB28181协议是国家公安部提出的视频流传输协议，TSINGSEE青犀视频顺应国家的要求，研发了支持GB28181协议设备接入的EasyGBS视频智能分析平台，提供流转发服务，负责将GB28181设备/平台推送的PS流转成ES流，然后提供RTSP、RTMP、FLV、HLS多种格式进行分发，实现web浏览器、手机浏览器、微信、PC客户端等各种终端无插件播放。

EasyGBS国标平台内可接入百千通道，选择通道是以table表格渲染的，我们发现当EasyGBS平台接入的通道数过大时，用户找寻通道或者批量选择通道非常不容易，不易操作，因此我们为了便捷用户操作，需要将此组件以树状图重构。

原始组件：

目标组件：

在原接口不变的情况下，前段通过重构组件将原有功能重构，EasyGBS项目用的是element组件库，选择通道组件原本用的就是element中的el-Table组件，因此只需要换成el-tree组件就行了。

      <div class="elTree">
        <el-tree
          ref="tree"
          :default-expanded-keys="treeExpandedKeys"
          :data="treeData"
          :props="props"
          node-key="id"
          highlight-current
          @node-click="handleNodeClick"
          @check="treeCheck"
          show-checkbox
        >
          <span slot-scope="{ node, data }">
            <i :class="[data.icon, 'tree-icon']" v-if="data.Type != 2"></i>
            <svg class="icon tree-icon" aria-hidden="true" v-else>
              <use xlink:href="#iconshexiangtou" />
            </svg>
            <span>{{ node.label }}</span>
          </span>
        </el-tree>

国标GB28181协议国标安防视频平台EasyGBS目前支持国标GB28181设备/平台接入、国标平台级联、语音对讲、经纬度定位、告警查询、用户管理、设备管理等功能，既能作为能力平台为业务层提供接口调用，也可作为业务平台使用，进行设备及用户的管理、PC、手机端等多终端的访问，更多功能可以联系我们获取测试账号进行测试。