dbsd_kczx/src/views/kc/jiaoshi/index.vue

<template>
  <div style="width:100%;height: 100%;">
    <a-row>
      <a-col :span="3">
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          style="overflow: hidden;overflow-y:scroll"
          :style="{ height: `calc(100vh - ${topWidth})`, borderRight: 0 }"
          mode="inline"
        >
          <a-menu-item v-for="(item, index) of leftList" :key="index" @click="(e) => titleClick(e,item)" :title="`${item.jsmc}`">
            {{ item.jsmc }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col :span="21">
        <div>
          <a-card :title="mainVideoCardBoxTitle" class="videoCardMain" style="width:100%">
            <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
          </a-card>
        </div>
        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;overflow-x: scroll;">
          <div v-for="(item,index) of calcOtherVideo()" class="videoMax">
            <a-card :title="item?.xm" class="videoCardMain">
              <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :src="'http://127.0.0.1/live_hls/soures.m3u8'" type="application/x-mpegURL" :videoId="'other-'+item.id"/> -->
                <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :src="'http://bylwcs.nenu.edu.cn:8089/live_hls/123.m3u8'" type="application/x-mpegURL" :videoId="'other-'+item.id"/> -->
              <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" :src="'https://bylwcs.nenu.edu.cn:9553/live_hls/yfjxl101s_lbzj.m3u8'" type="application/x-mpegURL" :videoId="'other-'+item.id"/> -->
              <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/>
              <!-- <bVideo :ref="el=> bVideoRefs[index]=el" :videoId="'other-'+item.id" :src="'http://127.0.0.1/live_hls/soures.m3u8'" :videoOption="{ autoplay: true, userActions: { click: bVideoClick } }" @load-end="loadEnd"/> -->
            </a-card>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup name="zhihuijiaoshiIndexPage">
import { defHttp } from '/@/utils/http/axios';
import { ref, onMounted } from 'vue';
import bVideo from '/@/views/site/common/video/videojs/video.vue';
import { nextTick } from 'vue';

const bVideoRefs = <any>ref([]);
const mainVideo = <any>ref();
const _document = window.document;
// const bVideoLeftRef = ref();

const leftList = <any>ref([]);
const currentItem = <any>ref({});
const topWidth = <any>ref('0');
const isfirst = <any>ref(false);
const mainVideoCardBoxTitle = <any>ref('');

onMounted(() => {
  list({ pageSize: -1, sfyx: '0' }).then(res => {
    let list = (res?.records) ?? [];
    //聚合
    let map = {};
    list.forEach(x => {
      let item = map[x.jsmc];
      if(item){
        item.child[x.xm] = x;
      }else{
        let child = {};
        child[x.xm] = x;
        map[x.jsmc] = {
          ...x,
          child
        };
      }
    });

    leftList.value = Object.values(map);
    //计算左侧菜单高度
    let mainDiv = <any>_document?.querySelector('.ant-layout .jeecg-default-layout-main > div');
    topWidth.value =mainDiv?.style?.height?? '0';
  });
});

enum Api {
  list = '/jiaoshi/kcZhihuijiaoshi/list',
}
/**
 * 列表接口
 * @param params
 */
const list = (params) => defHttp.get({ url: Api.list, params });


const selectedKeys = ref<string[]>(['1']);
const openKeys = ref<string[]>(['sub1']);

/**
 * 点击左侧菜单回调
 * @param e
 * @param item
 */
const titleClick = (e: Event, item: any) => {
  //初始化数据
  isfirst.value = false;
  currentItem.value = {};
  //等一会，清空上一次的对象，
  nextTick(() => {
    currentItem.value = item;
  });
};

/**
 * 子页加载完成后回调
 * @param player
 */
function loadEnd(player){
  nextTick(() => {
    if(!isfirst.value){
      isfirst.value = true;
      //播放第一个
      let one = <any>Object.values(calcOtherVideo())[0];
      bVideoClick({ target: { playerId: 'other-'+ one.id} })
    }
  });
}


/**
 * 拆分对象（过滤器）
 */
function calcOtherVideo() :any{
  if(!currentItem.value.child) return {};
  let map = {};
  Object.keys(currentItem.value.child).forEach(key => {
    // if(key != '录播主机' && key.indexOf('音频处理器') ==-1){
      map[key] = currentItem.value.child[key];
    // }
  });
  return map;
}

/**
 * 点击时切换至大屏
 * @param e
 */
function bVideoClick(e){
  console.log(`bVideoClick: 点击切换至主界面`);

  let mainVideo = <any> document.querySelector('#mainVideo');
  let currentVideo = <any> document.querySelector('#'+e.target.playerId);
  let src = currentVideo.player?.src();

  mainVideo?.player?.src([{type:'application/x-mpegURL',src }])
}

</script>
<style lang="less" scoped>
.videoMax{
  width: 25%;
}
.videoCardMain {
  :deep(.ant-card-body) {
    padding: 0;
  }
}
/* 隐藏video 进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}
</style>