国标GB28181流媒体服务器分级目录功能的研发

对于国标流媒体服务器，我和我的同事们这段时间都在研发上下了很多功夫，因为每个人的需求不同，所以我们经常会根据大家的需求定制一些更加适合的界面。不仅是国标流媒体服务器，其他的视频流媒体服务器或者云管理平台也是一样的。

 

比如之前有位用户，需要在流媒体服务器里建立树形结构显示目录，每个目录下都可以上传视频至本目录，还需要在视频播放的界面实现循环播放的功能，像这样的功能，我们流媒体服务器原本是不自带了，但是为了便捷用户，我联合我们的研发人员开发了新的代码。

 

这里我就贴出一段分级式目录的代码让大家参考一下：

 <!-- 树状图列表 -->
  <div v-show="mode == 'tree'" >
    <div class="video-icons">
      <!-- 左侧树状图 -->
      <div class="treeViewBox" v-if="Administrator">
          <el-tree :data="data" @node-click="handleNodeClick" accordion :props="defaultProps"   id="treeBox">
            <span class="my-custom" slot-scope="{node,data}">
              <i :class="[data.icon,'tree-icon']"> </i>
              <span>{{node.label}}</span>
            </span>
          </el-tree>
        </div>
      <!-- 右侧数据列表 -->
      <div class="treeContentBox">
        <div class="viewBox">
          <div class="col-md-6 col-lg-2 video video-box" v-for="(video,index) in pageData" :key="index">
            <div class="thumbnail">
              <div class="wrapper" style="padding-bottom:56.25%;position:relative;height:auto;">
                <div class="inner" style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;" v-loading="video.status != 'done'" :element-loading-text="getLoadingText(video)" :element-loading-spinner="getLoadingSpinner(video)" :element-loading-custom-class="getLoadingClass(video)">
                  <img  style="width:100%;min-height:100%;" role="button" :src="video.snapUrl || (video.type.indexOf('audio') != -1|| video.type.indexOf('wav') != -1 || video.type.indexOf('mp3') != -1 ? audioSnap:defaultSnap)" @error="snapError($event)" @click.prevent="play(video)"></img>
                </div>
              </div>
            <div class="caption text-center ellipsis">{{video.name}}</div>
          </div>
        </div>
      </div>
      <div style='display:inine-block;width:100%;color:#ccc;font-size:24px;text-align:center;margin-top:30px;' v-show="pageData.length == 0">{{$t('m.c_nodata')}}</div>
    </div>
  </div>