國標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>