From 0dbee9ae182ad59853b9daf6876aaac39e50dd68 Mon Sep 17 00:00:00 2001
From: yangjun <1173114630@qq.com>
Date: Mon, 6 Jan 2025 09:24:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E4=BB=BD=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/video/videojs/viewPage copy 2.vue  | 566 +++++++++++
 .../common/video/videojs/viewPage copy 3.vue  | 735 ++++++++++++++
 .../common/video/videojs/viewPage copy 4.vue  | 901 ++++++++++++++++++
 .../common/video/videojs/viewPage copy.vue    | 680 +++++++++++++
 .../components/ZyInfoDetailForm copy.vue      | 489 ++++++++++
 .../ZyInfoStudentPiyueForm copy.vue           | 484 ++++++++++
 6 files changed, 3855 insertions(+)
 create mode 100644 src/views/site/common/video/videojs/viewPage copy 2.vue
 create mode 100644 src/views/site/common/video/videojs/viewPage copy 3.vue
 create mode 100644 src/views/site/common/video/videojs/viewPage copy 4.vue
 create mode 100644 src/views/site/common/video/videojs/viewPage copy.vue
 create mode 100644 src/views/zy/zyInfo/components/ZyInfoDetailForm copy.vue
 create mode 100644 src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm copy.vue

diff --git a/src/views/site/common/video/videojs/viewPage copy 2.vue b/src/views/site/common/video/videojs/viewPage copy 2.vue
new file mode 100644
index 0000000..4002428
--- /dev/null
+++ b/src/views/site/common/video/videojs/viewPage copy 2.vue	
@@ -0,0 +1,566 @@
+<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 :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
+                <div>
+                  <a-card class="videoCardMain" style="width:100%">
+                    <template #title>
+                      <span class="" style="border-radius: 5px;">
+                        {{ ktangInfo.kcmc || ' ' }}
+                      </span>
+                      <span style="float: right;margin-left: 10px;background: #1c84c6;color: #fff;padding: 9px;border-radius: 5px;font-size: 16px;" @click="funpingjia(ktangInfo)">填写评价表</span>
+                      <div style="font-size: 12px;">
+                        {{ ktangInfo.zc || ' ' }}&nbsp;&nbsp;{{ ktangInfo.skjs || ' ' }}&nbsp;&nbsp;学分：{{ ktangInfo.xf || ' ' }}
+                        &nbsp;&nbsp;课程性质：{{ ktangInfo.kcxz || ' ' }}
+                        &nbsp;&nbsp;开课单位：{{ ktangInfo.kkdw || ' ' }}
+                        &nbsp;&nbsp;节次：{{ ktangInfo.hh || ' ' }}
+                      </div>
+                      <div style="font-size: 12px;text-wrap: wrap;width: 100%;word-wrap: break-word;" hidden>
+                        课程介绍：{{ ktangInfo?.zyJxdg?.kcjs }}
+                      </div>
+                    </template>
+                    <div style="padding: 1rem;">
+                      <div style="font-size: 16px;float: left;">{{ mainVideoCardBoxTitle || '' }}</div>
+                      <!-- <div style="float: right;">
+                        AI识别出勤率：{{ calcPercentage((ktangInfo?.detectionMain?.averageNum || 0),(ktangInfo?.jiaoshirongliang?.jsrl || 0))}}&nbsp;&nbsp;
+                        <template v-if="ktangInfo?.jiaoshirongliang?.jsrl">本教室容量：{{ktangInfo?.jiaoshirongliang?.jsrl}}座位</template>
+                      </div> -->
+                      <div style="float: right;">
+                        <span>本教室容量：{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
+                        <span style="margin-left:15px;">选课人数：{{ ktangInfo.xkrs || ' ' }}</span> 
+                        <span style="margin-left:15px;">AI识别出勤人数: <a @click="handleZqrs(ktangInfo)">{{ ktangInfo?.kcDetectionDetailed?.num||'-' }}</a></span>
+                        <span style="margin-left:15px;">
+                          <a-tooltip placement="topRight">
+                            <template #title>
+                              <span>平台分别在三个时间节点（上课后10分钟，课中50分钟，下课前10分钟）抓取学生全景图片进行AI人流量识别，当前显示的人数为最近一个时间的人数识别，目前部分教室摄像头拍摄画面广角待更新，AI识别出勤人数仅供参考</span>
+                            </template>
+                            <!-- <Icon icon="ant-design:question-circle-outlined" /> -->
+                            <span class="helpClass">?</span>
+                          </a-tooltip>
+                        </span> 
+                        
+                      </div>
+                      
+                      <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }" @load-end="mainVideoLoadEnd"/>
+                      <div class="jxDiv">
+                        <a-space>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学大纲:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.pdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.filePath)">下载</a-button>
+                          </div>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学日历:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.jxrlPdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.jxrlFilePath)">下载</a-button>
+                          </div>
+                        </a-space>
+                      </div>
+                      <div style="width: 100%;margin-top:10px;">
+                        <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: 10px;" @click="saveSuibi">保存听课笔记</a-button>
+                          <a-button type="primary" style="width: 7rem;height: 100%;margin-top: 10px;" @click="handleBaocuo(ktangInfo)">报错</a-button>
+                        </div>
+                      </div>
+                    </div>
+                  </a-card>
+                </div>
+              </a-col>
+              <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ 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 v-if="!playStatus">
+                  没有找到直播间
+                </span>
+                <span v-if="playStatus">
+                  {{ getSysConfig()?.videoPlayErrTitle || '直播间暂无内容' }}
+                </span>
+              </template>
+              <!-- <a-button type="primary" @="">关闭</a-button> -->
+            </a-empty>
+          </div>
+        </a-layout-content>
+      </a-layout>
+    </div>
+  </div>
+  <KcErrorreportIndexModal ref="kcErrorreportIndexModal"></KcErrorreportIndexModal>
+  <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>
+
+  <KcDetectionMainModal @register="registerModal" ></KcDetectionMainModal>
+</template>
+<script lang="ts" setup name="zhihuijiaoshiIndexPage">
+
+import { defHttp } from '/@/utils/http/axios';
+import { ref, reactive, onMounted, createVNode, h } 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';
+import KcErrorreportIndexModal from '/@/views/kc/kcErrorreport/components/KcErrorreportIndexZbModal.vue'
+import videojs from "video.js";
+import { getSysConfig } from '/@/views/site/utils/index';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { baseApiUrl, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import KcDetectionMainModal from '/@/views/kc/detection/components/KcDetectionMainModal.vue'
+import { useModal } from '/@/components/Modal';
+import { Modal } from 'ant-design-vue';
+import { CloseOutlined } from '@ant-design/icons-vue';
+
+const { createMessage, createInfoModal, createErrorModal } = useMessage();
+
+const mainVideo = ref<any>();
+const bVideoRefs = ref<any>([]);
+const kcErrorreportIndexModal = ref();
+
+const tingKeZuJiAddModal = ref<any>({});
+const curentPlayerVideo = ref<any>({});
+const kcCardBoxTitle = ref<any>('');
+const ktangInfo = ref<any>({});
+// const jxdgInfo = ref<any>({});
+const mainVideoCardBoxTitle = ref<any>('');
+const tableData = ref<Recordable>([])
+const suibiList = ref<Recordable>([])
+const isError = ref(false);
+const tkbjVisible = ref(false);
+const playStatus = ref(false);
+
+const model = reactive<Record<string, any>>({ notes:'' });
+
+//注册model
+const [registerModal, { openModal }] = useModal();
+
+const route = useRoute();
+
+enum Api {
+  list = '/jiaoshi/kcZhihuijiaoshi/list',
+  querySuibi = '/kc/kcKetangSuibi/list',
+  addSuibi = '/kc/kcKetangSuibi/add',
+  // editSuibi = '/kc/kcKetangSuibi/edit'
+  getKtangInfo = '/ktgl/kcKetangbiao/queryAllDataById',
+  savePlayLog = '/jiaoshi/kcZhihuijiaoshiAccessLog/savePlayLog',
+  changeAvyLiveByJsbhsApi = '/httpinterface/runAvyApiByJsbhs',
+}
+
+/**
+ * 列表接口
+ * @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 savePlayLog = (params) => defHttp.post({ url: Api.savePlayLog, params, }, { isTransformResponse: false });
+const changeAvyLiveByJsbhsApi = (params) => defHttp.get({ url: Api.changeAvyLiveByJsbhsApi, params,timeout: 9000000 });
+// 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);//默认展开
+      let zjData = tableData.value.find(x => x.xm == '教师近景') || {};
+      nextTick(() => {
+        if(zjData){
+          changeLive(zjData);
+        }
+        savePlayLogFn(zjData);
+        calcPlayStatus(zjData);
+        tableData.value.forEach(x => x.isShow = false);//关闭
+      })
+    });
+    getSuibi();
+    getKcxx();
+    //记录播放日志
+    isError.value = false;
+  }else{
+    isError.value = true;
+  }
+});
+
+function handleBaocuo(item) {
+  kcErrorreportIndexModal.value.disableSubmit = false;
+  kcErrorreportIndexModal.value.add(item);
+}
+
+
+const listTkjlApi = (params) => defHttp.get({ url: '/kcTingke/kcTingke/findTingKeZuJiBytingketimeAndUserId', params });
+function funpingjia(record) {
+  console.log('11111--------->',record)
+  console.log('222--------->',record.szkc)
+  var item = { ketangbiaoid: record.id };
+  let userid = getUserId();
+  listTkjlApi({ userid: userid, ketangbiaoid: item.ketangbiaoid }).then((res) => {
+    var list = res;
+    console.log(`🚀 ~ file: list.vue:106 ~ listTkjlApi ~ list:`, list);
+    if (list.length > 0) {
+      var score = list[0].score;
+      if (score) {
+        Modal.error({
+          icon: createVNode({}),
+          content: h('div', { style: 'height:200px;text-align:center;' }, [
+            h('icon', { style: 'font-size:80px;font-weight:600;color:red;' }, createVNode(CloseOutlined)),
+            h('p', { style: 'font-size:22px;font-weight:600;color:black;' }, '已经对此课程进行评价，不可重复评价！'),
+          ]),
+          okText: 'OK',
+          width: '500px',
+        });
+      } else {
+        // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+      }
+    } else {
+      // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+    }
+  });
+}
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd(player){
+  nextTick(() => {
+    player.on('play',() => {
+      setTimeout(() => {
+        player.pause();
+      },2000);
+    })
+  })
+}
+
+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
+  // if(buttonEl){
+  //   buttonEl.dataset.url = url;
+  // }
+
+  curentPlayerVideo.value = item;
+  // nextTick(() => {
+    //增加自动播放功能
+    //mainVideo?.player?.play();
+  // })
+}
+
+function mainVideoLoadEnd(player){
+  setTimeout(() => {
+    setTimeout(() => {
+      player.muted(false);
+      //player.play();
+    },50);
+  },50);
+
+}
+
+function openLive(item: any){
+  changeAvyLiveByJsbhsApi({ jsbhs:item.jsbh, type: 1 }).then(res => {
+    let content = '';
+    res.forEach(x => {
+      // content += x.jsmc + "-" + x.xm
+      content += x.jsmc
+      let text = '';
+      if(x.resText){
+        if(x.resText.includes('ok')){
+          text = '播放失败，开启直播间成功，请稍后再试'
+        }else{
+          text = '播放失败，开启直播间失败，请联系管理员。'
+        }
+      }
+      content += " " + text + "<br/>"
+    });
+    // if(content.includes('开启直播间成功')){
+    //   //延迟12秒
+    //   setTimeout(() => {
+    //     createInfoModal({ width:'50%', title: '结果',content })
+    //   }, 12*1000);
+    // }else{
+    createInfoModal({ width:'50%', title: '结果',content })
+    // }
+
+  }).catch(e => {
+    console.error(e);
+    //loading.value = false;
+    //createInfoModal({title: '错误结果',content:e})
+  })
+}
+
+
+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;
+
+    // defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh: res.rwbh,xqxn: res.xnxq } }).then((res) => {
+    //   if(res){
+    //     jxdgInfo.value = res;
+    //   }
+    // });
+
+  });
+}
+function savePlayLogFn(item){
+  savePlayLog({ playUrl: item.pullUrl, jxlId: item.jxlId, jxlName: item.jxlName, jsbh: route.query.id, jsmc: item.jsmc, ketangbiaoId: route.query.ktId,ketangbiaoName: ktangInfo.value.kcmc })
+}
+
+//计算播放状态
+function calcPlayStatus(item){
+  if(item.pullUrl){
+    videojs.xhr.get(item.pullUrl,(err, resp, body) => {
+      if(err){
+        playStatus.value = false;
+        isError.value = true;
+        openLive(item);
+      }else{
+        playStatus.value = true;
+        isError.value = false;
+      }
+    })
+  }else {
+    console.log(1111111);
+
+    playStatus.value = true;
+    isError.value = true;
+  }
+}
+
+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',
+    pageSize: '-1',
+  };
+  querySuibi(param).then(res => {
+    // model = (res.records??[{}])[0];
+    suibiList.value = res.records??[]
+  }).finally(() => {
+    //关闭等待
+  });
+}
+
+function calcPercentage(averageNum, zrs) {
+  if(averageNum === 0 || zrs === 0){
+    return '0%';
+  }else{
+    return (averageNum / zrs * 100).toFixed(2) + '%';
+  }
+}
+
+function openPdf(miniUrl) {
+  let url2 = getFileAccessHttpUrl(miniUrl)
+  let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
+  window.open(url,"_blank");
+}
+
+function downloadFile(miniUrl) {
+  let url = getFileAccessHttpUrl(miniUrl);
+  window.open(url,"_blank");
+}
+
+function handleZqrs(record){
+  console.log(`🚀 ~ handleZqrs ~ record:`, record)
+  console.log(`🚀 ~ handleZqrs ~ zqrsList:`, record.zqrsList)
+  var a = record.detectionMain;
+  if(record.zqrsList){
+    a.detectionDetailedList = record.zqrsList
+    handleZqrsDetail(a);
+  }else{
+    createMessage.warning("暂无数据！")
+  }
+}
+
+function handleZqrsDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
+
+
+</script>
+<style lang="less" scoped>
+.jxDiv {
+  padding-top: .5rem;
+}
+#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
+}
+
+.helpClass{
+  font-size: 16px;
+    font-weight: 700;
+    /* background: #1c84c6; */
+    color: #1c84c6;
+    border-radius: 5px;
+    padding: 1px 8px;
+    border: 1px #1c84c6 solid;
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/site/common/video/videojs/viewPage copy 3.vue b/src/views/site/common/video/videojs/viewPage copy 3.vue
new file mode 100644
index 0000000..06c287d
--- /dev/null
+++ b/src/views/site/common/video/videojs/viewPage copy 3.vue	
@@ -0,0 +1,735 @@
+<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 :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
+                <div>
+                  <a-card class="videoCardMain" style="width:100%">
+                    <template #title>
+                      <span class="" style="border-radius: 5px;">
+                        {{ ktangInfo.kcmc || ' ' }}
+                      </span>
+                      <span style="float: right;margin-left: 10px;background: #1c84c6;color: #fff;padding: 9px;border-radius: 5px;font-size: 16px;" @click="funpingjia(ktangInfo)">填写评价表</span>
+                      <div style="font-size: 12px;">
+                        {{ ktangInfo.zc || ' ' }}&nbsp;&nbsp;{{ ktangInfo.skjs || ' ' }}&nbsp;&nbsp;学分：{{ ktangInfo.xf || ' ' }}
+                        &nbsp;&nbsp;课程性质：{{ ktangInfo.kcxz || ' ' }}
+                        &nbsp;&nbsp;开课单位：{{ ktangInfo.kkdw || ' ' }}
+                        &nbsp;&nbsp;节次：{{ ktangInfo.hh || ' ' }}
+                      </div>
+                      <div style="font-size: 12px;text-wrap: wrap;width: 100%;word-wrap: break-word;" hidden>
+                        课程介绍：{{ ktangInfo?.zyJxdg?.kcjs }}
+                      </div>
+                    </template>
+                    <div style="padding: 1rem;">
+                      <a-row>
+                        <a-col :span="24">
+                          <div style="font-size: 16px;float: left;font-weight: 600;">{{ mainVideoCardBoxTitle || '' }}</div>
+                          <div style="float: right;">
+                            <span>本教室容量：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
+                            <span style="margin-left:15px;">选课人数：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ ktangInfo.xkrs || ' ' }}</span> 
+                            <span style="margin-left:15px;">AI识别出勤人数: <a @click="handleZqrs(ktangInfo)">{{ ktangInfo?.kcDetectionDetailed?.num||'-' }}</a></span>
+                            <span style="margin-left:15px;">
+                              <a-tooltip placement="topRight">
+                                <template #title>
+                                  <span>平台分别在三个时间节点（上课后10分钟，课中50分钟，下课前10分钟）抓取学生全景图片进行AI人流量识别，当前显示的人数为最近一个时间的人数识别</span>
+                                </template>
+                                <!-- <Icon icon="ant-design:question-circle-outlined" /> -->
+                                <span class="helpClass">?</span>
+                              </a-tooltip>
+                            </span> 
+                            
+                          </div>
+                        </a-col>
+                        <a-col :span="24">
+                          <div style="width:100%;display: block;text-align: right;font-size:12px; color: #ccc;">
+                            说明：目前部分教室摄像头拍摄画面无法覆盖到全体学生，AI识别出勤人数仅供参考
+                          </div>
+                        </a-col>
+                      </a-row>
+
+                      <a-row>
+                        <a-col :span="fpxsShow=='1'?24:18" style="padding: 4px;">
+                          <div class="s-video-all"  >
+                                  <div class="s-video" >
+                                    <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true}" @load-end="mainVideoLoadEnd"/>
+                                  </div>
+                                  <div class="s-full" v-if="fpxsShow != '1'">
+                                    {{checkTitle}}
+                                  </div>
+                              </div>
+                        </a-col>
+                        <a-col :span="6" v-show="fpxsShow=='2'">
+                          <a-row :class="videoFpName">
+                            <a-col :span="24" style="padding: 3px;" v-for="(item,index) in fpData" @click="changeLive2(item)" v-show="item.sfxs=='1' && checkTitle != item.xm">
+                              <div class="s-video-all"  >
+                                  <div class="s-video" >
+                                    <bVideo :key="'other2-'+index" :ref="el=> bVideoRefs['other2-'+item.id] = el" :videoId="'other2-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
+                                  </div>
+                                  <div class="s-full">
+                                    {{item.xm}}
+                                  </div>
+                              </div>
+                            </a-col>
+                          </a-row>
+                        </a-col>
+                        
+                      </a-row>
+                      
+                      <div class="jxDiv">
+                        <a-space>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学大纲:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.pdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.filePath)">下载</a-button>
+                          </div>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学日历:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.jxrlPdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.jxrlFilePath)">下载</a-button>
+                          </div>
+                        </a-space>
+                      </div>
+                      <div style="width: 100%;margin-top:10px;">
+                        <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: 10px;" @click="saveSuibi">保存听课笔记</a-button>
+                          <a-button type="primary" style="width: 7rem;height: 100%;margin-top: 10px;" @click="handleBaocuo(ktangInfo)">报错</a-button>
+                        </div>
+                      </div>
+                    </div>
+                  </a-card>
+                </div>
+              </a-col>
+              <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ 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="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd2"/>
+                        </div>
+                      </div>
+                    </a-card>
+                  </a-col> 
+                  <a-col :span="24">
+                    <a-card  :class="`handClass`">
+                      <div>
+                        <div style="margin-bottom: .5rem;">
+                          <span :class="`smallTxt miniButton ${fpxsShow=='2'?'activte':''}`"  @click="changeJfpLive('2')"><i class="fa-solid fa-right-left"></i>分屏模式</span>
+                          <span class="smallTxt miniButton miniButtonRight">
+                            <a-popover>
+                              <template #content>
+                                  <a-checkbox-group v-model:value="spyCheck" @change="handleSpy">
+                                    <template v-for="(item,i) in fpData" :key="i">
+                                      <a-checkbox :value="item.xm">{{ item.xm }}</a-checkbox><br/>
+                                    </template>
+                                  </a-checkbox-group>
+                              </template>
+                              <i class="fa-solid fa-film"></i>视频源
+                            </a-popover>
+                          </span>
+                        </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 v-if="!playStatus">
+                  没有找到直播间
+                </span>
+                <span v-if="playStatus">
+                  {{ getSysConfig()?.videoPlayErrTitle || '直播间暂无内容' }}
+                </span>
+              </template>
+              <!-- <a-button type="primary" @="">关闭</a-button> -->
+            </a-empty>
+          </div>
+        </a-layout-content>
+      </a-layout>
+    </div>
+  </div>
+  <KcErrorreportIndexModal ref="kcErrorreportIndexModal"></KcErrorreportIndexModal>
+  <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>
+
+  <KcDetectionMainModal @register="registerModal" ></KcDetectionMainModal>
+</template>
+<script lang="ts" setup name="zhihuijiaoshiIndexPage">
+
+import { defHttp } from '/@/utils/http/axios';
+import { ref, reactive, onMounted, createVNode, h } 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';
+import KcErrorreportIndexModal from '/@/views/kc/kcErrorreport/components/KcErrorreportIndexZbModal.vue'
+import videojs from "video.js";
+import { getSysConfig } from '/@/views/site/utils/index';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { baseApiUrl, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import KcDetectionMainModal from '/@/views/kc/detection/components/KcDetectionMainModal.vue'
+import { useModal } from '/@/components/Modal';
+import { Modal } from 'ant-design-vue';
+import { CloseOutlined } from '@ant-design/icons-vue';
+
+const { createMessage, createInfoModal, createErrorModal } = useMessage();
+
+const mainVideo = ref<any>();
+const bVideoRefs = ref<any>([]);
+const kcErrorreportIndexModal = ref();
+
+const tingKeZuJiAddModal = ref<any>({});
+const curentPlayerVideo = ref<any>({});
+const kcCardBoxTitle = ref<any>('');
+const spyCheck = ref<any>([]);
+const ktangInfo = ref<any>({});
+// const jxdgInfo = ref<any>({});
+const mainVideoCardBoxTitle = ref<any>('');
+const checkTitle = ref<any>('');
+const tableData = ref<Recordable>([])
+const fpData = ref<Recordable>([])
+const suibiList = ref<Recordable>([])
+const isError = ref(false);
+const tkbjVisible = ref(false);
+const playStatus = ref(false);
+const fpxsShow = ref<any>('1');
+  const videoFpName = ref<any>('');
+
+const model = reactive<Record<string, any>>({ notes:'' });
+
+//注册model
+const [registerModal, { openModal }] = useModal();
+
+const route = useRoute();
+
+enum Api {
+  list = '/jiaoshi/kcZhihuijiaoshi/list',
+  querySuibi = '/kc/kcKetangSuibi/list',
+  addSuibi = '/kc/kcKetangSuibi/add',
+  // editSuibi = '/kc/kcKetangSuibi/edit'
+  getKtangInfo = '/ktgl/kcKetangbiao/queryAllDataById',
+  savePlayLog = '/jiaoshi/kcZhihuijiaoshiAccessLog/savePlayLog',
+  changeAvyLiveByJsbhsApi = '/httpinterface/runAvyApiByJsbhs',
+}
+
+/**
+ * 列表接口
+ * @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 savePlayLog = (params) => defHttp.post({ url: Api.savePlayLog, params, }, { isTransformResponse: false });
+const changeAvyLiveByJsbhsApi = (params) => defHttp.get({ url: Api.changeAvyLiveByJsbhsApi, params,timeout: 9000000 });
+// const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });
+
+function handleSpy(record){
+  for(var i=0;i<fpData.value.length;i++){
+    fpData.value[i].sfxs = "0";
+    for(var j=0;j<record.length;j++){
+      if(fpData.value[i].xm == record[j]){
+        fpData.value[i].sfxs = "1";
+        break;
+      }
+    }
+  }
+
+  var ttb = spyCheck.value.join(",").replaceAll(checkTitle.value,"");
+  console.log("🚀 ~ handleSpy ~ ttb:", ttb)
+  var ttc = ttb.split(",").filter(item => item.trim() !== '');
+  console.log("🚀 ~ handleSpy ~ ttc:", ttc)
+  if(ttc.length == 2){
+    videoFpName.value = "className3"
+  }else if(ttc.length == 1){
+    videoFpName.value = "className2"
+  }else{
+    videoFpName.value = ""
+  }
+
+}
+
+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;
+      fpData.value = list;
+      var tta = "";
+      for(var i=0;i<fpData.value.length;i++){
+        var infoa = fpData.value[i].xm;
+        fpData.value[i].sfxs = "1";
+        tta = tta + infoa+",";
+      }
+      spyCheck.value = tta.split(",");
+      console.log("---------------",spyCheck.value);
+      tableData.value.forEach(x => x.isShow = true);//默认展开
+      let zjData = tableData.value.find(x => x.xm == '教师近景') || {};
+      nextTick(() => {
+        if(zjData){
+          changeLive(zjData);
+        }
+        savePlayLogFn(zjData);
+        calcPlayStatus(zjData);
+        tableData.value.forEach(x => x.isShow = false);//关闭
+      })
+    });
+    getSuibi();
+    getKcxx();
+    //记录播放日志
+    isError.value = false;
+
+
+
+  }else{
+    isError.value = true;
+  }
+});
+
+function handleBaocuo(item) {
+  kcErrorreportIndexModal.value.disableSubmit = false;
+  kcErrorreportIndexModal.value.add(item);
+}
+
+
+const listTkjlApi = (params) => defHttp.get({ url: '/kcTingke/kcTingke/findTingKeZuJiBytingketimeAndUserId', params });
+function funpingjia(record) {
+  console.log('11111--------->',record)
+  console.log('222--------->',record.szkc)
+  var item = { ketangbiaoid: record.id };
+  let userid = getUserId();
+  listTkjlApi({ userid: userid, ketangbiaoid: item.ketangbiaoid }).then((res) => {
+    var list = res;
+    console.log(`🚀 ~ file: list.vue:106 ~ listTkjlApi ~ list:`, list);
+    if (list.length > 0) {
+      var score = list[0].score;
+      if (score) {
+        Modal.error({
+          icon: createVNode({}),
+          content: h('div', { style: 'height:200px;text-align:center;' }, [
+            h('icon', { style: 'font-size:80px;font-weight:600;color:red;' }, createVNode(CloseOutlined)),
+            h('p', { style: 'font-size:22px;font-weight:600;color:black;' }, '已经对此课程进行评价，不可重复评价！'),
+          ]),
+          okText: 'OK',
+          width: '500px',
+        });
+      } else {
+        // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+      }
+    } else {
+      // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+    }
+  });
+}
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd(player){
+  nextTick(() => {
+    // player.on('play',() => {
+    //   setTimeout(() => {
+    //     player.pause();
+    //   },2000);
+    // })
+  })
+}
+
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd2(player){
+  nextTick(() => {
+    player.on('play',() => {
+      setTimeout(() => {
+        player.pause();
+      },2000);
+    })
+  })
+}
+
+function initVideo(key){
+  nextTick(() => {
+    let ref = bVideoRefs.value[key];
+    ref.init();
+  })
+}
+
+function changeLive(item:any){
+  fpxsShow.value = '1'
+  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
+  // if(buttonEl){
+  //   buttonEl.dataset.url = url;
+  // }
+
+  curentPlayerVideo.value = item;
+  // nextTick(() => {
+    //增加自动播放功能
+    //mainVideo?.player?.play();
+  // })
+}
+
+
+function changeLive2(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
+  curentPlayerVideo.value = item;
+  checkTitle.value = item.xm;
+}
+
+
+function changeJfpLive(type){
+  fpxsShow.value = type;
+  let item= tableData.value.find(x => x.xm == '教师近景') || {};
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  checkTitle.value = "教师近景";
+  curentPlayerVideo.value = item;
+}
+
+
+function mainVideoLoadEnd(player){
+  setTimeout(() => {
+    setTimeout(() => {
+      player.muted(false);
+      //player.play();
+    },50);
+  },50);
+
+}
+
+function openLive(item: any){
+  changeAvyLiveByJsbhsApi({ jsbhs:item.jsbh, type: 1 }).then(res => {
+    let content = '';
+    res.forEach(x => {
+      // content += x.jsmc + "-" + x.xm
+      content += x.jsmc
+      let text = '';
+      if(x.resText){
+        if(x.resText.includes('ok')){
+          text = '播放失败，开启直播间成功，请稍后再试'
+        }else{
+          text = '播放失败，开启直播间失败，请联系管理员。'
+        }
+      }
+      content += " " + text + "<br/>"
+    });
+    // if(content.includes('开启直播间成功')){
+    //   //延迟12秒
+    //   setTimeout(() => {
+    //     createInfoModal({ width:'50%', title: '结果',content })
+    //   }, 12*1000);
+    // }else{
+    createInfoModal({ width:'50%', title: '结果',content })
+    // }
+
+  }).catch(e => {
+    console.error(e);
+    //loading.value = false;
+    //createInfoModal({title: '错误结果',content:e})
+  })
+}
+
+
+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;
+
+    // defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh: res.rwbh,xqxn: res.xnxq } }).then((res) => {
+    //   if(res){
+    //     jxdgInfo.value = res;
+    //   }
+    // });
+
+  });
+}
+function savePlayLogFn(item){
+  savePlayLog({ playUrl: item.pullUrl, jxlId: item.jxlId, jxlName: item.jxlName, jsbh: route.query.id, jsmc: item.jsmc, ketangbiaoId: route.query.ktId,ketangbiaoName: ktangInfo.value.kcmc })
+}
+
+//计算播放状态
+function calcPlayStatus(item){
+  if(item.pullUrl){
+    videojs.xhr.get(item.pullUrl,(err, resp, body) => {
+      if(err){
+        playStatus.value = false;
+        isError.value = true;
+        openLive(item);
+      }else{
+        playStatus.value = true;
+        isError.value = false;
+      }
+    })
+  }else {
+    console.log(1111111);
+
+    playStatus.value = true;
+    isError.value = true;
+  }
+}
+
+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',
+    pageSize: '-1',
+  };
+  querySuibi(param).then(res => {
+    // model = (res.records??[{}])[0];
+    suibiList.value = res.records??[]
+  }).finally(() => {
+    //关闭等待
+  });
+}
+
+function calcPercentage(averageNum, zrs) {
+  if(averageNum === 0 || zrs === 0){
+    return '0%';
+  }else{
+    return (averageNum / zrs * 100).toFixed(2) + '%';
+  }
+}
+
+function openPdf(miniUrl) {
+  let url2 = getFileAccessHttpUrl(miniUrl)
+  let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
+  window.open(url,"_blank");
+}
+
+function downloadFile(miniUrl) {
+  let url = getFileAccessHttpUrl(miniUrl);
+  window.open(url,"_blank");
+}
+
+function handleZqrs(record){
+  console.log(`🚀 ~ handleZqrs ~ record:`, record)
+  console.log(`🚀 ~ handleZqrs ~ zqrsList:`, record.zqrsList)
+  var a = record.detectionMain;
+  if(record.zqrsList){
+    a.detectionDetailedList = record.zqrsList
+    handleZqrsDetail(a);
+  }else{
+    createMessage.warning("暂无数据！")
+  }
+}
+
+function handleZqrsDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
+
+
+</script>
+<style lang="less" scoped>
+.jxDiv {
+  padding-top: .5rem;
+}
+#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
+}
+
+.helpClass{
+  font-size: 16px;
+    font-weight: 700;
+    /* background: #1c84c6; */
+    color: #1c84c6;
+    border-radius: 5px;
+    padding: 1px 8px;
+    border: 1px #1c84c6 solid;
+    cursor: pointer;
+}
+.handClass{
+  cursor: pointer;
+}
+.fptitle{
+  background: black;
+  color: white;
+  font-weight: 700;
+  text-align: center;
+}
+
+
+.s-video-all {
+  width: 100%;
+  position: relative;
+}
+
+.s-full {
+  text-align: center;
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 70px;
+  color: white;
+  cursor: pointer;
+  background: #c0c0c0;
+  border-radius: 5px;
+}
+
+
+.className3 {
+  margin-top: 50px;
+}
+
+.className2 {
+  margin-top: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/site/common/video/videojs/viewPage copy 4.vue b/src/views/site/common/video/videojs/viewPage copy 4.vue
new file mode 100644
index 0000000..7c4db2e
--- /dev/null
+++ b/src/views/site/common/video/videojs/viewPage copy 4.vue	
@@ -0,0 +1,901 @@
+<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="24">
+                <div>
+                  <a-card class="videoCardMain" style="width:100%">
+                    <template #title>
+                      <span class="" style="border-radius: 5px;">
+                        {{ ktangInfo.kcmc || ' ' }}
+                      </span>
+                      <span style="float: right;margin-left: 10px;background: #1c84c6;color: #fff;padding: 9px;border-radius: 5px;font-size: 16px;" @click="funpingjia(ktangInfo)">填写评价表</span>
+                      <div style="font-size: 12px;">
+                        {{ ktangInfo.zc || ' ' }}&nbsp;&nbsp;{{ ktangInfo.skjs || ' ' }}&nbsp;&nbsp;学分：{{ ktangInfo.xf || ' ' }}
+                        &nbsp;&nbsp;课程性质：{{ ktangInfo.kcxz || ' ' }}
+                        &nbsp;&nbsp;开课单位：{{ ktangInfo.kkdw || ' ' }}
+                        &nbsp;&nbsp;节次：{{ ktangInfo.hh || ' ' }}
+                      </div>
+                      <div style="font-size: 12px;text-wrap: wrap;width: 100%;word-wrap: break-word;" hidden>
+                        课程介绍：{{ ktangInfo?.zyJxdg?.kcjs }}
+                      </div>
+                    </template>
+                    <div style="padding: 1rem;">
+                      <a-row>
+                        <a-col :span="24">
+                          <div style="font-size: 16px;float: left;font-weight: 600;">{{ mainVideoCardBoxTitle || '' }}</div>
+                          <div style="float: right;">
+                            <span>本教室容量：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
+                            <span style="margin-left:15px;">选课人数：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ ktangInfo.xkrs || ' ' }}</span> 
+                            <span style="margin-left:15px;">AI识别出勤人数: <a @click="handleZqrs(ktangInfo)">{{ ktangInfo?.kcDetectionDetailed?.num||'-' }}</a></span>
+                            <span style="margin-left:15px;">
+                              <a-tooltip placement="topRight">
+                                <template #title>
+                                  <span>平台分别在三个时间节点（上课后10分钟，课中50分钟，下课前10分钟）抓取学生全景图片进行AI人流量识别，当前显示的人数为最近一个时间的人数识别</span>
+                                </template>
+                                <!-- <Icon icon="ant-design:question-circle-outlined" /> -->
+                                <span class="helpClass">?</span>
+                              </a-tooltip>
+                            </span> 
+                            
+                          </div>
+                        </a-col>
+                        <a-col :span="24">
+                          <div style="width:100%;display: block;text-align: right;font-size:12px; color: #ccc;">
+                            说明：目前部分教室摄像头拍摄画面无法覆盖到全体学生，AI识别出勤人数仅供参考
+                          </div>
+                        </a-col>
+                      </a-row>
+
+                      <a-row  style="background: black;line-height: 70px;">
+                        <!-- 单屏及双屏显示 -->
+                        <a-col :span="fpxsShow=='1'?24:12" v-show="fpxsShow==1 || fpxsShow==2" style="padding: 4px;">
+                          <div class="s-video-all"  >
+                            <div class="s-video" >
+                              <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true}" @load-end="mainVideoLoadEnd"/>
+                            </div>
+                          </div>
+                        </a-col>
+                        <!-- 双屏显示 -->
+                        <a-col :span="12" v-show="fpxsShow==2">
+                          <div class="s-video-all"  >
+                            <div class="s-video" >
+                              <bVideo ref="mainVideo2" videoId="mainVideo2" :videoOption="{ autoplay: true}" @load-end="loadEnd"/>
+                            </div>
+                          </div>
+                        </a-col>
+                        <!-- 四屏显示 -->
+                        <a-col :span="12" style="padding: 5px;" v-show="fpxsShow=='3' && item.sfxs=='1' && checkTitle != item.xm"  v-for="(item,index) in fpData">
+                          <div class="s-video-all"  >
+                              <div class="s-video" >
+                                <bVideo :key="'other2-'+index" :ref="el=> bVideoRefs['other2-'+item.id] = el" :videoId="'other2-'+item.id" :src="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
+                              </div>
+                              <div class="s-full">
+                                {{item.xm}}
+                              </div>
+                          </div>
+                        </a-col>
+                        <!-- 讲座模式 -->
+                        <!-- 1单屏  2双屏  3四屏  4讲座模式1  5讲座模式2  6讲座模式3 -->
+                        <a-col :span="24" style="padding: 5px;" v-show="fpxsShow=='4'|| fpxsShow=='5' || fpxsShow=='6'" >
+                          <a-row>
+                            <a-col :span="18" style="padding: 4px;">
+                              <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzmsPPTVideo" videoId="mainJzmsPPTVideo" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full" v-if="fpxsShow != '1'">
+                                        PPT
+                                      </div>
+                                  </div>
+                            </a-col>
+                            <a-col :span="6" :style="`margin-top:${fpxsShow=='4'?'130px':fpxsShow=='5'?'80px':''}`">
+                              <a-row :class="videoFpName">
+                                <a-col :span="24" style="padding: 3px;"  v-show="fpxsShow=='4' || fpxsShow=='5' || fpxsShow=='6'">
+                                  <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzms1Video" videoId="mainJzms1Video" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full">
+                                        教师近景
+                                      </div>
+                                  </div>
+                                </a-col>
+                                <a-col :span="24" style="padding: 3px;" v-show="fpxsShow=='5' || fpxsShow=='6'" >
+                                  <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzms2Video" videoId="mainJzms2Video" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full">
+                                        学生全景
+                                      </div>
+                                  </div>
+                                </a-col>
+                                <a-col :span="24" style="padding: 3px;" v-show="fpxsShow=='6'"  >
+                                  <div class="s-video-all"  >
+                                      <div class="s-video" >
+                                        <bVideo ref="mainJzms3Video" videoId="mainJzms3Video" :videoOption="{ autoplay: true, controls: false}" @load-end="loadEnd"/>
+                                      </div>
+                                      <div class="s-full">
+                                        教师全景
+                                      </div>
+                                  </div>
+                                </a-col>
+                              </a-row>
+                            </a-col>
+                          </a-row>
+                        </a-col>
+                        
+                      </a-row>
+
+                      
+                      <a-col span="24" style="background: black;line-height: 70px;">
+                        <a-row style="text-align: center;">
+                          <a-col span="4">
+                            <a-popover>
+                              <template #content>
+                                <a-radio-group v-model:value="spyCheck">
+                                  <template v-for="(item,i) in fpData" :key="i">
+                                    <a-radio :value="item.xm" @click="changeLive(item)">{{ item.xm }}</a-radio><br/>
+                                  </template>
+                                </a-radio-group>
+                              </template>
+                              <a-button type="primary" @click="handlePmms('1')">单屏模式</a-button>
+                            </a-popover>
+                          </a-col>
+                          <a-col span="4">
+                            <a-popover>
+                              <template #content>
+                                <a-row>
+                                  <a-col :span="12">
+                                    <div>左屏幕</div>
+                                    <a-radio-group v-model:value="spyCheck">
+                                      <template v-for="(item,i) in fpData" :key="i">
+                                        <a-radio :value="item.xm" @click="changeLeftLive(item)" >{{ item.xm }}</a-radio><br/>
+                                      </template>
+                                    </a-radio-group>
+                                  </a-col>
+                                  <a-col :span="12">
+                                    <div>右屏幕</div>
+                                    <a-radio-group v-model:value="spy2Check">
+                                      <template v-for="(item,i) in fpData" :key="i">
+                                        <a-radio :value="item.xm" @click="changeRightLive(item)">{{ item.xm }}</a-radio><br/>
+                                      </template>
+                                    </a-radio-group>
+                                  </a-col>
+                                </a-row>
+                              </template>
+                              <a-button type="primary" @click="handlePmms('2')">双屏模式</a-button>
+                            </a-popover>
+                          </a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('3')">四屏模式</a-button></a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('4')">讲座模式1</a-button></a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('5')">讲座模式2</a-button></a-col>
+                          <a-col span="4"><a-button type="primary" @click="handlePmms('6')">讲座模式3</a-button></a-col>
+                        </a-row>
+                      </a-col>
+
+                      
+                      <div class="jxDiv">
+                        <a-space>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学大纲:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.pdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.filePath)">下载</a-button>
+                          </div>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学日历:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.jxrlPdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.jxrlFilePath)">下载</a-button>
+                          </div>
+                        </a-space>
+                      </div>
+                      <div style="width: 100%;margin-top:10px;">
+                        <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: 10px;" @click="saveSuibi">保存听课笔记</a-button>
+                          <a-button type="primary" style="width: 7rem;height: 100%;margin-top: 10px;" @click="handleBaocuo(ktangInfo)">报错</a-button>
+                        </div>
+                      </div>
+                    </div>
+                  </a-card>
+                </div>
+              </a-col>
+              <!-- <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ 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="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd2"/>
+                        </div>
+                      </div>
+                    </a-card>
+                  </a-col> 
+                  <a-col :span="24">
+                    <a-card  :class="`handClass`">
+                      <div>
+                        <div style="margin-bottom: .5rem;">
+                          <span :class="`smallTxt miniButton ${fpxsShow=='2'?'activte':''}`"  @click="changeJfpLive('2')"><i class="fa-solid fa-right-left"></i>分屏模式</span>
+                          <span class="smallTxt miniButton miniButtonRight">
+                            <a-popover>
+                              <template #content>
+                                  <a-checkbox-group v-model:value="spyCheck" @change="handleSpy">
+                                    <template v-for="(item,i) in fpData" :key="i">
+                                      <a-checkbox :value="item.xm">{{ item.xm }}</a-checkbox><br/>
+                                    </template>
+                                  </a-checkbox-group>
+                              </template>
+                              <i class="fa-solid fa-film"></i>视频源
+                            </a-popover>
+                          </span>
+                        </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 v-if="!playStatus">
+                  没有找到直播间
+                </span>
+                <span v-if="playStatus">
+                  {{ getSysConfig()?.videoPlayErrTitle || '直播间暂无内容' }}
+                </span>
+              </template>
+              <!-- <a-button type="primary" @="">关闭</a-button> -->
+            </a-empty>
+          </div>
+        </a-layout-content>
+      </a-layout>
+    </div>
+  </div>
+  <KcErrorreportIndexModal ref="kcErrorreportIndexModal"></KcErrorreportIndexModal>
+  <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>
+
+  <KcDetectionMainModal @register="registerModal" ></KcDetectionMainModal>
+</template>
+<script lang="ts" setup name="zhihuijiaoshiIndexPage">
+
+import { defHttp } from '/@/utils/http/axios';
+import { ref, reactive, onMounted, createVNode, h } 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';
+import KcErrorreportIndexModal from '/@/views/kc/kcErrorreport/components/KcErrorreportIndexZbModal.vue'
+import videojs from "video.js";
+import { getSysConfig } from '/@/views/site/utils/index';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { baseApiUrl, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import KcDetectionMainModal from '/@/views/kc/detection/components/KcDetectionMainModal.vue'
+import { useModal } from '/@/components/Modal';
+import { Modal } from 'ant-design-vue';
+import { CloseOutlined } from '@ant-design/icons-vue';
+
+const { createMessage, createInfoModal, createErrorModal } = useMessage();
+
+const mainVideo = ref<any>();
+const bVideoRefs = ref<any>([]);
+const kcErrorreportIndexModal = ref();
+
+const tingKeZuJiAddModal = ref<any>({});
+const curentPlayerVideo = ref<any>({});
+const kcCardBoxTitle = ref<any>('');
+const spyCheck = ref<any>([]);
+const spy2Check = ref<any>([]);
+const ktangInfo = ref<any>({});
+// const jxdgInfo = ref<any>({});
+const mainVideoCardBoxTitle = ref<any>('');
+const checkTitle = ref<any>('');
+const tableData = ref<Recordable>([])
+const fpData = ref<Recordable>([])
+const suibiList = ref<Recordable>([])
+const isError = ref(false);
+const tkbjVisible = ref(false);
+const playStatus = ref(false);
+const fpxsShow = ref<any>('1');
+  const videoFpName = ref<any>('');
+
+const model = reactive<Record<string, any>>({ notes:'' });
+
+//注册model
+const [registerModal, { openModal }] = useModal();
+
+const route = useRoute();
+
+enum Api {
+  list = '/jiaoshi/kcZhihuijiaoshi/list',
+  querySuibi = '/kc/kcKetangSuibi/list',
+  addSuibi = '/kc/kcKetangSuibi/add',
+  // editSuibi = '/kc/kcKetangSuibi/edit'
+  getKtangInfo = '/ktgl/kcKetangbiao/queryAllDataById',
+  savePlayLog = '/jiaoshi/kcZhihuijiaoshiAccessLog/savePlayLog',
+  changeAvyLiveByJsbhsApi = '/httpinterface/runAvyApiByJsbhs',
+}
+
+/**
+ * 列表接口
+ * @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 savePlayLog = (params) => defHttp.post({ url: Api.savePlayLog, params, }, { isTransformResponse: false });
+const changeAvyLiveByJsbhsApi = (params) => defHttp.get({ url: Api.changeAvyLiveByJsbhsApi, params,timeout: 9000000 });
+// const editSuibi = (params) => defHttp.post({ url: Api.editSuibi, params });
+
+function handleSpy(record){
+  for(var i=0;i<fpData.value.length;i++){
+    fpData.value[i].sfxs = "0";
+    for(var j=0;j<record.length;j++){
+      if(fpData.value[i].xm == record[j]){
+        fpData.value[i].sfxs = "1";
+        break;
+      }
+    }
+  }
+
+  var ttb = spyCheck.value.join(",").replaceAll(checkTitle.value,"");
+  var ttc = ttb.split(",").filter(item => item.trim() !== '');
+  if(ttc.length == 2){
+    videoFpName.value = "className3"
+  }else if(ttc.length == 1){
+    videoFpName.value = "className2"
+  }else{
+    videoFpName.value = ""
+  }
+
+}
+
+/**
+ * 
+ * @param pmtype 1单屏  2双屏  3四屏  4讲座模式1  5讲座模式2  6讲座模式3
+ */
+function handlePmms(pmtype){
+  fpxsShow.value = pmtype;
+
+  if(pmtype == '4'){
+
+    let item= tableData.value.find(x => x.xm == 'PPT') || {};
+    let url = item.pullUrl;
+    let mainJzmsPPTVideo = document.querySelector<any>('#mainJzmsPPTVideo');
+    mainJzmsPPTVideo?.player?.src([{ type:'application/x-mpegURL',src: url }]);
+
+    
+    let item2= tableData.value.find(x => x.xm == '教师近景') || {};
+    let url2 = item2.pullUrl;
+    let mainJzms1Video = document.querySelector<any>('#mainJzms1Video');
+    mainJzms1Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }]);
+  }else if(pmtype == '5'){
+    let item= tableData.value.find(x => x.xm == 'PPT') || {};
+    let url = item.pullUrl;
+    let mainJzmsPPTVideo = document.querySelector<any>('#mainJzmsPPTVideo');
+    mainJzmsPPTVideo?.player?.src([{ type:'application/x-mpegURL',src: url }]);
+
+    
+    let item2= tableData.value.find(x => x.xm == '教师近景') || {};
+    let url2 = item2.pullUrl;
+    let mainJzms1Video = document.querySelector<any>('#mainJzms1Video');
+    mainJzms1Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }]);
+    
+    let item3= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url3 = item3.pullUrl;
+    let mainJzms2Video = document.querySelector<any>('#mainJzms2Video');
+      mainJzms2Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }]);
+
+  }else if(pmtype == '6'){
+    let item= tableData.value.find(x => x.xm == 'PPT') || {};
+    let url = item.pullUrl;
+    let mainJzmsPPTVideo = document.querySelector<any>('#mainJzmsPPTVideo');
+    mainJzmsPPTVideo?.player?.src([{ type:'application/x-mpegURL',src: url }]);
+
+    
+    let item2= tableData.value.find(x => x.xm == '教师近景') || {};
+    let url2 = item2.pullUrl;
+    let mainJzms1Video = document.querySelector<any>('#mainJzms1Video');
+    mainJzms1Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }]);
+    
+    let item3= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url3 = item3.pullUrl;
+    let mainJzms2Video = document.querySelector<any>('#mainJzms2Video');
+      mainJzms2Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }]);
+    
+    let item4= tableData.value.find(x => x.xm == '教师全景') || {};
+    let url4 = item4.pullUrl;
+    let mainJzms3Video = document.querySelector<any>('#mainJzms3Video');
+      mainJzms3Video?.player?.src([{ type:'application/x-mpegURL',src: url4 }]);
+
+  }
+
+
+}
+
+
+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;
+      fpData.value = list;
+      var tta = "";
+      for(var i=0;i<fpData.value.length;i++){
+        var infoa = fpData.value[i].xm;
+        fpData.value[i].sfxs = "1";
+        tta = tta + infoa+",";
+      }
+      spyCheck.value = tta.split(",");
+      console.log("---------------",spyCheck.value);
+      tableData.value.forEach(x => x.isShow = true);//默认展开
+      let zjData = tableData.value.find(x => x.xm == '教师近景') || {};
+      nextTick(() => {
+        if(zjData){
+          changeLive(zjData);
+        }
+        savePlayLogFn(zjData);
+        calcPlayStatus(zjData);
+        tableData.value.forEach(x => x.isShow = false);//关闭
+      })
+    });
+    getSuibi();
+    getKcxx();
+    //记录播放日志
+    isError.value = false;
+
+
+
+  }else{
+    isError.value = true;
+  }
+});
+
+function handleBaocuo(item) {
+  kcErrorreportIndexModal.value.disableSubmit = false;
+  kcErrorreportIndexModal.value.add(item);
+}
+
+
+const listTkjlApi = (params) => defHttp.get({ url: '/kcTingke/kcTingke/findTingKeZuJiBytingketimeAndUserId', params });
+function funpingjia(record) {
+  console.log('11111--------->',record)
+  console.log('222--------->',record.szkc)
+  var item = { ketangbiaoid: record.id };
+  let userid = getUserId();
+  listTkjlApi({ userid: userid, ketangbiaoid: item.ketangbiaoid }).then((res) => {
+    var list = res;
+    console.log(`🚀 ~ file: list.vue:106 ~ listTkjlApi ~ list:`, list);
+    if (list.length > 0) {
+      var score = list[0].score;
+      if (score) {
+        Modal.error({
+          icon: createVNode({}),
+          content: h('div', { style: 'height:200px;text-align:center;' }, [
+            h('icon', { style: 'font-size:80px;font-weight:600;color:red;' }, createVNode(CloseOutlined)),
+            h('p', { style: 'font-size:22px;font-weight:600;color:black;' }, '已经对此课程进行评价，不可重复评价！'),
+          ]),
+          okText: 'OK',
+          width: '500px',
+        });
+      } else {
+        // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+      }
+    } else {
+      // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+    }
+  });
+}
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd(player){
+  nextTick(() => {
+    // player.on('play',() => {
+    //   setTimeout(() => {
+    //     player.pause();
+    //   },2000);
+    // })
+  })
+}
+
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd2(player){
+  nextTick(() => {
+    player.on('play',() => {
+      setTimeout(() => {
+        player.pause();
+      },2000);
+    })
+  })
+}
+
+function initVideo(key){
+  nextTick(() => {
+    let ref = bVideoRefs.value[key];
+    ref.init();
+  })
+}
+
+function changeLive(item:any){
+  fpxsShow.value = '1'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
+  curentPlayerVideo.value = item;
+}
+//选择左屏
+function changeLeftLive(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+}
+
+//选择右屏
+function changeRightLive(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo2');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+}
+
+
+function changeLive2(item:any){
+  fpxsShow.value = '2'
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  mainVideoCardBoxTitle.value = item.jsmc+" "+item.xm;
+  curentPlayerVideo.value = item;
+  checkTitle.value = item.xm;
+}
+
+
+function changeJfpLive(type){
+  fpxsShow.value = type;
+  let item= tableData.value.find(x => x.xm == '教师近景') || {};
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  checkTitle.value = "教师近景";
+  curentPlayerVideo.value = item;
+}
+
+
+function mainVideoLoadEnd(player){
+  setTimeout(() => {
+    setTimeout(() => {
+      player.muted(false);
+      //player.play();
+    },50);
+  },50);
+
+}
+
+function openLive(item: any){
+  changeAvyLiveByJsbhsApi({ jsbhs:item.jsbh, type: 1 }).then(res => {
+    let content = '';
+    res.forEach(x => {
+      // content += x.jsmc + "-" + x.xm
+      content += x.jsmc
+      let text = '';
+      if(x.resText){
+        if(x.resText.includes('ok')){
+          text = '播放失败，开启直播间成功，请稍后再试'
+        }else{
+          text = '播放失败，开启直播间失败，请联系管理员。'
+        }
+      }
+      content += " " + text + "<br/>"
+    });
+    // if(content.includes('开启直播间成功')){
+    //   //延迟12秒
+    //   setTimeout(() => {
+    //     createInfoModal({ width:'50%', title: '结果',content })
+    //   }, 12*1000);
+    // }else{
+    createInfoModal({ width:'50%', title: '结果',content })
+    // }
+
+  }).catch(e => {
+    console.error(e);
+    //loading.value = false;
+    //createInfoModal({title: '错误结果',content:e})
+  })
+}
+
+
+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;
+
+    // defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh: res.rwbh,xqxn: res.xnxq } }).then((res) => {
+    //   if(res){
+    //     jxdgInfo.value = res;
+    //   }
+    // });
+
+  });
+}
+function savePlayLogFn(item){
+  savePlayLog({ playUrl: item.pullUrl, jxlId: item.jxlId, jxlName: item.jxlName, jsbh: route.query.id, jsmc: item.jsmc, ketangbiaoId: route.query.ktId,ketangbiaoName: ktangInfo.value.kcmc })
+}
+
+//计算播放状态
+function calcPlayStatus(item){
+  if(item.pullUrl){
+    videojs.xhr.get(item.pullUrl,(err, resp, body) => {
+      if(err){
+        playStatus.value = false;
+        isError.value = true;
+        openLive(item);
+      }else{
+        playStatus.value = true;
+        isError.value = false;
+      }
+    })
+  }else {
+    console.log(1111111);
+
+    playStatus.value = true;
+    isError.value = true;
+  }
+}
+
+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',
+    pageSize: '-1',
+  };
+  querySuibi(param).then(res => {
+    // model = (res.records??[{}])[0];
+    suibiList.value = res.records??[]
+  }).finally(() => {
+    //关闭等待
+  });
+}
+
+function calcPercentage(averageNum, zrs) {
+  if(averageNum === 0 || zrs === 0){
+    return '0%';
+  }else{
+    return (averageNum / zrs * 100).toFixed(2) + '%';
+  }
+}
+
+function openPdf(miniUrl) {
+  let url2 = getFileAccessHttpUrl(miniUrl)
+  let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
+  window.open(url,"_blank");
+}
+
+function downloadFile(miniUrl) {
+  let url = getFileAccessHttpUrl(miniUrl);
+  window.open(url,"_blank");
+}
+
+function handleZqrs(record){
+  console.log(`🚀 ~ handleZqrs ~ record:`, record)
+  console.log(`🚀 ~ handleZqrs ~ zqrsList:`, record.zqrsList)
+  var a = record.detectionMain;
+  if(record.zqrsList){
+    a.detectionDetailedList = record.zqrsList
+    handleZqrsDetail(a);
+  }else{
+    createMessage.warning("暂无数据！")
+  }
+}
+
+function handleZqrsDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
+
+
+</script>
+<style lang="less" scoped>
+.jxDiv {
+  padding-top: .5rem;
+}
+#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
+}
+
+.helpClass{
+  font-size: 16px;
+    font-weight: 700;
+    /* background: #1c84c6; */
+    color: #1c84c6;
+    border-radius: 5px;
+    padding: 1px 8px;
+    border: 1px #1c84c6 solid;
+    cursor: pointer;
+}
+.handClass{
+  cursor: pointer;
+}
+.fptitle{
+  background: black;
+  color: white;
+  font-weight: 700;
+  text-align: center;
+}
+
+
+.s-video-all {
+  width: 100%;
+  position: relative;
+}
+
+.s-full {
+  text-align: center;
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 70px;
+  color: white;
+  cursor: pointer;
+  background: #c0c0c0;
+  border-radius: 5px;
+  height: 30px;
+  line-height: 30px;
+}
+
+
+.className3 {
+  margin-top: 50px;
+}
+
+.className2 {
+  margin-top: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/site/common/video/videojs/viewPage copy.vue b/src/views/site/common/video/videojs/viewPage copy.vue
new file mode 100644
index 0000000..1696759
--- /dev/null
+++ b/src/views/site/common/video/videojs/viewPage copy.vue	
@@ -0,0 +1,680 @@
+<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 :xs="{ span: 24 }" :sm="{ span: 19 }" :lg="{ span: 19 }">
+                <div>
+                  <a-card class="videoCardMain" style="width:100%">
+                    <template #title>
+                      <span class="" style="border-radius: 5px;">
+                        {{ ktangInfo.kcmc || ' ' }}
+                      </span>
+                      <span style="float: right;margin-left: 10px;background: #1c84c6;color: #fff;padding: 9px;border-radius: 5px;font-size: 16px;" @click="funpingjia(ktangInfo)">填写评价表</span>
+                      <div style="font-size: 12px;">
+                        {{ ktangInfo.zc || ' ' }}&nbsp;&nbsp;{{ ktangInfo.skjs || ' ' }}&nbsp;&nbsp;学分：{{ ktangInfo.xf || ' ' }}
+                        &nbsp;&nbsp;课程性质：{{ ktangInfo.kcxz || ' ' }}
+                        &nbsp;&nbsp;开课单位：{{ ktangInfo.kkdw || ' ' }}
+                        &nbsp;&nbsp;节次：{{ ktangInfo.hh || ' ' }}
+                      </div>
+                      <div style="font-size: 12px;text-wrap: wrap;width: 100%;word-wrap: break-word;" hidden>
+                        课程介绍：{{ ktangInfo?.zyJxdg?.kcjs }}
+                      </div>
+                    </template>
+                    <div style="padding: 1rem;">
+                      <a-row>
+                        <a-col :span="24">
+                          <div style="font-size: 16px;float: left;font-weight: 600;">{{ mainVideoCardBoxTitle || '' }}</div>
+                          <div style="float: right;">
+                            <span>本教室容量：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ktangInfo?.jiaoshirongliang?.jsrl || ' '}}座位</span>
+                            <span style="margin-left:15px;">选课人数：</span><span style="font-size: 14px; color:#1c84c6 ;">{{ ktangInfo.xkrs || ' ' }}</span> 
+                            <span style="margin-left:15px;">AI识别出勤人数: <a @click="handleZqrs(ktangInfo)">{{ ktangInfo?.kcDetectionDetailed?.num||'-' }}</a></span>
+                            <span style="margin-left:15px;">
+                              <a-tooltip placement="topRight">
+                                <template #title>
+                                  <span>平台分别在三个时间节点（上课后10分钟，课中50分钟，下课前10分钟）抓取学生全景图片进行AI人流量识别，当前显示的人数为最近一个时间的人数识别</span>
+                                </template>
+                                <!-- <Icon icon="ant-design:question-circle-outlined" /> -->
+                                <span class="helpClass">?</span>
+                              </a-tooltip>
+                            </span> 
+                            
+                          </div>
+                        </a-col>
+                        <a-col :span="24">
+                          <div style="width:100%;display: block;text-align: right;font-size:12px; color: #ccc;">
+                            说明：目前部分教室摄像头拍摄画面无法覆盖到全体学生，AI识别出勤人数仅供参考
+                          </div>
+                        </a-col>
+                      </a-row>
+                      <a-row>
+                        <a-col :span="fpxsShow=='1'?24:12">
+                          <div v-if="fpxsShow != '1'" class="fptitle">教师近景</div>
+                          <div style="height: 1px;background-color: black;width:100%;">&nbsp;</div>
+                          <bVideo ref="mainVideo" videoId="mainVideo" :videoOption="{ autoplay: true }" @load-end="mainVideoLoadEnd"/>
+                        </a-col>
+                        <a-col :span="12" v-show="fpxsShow=='2' || fpxsShow=='3' || fpxsShow=='4'">
+                          <div class="fptitle">学生全景</div>
+                          <div style="height: 1px;background-color: black;width:100%;">&nbsp;</div>
+                          <bVideo ref="main2Video" videoId="main2Video" :videoOption="{ autoplay: true }" @load-end="loadEnd"/>
+                        </a-col>
+                        <a-col :span="12" v-show="fpxsShow=='3' || fpxsShow=='4'">
+                          <div class="fptitle">PPT</div>
+                          <div style="height: 1px;background-color: black;width:100%;">&nbsp;</div>
+                          <bVideo ref="main3Video" videoId="main3Video" :videoOption="{ autoplay: true }" @load-end="loadEnd"/>
+                        </a-col>
+                        <a-col :span="12" v-show="fpxsShow=='4'">
+                          <div class="fptitle">教师全景</div>
+                          <div style="height: 1px;background-color: black;width:100%;">&nbsp;</div>
+                          <bVideo ref="main4Video" videoId="main4Video" :videoOption="{ autoplay: true }" @load-end="loadEnd"/>
+                        </a-col>
+                      </a-row>
+                      
+                      <div class="jxDiv">
+                        <a-space>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学大纲:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.pdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.filePath)">下载</a-button>
+                          </div>
+                          <div v-if="ktangInfo?.zyJxdg?.filePath">
+                            教学日历:
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="openPdf(ktangInfo?.zyJxdg?.jxrlPdfPath)">预览</a-button>
+                            <a-button type="primary" size="small" style="margin-left:10px;" @click="downloadFile(ktangInfo?.zyJxdg?.jxrlFilePath)">下载</a-button>
+                          </div>
+                        </a-space>
+                      </div>
+                      <div style="width: 100%;margin-top:10px;">
+                        <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: 10px;" @click="saveSuibi">保存听课笔记</a-button>
+                          <a-button type="primary" style="width: 7rem;height: 100%;margin-top: 10px;" @click="handleBaocuo(ktangInfo)">报错</a-button>
+                        </div>
+                      </div>
+                    </div>
+                  </a-card>
+                </div>
+              </a-col>
+              <a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 5 }">
+                <a-row>
+                  <a-col :span="24" v-for="(item,index) of tableData" style="text-align: center;" :key="'col-'+index"  @click="changeLive(item)">
+                    <a-card :class="`handClass`">
+                      <div>
+                        <div style="margin-bottom: .5rem;">
+                          <span class="smallTxt miniButton" :class="item.id == curentPlayerVideo.id && fpxsShow=='1'?'activte':''">
+                            <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="item.pullUrl" :videoOption="{ autoplay: true, controls: false }" @load-end="loadEnd"/>
+                        </div> -->
+                      </div>
+                    </a-card>
+                  </a-col>
+                  <a-col :span="24">
+                    <a-card @click="changeJfpLive('2')" :class="`handClass`">
+                      <div>
+                        <div style="margin-bottom: .5rem;">
+                          <span :class="`smallTxt miniButton ${fpxsShow=='2'?'activte':''}`" ><i class="fa-solid fa-film"></i>二分屏</span>
+                        </div>
+                      </div>
+                    </a-card>
+                  </a-col>
+                  <a-col :span="24">
+                    <a-card @click="changeJfpLive('3')" class="handClass">
+                      <div >
+                        <div style="margin-bottom: .5rem;">
+                          <span :class="`smallTxt miniButton ${fpxsShow=='3'?'activte':''}`" ><i class="fa-solid fa-film"></i>三分屏</span>
+                        </div>
+                      </div>
+                    </a-card>
+                  </a-col>
+                  <a-col :span="24">
+                    <a-card @click="changeJfpLive('4')" class="handClass">
+                      <div >
+                        <div style="margin-bottom: .5rem;">
+                          <span :class="`smallTxt miniButton ${fpxsShow=='4'?'activte':''}`" ><i class="fa-solid fa-film"></i>四分屏</span>
+                        </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 v-if="!playStatus">
+                  没有找到直播间
+                </span>
+                <span v-if="playStatus">
+                  {{ getSysConfig()?.videoPlayErrTitle || '直播间暂无内容' }}
+                </span>
+              </template>
+              <!-- <a-button type="primary" @="">关闭</a-button> -->
+            </a-empty>
+          </div>
+        </a-layout-content>
+      </a-layout>
+    </div>
+  </div>
+  <KcErrorreportIndexModal ref="kcErrorreportIndexModal"></KcErrorreportIndexModal>
+  <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>
+
+  <KcDetectionMainModal @register="registerModal" ></KcDetectionMainModal>
+</template>
+<script lang="ts" setup name="zhihuijiaoshiIndexPage">
+
+import { defHttp } from '/@/utils/http/axios';
+import { ref, reactive, onMounted, createVNode, h } 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';
+import KcErrorreportIndexModal from '/@/views/kc/kcErrorreport/components/KcErrorreportIndexZbModal.vue'
+import videojs from "video.js";
+import { getSysConfig } from '/@/views/site/utils/index';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { baseApiUrl, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import KcDetectionMainModal from '/@/views/kc/detection/components/KcDetectionMainModal.vue'
+import { useModal } from '/@/components/Modal';
+import { Modal } from 'ant-design-vue';
+import { CloseOutlined } from '@ant-design/icons-vue';
+
+const { createMessage, createInfoModal, createErrorModal } = useMessage();
+
+const mainVideo = ref<any>();
+const bVideoRefs = ref<any>([]);
+const kcErrorreportIndexModal = ref();
+
+const tingKeZuJiAddModal = ref<any>({});
+const curentPlayerVideo = ref<any>({});
+const kcCardBoxTitle = ref<any>('');
+const ktangInfo = ref<any>({});
+// const jxdgInfo = ref<any>({});
+const mainVideoCardBoxTitle = ref<any>('');
+const tableData = ref<Recordable>([])
+const suibiList = ref<Recordable>([])
+const isError = ref(false);
+const tkbjVisible = ref(false);
+const playStatus = ref(false);
+const fpxsShow = ref<any>('1');
+
+const model = reactive<Record<string, any>>({ notes:'' });
+
+//注册model
+const [registerModal, { openModal }] = useModal();
+
+const route = useRoute();
+
+enum Api {
+  list = '/jiaoshi/kcZhihuijiaoshi/list',
+  querySuibi = '/kc/kcKetangSuibi/list',
+  addSuibi = '/kc/kcKetangSuibi/add',
+  // editSuibi = '/kc/kcKetangSuibi/edit'
+  getKtangInfo = '/ktgl/kcKetangbiao/queryAllDataById',
+  savePlayLog = '/jiaoshi/kcZhihuijiaoshiAccessLog/savePlayLog',
+  changeAvyLiveByJsbhsApi = '/httpinterface/runAvyApiByJsbhs',
+}
+
+/**
+ * 列表接口
+ * @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 savePlayLog = (params) => defHttp.post({ url: Api.savePlayLog, params, }, { isTransformResponse: false });
+const changeAvyLiveByJsbhsApi = (params) => defHttp.get({ url: Api.changeAvyLiveByJsbhsApi, params,timeout: 9000000 });
+// 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) ?? [];
+      console.log("🚀 ~ list ~ list:", list)
+      tableData.value = list;
+      tableData.value.forEach(x => x.isShow = true);//默认展开
+      let zjData = tableData.value.find(x => x.xm == '教师近景') || {};
+      nextTick(() => {
+        if(zjData){
+          changeLive(zjData);
+        }
+        savePlayLogFn(zjData);
+        calcPlayStatus(zjData);
+        tableData.value.forEach(x => x.isShow = false);//关闭
+      })
+    });
+    getSuibi();
+    getKcxx();
+    //记录播放日志
+    isError.value = false;
+  }else{
+    isError.value = true;
+  }
+});
+
+function handleBaocuo(item) {
+  kcErrorreportIndexModal.value.disableSubmit = false;
+  kcErrorreportIndexModal.value.add(item);
+}
+
+
+const listTkjlApi = (params) => defHttp.get({ url: '/kcTingke/kcTingke/findTingKeZuJiBytingketimeAndUserId', params });
+function funpingjia(record) {
+  console.log('11111--------->',record)
+  console.log('222--------->',record.szkc)
+  var item = { ketangbiaoid: record.id };
+  let userid = getUserId();
+  listTkjlApi({ userid: userid, ketangbiaoid: item.ketangbiaoid }).then((res) => {
+    var list = res;
+    console.log(`🚀 ~ file: list.vue:106 ~ listTkjlApi ~ list:`, list);
+    if (list.length > 0) {
+      var score = list[0].score;
+      if (score) {
+        Modal.error({
+          icon: createVNode({}),
+          content: h('div', { style: 'height:200px;text-align:center;' }, [
+            h('icon', { style: 'font-size:80px;font-weight:600;color:red;' }, createVNode(CloseOutlined)),
+            h('p', { style: 'font-size:22px;font-weight:600;color:black;' }, '已经对此课程进行评价，不可重复评价！'),
+          ]),
+          okText: 'OK',
+          width: '500px',
+        });
+      } else {
+        // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+      }
+    } else {
+      // tingKeZuJiAddModal.value.view(item);
+      tingKeZuJiAddModal.value.view({ ketangbiaoid: route.query.ktId,szkc:record.szkc })
+    }
+  });
+}
+/**
+ * 子页加载完成后回调
+ * @param player
+ */
+ function loadEnd(player){
+  nextTick(() => {
+    // player.on('play',() => {
+    //   setTimeout(() => {
+    //     player.pause();
+    //   },2000);
+    // })
+  })
+}
+
+function initVideo(key){
+  nextTick(() => {
+    let ref = bVideoRefs.value[key];
+    ref.init();
+  })
+}
+
+function changeLive(item:any){
+  fpxsShow.value = '1'
+  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
+  // if(buttonEl){
+  //   buttonEl.dataset.url = url;
+  // }
+
+  curentPlayerVideo.value = item;
+  // nextTick(() => {
+    //增加自动播放功能
+    //mainVideo?.player?.play();
+  // })
+}
+
+
+function changeJfpLive(type){
+  fpxsShow.value = type;
+  let item= tableData.value.find(x => x.xm == '教师近景') || {};
+  let url = item.pullUrl
+  let mainVideo = document.querySelector<any>('#mainVideo');
+  mainVideo?.player?.src([{ type:'application/x-mpegURL',src: url }])
+  if(type==2){
+    let item2= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url2 = item2.pullUrl
+    let main2Video = document.querySelector<any>('#main2Video');
+    main2Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }])
+    mainVideoCardBoxTitle.value = "二分屏";
+  }else if(type == 3){
+    
+    let item2= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url2 = item2.pullUrl
+    let main2Video = document.querySelector<any>('#main2Video');
+    main2Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }])
+    mainVideoCardBoxTitle.value = "二分屏";
+
+    let item3 = tableData.value.find(x => x.xm == 'PPT') || {};
+    let url3 = item3.pullUrl
+    let main3Video = document.querySelector<any>('#main3Video');
+    main3Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }])
+    mainVideoCardBoxTitle.value = "三分屏";
+  }else if(type == 4){
+    
+    let item2= tableData.value.find(x => x.xm == '学生全景') || {};
+    let url2 = item2.pullUrl
+    let main2Video = document.querySelector<any>('#main2Video');
+    main2Video?.player?.src([{ type:'application/x-mpegURL',src: url2 }])
+    mainVideoCardBoxTitle.value = "二分屏";
+    
+    let item3 = tableData.value.find(x => x.xm == 'PPT') || {};
+    let url3 = item3.pullUrl
+    let main3Video = document.querySelector<any>('#main3Video');
+    main3Video?.player?.src([{ type:'application/x-mpegURL',src: url3 }])
+    mainVideoCardBoxTitle.value = "三分屏";
+
+    let item4 = tableData.value.find(x => x.xm == '教师全景') || {};
+    let url4 = item4.pullUrl
+    let main4Video = document.querySelector<any>('#main4Video');
+    main4Video?.player?.src([{ type:'application/x-mpegURL',src: url4 }])
+    mainVideoCardBoxTitle.value = "四分屏";
+  }
+  
+}
+
+
+function mainVideoLoadEnd(player){
+  setTimeout(() => {
+    setTimeout(() => {
+      player.muted(false);
+      //player.play();
+    },50);
+  },50);
+
+}
+
+function openLive(item: any){
+  changeAvyLiveByJsbhsApi({ jsbhs:item.jsbh, type: 1 }).then(res => {
+    let content = '';
+    res.forEach(x => {
+      // content += x.jsmc + "-" + x.xm
+      content += x.jsmc
+      let text = '';
+      if(x.resText){
+        if(x.resText.includes('ok')){
+          text = '播放失败，开启直播间成功，请稍后再试'
+        }else{
+          text = '播放失败，开启直播间失败，请联系管理员。'
+        }
+      }
+      content += " " + text + "<br/>"
+    });
+    // if(content.includes('开启直播间成功')){
+    //   //延迟12秒
+    //   setTimeout(() => {
+    //     createInfoModal({ width:'50%', title: '结果',content })
+    //   }, 12*1000);
+    // }else{
+    createInfoModal({ width:'50%', title: '结果',content })
+    // }
+
+  }).catch(e => {
+    console.error(e);
+    //loading.value = false;
+    //createInfoModal({title: '错误结果',content:e})
+  })
+}
+
+
+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;
+
+    // defHttp.get({ url: '/zyJxdg/zyJxdg/getKcjsJxdg', params: { rwbh: res.rwbh,xqxn: res.xnxq } }).then((res) => {
+    //   if(res){
+    //     jxdgInfo.value = res;
+    //   }
+    // });
+
+  });
+}
+function savePlayLogFn(item){
+  savePlayLog({ playUrl: item.pullUrl, jxlId: item.jxlId, jxlName: item.jxlName, jsbh: route.query.id, jsmc: item.jsmc, ketangbiaoId: route.query.ktId,ketangbiaoName: ktangInfo.value.kcmc })
+}
+
+//计算播放状态
+function calcPlayStatus(item){
+  if(item.pullUrl){
+    videojs.xhr.get(item.pullUrl,(err, resp, body) => {
+      if(err){
+        playStatus.value = false;
+        isError.value = true;
+        openLive(item);
+      }else{
+        playStatus.value = true;
+        isError.value = false;
+      }
+    })
+  }else {
+    console.log(1111111);
+
+    playStatus.value = true;
+    isError.value = true;
+  }
+}
+
+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',
+    pageSize: '-1',
+  };
+  querySuibi(param).then(res => {
+    // model = (res.records??[{}])[0];
+    suibiList.value = res.records??[]
+  }).finally(() => {
+    //关闭等待
+  });
+}
+
+function calcPercentage(averageNum, zrs) {
+  if(averageNum === 0 || zrs === 0){
+    return '0%';
+  }else{
+    return (averageNum / zrs * 100).toFixed(2) + '%';
+  }
+}
+
+function openPdf(miniUrl) {
+  let url2 = getFileAccessHttpUrl(miniUrl)
+  let url = baseApiUrl+"/generic/web/viewer.html?file="+encodeURIComponent(url2);
+  window.open(url,"_blank");
+}
+
+function downloadFile(miniUrl) {
+  let url = getFileAccessHttpUrl(miniUrl);
+  window.open(url,"_blank");
+}
+
+function handleZqrs(record){
+  console.log(`🚀 ~ handleZqrs ~ record:`, record)
+  console.log(`🚀 ~ handleZqrs ~ zqrsList:`, record.zqrsList)
+  var a = record.detectionMain;
+  if(record.zqrsList){
+    a.detectionDetailedList = record.zqrsList
+    handleZqrsDetail(a);
+  }else{
+    createMessage.warning("暂无数据！")
+  }
+}
+
+function handleZqrsDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
+
+
+</script>
+<style lang="less" scoped>
+.jxDiv {
+  padding-top: .5rem;
+}
+#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
+}
+
+.helpClass{
+  font-size: 16px;
+    font-weight: 700;
+    /* background: #1c84c6; */
+    color: #1c84c6;
+    border-radius: 5px;
+    padding: 1px 8px;
+    border: 1px #1c84c6 solid;
+    cursor: pointer;
+}
+.handClass{
+  cursor: pointer;
+}
+.fptitle{
+  background: black;
+  color: white;
+  font-weight: 700;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/zy/zyInfo/components/ZyInfoDetailForm copy.vue b/src/views/zy/zyInfo/components/ZyInfoDetailForm copy.vue
new file mode 100644
index 0000000..fc2ea9d
--- /dev/null
+++ b/src/views/zy/zyInfo/components/ZyInfoDetailForm copy.vue	
@@ -0,0 +1,489 @@
+<template>
+  <a-spin :spinning="confirmLoading" >
+    <a-form ref="formRef" style="background:#f9f9f9;" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <a-row>
+        <a-col :span="24">
+          <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-row>
+              <div class="wrapper-back">
+                <div class="wrapper-title">基本信息</div>
+                <a-col :span="24">
+                  <a-form-item label="作业题目">
+                    <span class="spanb-word">{{ formData.title }}</span>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24" v-if="dataKhnr.length > 0">
+                  <a-form-item label="考察内容">
+                    <a-table :columns="columnsKhnr" class="spanb-word" rowKey="id" :data-source="dataKhnr" :pagination="false" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="作业截止时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
+                    <span class="spanb-word">{{ formData.endTime }}</span>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="作业发布时间" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
+                    <span class="spanb-word">{{ formData.startTime }}</span>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                  <a-form-item label="作业要求">
+                    <div class="spanb-word" style="margin-top:5px" v-html="formData.content"></div>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24" v-if="formData.filePath">
+                  <a-form-item label="参考资料">
+                    <span>{{ lastString(formData.filePath) }}</span>
+                    <a-button type="primary" style="margin-left: 10px" @click="downLoad(formData.filePath)">下载</a-button>
+                  </a-form-item>
+                </a-col>
+
+                <a-col :span="24" v-show="formData.sturead == '1' && formData.pfbz">
+                  <a-form-item label="评分标准" layout="inline">
+                    <div class="spanb-word" style="margin-top:5px" v-html="formData.pfbz"></div>
+                  </a-form-item>
+                </a-col>
+              </div>
+              <a-col :span="24" v-if="formData.wwtgl" class="wrapper-back">
+                <div class="wrapper-title">查重设置</div>
+                <a-form-item layout="inline" style="margin-left: 100px">
+                  <a-form-item label="检测通过率" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
+                    <span style="padding: 7px 10px"></span>
+                    <a-input-number v-model:value="formData.wwtgl" placeholder="检测通过率" style="width: 60%" :max="100" :min="0" disabled>
+                      <template #addonAfter> % </template>
+                    </a-input-number>
+                  </a-form-item>
+                  <a-form-item label="比对库设置" :labelCol="labelCol3" :wrapperCol="wrapperCol3">
+                    <div style="padding: 7px 20px">维普</div>
+                    <div style="padding: 0 10px">
+                      <a-checkbox v-model:checked="formData.wwcc" style="margin-left: 10px;" disabled>
+                        <span class="Check-title">维普资源库查重：</span><br>
+                        <span class="Check-concent">中文科技期刊数据库、硕博学位论文库、高校特色论文库、互联网数据资源/互联网文档资源</span>
+                      </a-checkbox>
+                      <a-checkbox v-model:checked="formData.xncc" disabled>
+                        <span class="Check-title">学校作业库查重：</span><br>
+                        <span class="Check-concent">历届学生提供的作业库内查重</span>
+                      </a-checkbox>
+                      <a-checkbox v-model:checked="formData.nwcc" disabled>
+                        <span class="Check-title">本次作业查重：</span><br>
+                        <span class="Check-concent">本次学生提交的作业间查重</span>
+                      </a-checkbox>
+                    </div>
+                    <div style="padding: 7px 20px">AIGC</div>
+                    <div style="padding: 0 10px">
+                      <a-checkbox v-model:checked="formData.aigccc" style="margin-left: 10px" disabled>
+                         <span class="Check-title">AIGC查重：</span><br>
+                         <span class="Check-concent">检测作业是否部分或全部由AI模型生成</span>
+                     </a-checkbox>
+                    </div>
+                  </a-form-item>
+                </a-form-item>
+              </a-col>
+
+              <a-col v-show="formData.pyContent || formData.pyFilePath|| formData.score">
+                <div class="wrapper-back">
+                  <div class="wrapper-title">批阅信息</div>
+                  <a-row>
+                    <a-col :span="24" v-if="formData.pyContent">
+                      <a-form-item label="批阅内容" layout="inline">
+                        <div class="spanb-word" style="margin-top:5px" v-html="formData.pyContent"></div>
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="24" v-if="formData.pyFilePath">
+                      <a-form-item label="批阅附件">
+                        <span>{{ lastString(formData.pyFilePath) }}</span>
+                        <a-button type="primary" style="margin-left: 10px" @click="downLoad(formData.pyFilePath)">下载</a-button>
+                      </a-form-item>
+                    </a-col>
+                    <a-col :span="24" v-show="showType == '1'">
+                      <div class="wps-iframe" id="wpsiframeid" style="width:100%;height: 500px;"></div>
+                    </a-col>
+                  </a-row>
+                </div>
+              </a-col>
+
+
+            </a-row>
+          </a-form>
+        </a-col>
+        <!-- <a-col :span="24">
+          <span class="spana">作业分值：{{formData.score?formData.score:'未填写'}}</span>
+        </a-col>
+        <a-col :span="24">
+          <span class="spana">描述：
+            <span v-if="formData.content">
+              {{formData.content}}
+            </span>
+            <span v-else>暂无内容</span>
+          </span>
+        </a-col>
+        <a-col :span="12">
+          <span class="spana">附件：
+            <span v-if="formData.filePath">
+              <a-button  :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(formData.filePath)"> 下载 </a-button>
+            </span>
+            <span v-else>暂无内容</span>
+          </span>
+        </a-col>
+        <a-col :span="12">
+          <span class="spana">上传时间：{{formData.startTime}} ~ {{formData.endTime}}</span>
+        </a-col>
+        <a-col :span="12">
+          <span class="spana">是否网络查重：{{formData.wwcc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.wwtgl?formData.wwtgl+"%":'未配置'}}</span>
+        </a-col>
+        <a-col :span="12">
+          <span class="spana">是否课程内查重：{{formData.nwcc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.nwtgl?formData.nwtgl+"%":'未配置'}}</span>
+        </a-col>
+        <a-col :span="12">
+          <span class="spana">Aigc是否查重：{{formData.aigccc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.aigctgl?formData.aigctgl+"%":'未配置'}}</span>
+        </a-col>
+        <a-col :span="12">
+          <span class="spana">是否校内查重：{{formData.xncc=='0'?'否':'是'}}</span> <span class="spanb">网络通过率：{{formData.xntgl?formData.xntgl+"%":'未配置'}}</span>
+        </a-col> -->
+      </a-row>
+    </a-form>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, unref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { getValueType } from '/@/utils';
+import { saveOrUpdate } from '../ZyInfo.api';
+import { Form } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+import dayjs, { Dayjs } from 'dayjs';
+import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import WebOfficeSDK from '/@/views/zy/zyInfoStudent/components/wpsApi/web-office-sdk-solution-v2.0.7.es'
+
+import { downloadFile } from '/@/utils/common/renderUtils';
+import { useUserStore } from '/@/store/modules/user';
+
+const userStore = useUserStore();
+//当前路由信息
+const { currentRoute } = useRouter();
+const { query } = unref(currentRoute);
+const { rwbh } = query; //获取传递参数
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => {} },
+  formBpm: { type: Boolean, default: true },
+});
+const showType = ref<string>('0');
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok']);
+const dataKhnr = ref<any>([]);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  title: '',
+  zyType: '0',
+  content: '',
+  filePath: '',
+  startTime: '',
+  endTime: '',
+  wwcc: '0',
+  wwtgl: undefined,
+  nwcc: '0',
+  nwtgl: undefined,
+  aigccc: '0',
+  aigctgl: undefined,
+  rwbh: '',
+  xncc: '0',
+  xntgl: undefined,
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+// const labelCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 3 } });
+// const wrapperCol2 = ref<any>({ xs: { span: 24 }, sm: { span: 20 } });
+
+const labelCol2 = reactive({
+  sm: { span: 10 },
+});
+const wrapperCol2 = reactive({
+  sm: { span: 10 },
+});
+const labelCol3 = reactive({
+  sm: { span: 4 },
+});
+const wrapperCol3 = reactive({
+  sm: { span: 20 },
+});
+
+const confirmLoading = ref<boolean>(false);
+//表单验证
+const validatorRules = {
+  title: [{ required: true, message: '请输入作业名称!' }],
+  // zyType: [{ required: true, message: '请输入类型!'},],
+  startTime: [{ required: true, message: '请输入开始时间!' }],
+  endTime: [{ required: true, message: '请输入结束时间!' }],
+  wwcc: [{ required: true, message: '请输入外网是否查重!' }],
+  wwtgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
+  nwcc: [{ required: true, message: '请输入内网查重!' }],
+  nwtgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
+  aigccc: [{ required: true, message: '请输入aigc查重!' }],
+  aigctgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
+  xncc: [{ required: true, message: '请输入aigc查重!' }],
+  xntgl: [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }],
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
+const disabledDate = (current: Dayjs) => {
+  return current && current < dayjs().subtract(1, 'days').endOf('day');
+};
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+const columnsKhnr = [
+  {
+    title: '序号',
+    dataIndex: 'no',
+    key: 'no',
+    customRender: (text) => {
+      return text.index + 1;
+    },
+    width: 80,
+  },
+  {
+    title: '章次',
+    dataIndex: 'title',
+    key: 'title',
+  },
+  {
+    title: '节次',
+    dataIndex: 'twoTitle',
+    key: 'twoTitle',
+  },
+];
+
+function downLoad(file) {
+  if (file) {
+    let url = getFileAccessHttpUrl(file);
+    if (url) {
+      window.open(url);
+    }
+  } else {
+    createMessage.warning('暂无文件或文件上传中');
+  }
+}
+
+/**
+ * 新增
+ */
+function add() {
+  edit({ rwbh });
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  console.log("🚀 ~ edit ~ record:", record)
+  nextTick(() => {
+    resetFields();
+    //赋值
+    Object.assign(formData, record);
+    handleKcnr(formData.kcnr);
+
+
+    const parts = record.stuFilePath.split('.');
+      const filetype = parts[parts.length - 1];
+      console.log(`🚀 ~ nextTick ~ filetype:`, filetype)
+      let wpsType = "w"; 
+      if(filetype=='doc' || filetype=='docx'){
+        showType.value = '1';
+        wpsType = "w";
+      }else if(filetype=='pdf'){
+        showType.value = '1';
+        wpsType = "f";
+      }else if(filetype=='ppt' || filetype=='pptx' ){
+        showType.value = '1';
+        wpsType = "p";
+      }else if(filetype=='xls' || filetype=='xlsx' ){
+        showType.value = '1';
+        wpsType = "s";
+      }
+
+    if(showType.value == '1'){
+      const element = document.getElementById('wpsiframeid');
+      console.log('userStore.getUserInfo',userStore.getUserInfo)
+      formData.id = '1863389832580046849';
+      // 清空内容
+      element.innerHTML = '';
+      const jssdk = WebOfficeSDK.init({
+        officeType: wpsType,
+        appId: 'SX20241118WSUGQN',
+        // fileId: formData.stuId,
+        fileId: formData.id,
+        mount:document.querySelector('.wps-iframe'),
+        commonOptions: {
+          isShowDocMap: false, //是否开启目录功能，默认开启
+          isShowTopArea: false, // 隐藏顶部区域（头部和工具栏）
+          isShowHeader: false, // 隐藏头部区域
+          isBrowserViewFullscreen: true, // 是否在浏览器区域全屏
+          isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
+          acceptVisualViewportResizeEvent: true // 控制 WebOffice 是否接受外部的 VisualViewport
+        },
+        wordOptions: {
+          isShowDocMap: false, // 是否开启目录功能，默认开启
+          isBestScale: true, // 打开文档时，默认以最佳比例显示
+          isShowBottomStatusBar: false, // 是否展示底部状态栏
+        },
+        token: userStore.getUserInfo.username
+      })
+    }
+
+  });
+}
+
+function lastString(record) {
+  console.log('😓', record);
+  const parts = record.split('/');
+  console.log('🧔', parts);
+  return parts[parts.length - 1];
+}
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  // 触发表单验证
+  await validate();
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+
+  if (model.wwcc == '1') {
+    if (!model.wwtgl) {
+      createMessage.warning('网络通过率不能为空');
+      confirmLoading.value = false;
+      return;
+    }
+  }
+  if (model.nwcc == '1') {
+    if (!model.nwtgl) {
+      createMessage.warning('内网通过率不能为空');
+      confirmLoading.value = false;
+      return;
+    }
+  }
+  if (model.aigccc == '1') {
+    if (!model.aigctgl) {
+      createMessage.warning('AIGC通过率不能为空');
+      confirmLoading.value = false;
+      return;
+    }
+  }
+  if (model.xncc == '1') {
+    if (!model.xntgl) {
+      createMessage.warning('校内通过率不能为空');
+      confirmLoading.value = false;
+      return;
+    }
+  }
+
+  await saveOrUpdate(model, isUpdate.value)
+    .then((res) => {
+      if (res.success) {
+        createMessage.success(res.message);
+        emit('ok');
+      } else {
+        createMessage.warning(res.message);
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+//选择考察内容
+function handleKcnr(kcnr) {
+  if (kcnr) {
+    defHttp.get({ url: '/teachingunitcontent/kcTeachingUnitContentOne/getAllList', params: { id: kcnr } }).then((res) => {
+      console.log('🤦‍♀️', res);
+      dataKhnr.value = res;
+    });
+  } else {
+    dataKhnr.value = [];
+  }
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  min-height: 300px !important;
+  overflow-y: auto;
+  padding: 24px 24px 24px 24px;
+}
+.spanSm {
+  top: -22px;
+  position: inherit;
+  padding: 0 0 0 164px;
+  color: #a9a9a9;
+}
+.spana {
+  margin-left: 30px;
+  line-height: 30px;
+}
+.spanb {
+  margin-left: 30px;
+  line-height: 30px;
+}
+.spanb-word {
+  color: #999999;
+}
+.wrapper-back {
+  background: #fff;
+  border-radius: 10px;
+  margin-top: 10px;
+  padding-top: 15px;
+  width: 100%;
+}
+.wrapper-title {
+  font-size: 18px;
+  border-left: 4px solid #1ab394;
+  font-weight: bold;
+  padding-left: 20px;
+  margin-bottom: 20px;
+}
+.Check-title{
+  color: #333;
+  font-weight: bold;
+}
+.Check-concent{
+  color: #999;
+}
+</style>
diff --git a/src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm copy.vue b/src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm copy.vue
new file mode 100644
index 0000000..f185c44
--- /dev/null
+++ b/src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm copy.vue	
@@ -0,0 +1,484 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+      <a-row>
+        <a-col :push="leftSpan - 1" :span="0" :lg="{ span: 1 }">
+          <!-- <a-button style="margin-left: 28px;" type="primary" @click="changeSpan" size="small">{{ leftSpan == 12? '放大' : '缩小' }}</a-button> -->
+          <img v-show="leftSpan == 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
+            src="/resource/img/toright.png" />
+          <img v-show="leftSpan != 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
+            src="/resource/img/toleft.png" />
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :xs="24" :lg="leftSpan">
+          <div v-show="showType == '1'">
+            <div class="wps-iframe" id="wpsiframeid" style="width:100%;height: 500px;"></div>
+          </div>
+          <div v-if="showType == '2'">
+            <div style="padding: 10px 20px;">
+              <a-button type="primary" @click="rotateImage">顺时针旋转</a-button>
+              <a-button type="primary" @click="rotateImage2" style="margin-left: 20px;">逆时针旋转</a-button>
+            </div>
+
+            <div class="image-container">
+              <img :src="ylurl" :style="{ transform: 'rotate(' + rotationAngle + 'deg)' }" class="rotated-image" />
+            </div>
+          </div>
+          <div v-if="showType == '3'">
+            <div class="video-container">
+              <video ref="videoPlayer" :controls="controls" :autoplay="autoplay" :loop="loop" :src="videoUrl"
+                @loadedmetadata="playVideoInFullscreen">
+              </video>
+            </div>
+          </div>
+          <!-- <div v-else>
+            <a-button type="primary">下载文件</a-button>
+          </div> -->
+        </a-col>
+        <a-col :xs="24" :lg="rightSpan">
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="作业名称">
+                {{ zyInfo.title }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="学生姓名">
+                {{ formData.studentName }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="学生学号">
+                {{ formData.createBy }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="评分" v-bind="validateInfos.score">
+                <a-input-number v-model:value="formData.score" style="width: 100%" placeholder="请填写评分"></a-input-number>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="批阅内容" v-bind="validateInfos.pyContent">
+                <JEditor v-model:value="formData.pyContent" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="批阅附件" v-bind="validateInfos.pyFilePath">
+                <j-upload v-model:value="formData.pyFilePath" maxCount="1" :text="`上传批阅附件`"
+                  style="background: #ededed; " :forceAcceptVerify="true"></j-upload>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24" style="text-align: center;" v-if="disabled">
+              <div>
+                <a-button type="primary" @click="submitForm">保存</a-button>
+                <a-button type="primary" @click="submitNextForm" style="margin-left: 10px;">保存并下一个</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-col>
+
+      </a-row>
+    </a-form>
+  </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, onUnmounted } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
+import { getValueType } from '/@/utils';
+import { saveOrUpdate } from '../ZyInfoStudent.api';
+import { Form } from 'ant-design-vue';
+import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
+import { useGlobSetting } from '/@/hooks/setting';
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { getToken } from '/@/utils/auth';
+import WebOfficeSDK from './wpsApi/web-office-sdk-solution-v2.0.7.es'
+import { useUserStore } from '/@/store/modules/user';
+
+const leftSpan = ref(12)
+const rightSpan = ref(12)
+const userStore = useUserStore();
+const props = defineProps({
+  formDisabled: { type: Boolean, default: false },
+  formData: { type: Object, default: () => { } },
+  formBpm: { type: Boolean, default: true }
+});
+const formRef = ref();
+const useForm = Form.useForm;
+const emit = defineEmits(['register', 'ok', 'ok2']);
+const formData = reactive<Record<string, any>>({
+  id: '',
+  score: '',
+  pyContent: '',
+  pyFilePath: '',
+});
+const { createMessage } = useMessage();
+const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
+const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
+const confirmLoading = ref<boolean>(false);
+const showType = ref<string>('1');
+const ylurl = ref<string>('');
+const rotationAngle = ref(0);
+const zyInfo = ref<any>({});
+const globSetting = useGlobSetting();
+const baseApiUrl = globSetting.domainUrl;
+
+const videoPlayer = ref(null);
+const videoOpen = ref<boolean>(false);
+const controls = ref(true);
+const autoplay = ref(false)
+const loop = ref(false);
+const videoUrl = ref<String>('');
+const jssdkInfo = ref<any>({});
+const record_ = ref(null)
+
+function changeSpan() {
+  console.log('leftSpan', leftSpan.value)
+  console.log('rightSpan', rightSpan.value)
+  if (leftSpan.value == 12) {
+    leftSpan.value = 18
+    rightSpan.value = 6
+  } else {
+    leftSpan.value = 12
+    rightSpan.value = 12
+  }
+  console.log('leftSpan--》', leftSpan.value)
+  console.log('rightSpan--》', rightSpan.value)
+  edit(record_.value)
+}
+
+//表单验证
+const validatorRules = {
+  score: [{ required: true, message: '请输入分数!' }],
+};
+const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
+
+// 表单禁用
+const disabled = computed(() => {
+  if (props.formBpm === true) {
+    if (props.formData.disabled === false) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+  return props.formDisabled;
+});
+
+function handleJyfz(record) {
+  console.log(`🚀 ~ handleJyfz ~ record:`, record)
+  // if(zyInfo.score){
+  //   if(parseInt(record) > parseInt(zyInfo.score)){
+  //     createMessage.warning('评分不能超过预设作业分值!');
+  //     formData.score = zyInfo.score;
+  //   }
+  // }else{
+  //   if(parseInt(record) > 100){
+  //     createMessage.warning('评分不能超过100分!');
+  //     formData.score = zyInfo.score;
+  //   }
+  // }
+
+  if (parseInt(record) > 100) {
+    createMessage.warning('评分不能超过100分!');
+    formData.score = '';
+  }
+
+  if (parseInt(record) < 0) {
+    createMessage.warning('评分不能低于0分!');
+    formData.score = '';
+  }
+
+}
+
+function rotateImage() {
+  rotationAngle.value += 90; // 每次点击旋转90度
+}
+
+function rotateImage2() {
+  rotationAngle.value -= 90; // 每次点击旋转90度
+}
+/**
+ * 新增
+ */
+function add() {
+  edit({});
+}
+
+/**
+ * 编辑
+ */
+function edit(record) {
+  record_.value = record
+  showType.value = '1';
+  formData.pyContent = ''
+  nextTick(() => {
+    resetFields();
+
+    defHttp.get({ url: '/zyInfo/zyInfo/queryById', params: { id: record.mainId } }).then(res => {
+      console.log(`🚀 ~ defHttp.get ~ res:`, res)
+      zyInfo.value = res;
+    })
+    const parts = record.filePath.split('.');
+    const filetype = parts[parts.length - 1];
+    console.log(`🚀 ~ nextTick ~ filetype:`, filetype)
+    // var file = getFileAccessHttpUrl(record.filePath);
+    // ylurl.value = file;
+    let wpsType = "w";
+    if (filetype == 'jpg' || filetype == 'png' || filetype == 'jpeg' || filetype == 'xls' || filetype == 'xlsx' || filetype == 'text') {
+      showType.value = '2';
+      var file = getFileAccessHttpUrl(record.filePath);
+      ylurl.value = file;
+    } else if (filetype == 'doc' || filetype == 'docx') {
+      showType.value = '1';
+      wpsType = "w";
+    } else if (filetype == 'pdf') {
+      showType.value = '1';
+      wpsType = "f";
+    } else if (filetype == 'ppt' || filetype == 'pptx') {
+      showType.value = '1';
+      wpsType = "p";
+    } else if (filetype == 'xls' || filetype == 'xlsx') {
+      showType.value = '1';
+      wpsType = "s";
+    } else if (filetype == 'mp4' || filetype == 'avi' || filetype == 'mp3' || filetype == 'wav') {
+      showType.value = '3';
+      let url = getFileAccessHttpUrl(record.filePath);
+      console.log('视频预览-----》', url);
+      // videoOpen.value = true;
+      videoUrl.value = url;
+    } else {
+      showType.value = '0';
+    }
+    //赋值
+    Object.assign(formData, record);
+
+    formData.id = '1863389832580046849';
+
+    console.log("🚀 ~ nextTick ~ formData.id:", formData.id)
+    if (showType.value == '1') {// 获取元素
+      const element = document.getElementById('wpsiframeid');
+      // 清空内容
+      element.innerHTML = '';
+      const jssdk = WebOfficeSDK.init({
+        officeType: wpsType,
+        appId: 'SX20241118WSUGQN',
+        fileId: formData.id,
+        mount: document.querySelector('.wps-iframe'),
+        commonOptions: {
+          isShowDocMap: false, //是否开启目录功能，默认开启
+          // isShowTopArea: false, // 隐藏顶部区域（头部和工具栏）
+          // isShowHeader: false, // 隐藏头部区域
+          isBrowserViewFullscreen: true, // 是否在浏览器区域全屏
+          isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
+          acceptVisualViewportResizeEvent: true // 控制 WebOffice 是否接受外部的 VisualViewport
+        },
+        wordOptions: {
+          isShowDocMap: false, // 是否开启目录功能，默认开启
+          isBestScale: true, // 打开文档时，默认以最佳比例显示
+          isShowBottomStatusBar: false, // 是否展示底部状态栏
+        },
+        token: userStore.getUserInfo.username
+      })
+    }
+
+  });
+  console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
+  console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
+  console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
+}
+
+// --------------------------视频------------------------------
+const playVideo = () => {
+  videoPlayer.value.play();
+};
+
+const pauseVideo = () => {
+  videoPlayer.value.pause();
+};
+const handleFullScreenChange = () => {
+  if (!document.fullscreenElement) {
+    console.log('Video exited fullscreen');
+    // 这里可以执行取消全屏后的逻辑
+    videoOpen.value = false;
+    videoPlayer.value.pause();
+  }
+};
+
+function videoHandleCancel() {
+  pauseVideo();
+  videoOpen.value = false;
+}
+onMounted(() => {
+  document.addEventListener('fullscreenchange', handleFullScreenChange);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullScreenChange);
+});
+
+//视频预览
+function handleVideo(three) {
+  let url = getFileAccessHttpUrl(three.filePath);
+  console.log('视频预览-----》', url);
+  videoOpen.value = true;
+  videoUrl.value = url;
+  playVideoInFullscreen();
+  // setTimeout(() => {
+  //   playVideo();
+  // }, 1000);
+
+}
+
+// --------------------------视频------------------------------
+const playVideoInFullscreen = async () => {
+  if (videoPlayer.value) {
+    try {
+      // 使用原生DOM方法请求全屏
+      // await videoPlayer.value.requestFullscreen();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+};
+
+/**
+ * 提交数据
+ */
+async function submitForm() {
+  // 触发表单验证
+  await validate();
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+
+  defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
+    emit('ok');
+  })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+  // await saveOrUpdate(model, isUpdate.value)
+  //   .then((res) => {
+  //     if (res.success) {
+  //       createMessage.success(res.message);
+  //       emit('ok');
+  //     } else {
+  //       createMessage.warning(res.message);
+  //     }
+  //   })
+  //   .finally(() => {
+  //     confirmLoading.value = false;
+  //   });
+}
+
+/**
+ * 提交数据并下一个
+ */
+async function submitNextForm() {
+  // 触发表单验证
+  await validate();
+  confirmLoading.value = true;
+  const isUpdate = ref<boolean>(false);
+  //时间格式化
+  let model = formData;
+  if (model.id) {
+    isUpdate.value = true;
+  }
+  //循环数据
+  for (let data in model) {
+    //如果该数据是数组并且是字符串类型
+    if (model[data] instanceof Array) {
+      let valueType = getValueType(formRef.value.getProps, data);
+      //如果是字符串类型的需要变成以逗号分割的字符串
+      if (valueType === 'string') {
+        model[data] = model[data].join(',');
+      }
+    }
+  }
+
+  await defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
+    emit('ok2');
+  })
+
+
+  await defHttp.get({ url: '/zyInfoStudent/zyInfoStudent/getList2', params: { column: 'createTime', order: 'asc', pageNo: 1, pageSize: 10, ywid: zyInfo.value.id, rwbh: zyInfo.value.rwbh, queryType: 5 } }).then(res => {
+    console.log(`🚀 ~ awaitdefHttp.post ~ res:`, res)
+    var list = res.records;
+    if (list.length > 0) {
+      edit(list[0])
+    } else {
+      createMessage.warning('已批阅完毕,暂无下一条批阅数据！');
+    }
+  })
+    .finally(() => {
+      confirmLoading.value = false;
+    });
+}
+
+defineExpose({
+  add,
+  edit,
+  submitForm,
+});
+</script>
+
+<style lang="less" scoped>
+.antd-modal-form {
+  min-height: 150px !important;
+  overflow-y: auto;
+  padding: 24px 24px 24px 24px;
+}
+
+.video-container {
+  text-align: center;
+}
+
+video {
+  display: block;
+  max-width: 100%;
+  /* 确保视频宽度不超过其容器宽度 */
+}
+
+.image-container {
+  padding: 10px;
+  width: 100%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 设置容器高度 */
+  overflow: hidden;
+  /* 隐藏溢出的部分 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rotated-image {
+  max-width: 100%;
+  /* 最大宽度为容器宽度 */
+  max-height: 100%;
+  /* 最大高度为容器高度 */
+  object-fit: contain;
+  /* 保持图片内容不失真 */
+  transform: rotate(90deg);
+  /* 假设图片已经旋转90度 */
+}
+</style>