dbsd_kczx/src/views/site/common/video/videojs/viewPage.vue

<template>
  <div id="siteMain">
    <div id="maxSite">
      <a-layout>
        <!-- 页头 -->
        <headerPage/>
        <!-- 主体部分 -->
        <a-layout-content>
          <div style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
            <a-row :gutter="[16,16]">
              <a-col :span="19">
                <div>
                  <a-card class="videoCardMain" style="width:100%">
                    <template #title>
                      <span class="" style="border-radius: 5px;">
                        {{ ktangInfo.kcmc || ' ' }}
                      </span>
                      <span style="margin-left: 10px;background: #1c84c6;color: #fff;padding: 0.3rem;border-radius: 5px;" @click="() => tingKeZuJiAddModal.view({ ketangbiaoid: route.query.ktId })">填写评价表</span>
                      <div style="font-size: .5rem;">
                        {{ ktangInfo.zc || ' ' }}-{{ ktangInfo.skjs || ' ' }}
                      </div>
                    </template>
                    <div style="padding: 1rem;">
                      <div >{{ mainVideoCardBoxTitle || '' }}</div>
                      <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }"/>
                      <div style="width: 100%;">
                        <a-textarea style="width: calc(100% - 7rem);height:120px;float: left;" v-model:value="model.notes" placeholder="您可以填写听课笔记"></a-textarea>
                        <div style="width: 7rem;height: 100%;float: right;">
                          <a-button type="primary" style="width: 7rem;height: 100%;" @click="openAllSuiBi">查看听课笔记</a-button>
                          <a-button type="primary" style="width: 7rem;height: 100%;margin-top: 1rem;" @click="saveSuibi">保存听课笔记</a-button>
                        </div>
                      </div>
                    </div>
                  </a-card>
                </div>
              </a-col>
              <a-col :span="5">
                <a-row>
                  <a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;" :key="'col-'+index">
                    <a-card>
                      <div>
                        <div style="margin-bottom: .5rem;">
                          <span class="smallTxt miniButton" :class="item.id == curentPlayerVideo.id?'activte':''" @click="changeLive(item)">
                            <i class="fa-solid fa-right-left"></i>{{ item?.xm }}
                          </span>
                          <span class="smallTxt miniButton miniButtonRight" v-show="!item.isShow" @click="(item.isShow = true,initVideo('other-'+item.id))"><i class="fa-solid fa-film"></i>显示缩略窗口</span>
                          <span class="smallTxt miniButton miniButtonRight" v-show="item.isShow" @click="item.isShow = false"><i class="fa-solid fa-film"></i>隐藏缩略窗口</span>
                        </div>
                        <div style="height: 2rem;">&nbsp;</div>
                        <div v-show="item.isShow" :key="'other-div-'+index">
                          <!-- <bVideo :key="'other-'+index" :ref="el=> bVideoRefs['other-'+item.id] = el" :videoId="'other-'+item.id" :src="'http://127.0.0.1/hls/a.m3u8'" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/> -->
                          <bVideo :key="'other-'+index" :ref="el=> bVideoRefs['other-'+item.id] = el" :videoId="'other-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
                        </div>
                      </div>
                    </a-card>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
          <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;">
            <a-empty>
              <template #description>
                <span>
                  没有找到直播间
                </span>
              </template>
              <!-- <a-button type="primary" @="">关闭</a-button> -->
            </a-empty>
          </div>
        </a-layout-content>
      </a-layout>
    </div>
  </div>
  <addModalPage ref="tingKeZuJiAddModal"/>
  <a-modal title="查看听课笔记" width="800px" :visible="tkbjVisible" :okButtonProps="{ class: { 'jee-hidden': true } }" @cancel="() => tkbjVisible = false" cancelText="关闭">
    <div style="white-space:normal; word-break:break-all;overflow:hidden;">
      <a-table tableLayout="fixed" :dataSource="suibiList" :scroll="{ x: true }" :pagination="false">
        <a-table-column width="160px" title="填写时间" key="createTime" data-index="createTime" />
        <a-table-column title="内容" key="notes" data-index="notes" />
      </a-table>
    </div>
  </a-modal>

</template>
<script lang="ts" setup name="zhihuijiaoshiIndexPage">

import { defHttp } from '/@/utils/http/axios';
import { ref, reactive, onMounted } from 'vue';
import headerPage from '/@/views/site/common/header.vue';
import bVideo from '/@/views/site/common/video/videojs/video.vue';
import addModalPage from '/@/views/site/tingKeZuJi/components/addModal.vue';
import { nextTick } from 'vue';
import { useRoute } from 'vue-router'
import { getUserId } from '/@/views/site/utils/index';

const mainVideo = ref<any>();
const bVideoRefs = ref<any>([]);

const tingKeZuJiAddModal = ref<any>({});
const curentPlayerVideo = ref<any>({});
const kcCardBoxTitle = ref<any>('');
const ktangInfo = ref<any>({});
const mainVideoCardBoxTitle = ref<any>('');
const tableData = ref<Recordable>([])
const suibiList = ref<Recordable>([])
const isError = ref(false);
const tkbjVisible = ref(false);

const model = reactive<Record<string, any>>({ notes:'' });

const route = useRoute();

enum Api {
  list = '/jiaoshi/kcZhihuijiaoshi/list',
  querySuibi = '/kc/kcKetangSuibi/list',
  addSuibi = '/kc/kcKetangSuibi/add',
  // editSuibi = '/kc/kcKetangSuibi/edit'
  getKtangInfo = '/ktgl/kcKetangbiao/queryById'
}

/**
 * 列表接口
 * @param params
 */
const list = (params) => defHttp.get({ url: Api.list, params });
const querySuibi = (params) => defHttp.get({ url: Api.querySuibi, params });
const addSuibi = (params) => defHttp.post({ url: Api.addSuibi, params });
const getKtangInfo = (params) => defHttp.get({ url: Api.getKtangInfo, params });
// const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });

onMounted(() => {
  if(route.query.id){
    model.notes = '';
    //按教师编号加载数据,屏蔽掉无效的，不分页
    list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
      let list = (res?.records) ?? [];
      tableData.value = list;
      tableData.value.forEach(x => x.isShow = true);//默认展开
      nextTick(() => {
        changeLive(tableData.value[0]);
        tableData.value.forEach(x => x.isShow = false);//关闭
      })
    });
    getSuibi();
    getKcxx();
  }else{
    isError.value = true;
  }
});

/**
 * 子页加载完成后回调
 * @param player
 */
 function loadEnd(player){
  nextTick(() => {
    player.on('play',() => {
      setTimeout(() => {
        player.pause();
      },1000);
    })
  })
}

function initVideo(key){
  nextTick(() => {
    let ref = bVideoRefs.value[key];
    ref.init();
  })
}

function changeLive(item:any){
  let url = item.pullUrl
  let mainVideo = document.querySelector<any>('#mainVideo');
  // mainVideo?.player?.src([{ type:'application/x-mpegURL',src: 'http://127.0.0.1/live_hls/a.m3u8' }])
  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
  mainVideoCardBoxTitle.value = item.jsmc+item.xm;
  console.log(`🚀 --------------------------------------------------------------------------------🚀`);
  console.log(`🚀 ~ file: viewPage.vue:164 ~ changeLive ~ mainVideo?.player:`, mainVideo?.player);
  console.log(`🚀 --------------------------------------------------------------------------------🚀`);
  let buttonEl = mainVideo?.player.el().querySelector('.changeDefinitionBtn');
  //赋值原URL
  buttonEl.dataset.url = url;

  curentPlayerVideo.value = item;

}



function getSuibi(){
  //查询随笔
  let param = {
    userId: getUserId(),
    ketangbiaoId: route.query.ktId,
    column: 'createTime',
    order: 'desc',
  };
  querySuibi(param).then(res => {
    Object.assign(model, (res.records??[{}])[0]);
    // model = (res.records??[{}])[0];
  });
}

function getKcxx(){
  //查询课程信息
  //route.query.ktId
  let param = {
    id: route.query.ktId
  }
  getKtangInfo(param).then(res => {
    console.log(res);
    ktangInfo.value = res;
    kcCardBoxTitle.value = res.kcmc;
  });
}

function saveSuibi(){
  //addSuibi editSuibi
  // if(model.value.id){
  //   editSuibi({...model.value, })
  // }else{
    addSuibi({ notes: model.notes, userId: getUserId(), ketangbiaoId: route.query.ktId })
  // }
}

function openAllSuiBi(){
  //打开弹窗
  tkbjVisible.value = true;
  //查询随笔
  let param = {
    userId: getUserId(),
    ketangbiaoId: route.query.ktId,
    column: 'createTime',
    order: 'desc',
  };
  querySuibi(param).then(res => {
    // model = (res.records??[{}])[0];
    suibiList.value = res.records??[]
  }).finally(() => {
    //关闭等待
  });

}

</script>
<style lang="less" scoped>
#siteMain {
  // font-size: ;
  height: 100%;
  background: #f3f3f4;
  #maxSite {
    //最大宽度
    max-width: 1170px;
    //居中
    margin: 0 auto;
    .rowGutter{
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

    .ant-layout-header {
      color: #fff;
      background: #1ab394;
    }
    .ant-layout-footer {
      line-height: 1.5;
      background: #FFF;
    }
    .ant-layout-sider {
      color: #fff;
      line-height: 120px;
      background: #3ba0e9;
    }
    .ant-layout-content {
      min-height: 120px;
      color: #000;
      /*line-height: 120px;*/
      background: #f3f3f4;
    }
  }
}
/**暗黑模式特殊配色*/
[data-theme='dark'] #siteMain #maxSite {
  .ant-layout-header, .ant-layout-footer {
    background: #6aa0c7;
  }
  .ant-layout-content {
    background: #107bcb;
  }
  .ant-layout-sider {
    background: #3499ec;
  }
}
.videoMax{
  width: 25%;
}
.videoCardMain {
  :deep(.ant-card-body) {
    padding: 0;
  }
}
/* 隐藏video 进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}
.smallTxt {
  font-size: .8rem;
}
.activte {
  background: #1ab394;
  color: #FFF;
}
.miniButton {
  float: left;
  padding: 0.3rem;
  border-radius: 5px;
}
.miniButtonRight {
  float: right
}
</style>