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

<template>
  <div class="maxSite" style="width:100%;height: 100%;margin-top: 1rem;" v-if="!isError">
    <a-row :gutter="[16,16]">
      <a-col :span="22">
        <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 tableData" class="videoMax"> -->
            <!-- <a-card :title="item?.xm" class="videoCardMain"> -->
              <!-- <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-'+index" :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-col :span="2">
        <a-row>
          <a-col :span="24">
            <a-button type="primary" style="width: 100%;margin-bottom: 0.5rem;" @click="() => tingKeZuJiAddModal.view({ ketangbiaoid: route.query.ktId })">评价</a-button>
          </a-col>
          <a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;">
            <a-button type="primary" style="width: 100%;margin-bottom: 0.5rem;" @click="changeLive(item)">{{ item?.xm }}</a-button>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row :gutter="[16,16]">
      <a-col :span="22">
        <a-textarea v-model:value="model.notes"></a-textarea>
      </a-col>
      <a-col :span="2">
        <a-button type="primary" @click="saveSuibi">保存</a-button>
      </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>
  <addModalPage ref="tingKeZuJiAddModal"/>
</template>
<script lang="ts" setup name="zhihuijiaoshiIndexPage">

import { defHttp } from '/@/utils/http/axios';
import { ref, reactive, onMounted } from '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 = <any>ref();

const tingKeZuJiAddModal = <any>ref({});
const mainVideoCardBoxTitle = <any>ref('');
const tableData = ref<Recordable>([])
const isError = 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'
}

/**
 * 列表接口
 * @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 editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });

onMounted(() => {
  if(route.query.id){
    model.notes = '';
    //按ID加载数据
    list({ pageSize: -1, sfyx: '0', jsbh: route.query.id }).then(res => {
      let list = (res?.records) ?? [];
      tableData.value = list;
      nextTick(() => {
        changeLive(tableData.value[0]);
      })
    });
    getSuibi();
  }else{
    isError.value = true;
  }
});

function changeLive(item:any){
  let mainVideo = <any> document.querySelector('#mainVideo');
  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: item.pullUrl }])
}

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 saveSuibi(){
  //addSuibi editSuibi
  // if(model.value.id){
  //   editSuibi({...model.value, })
  // }else{
    addSuibi({ notes: model.notes, userId: getUserId(), ketangbiaoId: route.query.ktId })
  // }
}

</script>
<style lang="less" scoped>
.videoMax{
  width: 25%;
}
.videoCardMain {
  :deep(.ant-card-body) {
    padding: 0;
  }
}
/* 隐藏video 进度条 */
video::-webkit-media-controls-timeline {
    display: none;
}
.maxSite {
  //最大宽度
  max-width: 1170px;
  //居中
  margin: 0 auto;
}
</style>