Преглед изворни кода

feat: 为特定机构添加PPT小班课专属路由

针对org为311882ee-4e86-11f1-9985-005056924926的机构,跳转时使用独立的pptEasyClassPS路由组件,新增对应路由配置并替换原有跳转路径逻辑
lsc пре 5 дана
родитељ
комит
d5086766bf
3 измењених фајлова са 1254 додато и 4 уклоњено
  1. 25 4
      src/components/courseDetail.vue
  2. 1223 0
      src/components/pptEasyClass/indexPS.vue
  3. 6 0
      src/router/index.js

+ 25 - 4
src/components/courseDetail.vue

@@ -1460,8 +1460,14 @@ export default {
         }
       }  else if (this.courseDetail.state == 7) {
         if(this.classList.length){
+          let psOrg = ['311882ee-4e86-11f1-9985-005056924926']
+          let route = '/pptEasyClass'
+          if(psOrg.includes(this.org)){
+            route = '/pptEasyClassPS'
+          }
+
           this.goTo(
-            "/pptEasyClass?type=" +
+            route + "?type=" +
               this.checkStage +
               "&courseId=" +
               this.id +
@@ -1481,8 +1487,13 @@ export default {
               id
           );
         }else {
+          let psOrg = ['311882ee-4e86-11f1-9985-005056924926']
+          let route = '/pptEasyClass'
+          if(psOrg.includes(this.org)){
+            route = '/pptEasyClassPS'
+          }
           this.goTo(
-            "/pptEasyClass?type=" +
+            route + "?type=" +
               this.checkStage +
               "&courseId=" +
               this.id +
@@ -1681,8 +1692,13 @@ export default {
                   this.screenType
               );
             }else if (this.courseDetail.state == 7) {
+              let psOrg = ['311882ee-4e86-11f1-9985-005056924926']
+              let route = '/pptEasyClass'
+              if(psOrg.includes(this.org)){
+                route = '/pptEasyClassPS'
+              }
               this.goTo(
-                "/pptEasyClass?type=" +
+                route + "?type=" +
                   this.checkStage +
                   "&courseId=" +
                   this.id +
@@ -1798,8 +1814,13 @@ export default {
                   this.screenType
               );
             }else if (this.courseDetail.state == 7) {
+              let psOrg = ['311882ee-4e86-11f1-9985-005056924926']
+              let route = '/pptEasyClass'
+              if(psOrg.includes(this.org)){
+                route = '/pptEasyClassPS'
+              }
               this.goTo(
-            "/pptEasyClass?type=" +
+              route + "?type=" +
               this.checkStage +
               "&courseId=" +
               this.id +

+ 1223 - 0
src/components/pptEasyClass/indexPS.vue

@@ -0,0 +1,1223 @@
+<template>
+  <div class="pptEasyClass">
+    <div class="pec_main" v-loading="pageLoading">
+      <!-- 录音转文字 -->
+      <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;" :src="iframeSrcop" ref="iiframe"
+        v-show="false"></iframe>
+      <div class="pec_header">
+        <div class="pec_h_left">
+          <!-- || tType == 1 -->
+          <div @click.stop="back" class="backBtn" v-if="screenType != 2">
+            <img src="../../assets/icon/newIcon/return.svg" alt="" />
+          </div>
+          <div v-if="tcid" class="class-info-group">
+            <span class="class-label">{{ lang.ssClass }}</span>
+            <span class="class-value class-value2" @click="openSelectClass">
+              {{ className }}
+              <svg t="1776672009773" class="xia-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+                p-id="4735" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
+                <path
+                  d="M562.5 771c-14.3 14.3-33.7 27.5-52 23.5-18.4 3.1-35.7-11.2-50-23.5L18.8 327.3c-22.4-22.4-22.4-59.2 0-81.6s59.2-22.4 81.6 0L511.5 668l412.1-422.3c22.4-22.4 59.2-22.4 81.6 0s22.4 59.2 0 81.6L562.5 771z"
+                  p-id="4736" fill="currentColor"></path>
+              </svg>
+            </span>
+          </div>
+          <div v-if="tcid" class="class-info-group">
+            <span class="class-label" v-if="inviteCode">{{ lang.ssInviteCode }}</span>
+            <span class="class-value" v-if="inviteCode">{{ inviteCode }}</span>
+          </div>
+        </div>
+        <div class="pec_h_center">
+          <el-tooltip effect="dark" :content="lang.ssRefresh" placement="bottom">
+            <div class="refresh_icon" @click="refreshCourse">
+              <img src="../../assets/icon/course/refresh-2.svg" />
+            </div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark"
+            :content="recordedForm.status == 1 ? lang.ssFinishClassRecording : lang.ssBeginClassRecording"
+            placement="bottom"
+            v-show="(jArray.includes(oid) || jArray.includes(org)) && courseDetail.userid == userid && tcid">
+            <div class="pec_h_r_btn_refresh" :class="{ 'recording': recordedForm.status == 1 }"
+              @click="toggleRecording">
+              <svg t="1772588344140" viewBox="0 0 1024 1024" p-id="1693" width="200" height="200">
+                <path
+                  d="M512 1024a512.568889 512.568889 0 0 1-512-512 512.625778 512.625778 0 0 1 512-512 512.568889 512.568889 0 0 1 512 512 512.568889 512.568889 0 0 1-512 512zM512 73.329778c-241.948444 0-438.670222 196.835556-438.670222 438.670222S270.051556 950.670222 512 950.670222s438.670222-196.835556 438.670222-438.670222S753.948444 73.329778 512 73.329778z m0 686.592a245.191111 245.191111 0 1 1 0-490.382222 245.191111 245.191111 0 0 1 0 490.382222z"
+                  p-id="1694"></path>
+              </svg>
+              <span>{{ recordedForm.status == 1 ? lang.ssStopRecording2 : lang.ssRecord }}</span>
+            </div>
+          </el-tooltip>
+
+          <el-tooltip effect="dark" :content="courseDetail.title" placement="bottom">
+            <div class="pec_h_l_title">
+              <span>{{ courseDetail.title }}</span>
+            </div>
+          </el-tooltip>
+          <div class="free-browse-switch" v-if="courseDetail.userid == userid">
+            <el-switch v-model="freeBrowse" :active-value="false" :inactive-value="true" class="custom-switch"
+              active-color="#03ae2b" inactive-color="#d8d8d8" @change="onFreeBrowseChange"></el-switch>
+            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? lang.ssFreeBrowse :
+              lang.ssFollowMode }}</span>
+          </div>
+          <div class="free-browse-switch" v-if="tType == 2">
+            <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? lang.ssFreeBrowse :
+              lang.ssFollowMode }}</span>
+          </div>
+
+        </div>
+        <div class="pec_h_right">
+          <div class="pec_h_r_btnArea">
+            <!-- openObserveDialog -->
+            <!-- toggleRecording -->
+
+            <div class="pec_h_r_btn_uploadVoiceBtn" @click="uploadVoiceBtn" v-if="courseDetail.userid == userid"
+              v-show="false">
+              <span>{{ lang.ssUploadRecordingFile }}</span>
+            </div>
+
+            <div class="pec_h_r_btn_afterClass" @click="afterClass" v-if="courseDetail.userid == userid">
+              <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
+              <span>{{ lang.ssEndClass }}</span>
+            </div>
+
+            <div class="name_box" v-if="tType == 2">
+              {{ userJson.username }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="pec_content">
+        <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read"
+          webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc"
+          v-if="showIframe" style="width: 100%; height: 100%; border: none" ref="ppt"></iframe>
+      </div>
+    </div>
+
+    <!-- 课堂观察弹窗 -->
+    <el-dialog :visible.sync="showObserveDialog" :close-on-click-modal="false" :close-on-press-escape="false"
+      :show-close="true" width="90%" top="5vh" class="observe-dialog">
+      <iframe v-if="showObserveDialog" :src="observeDialogUrl" frameborder="0"
+        style="width: 100%; height: 85vh; border: none;"></iframe>
+    </el-dialog>
+    <selectTeachingClassDialog :courseDetail="courseDetail" :userId="userid" ref="selectTeachingClassDialogRef" @success="selectClassSuccess" @changeClassList="changeClassList"/>
+
+
+    <!-- 消息提示组件 -->
+    <messageInstruction ref="messageInstructionRef"></messageInstruction>
+    <!-- 确认提示组件 -->
+    <confirmInstruction ref="confirmInstructionRef"></confirmInstruction>
+  </div>
+</template>
+
+<script>
+import { myMixin } from '../../mixins/mixin';
+import selectTeachingClassDialog from "../dialog/selectTeachingClassDialog2.vue";
+
+import messageInstruction from '../components/messageInstruction.vue';
+import confirmInstruction from '../components/confirmInstruction.vue';
+export default {
+  mixins: [myMixin],
+  components: {
+    messageInstruction,
+    confirmInstruction,
+    selectTeachingClassDialog
+  },
+  data() {
+    return {
+      id: this.$route.query.courseId,
+      userid: this.$route.query.userid,
+      classId: this.$route.query.cid,
+      role: this.$route.query.role,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      tType: this.$route.query.tType,
+      courseType: this.$route.query.type,
+      screenType: this.$route.query.screenType,
+      tcid2: this.$route.query.tcid,
+      classList: [],
+      tcid: "",
+      className: "",
+      showIframe: false,
+      iframeSrc: "",
+      courseDetail: {},
+      pageLoading: false,
+      inviteCode: "",
+      startTime: "",
+      freeBrowse: true, // 默认自由浏览
+      opertimer: null, // 定时器
+      jArray: [],
+      // 录音相关变量
+      languageRadio: 2, // 语言选择
+      recordedForm: {
+        status: 0, // 0: 未开始, 1: 录音中, 2: 暂停, 3: 结束
+        startTime: 0,
+        endTime: 0,
+        timeDuration: 0,
+        textList: [],
+        audioBlob: []
+      },
+      controlsStatus: 0, // 控制状态
+      showIndexPage: true, // 显示索引页
+      pageStatus: 1, // 页面状态
+      editorBarData: {
+        type: "0",
+        content: ""
+      },
+      uploadFileLoading: false, // 上传文件加载状态
+      transcriptionData: {
+        content: ""
+      },
+      showGetTextLoading: false, // 显示获取文本加载状态
+      // 弹窗相关
+      showObserveDialog: false, // 显示课堂观察弹窗
+      observeDialogUrl: "", // 课堂观察链接
+      // 录音时间记录
+      recordingStartTime: "", // 开始录音时间
+      recordingEndTime: "", // 结束录音时间
+    };
+  },
+  computed: {
+    iframeSrcop() {
+      if (this.$region == 'hk') {
+        return `https://cloud.cocorobo.hk/browser/public/index.html`;
+      } else if (this.$region == 'com') {
+        return `https://cloud.cocorobo.com/browser/public/index.html`;
+      } else {
+        return `https://beta.cloud.cocorobo.cn/browser/public/index.html`;
+      }
+    }
+  },
+  methods: {
+    openSelectClass(){
+      this.$refs.selectTeachingClassDialogRef.open({classList:this.classList}, this.tcid2)
+    },
+    addInviteCodeOne(cid) {
+      return new Promise((resolve)=>{
+        let params = [
+        {
+          courseId: this.id,
+          inviteCode: cid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "add_courseInviteCode2", params)
+        .then((res) => {
+          console.log(res.data)
+          resolve(res.data)
+        })
+        .catch((err) => {
+          resolve(err.messages)
+          console.error(err);
+        });
+      })
+    },
+    async selectClassSuccess(classId){
+      if(classId){
+        let data = await this.addInviteCodeOne(classId)
+        console.log("addInviteCodeOne",data)
+        this.tcid2 = classId
+        this.getClassName()
+        this.getCourseDetail();
+      }else if(this.tcid2){
+        this.ticd2 = ''
+        this.getCourseDetail();
+      }
+      // this.gotoCourse(classId);
+      this.$refs.selectTeachingClassDialogRef.close();
+    },
+    async changeClassList(data){
+      this.classList = JSON.parse(JSON.stringify(data))
+      let params = [{
+        cid:this.id,
+        juri:this.classList.map(i=>i.id).join(',')
+      }]
+      this.ajax.post(this.$store.state.api+"update_CourseJuriById",params).then(res=>{
+        if(res.data==1){
+          console.log(this.lang.ssModifySuccess)
+        }
+      })
+
+      //this.inviteCodeFn();
+    },
+    goTo(path) {
+      this.$router.push(path);
+    },
+    refreshCourse() {
+      this.getCourseDetail();
+    },
+    audioStart() {
+      this.onStartRecordWithMicrosoft();
+    },
+    toggleRecording() {
+      return new Promise(resolve => {
+        if (this.recordedForm.status == 1) {
+          // 检查录音时间是否至少为5秒
+          const now = new Date();
+          const duration = (now - new Date(this.recordingStartTime)) / 1000;
+          if (duration < 5) {
+            this.$message.warning(this.lang.ssRecordingTimeAtLeast5Seconds);
+            return;
+          }
+
+          this.$refs.confirmInstructionRef.open({
+            title: this.lang.ssStopRecordingConfirm,
+            message: this.lang.ssStopRecordingNotice,
+            cancelText: this.lang.ssCancel,
+            submitText: this.lang.ssConfirm,
+            submitCallback: () => {
+              console.log("确定")
+              this.onFinishRecordWithMicrosoft().then(() => {
+                resolve(true)
+              });
+            },
+            cancelCallback: () => {
+              console.log("取消")
+              resolve(false)
+            },
+          })
+
+          // this.$confirm(this.lang.ssStopRecordingNotice, this.lang.ssStopRecordingConfirm, {
+          //   confirmButtonText: this.lang.ssConfirm,
+          //   cancelButtonText: this.lang.ssCancel,
+          //   confirmButtonClass: "pptEasyClassConfirmButtonText",
+          //   cancelButtonClass: "pptEasyClassCancelButtonText"
+          // }).then(() => {
+          //   console.log("确定")
+          //   // this.$message({
+          //   //   dangerouslyUseHTMLString: true,
+          //   //   customClass:"pptEasyClassMessage",
+          //   //   message: '已停止录制 <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank">查看结果</p>'
+          //   // });
+          //   this.onFinishRecordWithMicrosoft().then(() => {
+          //     resolve(true)
+          //   });
+          // }).catch(() => {
+          //   console.log("取消")
+          //   resolve(false)
+          // });
+
+        } else {
+          const now = new Date();
+          const duration = (now - new Date(this.recordingEndTime)) / 1000;
+          if (duration < 5) {
+            this.$message.warning('录音时间至少间距5秒');
+            return;
+          }
+          this.onStartRecordWithMicrosoft();
+          resolve(true)
+        }
+      })
+      // })
+    },
+    // ============ start 微软录音转译
+    onStartRecordWithMicrosoft() {
+      let iiframe = this.$refs["iiframe"];
+      iiframe.contentWindow.window.document.getElementById(
+        "languageOptions"
+      ).selectedIndex = this.languageRadio;
+
+      // 录音开始
+      let flag = true;
+      console.log("开始录音", iiframe);
+      this.recordedForm.status = 1;
+      // 记录开始录音时间
+      this.recordingStartTime = new Date().toLocaleString("zh-CN", {
+        hour12: false,
+        timeZone: "Asia/Shanghai"
+      }).replace(/\//g, "-");
+      iiframe.contentWindow.window.onRecognizedResult = e => {
+        console.log("onRecognizedResult", e);
+        this.recordedForm.endTime = this.recordedForm.timeDuration;
+        if (flag) {
+          this.controlsStatus = 1;
+          this.showIndexPage = false;
+          this.pageStatus = 2;
+          this.editorBarData.type = "0";
+          flag = false;
+          this.uploadFileLoading = false;
+          this.transcriptionData.content = "";
+          this.editorBarData.content = "";
+          this.recordedForm.textList = [];
+        }
+        this.showGetTextLoading = true;
+        let privText = e.privText;
+        let privSpeakerId = e.privSpeakerId;
+        let _copyPrivSpeakerId = privSpeakerId;
+        console.log("👇转译对象👇");
+        console.log(e);
+        console.log("👇转译结果👇");
+        console.log(privText);
+        if (!privText || !privSpeakerId || privSpeakerId == "Unknown") {
+          return;
+        }
+
+        const newItem = {
+          value: privText,
+          role: "",
+          startTime: this.updateRecordedTime({
+            duration: this.recordedForm.startTime
+          }),
+          endTime: this.updateRecordedTime({
+            duration: this.recordedForm.endTime
+          }),
+          time: this.updateRecordedTime({
+            duration: this.recordedForm.endTime - this.recordedForm.startTime
+          })
+        };
+        this.recordedForm.textList.push(newItem);
+        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
+        this.transcriptionData.content +=
+          _copyPrivSpeakerId + ":" + privText + "\n";
+        this.onRecordAddLine(newItem);
+      };
+
+      iiframe.contentWindow.ConversationTranscriber();
+      setTimeout(() => {
+        navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
+          if (permissionStatus.state !== "granted") {
+            // 没有开启录音权限,直接确定停止录音
+            this.recordedForm.status = "0";
+            let iframe = this.$refs["iiframe"];
+            iframe.contentWindow.onSessionStopped = null;
+            iframe.contentWindow.window.onRecognizedResult = null;
+            this.$message.success(this.lang.ssNoPermStop);
+            return;
+          }
+        })
+      }, 10000)
+
+    },
+    async onFinishRecordWithMicrosoft() {
+      return new Promise(resolve => {
+        navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(async permissionStatus => {
+          if (permissionStatus.state !== "granted") {
+            // 没有开启录音权限,直接确定停止录音
+            this.recordedForm.status = "0";
+            let iframe = this.$refs["iiframe"];
+            iframe.contentWindow.onSessionStopped = null;
+            iframe.contentWindow.window.onRecognizedResult = null;
+            this.$message.success(this.lang.ssNoPermStop);
+            return;
+          }
+          if (this.recordedForm.status == 1) {
+            //正在录音时
+            let iiframe = this.$refs["iiframe"];
+            iiframe.contentWindow.window.document
+              .getElementById("scenarioStopButton")
+              .click();
+            // 录音借宿
+            iiframe.contentWindow.onSessionStopped = async (s, e) => {
+              this.recordedForm.status = 0;
+              this.controlsStatus = 2;
+              this.showGetTextLoading = false;
+              // this.$message.success("已结束录音");
+
+              console.log("结束录音👇");
+              console.log("结束录音", e);
+              this.recordedForm.audioBlob.push(e.preaudio);
+              let blob = new Blob(this.recordedForm.audioBlob, {
+                type: "audio/wav"
+              });
+              let file = new File([blob], "recordedFile.wav", {
+                type: "audio/wav"
+              });
+              // 存储文件和文本到全局对象
+              await this.storeRecordingData(file);
+              // 记录结束录音时间
+              this.recordingEndTime = new Date().toLocaleString("zh-CN", {
+                hour12: false,
+                timeZone: "Asia/Shanghai"
+              }).replace(/\//g, "-");
+              // 调用 addPPTClass 接口
+              this.addPPTClass(file);
+              iiframe.contentWindow.onSessionStopped = null;
+              iiframe.contentWindow.window.onRecognizedResult = null;
+              resolve(true)
+            };
+          } else if (this.recordedForm.status == 2) {
+            //暂停录音时
+            this.recordedForm.status = 0;
+            this.controlsStatus = 2;
+            this.showGetTextLoading = false;
+            let blob = new Blob(this.recordedForm.audioBlob, {
+              type: "audio/wav"
+            });
+            let file = new File([blob], "recordedFile.wav", { type: "audio/wav" });
+            // 存储文件和文本到全局对象
+            await this.storeRecordingData(file);
+            // 记录结束录音时间
+            this.recordingEndTime = new Date().toLocaleString("zh-CN", {
+              hour12: false,
+              timeZone: "Asia/Shanghai"
+            }).replace(/\//g, "-");
+            // 调用 addPPTClass 接口
+            this.addPPTClass(file);
+            resolve(true)
+          }
+        })
+      })
+    },
+    storeRecordingData(file) {
+      // 配置全局 window 对象存储录音数据
+      return new Promise((resolve) => {
+        if (!window.recordingData) {
+          window.recordingData = {};
+        }
+        window.recordingData.file = file;
+        window.recordingData.text = this.transcriptionData.content;
+        window.recordingData.textList = this.recordedForm.textList;
+        // 将录音文件转为base64并存入localStorage
+        // const reader = new FileReader();
+        // reader.onload = function(e) {
+        //   const base64data = e.target.result;
+        //   try {
+        //     localStorage.setItem("recordedFileBase64", base64data);
+        //     localStorage.setItem('recordedFileName', file.name);
+        //     localStorage.setItem('recordedFileType', file.type);
+        resolve(true)
+        //     console.log("录音数据已存储到全局对象:", window.recordingData);
+        //   } catch (err) {
+        //     resolve(false)
+        //     console.error("localStorage存储base64文件失败:", err);
+        //   }
+        // };
+        // reader.readAsDataURL(file);
+      })
+    },
+    openObserveDialog(pptid, file) {
+      // this.observeDialogUrl = `https://observe.cocorobo.cn/#/newClassroom?userid=${this.userid}&oid=${this.oid}&org=${this.org}&pptid=${pptid}`;
+      // this.showObserveDialog = true;
+
+      const url = `https://observe.cocorobo.cn/#/newClassroom?userid=${this.userid}&oid=${this.oid}&org=${this.org}&pptid=${pptid}`;
+
+      const _pageWindow = window.open(url, '_blank');
+
+      // if(!_pageWindow){
+      //   alert('浏览器弹窗被拦截,请允许弹窗后重试');
+      //   return;
+      // }
+      const sendData = {
+        type: 'fileData',
+        file,
+      }
+      const sendMessageToVue3 = () => {
+        _pageWindow.postMessage(
+          sendData,
+          '*' // targetOrigin:必须是Vue3的实际域名,不要用*(安全)
+        );
+      };
+
+      const handleVue3Ready = (e) => {
+        // 校验消息来源(安全:只处理Vue3域名的消息)
+
+        // 校验消息类型(确认是Vue3的就绪通知)
+        if (e.data.type === 'READY') {
+          console.log('已就绪,开始发送数据');
+          sendMessageToVue3();
+        }
+
+        // 校验Vue3的"接收成功"确认(可选,进一步确保送达)
+        if (e.data.type === 'DATA_RECEIVED') {
+          console.log('数据已被接收');
+          // 收到确认后移除监听,避免内存泄漏
+          window.removeEventListener('message', handleVue3Ready);
+        }
+      };
+      window.addEventListener('message', handleVue3Ready);
+      const timeoutTimer = setTimeout(() => {
+        console.log('未收到就绪通知,主动发送数据');
+        sendMessageToVue3();
+        // 移除监听(兜底后清理)
+        window.removeEventListener('message', handleVue3Ready);
+      }, 5000);
+
+      const checkWinClosed = setInterval(() => {
+        if (_pageWindow.closed) {
+          clearTimeout(timeoutTimer);
+          clearInterval(checkWinClosed);
+          window.removeEventListener('message', handleVue3Ready);
+        }
+      }, 1000);
+      // 优化:仅通过轮询方式检查窗口是否加载完成并发送消息,被打开页面无需做任何处理
+      // const sendFileData = () => {
+      //   if (_pageWindow && !_pageWindow.closed) {
+      //     _pageWindow.postMessage(
+      //       {
+      //         type: 'fileData',
+      //         file,
+      //       },
+      //       '*'
+      //     );
+      //   }
+      // };
+
+      // let checkCount = 0;
+      // const checkLoadedInterval = setInterval(() => {
+      //   if (!_pageWindow || _pageWindow.closed) {
+      //     clearInterval(checkLoadedInterval);
+      //     return;
+      //   }
+      //   try {
+      //     if (_pageWindow.document && _pageWindow.document.readyState === 'complete') {
+      //       clearInterval(checkLoadedInterval);
+      //       sendFileData();
+      //     }
+      //   } catch (err) {
+      //     // 跨域下直接尝试发送
+      //     clearInterval(checkLoadedInterval);
+      //     sendFileData();
+      //   }
+      //   if (++checkCount > 20) {
+      //     // 最多检测2秒(20次)
+      //     clearInterval(checkLoadedInterval);
+      //     sendFileData();
+      //   }
+      // }, 100);
+
+      setTimeout(() => {
+        window.focus()
+      }, 100)
+
+      function openPageWindow() {
+        _pageWindow.focus()
+      }
+
+      this.$refs.messageInstructionRef.pptMessage(`${this.lang.ssStoppedRecording} <p style="color:#3AB855;text-decoration: underline;cursor: pointer;float:right;margin-left:10px" target="_blank" onClick="(${openPageWindow.toString()})()">${this.lang.ssViewRecordingResult}</p>`)
+
+    },
+    addPPTClass(file) {
+      let params = {
+        pptid: this.id,
+        cid: this.tcid,
+        st: this.recordingStartTime,
+        et: this.recordingEndTime
+      };
+      this.ajax
+        .post(this.$store.state.api + "addPPTClass", [params])
+        .then(res => {
+          console.log("addPPTClass", res);
+          let id = res.data[0][0].id;
+          this.openObserveDialog(id, file);
+        })
+        .catch(err => {
+          console.error(err);
+          this.$message.error("保存录音信息失败");
+        });
+    },
+    updateRecordedTime({ duration }) {
+      // 格式化录音时间
+      const minutes = Math.floor(duration / 60);
+      const seconds = Math.floor(duration % 60);
+      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    },
+    onRecordAddLine(item) {
+      // 添加录音文本行
+      console.log("添加录音文本行:", item);
+      // 这里可以根据需要添加更多处理逻辑
+    },
+    getCourseDetail() {
+      this.pageLoading = true;
+      let params = {
+        courseId: this.id
+      };
+
+      this.ajax
+        .get(this.$store.state.api + "selectCourseDetail3", params)
+        .then(res => {
+          console.log("getCourseDetail", res);
+          this.courseDetail = res.data[0][0];
+          this.courseDetail.chapters = JSON.parse(this.courseDetail.chapters);
+          this.tcid = this.arrayToArray(
+            this.courseDetail.juri ? this.courseDetail.juri.split(",") : [],
+            this.tcid2 ? this.tcid2.split(",") : []
+          )[0] || "";
+          console.log('tcid', this.tcid)
+          console.log('tcid2', this.tcid2)
+          if (this.tcid && res.data[1].length) {
+            let _inviteA = [];
+            for (var ik = 0; ik < res.data[1].length; ik++) {
+              _inviteA.push({
+                cid: res.data[1][ik].classid,
+                ic: res.data[1][ik].code,
+              });
+            }
+            for (var ik = 0; ik < _inviteA.length; ik++) {
+              if (
+                this.arrayToArray(
+                  _inviteA[ik].cid.split(","),
+                  this.tcid.split(",")
+                ).length
+              ) {
+                this.inviteCode = _inviteA[ik].ic;
+                break;
+              }
+            }
+          }
+          this.setPptIframe()
+          this.classList = res.data[2]
+          if(!this.tcid2 && this.tType == '1'){
+            this.$refs.selectTeachingClassDialogRef.open({classList:this.classList})
+          }
+          this.pageLoading = false;
+        })
+        .catch(err => {
+          console.log(err);
+          this.$message.error(this.lang.ssGetCourseDataFail);
+          this.pageLoading = false;
+        });
+    },
+    setPptIframe() {
+      this.showIframe = false;
+
+      this.$nextTick(() => {
+        let api = 'https://psyy.cocorobo.cn/'
+        // if (this.$region == 'beta') {
+        //   api = 'https://beta.ppt.cocorobo.cn'
+        // } else if (this.$region == 'hk') {
+        //   api = 'https://ppt.cocorobo.hk'
+        // } else if (this.$region == 'com') {
+        //   api = 'https://ppt.cocorobo.com'
+        // } else {
+        //   api = 'https://ppt.cocorobo.cn'
+        // }
+        let _url = api + `/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;
+
+        this.iframeSrc = _url;
+
+        this.showIframe = true;
+      });
+    },
+    arrayToArray(arrayo, arrayt) {
+      let array1 = arrayo;
+      let array2 = arrayt;
+
+      let commonElements = [];
+
+      for (let i = 0; i < array1.length; i++) {
+        for (let j = 0; j < array2.length; j++) {
+          if (array1[i] === array2[j]) {
+            commonElements.push(array1[i]);
+          }
+        }
+      }
+      return commonElements;
+    },
+    async getClassName() {
+      let courseGrade = await this.ajax.get(this.$store.state.api + "getClassById", { id: this.tcid2 });
+      this.className = courseGrade.data[0][0].grade;
+    },
+    back() {
+      // if (this.tType != 2) {
+      //   this.goTo(
+      //     '/courseDetail?userid=' +
+      //     this.userid +
+      //     '&oid=' +
+      //     this.oid +
+      //     '&org=' +
+      //     this.org +
+      //     '&cid=' +
+      //     this.classId +
+      //     '&courseId=' +
+      //     this.id +
+      //     '&tType=' +
+      //     this.tType +
+      //     '&screenType=' +
+      //     this.screenType
+      //   )
+      // } else {
+      this.goTo(
+        '/index?userid=' +
+        this.userid +
+        '&oid=' +
+        this.oid +
+        '&org=' +
+        this.org +
+        '&cid=' +
+        this.classId +
+        '&tType=' +
+        this.tType +
+        '&screenType=' +
+        this.screenType
+      )
+      // }
+    },
+    afterClass() {
+      if (this.recordedForm.status == 1) {
+        this.toggleRecording().then((flag) => {
+          if (flag) {
+
+            this.$refs.confirmInstructionRef.open({
+              title: this.lang.ssPrompt,
+              message: this.lang.ssEndClassConfirm,
+              cancelText: this.lang.ssCancel,
+              submitText: this.lang.ssConfirm,
+              submitCallback: () => {
+                this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
+                this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
+                setTimeout(() => {
+                  this.tcid2 = ""
+                  this.refreshCourse()
+                }, 1000)
+              },
+              cancelCallback: () => {
+                console.log("取消")
+              }
+            })
+
+
+            //   this.$confirm(this.lang.ssEndClassConfirm, this.lang.ssPrompt, {
+            //     confirmButtonText: this.lang.ssConfirm,
+            //     cancelButtonText: this.lang.ssCancel,
+            //     type: 'warning'
+            //   }).then(() => {
+            //     this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
+            //     this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
+            //     setTimeout(() => {
+            //       this.tcid2 = ""
+            //       this.refreshCourse()
+            //     }, 1000)
+            //   }).catch(() => { });
+
+          }
+        })
+      } else {
+        // this.$confirm(this.lang.ssEndClassConfirm, this.lang.ssPrompt, {
+        //   confirmButtonText: this.lang.ssConfirm,
+        //   cancelButtonText: this.lang.ssCancel,
+        //   type: 'warning'
+        // }).then(() => {
+        //   this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
+        //   this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
+        //   setTimeout(() => {
+        //     this.tcid2 = ""
+        //     this.refreshCourse()
+        //   }, 1000)
+        // }).catch(() => { });
+        this.$refs.confirmInstructionRef.open({
+          title: this.lang.ssPrompt,
+          message: this.lang.ssEndClassConfirm,
+          cancelText: this.lang.ssCancel,
+          submitText: this.lang.ssConfirm,
+          submitCallback: () => {
+            this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
+            this.$refs.messageInstructionRef.pptMessage(this.lang.ssStudentLoggedOut)
+            setTimeout(() => {
+              this.tcid2 = ""
+              this.refreshCourse()
+            }, 1000)
+          },
+          cancelCallback: () => {
+            console.log("取消")
+          }
+        })
+      }
+
+    },
+    onFreeBrowseChange(value) {
+      this.freeBrowse = value;
+      console.log('自由浏览模式已切换为1:', this.freeBrowse);
+      this.$refs.ppt.contentWindow.PPTistStudent.toggleFollowMode()
+    },
+    setOperationTime() {
+      let _this = this;
+      if (_this.opertimer) {
+        clearInterval(_this.opertimer);
+        _this.opertimer = null;
+      }
+      _this.opertimer = setInterval(() => {
+        _this.setoTime("600");
+      }, 600000);
+    },
+    setoTime(time) {
+      this.doSyncClassData();
+      let params = [
+        {
+          uid: this.userid,
+          cid: this.id + (this.tcid2 || ''),
+          type: "2",
+          time: time,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addOperationTimeT2", params)
+        .then((res) => { })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    getAIJ() {
+      this.ajax.get(this.$store.state.api + "getAIJ", "").then(res => {
+        let a = res.data[4];
+        console.log(a)
+        let Array = [];
+        a.forEach(i => Array.push(i.oid))
+        this.jArray = Array;
+      })
+    },
+    doSyncClassData() {
+      if (this.courseDetail.userid == this.userid && this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840') {
+        let endTime = new Date().toLocaleString("zh-CN", {
+          hour12: false,
+          timeZone: "Asia/Shanghai"
+        }).replace(/\//g, "-")
+        let courseTime = Math.floor((new Date(endTime) - new Date(this.startTime)) / (1000 * 60))
+        this.syncClassData({
+          courseId: this.id,
+          title: this.courseDetail.title,
+          courseGrade: this.tcid2 ? this.tcid2 : '',
+          courseTime: courseTime,
+          startTime: this.startTime,
+          endTime: endTime,
+        })
+        console.log('同步数据')
+      }
+    },
+    // 直接上传录制音频/视频
+    uploadVoiceBtn() {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = '.m4a,.mp4,.mov,.mp3,.wav';
+      input.click();
+      input.onchange = (e) => {
+        const fileList = e.target.files;
+        const file = fileList[0]
+        this.recordingStartTime = new Date(window.recordingStartTime ? window.recordingStartTime : new Date()).toLocaleString("zh-CN", {
+          hour12: false,
+          timeZone: "Asia/Shanghai"
+        }).replace(/\//g, "-");
+        this.recordingEndTime = new Date(window.recordingEndTime ? window.recordingEndTime : new Date()).toLocaleString("zh-CN", {
+          hour12: false,
+          timeZone: "Asia/Shanghai"
+        }).replace(/\//g, "-");
+        this.addPPTClass(file)
+        // 判断文件类型并获取音频或视频时长
+        // if (file && (file.type.startsWith('audio/') || file.type.startsWith('video/'))) {
+        //   const url = URL.createObjectURL(file);
+        //   let media;
+        //   if (file.type.startsWith('audio/')) {
+        //     media = new Audio();
+        //   } else {
+        //     media = document.createElement('video');
+        //   }
+        //   media.preload = 'metadata';
+        //   media.src = url;
+        //   media.onloadedmetadata = () => {
+        //     const duration = media.duration;
+        //     console.log('文件时长(秒):', duration);
+        //     // 这里可以赋值或者进一步处理时长 duration
+        //     URL.revokeObjectURL(url);
+        //   };
+        //   media.onerror = () => {
+        //     console.error('无法读取文件时长');
+        //     URL.revokeObjectURL(url);
+        //   };
+        // }
+      }
+    }
+  },
+  destroyed() {
+    clearInterval(this.opertimer);
+    this.opertimer = null;
+    this.doSyncClassData();
+  },
+  async mounted() {
+    this.setoTime("1");
+    this.startTime = new Date().toLocaleString("zh-CN", {
+      hour12: false,
+      timeZone: "Asia/Shanghai"
+    }).replace(/\//g, "-")
+    this.getClassName()
+    this.getAIJ();
+    this.getCourseDetail();
+    this.setOperationTime();
+    window.onFreeBrowseChange = (value) => {
+      this.freeBrowse = value;
+      console.log('自由浏览模式已切换为:', this.freeBrowse);
+    }
+    if (!this.userJson || !this.userJson.accountNumber) {
+      let res = await this.ajax.get(this.$store.state.api + "selectUser", {
+        userid: this.$route.query.userid
+      });
+      this.userJson = res.data[0][0]
+    }
+    setTimeout(() => {
+      this.doSyncClassData();
+    }, 1000);
+  }
+};
+</script>
+
+<style scoped>
+.pptEasyClass {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: #f2f2f2;
+  min-height: unset;
+}
+
+.pec_main {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+.pec_header {
+  width: 100%;
+  height: 60px;
+  background: #FCCF00;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  box-shadow: 0px 4px 12px 0px #3648601F;
+  padding: 0 10px;
+  box-sizing: border-box;
+}
+
+.pec_h_left {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  /* 保持左侧靠左 */
+}
+
+.pec_h_center {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.pec_h_l_title {
+  font-weight: bold;
+  font-size: 20px;
+  color: #0e1e33;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 500px;
+  text-overflow: ellipsis;
+}
+
+.pec_h_right {
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.pec_h_r_btnArea {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pec_h_r_btnArea>div {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  background-color: #f0f4fa;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
+  color: #000;
+  border: 1px solid #cad1dc;
+}
+
+.pec_h_r_btnArea>div+div {
+  margin-left: 10px;
+}
+
+.pec_h_r_btnArea>div>img {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+}
+
+.pec_h_center>.pec_h_r_btn_refresh {
+  color: #fff;
+  /* background-color: #0061ff;
+  border-color: #0061ff; */
+  padding: 9px 10px;
+  margin-right: 15px;
+  border-radius: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background: #FFF7F5;
+  color: #000000;
+  font-weight: 400;
+  cursor: pointer;
+  fill: #666666;
+}
+
+.pec_h_center>.pec_h_r_btn_refresh>svg {
+
+  width: 1rem;
+  height: 1rem;
+}
+
+.pec_h_center>.pec_h_r_btn_refresh.recording {
+  /* background-color: #F53F3F;
+  border-color: #F53F3F; */
+  background: #FFF7E8;
+  fill: #FF9300;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0.4);
+  }
+
+  70% {
+    box-shadow: 0 0 0 10px rgba(245, 63, 63, 0);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 63, 63, 0);
+  }
+}
+
+.pec_h_r_btnArea>.pec_h_r_btn_afterClass {
+  border-color: #F0E1DD;
+  background-color: #FFF7F5;
+  color: #F53F3F;
+}
+
+.pec_h_r_btn_uploadVoiceBtn {
+  border-color: #F0E1DD;
+  background-color: #FFF7F5;
+  color: #000;
+}
+
+.backBtn {
+  width: 15px;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.backBtn img {
+  width: 100%;
+  height: 100%;
+}
+
+.class-info-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.class-label {
+  font-size: 18px;
+  font-weight: bold;
+  color: #222;
+  margin-right: 5px;
+}
+
+.class-value {
+  font-size: 16px;
+  color: #222;
+  background: #FFFFFF3D;
+  border: 1px solid #00000080;
+  border-radius: 5px;
+  padding: 5px 18px;
+  min-width: 60px;
+  text-align: center;
+  display: inline-block;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.class-value2 {
+  cursor: pointer;
+  background: #fff;
+}
+
+.class-value > svg{
+  width: 13px;
+  height: 13px;
+  margin-left: 8px;
+}
+
+.pec_content {
+  width: 100%;
+  height: calc(100% - 60px);
+  border-radius: 0 0 12px 12px;
+  background-color: #fff;
+}
+
+.free-browse-switch {
+  display: flex;
+  align-items: center;
+  padding: 9px 10px;
+  background: #FFF7F5;
+  border-radius: 26px;
+  margin-left: 15px;
+  gap: 5px;
+}
+
+.switch-label {
+  /* background: linear-gradient(to right, #F53F3F, #FCCF00); */
+  /* -webkit-background-clip: text; */
+  color: #000;
+}
+
+.refresh_icon {
+  width: 35px;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff7f5;
+  border-radius: 45%;
+  cursor: pointer;
+  margin-right: 15px;
+  padding: 0 3px;
+}
+
+.refresh_icon img {
+  width: 16px;
+  height: 16px;
+}
+
+.name_box {
+  background: unset !important;
+  border: none !important;
+  cursor: unset !important;
+}
+
+.observe-dialog>>>.el-dialog__header {
+  padding: 0;
+}
+
+.observe-dialog>>>.el-dialog__body {
+  padding: 0;
+}
+
+.observe-dialog>>>.el-dialog__headerbtn {
+  top: 22px;
+  right: 20px;
+  z-index: 100;
+}
+</style>

+ 6 - 0
src/router/index.js

@@ -40,6 +40,7 @@ import studyStudentTrain from '@/components/trainCourse/studyStudent'
 import studyStudentE2Train from '@/components/trainCourse/easy2/studyStudent'
 import studyStudentE3Train from '@/components/trainCourse/easy3/studyStudent'
 import pptEasyClass from '@/components/pptEasyClass'
+import pptEasyClassPS from '@/components/pptEasyClass/indexPS'
 
 import cn from "../lang/cn.json";
 import hk from "../lang/hk.json";
@@ -293,6 +294,11 @@ export default new Router({
             name: 'pptEasyClass',
             component: pptEasyClass,
             requireAuth: ''
+        },{
+            path: '/pptEasyClassPS',
+            name: 'pptEasyClassPS',
+            component: pptEasyClassPS,
+            requireAuth: ''
         }
     ]
 })